{ "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 `` anchor wrapped in a `
  • ` 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 `
    `\n- Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated ``\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.", "layout": "responsive", "name": "carousel", "support": "dev-ready", "base": true, "lwc": true, "type": "navigation, data-display", "category": "experience", "selector": ".slds-carousel" }, "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": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] } ], "docPath": "./ui/components/carousel/docs.mdx", "showcasePath": null, "showcase": [] }, "datetime-picker": { "description": "", "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": "default", "items": [ { "id": "default" } ] }, { "title": "examples", "items": [ { "id": "small-width-container", "label": "Small Width Container", "demoStyles": "height: auto; width: 200px; border: 1px dashed #ddd;", "storybookStyles": true } ] }, { "title": "states", "items": [ { "id": "date-example-text-visible", "label": "Date and Time - date example text visible", "demoStyles": "height: 6rem;" }, { "id": "date-selection", "label": "Date selected" }, { "id": "time-selection", "label": "Time selected", "demoStyles": "height: 20rem;", "storybookStyles": true }, { "id": "required", "label": "Date and Time - required", "demoStyles": "height: 20rem;" }, { "id": "error", "label": "Date and Time - error", "demoStyles": "height: 20rem;" }, { "id": "required-error", "label": "Date and Time - required and has error", "demoStyles": "height: 20rem;" }, { "id": "datetimepicker-with-tooltip-for-datepicker", "label": "Datetime Picker With Tooptip for datepicker", "demoStyles": "height: 20rem;" }, { "id": "datetimepicker-with-tooltip-for-timepicker", "label": "Datetime Picker With Tooptip for timepicker", "demoStyles": "height: 20rem;" }, { "id": "disabled", "label": "Date and Time - disabled", "demoStyles": "height: 10rem;", "storybookStyles": true }, { "id": "mobile", "label": "Mobile" } ] } ] } ], "docPath": "./ui/components/datetime-picker/docs.mdx", "showcasePath": null, "showcase": [] }, "slider": { "description": "", "annotations": { "summary": "An input range slider lets the user specify a numeric value which must be between two specified values.", "name": "slider", "support": "dev-ready", "base": true, "styling-hooks": true, "lwc": true, "type": "user-input", "category": "base", "selector": ".slds-slider" }, "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": "Range track for slider", "selector": ".slds-slider__range", "restrict": ".slds-slider input" }, "id": ".slds-slider__range", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "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": "default", "items": [ { "id": "default", "label": "Default" } ] }, { "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" }, { "id": "vertical", "label": "Vertical" } ] }, { "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" } ] } ] } ], "docPath": "./ui/components/slider/docs.mdx", "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, "styling-hooks": true, "role": "button", "lwc": true, "type": "action", "category": "base", "selector": ".slds-button, .slds-button_stateful, .slds-button_dual-stateful, .slds-button_reset" }, "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": { "summary": "Large size for button icon svg", "name": "large", "selector": ".slds-button__icon_large", "restrict": ".slds-button__icon", "support": "dev-ready", "modifier": true, "group": "size" }, "id": "large", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Small size for button icon svg", "name": "small", "selector": ".slds-button__icon_small", "restrict": ".slds-button__icon", "support": "dev-ready", "modifier": true, "group": "size" }, "id": "small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "X-Small size for button icon svg", "name": "x-small", "selector": ".slds-button__icon_x-small", "restrict": ".slds-button__icon", "support": "dev-ready", "modifier": true, "group": "size" }, "id": "x-small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "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": "default", "items": [ { "id": "default", "label": "Default" } ] }, { "title": "examples", "items": [ { "id": "with-icon-right", "label": "With right icon" } ] }, { "title": "states", "items": [ { "id": "disabled", "label": "Disabled" } ] } ] }, { "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 with centered text 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": [] }, { "description": "", "annotations": { "summary": "Positions decrement button within counter input field", "selector": ".slds-input__button_decrement", "restrict": " .slds-button" }, "id": ".slds-input__button_decrement", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Positions increment button within counter input field", "selector": ".slds-input__button_increment", "restrict": ".slds-button" }, "id": ".slds-input__button_increment", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/buttons/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "title": "examples", "items": [ { "id": "base-kinetics", "label": "Base (Kinetics)" }, { "id": "neutral", "label": "Neutral" }, { "id": "neutral-kinetics", "label": "Neutral (Kinetics)" }, { "id": "brand", "label": "Brand" }, { "id": "brand-kinetics", "label": "Brand (Kinetics)" }, { "id": "outline-brand", "label": "Outline Brand" }, { "id": "outline-brand-kinetics", "label": "Outline Brand (Kinetics)" }, { "id": "inverse", "label": "Inverse" }, { "id": "inverse-kinetics", "label": "Inverse (Kinetics)" }, { "id": "destructive", "label": "Destructive" }, { "id": "destructive-kinetics", "label": "Destructive (Kinetics)" }, { "id": "text-destructive", "label": "Text Destructive" }, { "id": "success", "label": "Success" }, { "id": "success-kinetics", "label": "Success (Kinetics)" }, { "id": "stretch", "label": "Stretch" }, { "id": "stretch-kinetics", "label": "Stretch (Kinetics)" }, { "id": "full-width", "label": "Full Width" }, { "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" }, { "id": "base-centering", "label": "Base Centering" }, { "id": "reset", "label": "Reset" } ] }, { "title": "states", "items": [ { "id": "disabled", "label": "Disabled" }, { "id": "base-kinetics-disabled", "label": "Base (Kinetics) - Disabled" }, { "id": "neutral-disabled", "label": "Neutral - Disabled" }, { "id": "neutral-kinetics-disabled", "label": "Neutral (Kinetics) - Disabled" }, { "id": "brand-disabled", "label": "Brand - Disabled" }, { "id": "brand-kinetics-disabled", "label": "Brand (Kinetics) - Disabled" }, { "id": "outline-brand-disabled", "label": "Outline Brand - Disabled" }, { "id": "outline-brand-kinetics-disabled", "label": "Outline Brand (Kinetics) - 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" } ] } ] }, { "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": "default", "items": [ { "id": "default", "label": "Default" } ] }, { "title": "examples", "items": [ { "id": "pressed", "label": "pressed" } ] }, { "title": "states", "items": [ { "id": "disabled", "label": "disabled" } ] } ] }, { "description": "", "annotations": { "summary": "Initiates a stateful button", "name": "stateful", "selector": ".slds-button_stateful", "restrict": "button", "support": "dev-ready", "variant": true, "lwc": 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": "default", "items": [ { "id": "default" } ] }, { "title": "states", "items": [ { "id": "disabled", "label": "disabled" }, { "id": "selected", "label": "Selected" }, { "id": "selected-clicked", "label": "Selected and Clicked" } ] } ] } ], "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", "lwc": true, "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 dual listbox", "name": "base", "selector": ".slds-dueling-list", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Handles the layout of the dual listbox", "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": "Listbox container", "annotations": { "name": "listbox", "selector": ".slds-listbox", "restrict": ".slds-dropdown ul, .slds-dueling-list__options ul, .slds-pill_container ul, .slds-listbox_selection-group ul, .slds-combobox_container ul, .slds-form-element__control ul, .slds-popover__body ul", "support": "dev-ready", "variant": true }, "id": "listbox", "restrictees": [ { "description": "Inline listbox", "annotations": { "selector": ".slds-listbox_inline", "restrict": ".slds-listbox", "modifier": true }, "id": ".slds-listbox_inline", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Horizontal listbox", "annotations": { "selector": ".slds-listbox_horizontal", "restrict": ".slds-listbox", "modifier": true }, "id": ".slds-listbox_horizontal", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Listbox item", "annotations": { "selector": ".slds-listbox__item", "restrict": ".slds-listbox > li" }, "id": ".slds-listbox__item", "restrictees": [ { "description": "Choosable option within listbox", "annotations": { "selector": ".slds-listbox__option", "restrict": ".slds-listbox__item > div" }, "id": ".slds-listbox__option", "restrictees": [ { "description": "If the listbox option is empty and slds-truncate is not present this fix the height of the option", "annotations": { "selector": ".slds-media__body > :first-child", "restrict": ".slds-listbox__option" }, "id": ".slds-media__body > :first-child", "restrictees": [ { "description": "This component is used to display a current or past chat session between a customer and a service agent.\nIt appears in the form of a \"Log\"", "annotations": { "summary": "Root container of a chat session", "name": "base", "selector": ".slds-chat", "restrict": "section[role=\"log\"]", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type", "annotations": { "summary": "Handles the display of chat items within a list", "selector": ".slds-chat-list", "restrict": ".slds-chat ul" }, "id": ".slds-chat-list", "restrictees": [ { "description": "", "annotations": { "summary": "Handles spacing and direction of items in the list", "selector": ".slds-chat-listitem", "restrict": ".slds-chat-list li" }, "id": ".slds-chat-listitem", "restrictees": [ { "description": "", "annotations": { "summary": "Modifier used to style outbound message list items", "selector": ".slds-chat-listitem_outbound", "restrict": ".slds-chat-listitem", "modifier": true }, "id": ".slds-chat-listitem_outbound", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "inbound-message", "summary": "Modifier used to style inbound message list items", "selector": ".slds-chat-listitem_inbound", "restrict": ".slds-chat-listitem", "modifier": true, "group": "dialog" }, "id": "inbound-message", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Modifier used for spacing bookend items", "selector": ".slds-chat-listitem_bookend", "restrict": ".slds-chat-listitem" }, "id": ".slds-chat-listitem_bookend", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Modifier used for spacing event items", "selector": ".slds-chat-listitem_event", "restrict": ".slds-chat-listitem" }, "id": ".slds-chat-listitem_event", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Chat logs are mainly made up of chat messages between an agent and a customer", "annotations": { "summary": "styles the outter part of a chat message", "selector": ".slds-chat-message", "restrict": ".slds-chat-listitem div" }, "id": ".slds-chat-message", "restrictees": [ { "description": "", "annotations": { "summary": "Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message", "selector": ".slds-chat-message_faux-avatar", "restrict": ".slds-chat-message" }, "id": ".slds-chat-message_faux-avatar", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to style avatars in chat logs", "selector": ".slds-chat-avatar", "restrict": ".slds-chat-message .slds-avatar" }, "id": ".slds-chat-avatar", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style the avatar intials for chat", "selector": ".slds-chat-avatar__intials", "restrict": ".slds-chat-avatar .slds-avatar__initials", "deprecated": true }, "id": ".slds-chat-avatar__intials", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to contain and align chat messages with their avatars", "selector": ".slds-chat-message__body", "restrict": ".slds-chat-message div" }, "id": ".slds-chat-message__body", "restrictees": [ { "description": "", "annotations": { "summary": true, "selector": ".slds-chat-message__image_loading", "restrict": ".slds-chat-message__body" }, "id": ".slds-chat-message__image_loading", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to style the chat text from agent or customer", "selector": ".slds-chat-message__text", "restrict": ".slds-chat-message__body div" }, "id": ".slds-chat-message__text", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style icons with a chat log", "selector": ".slds-chat-icon", "restrict": ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" }, "id": ".slds-chat-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used for any specific inbound text styling", "selector": ".slds-chat-message__text_inbound", "restrict": ".slds-chat-message__text" }, "id": ".slds-chat-message__text_inbound", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used for any specific outbound text styling", "selector": ".slds-chat-message__text_outbound", "restrict": ".slds-chat-message__text" }, "id": ".slds-chat-message__text_outbound", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used for any specific outbound (from another agent) text styling", "selector": ".slds-chat-message__text_outbound-agent", "restrict": ".slds-chat-message__text" }, "id": ".slds-chat-message__text_outbound-agent", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "unsupported", "summary": "Used for an inbound message that is not a supported message type", "selector": ".slds-chat-message__text_unsupported-type", "restrict": ".slds-chat-message__text", "modifier": true, "group": "feedback" }, "id": "unsupported", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "delivery-failure", "summary": "Used for an inbound message that fails to deliver", "selector": ".slds-chat-message__text_delivery-failure", "restrict": ".slds-chat-message__text", "modifier": true, "group": "feedback" }, "id": "delivery-failure", "restrictees": [ { "description": "", "annotations": { "summary": "Element that contains feedback for why inbound message failed", "selector": ".slds-chat-message__text_delivery-failure-reason", "restrict": ".slds-chat-message__text_delivery-failure [role=\"alert\"]" }, "id": ".slds-chat-message__text_delivery-failure-reason", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used when sneak peek is enabled for customer messages", "selector": ".slds-chat-message__text_sneak-peek", "restrict": ".slds-chat-message__text", "modifier": true }, "id": ".slds-chat-message__text_sneak-peek", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": true, "selector": ".slds-chat-message__file", "restrict": ".slds-chat-message__body div" }, "id": ".slds-chat-message__file", "restrictees": [ { "description": "", "annotations": { "summary": "Used for any specific inbound file styling", "selector": ".slds-chat-message__file_inbound", "restrict": ".slds-chat-message__file" }, "id": ".slds-chat-message__file_inbound", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to style chat message meta data", "selector": ".slds-chat-message__meta", "restrict": ".slds-chat-message div" }, "id": ".slds-chat-message__meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to style chat message resend action", "selector": ".slds-chat-message__action", "restrict": ".slds-chat-message .slds-button" }, "id": ".slds-chat-message__action", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style icons with a chat log", "selector": ".slds-chat-icon", "restrict": ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" }, "id": ".slds-chat-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "During any chat, certain events can occur which need to be displayed to the user", "selector": ".slds-chat-event", "restrict": ".slds-chat-listitem div" }, "id": ".slds-chat-event", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style the horizontal rules on an event", "selector": ".slds-chat-event__rule", "restrict": ".slds-chat-event div", "deprecated": true }, "id": ".slds-chat-event__rule", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used for styling the event body text", "selector": ".slds-chat-event__body", "restrict": ".slds-chat-event div" }, "id": ".slds-chat-event__body", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style icons with a chat log", "selector": ".slds-chat-icon", "restrict": ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" }, "id": ".slds-chat-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to style any messages from an agent in the event", "selector": ".slds-chat-event__agent-message", "restrict": ".slds-chat-event div" }, "id": ".slds-chat-event__agent-message", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "error", "summary": "Modifier to indicate the event was an error", "selector": ".slds-has-error", "restrict": ".slds-chat-event[role=\"alert\"]", "modifier": true, "group": "feedback" }, "id": "error", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Chat sessions are started and stopped with bookends to the conversation", "annotations": { "summary": "Used to style a chat bookend", "selector": ".slds-chat-bookend", "restrict": ".slds-chat-listitem div" }, "id": ".slds-chat-bookend", "restrictees": [ { "description": "", "annotations": { "summary": "Used to style icons with a chat log", "selector": ".slds-chat-icon", "restrict": ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" }, "id": ".slds-chat-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "stop", "summary": "Modifier for bookends which stop a chat session", "selector": ".slds-chat-bookend_stop", "restrict": ".slds-chat-bookend", "modifier": true, "group": "dialog" }, "id": "stop", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Past chat logs are displayed differently for ease of scanning", "annotations": { "summary": "Apply when displaying chat logs that appeared in the past", "name": "past", "selector": ".slds-chat_past", "restrict": ".slds-chat", "support": "dev-ready", "variant": true }, "id": "past", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] }, { "description": "", "annotations": { "summary": "Element that contains feedback for why inbound message failed", "selector": ".slds-chat-message__text_delivery-failure-reason", "restrict": ".slds-chat-message__text_delivery-failure [role=\"alert\"]" }, "id": ".slds-chat-message__text_delivery-failure-reason", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "error", "summary": "Modifier to indicate the event was an error", "selector": ".slds-has-error", "restrict": ".slds-chat-event[role=\"alert\"]", "modifier": true, "group": "feedback" }, "id": "error", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "The container of pill selections found inside of a combobox group", "selector": ".slds-listbox_selection-group", "restrict": ".slds-combobox-group ~ div, .slds-combobox_container ~ div" }, "id": ".slds-listbox_selection-group", "restrictees": [ { "description": "Listbox item", "annotations": { "selector": ".slds-listbox__item", "restrict": ".slds-listbox > li" }, "id": ".slds-listbox__item", "docPath": null, "showcasePath": null, "showcase": [], "restrictees": [] }, { "description": "", "annotations": { "summary": "Expanded state of a selection group", "selector": ".slds-is-expanded", "restrict": ".slds-listbox_selection-group" }, "id": ".slds-is-expanded", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Toggle button to show all of the pill selections", "selector": ".slds-listbox-toggle", "restrict": ".slds-listbox_selection-group > span" }, "id": ".slds-listbox-toggle", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "base", "selector": ".slds-dynamic-menu", "restrict": "section[role=\"dialog\"]", "variant": true, "support": "dev-ready" }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Headers styles for dynamic menu", "selector": ".slds-dynamic-menu__header", "restrict": ".slds-dynamic-menu h3" }, "id": ".slds-dynamic-menu__header", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] }, { "description": "Region that contains the search input, handles sizing", "annotations": { "selector": ".slds-global-header__item_search", "restrict": ".slds-global-header__item:nth-child(2)" }, "id": ".slds-global-header__item_search", "restrictees": [ { "description": "Primary combobox that contains the search input, handles sizing", "annotations": { "selector": ".slds-global-search__form-element div", "restrict": ".slds-global-header__item_search" }, "id": ".slds-global-search__form-element div", "restrictees": [ { "description": "", "annotations": { "summary": "The container of pill selections found inside of a combobox group", "selector": ".slds-listbox_selection-group", "restrict": ".slds-combobox-group ~ div, .slds-combobox_container ~ div" }, "id": ".slds-listbox_selection-group", "restrictees": [ { "description": "Listbox item", "annotations": { "selector": ".slds-listbox__item", "restrict": ".slds-listbox > li" }, "id": ".slds-listbox__item", "docPath": null, "showcasePath": null, "showcase": [], "restrictees": [] }, { "description": "", "annotations": { "summary": "Expanded state of a selection group", "selector": ".slds-is-expanded", "restrict": ".slds-listbox_selection-group" }, "id": ".slds-is-expanded", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Toggle button to show all of the pill selections", "selector": ".slds-listbox-toggle", "restrict": ".slds-listbox_selection-group > span" }, "id": ".slds-listbox-toggle", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the shaded backdrop used behind the modal.", "annotations": { "selector": ".slds-backdrop", "restrict": ".slds-modal ~ div", "notes": "This should follow after the `.slds-modal` as an empty element.", "required": true }, "id": ".slds-backdrop", "restrictees": [ { "description": "Allows the backdrop to be visible.", "annotations": { "selector": ".slds-backdrop_open", "restrict": ".slds-backdrop", "notes": "Apply this class to a modal backdrop with JavaScript to make it visible.", "modifier": true, "required": true }, "id": ".slds-backdrop_open", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Active state of an item", "annotations": { "selector": ".slds-is-active", "restrict": ".slds-context-bar__item:not(.slds-no-hover)", "modifier": true }, "id": ".slds-is-active", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the shaded backdrop used behind the modal.", "annotations": { "selector": ".slds-backdrop", "restrict": ".slds-modal ~ div", "notes": "This should follow after the `.slds-modal` as an empty element.", "required": true }, "id": ".slds-backdrop", "restrictees": [ { "description": "Allows the backdrop to be visible.", "annotations": { "selector": ".slds-backdrop_open", "restrict": ".slds-backdrop", "notes": "Apply this class to a modal backdrop with JavaScript to make it visible.", "modifier": true, "required": true }, "id": ".slds-backdrop_open", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "A dialog popover, `.slds-popover`, can be applied to all variants of a dialog\npopover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied.\n\nA dialog popover requires at least one focusable element.", "annotations": { "name": "base", "selector": ".slds-popover", "restrict": "[role=\"dialog\"], [role=\"tooltip\"]", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "Dialog specific for inline-edit popover", "annotations": { "selector": ".slds-popover_edit", "restrict": ".slds-popover", "required": true }, "id": ".slds-popover_edit", "restrictees": [ { "description": "", "annotations": { "selector": ".slds-form-element__label_edit", "restrict": ".slds-popover_edit label" }, "id": ".slds-form-element__label_edit", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for meta content of popover", "selector": ".slds-popover__meta", "restrict": ".slds-popover" }, "id": ".slds-popover__meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for primary content area of popover", "selector": ".slds-popover__body", "restrict": ".slds-popover div" }, "id": ".slds-popover__body", "restrictees": [ { "description": "Listbox item", "annotations": { "selector": ".slds-listbox__item", "restrict": ".slds-listbox > li" }, "id": ".slds-listbox__item", "docPath": null, "showcasePath": null, "showcase": [], "restrictees": [] }, { "description": "", "annotations": { "summary": "Applies a max-height and vertical scrolling to a popover body", "selector": ".slds-popover__body_small", "restrict": ".slds-popover__body", "modifier": true, "group": "body" }, "id": ".slds-popover__body_small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for top area of popover", "selector": ".slds-popover__header", "restrict": ".slds-popover header, .slds-popover div" }, "id": ".slds-popover__header", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for footer area of popover", "selector": ".slds-popover__footer", "restrict": ".slds-popover footer" }, "id": ".slds-popover__footer", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles to center align content for footer area of a form popover", "selector": ".slds-popover__footer_form", "restrict": ".slds-popover footer" }, "id": ".slds-popover__footer_form", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Close button within a popover", "selector": ".slds-popover__close", "restrict": ".slds-popover button" }, "id": ".slds-popover__close", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Width modifier for popover - small", "selector": ".slds-popover_small", "restrict": ".slds-popover", "modifier": true, "group": "width" }, "id": ".slds-popover_small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Width modifier for popover - medium", "selector": ".slds-popover_medium", "restrict": ".slds-popover", "modifier": true, "group": "width" }, "id": ".slds-popover_medium", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Width modifier for popover - large", "selector": ".slds-popover_large", "restrict": ".slds-popover", "modifier": true, "group": "width" }, "id": ".slds-popover_large", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Modifier for popover to take 100% width", "selector": ".slds-popover_full-width", "restrict": ".slds-popover", "modifier": true, "group": "width" }, "id": ".slds-popover_full-width", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Modifier to hide a popover", "selector": ".slds-popover_hide", "restrict": ".slds-popover" }, "id": ".slds-popover_hide", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for dark variant of popover", "selector": ".slds-popover_dark", "restrict": ".slds-popover", "modifier": true }, "id": ".slds-popover_dark", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Prompt components are used to provide an interactive custom message.", "annotations": { "summary": "Initializes a brand popover", "name": "brand", "selector": ".slds-popover_brand", "restrict": ".slds-popover", "support": "dev-ready", "variant": true }, "id": "brand", "restrictees": [ { "description": "", "annotations": { "summary": "Applies popover brand styles to top", "selector": ".slds-popover_brand-top", "restrict": ".slds-popover_brand" }, "id": ".slds-popover_brand-top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies popover brand styles to left", "selector": ".slds-popover_brand-left", "restrict": ".slds-popover_brand" }, "id": ".slds-popover_brand-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies popover brand styles to bottom", "selector": ".slds-popover_brand-bottom", "restrict": ".slds-popover_brand" }, "id": ".slds-popover_brand-bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies popover brand styles to right", "selector": ".slds-popover_brand-right", "restrict": ".slds-popover_brand" }, "id": ".slds-popover_brand-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Error popovers are used to notify the user of errors on the page\n\nIf the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element.\n\nIn some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none\" utility class to the body element.", "annotations": { "summary": "Initializes an error non-modal dialog", "name": "error", "selector": ".slds-popover_error", "restrict": ".slds-popover", "support": "dev-ready", "variant": true }, "id": "error", "restrictees": [ { "description": "", "annotations": { "summary": "Applies scrollable styles for popovers", "selector": ".slds-popover__body_scrollable", "restrict": ".slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body" }, "id": ".slds-popover__body_scrollable", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Feature components are use to describe notable features", "annotations": { "summary": "Initializes a feature non-modal dialog", "name": "feature", "selector": ".slds-popover_feature", "restrict": ".slds-popover", "support": "dev-ready", "variant": true, "deprecated": true, "release": "2.5.0" }, "id": "feature", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_top", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_top-left", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_top-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_top-right", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_top-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_bottom", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_bottom-left", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_bottom-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_bottom-right", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_bottom-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_left", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_left-top", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_left-top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_left-bottom", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_left-bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_right", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_right-top", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_right-top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_right-bottom", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_right-bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_top-left-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_top-left-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_bottom-left-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_bottom-left-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_top-right-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_top-right-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_bottom-right-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_bottom-right-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_left-top-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_left-top-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_right-top-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_right-top-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_left-bottom-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_left-bottom-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-nubbin_right-bottom-corner", "restrict": ".slds-popover, .slds-dropdown", "modifier": true, "group": "nubbins" }, "id": ".slds-nubbin_right-bottom-corner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "panels", "selector": ".slds-popover_panel", "restrict": ".slds-popover", "support": "dev-ready", "variant": true }, "id": "panels", "restrictees": [ { "description": "", "annotations": { "name": "Label for panels", "selector": ".slds-popover_panel__label", "restrict": ".slds-popover_panel p" }, "id": "Label for panels", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": "./ui/components/panels/docs.mdx", "showcasePath": null, "showcase": [] }, { "description": "Prompt components are used to provide an interactive custom message.", "annotations": { "summary": "Initializes a prompt non-modal dialog", "name": "prompt", "selector": ".slds-popover_prompt", "restrict": ".slds-popover", "support": "dev-ready", "variant": true }, "id": "prompt", "restrictees": [ { "description": "", "annotations": { "summary": "Applies styles for heading text of prompt", "selector": ".slds-popover_prompt__heading", "restrict": ".slds-popover_prompt .slds-media__body > h2" }, "id": ".slds-popover_prompt__heading", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Applies styles for the optional action link in the footer of prompt", "selector": ".slds-popover_prompt__action-link", "restrict": ".slds-popover_prompt .slds-popover__footer span" }, "id": ".slds-popover_prompt__action-link", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt top left", "selector": ".slds-popover_prompt_top-left", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_top-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt top center", "selector": ".slds-popover_prompt_top", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt top right", "selector": ".slds-popover_prompt_top-right", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_top-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt bottom left", "selector": ".slds-popover_prompt_bottom-left", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_bottom-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt bottom center", "selector": ".slds-popover_prompt_bottom", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Position Prompt bottom right", "selector": ".slds-popover_prompt_bottom-right", "restrict": ".slds-popover_prompt", "modifier": true }, "id": ".slds-popover_prompt_bottom-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": "./ui/components/prompt/docs.mdx", "showcasePath": null, "showcase": [] }, { "description": "Walkthrough components are used to provide an interactive and educational prospect experience for setup.", "annotations": { "summary": "Initializes a walkthrough non-modal dialog", "name": "walkthrough", "selector": ".slds-popover_walkthrough", "restrict": ".slds-popover", "support": "dev-ready", "variant": true, "deprecated": true }, "id": "walkthrough", "restrictees": [ { "description": "Alternate background for walkthrough non-modal dialog", "annotations": { "selector": ".slds-popover_walkthrough-alt", "restrict": ".slds-popover_walkthrough", "modifier": true, "deprecated": true }, "id": ".slds-popover_walkthrough-alt", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Warning popovers are used to warn the user about information on the page that deserves caution\n\nIf the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element.\n\nIn some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none\" utility class to the body element.", "annotations": { "summary": "Initializes an warning non-modal dialog", "name": "warning", "selector": ".slds-popover_warning", "restrict": ".slds-popover", "support": "dev-ready", "variant": true }, "id": "warning", "restrictees": [ { "description": "", "annotations": { "summary": "Applies scrollable styles for popovers", "selector": ".slds-popover__body_scrollable", "restrict": ".slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body" }, "id": ".slds-popover__body_scrollable", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] }, { "description": "Einstein components are used to provide an interactive experience with Einstein features", "annotations": { "summary": "Initializes a Einstein non-modal dialog", "name": "einstein", "selector": ".slds-popover_einstein", "restrict": "[role=\"dialog\"], [role=\"tooltip\"]", "support": "dev-ready", "variant": true }, "id": "einstein", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes Prompt style notification", "name": "base", "selector": ".slds-modal_prompt", "restrict": "section[role=\"alertdialog\"]", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] }, { "description": "The tooltip should be positioned with JavaScript.\n\nYou can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an `aria-describedby` attribute that points to the tooltip `ID` of the tooltip.", "annotations": { "summary": "Initializes a tooltip", "variant": true, "name": "base", "selector": ".slds-popover_tooltip", "restrict": "[role=\"tooltip\"]", "support": "dev-ready" }, "id": "base", "restrictees": [ { "description": "", "annotations": { "name": "rise", "summary": "Toggles on tooltip", "selector": ".slds-rise-from-ground", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "toggle" }, "id": "rise", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "fall", "summary": "Toggles off tooltip", "selector": ".slds-fall-into-ground", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "toggle" }, "id": "fall", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "bottom-to-top", "summary": "Slides tooltip from bottom to top", "selector": ".slds-slide-from-bottom-to-top", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "motion" }, "id": "bottom-to-top", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "top-to-bottom", "summary": "Slides tooltip from top to bottom", "selector": ".slds-slide-from-top-to-bottom", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "motion" }, "id": "top-to-bottom", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "right-to-left", "summary": "Slides tooltip from right to left", "selector": ".slds-slide-from-right-to-left", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "motion" }, "id": "right-to-left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "left-to-right", "summary": "Slides tooltip from left to right", "selector": ".slds-slide-from-left-to-right", "restrict": ".slds-popover_tooltip", "modifier": true, "group": "motion" }, "id": "left-to-right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/dueling-picklist/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] }, { "description": "The truncation class can be used on an element, or the truncation\ninclude can be added to an existing class.", "annotations": { "summary": "Creates truncated text", "selector": ".slds-truncate", "restrict": "[title]", "modifier": true }, "id": ".slds-truncate", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Header for choosable option within listbox", "selector": ".slds-listbox__option-header", "restrict": ".slds-listbox__option h3" }, "id": ".slds-listbox__option-header", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Container for listbox option icon", "selector": ".slds-listbox__option-icon", "restrict": ".slds-listbox__option span" }, "id": ".slds-listbox__option-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Focus state of a vertical listbox option", "annotations": { "selector": ".slds-has-focus", "restrict": ".slds-listbox__option", "modifier": true }, "id": ".slds-has-focus", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Modifies the listbox option if it contains an entity object", "annotations": { "selector": ".slds-listbox__option_entity", "restrict": ".slds-listbox__option" }, "id": ".slds-listbox__option_entity", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Modifies the listbox option if it contains an plain object or string", "annotations": { "selector": ".slds-listbox__option_plain", "restrict": ".slds-listbox__option" }, "id": ".slds-listbox__option_plain", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "If the listbox option has metadata or secondary information that sits below its primary text", "annotations": { "selector": ".slds-listbox__option_has-meta", "restrict": ".slds-listbox__option" }, "id": ".slds-listbox__option_has-meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Modifier that makes selected icon visible", "annotations": { "selector": ".slds-is-selected", "restrict": ".slds-listbox__option", "modifier": true }, "id": ".slds-is-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "The main text of an entity listbox", "annotations": { "selector": ".slds-listbox__option-text_entity", "restrict": ".slds-listbox__option span" }, "id": ".slds-listbox__option-text_entity", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "The metadata or secondary text of an entity listbox", "annotations": { "selector": ".slds-listbox__option-meta", "restrict": ".slds-listbox__option span" }, "id": ".slds-listbox__option-meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "The icon within a plain listbox that indicates if an option has been selected or not.", "annotations": { "selector": ".slds-listbox__icon-selected", "restrict": ".slds-listbox__item svg" }, "id": ".slds-listbox__icon-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates a vertical listbox", "annotations": { "selector": ".slds-listbox_vertical", "restrict": ".slds-listbox", "modifier": true }, "id": ".slds-listbox_vertical", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 5 list items", "selector": ".slds-dropdown_length-5", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-5", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 7 list items", "selector": ".slds-dropdown_length-7", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-7", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 10 list items", "selector": ".slds-dropdown_length-10", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-10", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 5 list items with an icon", "selector": ".slds-dropdown_length-with-icon-5", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-with-icon-5", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 7 list items with an icon", "selector": ".slds-dropdown_length-with-icon-7", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-with-icon-7", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Forces overflow scrolling after 10 list items with an icon", "selector": ".slds-dropdown_length-with-icon-10", "restrict": ".slds-dropdown, .slds-dropdown__list, .slds-listbox", "modifier": true, "group": "height" }, "id": ".slds-dropdown_length-with-icon-10", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "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": "default", "items": [ { "id": "default" } ] }, { "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" } ] } ] } ], "docPath": "./ui/components/dueling-picklist/docs.mdx", "showcasePath": null, "showcase": [] }, "cards": { "description": "To initialize a card, apply the `.slds-card` class to a containing `
    `.\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, "styling-hooks": true, "role": "article", "lwc": true, "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 within card header", "selector": ".slds-card__header-title", "restrict": ".slds-card__header h2" }, "id": ".slds-card__header-title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable element within the card header title", "selector": ".slds-card__header-link", "restrict": ".slds-card__header h2 a" }, "id": ".slds-card__header-link", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "variant": true, "summary": "Einstein themed card header", "name": "einstein", "support": "dev-ready", "role": "article", "type": "layout", "restrict": ".slds-card__header", "category": "feature", "selector": ".slds-einstein-header" }, "id": "einstein", "restrictees": [ { "description": "", "annotations": { "summary": "Einstein themed card header figure", "selector": ".slds-einstein-header__figure", "restrict": ".slds-einstein-header, div, header" }, "id": ".slds-einstein-header__figure", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Einstein themed card header actions", "selector": ".slds-einstein-header__actions", "restrict": ".slds-einstein-header" }, "id": ".slds-einstein-header__actions", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/cards/einstein/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] }, { "title": "states", "items": [ { "id": "einstein-with-icon", "label": "Einstein card - with icon" }, { "id": "einstein-with-icon-and-actions", "label": "Einstein card - with icon and actions" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card body", "selector": ".slds-card__body", "restrict": ".slds-card div" }, "id": ".slds-card__body", "restrictees": [ { "description": "", "annotations": { "summary": "Apply the same spacing found on the card header to the card body", "selector": ".slds-card__body_inner", "restrict": ".slds-card__body" }, "id": ".slds-card__body_inner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card footer", "selector": ".slds-card__footer", "restrict": ".slds-card footer" }, "id": ".slds-card__footer", "restrictees": [ { "description": "", "annotations": { "summary": "Actionable element within card footer", "selector": ".slds-card__footer-action", "restrict": ".slds-card__footer a" }, "id": ".slds-card__footer-action", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/cards/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default", "label": "Default" } ] }, { "title": "examples", "items": [ { "id": "related-list-table", "label": "With data-table" }, { "id": "related-list-tiles", "label": "With tiles" }, { "id": "nested-cards", "label": "Nested cards" }, { "id": "with-no-header", "label": "With no header" }, { "id": "visibly-hidden-card-header", "label": "Visibly hidden card header" }, { "id": "body-has-no-padding", "label": "Body with no padding" }, { "id": "body-has-padding", "label": "Body with padding" }, { "id": "has-no-footer", "label": "No footer" }, { "id": "has-footer", "label": "Has footer" }, { "id": "nested-no-boundary", "label": "Nested with no boundary" }, { "id": "nested-with-boundary", "label": "Nested with boundary" }, { "id": "with-long-truncated-title", "label": "With long truncated title", "demoStyles": "max-width: 360px;", "storybookStyles": true }, { "id": "styling-hooks", "label": "Styling Hooks", "demoStyles": "\n --slds-c-card-color-background: #f3f3f3;\n --slds-c-card-radius-border: 8px;\n --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n --slds-c-card-spacing-block-start: 1.5rem;\n --slds-c-card-spacing-block-end: 0.5rem;\n --slds-c-card-spacing-inline: 1rem;\n --slds-c-card-title-font-size: 1.5rem;\n --slds-c-card-header-spacing-block-start: 0;\n --slds-c-card-header-spacing-inline-start: 1.5rem;\n --slds-c-card-header-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-inline-start: 1.5rem;\n --slds-c-card-body-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-block-end: 1rem;\n --slds-c-card-footer-spacing-block-start: 0.5rem;\n --slds-c-card-footer-spacing-block-end: 0;\n --slds-c-card-footer-spacing-inline-start: 1.5rem;\n --slds-c-card-footer-spacing-inline-end: 1.5rem;\n --slds-c-card-footer-font-size: 0.75rem;\n --slds-c-card-footer-text-align: right;\n ", "storybookStyles": true } ] }, { "title": "states", "items": [ { "id": "empty", "label": "Empty" }, { "id": "empty-illustration", "label": "Empty with illustration" }, { "id": "loading", "label": "Loading" } ] } ] }, { "description": "", "annotations": { "name": "wrapper", "summary": "Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card", "selector": ".slds-card-wrapper", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "wrapper", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/cards/wrapper/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default", "label": "Default" } ] }, { "title": "examples", "items": [ { "id": "tabs-wrapper", "label": "Card wrapper for tabs" }, { "id": "styling-hooks", "label": "Styling Hooks", "demoStyles": "\n --slds-c-card-color-background: #f3f3f3;\n --slds-c-card-radius-border: 8px;\n --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n --slds-c-card-spacing-block-start: 1.5rem;\n --slds-c-card-spacing-block-end: 0.5rem;\n --slds-c-card-title-font-size: 1.5rem;\n --slds-c-card-header-spacing-block-start: 0;\n --slds-c-card-header-spacing-inline-start: 1.5rem;\n --slds-c-card-header-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-inline-start: 1.5rem;\n --slds-c-card-body-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-block-end: 1rem;\n --slds-c-card-footer-spacing-block-start: 0.5rem;\n --slds-c-card-footer-spacing-block-end: 0;\n --slds-c-card-footer-spacing-inline-start: 1.5rem;\n --slds-c-card-footer-spacing-inline-end: 1.5rem;\n --slds-c-card-footer-font-size: 0.75rem;\n --slds-c-card-footer-text-align: right;\n ", "storybookStyles": true } ] } ] } ], "docPath": "./ui/components/cards/docs.mdx", "showcasePath": null, "showcase": [] }, "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 `