@ds-mo/ui 1.5.0 → 1.6.1

package/src/wc/components.d.ts

@@ -28,7 +28,6 @@ import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-n
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
-import { SidebarWidth } from "./components/Sidebar/Sidebar";
 import { SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -64,7 +63,6 @@ export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-n
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
-export { SidebarWidth } from "./components/Sidebar/Sidebar";
 export { SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -541,10 +539,10 @@ export namespace Components {
          */
         "label": string | undefined;
         /**
-          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
-          * @default 20
+          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
+          * @default TOKEN_DEFAULTS.iconographyMd
          */
-        "size": number;
+        "size": number | string;
     }
     interface DsMenu {
         /**
@@ -552,9 +550,10 @@ export namespace Components {
          */
         "align": MenuAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset": number;
+        "alignOffset": number | string;
         /**
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
@@ -582,9 +581,10 @@ export namespace Components {
          */
         "side": MenuSide;
         /**
-          * @default 4
+          * Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.).
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset": number;
+        "sideOffset": number | string;
     }
     interface DsModal {
         "heading": string;
@@ -628,7 +628,7 @@ export namespace Components {
          */
         "breakpoint": number;
         /**
-          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * Whether the nav is in collapsed (icon-only) state. Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change.
           * @default false
          */
         "collapsed": boolean;
@@ -658,7 +658,7 @@ export namespace Components {
          */
         "routerMode": PanelNavRouterMode;
         /**
-          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * `localStorage` key used to persist the collapsed state across page loads. When set, collapsed state is restored on mount and written on each toggle.
           * @default ''
          */
         "storageKey": string;
@@ -728,24 +728,6 @@ export namespace Components {
          */
         "value": string;
     }
-    interface DsSidebar {
-        /**
-          * @default false
-         */
-        "collapsed": boolean;
-        /**
-          * @default false
-         */
-        "mobile": boolean;
-        /**
-          * @default true
-         */
-        "resizable": boolean;
-        /**
-          * @default 'default'
-         */
-        "width": SidebarWidth;
-    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -1049,13 +1031,15 @@ export namespace Components {
          */
         "align": TooltipAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset": number;
+        "alignOffset": number | string;
         /**
-          * @default HOVER_DELAY_MS
+          * Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`.
+          * @default TOKEN_DEFAULTS.animationDelayMedium1
          */
-        "delay": number;
+        "delay": number | string;
         "label": string;
         "shortcutKey": string | undefined;
         /**
@@ -1067,9 +1051,10 @@ export namespace Components {
          */
         "side": TooltipSide;
         /**
-          * @default 4
+          * Gap between anchor and tooltip — number (px) or TokoMo length.
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset": number;
+        "sideOffset": number | string;
     }
 }
 export interface DsAccordionCustomEvent<T> extends CustomEvent<T> {
@@ -1136,10 +1121,6 @@ export interface DsSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSelectElement;
 }
-export interface DsSidebarCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsSidebarElement;
-}
 export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSliderElement;
@@ -1517,24 +1498,6 @@ declare global {
         prototype: HTMLDsSelectElement;
         new (): HTMLDsSelectElement;
     };
-    interface HTMLDsSidebarElementEventMap {
-        "dsToggle": void;
-        "dsWidthChange": SidebarWidth;
-    }
-    interface HTMLDsSidebarElement extends Components.DsSidebar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElement: {
-        prototype: HTMLDsSidebarElement;
-        new (): HTMLDsSidebarElement;
-    };
     interface HTMLDsSkeletonElement extends Components.DsSkeleton, HTMLStencilElement {
     }
     var HTMLDsSkeletonElement: {
@@ -1720,7 +1683,6 @@ declare global {
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
-        "ds-sidebar": HTMLDsSidebarElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
         "ds-surface": HTMLDsSurfaceElement;
@@ -2238,10 +2200,10 @@ declare namespace LocalJSX {
          */
         "label"?: string | undefined;
         /**
-          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
-          * @default 20
+          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
+          * @default TOKEN_DEFAULTS.iconographyMd
          */
-        "size"?: number;
+        "size"?: number | string;
     }
     interface DsMenu {
         /**
@@ -2249,9 +2211,10 @@ declare namespace LocalJSX {
          */
         "align"?: MenuAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset"?: number;
+        "alignOffset"?: number | string;
         /**
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
@@ -2281,9 +2244,10 @@ declare namespace LocalJSX {
          */
         "side"?: MenuSide;
         /**
-          * @default 4
+          * Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.).
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset"?: number;
+        "sideOffset"?: number | string;
     }
     interface DsModal {
         "heading": string;
@@ -2329,7 +2293,7 @@ declare namespace LocalJSX {
          */
         "breakpoint"?: number;
         /**
-          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * Whether the nav is in collapsed (icon-only) state. Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change.
           * @default false
          */
         "collapsed"?: boolean;
@@ -2375,7 +2339,7 @@ declare namespace LocalJSX {
          */
         "routerMode"?: PanelNavRouterMode;
         /**
-          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * `localStorage` key used to persist the collapsed state across page loads. When set, collapsed state is restored on mount and written on each toggle.
           * @default ''
          */
         "storageKey"?: string;
@@ -2450,26 +2414,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface DsSidebar {
-        /**
-          * @default false
-         */
-        "collapsed"?: boolean;
-        /**
-          * @default false
-         */
-        "mobile"?: boolean;
-        "onDsToggle"?: (event: DsSidebarCustomEvent<void>) => void;
-        "onDsWidthChange"?: (event: DsSidebarCustomEvent<SidebarWidth>) => void;
-        /**
-          * @default true
-         */
-        "resizable"?: boolean;
-        /**
-          * @default 'default'
-         */
-        "width"?: SidebarWidth;
-    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -2788,13 +2732,15 @@ declare namespace LocalJSX {
          */
         "align"?: TooltipAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset"?: number;
+        "alignOffset"?: number | string;
         /**
-          * @default HOVER_DELAY_MS
+          * Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`.
+          * @default TOKEN_DEFAULTS.animationDelayMedium1
          */
-        "delay"?: number;
+        "delay"?: number | string;
         "label": string;
         "shortcutKey"?: string | undefined;
         /**
@@ -2806,9 +2752,10 @@ declare namespace LocalJSX {
          */
         "side"?: TooltipSide;
         /**
-          * @default 4
+          * Gap between anchor and tooltip — number (px) or TokoMo length.
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset"?: number;
+        "sideOffset"?: number | string;
     }
 
     interface DsAccordionAttributes {
@@ -2955,15 +2902,15 @@ declare namespace LocalJSX {
         "ariaDescribedby": string | undefined;
     }
     interface DsLoaderAttributes {
-        "size": number;
+        "size": string;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
         "open": boolean;
         "side": MenuSide;
         "align": MenuAlign;
-        "sideOffset": number;
-        "alignOffset": number;
+        "sideOffset": string;
+        "alignOffset": string;
         "menuWidth": string | undefined;
         "minWidth": string | undefined;
         "anchorId": string | undefined;
@@ -3011,12 +2958,6 @@ declare namespace LocalJSX {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
     }
-    interface DsSidebarAttributes {
-        "collapsed": boolean;
-        "width": string;
-        "resizable": boolean;
-        "mobile": boolean;
-    }
     interface DsSkeletonAttributes {
         "variant": SkeletonVariant;
         "width": string;
@@ -3117,9 +3058,9 @@ declare namespace LocalJSX {
         "label": string;
         "side": TooltipSide;
         "align": TooltipAlign;
-        "sideOffset": number;
-        "alignOffset": number;
-        "delay": number;
+        "sideOffset": string;
+        "alignOffset": string;
+        "delay": string;
         "shortcutKey": string | undefined;
         "shortcutKeyPosition": 'start' | 'end';
     }
@@ -3152,7 +3093,6 @@ declare namespace LocalJSX {
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
-        "ds-sidebar": Omit<DsSidebar, keyof DsSidebarAttributes> & { [K in keyof DsSidebar & keyof DsSidebarAttributes]?: DsSidebar[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `attr:${K}`]?: DsSidebarAttributes[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `prop:${K}`]?: DsSidebar[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-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
@@ -3199,7 +3139,6 @@ declare module "@stencil/core" {
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
-            "ds-sidebar": LocalJSX.IntrinsicElements["ds-sidebar"] & JSXBase.HTMLAttributes<HTMLDsSidebarElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;

package/src/wc/nav/shell-view-transition.ts

@@ -1,17 +1,11 @@
+import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
+
 /** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
 export const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';
 
-const VT_STYLE_ID = 'ds-shell-nav-vt-style';
+export { parseCssTimeMs };
 
-/** Parse a CSS <time> value to milliseconds. */
-export function parseCssTimeMs(value: string, fallback: number): number {
-  const v = value.trim();
-  const num = parseFloat(v);
-  if (Number.isNaN(num)) return fallback;
-  if (/ms\s*$/.test(v)) return num;
-  if (/s\s*$/.test(v)) return num * 1000;
-  return num;
-}
+const VT_STYLE_ID = 'ds-shell-nav-vt-style';
 
 /** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
 export function ensureShellNavVtStyle(): void {

package/src/wc/utils/index.ts

@@ -0,0 +1,4 @@
+export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
+export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export { TOKEN_DEFAULTS } from './token-defaults';
+export type { TokenDefaultKey } from './token-defaults';

package/src/wc/utils/resolve-css-length-px.ts

@@ -0,0 +1,64 @@
+const lengthPxCache = new Map<string, number>();
+
+let probeEl: HTMLElement | null = null;
+
+function getProbeElement(): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+
+  if (!probeEl) {
+    probeEl = document.createElement('div');
+    probeEl.setAttribute('aria-hidden', 'true');
+    probeEl.style.cssText =
+      'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';
+    document.documentElement.appendChild(probeEl);
+  }
+
+  return probeEl;
+}
+
+/** Clear session cache (tests only). */
+export function clearCssLengthPxCache(): void {
+  lengthPxCache.clear();
+}
+
+/**
+ * Resolve a CSS length to pixels for layout math.
+ * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.
+ */
+export function resolveCssLengthPx(
+  value: number | string | undefined,
+  fallback: number | string,
+): number {
+  const resolved = value === undefined || value === null || value === '' ? fallback : value;
+  if (typeof resolved === 'number') return resolved;
+
+  const trimmed = resolved.trim();
+  if (!trimmed) return resolveCssLengthPx(fallback, 0);
+
+  const cached = lengthPxCache.get(trimmed);
+  if (cached !== undefined) return cached;
+
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    const n = Number(trimmed);
+    lengthPxCache.set(trimmed, n);
+    return n;
+  }
+
+  const pxMatch = trimmed.match(/^(-?\d+(\.\d+)?)px$/);
+  if (pxMatch) {
+    const px = parseFloat(pxMatch[1]);
+    lengthPxCache.set(trimmed, px);
+    return px;
+  }
+
+  const probe = getProbeElement();
+  if (!probe) {
+    return typeof fallback === 'number' ? fallback : 0;
+  }
+
+  probe.style.width = trimmed;
+  const px = probe.getBoundingClientRect().width;
+  probe.style.width = '';
+  lengthPxCache.set(trimmed, px);
+  return px;
+}

package/src/wc/utils/resolve-css-time-ms.ts

@@ -0,0 +1,46 @@
+/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */
+export function parseCssTimeMs(value: string, fallback: number): number {
+  const firstToken = value.trim().split(/\s+/)[0] ?? '';
+  const num = parseFloat(firstToken);
+  if (Number.isNaN(num)) return fallback;
+  if (/ms\s*$/.test(firstToken)) return num;
+  if (/s\s*$/.test(firstToken)) return num * 1000;
+  return num;
+}
+
+function extractCssCustomProp(ref: string): string | null {
+  const varMatch = ref.match(/^var\(\s*(--[^),]+)/);
+  if (varMatch) return varMatch[1].trim();
+  if (ref.startsWith('--')) return ref.trim();
+  return null;
+}
+
+function readTokenTimeMs(token: string, fallback: number): number {
+  if (typeof document === 'undefined') return fallback;
+
+  const prop = extractCssCustomProp(token);
+  if (!prop) return parseCssTimeMs(token, fallback);
+
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+  return parseCssTimeMs(raw, fallback);
+}
+
+/**
+ * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.
+ * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.
+ */
+export function resolveCssTimeMs(
+  value: number | string | undefined,
+  fallbackToken: string,
+): number {
+  if (typeof value === 'number') return value;
+
+  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;
+  const prop = extractCssCustomProp(token);
+
+  if (prop) {
+    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));
+  }
+
+  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));
+}

package/src/wc/utils/token-defaults.ts

@@ -0,0 +1,48 @@
+import {
+  dimensionIconographyMd,
+  dimensionIconographySm,
+  dimensionIconographyXs,
+  dimensionMenuWidthXs,
+  dimensionPanelWidth2xs,
+  dimensionPanelWidthLg,
+  dimensionPanelWidthMd,
+  dimensionSize300,
+  dimensionSize600,
+  dimensionSize800,
+  dimensionSpace050,
+  dimensionSpace200,
+  effectAnimationDelayLong2,
+  effectAnimationDelayMedium1,
+  effectAnimationDelayShort2,
+  effectAnimationDurationMedium1,
+  effectAnimationDurationShort3,
+  effectMotionShort3,
+} from '@ds-mo/tokens/ts';
+
+/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */
+export const TOKEN_DEFAULTS = {
+  space050: dimensionSpace050,
+  space200: dimensionSpace200,
+  size300: dimensionSize300,
+  size600: dimensionSize600,
+  size800: dimensionSize800,
+  iconographyMd: dimensionIconographyMd,
+  iconographySm: dimensionIconographySm,
+  iconographyXs: dimensionIconographyXs,
+  panelWidth2xs: dimensionPanelWidth2xs,
+  panelWidthMd: dimensionPanelWidthMd,
+  panelWidthLg: dimensionPanelWidthLg,
+  menuWidthXs: dimensionMenuWidthXs,
+  motionShort3: effectMotionShort3,
+  animationDurationShort3: effectAnimationDurationShort3,
+  animationDurationMedium1: effectAnimationDurationMedium1,
+  animationDelayMedium1: effectAnimationDelayMedium1,
+  animationDelayShort2: effectAnimationDelayShort2,
+  animationDelayLong2: effectAnimationDelayLong2,
+  /** Unmeasured menu height fallback: 20× base (160px at default scale). */
+  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',
+  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
+  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',
+} as const;
+
+export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;

package/dist/components/ds-sidebar.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsSidebar extends Components.DsSidebar, HTMLElement {}
-export const DsSidebar: {
-    prototype: DsSidebar;
-    new (): DsSidebar;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-sidebar.js

@@ -1,2 +0,0 @@
-import{p as s,H as i,c as e,h as t,a as o,t as r}from"./index.js";const a=()=>`.sc-ds-sidebar-h{display:contents}.backdrop.sc-ds-sidebar{position:fixed;inset:0;background-color:var(--color-background-shade);z-index:9996}.sidebar.sc-ds-sidebar{display:flex;flex-direction:column;height:100%;background-color:var(--color-background-secondary);border-right:var(--dimension-stroke-width-015) solid var(--color-border-primary);position:relative;flex-shrink:0;overflow:hidden;transition:width var(--effect-motion-short-2);box-sizing:border-box}.sidebar--resizing.sc-ds-sidebar{transition:none}.sidebar--collapsed.sc-ds-sidebar{width:0 !important;border-right:none}.sidebar--mobile.sc-ds-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:9997}.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-label],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-label],.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-badge],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-badge],.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-section-header],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-section-header]{display:none}.sidebar__content.sc-ds-sidebar{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--dimension-space-050);scrollbar-width:none}.sidebar__content.sc-ds-sidebar::-webkit-scrollbar{display:none}.sidebar__footer.sc-ds-sidebar{flex-shrink:0;padding:var(--dimension-space-050);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.sidebar__footer.sc-ds-sidebar:empty{display:none}.sidebar__resize-handle.sc-ds-sidebar{position:absolute;top:0;right:-3px;bottom:0;width:6px;cursor:col-resize;z-index:10}.sidebar__resize-handle.sc-ds-sidebar:hover{background-color:var(--color-border-bold-brand);opacity:0.5}.sidebar__resize-handle.sc-ds-sidebar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:var(--dimension-stroke-width-015);background-color:var(--color-border-bold-brand);opacity:0.5}`;const d=56;const n=240;const l=480;const c=180;const h=140;const b=16;const u=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");const m=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToggle=e(this,"dsToggle");this.dsWidthChange=e(this,"dsWidthChange");this.collapsed=false;this.width="default";this.resizable=true;this.mobile=false;this.isResizing=false;this.triggerEl=null;this.escapeHandler=null;this.tabHandler=null;this.mouseMoveHandler=null;this.mouseUpHandler=null}get resolvedWidth(){if(this.width==="mini")return d;if(this.width==="default")return n;return this.width}get isMobileOpen(){return this.mobile&&!this.collapsed}onCollapsedChange(){if(this.isMobileOpen){this.setupMobileFocusTrap()}else{this.teardownMobileFocusTrap()}}componentDidLoad(){if(this.isMobileOpen){this.setupMobileFocusTrap()}if(this.mobile){this.escapeHandler=s=>{if(s.key==="Escape"&&!this.collapsed){this.dsToggle.emit()}};document.addEventListener("keydown",this.escapeHandler)}}disconnectedCallback(){this.teardownMobileFocusTrap();if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}this.cleanupMouseHandlers()}setupMobileFocusTrap(){this.triggerEl=document.activeElement;const s=()=>Array.from(this.el.querySelectorAll(u)).filter((s=>!s.hasAttribute("aria-hidden")&&s.offsetParent!==null));const i=s();(i[0]??this.el).focus();this.tabHandler=i=>{if(i.key!=="Tab")return;const e=s();if(!e.length){i.preventDefault();this.el.focus();return}const t=e[0];const o=e[e.length-1];const r=document.activeElement;if(i.shiftKey&&(r===t||!this.el.contains(r))){i.preventDefault();o.focus()}else if(!i.shiftKey&&(r===o||!this.el.contains(r))){i.preventDefault();t.focus()}};document.addEventListener("keydown",this.tabHandler)}teardownMobileFocusTrap(){if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}this.triggerEl?.focus?.();this.triggerEl=null}cleanupMouseHandlers(){if(this.mouseMoveHandler)document.removeEventListener("mousemove",this.mouseMoveHandler);if(this.mouseUpHandler)document.removeEventListener("mouseup",this.mouseUpHandler);this.mouseMoveHandler=null;this.mouseUpHandler=null;document.body.style.cursor="";document.body.style.userSelect=""}handleResizeMouseDown(s){if(!this.resizable)return;s.preventDefault();this.isResizing=true;this.mouseMoveHandler=s=>{const i=s.clientX;if(i<h){this.dsWidthChange.emit("mini")}else if(i<c){this.dsWidthChange.emit("default")}else{this.dsWidthChange.emit(i)}};this.mouseUpHandler=()=>{this.isResizing=false;this.cleanupMouseHandlers()};document.body.style.cursor="col-resize";document.body.style.userSelect="none";document.addEventListener("mousemove",this.mouseMoveHandler);document.addEventListener("mouseup",this.mouseUpHandler)}handleResizeKeyDown(s){if(!this.resizable)return;const i=this.width;const e=this.resolvedWidth;switch(s.key){case"ArrowLeft":{s.preventDefault();if(i==="mini")return;const t=e-b;this.dsWidthChange.emit(t<c?"mini":t);break}case"ArrowRight":{s.preventDefault();if(i==="mini"){this.dsWidthChange.emit("default");return}this.dsWidthChange.emit(Math.min(e+b,l));break}case"Home":s.preventDefault();this.dsWidthChange.emit("mini");break;case"End":s.preventDefault();this.dsWidthChange.emit(l);break}}render(){if(this.collapsed&&!this.mobile)return null;const s=this.width==="mini";const i=this.isMobileOpen;const e=this.collapsed?0:this.resolvedWidth;const r=i?{role:"dialog","aria-modal":"true",tabIndex:-1}:{role:"navigation"};return t(o,null,this.mobile&&!this.collapsed&&t("div",{class:"backdrop",onClick:()=>this.dsToggle.emit(),"aria-hidden":"true"}),t("aside",{class:{sidebar:true,"sidebar--mini":s,"sidebar--mobile":this.mobile,"sidebar--collapsed":this.collapsed,"sidebar--resizing":this.isResizing},style:{width:`${e}px`},"aria-label":"Sidebar",...r},t("div",{class:"sidebar__content"},t("slot",null)),t("div",{class:"sidebar__footer"},t("slot",{name:"footer"})),this.resizable&&!this.mobile&&t("div",{class:"sidebar__resize-handle",onMouseDown:s=>this.handleResizeMouseDown(s),onKeyDown:s=>this.handleResizeKeyDown(s),role:"separator","aria-orientation":"vertical","aria-label":"Resize sidebar","aria-valuenow":this.resolvedWidth,"aria-valuemin":d,"aria-valuemax":l,tabIndex:0})))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}]}}static get style(){return a()}},[262,"ds-sidebar",{collapsed:[1028],width:[8],resizable:[4],mobile:[4],isResizing:[32]},undefined,{collapsed:[{onCollapsedChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-sidebar"];s.forEach((s=>{switch(s){case"ds-sidebar":if(!customElements.get(r(s))){customElements.define(r(s),m)}break}}))}f();const p=m;const g=f;export{p as DsSidebar,g as defineCustomElement};
-//# sourceMappingURL=ds-sidebar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarCss","MINI_WIDTH","DEFAULT_WIDTH","MAX_WIDTH","MIN_DRAG_WIDTH","SNAP_THRESHOLD","KEYBOARD_STEP","FOCUSABLE_SEL","join","Sidebar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","collapsed","width","resizable","mobile","isResizing","triggerEl","escapeHandler","tabHandler","mouseMoveHandler","mouseUpHandler","resolvedWidth","isMobileOpen","onCollapsedChange","setupMobileFocusTrap","teardownMobileFocusTrap","componentDidLoad","e","key","dsToggle","emit","document","addEventListener","disconnectedCallback","removeEventListener","cleanupMouseHandlers","activeElement","focusables","Array","from","el","querySelectorAll","filter","hasAttribute","offsetParent","initial","focus","items","length","preventDefault","first","last","active","shiftKey","contains","body","style","cursor","userSelect","handleResizeMouseDown","ev","newW","clientX","dsWidthChange","handleResizeKeyDown","w","resolved","next","Math","min","render","isMini","sidebarWidth","dialogProps","role","tabIndex","h","Host","class","onClick","sidebar","name","onMouseDown","onKeyDown"],"sources":["src/wc/components/Sidebar/Sidebar.css?tag=ds-sidebar&encapsulation=scoped","src/wc/components/Sidebar/Sidebar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: var(--color-background-shade);\n  z-index: 9996;\n}\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--color-background-secondary);\n  border-right: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  position: relative;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: width var(--effect-motion-short-2);\n  box-sizing: border-box;\n}\n\n.sidebar--resizing { transition: none; }\n\n.sidebar--collapsed {\n  width: 0 !important;\n  border-right: none;\n}\n\n.sidebar--mobile {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 9997;\n}\n\n/* Hide labels/badges/section headers when mini */\n.sidebar--mini ::slotted([data-sidebar-label]),\n.sidebar--mini ::slotted([data-sidebar-badge]),\n.sidebar--mini ::slotted([data-sidebar-section-header]) {\n  display: none;\n}\n\n.sidebar__content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--dimension-space-050);\n  scrollbar-width: none;\n}\n\n.sidebar__content::-webkit-scrollbar { display: none; }\n\n.sidebar__footer {\n  flex-shrink: 0;\n  padding: var(--dimension-space-050);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.sidebar__footer:empty { display: none; }\n\n.sidebar__resize-handle {\n  position: absolute;\n  top: 0;\n  right: -3px;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize;\n  z-index: 10;\n}\n\n.sidebar__resize-handle:hover {\n  background-color: var(--color-border-bold-brand);\n  opacity: 0.5;\n}\n\n.sidebar__resize-handle:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n  outline-offset: var(--dimension-stroke-width-015);\n  background-color: var(--color-border-bold-brand);\n  opacity: 0.5;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport type SidebarWidth = 'mini' | 'default' | number;\n\nconst MINI_WIDTH = 56;\nconst DEFAULT_WIDTH = 240;\nconst MAX_WIDTH = 480;\nconst MIN_DRAG_WIDTH = 180;\nconst SNAP_THRESHOLD = 140;\nconst KEYBOARD_STEP = 16;\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-sidebar',\n  styleUrl: 'Sidebar.css',\n  scoped: true,\n})\nexport class Sidebar {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) collapsed: boolean = false;\n  @Prop() width: SidebarWidth = 'default';\n  @Prop() resizable: boolean = true;\n  @Prop() mobile: boolean = false;\n\n  @State() private isResizing: boolean = false;\n\n  @Event() dsToggle!: EventEmitter<void>;\n  @Event() dsWidthChange!: EventEmitter<SidebarWidth>;\n\n  private triggerEl: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private mouseMoveHandler: ((e: MouseEvent) => void) | null = null;\n  private mouseUpHandler: (() => void) | null = null;\n\n  private get resolvedWidth(): number {\n    if (this.width === 'mini') return MINI_WIDTH;\n    if (this.width === 'default') return DEFAULT_WIDTH;\n    return this.width as number;\n  }\n\n  private get isMobileOpen(): boolean {\n    return this.mobile && !this.collapsed;\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange() {\n    if (this.isMobileOpen) {\n      this.setupMobileFocusTrap();\n    } else {\n      this.teardownMobileFocusTrap();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.isMobileOpen) {\n      this.setupMobileFocusTrap();\n    }\n    if (this.mobile) {\n      this.escapeHandler = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' && !this.collapsed) {\n          this.dsToggle.emit();\n        }\n      };\n      document.addEventListener('keydown', this.escapeHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    this.teardownMobileFocusTrap();\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    this.cleanupMouseHandlers();\n  }\n\n  private setupMobileFocusTrap() {\n    this.triggerEl = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(this.el.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n        el => !el.hasAttribute('aria-hidden') && el.offsetParent !== null,\n      );\n\n    const initial = focusables();\n    (initial[0] ?? this.el).focus();\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const items = focusables();\n      if (!items.length) { e.preventDefault(); this.el.focus(); return; }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n      if (e.shiftKey && (active === first || !this.el.contains(active))) {\n        e.preventDefault(); last.focus();\n      } else if (!e.shiftKey && (active === last || !this.el.contains(active))) {\n        e.preventDefault(); first.focus();\n      }\n    };\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownMobileFocusTrap() {\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    this.triggerEl?.focus?.();\n    this.triggerEl = null;\n  }\n\n  private cleanupMouseHandlers() {\n    if (this.mouseMoveHandler) document.removeEventListener('mousemove', this.mouseMoveHandler);\n    if (this.mouseUpHandler) document.removeEventListener('mouseup', this.mouseUpHandler);\n    this.mouseMoveHandler = null;\n    this.mouseUpHandler = null;\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n  }\n\n  private handleResizeMouseDown(e: MouseEvent) {\n    if (!this.resizable) return;\n    e.preventDefault();\n    this.isResizing = true;\n\n    this.mouseMoveHandler = (ev: MouseEvent) => {\n      const newW = ev.clientX;\n      if (newW < SNAP_THRESHOLD) {\n        this.dsWidthChange.emit('mini');\n      } else if (newW < MIN_DRAG_WIDTH) {\n        this.dsWidthChange.emit('default');\n      } else {\n        this.dsWidthChange.emit(newW);\n      }\n    };\n\n    this.mouseUpHandler = () => {\n      this.isResizing = false;\n      this.cleanupMouseHandlers();\n    };\n\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    document.addEventListener('mousemove', this.mouseMoveHandler);\n    document.addEventListener('mouseup', this.mouseUpHandler);\n  }\n\n  private handleResizeKeyDown(e: KeyboardEvent) {\n    if (!this.resizable) return;\n    const w = this.width;\n    const resolved = this.resolvedWidth;\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        e.preventDefault();\n        if (w === 'mini') return;\n        const next = resolved - KEYBOARD_STEP;\n        this.dsWidthChange.emit(next < MIN_DRAG_WIDTH ? 'mini' : next);\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        if (w === 'mini') { this.dsWidthChange.emit('default'); return; }\n        this.dsWidthChange.emit(Math.min(resolved + KEYBOARD_STEP, MAX_WIDTH));\n        break;\n      }\n      case 'Home':\n        e.preventDefault();\n        this.dsWidthChange.emit('mini');\n        break;\n      case 'End':\n        e.preventDefault();\n        this.dsWidthChange.emit(MAX_WIDTH);\n        break;\n    }\n  }\n\n  render() {\n    if (this.collapsed && !this.mobile) return null;\n\n    const isMini = this.width === 'mini';\n    const isMobileOpen = this.isMobileOpen;\n    const sidebarWidth = this.collapsed ? 0 : this.resolvedWidth;\n\n    const dialogProps = isMobileOpen\n      ? { role: 'dialog', 'aria-modal': 'true', tabIndex: -1 }\n      : { role: 'navigation' };\n\n    return (\n      <Host>\n        {this.mobile && !this.collapsed && (\n          <div\n            class=\"backdrop\"\n            onClick={() => this.dsToggle.emit()}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          class={{\n            sidebar: true,\n            'sidebar--mini': isMini,\n            'sidebar--mobile': this.mobile,\n            'sidebar--collapsed': this.collapsed,\n            'sidebar--resizing': this.isResizing,\n          }}\n          style={{ width: `${sidebarWidth}px` }}\n          aria-label=\"Sidebar\"\n          {...dialogProps}\n        >\n          <div class=\"sidebar__content\">\n            <slot />\n          </div>\n          <div class=\"sidebar__footer\">\n            <slot name=\"footer\" />\n          </div>\n          {this.resizable && !this.mobile && (\n            <div\n              class=\"sidebar__resize-handle\"\n              onMouseDown={(e: MouseEvent) => this.handleResizeMouseDown(e)}\n              onKeyDown={(e: KeyboardEvent) => this.handleResizeKeyDown(e)}\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label=\"Resize sidebar\"\n              aria-valuenow={this.resolvedWidth}\n              aria-valuemin={MINI_WIDTH}\n              aria-valuemax={MAX_WIDTH}\n              tabIndex={0}\n            />\n          )}\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BcuUR5Ao.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as t,t as i}from"./index.js";const n=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin 0.75s linear infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=20}render(){const e=`${this.size}px`;const s=t("svg",{style:{width:e,height:e},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return s;return t("span",{role:"status","aria-live":"polite",class:"status"},s,t("span",{class:"visually-hidden"},this.label))}static get style(){return n()}},[1,"ds-loader",{size:[2],label:[1]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-loader"];e.forEach((e=>{switch(e){case"ds-loader":if(!customElements.get(i(e))){customElements.define(i(e),r)}break}}))}a();export{r as L,a as d};
-//# sourceMappingURL=p-BcuUR5Ao.js.map

package/dist/components/p-BcuUR5Ao.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","render","px","svg","h","style","width","height","viewBox","fill","class","cx","cy","r","stroke","label","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.spinner {\n  flex-shrink: 0;\n  animation: spin 0.75s linear infinite;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally. */\n  @Prop() size: number = 20;\n  /**\n   * Accessible label for standalone usage. Wraps the spinner in a live region\n   * and renders the label visually-hidden. Omit when the host element already\n   * conveys busy state via aria-busy.\n   */\n  @Prop() label: string | undefined;\n\n  render() {\n    const px = `${this.size}px`;\n    const svg = (\n      <svg\n        style={{ width: px, height: px }}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"spinner\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\" cy=\"8\" r=\"5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"23.6 7.9\"\n        />\n      </svg>\n    );\n\n    if (!this.label) return svg;\n\n    return (\n      <span role=\"status\" aria-live=\"polite\" class=\"status\">\n        {svg}\n        <span class=\"visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAY,IAAM,kY,MCOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAe,EAqCxB,CA7BC,MAAAC,GACE,MAAMC,EAAK,GAAGH,KAAKC,SACnB,MAAMG,EACJC,EAAA,OACEC,MAAO,CAAEC,MAAOJ,EAAIK,OAAQL,GAC5BM,QAAQ,YACRC,KAAK,OACLC,MAAM,UAAS,cACH,QAEZN,EAAA,UACEO,GAAG,IAAIC,GAAG,IAAIC,EAAE,IAChBC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,cAKvB,IAAKf,KAAKgB,MAAO,OAAOZ,EAExB,OACEC,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASN,MAAM,UAC1CP,EACDC,EAAA,QAAMM,MAAM,mBAAmBX,KAAKgB,O","ignoreList":[]}