@ds-mo/ui 2.9.0 → 2.10.1

package/dist/lib/nav/index.js

@@ -0,0 +1,419 @@
+// src/wc/nav/nav-chrome.ts
+var NAV_STYLE_HINT_ATTR = "data-nav-style";
+function readNavStyleAttr(attr) {
+  if (attr === "dashboard" || attr === "settings") return attr;
+  return void 0;
+}
+function setNavStyleHint(style) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);
+}
+function clearNavStyleHint() {
+  if (typeof document === "undefined") return;
+  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);
+}
+function resolveNavChromeStyle(styleProp, hostAttr, docHint) {
+  const fromHost = readNavStyleAttr(hostAttr);
+  if (fromHost) return fromHost;
+  const hint = docHint !== void 0 ? docHint : typeof document !== "undefined" ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR) : null;
+  const fromHint = readNavStyleAttr(hint);
+  if (fromHint) return fromHint;
+  return styleProp;
+}
+function shouldResyncNavChromeStyle(renderedStyle, style) {
+  return renderedStyle !== style;
+}
+
+// src/wc/utils/resolve-css-time-ms.ts
+function parseCssTimeMs(value, fallback) {
+  const firstToken = value.trim().split(/\s+/)[0] ?? "";
+  const num = parseFloat(firstToken);
+  if (Number.isNaN(num)) return fallback;
+  if (/ms\s*$/.test(firstToken)) return num;
+  if (/s\s*$/.test(firstToken)) return num * 1e3;
+  return num;
+}
+
+// src/wc/nav/shell-view-transition.ts
+var SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
+var VT_STYLE_ID = "ds-shell-nav-vt-style";
+var SHELL_NAV_REVEAL_DURATION_VAR = "--effect-animation-duration-medium-3";
+var SHELL_NAV_REVEAL_EASING_VAR = "--effect-animation-easing-ease-in-out";
+var SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;
+var SHELL_NAV_REVEAL_EASING_FALLBACK = "ease-in-out";
+function readCssCustomProperty(name, fallback) {
+  if (typeof document === "undefined") return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+function ensureShellNavVtStyle() {
+  if (typeof document === "undefined") return;
+  const content = [
+    "::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-old(${SHELL_BAR_NAV_VT_NAME}){z-index:1}`,
+    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){z-index:2;clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,
+    "::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}"
+  ].join("\n");
+  const existing = document.getElementById(VT_STYLE_ID);
+  if (existing) {
+    if (existing.textContent !== content) existing.textContent = content;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = VT_STYLE_ID;
+  style.textContent = content;
+  document.head.appendChild(style);
+}
+function resolveShellNavRevealOrigin(originEl) {
+  const btn = originEl ?? document.querySelector(".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 };
+}
+function setShellNavRevealOriginVars(origin) {
+  document.documentElement.style.setProperty("--vt-x", `${origin.x}px`);
+  document.documentElement.style.setProperty("--vt-y", `${origin.y}px`);
+}
+function animateShellNavRadialReveal(origin, durationMs) {
+  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)`,
+      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`
+    ]
+  };
+  const options = {
+    duration,
+    easing,
+    fill: "forwards"
+  };
+  document.documentElement.animate(keyframes, {
+    ...options,
+    pseudoElement: "::view-transition-new(root)"
+  });
+  document.documentElement.animate(keyframes, {
+    ...options,
+    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`
+  });
+}
+function runShellNavStyleRevealOnReady(transition, originEl) {
+  ensureShellNavVtStyle();
+  const origin = resolveShellNavRevealOrigin(originEl);
+  setShellNavRevealOriginVars(origin);
+  transition.ready.then(() => animateShellNavRadialReveal(origin)).catch(() => {
+  });
+}
+
+// src/wc/nav/shell-gradient-presets.ts
+var SHELL_GRADIENT_PRESETS = ["none", "cool", "neutral", "warm"];
+var DEFAULT_SHELL_GRADIENT_PRESET = "neutral";
+var SHELL_GRADIENT_PRESET_LABELS = {
+  none: "None",
+  cool: "Cool",
+  neutral: "Neutral",
+  warm: "Warm"
+};
+var SHELL_GRADIENT_PRESET_STOP = {
+  cool: "var(--color-color-intent-blue-strong-background)",
+  neutral: "var(--color-color-intent-grey-strong-background)",
+  warm: "var(--color-color-intent-yellow-strong-background)"
+};
+var GRADIENT_GEOMETRY = "100% 100% at 0% 0%";
+function shellGradientPresetStopToken(preset) {
+  if (preset === "none") return null;
+  return SHELL_GRADIENT_PRESET_STOP[preset];
+}
+function isShellGradientPreset(value) {
+  return SHELL_GRADIENT_PRESETS.includes(value);
+}
+function normalizeShellGradientPreset(value) {
+  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;
+}
+function buildShellRadialGradientForPreset(preset) {
+  const normalized = normalizeShellGradientPreset(preset);
+  if (normalized === "none") return "none";
+  const stop = shellGradientPresetStopToken(normalized);
+  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, ${stop} 100%)`;
+}
+
+// src/wc/nav/shell-gradient.ts
+var SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
+var SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
+var SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
+var SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-position-bar";
+var SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
+var SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
+var SHELL_GRADIENT_OPACITY = "0.1";
+function shellChromeLayerActive(gradient) {
+  return gradient;
+}
+function buildShellRadialGradient(preset = DEFAULT_SHELL_GRADIENT_PRESET) {
+  return buildShellRadialGradientForPreset(preset);
+}
+function shellGradientImage(preset = DEFAULT_SHELL_GRADIENT_PRESET) {
+  return buildShellRadialGradient(preset);
+}
+function readShellViewportDimensions(win) {
+  const w = win ?? (typeof globalThis.window !== "undefined" ? globalThis.window : void 0);
+  if (!w) return { width: 0, height: 0 };
+  const visual = w.visualViewport;
+  return {
+    width: Math.round(visual?.width ?? w.innerWidth),
+    height: Math.round(visual?.height ?? w.innerHeight)
+  };
+}
+function shellGradientSize(layout) {
+  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;
+}
+function shellGradientPositionPanel() {
+  return "0 0";
+}
+function shellGradientPositionBar(panelWidth) {
+  return `${-Math.round(panelWidth)}px 0`;
+}
+function shellChromeSurfacePosition(leftPx, topPx) {
+  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;
+}
+
+// src/wc/utils/token-defaults.ts
+import {
+  dimensionIconographyMd,
+  dimensionIconographySm,
+  dimensionIconographyXs,
+  dimensionMenuWidthXs,
+  dimensionPanelWidth2xs,
+  dimensionPanelWidthLg,
+  dimensionPanelWidthMd,
+  dimensionSize300,
+  dimensionSize600,
+  dimensionSize800,
+  dimensionSpace050,
+  dimensionSpace200,
+  effectAnimationDelayLong2,
+  effectAnimationDelayMedium1,
+  effectAnimationDelayShort2,
+  effectAnimationDurationMedium1,
+  effectAnimationDurationShort3,
+  effectMotionShort2,
+  effectMotionShort3
+} from "@ds-mo/tokens/ts";
+var TOKEN_CSS_LENGTHS = {
+  space050: `var(${dimensionSpace050})`,
+  space200: `var(${dimensionSpace200})`,
+  menuWidthXs: `var(${dimensionMenuWidthXs})`
+};
+
+// src/wc/components/Menu/menu-placement.ts
+var PANEL_NAV_USER_MENU_PLACEMENT = {
+  side: "right",
+  align: "end",
+  sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))",
+  alignOffset: TOKEN_CSS_LENGTHS.space050
+};
+
+// src/wc/nav/chrome-transition.ts
+var CHROME_TRANSITION_START = "dsChromeTransitionStart";
+var CHROME_TRANSITION_END = "dsChromeTransitionEnd";
+var ChromeTransitionDepth = class {
+  constructor() {
+    this.depth = 0;
+  }
+  enter() {
+    this.depth += 1;
+  }
+  exit() {
+    this.depth = Math.max(0, this.depth - 1);
+  }
+  get isActive() {
+    return this.depth > 0;
+  }
+};
+function createRafCoalescer(onFrame) {
+  let rafId = 0;
+  return {
+    schedule() {
+      if (rafId !== 0) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        onFrame();
+      });
+    },
+    cancel() {
+      if (rafId !== 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    }
+  };
+}
+function readChromeTransitionSource(event) {
+  return event.detail?.source;
+}
+function readChromeTransitionPhase(event) {
+  return event.detail?.phase;
+}
+
+// src/wc/nav/shell-chrome-metrics.ts
+function readCssVarWidthPx(context, cssVarName) {
+  if (typeof document === "undefined") return 0;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(" + cssVarName + ");";
+  context.appendChild(probe);
+  const width = probe.getBoundingClientRect().width;
+  context.removeChild(probe);
+  return width;
+}
+function readPanelNavWidthTokens(navRoot) {
+  return {
+    expandedPx: readCssVarWidthPx(navRoot, "--_nav-width"),
+    collapsedPx: readCssVarWidthPx(navRoot, "--_nav-width-collapsed")
+  };
+}
+function isPanelNavCollapsed(panelNavHost, navRoot) {
+  if (navRoot?.classList.contains("panel-nav--collapsed")) return true;
+  const collapsedProp = panelNavHost?.collapsed;
+  return collapsedProp === true;
+}
+function panelWidthPxFromTokens(tokens, collapsed) {
+  return collapsed ? tokens.collapsedPx : tokens.expandedPx;
+}
+function barGradientPositionFromPanelWidth(panelWidthPx) {
+  return shellGradientPositionBar(panelWidthPx);
+}
+
+// src/wc/nav/badge-gradient-ring.ts
+var BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
+function isShellGradientActive(from) {
+  const shell = from.closest("ds-app-shell");
+  return shell?.hasAttribute("gradient") === true;
+}
+function findGradientSurface(from) {
+  const barHost = from.closest("ds-bar-nav");
+  if (barHost) {
+    const root = barHost.shadowRoot ?? barHost;
+    const element = root.querySelector(".bar-nav");
+    if (element) {
+      return {
+        element,
+        chromeHost: barHost,
+        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR
+      };
+    }
+  }
+  const panelHost = from.closest("ds-panel-nav");
+  if (panelHost) {
+    const root = panelHost.shadowRoot ?? panelHost;
+    const element = root.querySelector(".panel-nav");
+    if (element) {
+      return {
+        element,
+        chromeHost: panelHost,
+        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR
+      };
+    }
+  }
+  return null;
+}
+function parseCssBackgroundPosition(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return { x: 0, y: 0 };
+  const parts = trimmed.split(/\s+/);
+  const x = parseLength(parts[0] ?? "0");
+  const y = parseLength(parts[1] ?? "0");
+  return { x, y };
+}
+function parseLength(token) {
+  const px = token.match(/^(-?[\d.]+)px$/);
+  if (px) return Number(px[1]);
+  return 0;
+}
+function badgeGradientPosition(badgeHost, surface, shellPosition) {
+  const badgeRect = badgeHost.getBoundingClientRect();
+  const surfaceRect = surface.element.getBoundingClientRect();
+  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;
+  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;
+  const { x, y } = parseCssBackgroundPosition(shellPosition);
+  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;
+}
+function readShellGradientPosition(surface) {
+  const styles = getComputedStyle(surface.chromeHost);
+  return styles.getPropertyValue(surface.positionVar).trim() || "0 0";
+}
+function syncBadgeGradientPosition(badgeHost) {
+  if (!isShellGradientActive(badgeHost)) {
+    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);
+    return;
+  }
+  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, "0 0");
+}
+export {
+  BADGE_GRADIENT_POSITION_VAR,
+  CHROME_TRANSITION_END,
+  CHROME_TRANSITION_START,
+  ChromeTransitionDepth,
+  DEFAULT_SHELL_GRADIENT_PRESET,
+  NAV_STYLE_HINT_ATTR,
+  PANEL_NAV_USER_MENU_PLACEMENT,
+  SHELL_BAR_NAV_VT_NAME,
+  SHELL_CHROME_SURFACE_POSITION_VAR,
+  SHELL_GRADIENT_IMAGE_VAR,
+  SHELL_GRADIENT_OPACITY,
+  SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_GRADIENT_POSITION_BAR_VAR,
+  SHELL_GRADIENT_POSITION_PANEL_VAR,
+  SHELL_GRADIENT_PRESETS,
+  SHELL_GRADIENT_PRESET_LABELS,
+  SHELL_GRADIENT_SIZE_VAR,
+  SHELL_NAV_REVEAL_DURATION_VAR,
+  SHELL_NAV_REVEAL_EASING_VAR,
+  animateShellNavRadialReveal,
+  badgeGradientPosition,
+  barGradientPositionFromPanelWidth,
+  buildShellRadialGradient,
+  buildShellRadialGradientForPreset,
+  clearNavStyleHint,
+  createRafCoalescer,
+  ensureShellNavVtStyle,
+  findGradientSurface,
+  isPanelNavCollapsed,
+  isShellGradientActive,
+  isShellGradientPreset,
+  normalizeShellGradientPreset,
+  panelWidthPxFromTokens,
+  parseCssBackgroundPosition,
+  parseCssTimeMs,
+  readChromeTransitionPhase,
+  readChromeTransitionSource,
+  readCssVarWidthPx,
+  readNavStyleAttr,
+  readPanelNavWidthTokens,
+  readShellGradientPosition,
+  readShellViewportDimensions,
+  resolveNavChromeStyle,
+  resolveShellNavRevealOrigin,
+  runShellNavStyleRevealOnReady,
+  setNavStyleHint,
+  setShellNavRevealOriginVars,
+  shellChromeLayerActive,
+  shellChromeSurfacePosition,
+  shellGradientImage,
+  shellGradientPositionBar,
+  shellGradientPositionPanel,
+  shellGradientPresetStopToken,
+  shellGradientSize,
+  shouldResyncNavChromeStyle,
+  syncBadgeGradientPosition
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/nav/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/wc/nav/nav-chrome.ts", "../../../src/wc/utils/resolve-css-time-ms.ts", "../../../src/wc/nav/shell-view-transition.ts", "../../../src/wc/nav/shell-gradient-presets.ts", "../../../src/wc/nav/shell-gradient.ts", "../../../src/wc/utils/token-defaults.ts", "../../../src/wc/components/Menu/menu-placement.ts", "../../../src/wc/nav/chrome-transition.ts", "../../../src/wc/nav/shell-chrome-metrics.ts", "../../../src/wc/nav/badge-gradient-ring.ts"],
+  "sourcesContent": ["/** Nav chrome style slot \u2014 dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null,\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n", "/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n", "import { parseCssTimeMs } from '../utils/resolve-css-time-ms';\n\n/** `view-transition-name` on `ds-bar-nav` \u2014 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/** TokoMo tokens for the dashboard \u2194 settings radial reveal (WAAPI). */\nexport const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';\nexport const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';\nconst SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;\nconst SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';\n\nfunction readCssCustomProperty(name: string, fallback: string): string {\n  if (typeof document === 'undefined') return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\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\n  const content = [\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-old(${SHELL_BAR_NAV_VT_NAME}){z-index:1}`,\n    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){z-index:2;clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,\n    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n  ].join('\\n');\n\n  const existing = document.getElementById(VT_STYLE_ID) as HTMLStyleElement | null;\n  if (existing) {\n    if (existing.textContent !== content) existing.textContent = content;\n    return;\n  }\n\n  const style = document.createElement('style');\n  style.id = VT_STYLE_ID;\n  style.textContent = content;\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 \u2014 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 duration =\n    durationMs ??\n    parseCssTimeMs(\n      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),\n      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,\n    );\n  const easing = readCssCustomProperty(\n    SHELL_NAV_REVEAL_EASING_VAR,\n    SHELL_NAV_REVEAL_EASING_FALLBACK,\n  );\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,\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", "/** Built-in shell chrome wash presets \u2014 none (solid secondary), cool, neutral, warm. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['none', 'cool', 'neutral', 'warm'];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n};\n\nconst SHELL_GRADIENT_PRESET_STOP: Record<Exclude<ShellGradientPreset, 'none'>, string> = {\n  cool: 'var(--color-color-intent-blue-strong-background)',\n  neutral: 'var(--color-color-intent-grey-strong-background)',\n  warm: 'var(--color-color-intent-yellow-strong-background)',\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  return SHELL_GRADIENT_PRESET_STOP[preset];\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default \u2014 without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset \u2014 transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  const stop = shellGradientPresetStopToken(normalized);\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, ${stop} 100%)`;\n}\n", "/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  isShellGradientPreset,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\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/** Per chrome-surface background-position \u2014 offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(gradient: boolean): boolean {\n  return gradient;\n}\n\n/**\n * Shell radial wash \u2014 same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image (`gradientSrc` on shell overrides). */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-app-shell` element box \u2014 the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): 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\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n", "import {\n  dimensionIconographyMd,\n  dimensionIconographySm,\n  dimensionIconographyXs,\n  dimensionMenuWidthXs,\n  dimensionPanelWidth2xs,\n  dimensionPanelWidthLg,\n  dimensionPanelWidthMd,\n  dimensionSize300,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayShort2,\n  effectAnimationDurationMedium1,\n  effectAnimationDurationShort3,\n  effectMotionShort2,\n  effectMotionShort3,\n} from '@ds-mo/tokens/ts';\n\n/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */\nexport const TOKEN_DEFAULTS = {\n  space050: dimensionSpace050,\n  space200: dimensionSpace200,\n  size300: dimensionSize300,\n  size600: dimensionSize600,\n  size800: dimensionSize800,\n  iconographyMd: dimensionIconographyMd,\n  iconographySm: dimensionIconographySm,\n  iconographyXs: dimensionIconographyXs,\n  panelWidth2xs: dimensionPanelWidth2xs,\n  panelWidthMd: dimensionPanelWidthMd,\n  panelWidthLg: dimensionPanelWidthLg,\n  menuWidthXs: dimensionMenuWidthXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayShort2: effectAnimationDelayShort2,\n  animationDelayLong2: effectAnimationDelayLong2,\n  /** Unmeasured menu height fallback: 20\u00D7 base (160px at default scale). */\n  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',\n  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */\n  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',\n} as const;\n\nexport type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;\n\n/** Valid CSS length strings for overlay offset props \u2014 bind on `sideOffset` / `alignOffset` in hosts. */\nexport const TOKEN_CSS_LENGTHS = {\n  space050: `var(${dimensionSpace050})`,\n  space200: `var(${dimensionSpace200})`,\n  menuWidthXs: `var(${dimensionMenuWidthXs})`,\n} as const;\n", "import { TOKEN_CSS_LENGTHS } from '../../utils/token-defaults';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus \u2014 those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `alignOffset` space-050 (4px): 4px below the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: TOKEN_CSS_LENGTHS.space050,\n} as const satisfies MenuPlacement;\n", "/** Bubbling/composed events \u2014 `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate \u2014 used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n", "import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n", "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  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed \u2014 consumers importing\n  // `@ds-mo/ui/nav` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('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 (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/nav/nav-chrome.d.ts

@@ -0,0 +1,9 @@
+/** Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. */
+export type NavChromeStyle = 'dashboard' | 'settings';
+/** Document hint for first paint before framework props land. */
+export declare const NAV_STYLE_HINT_ATTR = "data-nav-style";
+export declare function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined;
+export declare function setNavStyleHint(style: NavChromeStyle): void;
+export declare function clearNavStyleHint(): void;
+export declare function resolveNavChromeStyle(styleProp: NavChromeStyle, hostAttr: string | null, docHint?: string | null): NavChromeStyle;
+export declare function shouldResyncNavChromeStyle(renderedStyle: NavChromeStyle, style: NavChromeStyle): boolean;

package/dist/lib/nav/shell-chrome-metrics.d.ts

@@ -0,0 +1,11 @@
+/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */
+export declare function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number;
+export interface PanelNavWidthTokens {
+    expandedPx: number;
+    collapsedPx: number;
+}
+/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */
+export declare function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens;
+export declare function isPanelNavCollapsed(panelNavHost: HTMLElement | null, navRoot: HTMLElement | null): boolean;
+export declare function panelWidthPxFromTokens(tokens: PanelNavWidthTokens, collapsed: boolean): number;
+export declare function barGradientPositionFromPanelWidth(panelWidthPx: number): string;

package/dist/lib/nav/shell-gradient-presets.d.ts

@@ -0,0 +1,20 @@
+/** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
+export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
+export declare const SHELL_GRADIENT_PRESETS: ShellGradientPreset[];
+/** Wash presets shown after the `none` option in pickers. */
+export declare const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[];
+/** Default wash when `gradient-preset` is omitted. */
+export declare const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset;
+export declare const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string>;
+export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null;
+export declare function isShellGradientPreset(value: string): value is ShellGradientPreset;
+/**
+ * Coerce unknown/absent presets to the default. Runtime values escape the
+ * type: removing the reflected `gradient-preset` attribute (e.g. an Angular
+ * `[attr.gradient-preset]="null"` binding) drives the prop to null past its
+ * field default — without normalization the stop lookup interpolates the
+ * literal string "undefined" into CSS and the wash silently disappears.
+ */
+export declare function normalizeShellGradientPreset(value: string | null | undefined): ShellGradientPreset;
+/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */
+export declare function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string;

package/dist/lib/nav/shell-gradient.d.ts

@@ -0,0 +1,43 @@
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+import type { ShellGradientPreset } from './shell-gradient-presets';
+export type { ShellGradientPreset } from './shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
+export declare const SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
+export declare const SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
+export declare const SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
+export declare const SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-position-bar";
+export declare const SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
+/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */
+export declare const SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
+/** Layer opacity for the nav gradient wash. */
+export declare const SHELL_GRADIENT_OPACITY = "0.1";
+/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */
+export declare function shellChromeLayerActive(gradient: boolean): boolean;
+/**
+ * Shell radial wash — same for panel and bar nav.
+ * Tokens follow `data-theme` (light/dark intent stops).
+ */
+export declare function buildShellRadialGradient(preset?: ShellGradientPreset): string;
+/** Built-in radial image (`gradientSrc` on shell overrides). */
+export declare function shellGradientImage(preset?: ShellGradientPreset): string;
+export interface ShellViewportDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Viewport size for shell chrome with `background-attachment: fixed`.
+ * Must not use the `ds-app-shell` element box — the shell can be shorter or
+ * taller than the viewport when host height chains break or content overflows.
+ */
+export declare function readShellViewportDimensions(win?: Window): ShellViewportDimensions;
+export interface ShellGradientLayout {
+    width: number;
+    height: number;
+    panelWidth: number;
+}
+/** Pixel `background-size` for the fixed-attachment radial wash. */
+export declare function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string;
+export declare function shellGradientPositionPanel(): string;
+export declare function shellGradientPositionBar(panelWidth: number): string;
+/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */
+export declare function shellChromeSurfacePosition(leftPx: number, topPx: number): string;

package/dist/lib/nav/shell-view-transition.d.ts

@@ -0,0 +1,23 @@
+import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
+/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
+export declare const SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
+export { parseCssTimeMs };
+/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
+export declare const SHELL_NAV_REVEAL_DURATION_VAR = "--effect-animation-duration-medium-3";
+export declare const SHELL_NAV_REVEAL_EASING_VAR = "--effect-animation-easing-ease-in-out";
+/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
+export declare function ensureShellNavVtStyle(): void;
+export interface ShellNavRevealOrigin {
+    x: number;
+    y: number;
+    maxRadius: number;
+}
+/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
+export declare function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin;
+export declare function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void;
+/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
+export declare function animateShellNavRadialReveal(origin: ShellNavRevealOrigin, durationMs?: number): void;
+/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
+export declare function runShellNavStyleRevealOnReady(transition: {
+    ready: Promise<void>;
+}, originEl?: HTMLElement | null): void;

package/dist/lib/utils/index.d.ts

@@ -0,0 +1,7 @@
+export { registerIcons } from '../components/Icon/icon-cache';
+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, TOKEN_CSS_LENGTHS } from './token-defaults';
+export type { TokenDefaultKey } from './token-defaults';