{ "components": { "buttons": { "description": "Create a button with a `button` or `a` element to retain the native click\nfunction.\n\nUse a disabled attribute when a button can’t be clicked.", "annotations": { "summary": "Buttons are used to invoke an event", "layout": "responsive", "name": "buttons", "support": "dev-ready", "base": true, "role": "button", "type": "action", "category": "base", "selector": ".slds-button" }, "id": "buttons", "restrictees": [ { "description": "The base `.slds-button` looks like a plain text link. It removes all the\nstyling of the native button. It’s typically used to trigger a modal or\ndisplay a “like” link. All button variations are built by adding another\nclass to `.slds-button`.\n\nAdd the `.slds-button--neutral` class to create a neutral button, which\nhas a white background and gray border.\n\nUse a neutral icon button is for buttons with an icon on the left or\nright (not for stateful buttons). Add the `.slds-button--neutral` class\nto `.slds-button`.\n\nThe SVG inside receives the `.slds-button__icon` class. You can position\nthe icon on the right or the left using `.slds-button__icon--right` or\n`.slds-button__icon--left` , which apply the correct amount of space\nbetween the icon and the text.\n\nTo create the brand button, add the `.slds-button--brand` class to\nthe `.slds-button` class.\n\nTo create the destructive button, add the `.slds-button--destructive`\nclass to the `.slds-button` class.\n\nUse the inverse button on dark backgrounds. Add the `.slds-button--inverse`\nclass to the `.slds-button` class.", "annotations": { "summary": "This neutralizes all the base styles making it look like a text link", "name": "base", "selector": ".slds-button", "restrict": "button, a, span", "variant": true }, "id": "base", "restrictees": [ { "description": "Creates the gray border with white background default style", "annotations": { "selector": ".slds-button_neutral", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_neutral", "restrictees": [] }, { "description": "Creates the brand blue Salesforce style", "annotations": { "selector": ".slds-button_brand", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_brand", "restrictees": [] }, { "description": "Creates the inverse style for dark backgrounds", "annotations": { "selector": ".slds-button_inverse", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_inverse", "restrictees": [] }, { "description": "Creates a red button style", "annotations": { "selector": ".slds-button_destructive", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": ".slds-button_destructive", "restrictees": [] }, { "description": "Creates a green button style", "annotations": { "selector": ".slds-button_success", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": ".slds-button_success", "restrictees": [] }, { "description": "Creates a smaller button style", "annotations": { "selector": ".slds-button_small", "restrict": ".slds-button", "deprecated": true }, "id": ".slds-button_small", "restrictees": [] }, { "description": "The stateful button requires the `.slds-button--neutral` class in addition to the `.slds-button` class.\n\nThe stateful inverse button works just like the stateful button. It requires the `.slds-button--inverse` class in addition to the `.slds-button` class.\n\nIt uses the class `.slds-not-selected` in its initial state. When the user activates the button, use JavaScript to toggle the class to `.slds-is-selected`. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the `.slds-button__icon--stateful` class as well as the `.slds-button__icon--left` class setting the icon on the left.\n\nStateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is `.slds-not-selected`, and JavaScript is used to toggle it to `.slds-is-selected` when activated.\n\n#### Accessibility\n\nFor accessibility, include the attribute `aria-live=\"assertive\"` on the button. The `aria-live=\"assertive\"` attribute means the value of the `<span>` inside the button will be spoken whenever it changes.", "annotations": { "summary": "Initiates a stateful button", "name": "stateful", "selector": ".slds-button_stateful", "restrict": ".slds-button", "variant": true }, "id": "stateful", "restrictees": [ { "description": "Default state of a stateful button", "annotations": { "selector": ".slds-not-selected", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-not-selected", "restrictees": [] }, { "description": "When button is selected and still has focus from click", "annotations": { "selector": ".slds-is-selected-clicked", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-is-selected-clicked", "restrictees": [] }, { "description": "When button is pressed and selected", "annotations": { "selector": ".slds-is-selected", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-is-selected", "restrictees": [] } ], "markup": "<button class=\"slds-button slds-button_stateful slds-button_neutral slds-not-selected\" aria-live=\"assertive\">\n <span class=\"slds-text-not-selected\">\n <svg class=\"slds-button__icon_stateful slds-button__icon_left\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#add\"></use>\n </svg>Follow</span>\n <span class=\"slds-text-selected\">\n <svg class=\"slds-button__icon_stateful slds-button__icon_left\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>Following</span>\n <span class=\"slds-text-selected-focus\">\n <svg class=\"slds-button__icon_stateful slds-button__icon_left\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n </svg>Unfollow</span>\n</button>", "markupContext": [] }, { "description": "Sizing for icon that sits inside button--icon", "annotations": { "name": "with-icon", "selector": ".slds-button__icon", "restrict": ".slds-button svg", "variant": true }, "id": "with-icon", "restrictees": [ { "description": "Large size button icon svg", "annotations": { "selector": ".slds-button__icon_large", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_large", "restrictees": [] }, { "description": "Small size button icon svg", "annotations": { "selector": ".slds-button__icon_small", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_small", "restrictees": [] }, { "description": "x-small size button icon svg", "annotations": { "selector": ".slds-button__icon_x-small", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_x-small", "restrictees": [] } ], "markup": "<button class=\"slds-button\">\n <svg class=\"slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n </svg>Button Neutral</button>", "markupContext": [] } ], "markup": "<button class=\"slds-button\">Button</button>", "markupContext": [] } ] }, "dueling-picklist": { "description": "#### Accessibility\nThis component is essentially 2 ARIA listboxes side by side, so we follow the [ARIA practices guide](https://www.w3.org/TR/wai-aria-practices/#Listbox) to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:\n\n**Notable attributes**\n- `aria-multiselectable=\"true\"` should be set on each listbox\n- `aria-selected` should be placed on each `role=\"option`, and only set to `true` when selected\n- `aria-labelledby` is used to identify the list to the user and should point to the list label\n- `aria-describedby` is used to provide operation instructions for the Drag and Drop interaction\n\n- *Keyboard navigation**\n- Each list is a tab stop. This provides identification and operation instruction as provided by `aria-describedby` and `aria-labelledby`. State of the overall list is also provided, including total number and number of selected options in the list when focused.\n- Because we support drag and drop re-ordering, we implement the second multi-select keyboard model.\n - Up and Down arrows move focus _and_ selection, with `aria-selected=\"true\"`\n - `shift + up` and `shift + down` moved focus and creates addition selections\n - `ctrl + down` or `ctrl + up` moves focus but selection remains where it is\n - `ctrl + space` toggles selection on the focused option, in addition to previous selections\n - `ctrl + a` selects all options in the list\n - `cmd/ctrl + right` and `cmd/ctrl + left` Moves selected items between lists\n - `space` toggles \"Drag and Drop\" mode. When in \"Drag and Drop\" mode:\n - Up and Down arrows move the selected items _within_ the current list\n\n**Updating Operation and State**\n- As a user interacts with the component, pay close attention to the content of the `aria-live` region and the `option-drag-label` assistive text. This is to provide clear instruction to the user on how to proceed, and what has happened in each State the component will be in", "annotations": { "summary": "Dueling picklist are used to move options between two lists. The list options can be re-ordered.", "base": true, "name": "dueling-picklist", "selector": ".slds-dueling-list", "support": "prototype", "category": "experience", "type": "data-entry", "role": "listbox" }, "id": "dueling-picklist", "restrictees": [ { "description": "A dueling picklist inherits styles from the listbox component", "annotations": { "summary": "Initializes a dueling picklist", "name": "base", "selector": ".slds-dueling-list", "restrict": "div", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Handles the layout of the dueling picklist", "selector": ".slds-dueling-list__column", "restrict": ".slds-dueling-list div" }, "id": ".slds-dueling-list__column", "restrictees": [] }, { "description": "", "annotations": { "summary": "Bounding visual container for listbox of options", "selector": ".slds-dueling-list__options", "restrict": ".slds-dueling-list div" }, "id": ".slds-dueling-list__options", "restrictees": [] } ], "markup": "<div class=\"slds-dueling-list\">\n <div class=\"slds-assistive-text\" id=\"drag-live-region\" aria-live=\"assertive\"></div>\n <div class=\"slds-assistive-text\" id=\"option-drag-label\">Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.</div>\n <div class=\"slds-dueling-list__column\">\n <span class=\"slds-form-element__label\" id=\"label-49\">First Category</span>\n <div class=\"slds-dueling-list__options\" role=\"application\">\n <ul aria-describedby=\"option-drag-label\" aria-labelledby=\"label-49\" aria-multiselectable=\"true\" class=\"slds-listbox slds-listbox_vertical\" role=\"listbox\" tabindex=\"0\">\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"0\">\n <span class=\"slds-truncate\" title=\"Option 1\">Option 1</span>\n </span>\n </li>\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-truncate\" title=\"Option 2\">Option 2</span>\n </span>\n </li>\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-truncate\" title=\"Option 3\">Option 3</span>\n </span>\n </li>\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-truncate\" title=\"Option 6\">Option 6</span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"slds-dueling-list__column\">\n <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Up\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#right\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Move Selection to Second Category</span>\n </button>\n <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Down\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#left\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Move Selection to First Category</span>\n </button>\n </div>\n <div class=\"slds-dueling-list__column\">\n <span class=\"slds-form-element__label\" id=\"label-54\">Second Category</span>\n <div class=\"slds-dueling-list__options\" role=\"application\">\n <ul aria-describedby=\"option-drag-label\" aria-labelledby=\"label-54\" aria-multiselectable=\"true\" class=\"slds-listbox slds-listbox_vertical\" role=\"listbox\" tabindex=\"0\">\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"0\">\n <span class=\"slds-truncate\" title=\"Option 4\">Option 4</span>\n </span>\n </li>\n <li role=\"presentation\" class=\"slds-listbox__item\">\n <span class=\"slds-listbox__option slds-listbox__option_plain slds-media\" aria-selected=\"false\" draggable=\"true\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-truncate\" title=\"Option 5\">Option 5</span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"slds-dueling-list__column\">\n <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Up\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#up\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Move Selection Up</span>\n </button>\n <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Down\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Move Selection Down</span>\n </button>\n </div>\n</div>", "markupContext": [] } ] }, "cards": { "description": "To initialize a card, apply the `.slds-card` class to a containing `<article>`.\nA card is made up of three sections, a header, a body, and a footer.\nThe card header will get the `.slds-card__header` class.\nThe card body will get the `.slds-card__body` class. The card footer will\nget the `.slds-card__footer` class.", "annotations": { "summary": "Cards are used to apply a container around a related grouping of information.", "layout": "responsive", "name": "cards", "support": "dev-ready", "base": true, "role": "presentation", "type": "data-display, layout", "category": "structure", "selector": ".slds-card" }, "id": "cards", "restrictees": [ { "description": "The base card is used primarily on desktop within a &ldquo;wide&rdquo; column\nor &ldquo;main content area&rdquo;, which uses two-thirds of the viewport.\nIn addition, the `.slds-card` class is used for layout purposes\nwhen a card has an adjacent card, those proceeding the initial will provide margin\nto give the cards spacing between each other.", "annotations": { "summary": "Initializes card", "name": "base", "selector": ".slds-card", "restrict": "article, div", "variant": true }, "id": "base", "restrictees": [ { "description": "Initializes card header", "annotations": { "selector": ".slds-card__header", "restrict": ".slds-card div" }, "id": ".slds-card__header", "restrictees": [] }, { "description": "Initializes card body", "annotations": { "selector": ".slds-card__body", "restrict": ".slds-card div" }, "id": ".slds-card__body", "restrictees": [] }, { "description": "Initializes card footer", "annotations": { "selector": ".slds-card__footer", "restrict": ".slds-card footer" }, "id": ".slds-card__footer", "restrictees": [] } ], "markup": "<article class=\"slds-card\">\n <div class=\"slds-card__header slds-grid\">\n <header class=\"slds-media slds-media_center slds-has-flexi-truncate\">\n <div class=\"slds-media__figure\">\n <span class=\"slds-icon_container slds-icon-standard-contact\" title=\"description of icon when needed\">\n <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#contact\"></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-media__body\">\n <h2>\n <a href=\"javascript:void(0);\" class=\"slds-card__header-link slds-truncate\" title=\"[object Object]\">\n <span class=\"slds-text-heading_small\">Card Header</span>\n </a>\n </h2>\n </div>\n </header>\n <div class=\"slds-no-flex\">\n <button class=\"slds-button slds-button_neutral\">New</button>\n </div>\n </div>\n <div class=\"slds-card__body slds-card__body_inner\">Card Body (custom goes in here)</div>\n <footer class=\"slds-card__footer\">Card Footer</footer>\n</article>", "markupContext": [] } ] }, "checkbox": { "description": "The ability to style checkboxes with CSS varies across browsers.\nTo ensure that checkboxes look the same everywhere, we use a custom DOM.\nPay close attention to the markup, because all elements must exist for the\nstyles to work.\n\n#### Accessibility\n\nGroups of checkboxes should be marked up using the fieldset and legend\nelement. This helps someone using assistive technology to understand the\nquestion they're answering with the group of checkboxes. The fieldset is\nplaced around the whole group and the legend contains the question.\n\nCustom checkboxes are created by applying the `.slds-checkbox` class to\na `<label>` element. To remain accessible to all user agents, place\n`<input>` with `type=\"checkbox\"` inside the `<label>` element. The `<input>`\nis then visually hidden, and the styling is placed on a span with\nthe `.slds-checkbox--faux` class. The styling of the span changes based\non whether the checkbox is selected or focused by using a pseudo-element.\nA second span with `.slds-form-element__label` contains the label text.\n\nWhen a single checkbox is required, `<div class=\"slds-checkbox\">` should\nget `<abbr class=\"required\" title=\"required\">*</abbr>` added to the DOM,\ndirectly before the `<input type=\"checkbox\" />` for visual indication\nthat the checkbox is required.\n\nWhen a checkbox group is required, the `<fieldset>` should receive the\nclass `.slds-is-required`. The `<legend>` should then get\n`<abbr class=\"required\" title=\"required\">*</abbr>` added to the DOM for\nvisual indication that the checkbox group is required.\n\nAs SLDS checkboxes rely on the :checked psuedo selector, and the\nindeterminate state is only accessible via JavaScript, the use of a\nCSS class on the input will be necessary to implement this in SLDS.\nUse JavaScript to add the class when the indeterminate property is set to\ntrue on the input.\n\nThe following JavaScript demonstrates how to set a checkbox to be indeterminate:\n```js\nvar checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n```", "annotations": { "summary": "A checkable input that communicates if an option is true, false or indeterminate", "base": true, "name": "checkbox", "selector": ".slds-checkbox", "support": "dev-ready", "category": "base", "type": "data-entry", "role": "checkbox" }, "id": "checkbox", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes checkbox", "name": "base", "selector": ".slds-checkbox", "restrict": "span, label", "required": true, "variant": true }, "id": "base", "restrictees": [], "markup": "<div class=\"slds-form-element\">\n <div class=\"slds-form-element__control\">\n <span class=\"slds-checkbox\">\n <input type=\"checkbox\" name=\"options\" id=\"checkbox-69\" checked=\"\" />\n <label class=\"slds-checkbox__label\" for=\"checkbox-69\">\n <span class=\"slds-checkbox_faux\"></span>\n <span class=\"slds-form-element__label\">Checkbox Label</span>\n </label>\n </span>\n </div>\n</div>", "markupContext": [] } ] }, "prompt": { "description": "A prompt uses the base modal component and then adds the class `.slds-modal--prompt` to the overall `.slds-modal`. The utilities > themes > colors class is placed on the `.slds-modal__head` to create the color of the header. In the example, we illustrate using `.slds-theme--error`. The class `.slds-theme--alert-texture` should be applied to create the striped gradient. The `.slds-modal__footer` receives the class `.slds-theme--default`.\n\n#### Accessibility\n\nPrompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different `role` of `alertdialog` to indicate their severity. Like modals they should be labelled by their headings, but additonally they should be desscribed by the message details of the prompt.\n\nThe element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add `tab-index=\"0\"` to `slds-modal__container`.\n\nThere is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal.\n\n**Expected markup (same as Modals, but with the following differences):**\n- Modal has `role=\"alertdialog\"`\n- Modal has an `aria-describedby` attribute that matches the id of the modal message container.\n- Modal message container container should have `tab-index=\"0\"`\n\n**Expected keyboard interaction (sme as Modal, with the addition of):**\n- Modal message container should take initial focus", "annotations": { "summary": "Prompt notice grabs the user’s attention & alert them of system-related issues/updates.", "base": true, "name": "prompt", "selector": ".slds-modal_prompt", "support": "dev-ready", "category": "experience", "type": "messaging", "role": "alert" }, "id": "prompt", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes Prompt style notification", "name": "base", "selector": ".slds-modal_prompt", "restrict": ".slds-modal", "required": true, "variant": true }, "id": "base", "restrictees": [], "markup": "<div class=\"demo-only\" style=\"height:24rem;\">\n <section role=\"alertdialog\" tabindex=\"-1\" aria-labelledby=\"prompt-heading-id\" aria-describedby=\"prompt-message-wrapper\" class=\"slds-modal slds-fade-in-open slds-modal_prompt\">\n <div class=\"slds-modal__container\">\n <header class=\"slds-modal__header slds-theme_error slds-theme_alert-texture\">\n <button class=\"slds-button slds-button_icon slds-modal__close slds-button_icon-inverse\" title=\"Close\">\n <svg class=\"slds-button__icon slds-button__icon_large\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Close</span>\n </button>\n <h2 class=\"slds-text-heading_medium\" id=\"prompt-heading-id\">Service Unavailable</h2>\n </header>\n <div class=\"slds-modal__content slds-p-around_medium\" id=\"modal-content-id-1\">\n <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore\n quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>\n </div>\n <footer class=\"slds-modal__footer slds-theme_default\">\n <button class=\"slds-button slds-button_neutral\">Okay</button>\n </footer>\n </div>\n </section>\n <div class=\"slds-backdrop slds-backdrop_open\"></div>\n</div>", "markupContext": [] } ] }, "path": { "description": "#### Accessibility\n\nThis component importantly changes role depending on what state it is in. If a Sales Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Sales Stages, it&rsquo;s associated content changes with it.\n\nOn the other hand, if a Sales Path doesn&rsquo;t have Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.\n\nThe markup structure is identical, just some attributes change their values.\n\n<div class=\"slds-scrollable--x slds-p-bottom--large\">\n <table class=\"slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover\">\n <thead>\n <tr class=\"site-text-heading--label\">\n <th class=\"slds-theme--shade\" scope=\"col\">DOM Node</th>\n <th class=\"slds-theme--shade\" scope=\"col\">Without Coaching</th>\n <th class=\"slds-theme--shade\" scope=\"col\">With Coaching</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th class=\"slds-align-top\" scope=\"row\">\n <code>.slds-tabs--path__nav</code>\n </th>\n <td class=\"slds-cell-wrap slds-align-top\">\n <code>role=\"listbox\"</code>\n </td>\n <td class=\"slds-cell-wrap slds-align-top\">\n <code>role=\"tabset\"</code>\n </td>\n </tr>\n <tr>\n <th class=\"slds-align-top\" scope=\"row\">\n <code>.slds-tabs--path__link</code>\n </th>\n <td class=\"slds-cell-wrap slds-align-top\">\n <code>role=\"option\"</code>\n </td>\n <td class=\"slds-cell-wrap slds-align-top\">\n <code>role=\"tab\"</code>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n**Notable Attributes - Without Coaching**\n- `aria-orientation=\"horizontal\"` should be applied to the `slds-tabs--path__nav` element to indicate to the user to use horizontal navigation\n- `aria-selected=\"true\"` should be applied to the selected Sales Stage as you navigate through the Stages\n\n**Notable Attributes - With Coaching**\n- When the Stage Coaching is not visible, `aria-expanded=\"false\"` should be set on each `slds-tabs--path__link` Tab\n- When the Stage Coaching is visible, `aria-expanded` should be set to `true`\n- `aria-selected=\"true\"` is used to describe the currently active `slds-tabs--path__link` Tab, not the Stage the Sale is currently set to\n\n**Keyboard navigation**\n- For both with and without Stage Coaching variants, the following keyboard navigation applies\n- `left` and `right` arrow keys move focus _and_ selection, with `aria-selected=\"true\"`", "annotations": { "summary": "A process component communicates to the user the progress of a particular process.", "base": true, "name": "path", "selector": ".slds-path-coach", "support": "dev-ready", "category": "feature", "type": "process", "role": "tablist" }, "id": "path", "restrictees": [ { "description": "", "annotations": { "name": "base", "selector": ".slds-path-coach", "restrict": "div", "required": true, "variant": true }, "id": "base", "restrictees": [ { "description": "Creates the container for tabs in a path", "annotations": { "selector": ".slds-tabs_path", "restrict": ".slds-path-coach div", "required": true }, "id": ".slds-tabs_path", "restrictees": [ { "description": "Horizontal list of stages in path component", "annotations": { "selector": ".slds-tabs_path__nav", "restrict": ".slds-tabs_path ul", "required": true }, "id": ".slds-tabs_path__nav", "restrictees": [ { "description": "Individual stages of a path", "annotations": { "selector": ".slds-tabs_path__item", "restrict": ".slds-tabs_path__nav li", "required": true }, "id": ".slds-tabs_path__item", "restrictees": [ { "description": "Creates the completed stage of the path", "annotations": { "selector": ".slds-is-complete", "restrict": ".slds-tabs_path__item", "modifier": true }, "id": ".slds-is-complete", "restrictees": [] }, { "description": "Creates the current stage of the path", "annotations": { "selector": ".slds-is-current", "restrict": ".slds-tabs_path__item", "modifier": true }, "id": ".slds-is-current", "restrictees": [] }, { "description": "Creates the incomplete stage of the path", "annotations": { "selector": ".slds-is-incomplete", "restrict": ".slds-tabs_path__item", "modifier": true }, "id": ".slds-is-incomplete", "restrictees": [] }, { "description": "Creates lost stage of the path", "annotations": { "selector": ".slds-is-lost", "restrict": ".slds-tabs_path__item", "notes": "This class must be added to the \"closed\" stage with JS when the Sales Path is over by losing the opportunity", "modifier": true }, "id": ".slds-is-lost", "restrictees": [] }, { "description": "Creates the active stage of the sales path", "annotations": { "selector": ".slds-is-active", "restrict": ".slds-tabs_path__item", "notes": "This class must be placed on the item programatically when the guidance section is used", "modifier": true }, "id": ".slds-is-active", "restrictees": [] }, { "description": "Creates success stage of the path", "annotations": { "selector": ".slds-is-won", "restrict": ".slds-tabs_path__item", "modifier": true }, "id": ".slds-is-won", "restrictees": [] }, { "description": "Creates actionable element inside of each path tab", "annotations": { "selector": ".slds-tabs_path__link", "restrict": ".slds-tabs_path__item a", "required": true }, "id": ".slds-tabs_path__link", "restrictees": [ { "description": "Contains the name of the stage", "annotations": { "selector": ".slds-tabs_path__title", "restrict": ".slds-tabs_path__link span", "required": true }, "id": ".slds-tabs_path__title", "restrictees": [] }, { "description": "Contains the check mark when the stage is completed", "annotations": { "selector": ".slds-tabs_path__stage", "restrict": ".slds-tabs_path__link span", "required": true }, "id": ".slds-tabs_path__stage", "restrictees": [] } ] } ] } ] } ] }, { "description": "Button that toggles visibility of stage's tabpanel", "annotations": { "selector": ".slds-path__trigger", "restrict": ".slds-path-coach button", "required": true }, "id": ".slds-path__trigger", "restrictees": [] }, { "description": "Actionable button that invokes a completion of the path", "annotations": { "selector": ".slds-path__mark-complete", "restrict": ".slds-path-coach button", "required": true }, "id": ".slds-path__mark-complete", "restrictees": [] }, { "description": "Actionable button that invokes a current stage of the path", "annotations": { "selector": ".slds-path__mark-current", "restrict": ".slds-path-coach button", "required": true }, "id": ".slds-path__mark-current", "restrictees": [] }, { "description": "Tabpanel of each stage of the path", "annotations": { "selector": ".slds-tabs_path__content", "restrict": ".slds-path-coach div", "required": true }, "id": ".slds-tabs_path__content", "restrictees": [ { "description": "Key field section of expanded tabpanel", "annotations": { "selector": ".slds-coach__keys", "restrict": ".slds-tabs_path__content div", "required": true }, "id": ".slds-coach__keys", "restrictees": [ { "description": "Name or label of name/value pair inside of key fields section", "annotations": { "selector": ".slds-coach__item", "restrict": ".slds-coach__keys dt", "required": true }, "id": ".slds-coach__item", "restrictees": [] }, { "description": "Value of name/value pair inside of key fields section", "annotations": { "selector": ".slds-coach__value", "restrict": ".slds-coach__keys dd", "required": true }, "id": ".slds-coach__value", "restrictees": [] } ] }, { "description": "Guidance section of expanded tabpanel", "annotations": { "selector": ".slds-coach__guidance", "restrict": ".slds-tabs_path__content div", "required": true }, "id": ".slds-coach__guidance", "restrictees": [] } ] } ], "markup": "<div class=\"slds-path-coach\">\n <div class=\"slds-grid\">\n <div class=\"slds-tabs_path\" role=\"application\">\n <ul class=\"slds-tabs_path__nav\" role=\"listbox\" aria-orientation=\"horizontal\">\n <li class=\"slds-tabs_path__item slds-is-complete\" role=\"presentation\">\n <a aria-selected=\"false\" class=\"slds-tabs_path__link\" href=\"javascript:void(0);\" id=\"path-1\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-tabs_path__stage\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Stage Complete</span>\n </span>\n <span class=\"slds-tabs_path__title\">Contacted</span>\n </a>\n </li>\n <li class=\"slds-tabs_path__item slds-is-complete\" role=\"presentation\">\n <a aria-selected=\"false\" class=\"slds-tabs_path__link\" href=\"javascript:void(0);\" id=\"path-2\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-tabs_path__stage\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Stage Complete</span>\n </span>\n <span class=\"slds-tabs_path__title\">Open</span>\n </a>\n </li>\n <li class=\"slds-tabs_path__item slds-is-current\" role=\"presentation\">\n <a aria-selected=\"true\" class=\"slds-tabs_path__link\" href=\"javascript:void(0);\" id=\"path-3\" role=\"option\" tabindex=\"0\">\n <span class=\"slds-tabs_path__stage\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>\n <span class=\"slds-assistive-text\">Current Stage:</span>\n </span>\n <span class=\"slds-tabs_path__title\">Unqualified</span>\n </a>\n </li>\n <li class=\"slds-tabs_path__item slds-is-incomplete\" role=\"presentation\">\n <a aria-selected=\"false\" class=\"slds-tabs_path__link\" href=\"javascript:void(0);\" id=\"path-4\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-tabs_path__stage\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>\n </span>\n <span class=\"slds-tabs_path__title\">Nurturing</span>\n </a>\n </li>\n <li class=\"slds-tabs_path__item slds-is-incomplete\" role=\"presentation\">\n <a aria-selected=\"false\" class=\"slds-tabs_path__link\" href=\"javascript:void(0);\" id=\"path-5\" role=\"option\" tabindex=\"-1\">\n <span class=\"slds-tabs_path__stage\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>\n </span>\n <span class=\"slds-tabs_path__title\">Closed</span>\n </a>\n </li>\n </ul>\n </div>\n <button class=\"slds-button slds-button_brand slds-path__mark-complete slds-no-flex slds-m-horizontal_small\">\n <svg class=\"slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n </svg>Mark Status as Complete</button>\n </div>\n</div>", "markupContext": [] } ] }, "tiles": { "description": "Tiles are setup to be displayed with or without an image/icon. The default\npattern for tiles has an image/icon, a detail body which contains a list of\ninformation and action overflow menu dropdown. The detail body list, by\ndefault, comes as a name/value pairing but can be swapped out with a string\nof text or an inline horizontal list.\n\nTiles can have different groupings of information based on its context.\nPay close attention to the markup, as each tile layout is constructed differently.", "annotations": { "summary": "A tile is a grouping of related information associated with a record.", "base": true, "name": "tiles", "selector": ".slds-tile", "support": "dev-ready", "category": "structure", "type": "data-display" }, "id": "tiles", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes tile", "name": "base", "selector": ".slds-tile", "restrict": "article", "variant": true }, "id": "base", "restrictees": [ { "description": "Use class if card consumes any form of a tile", "annotations": { "selector": ".slds-card__tile", "restrict": ".slds-tile" }, "id": ".slds-card__tile", "restrictees": [] }, { "description": "", "annotations": { "selector": ".slds-tile__detail", "restrict": ".slds-tile div" }, "id": ".slds-tile__detail", "restrictees": [] }, { "description": "", "annotations": { "selector": ".slds-tile__meta", "restrict": ".slds-tile div" }, "id": ".slds-tile__meta", "restrictees": [] } ], "markup": "<div class=\"demo-only\" style=\"width:30rem;\">\n <article class=\"slds-tile\">\n <h3 class=\"slds-truncate\" title=\"Salesforce UX\">\n <a href=\"javascript:void(0);\">Salesforce UX</a>\n </h3>\n <div class=\"slds-tile__detail slds-text-body_small\">\n <dl class=\"slds-list_horizontal slds-wrap\">\n <dt class=\"slds-item_label slds-text-color_weak slds-truncate\" title=\"First Label\">First Label:</dt>\n <dd class=\"slds-item_detail slds-truncate\" title=\"Description for first label\">Description for first label</dd>\n <dt class=\"slds-item_label slds-text-color_weak slds-truncate\" title=\"Second Label\">Second Label:</dt>\n <dd class=\"slds-item_detail slds-truncate\" title=\"Description for second label\">Description for second label</dd>\n </dl>\n </div>\n </article>\n</div>", "markupContext": [] } ] }, "modals": { "description": "Default modals are used in the vast majority of cases. They are as wide as\n50% of the viewport, but include a minimum and maximum width to avoid going\ntoo narrow or too wide.\n\nModals always have an equal amount of space at the top and bottom to account\nfor the height of the close button.\n\nModals grow according to how much content is within, but once the modal\nreaches full height (including t