@ds-mo/ui 5.0.0 → 6.0.1

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

@@ -36,6 +36,7 @@ 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";
@@ -73,6 +74,7 @@ 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;
@@ -1154,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
@@ -1321,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`
@@ -1515,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;
@@ -1527,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 {
     }
@@ -1994,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;
     }
@@ -2060,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`
@@ -2141,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;
     }
@@ -2186,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.
          */
@@ -3144,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;
@@ -3313,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
@@ -3486,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`
@@ -3613,7 +3647,6 @@ declare namespace LocalJSX {
         "surface": BadgeSurface;
         "background": string | undefined;
         "gradientBackground": boolean;
-        "isSelected": boolean;
         "label": string | undefined;
     }
     interface DsBannerAttributes {
@@ -3889,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;
@@ -3940,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;
@@ -4001,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] };
     }
@@ -4071,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": "5.0.0",
+  "version": "6.0.1",
   "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",

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

package/dist/components/ds-toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleCss","Toggle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","required","requiredMessage","isInactive","initialChecked","formDisabled","handleClick","dsChange","emit","handleKeyDown","e","key","preventDefault","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","render","h","Host","role","String","undefined","tabIndex","class","toggle","onClick","onKeyDown"],"sources":["src/wc/components/Toggle/Toggle.css?tag=ds-toggle&encapsulation=shadow","src/wc/components/Toggle/Toggle.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-250);\n  padding: 0 var(--dimension-space-025);\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  flex-shrink: 0;\n  background-color: var(--color-background-medium-neutral);\n  box-shadow: var(--effect-highlight-depressed-sm);\n  transition: background-color var(--effect-motion-short-2);\n  box-sizing: border-box;\n}\n\n:host::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: var(--effect-shadow-depressed-sm);\n  pointer-events: none;\n}\n\n:host(:focus-visible) {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-foreground-bold-brand);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  transition: transform var(--effect-motion-short-2);\n  transform: translateX(0);\n  z-index: 1;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: transparent;\n  border-radius: inherit;\n  transition: background-color var(--effect-motion-instant, 100ms);\n  pointer-events: none;\n}\n\n:host(:hover:not(.ds-control-inactive)) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n:host(:active:not(.ds-control-inactive)) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.checked) .thumb {\n  transform: translateX(var(--dimension-offset-150));\n}\n\n:host(:active:not(.ds-control-inactive)) .thumb {\n  transform: translateX(0) scale(var(--dimension-scale-subtle)) !important;\n  transition: transform var(--effect-motion-instant);\n}\n\n:host(.checked:active:not(.ds-control-inactive)) .thumb {\n  transform: translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;\n  transition: transform var(--effect-motion-instant);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-toggle',\n  styleUrl: 'Toggle.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle {\n  @AttachInternals() internals!: ElementInternals;\n  @Prop({ mutable: true }) checked: boolean = false;\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() isInactive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(!inactive && this.checked ? this.value : null);\n    const missing = this.required && !inactive && !this.checked;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private handleClick = () => {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    return (\n      <Host\n        role=\"switch\"\n        aria-checked={String(this.checked)}\n        aria-disabled={inactive ? 'true' : undefined}\n        tabIndex={inactive ? -1 : 0}\n        class={{ toggle: true, checked: this.checked, 'ds-control-inactive': inactive }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,6jE,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,yIAQ2BC,KAAAC,QAAmB,MAEpCD,KAAAE,MAAgB,KACCF,KAAAG,SAAoB,MACpBH,KAAAI,SAAoB,MACrCJ,KAAAK,gBAA0B,0BAC1BL,KAAAM,WAAsB,MAItBN,KAAAO,eAAiB,MACRP,KAAAQ,aAAe,MA4BxBR,KAAAS,YAAc,KACpB,GAAIT,KAAKM,YAAcN,KAAKG,UAAYH,KAAKQ,aAAc,OAC3DR,KAAKC,SAAWD,KAAKC,QACrBD,KAAKU,SAASC,KAAKX,KAAKC,QAAQ,EAG1BD,KAAAY,cAAiBC,IACvB,GAAIb,KAAKM,YAAcN,KAAKG,UAAYH,KAAKQ,aAAc,OAC3D,GAAIK,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFf,KAAKS,a,EAoBV,CAxDC,iBAAAO,GACEhB,KAAKO,eAAiBP,KAAKC,QAC3BD,KAAKiB,e,CAQP,aAAAA,GACE,MAAMC,EAAWlB,KAAKM,YAAcN,KAAKG,UAAYH,KAAKQ,aAC1DR,KAAKmB,UAAUC,cAAcF,GAAYlB,KAAKC,QAAUD,KAAKE,MAAQ,MACrE,MAAMmB,EAAUrB,KAAKI,WAAac,IAAalB,KAAKC,QACpDD,KAAKmB,UAAUG,YAAYD,EAAU,CAAEE,aAAc,MAAS,GAAIF,EAAUrB,KAAKK,gBAAkB,G,CAGrG,oBAAAmB,CAAqBrB,GACnBH,KAAKQ,aAAeL,EACpBH,KAAKiB,e,CAGP,iBAAAQ,GACEzB,KAAKC,QAAUD,KAAKO,c,CAiBtB,MAAAmB,GACE,MAAMR,EAAWlB,KAAKM,YAAcN,KAAKG,UAAYH,KAAKQ,aAC1D,OACEmB,EAACC,EAAI,CAAAd,IAAA,2CACHe,KAAK,SAAQ,eACCC,OAAO9B,KAAKC,SAAQ,gBACnBiB,EAAW,OAASa,UACnCC,SAAUd,GAAW,EAAK,EAC1Be,MAAO,CAAEC,OAAQ,KAAMjC,QAASD,KAAKC,QAAS,sBAAuBiB,GACrEiB,QAASnC,KAAKS,YACd2B,UAAWpC,KAAKY,eAEhBe,EAAA,QAAAb,IAAA,2CAAMmB,MAAM,U","ignoreList":[]}

package/dist/components/p-BCiKXnx7.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-9Qu1ls2y.js";import{d as r}from"./p-CKjNw4Tl.js";import{C as s}from"./p-Cx-ywr1e.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-filled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"618114abfee2b998f3426ab282928a1727ac1a67",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"a67a6a0b907879b53e5c6ba14bee49a5abbba8cc",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"74682d9d33b26c0d2bf8946db979b30e05ce873b",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"633eb6022d1efd850a3ea814c219fcf1cac2d640",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"0d7c6b95a244aec87d5f52da3ee3251aa19242a5",class:"button-filled__label ds-interaction-fill__content",as:"span",variant:t,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
-//# sourceMappingURL=p-BCiKXnx7.js.map