@ds-mo/ui 8.0.1 → 8.2.0

package/dist/types/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export type { RadioOption, RadioSize } from './Radio';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Select/Select.d.ts

@@ -1,83 +1,129 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
-export interface SelectOption {
-    label: string;
-    value: string;
-}
+import { type ChoiceBackground, type ChoiceOption, type ChoiceSection } from '../../utils/choice-list';
+export type SelectOption = ChoiceOption;
+export type SelectSection = ChoiceSection;
+export type SelectBackground = ChoiceBackground;
 export type SelectSize = 'md' | 'sm' | 'xs';
 export type SelectWidth = ControlWidth;
-/**
- * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
- * control-density sizes, with `ds-menu` for the option list.
- */
 export declare class Select {
     el: HTMLElement;
     internals: ElementInternals;
-    /**
-     * Array of options. Set via JS property.
-     * @example el.options = [{ label: 'Apple', value: 'apple' }];
-     */
+    /** Flat choices. Assign arrays through the JavaScript property. */
     options: SelectOption[];
-    /** Currently selected value. */
+    /** Grouped choices; takes precedence over options. Assign through JavaScript. */
+    sections: SelectSection[];
+    /** Selected string value. Unknown values render the placeholder and are not submitted. */
     value: string;
+    /** Controlled popup visibility. */
+    open: boolean;
+    /** Native form field name. */
     name: string | undefined;
+    /** Native disabled state. */
     disabled: boolean;
+    /** Require one valid selected value. */
     required: boolean;
+    /** Validation message used when required is missing. */
     requiredMessage: string;
-    /** Placeholder shown when no value is selected. */
+    /** Trigger text shown when no valid value is selected. */
     placeholder: string;
-    /** Control density (height, padding, icon, type). */
+    /** Control density. */
     size: SelectSize;
-    /** Width fit — fill the parent (default) or hug content. */
+    /** Width fit — hug content (default) or fill the parent. */
     width: SelectWidth;
-    /** Disables interaction (25% opacity via ds-control-inactive). */
+    /** Shared inactive treatment; removes interaction and form submission. */
     isInactive: boolean;
-    /**
-     * 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.
-     */
+    /** Replace the prefix with a loader and disable option interaction. */
+    isLoading: boolean;
+    /** Show the selected interaction fill when a valid value exists. */
     activeFill: boolean;
-    /** Show a 1px secondary inset border. Default on (matches unfilled button). */
+    /** Show the surface-aware inset border. */
     hasBorder: boolean;
+    /** Optional trigger prefix icon name. */
+    icon: string | undefined;
+    /** Show the clear footer action when a value exists. */
+    allowClear: boolean;
+    /** Localized clear action label. */
+    clearLabel: string;
+    /** Show immediate local filtering over option labels, subtext, and section headings. */
+    searchable: boolean;
+    /** Localized search-field placeholder and accessible name. */
+    searchPlaceholder: string;
+    /** Localized empty-filter result text. */
+    noResultsText: string;
+    /** Accessible loading status label. */
+    loadingLabel: string;
+    /** Actual parent surface context; omit on primary and secondary surfaces. */
+    background: SelectBackground | undefined;
+    /** Show invalid visual state. */
+    error: boolean;
+    /** Error text rendered below the trigger when error is true. */
+    errorMessage: string | undefined;
+    /** ID applied to the internal combobox trigger for external labels. */
+    inputId: string | undefined;
+    /** Direct accessible name when no external label is available. */
     ariaLabel: string | null;
+    /** IDs of elements that label the combobox. */
     ariaLabelledby: string | undefined;
-    /** Emits the selected value string. */
+    /** Additional IDs that describe the combobox. */
+    ariaDescribedby: string | undefined;
+    /** Emitted after user selection or clearing with the next scalar value. */
     dsChange: EventEmitter<string>;
-    private isOpen;
+    /** Emitted after the footer clear action. */
+    dsClear: EventEmitter<void>;
+    /** Emitted whenever popup visibility changes. */
+    dsOpenChange: EventEmitter<boolean>;
+    private activeIndex;
+    private searchTerm;
+    private formDisabled;
+    private position;
+    private positionReady;
+    private focusRingVisible;
+    private readonly generatedId;
+    private readonly listboxId;
+    private readonly errorId;
     private triggerEl;
-    private menuEl;
-    /** True when the open was keyboard-driven — menu shows initial focus ring. */
-    private openWithFocusVisible;
+    private popupEl;
+    private searchEl;
     private initialValue;
-    private formDisabled;
+    private typeahead;
+    private typeaheadTimer;
+    private outsideHandler;
+    private repositionHandler;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    onIsOpenChange(open: boolean): void;
-    onOptionsChange(): void;
-    onValueChange(): void;
     syncFormValue(): void;
+    onLoadingChange(): void;
+    onOpenChange(open: boolean): void;
+    onSearchTermChange(): void;
+    onActiveIndexChange(): void;
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData | null): void;
-    private handleMenuSelect;
-    private handleMenuClose;
-    private syncMenuItems;
-    /**
-     * Size/place the menu so option labels line up with the select label.
-     * Menu section padding insets items; we expand min-width by that chrome and
-     * shift left by the same amount (`alignOffset`). Menu can grow wider than
-     * the field (left-bottom / `align="start"`) when labels need more room.
-     */
-    private syncMenuLayout;
-    private open;
-    private close;
-    private toggle;
-    handleKeyDown(e: KeyboardEvent): void;
-    private get selectedLabel();
+    setFocus(): Promise<void>;
+    private get isDisabled();
+    private get allSections();
+    private get allOptions();
+    private get visibleSections();
+    private get visibleOptions();
+    private get selectedOption();
     private get hasSelection();
+    private get activeOptionId();
+    private scrollActiveOptionIntoView;
+    private bindPopupListeners;
+    private unbindPopupListeners;
+    private updatePosition;
+    private openPopup;
+    private closePopup;
+    private selectOption;
+    private clearSelection;
+    private moveActive;
+    private setActiveEdge;
+    private handleTypeahead;
+    private handleListKeyDown;
+    private handleTriggerKeyDown;
+    private renderOption;
     render(): any;
 }
 //# sourceMappingURL=Select.d.ts.map

package/dist/types/components/Select/index.d.ts

@@ -1,2 +1,2 @@
-export type { SelectOption, SelectSize, SelectWidth } from './Select';
+export type { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth, } from './Select';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/SelectMulti/SelectMulti.d.ts

@@ -0,0 +1,131 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
+import type { SelectBackground, SelectOption, SelectSection, SelectSize } from '../Select/Select';
+export type SelectMultiOption = Omit<SelectOption, 'icon'>;
+export type SelectMultiSection = Omit<SelectSection, 'options'> & {
+    options: SelectMultiOption[];
+};
+export type SelectMultiBackground = SelectBackground;
+export type SelectMultiSize = SelectSize;
+export type SelectMultiWidth = ControlWidth;
+export declare class SelectMulti {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Flat choices. Assign arrays through the JavaScript property. */
+    options: SelectMultiOption[];
+    /** Grouped choices; takes precedence over options. Assign through JavaScript. */
+    sections: SelectMultiSection[];
+    /** Selected values. Assign arrays through the JavaScript property. */
+    values: string[];
+    /** Controlled popup visibility. */
+    open: boolean;
+    /** Native form field name used for each repeated selected-value entry. */
+    name: string | undefined;
+    /** Native disabled state. */
+    disabled: boolean;
+    /** Require at least one valid selected value. */
+    required: boolean;
+    /** Validation message used when required is missing. */
+    requiredMessage: string;
+    /** Persistent trigger label; selected option labels never replace it. */
+    placeholder: string;
+    /** Control density. */
+    size: SelectMultiSize;
+    /** Width fit — hug content (default) or fill the parent. */
+    width: SelectMultiWidth;
+    /** Shared inactive treatment; removes interaction and form submission. */
+    isInactive: boolean;
+    /** Replace the prefix with a loader and disable option interaction. */
+    isLoading: boolean;
+    /** Show the selected interaction fill when at least one value exists. */
+    activeFill: boolean;
+    /** Show the surface-aware inset border. */
+    hasBorder: boolean;
+    /** Optional trigger prefix icon name. */
+    icon: string | undefined;
+    /** Show the clear-all footer action when values exist. */
+    allowClear: boolean;
+    /** Localized clear-all action label. */
+    clearLabel: string;
+    /** Localized noun displayed after the selected count. */
+    selectedLabel: string;
+    /** Show immediate local filtering over option labels, subtext, and section headings. */
+    searchable: boolean;
+    /** Localized search-field placeholder and accessible name. */
+    searchPlaceholder: string;
+    /** Localized empty-filter result text. */
+    noResultsText: string;
+    /** Accessible loading status label. */
+    loadingLabel: string;
+    /** Actual parent surface context; omit on primary and secondary surfaces. */
+    background: SelectMultiBackground | undefined;
+    /** Show invalid visual state. */
+    error: boolean;
+    /** Error text rendered below the trigger when error is true. */
+    errorMessage: string | undefined;
+    /** ID applied to the internal combobox trigger for external labels. */
+    inputId: string | undefined;
+    /** Direct accessible name when no external label is available. */
+    ariaLabel: string | null;
+    /** IDs of elements that label the combobox. */
+    ariaLabelledby: string | undefined;
+    /** Additional IDs that describe the combobox. */
+    ariaDescribedby: string | undefined;
+    /** Emitted after user toggles or clearing with a new values array. */
+    dsChange: EventEmitter<string[]>;
+    /** Emitted after the footer clear-all action. */
+    dsClear: EventEmitter<void>;
+    /** Emitted whenever popup visibility changes. */
+    dsOpenChange: EventEmitter<boolean>;
+    private activeIndex;
+    private searchTerm;
+    private formDisabled;
+    private position;
+    private positionReady;
+    private focusRingVisible;
+    private readonly generatedId;
+    private readonly listboxId;
+    private readonly errorId;
+    private triggerEl;
+    private popupEl;
+    private searchEl;
+    private initialValues;
+    private typeahead;
+    private typeaheadTimer;
+    private outsideHandler;
+    private repositionHandler;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    syncFormValue(): void;
+    onLoadingChange(): void;
+    onOpenChange(open: boolean): void;
+    onSearchTermChange(): void;
+    onActiveIndexChange(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    setFocus(): Promise<void>;
+    private get isDisabled();
+    private get allSections();
+    private get allOptions();
+    private get visibleSections();
+    private get visibleOptions();
+    private get resolvedValues();
+    private get hasSelection();
+    private get activeOptionId();
+    private scrollActiveOptionIntoView;
+    private bindPopupListeners;
+    private unbindPopupListeners;
+    private updatePosition;
+    private openPopup;
+    private closePopup;
+    private toggleOption;
+    private clearSelection;
+    private handleTypeahead;
+    private handleListKeyDown;
+    private handleTriggerKeyDown;
+    private renderOption;
+    render(): any;
+}
+//# sourceMappingURL=SelectMulti.d.ts.map

package/dist/types/components/SelectMulti/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth, } from './SelectMulti';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Slider/Slider.d.ts

@@ -1,18 +1,112 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export type SliderValue = number | number[];
+export type SliderSize = 'md' | 'sm' | 'xs';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderThumbAlignment = 'edge' | 'center';
 export declare class Slider {
-    private generatedId;
-    value: number;
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Current value. Assign a two-number array through the JavaScript property for a range slider. */
+    value: SliderValue;
     min: number;
     max: number;
     step: number;
-    label: string;
+    /** Minimum number of steps kept between two range thumbs. */
+    minStepsBetweenValues: number;
+    /** Visible field label. Supply aria-label when the label is intentionally hidden. */
+    label: string | undefined;
+    /** Show the formatted current value beside the visible label. */
+    showValue: boolean;
+    size: SliderSize;
+    orientation: SliderOrientation;
+    /** Keep the complete thumb inside the rail bounds, or center it on the endpoints. */
+    thumbAlignment: SliderThumbAlignment;
+    name: string | undefined;
+    form: string | undefined;
+    disabled: boolean;
+    /** Keep the value focusable and submittable while preventing changes. */
+    readOnly: boolean;
     isInactive: boolean;
+    /** Direct accessible name for a single-thumb slider without a visible label. */
+    ariaLabel: string | null;
+    /** Id references for a visible single-thumb slider label. */
+    ariaLabelledby: string | undefined;
+    /** Id references for supporting guidance or error text. */
+    ariaDescribedby: string | undefined;
+    /** Accessible label for the lower thumb in a range slider. */
+    startLabel: string;
+    /** Accessible label for the upper thumb in a range slider. */
+    endLabel: string;
+    /** Human-readable value text for a single slider or both range thumbs. */
     valueText: string | undefined;
-    /** Associates with an external <label>. Defaults to an auto-generated ID. */
+    /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */
+    valueTexts: string[];
+    /** Locale used by Intl.NumberFormat for the visible value. */
+    locale: string | undefined;
+    /** Intl.NumberFormat options. Assign objects through the JavaScript property. */
+    formatOptions: Intl.NumberFormatOptions | undefined;
+    valuePrefix: string;
+    valueSuffix: string;
+    rangeSeparator: string;
+    /** Id applied to the first native range input. */
     inputId: string | undefined;
-    dsChange: EventEmitter<number>;
-    private handleInput;
-    private get pct();
+    /** Emitted continuously while the value changes. */
+    dsChange: EventEmitter<SliderValue>;
+    /** Emitted when a pointer or keyboard value change is committed. */
+    dsCommit: EventEmitter<SliderValue>;
+    private formDisabled;
+    private dragging;
+    private focused;
+    private touched;
+    private activeThumbIndex;
+    private externalLabelledby;
+    private readonly generatedId;
+    private readonly labelId;
+    private initialValue;
+    private lastCommittedValue;
+    private pointerId;
+    private pointerStartValue;
+    private controlEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    setFocus(index?: number): Promise<void>;
+    private get isDisabled();
+    private get isRange();
+    private get safeStep();
+    private get safeMin();
+    private get safeMax();
+    private get minimumGap();
+    private get resolvedValues();
+    private get publicValue();
+    private cloneValue;
+    private valuesEqual;
+    private decimalPlaces;
+    private snap;
+    private percent;
+    private allowedMin;
+    private allowedMax;
+    private setValueAt;
+    private commitIfChanged;
+    private syncNativeLabels;
+    private formattedValue;
+    private ariaValueText;
+    private handleNativeInput;
+    private handleNativeChange;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private handleHostClick;
+    private pointerPercent;
+    private valueFromPointer;
+    private closestThumbIndex;
+    private handlePointerDown;
+    private handlePointerMove;
+    private endPointerInteraction;
+    private renderThumb;
     render(): any;
 }
 //# sourceMappingURL=Slider.d.ts.map

package/dist/types/components/Switch/Switch.d.ts

@@ -26,6 +26,8 @@ export declare class Switch {
     dsChange: EventEmitter<boolean>;
     private initialChecked;
     private formDisabled;
+    private focused;
+    private touched;
     componentWillLoad(): void;
     componentDidLoad(): void;
     syncFormValue(): void;
@@ -35,6 +37,8 @@ export declare class Switch {
     private syncNativeLabels;
     private handleClick;
     private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
     render(): any;
 }
 //# sourceMappingURL=Switch.d.ts.map

package/dist/types/components/TabGroup/TabGroup.d.ts

@@ -10,6 +10,7 @@ export declare class TabGroup {
     ariaLabelledby: string | undefined;
     dsChange: EventEmitter<string>;
     private get selectableTabs();
+    private get focusableTabId();
     private selectTab;
     private focusTab;
     /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */

package/dist/types/components/Text/Text.d.ts

@@ -8,7 +8,14 @@ export declare class Text {
      * `true`: display bold, title/caption semibold, body medium.
      */
     emphasis: boolean;
+    /**
+     * Semantic foreground color token or CSS variable. `tertiary` and the
+     * still-fainter `quaternary` are restricted to genuinely inactive/disabled
+     * UI content or purely decorative content; prefer the owning control's
+     * inactive state whenever one exists.
+     */
     color: TextColor;
+    /** Link underline or dotted hidden-interaction affordance; does not add semantics. */
     decoration: TextDecoration | undefined;
     italic: boolean;
     /** Animate the visible glyphs with the shared loading shimmer treatment. */

package/dist/types/components/Text/text-types.d.ts

@@ -1,5 +1,5 @@
 export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-medium' | 'text-body-small' | 'text-caption';
-export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
+export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
 export type TextColor = TextColorToken | `var(--${string})`;
 export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
 export type TextAlign = 'left' | 'center' | 'right';