@salesforce-ux/design-system

{ "components": { "carousel": { "description": "A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time.\n\nYou are able to navigate between panels by interacting with the `slds-carousel__indicator` elements that sit below the panel.\n\nA panel becomes visible by toggling the `slds-hide` class with the `slds-show` class on the `slds-carousel__panel` element.\n\nWhen making the `slds-carousel__panel` active, the indicator should be updated with the `slds-is-active` class. This provides visual feedback showing which carousel panel is active.\n\n### Accessibility\n\nA Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:\n\n- The tab list, which should have `role=\"tablist\"`\n- The tabs in that list, which should each be an `<a role=\"tab\">` anchor wrapped in a `<li role=\"presentation\">` list item\n- The tab panels, which display each tab’s content and should each have `role=\"tabpanel\"`\n\n**Expected markup:**\n\n- Selected tab’s anchor has `aria-selected=\"true\"`, all other tabs’ anchors have `aria-selected=\"false\"`\n- Selected tab’s anchor has `tabindex=\"0\"`, all other tabs have `tabindex=\"-1\"`\n- Each tab’s anchor has an `aria-controls` attribute whose value is the id of the associated `<div role=\"tabpanel\">`\n- Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated `<a role=\"tab\">`\n- When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set\n\n**Expected keyboard interactions:**\n\n- Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab\n- Tab key, when focus is before the tab list, moves focus to the selected tab panel\n- Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements\n- Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset", "annotations": { "summary": "A carousel allows multiple pieces of featured content to occupy an allocated amount of space.", "base": true, "name": "carousel", "selector": ".slds-carousel", "support": "dev-ready", "category": "experience", "type": "navigation, data-display", "layout": "responsive" }, "id": "carousel", "restrictees": [ { "description": "", "annotations": { "summary": "Initiates a carousel component", "name": "base", "selector": ".slds-carousel", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Main stage for carousel's tab-panels and tab-list inidicators", "selector": ".slds-carousel__stage", "restrict": ".slds-carousel div" }, "id": ".slds-carousel__stage", "restrictees": [ { "description": "", "annotations": { "summary": "Tabpanel region that contains all carousel panels", "selector": ".slds-carousel__panels", "restrict": ".slds-carousel__stage div" }, "id": ".slds-carousel__panels", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable element that contains the carousel's tab-panel content", "selector": ".slds-carousel__panel-action", "restrict": ".slds-carousel__stage a" }, "id": ".slds-carousel__panel-action", "restrictees": [ { "description": "", "annotations": { "summary": "Element that contains the image inside the carousel's tab-panel", "selector": ".slds-carousel__image", "restrict": ".slds-carousel__panel-action div" }, "id": ".slds-carousel__image", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Element that contains the content inside the carousel's tab-panel", "selector": ".slds-carousel__content", "restrict": ".slds-carousel__panel-action div" }, "id": ".slds-carousel__content", "restrictees": [ { "description": "", "annotations": { "summary": "Heading element that contains the title of the carousel's tab-panel", "selector": ".slds-carousel__content-title", "restrict": ".slds-carousel__content h2" }, "id": ".slds-carousel__content-title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Element that contains the auto-play button icon to toggle on/off", "selector": ".slds-carousel__autoplay", "restrict": ".slds-carousel__stage span" }, "id": ".slds-carousel__autoplay", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "List element that contains the carousel's tab-list inidicators", "selector": ".slds-carousel__indicators", "restrict": ".slds-carousel ul" }, "id": ".slds-carousel__indicators", "restrictees": [ { "description": "", "annotations": { "summary": "Carousel's tab-list inidicator items", "selector": ".slds-carousel__indicator", "restrict": ".slds-carousel__indicators li" }, "id": ".slds-carousel__indicator", "restrictees": [ { "description": "", "annotations": { "summary": "Actionable element inside of each tab-list indicator", "selector": ".slds-carousel__indicator-action", "restrict": ".slds-carousel__indicator a" }, "id": ".slds-carousel__indicator-action", "restrictees": [ { "description": "", "annotations": { "summary": "Active state notifying the tab that its current panel is active", "selector": ".slds-is-active", "restrict": ".slds-carousel__indicator-action" }, "id": ".slds-is-active", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/carousel/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "tab-1-active", "label": "Tab 1 Active" }, { "id": "tab-2-active", "label": "Tab 2 Active" }, { "id": "tab-3-active", "label": "Tab 3 active" }, { "id": "auto-play-enabled", "label": "Auto-play enabled" }, { "id": "auto-play-stopped", "label": "Auto-play stopped" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/carousel/docs.mdx", "showcasePath": null, "showcase": [] }, "datetime-picker": { "description": "#### Implementation Notes and Requirements\n\nThe datetime picker has the following markup requirements:\n\n**Desktop**\n- Add `.slds-is-open` to the element with `.slds-dropdown-trigger` to invoke the dropdown that contains the datepicker and the list of time options.\n- On the timepicker, the `.slds-has-focus` modifier class is required on the `.slds-listbox__option` element that has focus.\n- On the timpicker, the `.slds-is-selected` modifier class is required on the `.slds-listbox__option` element that has been selected.\n- On the datepicker, the `.slds-is-selected` modifier class is required on the `td` element that has the selected day.\n- On the datepicker, the `.slds-is-today` modifier class is required on the `td` element that is the current day.\n\n**Mobile**\n- When on mobile, we want to leverage the native datetime picker by changing the `input` type from `text` to `datetime-local`\n- The `input type=\"datetime-local\"` will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes.\n- When switching `input type=\"text\"` to `input type=\"datetime-local\"` for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.\n - On the element with the class `slds-combobox`, please remove `role=\"combobox\"`, `aria-expanded`, and `aria-haspopup.\n - On the `input` that we just added `type=\"datetime-local\"` to, please remove `aria-controls`, `aria-autocomplete`, and `role=\"textbox\"`.", "annotations": { "summary": "A datetime picker is used to select a day and a time.", "base": true, "name": "datetime-picker", "selector": ".slds-datetime-picker", "support": "dev-ready", "category": "experience", "type": "data-entry", "role": "grid, combobox" }, "id": "datetime-picker", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes a datetime picker", "name": "base", "selector": ".slds-datetime-picker", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/datetime-picker/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "date-selection", "label": "Date selected" }, { "id": "time-selection", "label": "Time selected" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "slider": { "description": "The slider component is built using a native input form element with the\nattribute type of \"range\".\n\n### Implementation Notes and Requirements\n\n- `slds-slider` should be applied to the div containing both the `<input>` and the `<span>` that holds the value of the `<input>`\n- `slds-slider__range` should be applied to the `<input>` element\n - The `<input>` should have a unique ID that matches the `for` attribute on the form element `<label>`\n- The `slds-slider__range` element can accept 4 atrributes that describe the input range:\n - **value**: Current value of the input range\n - **min**: Minimum value of a specified range\n - **max**: Maximum value of a specified range\n - **step**: Indicates the granularity that is expected by limiting the allowed values\n- The `slds-slider__value` span should be updated with the current value of the `<input>`\n- The `slds-slider__value` element must have `aria-hidden=true` to hide from screen readers as they understand that value already from the `<input>`\n- The class `slds-assistive-text` can be placed on the `<label>`, or either `<span>` within the `<label>`, to visually hide the either value (or both).", "annotations": { "summary": "An input range slider lets the user specify a numeric value which must be between two specified values.", "base": true, "name": "slider", "selector": ".slds-slider", "category": "base", "type": "user-input", "support": "dev-ready", "layout": "responsive" }, "id": "slider", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes slider component", "name": "base", "selector": ".slds-slider", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Element that contains value of input range", "selector": ".slds-slider__value", "restrict": ".slds-slider span" }, "id": ".slds-slider__value", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Modifier that makes the slider vertical", "selector": ".slds-slider_vertical", "restrict": ".slds-slider", "modifier": true }, "id": ".slds-slider_vertical", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/slider/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "disabled", "label": "Disabled" }, { "id": "value-0", "label": "Value: 0" }, { "id": "value-25", "label": "Value: 25" }, { "id": "value-50", "label": "Value: 50" }, { "id": "value-75", "label": "Value: 75" }, { "id": "value-100", "label": "Value: 100" } ] }, { "title": "examples", "items": [ { "id": "min-max", "label": "Min/Max Range" }, { "id": "steps", "label": "Min/Max Range with Steps" }, { "id": "width-x-small", "label": "Width: x-small" }, { "id": "width-small", "label": "Width: small" }, { "id": "width-medium", "label": "Width: medium" }, { "id": "width-large", "label": "Width: large" }, { "id": "error", "label": "Error" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "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, .slds-button_stateful, .slds-button_dual-stateful" }, "id": "buttons", "restrictees": [ { "description": "", "annotations": { "summary": "This neutralizes all the base styles making it look like a text link", "name": "base", "selector": ".slds-button", "restrict": "button, a, span", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Explicitly style the first button in a button group", "selector": ".slds-button_first", "restrict": ".slds-button" }, "id": ".slds-button_first", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Explicitly style buttons in the middle (i.e., not first or last) in a button group", "selector": ".slds-button_middle", "restrict": ".slds-button" }, "id": ".slds-button_middle", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Explicitly style the last button in a button group", "selector": ".slds-button_last", "restrict": ".slds-button" }, "id": ".slds-button_last", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "neutral", "summary": "Creates the gray border with white background default style", "selector": ".slds-button_neutral", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": "neutral", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "brand", "summary": "Creates the brand blue Salesforce style", "selector": ".slds-button_brand", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": "brand", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "outline-brand", "summary": "Creates the outlined button with the brand color", "selector": ".slds-button_outline-brand", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": "outline-brand", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "inverse", "summary": "Creates the inverse style for dark backgrounds", "selector": ".slds-button_inverse", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": "inverse", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "destructive", "summary": "Creates a red button style", "selector": ".slds-button_destructive", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": "destructive", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "text-destructive", "summary": "Creates a neutral button with red text", "selector": ".slds-button_text-destructive", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": "text-destructive", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "success", "summary": "Creates a green button style", "selector": ".slds-button_success", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": "success", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "with-icon", "summary": "Sizing for icon that sits inside button__icon", "selector": ".slds-button__icon", "restrict": ".slds-button svg", "support": "dev-ready", "variant": true }, "id": "with-icon", "restrictees": [ { "description": "", "annotations": { "name": "large", "summary": "Large size button icon svg", "selector": ".slds-button__icon_large", "restrict": ".slds-button__icon", "modifier": true, "group": "size" }, "id": "large", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "small", "summary": "Small size button icon svg", "selector": ".slds-button__icon_small", "restrict": ".slds-button__icon", "modifier": true, "group": "size" }, "id": "small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "x-small", "summary": "X-Small size button icon svg", "selector": ".slds-button__icon_x-small", "restrict": ".slds-button__icon", "modifier": true, "group": "size" }, "id": "x-small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position of icon when sitting to the left side of the text when inside a button", "selector": ".slds-button__icon_left", "restrict": ".slds-button__icon, .slds-button__icon_stateful" }, "id": ".slds-button__icon_left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position of icon when sitting to the right side of the text when inside a button", "selector": ".slds-button__icon_right", "restrict": ".slds-button__icon, .slds-button__icon_stateful" }, "id": ".slds-button__icon_right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-icon_x-small", "restrict": ".slds-icon, .slds-button__icon", "modifier": true, "group": "size" }, "id": ".slds-icon_x-small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/buttons/with-icon/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "disabled", "label": "Disabled" } ] }, { "title": "examples", "items": [ { "id": "with-icon-right", "label": "With right icon" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "summary": "Creates a button style for full width that resets styling", "selector": ".slds-button_full-width", "restrict": ".slds-button", "modifier": true, "group": "size" }, "id": ".slds-button_full-width", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates a button style for 100% width that maintains current styling", "selector": ".slds-button_stretch", "restrict": ".slds-button", "modifier": true, "group": "size" }, "id": ".slds-button_stretch", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/buttons/base/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "neutral", "label": "Neutral" }, { "id": "brand", "label": "Brand" }, { "id": "outline-brand", "label": "Outline Brand" }, { "id": "inverse", "label": "Inverse" }, { "id": "destructive", "label": "Destructive" }, { "id": "text-destructive", "label": "Text Destructive" }, { "id": "success", "label": "Success" }, { "id": "stretch", "label": "Stretch" }, { "id": "base-link", "label": "Base as a Link" }, { "id": "neutral-link", "label": "Neutral as a Link" }, { "id": "brand-link", "label": "Brand as a Link" }, { "id": "outline-brand-link", "label": "Outline Brand as a Link" }, { "id": "inverse-link", "label": "Inverse as a Link" }, { "id": "destructive-link", "label": "Destructive as a Link" }, { "id": "text-destructive-link", "label": "Text Destructive as a Link" }, { "id": "success-link", "label": "Success as a Link" }, { "id": "stretch-link", "label": "Stretch as a Link" } ] }, { "title": "states", "items": [ { "id": "disabled", "label": "Disabled" }, { "id": "neutral-disabled", "label": "Neutral - Disabled" }, { "id": "brand-disabled", "label": "Brand - Disabled" }, { "id": "outline-brand-disabled", "label": "Outline Brand - Disabled" }, { "id": "inverse-disabled", "label": "Inverse - Disabled" }, { "id": "destructive-disabled", "label": "Destructive - Disabled" }, { "id": "text-destructive-disabled", "label": "Text Destructive - Disabled" }, { "id": "success-disabled", "label": "Success - Disabled" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "summary": "Initiates a dual stateful button", "name": "dual-stateful", "selector": ".slds-button_dual-stateful", "restrict": "button", "support": "dev-ready", "variant": true }, "id": "dual-stateful", "restrictees": [ { "description": "", "annotations": { "summary": "Shown text when button is not pressed - default state", "selector": ".slds-text-not-pressed", "restrict": ".slds-button_dual-stateful span" }, "id": ".slds-text-not-pressed", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Shown text when button is pressed", "selector": ".slds-text-pressed", "restrict": ".slds-button_dual-stateful span" }, "id": ".slds-text-pressed", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "When button is in pressed state", "selector": ".slds-is-pressed", "restrict": ".slds-button_dual-stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-is-pressed", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/buttons/dual-stateful/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "disabled", "label": "disabled" } ] }, { "title": "examples", "items": [ { "id": "pressed", "label": "pressed" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "summary": "Initiates a stateful button", "name": "stateful", "selector": ".slds-button_stateful", "restrict": "button", "support": "dev-ready", "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": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Shown text when button is selected", "selector": ".slds-text-selected", "restrict": ".slds-button_stateful span" }, "id": ".slds-text-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Shown text when button is selected and focused", "selector": ".slds-text-selected-focus", "restrict": ".slds-button_stateful span" }, "id": ".slds-text-selected-focus", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Shown text when button is not selected - default state", "selector": ".slds-text-not-selected", "restrict": ".slds-button_stateful span" }, "id": ".slds-text-not-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "When button is selected and still has focus from click", "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": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "When button is pressed and selected", "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": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/buttons/stateful/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "disabled", "label": "disabled" }, { "id": "selected", "label": "Selected" }, { "id": "selected-clicked", "label": "Selected and Clicked" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/buttons/docs.mdx", "showcasePath": null, "showcase": [] }, "dueling-picklist": { "description": "", "annotations": { "summary": "A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case.", "name": "dueling-picklist", "support": "dev-ready", "base": true, "role": "listbox", "scroller": true, "type": "data-entry", "category": "experience", "s1": "false", "selector": ".slds-dueling-list" }, "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", "support": "dev-ready", "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": "Changes the layout of the dueling picklist to be responsive", "selector": ".slds-dueling-list__column_responsive", "restrict": ".slds-dueling-list__column" }, "id": ".slds-dueling-list__column_responsive", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "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": [ { "description": "", "annotations": { "summary": "Selected/dragging state of a listbox option", "selector": ".slds-is-selected", "restrict": ".slds-dueling-list__options div" }, "id": ".slds-is-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "grabbed state of a listbox option", "selector": ".slds-is-grabbed", "restrict": ".slds-dueling-list__options div" }, "id": ".slds-is-grabbed", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Disabled state of a picklist option", "selector": ".slds-is-disabled", "restrict": ".slds-dueling-list__options" }, "id": ".slds-is-disabled", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "locked-item-dueling-picklist", "label": "Locked" }, { "id": "disabled-dueling-picklist", "label": "Disabled" }, { "id": "multi-select-selected-item", "label": "Selected Item" }, { "id": "multi-select-multi-selected-items", "label": "Multiple Selected Items" }, { "id": "multi-select-grabbed", "label": "Grabbed" }, { "id": "multi-select-moved-in", "label": "Moved in list" }, { "id": "multi-select-dropped", "label": "Dropped" }, { "id": "multi-select-moved-to", "label": "Moved to list" }, { "id": "no-reordering-dueling-picklist", "label": "No Reordering" }, { "id": "responsive-no-reordering-dueling-picklist", "label": "Responsive No Reordering" }, { "id": "view-mode-dueling-picklist", "label": "View Mode" }, { "id": "required-dueling-picklist", "label": "Required" }, { "id": "with-tooltip", "label": "With Tooltip" }, { "id": "required-dueling-picklist-with-tooltip", "label": "Required With Tooltip" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/dueling-picklist/docs.mdx", "showcasePath": null, "showcase": [] }, "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": "article", "type": "data-display, layout", "category": "base, structure", "selector": ".slds-card, .slds-card-wrapper" }, "id": "cards", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes card", "name": "base", "selector": ".slds-card", "restrict": "article, div, section", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Used to bring back the border on a card when needed", "selector": ".slds-card_boundary", "restrict": ".slds-card" }, "id": ".slds-card_boundary", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card header", "selector": ".slds-card__header", "restrict": ".slds-card div" }, "id": ".slds-card__header", "restrictees": [ { "description": "", "annotations": { "summary": "Title element with