@ds-mo/ui 4.2.0 → 6.0.0

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SwitchSize = 'md' | 'sm' | 'xs';
+export declare class Switch {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Current on/off state. The initial value is restored when the owning form resets. */
+    checked: boolean;
+    name: string | undefined;
+    value: string;
+    /** Optional value submitted when unchecked; omitted by default like a native checkbox. */
+    uncheckedValue: string | undefined;
+    /** Associates the switch with a form by id when it is rendered outside that form. */
+    form: string | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    requiredMessage: string;
+    isInactive: boolean;
+    /** Compact track size for placement inside controls, menus, and form rows. */
+    size: SwitchSize;
+    /**
+     * Removes standalone control semantics so a composite owner such as a
+     * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.
+     */
+    presentation: boolean;
+    dsChange: EventEmitter<boolean>;
+    private initialChecked;
+    private formDisabled;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    private syncNativeLabels;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}
+//# sourceMappingURL=Switch.d.ts.map

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

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

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

@@ -38,13 +38,20 @@ export declare class Tooltip {
     private anchor;
     private popupEl;
     private positionObserver;
+    private anchorObserver;
+    private positionFrame;
     private skipEnterAnimation;
     private isOpen;
-    private mouseEnterHandler;
-    private mouseLeaveHandler;
+    private lastInteractionWasKeyboard;
+    private pointerEnterHandler;
+    private pointerLeaveHandler;
+    private pointerDownHandler;
+    private keyDownHandler;
     /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
     private focusHandler;
     private blurHandler;
+    private scrollResizeHandler;
+    private escapeHandler;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onContentOrPositionChange(): void;
@@ -58,7 +65,12 @@ export declare class Tooltip {
     private get tooltipFallbackHeightPx();
     private bindAnchor;
     private unbindAnchor;
+    private linkDescribedBy;
+    private unlinkDescribedBy;
+    private handleSlotChange;
     private clearTimers;
+    private setupOpenListeners;
+    private teardownOpenListeners;
     private destroyPopup;
     /**
      * Position after `ds-text` upgrades and lays out. Measuring synchronously in

package/dist/types/components/Tooltip/tooltip-position.d.ts

@@ -0,0 +1,21 @@
+import type { TooltipAlign, TooltipSide } from './Tooltip';
+export interface TooltipPositionInput {
+    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
+    popupWidth: number;
+    popupHeight: number;
+    side: TooltipSide;
+    align: TooltipAlign;
+    sideOffsetPx: number;
+    alignOffsetPx: number;
+    viewportPadPx: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+export interface TooltipPosition {
+    x: number;
+    y: number;
+    resolvedSide: TooltipSide;
+}
+/** Flip on the preferred axis when needed, then clamp within the viewport. */
+export declare function computeTooltipPosition(input: TooltipPositionInput): TooltipPosition;
+//# sourceMappingURL=tooltip-position.d.ts.map

package/dist/types/components.d.ts

@@ -32,10 +32,11 @@ import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-import { SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { IconSize as IconSize1 } from "./components/Icon/Icon";
 import { ControlSize } from "./utils/control-text";
+import { SwitchSize } from "./components/Switch/Switch";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
@@ -69,10 +70,11 @@ export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-export { SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { IconSize as IconSize1 } from "./components/Icon/Icon";
 export { ControlSize } from "./utils/control-text";
+export { SwitchSize } from "./components/Switch/Switch";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
 export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
@@ -112,11 +114,6 @@ export namespace Components {
           * @default false
          */
         "gradientBackground": boolean;
-        /**
-          * Deprecated alias for selected counter styling. Prefer context-specific color in the parent.
-          * @default false
-         */
-        "isSelected": boolean;
         /**
           * Accessible label. Defaults to the count as a string.
          */
@@ -996,7 +993,7 @@ export namespace Components {
      */
     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). Selected/open promotes the label to primary; chevron stays secondary.
+          * 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.
           * @default true
          */
         "activeFill": boolean;
@@ -1107,6 +1104,11 @@ export namespace Components {
           * @default true
          */
         "shimmer": boolean;
+        /**
+          * Surface context used to select the matching foreground base and shimmer tokens.
+          * @default 'default'
+         */
+        "surface": SkeletonSurface;
         /**
           * Text metric recipe whose line-height defines the text canvas.
           * @default 'text-body-medium'
@@ -1149,6 +1151,56 @@ export namespace Components {
         "value": number;
         "valueText": string | undefined;
     }
+    interface DsSwitch {
+        /**
+          * Current on/off state. The initial value is restored when the owning form resets.
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Associates the switch with a form by id when it is rendered outside that form.
+         */
+        "form": string | undefined;
+        /**
+          * @default false
+         */
+        "isInactive": boolean;
+        "name": string | undefined;
+        /**
+          * Removes standalone control semantics so a composite owner such as a `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.
+          * @default false
+         */
+        "presentation": boolean;
+        /**
+          * @default false
+         */
+        "readOnly": boolean;
+        /**
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * @default 'This field is required.'
+         */
+        "requiredMessage": string;
+        /**
+          * Compact track size for placement inside controls, menus, and form rows.
+          * @default 'md'
+         */
+        "size": SwitchSize;
+        /**
+          * Optional value submitted when unchecked; omitted by default like a native checkbox.
+         */
+        "uncheckedValue": string | undefined;
+        /**
+          * @default 'on'
+         */
+        "value": string;
+    }
     interface DsTabGroup {
         /**
           * @default null
@@ -1316,33 +1368,6 @@ export namespace Components {
         "variant": TextVariant;
         "wrap": TextWrap | undefined;
     }
-    interface DsToggle {
-        /**
-          * @default false
-         */
-        "checked": boolean;
-        /**
-          * @default false
-         */
-        "disabled": boolean;
-        /**
-          * @default false
-         */
-        "isInactive": boolean;
-        "name": string | undefined;
-        /**
-          * @default false
-         */
-        "required": boolean;
-        /**
-          * @default 'This field is required.'
-         */
-        "requiredMessage": string;
-        /**
-          * @default 'on'
-         */
-        "value": string;
-    }
     /**
      * Imperative body portal for the popup.
      * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -1510,6 +1535,10 @@ export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSliderElement;
 }
+export interface DsSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSwitchElement;
+}
 export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
@@ -1522,10 +1551,6 @@ export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
 }
-export interface DsToggleCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsToggleElement;
-}
 declare global {
     interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
     }
@@ -1989,6 +2014,23 @@ declare global {
         prototype: HTMLDsSliderElement;
         new (): HTMLDsSliderElement;
     };
+    interface HTMLDsSwitchElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsSwitchElement extends Components.DsSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSwitchElementEventMap>(type: K, listener: (this: HTMLDsSwitchElement, ev: DsSwitchCustomEvent<HTMLDsSwitchElementEventMap[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 HTMLDsSwitchElementEventMap>(type: K, listener: (this: HTMLDsSwitchElement, ev: DsSwitchCustomEvent<HTMLDsSwitchElementEventMap[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 HTMLDsSwitchElement: {
+        prototype: HTMLDsSwitchElement;
+        new (): HTMLDsSwitchElement;
+    };
     interface HTMLDsTabGroupElementEventMap {
         "dsChange": string;
     }
@@ -2055,23 +2097,6 @@ declare global {
         prototype: HTMLDsTextElement;
         new (): HTMLDsTextElement;
     };
-    interface HTMLDsToggleElementEventMap {
-        "dsChange": boolean;
-    }
-    interface HTMLDsToggleElement extends Components.DsToggle, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsToggleElementEventMap>(type: K, listener: (this: HTMLDsToggleElement, ev: DsToggleCustomEvent<HTMLDsToggleElementEventMap[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 HTMLDsToggleElementEventMap>(type: K, listener: (this: HTMLDsToggleElement, ev: DsToggleCustomEvent<HTMLDsToggleElementEventMap[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 HTMLDsToggleElement: {
-        prototype: HTMLDsToggleElement;
-        new (): HTMLDsToggleElement;
-    };
     /**
      * Imperative body portal for the popup.
      * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -2136,12 +2161,12 @@ declare global {
         "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
+        "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
         "ds-tab-group-nav": HTMLDsTabGroupNavElement;
         "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
-        "ds-toggle": HTMLDsToggleElement;
         "ds-tooltip": HTMLDsTooltipElement;
         "ds-tooltip-data-viz": HTMLDsTooltipDataVizElement;
     }
@@ -2181,11 +2206,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "gradientBackground"?: boolean;
-        /**
-          * Deprecated alias for selected counter styling. Prefer context-specific color in the parent.
-          * @default false
-         */
-        "isSelected"?: boolean;
         /**
           * Accessible label. Defaults to the count as a string.
          */
@@ -3139,7 +3159,7 @@ declare namespace LocalJSX {
      */
     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). Selected/open promotes the label to primary; chevron stays secondary.
+          * 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.
           * @default true
          */
         "activeFill"?: boolean;
@@ -3260,6 +3280,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "shimmer"?: boolean;
+        /**
+          * Surface context used to select the matching foreground base and shimmer tokens.
+          * @default 'default'
+         */
+        "surface"?: SkeletonSurface;
         /**
           * Text metric recipe whose line-height defines the text canvas.
           * @default 'text-body-medium'
@@ -3303,6 +3328,57 @@ declare namespace LocalJSX {
         "value"?: number;
         "valueText"?: string | undefined;
     }
+    interface DsSwitch {
+        /**
+          * Current on/off state. The initial value is restored when the owning form resets.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Associates the switch with a form by id when it is rendered outside that form.
+         */
+        "form"?: string | undefined;
+        /**
+          * @default false
+         */
+        "isInactive"?: boolean;
+        "name"?: string | undefined;
+        "onDsChange"?: (event: DsSwitchCustomEvent<boolean>) => void;
+        /**
+          * Removes standalone control semantics so a composite owner such as a `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.
+          * @default false
+         */
+        "presentation"?: boolean;
+        /**
+          * @default false
+         */
+        "readOnly"?: boolean;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * @default 'This field is required.'
+         */
+        "requiredMessage"?: string;
+        /**
+          * Compact track size for placement inside controls, menus, and form rows.
+          * @default 'md'
+         */
+        "size"?: SwitchSize;
+        /**
+          * Optional value submitted when unchecked; omitted by default like a native checkbox.
+         */
+        "uncheckedValue"?: string | undefined;
+        /**
+          * @default 'on'
+         */
+        "value"?: string;
+    }
     interface DsTabGroup {
         /**
           * @default null
@@ -3476,38 +3552,6 @@ declare namespace LocalJSX {
         "variant"?: TextVariant;
         "wrap"?: TextWrap | undefined;
     }
-    interface DsToggle {
-        /**
-          * @default false
-         */
-        "checked"?: boolean;
-        /**
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The `id` of a `<form>` element to associate this element with.
-         */
-        "form"?: string;
-        /**
-          * @default false
-         */
-        "isInactive"?: boolean;
-        "name"?: string | undefined;
-        "onDsChange"?: (event: DsToggleCustomEvent<boolean>) => void;
-        /**
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * @default 'This field is required.'
-         */
-        "requiredMessage"?: string;
-        /**
-          * @default 'on'
-         */
-        "value"?: string;
-    }
     /**
      * Imperative body portal for the popup.
      * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -3603,7 +3647,6 @@ declare namespace LocalJSX {
         "surface": BadgeSurface;
         "background": string | undefined;
         "gradientBackground": boolean;
-        "isSelected": boolean;
         "label": string | undefined;
     }
     interface DsBannerAttributes {
@@ -3867,6 +3910,7 @@ declare namespace LocalJSX {
         "width": string;
         "rounded": boolean;
         "shimmer": boolean;
+        "surface": SkeletonSurface;
     }
     interface DsSliderAttributes {
         "value": number;
@@ -3878,6 +3922,20 @@ declare namespace LocalJSX {
         "valueText": string | undefined;
         "inputId": string | undefined;
     }
+    interface DsSwitchAttributes {
+        "checked": boolean;
+        "name": string | undefined;
+        "value": string;
+        "uncheckedValue": string | undefined;
+        "form": string | undefined;
+        "disabled": boolean;
+        "readOnly": boolean;
+        "required": boolean;
+        "requiredMessage": string;
+        "isInactive": boolean;
+        "size": SwitchSize;
+        "presentation": boolean;
+    }
     interface DsTabGroupAttributes {
         "value": string;
         "background": TabBackground | undefined;
@@ -3929,15 +3987,6 @@ declare namespace LocalJSX {
         "for": string | undefined;
         "textId": string | undefined;
     }
-    interface DsToggleAttributes {
-        "checked": boolean;
-        "name": string | undefined;
-        "value": string;
-        "disabled": boolean;
-        "required": boolean;
-        "requiredMessage": string;
-        "isInactive": boolean;
-    }
     interface DsTooltipAttributes {
         "label": string;
         "size": TooltipSize;
@@ -3990,12 +4039,12 @@ declare namespace LocalJSX {
         "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] };
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
+        "ds-switch": Omit<DsSwitch, keyof DsSwitchAttributes> & { [K in keyof DsSwitch & keyof DsSwitchAttributes]?: DsSwitch[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `attr:${K}`]?: DsSwitchAttributes[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `prop:${K}`]?: DsSwitch[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
         "ds-tab-group-nav": Omit<DsTabGroupNav, keyof DsTabGroupNavAttributes> & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes]?: DsTabGroupNav[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `attr:${K}`]?: DsTabGroupNavAttributes[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `prop:${K}`]?: DsTabGroupNav[K] };
         "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
-        "ds-toggle": Omit<DsToggle, keyof DsToggleAttributes> & { [K in keyof DsToggle & keyof DsToggleAttributes]?: DsToggle[K] } & { [K in keyof DsToggle & keyof DsToggleAttributes as `attr:${K}`]?: DsToggleAttributes[K] } & { [K in keyof DsToggle & keyof DsToggleAttributes as `prop:${K}`]?: DsToggle[K] };
         "ds-tooltip": Omit<DsTooltip, keyof DsTooltipAttributes> & { [K in keyof DsTooltip & keyof DsTooltipAttributes]?: DsTooltip[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `attr:${K}`]?: DsTooltipAttributes[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `prop:${K}`]?: DsTooltip[K] } & OneOf<"label", DsTooltip["label"], DsTooltipAttributes["label"]>;
         "ds-tooltip-data-viz": Omit<DsTooltipDataViz, keyof DsTooltipDataVizAttributes> & { [K in keyof DsTooltipDataViz & keyof DsTooltipDataVizAttributes]?: DsTooltipDataViz[K] } & { [K in keyof DsTooltipDataViz & keyof DsTooltipDataVizAttributes as `attr:${K}`]?: DsTooltipDataVizAttributes[K] } & { [K in keyof DsTooltipDataViz & keyof DsTooltipDataVizAttributes as `prop:${K}`]?: DsTooltipDataViz[K] };
     }
@@ -4060,12 +4109,12 @@ declare module "@stencil/core" {
             "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
+            "ds-switch": LocalJSX.IntrinsicElements["ds-switch"] & JSXBase.HTMLAttributes<HTMLDsSwitchElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
             "ds-tab-group-nav": LocalJSX.IntrinsicElements["ds-tab-group-nav"] & JSXBase.HTMLAttributes<HTMLDsTabGroupNavElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;
-            "ds-toggle": LocalJSX.IntrinsicElements["ds-toggle"] & JSXBase.HTMLAttributes<HTMLDsToggleElement>;
             /**
              * Imperative body portal for the popup.
              * Stencil must not own the portaled node — moving a VDOM child to `document.body`

package/dist/types/utils/index.d.ts

@@ -2,7 +2,7 @@ export { registerIcons } from '../components/Icon/icon-cache';
 export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
 export { formatCompactNumber } from './format-compact-number';
 export { truncateSvgTextToWidth } from './truncate-svg-text';
-export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export { parseCssTimeMs, prefersReducedMotion, resolveCssTimeMs, resolveMotionTimeMs, } from './resolve-css-time-ms';
 export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdge, resolveScrollEdgeFadeSize, scrollEdgeFadeClassMap, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, scrollEdgeFadeSizeStyle, } from './scroll-edge-fade';
 export type { ScrollEdgeFadeEdge, ScrollEdgeFadeOptions, ScrollEdgeFadeSize, ScrollEdgeFadeSizeToken, } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';

package/dist/types/utils/resolve-css-time-ms.d.ts

@@ -5,4 +5,11 @@ export declare function parseCssTimeMs(value: string, fallback: number): number;
  * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.
  */
 export declare function resolveCssTimeMs(value: number | string | undefined, fallbackToken: string): number;
+/** Whether the user has requested reduced non-essential motion. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Resolve an animation-coupled duration. Returns zero under reduced motion so
+ * JS cleanup stays synchronized with CSS that removes the corresponding motion.
+ */
+export declare function resolveMotionTimeMs(value: number | string | undefined, fallbackToken: string): number;
 //# sourceMappingURL=resolve-css-time-ms.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "4.2.0",
+  "version": "6.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -70,7 +70,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs && node scripts/build-framework-exports.mjs && node scripts/build-registry.mjs && node scripts/build-agent-manifest.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
-    "test": "node --import tsx/esm --test tests/component-inventory.test.ts tests/agent-contract.test.ts tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/stylelint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
+    "test": "node --import tsx/esm --test tests/component-inventory.test.ts tests/agent-contract.test.ts tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/stylelint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/tooltip-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium firefox webkit",
     "build:docs": "stencil build --docs",
@@ -97,7 +97,7 @@
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
     "@ds-mo/icons": "^6.2.0",
-    "@ds-mo/tokens": "^2.15.0",
+    "@ds-mo/tokens": "^3.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -122,7 +122,7 @@
     "@angular/forms": "^22.0.4",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^6.2.0",
-    "@ds-mo/tokens": "^2.15.0",
+    "@ds-mo/tokens": "^3.0.0",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.9",
     "@modelcontextprotocol/sdk": "^1.29.0",

package/dist/angular/ds-toggle.d.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
-import type { Components } from '@ds-mo/ui/components';
-import type { DsToggleCustomEvent } from '@ds-mo/ui/components';
-import * as i0 from "@angular/core";
-export declare class DsToggle {
-    protected z: NgZone;
-    protected el: HTMLDsToggleElement;
-    dsChange: EventEmitter<DsToggleCustomEvent<boolean>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsToggle, "ds-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
-}
-export declare interface DsToggle extends Components.DsToggle {
-    dsChange: EventEmitter<DsToggleCustomEvent<boolean>>;
-}

package/dist/components/ds-toggle.js

@@ -1,2 +0,0 @@
-import{p as e,H as t,c as s,h as i,a as o,t as n}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.dsChange=s(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleClick=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(this.isInactive||this.disabled||this.formDisabled)return;if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleClick()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const t=this.required&&!e&&!this.checked;this.internals.setValidity(t?{valueMissing:true}:{},t?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;return i(o,{key:"66d2af20beb0fddfb3b01f64dc8e8838893e3bb6",role:"switch","aria-checked":String(this.checked),"aria-disabled":e?"true":undefined,tabIndex:e?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":e},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"209a9f0faf75dd57c74408dc4958d97ad1a7a624",class:"thumb"}))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return r()}},[65,"ds-toggle",{checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-toggle"];e.forEach((e=>{switch(e){case"ds-toggle":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
-//# sourceMappingURL=ds-toggle.js.map