@ds-mo/ui 1.7.3 → 1.8.0

package/src/wc/components.d.ts

@@ -26,6 +26,7 @@ import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+import { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -62,6 +63,7 @@ export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+export { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -680,6 +682,18 @@ export namespace Components {
          */
         "userName": string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool": PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open": boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
@@ -1465,6 +1479,12 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelToolsElement extends Components.DsPanelTools, HTMLStencilElement {
+    }
+    var HTMLDsPanelToolsElement: {
+        prototype: HTMLDsPanelToolsElement;
+        new (): HTMLDsPanelToolsElement;
+    };
     interface HTMLDsRadioGroupElementEventMap {
         "dsChange": string;
     }
@@ -1687,6 +1707,7 @@ declare global {
         "ds-modal": HTMLDsModalElement;
         "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
+        "ds-panel-tools": HTMLDsPanelToolsElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
@@ -2366,6 +2387,18 @@ declare namespace LocalJSX {
          */
         "userName"?: string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool"?: PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open"?: boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
         "ariaLabelledby"?: string | undefined;
@@ -2953,6 +2986,10 @@ declare namespace LocalJSX {
         "userName": string;
         "userInitial": string;
     }
+    interface DsPanelToolsAttributes {
+        "open": boolean;
+        "activeTool": PanelToolsToolId | '';
+    }
     interface DsRadioGroupAttributes {
         "value": string;
         "direction": 'vertical' | 'horizontal';
@@ -3103,6 +3140,7 @@ declare namespace LocalJSX {
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
+        "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
         "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] };
@@ -3149,6 +3187,7 @@ declare module "@stencil/core" {
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
+            "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "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>;

package/src/wc/nav/index.ts

@@ -9,6 +9,8 @@ export {
 } from './nav-chrome';
 export {
   SHELL_BAR_NAV_VT_NAME,
+  SHELL_NAV_REVEAL_DURATION_VAR,
+  SHELL_NAV_REVEAL_EASING_VAR,
   parseCssTimeMs,
   ensureShellNavVtStyle,
   resolveShellNavRevealOrigin,

package/src/wc/nav/shell-gradient.ts

@@ -10,14 +10,14 @@ export const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';
 /** Layer opacity for the nav gradient wash. */
 export const SHELL_GRADIENT_OPACITY = '0.1';
 
-const GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';
+const GRADIENT_GEOMETRY = '100% 100% at 0% 0%';
 
 /**
  * Unified shell radial — same wash for all nav chrome styles.
  * Tokens follow `data-theme` (light/dark blue intent).
  */
 export function buildShellRadialGradient(): string {
-  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;
+  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;
 }
 
 /** Built-in radial image (optional `gradientSrc` on shell overrides). */

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

@@ -7,6 +7,19 @@ export { parseCssTimeMs };
 
 const VT_STYLE_ID = 'ds-shell-nav-vt-style';
 
+/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
+export const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';
+export const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';
+
+const SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;
+const SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';
+
+function readCssCustomProperty(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
 /** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
 export function ensureShellNavVtStyle(): void {
   if (typeof document === 'undefined') return;
@@ -53,10 +66,16 @@ export function animateShellNavRadialReveal(
   origin: ShellNavRevealOrigin,
   durationMs?: number,
 ): void {
-  const durToken = getComputedStyle(document.documentElement)
-    .getPropertyValue('--effect-animation-duration-long-1')
-    .trim();
-  const duration = durationMs ?? parseCssTimeMs(durToken, 750);
+  const duration =
+    durationMs ??
+    parseCssTimeMs(
+      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),
+      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,
+    );
+  const easing = readCssCustomProperty(
+    SHELL_NAV_REVEAL_EASING_VAR,
+    SHELL_NAV_REVEAL_EASING_FALLBACK,
+  );
   const keyframes = {
     clipPath: [
       `circle(0px at ${origin.x}px ${origin.y}px)`,
@@ -65,7 +84,7 @@ export function animateShellNavRadialReveal(
   };
   const options = {
     duration,
-    easing: 'ease-in-out',
+    easing,
     fill: 'forwards' as const,
   };
 

package/src/wc/utils/index.ts

@@ -1,4 +1,11 @@
 export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
 export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export {
+  SCROLL_EDGE_FADE_DEFAULT_SIZE,
+  SCROLL_EDGE_FADE_SIZE_VAR,
+  scrollEdgeFadeMaskImage,
+  scrollEdgeFadeMaskStyle,
+} from './scroll-edge-fade';
+export type { ScrollEdgeFadeEdge } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';

package/src/wc/utils/scroll-edge-fade.css

@@ -0,0 +1,73 @@
+/**
+ * Scroll-edge alpha fade — apply to overflow scroll containers.
+ * Pair with `.scroll-edge-fade--at-end` when the relevant edge is flush (no fade).
+ *
+ * @see scroll-edge-fade.ts for programmatic mask helpers.
+ */
+
+.scroll-edge-fade {
+  --ds-scroll-edge-fade-size: var(--dimension-size-600);
+}
+
+.scroll-edge-fade--top {
+  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.scroll-edge-fade--bottom {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.scroll-edge-fade--left {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.scroll-edge-fade--right {
+  -webkit-mask-image: linear-gradient(
+    to left,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to left,
+    #000 0,
+    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
+    transparent 100%
+  );
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.scroll-edge-fade--at-end {
+  -webkit-mask-image: none;
+  mask-image: none;
+}

package/src/wc/utils/scroll-edge-fade.ts

@@ -0,0 +1,38 @@
+/** CSS custom property for scroll-edge fade depth (dimension token or length). */
+export const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';
+
+export const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';
+
+export type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';
+
+const SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;
+
+/**
+ * Alpha mask for a scroll container edge — content fades to transparent so
+ * textured backgrounds (gradients, images) show through. Prefer over painted
+ * `ds-fade` overlays on non-flat surfaces.
+ */
+export function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {
+  switch (edge) {
+    case 'top':
+      return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;
+    case 'bottom':
+      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
+    case 'left':
+      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
+    case 'right':
+      return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
+  }
+}
+
+/** Inline style map for a masked scroll region. */
+export function scrollEdgeFadeMaskStyle(edge: ScrollEdgeFadeEdge): Record<string, string> {
+  const mask = scrollEdgeFadeMaskImage(edge);
+  return {
+    [SCROLL_EDGE_FADE_SIZE_VAR]: SCROLL_EDGE_FADE_DEFAULT_SIZE,
+    WebkitMaskImage: mask,
+    maskImage: mask,
+    WebkitMaskSize: '100% 100%',
+    maskSize: '100% 100%',
+  };
+}

package/dist/components/p-B6NnMfZA.js

@@ -1,2 +0,0 @@
-import{p as e,H as n,h as a,a as t,t as r}from"./index.js";import{c as i,b as s}from"./p-CXkDP-ct.js";const d="--_badge-gradient-position";function o(e){const n=e.closest("ds-app-shell");return n?.hasAttribute("gradient")===true}function c(e){const n=e.closest("ds-bar-nav");if(n){const e=n.shadowRoot??n;const a=e.querySelector(".bar-nav");if(a){return{element:a,chromeHost:n,positionVar:i}}}const a=e.closest("ds-panel-nav");if(a){const e=a.shadowRoot??a;const n=e.querySelector(".panel-nav");if(n){return{element:n,chromeHost:a,positionVar:s}}}return null}function g(e){const n=e.trim();if(!n)return{x:0,y:0};const a=n.split(/\s+/);const t=b(a[0]??"0");const r=b(a[1]??"0");return{x:t,y:r}}function b(e){const n=e.match(/^(-?[\d.]+)px$/);if(n)return Number(n[1]);return 0}function l(e,n,a){const t=e.getBoundingClientRect();const r=n.element.getBoundingClientRect();const i=t.left+t.width/2-r.left;const s=t.top+t.height/2-r.top;const{x:d,y:o}=g(a);return`${Math.round(d-i)}px ${Math.round(o-s)}px`}function u(e){const n=getComputedStyle(e.chromeHost);return n.getPropertyValue(e.positionVar).trim()||"0 0"}function h(e){const n=c(e);if(!n){e.style.removeProperty(d);return}const a=u(n);e.style.setProperty(d,l(e,n,a))}const f=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--_badge-gradient-position, 0 0);background-repeat:no-repeat;opacity:var(--ds-shell-gradient-opacity, 1)}`;const m={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const k=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&o(this.el)){this.gradientBackground=true;return}this.bindGradientRingSync()}disconnectedCallback(){this.unbindGradientRingSync();this.el.style.removeProperty(d)}gradientBackgroundChanged(){this.bindGradientRingSync()}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>h(this.el);e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const n=this.el.closest("ds-app-shell");if(n)this.gradientObserver.observe(n);const a=this.el.closest("ds-bar-nav");if(a)this.gradientObserver.observe(a);const t=this.el.closest("ds-panel-nav");if(t)this.gradientObserver.observe(t)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}render(){const e=this.variant==="dot";if(!e&&this.count===0)return a(t,{style:{display:"none"}});const n=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const i=this.background??m[this.surface];return a(t,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:{"--_badge-ring":i}},a("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&n))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return f()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"on-gradient-background"],isSelected:[4,"is-selected"],label:[1]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),k)}break}}))}p();export{k as B,p as d};
-//# sourceMappingURL=p-B6NnMfZA.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","findGradientSurface","barHost","root","shadowRoot","element","querySelector","chromeHost","positionVar","SHELL_GRADIENT_POSITION_BAR_VAR","panelHost","SHELL_GRADIENT_POSITION_PANEL_VAR","parseCssBackgroundPosition","value","trimmed","trim","x","y","parts","split","parseLength","token","px","match","Number","badgeGradientPosition","badgeHost","surface","shellPosition","badgeRect","getBoundingClientRect","surfaceRect","anchorX","left","width","anchorY","top","height","Math","round","readShellGradientPosition","styles","getComputedStyle","getPropertyValue","syncBadgeGradientPosition","style","removeProperty","setProperty","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","gradientBackground","isSelected","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","el","bindGradientRingSync","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","render","isDot","h","Host","display","String","ariaLabel","label","ring","background","class","badge","badge__mark"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  const shell = from.closest('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host. */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  const surface = findGradientSurface(badgeHost);\n  if (!surface) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  const shellPosition = readShellGradientPosition(surface);\n  badgeHost.style.setProperty(\n    BADGE_GRADIENT_POSITION_VAR,\n    badgeGradientPosition(badgeHost, surface, shellPosition),\n  );\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--_badge-gradient-position, 0 0);\n  background-repeat: no-repeat;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n  syncBadgeGradientPosition,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `on-gradient-background` to opt in/out explicitly.\n   */\n  @Prop({ attribute: 'on-gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n\n    this.bindGradientRingSync();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n    this.el.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => syncBadgeGradientPosition(this.el);\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={{ '--_badge-ring': ring }}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CXkDP-ct.js

@@ -1,2 +0,0 @@
-const n="--ds-shell-gradient-image";const t="--ds-shell-gradient-size";const a="--ds-shell-gradient-position-panel";const r="--ds-shell-gradient-position-bar";const s="--ds-shell-gradient-opacity";const o="0.1";const e="128.57% 141.42% at 0% 0%";function c(){return`radial-gradient(${e}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`}function i(n){return c()}function l(n){return`${Math.round(n.width)}px ${Math.round(n.height)}px`}function d(){return"0 0"}function u(n){return`${-Math.round(n)}px 0`}export{n as S,t as a,a as b,r as c,s as d,o as e,u as f,d as g,l as h,i as s};
-//# sourceMappingURL=p-CXkDP-ct.js.map

package/dist/components/p-CXkDP-ct.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["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","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientImageForStyle","_style","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth"],"sources":["src/wc/nav/shell-gradient.ts"],"sourcesContent":["import type { NavChromeStyle } from './nav-chrome';\n\n/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\nconst GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';\n\n/**\n * Unified shell radial — same wash for all nav chrome styles.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImageForStyle(_style: NavChromeStyle): string {\n  return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n"],"mappings":"AAGO,MAAMA,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAGnC,MAAMC,EAAyB,MAEtC,MAAMC,EAAoB,2B,SAMVC,IACd,MAAO,mBAAmBD,yJAC5B,CAGM,SAAUE,EAA2BC,GACzC,OAAOF,GACT,CAQM,SAAUG,EAAkBC,GAChC,MAAO,GAAGC,KAAKC,MAAMF,EAAOG,YAAYF,KAAKC,MAAMF,EAAOI,WAC5D,C,SAEgBC,IACd,MAAO,KACT,CAEM,SAAUC,EAAyBC,GACvC,MAAO,IAAIN,KAAKC,MAAMK,QACxB,Q","ignoreList":[]}

package/dist/components/p-DfL2MOso.js

@@ -1,2 +0,0 @@
-import{p as t}from"./p-BvmooLHV.js";const n="ds-shell-bar-nav";const o="ds-shell-nav-vt-style";function e(){if(typeof document==="undefined")return;if(document.getElementById(o))return;const t=document.createElement("style");t.id=o;t.textContent=["::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}",`::view-transition-old(${n}),::view-transition-new(${n}){animation:none;mix-blend-mode:normal}`,"::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}",`::view-transition-new(${n}){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`].join("\n");document.head.appendChild(t)}function i(t){const n=t??document.querySelector(".panel-nav__footer-btn");const o=n?.getBoundingClientRect();const e=o?Math.round(o.left+o.width/2):Math.round(window.innerWidth/2);const i=o?Math.round(o.top+o.height/2):Math.round(window.innerHeight/2);const a=Math.ceil(Math.hypot(Math.max(e,window.innerWidth-e),Math.max(i,window.innerHeight-i)));return{x:e,y:i,maxRadius:a}}function a(t){document.documentElement.style.setProperty("--vt-x",`${t.x}px`);document.documentElement.style.setProperty("--vt-y",`${t.y}px`)}function s(o,e){const i=getComputedStyle(document.documentElement).getPropertyValue("--effect-animation-duration-long-1").trim();const a=t(i,750);const s={clipPath:[`circle(0px at ${o.x}px ${o.y}px)`,`circle(${o.maxRadius}px at ${o.x}px ${o.y}px)`]};const c={duration:a,easing:"ease-in-out",fill:"forwards"};document.documentElement.animate(s,{...c,pseudoElement:"::view-transition-new(root)"});document.documentElement.animate(s,{...c,pseudoElement:`::view-transition-new(${n})`})}export{n as S,s as a,e,i as r,a as s};
-//# sourceMappingURL=p-DfL2MOso.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["SHELL_BAR_NAV_VT_NAME","VT_STYLE_ID","ensureShellNavVtStyle","document","getElementById","style","createElement","id","textContent","join","head","appendChild","resolveShellNavRevealOrigin","originEl","btn","querySelector","rect","getBoundingClientRect","x","Math","round","left","width","window","innerWidth","y","top","height","innerHeight","maxRadius","ceil","hypot","max","setShellNavRevealOriginVars","origin","documentElement","setProperty","animateShellNavRadialReveal","durationMs","durToken","getComputedStyle","getPropertyValue","trim","duration","parseCssTimeMs","keyframes","clipPath","options","easing","fill","animate","pseudoElement"],"sources":["src/wc/nav/shell-view-transition.ts"],"sourcesContent":["import { parseCssTimeMs } from '../utils/resolve-css-time-ms';\n\n/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */\nexport const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';\n\nexport { parseCssTimeMs };\n\nconst VT_STYLE_ID = 'ds-shell-nav-vt-style';\n\n/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */\nexport function ensureShellNavVtStyle(): void {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(VT_STYLE_ID)) return;\n\n  const style = document.createElement('style');\n  style.id = VT_STYLE_ID;\n  style.textContent = [\n    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){animation:none;mix-blend-mode:normal}`,\n    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,\n  ].join('\\n');\n  document.head.appendChild(style);\n}\n\nexport interface ShellNavRevealOrigin {\n  x: number;\n  y: number;\n  maxRadius: number;\n}\n\n/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */\nexport function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {\n  const btn =\n    originEl ??\n    document.querySelector<HTMLElement>('.panel-nav__footer-btn');\n  const rect = btn?.getBoundingClientRect();\n  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n  const maxRadius = Math.ceil(\n    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),\n  );\n  return { x, y, maxRadius };\n}\n\nexport function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {\n  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);\n  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);\n}\n\n/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */\nexport function animateShellNavRadialReveal(\n  origin: ShellNavRevealOrigin,\n  durationMs?: number,\n): void {\n  const durToken = getComputedStyle(document.documentElement)\n    .getPropertyValue('--effect-animation-duration-long-1')\n    .trim();\n  const duration = durationMs ?? parseCssTimeMs(durToken, 750);\n  const keyframes = {\n    clipPath: [\n      `circle(0px at ${origin.x}px ${origin.y}px)`,\n      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,\n    ],\n  };\n  const options = {\n    duration,\n    easing: 'ease-in-out',\n    fill: 'forwards' as const,\n  };\n\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: '::view-transition-new(root)',\n  });\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,\n  });\n}\n\n/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */\nexport function runShellNavStyleRevealOnReady(\n  transition: { ready: Promise<void> },\n  originEl?: HTMLElement | null,\n): void {\n  ensureShellNavVtStyle();\n  const origin = resolveShellNavRevealOrigin(originEl);\n  setShellNavRevealOriginVars(origin);\n\n  transition.ready\n    .then(() => animateShellNavRadialReveal(origin))\n    .catch(() => {\n      /* transition skipped or superseded */\n    });\n}\n"],"mappings":"oCAGO,MAAMA,EAAwB,mBAIrC,MAAMC,EAAc,wB,SAGJC,IACd,UAAWC,WAAa,YAAa,OACrC,GAAIA,SAASC,eAAeH,GAAc,OAE1C,MAAMI,EAAQF,SAASG,cAAc,SACrCD,EAAME,GAAKN,EACXI,EAAMG,YAAc,CAClB,gGACA,yBAAyBR,4BAAgDA,2CACzE,wFACA,yBAAyBA,gEACzBS,KAAK,MACPN,SAASO,KAAKC,YAAYN,EAC5B,CASM,SAAUO,EAA4BC,GAC1C,MAAMC,EACJD,GACAV,SAASY,cAA2B,0BACtC,MAAMC,EAAOF,GAAKG,wBAClB,MAAMC,EAAIF,EAAOG,KAAKC,MAAMJ,EAAKK,KAAOL,EAAKM,MAAQ,GAAKH,KAAKC,MAAMG,OAAOC,WAAa,GACzF,MAAMC,EAAIT,EAAOG,KAAKC,MAAMJ,EAAKU,IAAMV,EAAKW,OAAS,GAAKR,KAAKC,MAAMG,OAAOK,YAAc,GAC1F,MAAMC,EAAYV,KAAKW,KACrBX,KAAKY,MAAMZ,KAAKa,IAAId,EAAGK,OAAOC,WAAaN,GAAIC,KAAKa,IAAIP,EAAGF,OAAOK,YAAcH,KAElF,MAAO,CAAEP,IAAGO,IAAGI,YACjB,CAEM,SAAUI,EAA4BC,GAC1C/B,SAASgC,gBAAgB9B,MAAM+B,YAAY,SAAU,GAAGF,EAAOhB,OAC/Df,SAASgC,gBAAgB9B,MAAM+B,YAAY,SAAU,GAAGF,EAAOT,MACjE,CAGM,SAAUY,EACdH,EACAI,GAEA,MAAMC,EAAWC,iBAAiBrC,SAASgC,iBACxCM,iBAAiB,sCACjBC,OACH,MAAMC,EAAyBC,EAAeL,EAAU,KACxD,MAAMM,EAAY,CAChBC,SAAU,CACR,iBAAiBZ,EAAOhB,OAAOgB,EAAOT,OACtC,UAAUS,EAAOL,kBAAkBK,EAAOhB,OAAOgB,EAAOT,SAG5D,MAAMsB,EAAU,CACdJ,WACAK,OAAQ,cACRC,KAAM,YAGR9C,SAASgC,gBAAgBe,QAAQL,EAAW,IACvCE,EACHI,cAAe,gCAEjBhD,SAASgC,gBAAgBe,QAAQL,EAAW,IACvCE,EACHI,cAAe,yBAAyBnD,MAE5C,Q","ignoreList":[]}

package/dist/components/p-vW9EMP8s.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as a,a as i,t as r}from"./index.js";const d=()=>`.sc-ds-fade-h{--ds-fade-size:var(--dimension-size-600);--ds-fade-bg:var(--color-background-secondary);--ds-fade-offset:0;position:absolute;pointer-events:none;z-index:10;opacity:1;transform:translateZ(0);backface-visibility:hidden;transition:opacity var(--effect-motion-short-3)}.fade--hidden.sc-ds-fade-h{opacity:0}.fade--vertical-edge.sc-ds-fade-h{height:var(--ds-fade-size)}.fade--horizontal-edge.sc-ds-fade-h{width:var(--ds-fade-size)}@media (prefers-reduced-motion: reduce){.sc-ds-fade-h{transition:none}}.fade--top.sc-ds-fade-h{top:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--bottom.sc-ds-fade-h{bottom:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--left.sc-ds-fade-h{top:0;bottom:0;left:var(--ds-fade-offset);background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--right.sc-ds-fade-h{top:0;bottom:0;right:var(--ds-fade-offset);background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const t={"size-000":"var(--dimension-size-000)","size-050":"var(--dimension-size-050)","size-075":"var(--dimension-size-075)","size-100":"var(--dimension-size-100)","size-150":"var(--dimension-size-150)","size-200":"var(--dimension-size-200)","size-250":"var(--dimension-size-250)","size-300":"var(--dimension-size-300)","size-400":"var(--dimension-size-400)","size-500":"var(--dimension-size-500)","size-600":"var(--dimension-size-600)","size-800":"var(--dimension-size-800)"};const o={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",navigation:"var(--color-navigation-background)",media:"var(--color-media-background)","always-dark":"var(--color-always-dark-background)",inverted:"var(--color-inverted-background)"};const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.side="bottom";this.size="size-600";this.surface="default";this.background="var(--color-background-secondary)";this.visible=true}resolveSize(){if(this.height)return this.height;return Object.prototype.hasOwnProperty.call(t,this.size)?t[this.size]:this.size}resolveBackground(){if(this.background!=="var(--color-background-secondary)")return this.background;return o[this.surface]}render(){const e=this.side==="top"||this.side==="bottom";return a(i,{key:"c529a9d0666b50ac14ab2091b50e296164e93202","aria-hidden":"true",class:{fade:true,"fade--hidden":!this.visible,"fade--vertical-edge":e,"fade--horizontal-edge":!e,[`fade--${this.side}`]:true},style:{"--ds-fade-size":this.resolveSize(),"--ds-fade-bg":this.resolveBackground()}})}static get style(){return d()}},[2,"ds-fade",{side:[1],size:[1],height:[1],surface:[1],background:[1],visible:[4]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-fade"];e.forEach((e=>{switch(e){case"ds-fade":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}f();export{n as F,f as d};
-//# sourceMappingURL=p-vW9EMP8s.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["fadeCss","SIZE_VALUE","SURFACE_BACKGROUND","default","primary","secondary","navigation","media","inverted","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","side","size","surface","background","visible","resolveSize","height","Object","prototype","hasOwnProperty","call","resolveBackground","render","isVerticalEdge","h","Host","key","class","fade","style"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n  --ds-fade-size: var(--dimension-size-600);\n  --ds-fade-bg: var(--color-background-secondary);\n  --ds-fade-offset: 0;\n\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  opacity: 1;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n  transition: opacity var(--effect-motion-short-3);\n}\n\n:host(.fade--hidden) {\n  opacity: 0;\n}\n\n:host(.fade--vertical-edge) {\n  height: var(--ds-fade-size);\n}\n\n:host(.fade--horizontal-edge) {\n  width: var(--ds-fade-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host { transition: none; }\n}\n\n:host(.fade--top) {\n  top: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n  bottom: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n  top: 0; bottom: 0; left: var(--ds-fade-offset);\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n  top: 0; bottom: 0; right: var(--ds-fade-offset);\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\nexport type FadeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'navigation'\n  | 'media'\n  | 'always-dark'\n  | 'inverted';\nexport type FadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\nexport type FadeSize = FadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<FadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SURFACE_BACKGROUND: Record<FadeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  navigation: 'var(--color-navigation-background)',\n  media: 'var(--color-media-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n  inverted: 'var(--color-inverted-background)',\n};\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  scoped: true,\n})\nexport class Fade {\n  /** Edge where the fade is anchored. */\n  @Prop() side: FadeSide = 'bottom';\n\n  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n  @Prop() size: FadeSize = 'size-600';\n\n  /**\n   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n   * Prefer `size`.\n   */\n  @Prop() height: string | undefined;\n\n  /** Surface context used to choose the fade target background token. */\n  @Prop() surface: FadeSurface = 'default';\n\n  /** Direct background override for contexts that already expose a resolved surface var. */\n  @Prop() background: string = 'var(--color-background-secondary)';\n\n  /** Controls visibility without removing the element from layout/positioning. */\n  @Prop() visible: boolean = true;\n\n  private resolveSize(): string {\n    if (this.height) return this.height;\n\n    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)\n      ? SIZE_VALUE[this.size as FadeSizeToken]\n      : this.size;\n  }\n\n  private resolveBackground(): string {\n    if (this.background !== 'var(--color-background-secondary)') return this.background;\n    return SURFACE_BACKGROUND[this.surface];\n  }\n\n  render() {\n    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          fade: true,\n          'fade--hidden': !this.visible,\n          'fade--vertical-edge': isVerticalEdge,\n          'fade--horizontal-edge': !isVerticalEdge,\n          [`fade--${this.side}`]: true,\n        }}\n        style={{\n          '--ds-fade-size': this.resolveSize(),\n          '--ds-fade-bg': this.resolveBackground(),\n        } as Record<string, string>}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,0lCC0BtB,MAAMC,EAA4C,CAChD,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6BAGd,MAAMC,EAAkD,CACtDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,WAAY,qCACZC,MAAO,gCACP,cAAe,sCACfC,SAAU,oC,MAQCC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAiB,SAGjBD,KAAAE,KAAiB,WASjBF,KAAAG,QAAuB,UAGvBH,KAAAI,WAAqB,oCAGrBJ,KAAAK,QAAmB,IAmC5B,CAjCS,WAAAC,GACN,GAAIN,KAAKO,OAAQ,OAAOP,KAAKO,OAE7B,OAAOC,OAAOC,UAAUC,eAAeC,KAAKxB,EAAYa,KAAKE,MACzDf,EAAWa,KAAKE,MAChBF,KAAKE,I,CAGH,iBAAAU,GACN,GAAIZ,KAAKI,aAAe,oCAAqC,OAAOJ,KAAKI,WACzE,OAAOhB,EAAmBY,KAAKG,Q,CAGjC,MAAAU,GACE,MAAMC,EAAiBd,KAAKC,OAAS,OAASD,KAAKC,OAAS,SAE5D,OACEc,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,gBAAiBnB,KAAKK,QACtB,sBAAuBS,EACvB,yBAA0BA,EAC1B,CAAC,SAASd,KAAKC,QAAS,MAE1BmB,MAAO,CACL,iBAAkBpB,KAAKM,cACvB,eAAgBN,KAAKY,sB","ignoreList":[]}