@ds-mo/ui 1.4.0 → 1.6.0

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -1,13 +1,9 @@
 import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';
+import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 
-const HOVER_DELAY_MS = 600;
-const INSTANT_REOPEN_MS = 300;
-const FADE_OUT_MS = 200;
-const VP_PAD = 4;
-
 let lastDismissedAt = 0;
 let tooltipIdCounter = 0;
 
@@ -22,9 +18,12 @@ export class Tooltip {
   @Prop() label!: string;
   @Prop() side: TooltipSide = 'top';
   @Prop() align: TooltipAlign = 'center';
-  @Prop() sideOffset: number = 4;
-  @Prop() alignOffset: number = 0;
-  @Prop() delay: number = HOVER_DELAY_MS;
+  /** Gap between anchor and tooltip — number (px) or TokoMo length. */
+  @Prop() sideOffset: number | string = TOKEN_DEFAULTS.space050;
+  /** Cross-axis offset — number (px) or TokoMo length. */
+  @Prop() alignOffset: number | string = 0;
+  /** Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`. */
+  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium1;
   @Prop() shortcutKey: string | undefined;
   @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';
 
@@ -54,10 +53,47 @@ export class Tooltip {
   @Watch('label')
   @Watch('side')
   @Watch('align')
+  @Watch('sideOffset')
+  @Watch('alignOffset')
   onPositionPropsChange() {
     if (this.visible) this.calculatePosition();
   }
 
+  private get viewportPadPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);
+  }
+
+  private get sideOffsetPx(): number {
+    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);
+  }
+
+  private get alignOffsetPx(): number {
+    return resolveCssLengthPx(this.alignOffset, 0);
+  }
+
+  private get hoverDelayMs(): number {
+    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium1);
+  }
+
+  private get instantReopenMs(): number {
+    return resolveCssTimeMs(
+      TOKEN_DEFAULTS.animationDurationMedium1,
+      TOKEN_DEFAULTS.animationDurationMedium1,
+    );
+  }
+
+  private get fadeOutMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
+  private get tooltipFallbackWidthPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);
+  }
+
+  private get tooltipFallbackHeightPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.size300, TOKEN_DEFAULTS.size300);
+  }
+
   private bindAnchor() {
     const slot = this.el.querySelector('slot') as HTMLSlotElement | null;
     const slotted = slot?.assignedElements?.() ?? [];
@@ -88,7 +124,7 @@ export class Tooltip {
 
   private show() {
     this.clearTimers();
-    const instant = Date.now() - lastDismissedAt < INSTANT_REOPEN_MS;
+    const instant = Date.now() - lastDismissedAt < this.instantReopenMs;
     if (instant) {
       this.closing = false;
       this.visible = true;
@@ -100,7 +136,7 @@ export class Tooltip {
       this.closing = false;
       this.visible = true;
       requestAnimationFrame(() => this.calculatePosition());
-    }, this.delay);
+    }, this.hoverDelayMs);
   }
 
   private hide() {
@@ -112,7 +148,7 @@ export class Tooltip {
       this.closeTimer = null;
       this.visible = false;
       this.closing = false;
-    }, FADE_OUT_MS);
+    }, this.fadeOutMs);
   }
 
   private calculatePosition() {
@@ -120,40 +156,43 @@ export class Tooltip {
     const tip = this.el.querySelector('.tooltip-popup') as HTMLElement | null;
     if (!tip) return;
     const a = this.anchor.getBoundingClientRect();
-    const tw = tip.offsetWidth || 80;
-    const th = tip.offsetHeight || 24;
+    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;
+    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;
+    const sideOffset = this.sideOffsetPx;
+    const alignOffset = this.alignOffsetPx;
+    const vpPad = this.viewportPadPx;
     let x = 0, y = 0;
 
     switch (this.side) {
       case 'top':
-        y = a.top - th - this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - tw + this.alignOffset
-          : a.left + a.width / 2 - tw / 2 + this.alignOffset;
+        y = a.top - th - sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - tw + alignOffset
+          : a.left + a.width / 2 - tw / 2 + alignOffset;
         break;
       case 'bottom':
-        y = a.bottom + this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - tw + this.alignOffset
-          : a.left + a.width / 2 - tw / 2 + this.alignOffset;
+        y = a.bottom + sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - tw + alignOffset
+          : a.left + a.width / 2 - tw / 2 + alignOffset;
         break;
       case 'left':
-        x = a.left - tw - this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - th + this.alignOffset
-          : a.top + a.height / 2 - th / 2 + this.alignOffset;
+        x = a.left - tw - sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - th + alignOffset
+          : a.top + a.height / 2 - th / 2 + alignOffset;
         break;
       case 'right':
-        x = a.right + this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - th + this.alignOffset
-          : a.top + a.height / 2 - th / 2 + this.alignOffset;
+        x = a.right + sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - th + alignOffset
+          : a.top + a.height / 2 - th / 2 + alignOffset;
         break;
     }
 
     this.pos = {
-      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - tw - VP_PAD),
-      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - th - VP_PAD),
+      x: Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad),
+      y: Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad),
     };
   }
 

package/src/wc/components.d.ts

@@ -6,10 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AccordionItemData } from "./components/Accordion/Accordion";
+import { NavChromeStyle } from "./nav/nav-chrome";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-import { NavChromeStyle } from "./nav/nav-chrome";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -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";
@@ -42,10 +41,10 @@ import { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from
 import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
+export { NavChromeStyle } from "./nav/nav-chrome";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-export { NavChromeStyle } from "./nav/nav-chrome";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -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";
@@ -93,6 +91,23 @@ export namespace Components {
          */
         "multiple": boolean;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient": boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc": string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle": NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -524,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 {
         /**
@@ -535,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
          */
@@ -565,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;
@@ -611,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;
@@ -641,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;
@@ -711,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).
@@ -1032,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;
         /**
@@ -1050,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> {
@@ -1119,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;
@@ -1169,6 +1167,12 @@ declare global {
         prototype: HTMLDsAccordionElement;
         new (): HTMLDsAccordionElement;
     };
+    interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
+    }
+    var HTMLDsAppShellElement: {
+        prototype: HTMLDsAppShellElement;
+        new (): HTMLDsAppShellElement;
+    };
     interface HTMLDsBadgeElement extends Components.DsBadge, HTMLStencilElement {
     }
     var HTMLDsBadgeElement: {
@@ -1494,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: {
@@ -1671,6 +1657,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-app-shell": HTMLDsAppShellElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
@@ -1696,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;
@@ -1731,6 +1717,23 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "onDsExpandedChange"?: (event: DsAccordionCustomEvent<string[]>) => void;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient"?: boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc"?: string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle"?: NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -2197,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 {
         /**
@@ -2208,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
          */
@@ -2240,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;
@@ -2288,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;
@@ -2334,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;
@@ -2409,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).
@@ -2747,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;
         /**
@@ -2765,15 +2752,21 @@ 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 {
         "multiple": boolean;
         "expandedIds": string;
     }
+    interface DsAppShellAttributes {
+        "navStyle": NavChromeStyle;
+        "gradient": boolean;
+        "gradientSrc": string;
+    }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
         "count": number;
@@ -2909,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;
@@ -2965,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;
@@ -3071,15 +3058,16 @@ 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';
     }
 
     interface IntrinsicElements {
         "ds-accordion": Omit<DsAccordion, keyof DsAccordionAttributes> & { [K in keyof DsAccordion & keyof DsAccordionAttributes]?: DsAccordion[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `attr:${K}`]?: DsAccordionAttributes[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `prop:${K}`]?: DsAccordion[K] };
+        "ds-app-shell": Omit<DsAppShell, keyof DsAppShellAttributes> & { [K in keyof DsAppShell & keyof DsAppShellAttributes]?: DsAppShell[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `attr:${K}`]?: DsAppShellAttributes[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `prop:${K}`]?: DsAppShell[K] };
         "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
         "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] };
         "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
@@ -3105,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] };
@@ -3126,6 +3113,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.IntrinsicElements["ds-accordion"] & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-app-shell": LocalJSX.IntrinsicElements["ds-app-shell"] & JSXBase.HTMLAttributes<HTMLDsAppShellElement>;
             "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
             "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
             "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
@@ -3151,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/index.ts

@@ -17,3 +17,17 @@ export {
   runShellNavStyleRevealOnReady,
 } from './shell-view-transition';
 export type { ShellNavRevealOrigin } from './shell-view-transition';
+export {
+  SHELL_GRADIENT_IMAGE_VAR,
+  SHELL_GRADIENT_SIZE_VAR,
+  SHELL_GRADIENT_POSITION_PANEL_VAR,
+  SHELL_GRADIENT_POSITION_BAR_VAR,
+  SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_GRADIENT_OPACITY,
+  buildShellRadialGradient,
+  shellGradientImageForStyle,
+  shellGradientSize,
+  shellGradientPositionPanel,
+  shellGradientPositionBar,
+} from './shell-gradient';
+export type { ShellGradientLayout } from './shell-gradient';