@ds-mo/ui 1.3.0 → 1.5.0

package/src/wc/components.d.ts

@@ -6,9 +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, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -23,7 +24,7 @@ import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
 import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 import { ModalWidth } from "./components/Modal/Modal";
-import { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -41,9 +42,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, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -58,7 +60,7 @@ export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
 export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 export { ModalWidth } from "./components/Modal/Modal";
-export { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -91,6 +93,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.
@@ -169,11 +188,6 @@ export namespace Components {
           * @default ''
          */
         "actionsJson": string;
-        /**
-          * Surface background variant.
-          * @default 'secondary'
-         */
-        "background": BarNavBackground;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -188,6 +202,11 @@ export namespace Components {
           * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
          */
         "heading": string | undefined;
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'default'
+         */
+        "navStyle": NavChromeStyle;
         /**
           * Tab items for the left section. Set via JS property: `el.tabs = [...]`. Replace the array reference to update.
           * @default []
@@ -619,7 +638,7 @@ export namespace Components {
          */
         "currentUrl": string;
         /**
-          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
           * @default false
          */
         "disableViewTransition": boolean;
@@ -628,6 +647,11 @@ export namespace Components {
           * @default '[]'
          */
         "groups": string | PanelNavGroup[];
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'navigation'
+         */
+        "navStyle": NavChromeStyle;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'
@@ -648,11 +672,6 @@ export namespace Components {
           * @default ''
          */
         "userName": string;
-        /**
-          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
-          * @default 'dashboard'
-         */
-        "variant": PanelNavVariant;
     }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
@@ -1167,6 +1186,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: {
@@ -1669,6 +1694,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-app-shell": HTMLDsAppShellElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
@@ -1729,6 +1755,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.
@@ -1808,11 +1851,6 @@ declare namespace LocalJSX {
           * @default ''
          */
         "actionsJson"?: string;
-        /**
-          * Surface background variant.
-          * @default 'secondary'
-         */
-        "background"?: BarNavBackground;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -1827,6 +1865,11 @@ declare namespace LocalJSX {
           * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
          */
         "heading"?: string | undefined;
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'default'
+         */
+        "navStyle"?: NavChromeStyle;
         /**
           * Emitted when an action button is toggled. Detail = { id, selected }.
          */
@@ -2296,7 +2339,7 @@ declare namespace LocalJSX {
          */
         "currentUrl"?: string;
         /**
-          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
           * @default false
          */
         "disableViewTransition"?: boolean;
@@ -2305,6 +2348,11 @@ declare namespace LocalJSX {
           * @default '[]'
          */
         "groups"?: string | PanelNavGroup[];
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'navigation'
+         */
+        "navStyle"?: NavChromeStyle;
         /**
           * Emitted when the footer left button (gear / dashboard) is clicked.
          */
@@ -2341,11 +2389,6 @@ declare namespace LocalJSX {
           * @default ''
          */
         "userName"?: string;
-        /**
-          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
-          * @default 'dashboard'
-         */
-        "variant"?: PanelNavVariant;
     }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
@@ -2772,6 +2815,11 @@ declare namespace LocalJSX {
         "multiple": boolean;
         "expandedIds": string;
     }
+    interface DsAppShellAttributes {
+        "navStyle": NavChromeStyle;
+        "gradient": boolean;
+        "gradientSrc": string;
+    }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
         "count": number;
@@ -2795,7 +2843,7 @@ declare namespace LocalJSX {
         "value": string;
         "actionsJson": string;
         "heading": string | undefined;
-        "background": BarNavBackground;
+        "navStyle": NavChromeStyle;
         "basePath": string;
         "currentUrl": string;
     }
@@ -2933,7 +2981,7 @@ declare namespace LocalJSX {
         "inactive": boolean;
     }
     interface DsPanelNavAttributes {
-        "variant": PanelNavVariant;
+        "navStyle": NavChromeStyle;
         "disableViewTransition": boolean;
         "groups": string | PanelNavGroup[];
         "routerMode": PanelNavRouterMode;
@@ -3078,6 +3126,7 @@ declare namespace LocalJSX {
 
     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] };
@@ -3124,6 +3173,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>;

package/src/wc/nav/index.ts

@@ -0,0 +1,33 @@
+export type { NavChromeStyle } from './nav-chrome';
+export {
+  NAV_STYLE_HINT_ATTR,
+  readNavStyleAttr,
+  setNavStyleHint,
+  clearNavStyleHint,
+  resolveNavChromeStyle,
+  shouldResyncNavChromeStyle,
+} from './nav-chrome';
+export {
+  SHELL_BAR_NAV_VT_NAME,
+  parseCssTimeMs,
+  ensureShellNavVtStyle,
+  resolveShellNavRevealOrigin,
+  setShellNavRevealOriginVars,
+  animateShellNavRadialReveal,
+  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';

package/src/wc/nav/nav-chrome.ts

@@ -0,0 +1,45 @@
+/** Visual chrome family for primary/secondary navigation surfaces. */
+export type NavChromeStyle = 'navigation' | 'default';
+
+/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */
+export const NAV_STYLE_HINT_ATTR = 'data-nav-style';
+
+/** Parse `nav-style` from a host or document hint attribute value. */
+export function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {
+  if (attr === 'navigation' || attr === 'default') return attr;
+  return undefined;
+}
+
+/** Set a document-level style hint before nav custom elements upgrade (hard reload). */
+export function setNavStyleHint(style: NavChromeStyle): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);
+}
+
+export function clearNavStyleHint(): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);
+}
+
+/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */
+export function resolveNavChromeStyle(
+  styleProp: NavChromeStyle,
+  styleAttr: string | null,
+  documentStyleAttr: string | null = typeof document !== 'undefined'
+    ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)
+    : null,
+): NavChromeStyle {
+  return (
+    readNavStyleAttr(styleAttr) ??
+    readNavStyleAttr(documentStyleAttr) ??
+    styleProp
+  );
+}
+
+/** True when internal rendered surface lags the host `style` prop. */
+export function shouldResyncNavChromeStyle(
+  renderedStyle: NavChromeStyle,
+  style: NavChromeStyle,
+): boolean {
+  return renderedStyle !== style;
+}

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

@@ -0,0 +1,44 @@
+import type { NavChromeStyle } from './nav-chrome';
+
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+export const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';
+export const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';
+export const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';
+export const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';
+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%';
+
+/**
+ * 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%)`;
+}
+
+/** Built-in radial image (optional `gradientSrc` on shell overrides). */
+export function shellGradientImageForStyle(_style: NavChromeStyle): string {
+  return buildShellRadialGradient();
+}
+
+export interface ShellGradientLayout {
+  width: number;
+  height: number;
+  panelWidth: number;
+}
+
+export function shellGradientSize(layout: ShellGradientLayout): string {
+  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;
+}
+
+export function shellGradientPositionPanel(): string {
+  return '0 0';
+}
+
+export function shellGradientPositionBar(panelWidth: number): string {
+  return `${-Math.round(panelWidth)}px 0`;
+}

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

@@ -0,0 +1,102 @@
+/** `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';
+
+/** 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;
+}
+
+/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
+export function ensureShellNavVtStyle(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(VT_STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = VT_STYLE_ID;
+  style.textContent = [
+    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',
+    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){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(${SHELL_BAR_NAV_VT_NAME}){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,
+  ].join('\n');
+  document.head.appendChild(style);
+}
+
+export interface ShellNavRevealOrigin {
+  x: number;
+  y: number;
+  maxRadius: number;
+}
+
+/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
+export function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {
+  const btn =
+    originEl ??
+    document.querySelector<HTMLElement>('.panel-nav__footer-btn');
+  const rect = btn?.getBoundingClientRect();
+  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);
+  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);
+  const maxRadius = Math.ceil(
+    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),
+  );
+  return { x, y, maxRadius };
+}
+
+export function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {
+  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);
+  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);
+}
+
+/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
+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 keyframes = {
+    clipPath: [
+      `circle(0px at ${origin.x}px ${origin.y}px)`,
+      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,
+    ],
+  };
+  const options = {
+    duration,
+    easing: 'ease-in-out',
+    fill: 'forwards' as const,
+  };
+
+  document.documentElement.animate(keyframes, {
+    ...options,
+    pseudoElement: '::view-transition-new(root)',
+  });
+  document.documentElement.animate(keyframes, {
+    ...options,
+    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,
+  });
+}
+
+/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
+export function runShellNavStyleRevealOnReady(
+  transition: { ready: Promise<void> },
+  originEl?: HTMLElement | null,
+): void {
+  ensureShellNavVtStyle();
+  const origin = resolveShellNavRevealOrigin(originEl);
+  setShellNavRevealOriginVars(origin);
+
+  transition.ready
+    .then(() => animateShellNavRadialReveal(origin))
+    .catch(() => {
+      /* transition skipped or superseded */
+    });
+}

package/dist/components/p-DOtcc9UU.js

@@ -1,2 +0,0 @@
-import{p as a,H as r,c as e,h as t,a as o,t as n}from"./index.js";import{g as s,i}from"./p-BQq26pt9.js";import{d}from"./p-B_enucPQ.js";const c=()=>`.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group-nav:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=a(class a extends r{constructor(a){super();if(a!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return s(this.tabs)}selectTab(a,r){this.value=a;this.dsChange.emit(a);if(r?.focus!==false){this.focusTab(a)}}focusTab(a){const r=this.el.querySelector(`[data-tab-id="${a}"]`);r?.focus({preventScroll:true})}onValueChange(a,r){if(r===undefined||a===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const e=r.getAttribute("data-tab-id");if(e===a)return;const t=this.el.querySelector(`[data-tab-id="${a}"]`);if(t){t.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(a,r){const e=this.selectableTabs;const t=e.length;for(let o=0;o<t;o++){const n=(a+r*(o+1)+t*(o+1))%t;if(!e[n]?.disabled)return n}return a}handleKeyDown(a){const r=this.selectableTabs;if(!r.length)return;const e=r.findIndex((a=>a.id===this.value));const t=this.orientation==="vertical";let o=null;if(!t){if(a.key==="ArrowRight"){o=this.findEnabled(e,1)}else if(a.key==="ArrowLeft"){o=this.findEnabled(e,-1)}}else{if(a.key==="ArrowDown"){o=this.findEnabled(e,1)}else if(a.key==="ArrowUp"){o=this.findEnabled(e,-1)}}if(a.key==="Home"){const a=r.findIndex((a=>!a.disabled));o=a===-1?null:a}else if(a.key==="End"){const a=[...r].reverse().findIndex((a=>!a.disabled));o=a===-1?null:r.length-1-a}if(o!==null){a.preventDefault();const e=r[o];this.selectTab(e.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const a=this.getBgClass();const r=this.orientation==="vertical";return t(o,{key:"1fcf2debcb8cf747cd11f670baf55152dd28c125",class:"tab-group-nav-host"},t("div",{key:"54bdb110f6d0c2584a4184ef7afbfdd2e33b5a78",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((e,o)=>{if(i(e)){return t("div",{key:`divider-${o}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const n=e.id===this.value;return t("button",{key:e.id,type:"button",role:"tab","data-tab-id":e.id,class:{tab:true,"tab--selected":n,[a]:!!a},"aria-selected":n,"aria-disabled":e.disabled||undefined,"aria-controls":e.panelId??undefined,disabled:e.disabled,tabIndex:n?0:-1,onClick:()=>!e.disabled&&this.selectTab(e.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!e.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},e.label,e.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const a=["ds-tab-group-nav","ds-badge"];a.forEach((a=>{switch(a){case"ds-tab-group-nav":if(!customElements.get(n(a))){customElements.define(n(a),l)}break;case"ds-badge":if(!customElements.get(n(a))){d()}break}}))}b();export{l as T,b as d};
-//# sourceMappingURL=p-DOtcc9UU.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n  background: transparent;\n}\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["barNavActionCss","BarNavAction","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","selected","dot","inactive","ariaLabel","handleClick","dsChange","emit","render","bg","background","cls","onMedium","onBold","onStrong","onAlwaysDark","h","Host","key","type","class","disabled","onClick","name","size","color","variant","label"],"sources":["src/wc/components/BarNavAction/BarNavAction.css?tag=ds-bar-nav-action&encapsulation=scoped","src/wc/components/BarNavAction/BarNavAction.tsx"],"sourcesContent":[".action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.action-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.action-btn:hover:not(.inactive)::after  { background: var(--_hover-bg);  transition: none; }\n.action-btn:active:not(.inactive)::after { background: var(--_pressed-bg); transition: none; }\n\n.action-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Selected: icon turns primary — no background change */\n.action-btn.selected { color: var(--color-foreground-primary); }\n\n.action-btn.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Background context\n   ========================================================================== */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.onBold {\n  color: var(--color-foreground-on-bold-background-secondary);\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n}\n\n.onBold.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onStrong {\n  color: var(--color-foreground-on-bold-background-secondary);\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n}\n\n.onStrong.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onAlwaysDark {\n  color: var(--color-always-dark-foreground-secondary);\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n}\n\n.onAlwaysDark.selected { color: var(--color-always-dark-foreground-primary); }\n\n/* ==========================================================================\n   Inner layout — icon zone sits above the ::after overlay\n   ========================================================================== */\n\n.action-btn__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n/* Notification dot — top-right corner of the icon zone */\n.action-btn__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-bar-nav-action',\n  styleUrl: 'BarNavAction.css',\n  scoped: true,\n})\nexport class BarNavAction {\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Controlled toggle/selected state. */\n  @Prop() selected: boolean = false;\n\n  /** Show a notification dot (brand colour) at the top-right of the icon. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n\n  /** Parent surface context — adjusts hover/press colours for coloured backgrounds. */\n  @Prop() background: BarNavActionBackground | undefined;\n\n  /** Emits the new selected value (!selected) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.selected);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'action-btn': true,\n      selected: this.selected,\n      inactive: this.inactive,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-pressed={this.selected}\n          aria-label={this.ariaLabel}\n          onClick={this.handleClick}\n        >\n          <span class=\"action-btn__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"action-btn__dot\"\n                variant=\"dot\"\n                background=\"var(--_dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAkB,IAAM,s2F,MCSjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAOUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,IAAe,MAGfH,KAAAI,SAAoB,MAEOJ,KAAAK,UAAoB,SAQ/CL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,SAAU,OACnBJ,KAAKO,SAASC,MAAMR,KAAKE,SAAS,CA0CrC,CAvCC,MAAAO,GACE,MAAMC,EAAKV,KAAKW,WAEhB,MAAMC,EAA+B,CACnC,aAAc,KACdV,SAAUF,KAAKE,SACfE,SAAUJ,KAAKI,SACfS,SAAUH,IAAO,SACjBI,OAAQJ,IAAO,OACfK,SAAUL,IAAO,SACjBM,aAAcN,IAAO,eAGvB,OACEO,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOT,EACPU,SAAUtB,KAAKI,SAAQ,eACTJ,KAAKE,SAAQ,aACfF,KAAKK,UACjBkB,QAASvB,KAAKM,aAEdW,EAAA,QAAAE,IAAA,2CAAME,MAAM,yBACVJ,EAAA,WAAAE,IAAA,2CAASK,KAAMxB,KAAKC,KAAMwB,KAAK,KAAKC,MAAM,YACzC1B,KAAKG,KACJc,EAAA,YAAAE,IAAA,2CACEE,MAAM,kBACNM,QAAQ,MACRhB,WAAW,mBACXiB,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/types/.stencil/BarNav/index.d.ts

@@ -1,2 +0,0 @@
-export type { BarNavBackground, BarNavTab, BarNavActionItem } from './BarNav';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/.stencil/PanelNav/index.d.ts

@@ -1,3 +0,0 @@
-export type { PanelNavVariant, PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './PanelNav';
-export { PANEL_NAV_VARIANT_HINT_ATTR, clearPanelNavVariantHint, ensurePanelNavVtStyle, setPanelNavVariantHint, } from './panel-nav-utils';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/.stencil/PanelNav/panel-nav-utils.d.ts

@@ -1,27 +0,0 @@
-import type { PanelNavGroup, PanelNavItem, PanelNavVariant } from './PanelNav';
-/** Whether `path` matches `href` at a segment boundary (exact or child path). */
-export declare function hrefMatchesPath(path: string, href: string): boolean;
-/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
-export declare function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string;
-/** Total nav item count across all groups. */
-export declare function countPanelNavItems(groups: PanelNavGroup[]): number;
-/** Parse `groups` from either a JSON attribute string or a JS property array. */
-export declare function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[];
-/** `document.documentElement` attribute for pre-bootstrap variant hints (SPA hard reload). */
-export declare const PANEL_NAV_VARIANT_HINT_ATTR = "data-panel-nav-variant";
-/** Parse `variant` from a host attribute value. */
-export declare function readPanelNavVariantAttr(attr: string | null): PanelNavVariant | undefined;
-/** Set a document-level variant hint before the custom element upgrades (hard reload). */
-export declare function setPanelNavVariantHint(variant: PanelNavVariant): void;
-export declare function clearPanelNavVariantHint(): void;
-/** Resolve initial variant — host attr, then document hint, then prop default. */
-export declare function resolvePanelNavVariant(variantProp: PanelNavVariant, variantAttr: string | null, documentVariantAttr?: string | null): PanelNavVariant;
-/** Resolve whether VT is disabled from prop and/or host attribute. */
-export declare function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean;
-/** True when internal rendered surface lags the host `variant` prop. */
-export declare function shouldResyncPanelNavVariant(renderedVariant: PanelNavVariant, variant: PanelNavVariant): boolean;
-/** True when host `groups` has items but internal parsed state is still empty. */
-export declare function shouldResyncPanelNavGroups(parsedGroups: PanelNavGroup[], groups: string | unknown): boolean;
-/** Inject view-transition suppress styles once per document (shared by PanelNav + hosts). */
-export declare function ensurePanelNavVtStyle(): void;
-//# sourceMappingURL=panel-nav-utils.d.ts.map