@ds-mo/ui 8.0.1 → 8.1.0

package/dist/types/components.d.ts

@@ -17,9 +17,9 @@ import { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataViz
 import { CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 import { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
+import { CheckboxSize } from "./components/Checkbox/Checkbox";
 import { ChipSize, ChipState } from "./components/Chip/Chip";
 import { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
-import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
@@ -32,7 +32,8 @@ import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
-import { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
+import { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
+import { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
 import { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
@@ -56,9 +57,9 @@ export { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataViz
 export { CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 export { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
+export { CheckboxSize } from "./components/Checkbox/Checkbox";
 export { ChipSize, ChipState } from "./components/Chip/Chip";
 export { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
-export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
@@ -71,7 +72,8 @@ export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
-export { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
+export { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
+export { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
 export { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
@@ -116,6 +118,11 @@ export namespace Components {
           * @default false
          */
         "gradientBackground": boolean;
+        /**
+          * Show the separation ring when the badge overlaps an icon or other content.
+          * @default true
+         */
+        "hasRing": boolean;
         /**
           * Contextual supplemental text. Omit when the owner hides the badge from assistive technology.
          */
@@ -244,6 +251,11 @@ export namespace Components {
           * @default ''
          */
         "label": string;
+        /**
+          * Use the half-radius treatment instead of the default control radius.
+          * @default false
+         */
+        "rounded": boolean;
         "setFocus": () => Promise<void>;
         /**
           * Control density (height, padding, icon, type).
@@ -324,6 +336,11 @@ export namespace Components {
          */
         "label": string;
         "pressed": boolean | undefined;
+        /**
+          * Use the half-radius treatment instead of the default control radius.
+          * @default false
+         */
+        "rounded": boolean;
         "setFocus": () => Promise<void>;
         /**
           * Control density (height, padding, icon, type).
@@ -527,32 +544,55 @@ export namespace Components {
     }
     interface DsCheckbox {
         /**
+          * Current checked state.
           * @default false
          */
         "checked": boolean;
         /**
+          * Native disabled state.
           * @default false
          */
         "disabled": boolean;
         /**
+          * Mixed visual state. Activation clears it before toggling checked.
           * @default false
          */
         "indeterminate": boolean;
         /**
+          * Design-system inactive state.
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Visible label and accessible name. Omitted only in presentation mode.
+         */
         "label": string;
+        /**
+          * Native form field name.
+         */
         "name": string | undefined;
         /**
+          * Visual-only indicator for a composite control that owns selection semantics.
+          * @default false
+         */
+        "presentation": boolean;
+        /**
+          * Require the checkbox to be checked for form validity.
           * @default false
          */
         "required": boolean;
         /**
+          * Validation message used when a required checkbox is unchecked.
           * @default 'This field is required.'
          */
         "requiredMessage": string;
         /**
+          * Visual and placement density.
+          * @default 'md'
+         */
+        "size": CheckboxSize;
+        /**
+          * Submitted value when checked.
           * @default 'on'
          */
         "value": string;
@@ -615,16 +655,19 @@ export namespace Components {
         "semantic": boolean;
     }
     interface DsEmptyState {
-        "message": string | undefined;
         /**
-          * Localized defaults keyed by empty-state type. Set as a JS property.
-          * @default {}
+          * Explanatory empty-state copy. Every supported variant includes body text.
+          * @default ''
+         */
+        "body": string;
+        /**
+          * Optional visual title. Use with body; required when icon is provided.
          */
-        "messages": Partial<Record<EmptyStateType, string>>;
+        "heading": string | undefined;
         /**
-          * @default 'no-content'
+          * Optional decorative prefix glyph for the complete icon + title + body variant.
          */
-        "type": EmptyStateType;
+        "icon": string | undefined;
     }
     interface DsField {
         /**
@@ -1005,71 +1048,293 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
-     * control-density sizes, with `ds-menu` for the option list.
-     */
     interface DsSelect {
         /**
-          * When a value is selected, render the selected interaction fill (same recipe as unfilled-button `activeFill`). Default `true`. Pass `false` for foreground-only selection (primary label, no fill). A selected value promotes the label to primary; chevron stays secondary.
+          * Show the selected interaction fill when a valid value exists.
           * @default true
          */
         "activeFill": boolean;
         /**
+          * Show the clear footer action when a value exists.
+          * @default true
+         */
+        "allowClear": boolean;
+        /**
+          * Additional IDs that describe the combobox.
+         */
+        "ariaDescribedby": string | undefined;
+        /**
+          * Direct accessible name when no external label is available.
           * @default null
          */
         "ariaLabel": string | null;
+        /**
+          * IDs of elements that label the combobox.
+         */
         "ariaLabelledby": string | undefined;
         /**
+          * Actual parent surface context; omit on primary and secondary surfaces.
+         */
+        "background": SelectBackground | undefined;
+        /**
+          * Localized clear action label.
+          * @default 'Clear'
+         */
+        "clearLabel": string;
+        /**
+          * Native disabled state.
           * @default false
          */
         "disabled": boolean;
         /**
-          * Show a 1px secondary inset border. Default on (matches unfilled button).
+          * Show invalid visual state.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Error text rendered below the trigger when error is true.
+         */
+        "errorMessage": string | undefined;
+        /**
+          * Show the surface-aware inset border.
           * @default true
          */
         "hasBorder": boolean;
         /**
-          * Disables interaction (25% opacity via ds-control-inactive).
+          * Optional trigger prefix icon name.
+         */
+        "icon": string | undefined;
+        /**
+          * ID applied to the internal combobox trigger for external labels.
+         */
+        "inputId": string | undefined;
+        /**
+          * Shared inactive treatment; removes interaction and form submission.
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Replace the prefix with a loader and disable option interaction.
+          * @default false
+         */
+        "isLoading": boolean;
+        /**
+          * Accessible loading status label.
+          * @default 'Loading'
+         */
+        "loadingLabel": string;
+        /**
+          * Native form field name.
+         */
         "name": string | undefined;
         /**
-          * Array of options. Set via JS property.
-          * @example el.options = [{ label: 'Apple', value: 'apple' }];
+          * Localized empty-filter result text.
+          * @default 'No results found'
+         */
+        "noResultsText": string;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Flat choices. Assign arrays through the JavaScript property.
           * @default []
          */
         "options": SelectOption[];
         /**
-          * Placeholder shown when no value is selected.
+          * Trigger text shown when no valid value is selected.
           * @default 'Select'
          */
         "placeholder": string;
         /**
+          * Require one valid selected value.
           * @default false
          */
         "required": boolean;
         /**
+          * Validation message used when required is missing.
           * @default 'This field is required.'
          */
         "requiredMessage": string;
         /**
-          * Control density (height, padding, icon, type).
+          * Localized search-field placeholder and accessible name.
+          * @default 'Search'
+         */
+        "searchPlaceholder": string;
+        /**
+          * Show immediate local filtering over option labels, subtext, and section headings.
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * Grouped choices; takes precedence over options. Assign through JavaScript.
+          * @default []
+         */
+        "sections": SelectSection[];
+        "setFocus": () => Promise<void>;
+        /**
+          * Control density.
           * @default 'md'
          */
         "size": SelectSize;
         /**
-          * Currently selected value.
+          * Selected string value. Unknown values render the placeholder and are not submitted.
           * @default ''
          */
         "value": string;
         /**
-          * Width fit — fill the parent (default) or hug content.
-          * @default 'fill'
+          * Width fit — hug content (default) or fill the parent.
+          * @default 'hug'
          */
         "width": SelectWidth;
     }
+    interface DsSelectMulti {
+        /**
+          * Show the selected interaction fill when at least one value exists.
+          * @default true
+         */
+        "activeFill": boolean;
+        /**
+          * Show the clear-all footer action when values exist.
+          * @default true
+         */
+        "allowClear": boolean;
+        /**
+          * Additional IDs that describe the combobox.
+         */
+        "ariaDescribedby": string | undefined;
+        /**
+          * Direct accessible name when no external label is available.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * IDs of elements that label the combobox.
+         */
+        "ariaLabelledby": string | undefined;
+        /**
+          * Actual parent surface context; omit on primary and secondary surfaces.
+         */
+        "background": SelectMultiBackground | undefined;
+        /**
+          * Localized clear-all action label.
+          * @default 'Clear'
+         */
+        "clearLabel": string;
+        /**
+          * Native disabled state.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Show invalid visual state.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Error text rendered below the trigger when error is true.
+         */
+        "errorMessage": string | undefined;
+        /**
+          * Show the surface-aware inset border.
+          * @default true
+         */
+        "hasBorder": boolean;
+        /**
+          * Optional trigger prefix icon name.
+         */
+        "icon": string | undefined;
+        /**
+          * ID applied to the internal combobox trigger for external labels.
+         */
+        "inputId": string | undefined;
+        /**
+          * Shared inactive treatment; removes interaction and form submission.
+          * @default false
+         */
+        "isInactive": boolean;
+        /**
+          * Replace the prefix with a loader and disable option interaction.
+          * @default false
+         */
+        "isLoading": boolean;
+        /**
+          * Accessible loading status label.
+          * @default 'Loading'
+         */
+        "loadingLabel": string;
+        /**
+          * Native form field name used for each repeated selected-value entry.
+         */
+        "name": string | undefined;
+        /**
+          * Localized empty-filter result text.
+          * @default 'No results found'
+         */
+        "noResultsText": string;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Flat choices. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "options": SelectMultiOption[];
+        /**
+          * Persistent trigger label; selected option labels never replace it.
+          * @default 'Select'
+         */
+        "placeholder": string;
+        /**
+          * Require at least one valid selected value.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Validation message used when required is missing.
+          * @default 'This field is required.'
+         */
+        "requiredMessage": string;
+        /**
+          * Localized search-field placeholder and accessible name.
+          * @default 'Search'
+         */
+        "searchPlaceholder": string;
+        /**
+          * Show immediate local filtering over option labels, subtext, and section headings.
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * Grouped choices; takes precedence over options. Assign through JavaScript.
+          * @default []
+         */
+        "sections": SelectMultiSection[];
+        /**
+          * Localized noun displayed after the selected count.
+          * @default 'selected'
+         */
+        "selectedLabel": string;
+        "setFocus": () => Promise<void>;
+        /**
+          * Control density.
+          * @default 'md'
+         */
+        "size": SelectMultiSize;
+        /**
+          * Selected values. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "values": string[];
+        /**
+          * Width fit — hug content (default) or fill the parent.
+          * @default 'hug'
+         */
+        "width": SelectMultiWidth;
+    }
     interface DsShellGradientPicker {
         /**
           * @default 'Shell gradient theme'
@@ -1338,6 +1603,9 @@ export namespace Components {
           * @default 'inherit'
          */
         "color": TextColor;
+        /**
+          * Link underline or dotted hidden-interaction affordance; does not add semantics.
+         */
         "decoration": TextDecoration | undefined;
         /**
           * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
@@ -1534,6 +1802,10 @@ export interface DsSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSelectElement;
 }
+export interface DsSelectMultiCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSelectMultiElement;
+}
 export interface DsShellGradientPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsShellGradientPickerElement;
@@ -1966,11 +2238,9 @@ declare global {
     };
     interface HTMLDsSelectElementEventMap {
         "dsChange": string;
+        "dsClear": void;
+        "dsOpenChange": boolean;
     }
-    /**
-     * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
-     * control-density sizes, with `ds-menu` for the option list.
-     */
     interface HTMLDsSelectElement extends Components.DsSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsSelectElementEventMap>(type: K, listener: (this: HTMLDsSelectElement, ev: DsSelectCustomEvent<HTMLDsSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1985,6 +2255,25 @@ declare global {
         prototype: HTMLDsSelectElement;
         new (): HTMLDsSelectElement;
     };
+    interface HTMLDsSelectMultiElementEventMap {
+        "dsChange": string[];
+        "dsClear": void;
+        "dsOpenChange": boolean;
+    }
+    interface HTMLDsSelectMultiElement extends Components.DsSelectMulti, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSelectMultiElementEventMap>(type: K, listener: (this: HTMLDsSelectMultiElement, ev: DsSelectMultiCustomEvent<HTMLDsSelectMultiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsSelectMultiElementEventMap>(type: K, listener: (this: HTMLDsSelectMultiElement, ev: DsSelectMultiCustomEvent<HTMLDsSelectMultiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsSelectMultiElement: {
+        prototype: HTMLDsSelectMultiElement;
+        new (): HTMLDsSelectMultiElement;
+    };
     interface HTMLDsShellGradientPickerElementEventMap {
         "dsChange": ShellGradientPreset1;
     }
@@ -2179,6 +2468,7 @@ declare global {
         "ds-panel-tools": HTMLDsPanelToolsElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-select": HTMLDsSelectElement;
+        "ds-select-multi": HTMLDsSelectMultiElement;
         "ds-shell-gradient-picker": HTMLDsShellGradientPickerElement;
         "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
         "ds-skeleton": HTMLDsSkeletonElement;
@@ -2227,6 +2517,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "gradientBackground"?: boolean;
+        /**
+          * Show the separation ring when the badge overlaps an icon or other content.
+          * @default true
+         */
+        "hasRing"?: boolean;
         /**
           * Contextual supplemental text. Omit when the owner hides the badge from assistive technology.
          */
@@ -2361,6 +2656,11 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         "onDsClick"?: (event: DsButtonFilledCustomEvent<MouseEvent>) => void;
+        /**
+          * Use the half-radius treatment instead of the default control radius.
+          * @default false
+         */
+        "rounded"?: boolean;
         /**
           * Control density (height, padding, icon, type).
           * @default 'md'
@@ -2442,6 +2742,11 @@ declare namespace LocalJSX {
         "onDsChange"?: (event: DsButtonUnfilledCustomEvent<boolean>) => void;
         "onDsClick"?: (event: DsButtonUnfilledCustomEvent<MouseEvent>) => void;
         "pressed"?: boolean | undefined;
+        /**
+          * Use the half-radius treatment instead of the default control radius.
+          * @default false
+         */
+        "rounded"?: boolean;
         /**
           * Control density (height, padding, icon, type).
           * @default 'md'
@@ -2664,10 +2969,12 @@ declare namespace LocalJSX {
     }
     interface DsCheckbox {
         /**
+          * Current checked state.
           * @default false
          */
         "checked"?: boolean;
         /**
+          * Native disabled state.
           * @default false
          */
         "disabled"?: boolean;
@@ -2676,25 +2983,49 @@ declare namespace LocalJSX {
          */
         "form"?: string;
         /**
+          * Mixed visual state. Activation clears it before toggling checked.
           * @default false
          */
         "indeterminate"?: boolean;
         /**
+          * Design-system inactive state.
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Visible label and accessible name. Omitted only in presentation mode.
+         */
         "label": string;
+        /**
+          * Native form field name.
+         */
         "name"?: string | undefined;
+        /**
+          * Emitted after user activation with the new checked state.
+         */
         "onDsChange"?: (event: DsCheckboxCustomEvent<boolean>) => void;
         /**
+          * Visual-only indicator for a composite control that owns selection semantics.
+          * @default false
+         */
+        "presentation"?: boolean;
+        /**
+          * Require the checkbox to be checked for form validity.
           * @default false
          */
         "required"?: boolean;
         /**
+          * Validation message used when a required checkbox is unchecked.
           * @default 'This field is required.'
          */
         "requiredMessage"?: string;
         /**
+          * Visual and placement density.
+          * @default 'md'
+         */
+        "size"?: CheckboxSize;
+        /**
+          * Submitted value when checked.
           * @default 'on'
          */
         "value"?: string;
@@ -2761,16 +3092,19 @@ declare namespace LocalJSX {
         "semantic"?: boolean;
     }
     interface DsEmptyState {
-        "message"?: string | undefined;
         /**
-          * Localized defaults keyed by empty-state type. Set as a JS property.
-          * @default {}
+          * Explanatory empty-state copy. Every supported variant includes body text.
+          * @default ''
          */
-        "messages"?: Partial<Record<EmptyStateType, string>>;
+        "body"?: string;
         /**
-          * @default 'no-content'
+          * Optional visual title. Use with body; required when icon is provided.
          */
-        "type"?: EmptyStateType;
+        "heading"?: string | undefined;
+        /**
+          * Optional decorative prefix glyph for the complete icon + title + body variant.
+         */
+        "icon"?: string | undefined;
     }
     interface DsField {
         /**
@@ -3191,79 +3525,323 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    /**
-     * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
-     * control-density sizes, with `ds-menu` for the option list.
-     */
     interface DsSelect {
         /**
-          * When a value is selected, render the selected interaction fill (same recipe as unfilled-button `activeFill`). Default `true`. Pass `false` for foreground-only selection (primary label, no fill). A selected value promotes the label to primary; chevron stays secondary.
+          * Show the selected interaction fill when a valid value exists.
           * @default true
          */
         "activeFill"?: boolean;
         /**
+          * Show the clear footer action when a value exists.
+          * @default true
+         */
+        "allowClear"?: boolean;
+        /**
+          * Additional IDs that describe the combobox.
+         */
+        "ariaDescribedby"?: string | undefined;
+        /**
+          * Direct accessible name when no external label is available.
           * @default null
          */
         "ariaLabel"?: string | null;
+        /**
+          * IDs of elements that label the combobox.
+         */
         "ariaLabelledby"?: string | undefined;
         /**
+          * Actual parent surface context; omit on primary and secondary surfaces.
+         */
+        "background"?: SelectBackground | undefined;
+        /**
+          * Localized clear action label.
+          * @default 'Clear'
+         */
+        "clearLabel"?: string;
+        /**
+          * Native disabled state.
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Show invalid visual state.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Error text rendered below the trigger when error is true.
+         */
+        "errorMessage"?: string | undefined;
         /**
           * The `id` of a `<form>` element to associate this element with.
          */
         "form"?: string;
         /**
-          * Show a 1px secondary inset border. Default on (matches unfilled button).
+          * Show the surface-aware inset border.
           * @default true
          */
         "hasBorder"?: boolean;
         /**
-          * Disables interaction (25% opacity via ds-control-inactive).
+          * Optional trigger prefix icon name.
+         */
+        "icon"?: string | undefined;
+        /**
+          * ID applied to the internal combobox trigger for external labels.
+         */
+        "inputId"?: string | undefined;
+        /**
+          * Shared inactive treatment; removes interaction and form submission.
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Replace the prefix with a loader and disable option interaction.
+          * @default false
+         */
+        "isLoading"?: boolean;
+        /**
+          * Accessible loading status label.
+          * @default 'Loading'
+         */
+        "loadingLabel"?: string;
+        /**
+          * Native form field name.
+         */
         "name"?: string | undefined;
         /**
-          * Emits the selected value string.
+          * Localized empty-filter result text.
+          * @default 'No results found'
+         */
+        "noResultsText"?: string;
+        /**
+          * Emitted after user selection or clearing with the next scalar value.
          */
         "onDsChange"?: (event: DsSelectCustomEvent<string>) => void;
         /**
-          * Array of options. Set via JS property.
-          * @example el.options = [{ label: 'Apple', value: 'apple' }];
+          * Emitted after the footer clear action.
+         */
+        "onDsClear"?: (event: DsSelectCustomEvent<void>) => void;
+        /**
+          * Emitted whenever popup visibility changes.
+         */
+        "onDsOpenChange"?: (event: DsSelectCustomEvent<boolean>) => void;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Flat choices. Assign arrays through the JavaScript property.
           * @default []
          */
         "options"?: SelectOption[];
         /**
-          * Placeholder shown when no value is selected.
+          * Trigger text shown when no valid value is selected.
           * @default 'Select'
          */
         "placeholder"?: string;
         /**
+          * Require one valid selected value.
           * @default false
          */
         "required"?: boolean;
         /**
+          * Validation message used when required is missing.
           * @default 'This field is required.'
          */
         "requiredMessage"?: string;
         /**
-          * Control density (height, padding, icon, type).
+          * Localized search-field placeholder and accessible name.
+          * @default 'Search'
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * Show immediate local filtering over option labels, subtext, and section headings.
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * Grouped choices; takes precedence over options. Assign through JavaScript.
+          * @default []
+         */
+        "sections"?: SelectSection[];
+        /**
+          * Control density.
           * @default 'md'
          */
         "size"?: SelectSize;
         /**
-          * Currently selected value.
+          * Selected string value. Unknown values render the placeholder and are not submitted.
           * @default ''
          */
         "value"?: string;
         /**
-          * Width fit — fill the parent (default) or hug content.
-          * @default 'fill'
+          * Width fit — hug content (default) or fill the parent.
+          * @default 'hug'
          */
         "width"?: SelectWidth;
     }
+    interface DsSelectMulti {
+        /**
+          * Show the selected interaction fill when at least one value exists.
+          * @default true
+         */
+        "activeFill"?: boolean;
+        /**
+          * Show the clear-all footer action when values exist.
+          * @default true
+         */
+        "allowClear"?: boolean;
+        /**
+          * Additional IDs that describe the combobox.
+         */
+        "ariaDescribedby"?: string | undefined;
+        /**
+          * Direct accessible name when no external label is available.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * IDs of elements that label the combobox.
+         */
+        "ariaLabelledby"?: string | undefined;
+        /**
+          * Actual parent surface context; omit on primary and secondary surfaces.
+         */
+        "background"?: SelectMultiBackground | undefined;
+        /**
+          * Localized clear-all action label.
+          * @default 'Clear'
+         */
+        "clearLabel"?: string;
+        /**
+          * Native disabled state.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Show invalid visual state.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Error text rendered below the trigger when error is true.
+         */
+        "errorMessage"?: string | undefined;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Show the surface-aware inset border.
+          * @default true
+         */
+        "hasBorder"?: boolean;
+        /**
+          * Optional trigger prefix icon name.
+         */
+        "icon"?: string | undefined;
+        /**
+          * ID applied to the internal combobox trigger for external labels.
+         */
+        "inputId"?: string | undefined;
+        /**
+          * Shared inactive treatment; removes interaction and form submission.
+          * @default false
+         */
+        "isInactive"?: boolean;
+        /**
+          * Replace the prefix with a loader and disable option interaction.
+          * @default false
+         */
+        "isLoading"?: boolean;
+        /**
+          * Accessible loading status label.
+          * @default 'Loading'
+         */
+        "loadingLabel"?: string;
+        /**
+          * Native form field name used for each repeated selected-value entry.
+         */
+        "name"?: string | undefined;
+        /**
+          * Localized empty-filter result text.
+          * @default 'No results found'
+         */
+        "noResultsText"?: string;
+        /**
+          * Emitted after user toggles or clearing with a new values array.
+         */
+        "onDsChange"?: (event: DsSelectMultiCustomEvent<string[]>) => void;
+        /**
+          * Emitted after the footer clear-all action.
+         */
+        "onDsClear"?: (event: DsSelectMultiCustomEvent<void>) => void;
+        /**
+          * Emitted whenever popup visibility changes.
+         */
+        "onDsOpenChange"?: (event: DsSelectMultiCustomEvent<boolean>) => void;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Flat choices. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "options"?: SelectMultiOption[];
+        /**
+          * Persistent trigger label; selected option labels never replace it.
+          * @default 'Select'
+         */
+        "placeholder"?: string;
+        /**
+          * Require at least one valid selected value.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Validation message used when required is missing.
+          * @default 'This field is required.'
+         */
+        "requiredMessage"?: string;
+        /**
+          * Localized search-field placeholder and accessible name.
+          * @default 'Search'
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * Show immediate local filtering over option labels, subtext, and section headings.
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * Grouped choices; takes precedence over options. Assign through JavaScript.
+          * @default []
+         */
+        "sections"?: SelectMultiSection[];
+        /**
+          * Localized noun displayed after the selected count.
+          * @default 'selected'
+         */
+        "selectedLabel"?: string;
+        /**
+          * Control density.
+          * @default 'md'
+         */
+        "size"?: SelectMultiSize;
+        /**
+          * Selected values. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "values"?: string[];
+        /**
+          * Width fit — hug content (default) or fill the parent.
+          * @default 'hug'
+         */
+        "width"?: SelectMultiWidth;
+    }
     interface DsShellGradientPicker {
         /**
           * @default 'Shell gradient theme'
@@ -3544,6 +4122,9 @@ declare namespace LocalJSX {
           * @default 'inherit'
          */
         "color"?: TextColor;
+        /**
+          * Link underline or dotted hidden-interaction affordance; does not add semantics.
+         */
         "decoration"?: TextDecoration | undefined;
         /**
           * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
@@ -3675,6 +4256,7 @@ declare namespace LocalJSX {
         "max": number;
         "surface": BadgeSurface;
         "background": string | undefined;
+        "hasRing": boolean;
         "gradientBackground": boolean;
         "label": string | undefined;
     }
@@ -3704,6 +4286,7 @@ declare namespace LocalJSX {
         "icon": string;
         "intent": ButtonFilledIntent;
         "contrast": ButtonFilledContrast;
+        "rounded": boolean;
         "isInactive": boolean;
         "isLoading": boolean;
         "type": 'button' | 'submit' | 'reset';
@@ -3718,6 +4301,7 @@ declare namespace LocalJSX {
         "isActive": boolean;
         "activeFill": boolean;
         "hasBorder": boolean;
+        "rounded": boolean;
         "dot": boolean;
         "isInactive": boolean;
         "isLoading": boolean;
@@ -3777,6 +4361,7 @@ declare namespace LocalJSX {
     interface DsCheckboxAttributes {
         "label": string;
         "checked": boolean;
+        "size": CheckboxSize;
         "name": string | undefined;
         "value": string;
         "disabled": boolean;
@@ -3784,6 +4369,7 @@ declare namespace LocalJSX {
         "requiredMessage": string;
         "indeterminate": boolean;
         "isInactive": boolean;
+        "presentation": boolean;
     }
     interface DsChipAttributes {
         "label": string;
@@ -3802,8 +4388,9 @@ declare namespace LocalJSX {
         "semantic": boolean;
     }
     interface DsEmptyStateAttributes {
-        "type": EmptyStateType;
-        "message": string | undefined;
+        "icon": string | undefined;
+        "heading": string | undefined;
+        "body": string;
     }
     interface DsFieldAttributes {
         "label": string;
@@ -3912,6 +4499,7 @@ declare namespace LocalJSX {
     }
     interface DsSelectAttributes {
         "value": string;
+        "open": boolean;
         "name": string | undefined;
         "disabled": boolean;
         "required": boolean;
@@ -3920,10 +4508,52 @@ declare namespace LocalJSX {
         "size": SelectSize;
         "width": SelectWidth;
         "isInactive": boolean;
+        "isLoading": boolean;
+        "activeFill": boolean;
+        "hasBorder": boolean;
+        "icon": string | undefined;
+        "allowClear": boolean;
+        "clearLabel": string;
+        "searchable": boolean;
+        "searchPlaceholder": string;
+        "noResultsText": string;
+        "loadingLabel": string;
+        "background": SelectBackground | undefined;
+        "error": boolean;
+        "errorMessage": string | undefined;
+        "inputId": string | undefined;
+        "ariaLabel": string | null;
+        "ariaLabelledby": string | undefined;
+        "ariaDescribedby": string | undefined;
+    }
+    interface DsSelectMultiAttributes {
+        "open": boolean;
+        "name": string | undefined;
+        "disabled": boolean;
+        "required": boolean;
+        "requiredMessage": string;
+        "placeholder": string;
+        "size": SelectMultiSize;
+        "width": SelectMultiWidth;
+        "isInactive": boolean;
+        "isLoading": boolean;
         "activeFill": boolean;
         "hasBorder": boolean;
+        "icon": string | undefined;
+        "allowClear": boolean;
+        "clearLabel": string;
+        "selectedLabel": string;
+        "searchable": boolean;
+        "searchPlaceholder": string;
+        "noResultsText": string;
+        "loadingLabel": string;
+        "background": SelectMultiBackground | undefined;
+        "error": boolean;
+        "errorMessage": string | undefined;
+        "inputId": string | undefined;
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
+        "ariaDescribedby": string | undefined;
     }
     interface DsShellGradientPickerAttributes {
         "value": ShellGradientPreset;
@@ -4064,6 +4694,7 @@ declare namespace LocalJSX {
         "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
+        "ds-select-multi": Omit<DsSelectMulti, keyof DsSelectMultiAttributes> & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes]?: DsSelectMulti[K] } & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes as `attr:${K}`]?: DsSelectMultiAttributes[K] } & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes as `prop:${K}`]?: DsSelectMulti[K] };
         "ds-shell-gradient-picker": Omit<DsShellGradientPicker, keyof DsShellGradientPickerAttributes> & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes]?: DsShellGradientPicker[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `attr:${K}`]?: DsShellGradientPickerAttributes[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `prop:${K}`]?: DsShellGradientPicker[K] };
         "ds-shell-gradient-swatch": Omit<DsShellGradientSwatch, keyof DsShellGradientSwatchAttributes> & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes]?: DsShellGradientSwatch[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `attr:${K}`]?: DsShellGradientSwatchAttributes[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `prop:${K}`]?: DsShellGradientSwatch[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
@@ -4129,11 +4760,8 @@ declare module "@stencil/core" {
             "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
             "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
-            /**
-             * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
-             * control-density sizes, with `ds-menu` for the option list.
-             */
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
+            "ds-select-multi": LocalJSX.IntrinsicElements["ds-select-multi"] & JSXBase.HTMLAttributes<HTMLDsSelectMultiElement>;
             "ds-shell-gradient-picker": LocalJSX.IntrinsicElements["ds-shell-gradient-picker"] & JSXBase.HTMLAttributes<HTMLDsShellGradientPickerElement>;
             "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;