@ds-mo/ui 3.3.0 → 4.0.0

package/dist/lib/nav/index.js

@@ -117,23 +117,59 @@ function runShellNavStyleRevealOnReady(transition, originEl) {
 }
 
 // src/wc/nav/shell-gradient-presets.ts
-var SHELL_GRADIENT_PRESETS = ["none", "cool", "neutral", "warm"];
+var SHELL_GRADIENT_PRESETS = [
+  "none",
+  "cool",
+  "neutral",
+  "warm",
+  "fresh"
+];
 var DEFAULT_SHELL_GRADIENT_PRESET = "neutral";
 var SHELL_GRADIENT_PRESET_LABELS = {
   none: "None",
   cool: "Cool",
   neutral: "Neutral",
-  warm: "Warm"
+  warm: "Warm",
+  fresh: "Fresh"
 };
-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 SHELL_GRADIENT_RECIPES = {
+  cool: {
+    opacity: 0.1,
+    stops: [
+      { color: "var(--color-background-transparent)", position: 0 },
+      { color: "var(--color-color-intent-blue-strong-background)", position: 100 }
+    ]
+  },
+  neutral: {
+    opacity: 0.1,
+    stops: [
+      { color: "var(--color-background-transparent)", position: 0 },
+      { color: "var(--color-color-intent-grey-strong-background)", position: 100 }
+    ]
+  },
+  warm: {
+    opacity: 0.1,
+    stops: [
+      { color: "var(--color-background-transparent)", position: 0 },
+      { color: "var(--color-color-intent-yellow-strong-background)", position: 100 }
+    ]
+  },
+  fresh: {
+    opacity: 0.4,
+    stops: [
+      { color: "var(--color-color-intent-cyan-faint-background)", position: 0 },
+      { color: "var(--color-background-transparent)", position: 47 },
+      { color: "var(--color-background-transparent)", position: 58 },
+      { color: "var(--color-color-intent-red-faint-background)", position: 83 },
+      { color: "var(--color-color-intent-pink-faint-background)", position: 100 }
+    ]
+  }
 };
 var GRADIENT_GEOMETRY = "100% 100% at 0% 0%";
 function shellGradientPresetStopToken(preset) {
   if (preset === "none") return null;
-  return SHELL_GRADIENT_PRESET_STOP[preset];
+  const stops = SHELL_GRADIENT_RECIPES[preset].stops;
+  return stops[stops.length - 1]?.color ?? null;
 }
 function isShellGradientPreset(value) {
   return SHELL_GRADIENT_PRESETS.includes(value);
@@ -144,8 +180,11 @@ function normalizeShellGradientPreset(value) {
 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%)`;
+  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);
+}
+function buildShellRadialGradientFromStops(stops) {
+  const serialized = stops.map((stop) => `${stop.color} ${stop.position}%`).join(", ");
+  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;
 }
 
 // src/wc/nav/shell-gradient.ts
@@ -155,9 +194,8 @@ 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 shellChromeLayerActive(preset) {
+  return normalizeShellGradientPreset(preset) !== "none";
 }
 function buildShellRadialGradient(preset = DEFAULT_SHELL_GRADIENT_PRESET) {
   return buildShellRadialGradientForPreset(preset);
@@ -307,7 +345,7 @@ function barGradientPositionFromPanelWidth(panelWidthPx) {
 var BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
 function isShellGradientActive(from) {
   const shell = from.closest("ds-app-shell");
-  return shell?.hasAttribute("gradient") === true;
+  return shell !== null && shell.getAttribute("gradient-preset") !== "none";
 }
 function findGradientSurface(from) {
   const barHost = from.closest("ds-bar-nav");
@@ -379,7 +417,6 @@ export {
   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,

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

@@ -1,7 +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  dimensionRadius025,\n  dimensionSize200,\n  dimensionSize300,\n  dimensionSize400,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  typographyLineheightLg,\n  typographyLineheightMd,\n  typographyLineheightSm,\n  typographyLineheightXl,\n  typographyLineheightXs,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayMedium3,\n  effectAnimationDelayInstant,\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  radius025: dimensionRadius025,\n  size200: dimensionSize200,\n  size300: dimensionSize300,\n  size400: dimensionSize400,\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  lineheightLg: typographyLineheightLg,\n  lineheightMd: typographyLineheightMd,\n  lineheightSm: typographyLineheightSm,\n  lineheightXl: typographyLineheightXl,\n  lineheightXs: typographyLineheightXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayInstant: effectAnimationDelayInstant,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayMedium3: effectAnimationDelayMedium3,\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  /** Fill-mode donut diameter floor: 16\u00D7 size-base (128px). */\n  donutFillMin: 'calc(var(--dimension-size-base) * 16)',\n  /** Fill-mode donut diameter ceiling: 24\u00D7 size-base (192px). */\n  donutFillMax: 'calc(var(--dimension-size-base) * 24)',\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\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\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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",
+  "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. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\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  'fresh',\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  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\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  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\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  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\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  normalizeShellGradientPreset,\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  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\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/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\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 for the selected shell preset. */\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  dimensionRadius025,\n  dimensionSize200,\n  dimensionSize300,\n  dimensionSize400,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  typographyLineheightLg,\n  typographyLineheightMd,\n  typographyLineheightSm,\n  typographyLineheightXl,\n  typographyLineheightXs,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayMedium3,\n  effectAnimationDelayInstant,\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  radius025: dimensionRadius025,\n  size200: dimensionSize200,\n  size300: dimensionSize300,\n  size400: dimensionSize400,\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  lineheightLg: typographyLineheightLg,\n  lineheightMd: typographyLineheightMd,\n  lineheightSm: typographyLineheightSm,\n  lineheightXl: typographyLineheightXl,\n  lineheightXs: typographyLineheightXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayInstant: effectAnimationDelayInstant,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayMedium3: effectAnimationDelayMedium3,\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  /** Fill-mode donut diameter floor: 16\u00D7 size-base (128px). */\n  donutFillMin: 'calc(var(--dimension-size-base) * 16)',\n  /** Fill-mode donut diameter ceiling: 24\u00D7 size-base (192px). */\n  donutFillMax: 'calc(var(--dimension-size-base) * 24)',\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\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\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 a shell with an active wash preset. */\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 !== null && shell.getAttribute('gradient-preset') !== 'none';\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": ";AAIO,IAAM,sBAAsB;AAE5B,SAAS,iBAAiB,MAAiD;AAChF,MAAI,SAAS,eAAe,SAAS,WAAY,QAAO;AACxD,SAAO;AACT;AAEO,SAAS,gBAAgB,OAA6B;AAC3D,MAAI,OAAO,aAAa,YAAa;AACrC,WAAS,gBAAgB,aAAa,qBAAqB,KAAK;AAClE;AAEO,SAAS,oBAA0B;AACxC,MAAI,OAAO,aAAa,YAAa;AACrC,WAAS,gBAAgB,gBAAgB,mBAAmB;AAC9D;AAEO,SAAS,sBACd,WACA,UACA,SACgB;AAChB,QAAM,WAAW,iBAAiB,QAAQ;AAC1C,MAAI,SAAU,QAAO;AAErB,QAAM,OACJ,YAAY,SACR,UACA,OAAO,aAAa,cAClB,SAAS,gBAAgB,aAAa,mBAAmB,IACzD;AACR,QAAM,WAAW,iBAAiB,IAAI;AACtC,MAAI,SAAU,QAAO;AAErB,SAAO;AACT;AAEO,SAAS,2BACd,eACA,OACS;AACT,SAAO,kBAAkB;AAC3B;;;AC7CO,SAAS,eAAe,OAAe,UAA0B;AACtE,QAAM,aAAa,MAAM,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC,KAAK;AACnD,QAAM,MAAM,WAAW,UAAU;AACjC,MAAI,OAAO,MAAM,GAAG,EAAG,QAAO;AAC9B,MAAI,SAAS,KAAK,UAAU,EAAG,QAAO;AACtC,MAAI,QAAQ,KAAK,UAAU,EAAG,QAAO,MAAM;AAC3C,SAAO;AACT;;;ACLO,IAAM,wBAAwB;AAIrC,IAAM,cAAc;AAGb,IAAM,gCAAgC;AACtC,IAAM,8BAA8B;AAC3C,IAAM,wCAAwC;AAC9C,IAAM,mCAAmC;AAEzC,SAAS,sBAAsB,MAAc,UAA0B;AACrE,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,QAAQ,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,IAAI,EAAE,KAAK;AACrF,SAAO,SAAS;AAClB;AAGO,SAAS,wBAA8B;AAC5C,MAAI,OAAO,aAAa,YAAa;AAErC,QAAM,UAAU;AAAA,IACd;AAAA,IACA,yBAAyB,qBAAqB,2BAA2B,qBAAqB;AAAA,IAC9F,yBAAyB,qBAAqB;AAAA,IAC9C,yBAAyB,qBAAqB;AAAA,IAC9C;AAAA,EACF,EAAE,KAAK,IAAI;AAEX,QAAM,WAAW,SAAS,eAAe,WAAW;AACpD,MAAI,UAAU;AACZ,QAAI,SAAS,gBAAgB,QAAS,UAAS,cAAc;AAC7D;AAAA,EACF;AAEA,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,KAAK;AACX,QAAM,cAAc;AACpB,WAAS,KAAK,YAAY,KAAK;AACjC;AASO,SAAS,4BAA4B,UAAqD;AAC/F,QAAM,MACJ,YACA,SAAS,cAA2B,wBAAwB;AAC9D,QAAM,OAAO,KAAK,sBAAsB;AACxC,QAAM,IAAI,OAAO,KAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,CAAC,IAAI,KAAK,MAAM,OAAO,aAAa,CAAC;AAC1F,QAAM,IAAI,OAAO,KAAK,MAAM,KAAK,MAAM,KAAK,SAAS,CAAC,IAAI,KAAK,MAAM,OAAO,cAAc,CAAC;AAC3F,QAAM,YAAY,KAAK;AAAA,IACrB,KAAK,MAAM,KAAK,IAAI,GAAG,OAAO,aAAa,CAAC,GAAG,KAAK,IAAI,GAAG,OAAO,cAAc,CAAC,CAAC;AAAA,EACpF;AACA,SAAO,EAAE,GAAG,GAAG,UAAU;AAC3B;AAEO,SAAS,4BAA4B,QAAoC;AAC9E,WAAS,gBAAgB,MAAM,YAAY,UAAU,GAAG,OAAO,CAAC,IAAI;AACpE,WAAS,gBAAgB,MAAM,YAAY,UAAU,GAAG,OAAO,CAAC,IAAI;AACtE;AAGO,SAAS,4BACd,QACA,YACM;AACN,QAAM,WACJ,cACA;AAAA,IACE,sBAAsB,+BAA+B,OAAO;AAAA,IAC5D;AAAA,EACF;AACF,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB,UAAU;AAAA,MACR,iBAAiB,OAAO,CAAC,MAAM,OAAO,CAAC;AAAA,MACvC,UAAU,OAAO,SAAS,SAAS,OAAO,CAAC,MAAM,OAAO,CAAC;AAAA,IAC3D;AAAA,EACF;AACA,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,WAAS,gBAAgB,QAAQ,WAAW;AAAA,IAC1C,GAAG;AAAA,IACH,eAAe;AAAA,EACjB,CAAC;AACD,WAAS,gBAAgB,QAAQ,WAAW;AAAA,IAC1C,GAAG;AAAA,IACH,eAAe,yBAAyB,qBAAqB;AAAA,EAC/D,CAAC;AACH;AAGO,SAAS,8BACd,YACA,UACM;AACN,wBAAsB;AACtB,QAAM,SAAS,4BAA4B,QAAQ;AACnD,8BAA4B,MAAM;AAElC,aAAW,MACR,KAAK,MAAM,4BAA4B,MAAM,CAAC,EAC9C,MAAM,MAAM;AAAA,EAEb,CAAC;AACL;;;ACtHO,IAAM,yBAAgD;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAWO,IAAM,gCAAqD;AAE3D,IAAM,+BAAoE;AAAA,EAC/E,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT;AAYA,IAAM,yBAA4F;AAAA,EAChG,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,OAAO,uCAAuC,UAAU,EAAE;AAAA,MAC5D,EAAE,OAAO,oDAAoD,UAAU,IAAI;AAAA,IAC7E;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,OAAO,uCAAuC,UAAU,EAAE;AAAA,MAC5D,EAAE,OAAO,oDAAoD,UAAU,IAAI;AAAA,IAC7E;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,OAAO,uCAAuC,UAAU,EAAE;AAAA,MAC5D,EAAE,OAAO,sDAAsD,UAAU,IAAI;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,OAAO,mDAAmD,UAAU,EAAE;AAAA,MACxE,EAAE,OAAO,uCAAuC,UAAU,GAAG;AAAA,MAC7D,EAAE,OAAO,uCAAuC,UAAU,GAAG;AAAA,MAC7D,EAAE,OAAO,kDAAkD,UAAU,GAAG;AAAA,MACxE,EAAE,OAAO,mDAAmD,UAAU,IAAI;AAAA,IAC5E;AAAA,EACF;AACF;AAEA,IAAM,oBAAoB;AAEnB,SAAS,6BAA6B,QAA4C;AACvF,MAAI,WAAW,OAAQ,QAAO;AAC9B,QAAM,QAAQ,uBAAuB,MAAM,EAAE;AAC7C,SAAO,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS;AAC3C;AAWO,SAAS,sBAAsB,OAA6C;AACjF,SAAQ,uBAAoC,SAAS,KAAK;AAC5D;AASO,SAAS,6BACd,OACqB;AACrB,SAAO,SAAS,QAAQ,sBAAsB,KAAK,IAAI,QAAQ;AACjE;AAGO,SAAS,kCAAkC,QAAqC;AACrF,QAAM,aAAa,6BAA6B,MAAM;AACtD,MAAI,eAAe,OAAQ,QAAO;AAElC,SAAO,kCAAkC,uBAAuB,UAAU,EAAE,KAAK;AACnF;AAGO,SAAS,kCAAkC,OAA6C;AAC7F,QAAM,aAAa,MAAM,IAAI,UAAQ,GAAG,KAAK,KAAK,IAAI,KAAK,QAAQ,GAAG,EAAE,KAAK,IAAI;AACjF,SAAO,mBAAmB,iBAAiB,KAAK,UAAU;AAC5D;;;ACnGO,IAAM,2BAA2B;AACjC,IAAM,0BAA0B;AAChC,IAAM,oCAAoC;AAC1C,IAAM,kCAAkC;AACxC,IAAM,6BAA6B;AAEnC,IAAM,oCAAoC;AAG1C,SAAS,uBAAuB,QAAsC;AAC3E,SAAO,6BAA6B,MAAM,MAAM;AAClD;AAMO,SAAS,yBACd,SAA8B,+BACtB;AACR,SAAO,kCAAkC,MAAM;AACjD;AAGO,SAAS,mBACd,SAA8B,+BACtB;AACR,SAAO,yBAAyB,MAAM;AACxC;AAYO,SAAS,4BAA4B,KAAuC;AACjF,QAAM,IAAI,QAAQ,OAAO,WAAW,WAAW,cAAc,WAAW,SAAS;AACjF,MAAI,CAAC,EAAG,QAAO,EAAE,OAAO,GAAG,QAAQ,EAAE;AAErC,QAAM,SAAS,EAAE;AACjB,SAAO;AAAA,IACL,OAAO,KAAK,MAAM,QAAQ,SAAS,EAAE,UAAU;AAAA,IAC/C,QAAQ,KAAK,MAAM,QAAQ,UAAU,EAAE,WAAW;AAAA,EACpD;AACF;AASO,SAAS,kBAAkB,QAA+D;AAC/F,SAAO,GAAG,KAAK,MAAM,OAAO,KAAK,CAAC,MAAM,KAAK,MAAM,OAAO,MAAM,CAAC;AACnE;AAEO,SAAS,6BAAqC;AACnD,SAAO;AACT;AAEO,SAAS,yBAAyB,YAA4B;AACnE,SAAO,GAAG,CAAC,KAAK,MAAM,UAAU,CAAC;AACnC;AAGO,SAAS,2BAA2B,QAAgB,OAAuB;AAChF,SAAO,GAAG,CAAC,KAAK,MAAM,MAAM,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK,CAAC;AACvD;;;AC9FA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA8CA,IAAM,oBAAoB;AAAA,EAC/B,UAAU,OAAO,iBAAiB;AAAA,EAClC,UAAU,OAAO,iBAAiB;AAAA,EAClC,aAAa,OAAO,oBAAoB;AAC1C;;;AC5DO,IAAM,gCAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa,kBAAkB;AACjC;;;ACvBO,IAAM,0BAA0B;AAChC,IAAM,wBAAwB;AAW9B,IAAM,wBAAN,MAA4B;AAAA,EAA5B;AACL,SAAQ,QAAQ;AAAA;AAAA,EAEhB,QAAc;AACZ,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,OAAa;AACX,SAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,QAAQ,CAAC;AAAA,EACzC;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ;AAAA,EACtB;AACF;AA0BO,SAAS,mBAAmB,SAAmC;AACpE,MAAI,QAAQ;AACZ,SAAO;AAAA,IACL,WAAW;AACT,UAAI,UAAU,EAAG;AACjB,cAAQ,sBAAsB,MAAM;AAClC,gBAAQ;AACR,gBAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,SAAS;AACP,UAAI,UAAU,GAAG;AACf,6BAAqB,KAAK;AAC1B,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,2BAA2B,OAAkD;AAC3F,SAAQ,MAA8C,QAAQ;AAChE;AAEO,SAAS,0BAA0B,OAA+C;AACvF,SAAQ,MAA8C,QAAQ;AAChE;;;AC5EO,SAAS,kBAAkB,SAAsB,YAA4B;AAClF,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,MAAM,UACV,gFACA,aACA;AACF,UAAQ,YAAY,KAAK;AACzB,QAAM,QAAQ,MAAM,sBAAsB,EAAE;AAC5C,UAAQ,YAAY,KAAK;AACzB,SAAO;AACT;AAQO,SAAS,wBAAwB,SAA2C;AACjF,SAAO;AAAA,IACL,YAAY,kBAAkB,SAAS,cAAc;AAAA,IACrD,aAAa,kBAAkB,SAAS,wBAAwB;AAAA,EAClE;AACF;AAEO,SAAS,oBACd,cACA,SACS;AACT,MAAI,SAAS,UAAU,SAAS,sBAAsB,EAAG,QAAO;AAChE,QAAM,gBAAiB,cAAiE;AACxF,SAAO,kBAAkB;AAC3B;AAEO,SAAS,uBACd,QACA,WACQ;AACR,SAAO,YAAY,OAAO,cAAc,OAAO;AACjD;AAEO,SAAS,kCAAkC,cAA8B;AAC9E,SAAO,yBAAyB,YAAY;AAC9C;;;AC1CO,IAAM,8BAA8B;AASpC,SAAS,sBAAsB,MAA4B;AAIhE,QAAM,QAAQ,KAAK,QAAqB,cAAc;AACtD,SAAO,UAAU,QAAQ,MAAM,aAAa,iBAAiB,MAAM;AACrE;AAGO,SAAS,oBAAoB,MAA2C;AAC7E,QAAM,UAAU,KAAK,QAAQ,YAAY;AACzC,MAAI,SAAS;AACX,UAAM,OAAO,QAAQ,cAAc;AACnC,UAAM,UAAU,KAAK,cAAc,UAAU;AAC7C,QAAI,SAAS;AACX,aAAO;AAAA,QACL;AAAA,QACA,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,KAAK,QAAQ,cAAc;AAC7C,MAAI,WAAW;AACb,UAAM,OAAO,UAAU,cAAc;AACrC,UAAM,UAAU,KAAK,cAAc,YAAY;AAC/C,QAAI,SAAS;AACX,aAAO;AAAA,QACL;AAAA,QACA,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAQO,SAAS,2BAA2B,OAA+B;AACxE,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,QAAS,QAAO,EAAE,GAAG,GAAG,GAAG,EAAE;AAElC,QAAM,QAAQ,QAAQ,MAAM,KAAK;AACjC,QAAM,IAAI,YAAY,MAAM,CAAC,KAAK,GAAG;AACrC,QAAM,IAAI,YAAY,MAAM,CAAC,KAAK,GAAG;AACrC,SAAO,EAAE,GAAG,EAAE;AAChB;AAEA,SAAS,YAAY,OAAuB;AAC1C,QAAM,KAAK,MAAM,MAAM,gBAAgB;AACvC,MAAI,GAAI,QAAO,OAAO,GAAG,CAAC,CAAC;AAC3B,SAAO;AACT;AAMO,SAAS,sBACd,WACA,SACA,eACQ;AACR,QAAM,YAAY,UAAU,sBAAsB;AAClD,QAAM,cAAc,QAAQ,QAAQ,sBAAsB;AAC1D,QAAM,UAAU,UAAU,OAAO,UAAU,QAAQ,IAAI,YAAY;AACnE,QAAM,UAAU,UAAU,MAAM,UAAU,SAAS,IAAI,YAAY;AACnE,QAAM,EAAE,GAAG,EAAE,IAAI,2BAA2B,aAAa;AAEzD,SAAO,GAAG,KAAK,MAAM,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,IAAI,OAAO,CAAC;AAChE;AAGO,SAAS,0BAA0B,SAAkC;AAC1E,QAAM,SAAS,iBAAiB,QAAQ,UAAU;AAClD,SAAO,OAAO,iBAAiB,QAAQ,WAAW,EAAE,KAAK,KAAK;AAChE;AAGO,SAAS,0BAA0B,WAA8B;AACtE,MAAI,CAAC,sBAAsB,SAAS,GAAG;AACrC,cAAU,MAAM,eAAe,2BAA2B;AAC1D;AAAA,EACF;AAEA,YAAU,MAAM,YAAY,6BAA6B,KAAK;AAChE;",
   "names": []
 }

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

@@ -1,12 +1,22 @@
-/** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
-export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
+/** Built-in shell chrome wash presets. */
+export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';
 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 interface ShellGradientStop {
+    color: string;
+    position: number;
+}
+export interface ShellGradientRecipe {
+    opacity: number;
+    stops: readonly ShellGradientStop[];
+}
 export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null;
+export declare function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null;
+export declare function shellGradientPresetOpacity(preset: ShellGradientPreset): string;
 export declare function isShellGradientPreset(value: string): value is ShellGradientPreset;
 /**
  * Coerce unknown/absent presets to the default. Runtime values escape the
@@ -18,3 +28,5 @@ export declare function isShellGradientPreset(value: string): value is ShellGrad
 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;
+/** Build the production shell geometry from an ordered set of design-time stops. */
+export declare function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string;

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

@@ -1,7 +1,7 @@
 /** 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 { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, 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";
@@ -9,16 +9,14 @@ export declare const SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-posi
 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;
+export declare function shellChromeLayerActive(preset: ShellGradientPreset): 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). */
+/** Built-in radial image for the selected shell preset. */
 export declare function shellGradientImage(preset?: ShellGradientPreset): string;
 export interface ShellViewportDimensions {
     width: number;

package/dist/types/components/AppShell/AppShell.d.ts

@@ -3,16 +3,9 @@ import { type ShellGradientPreset } from '../../nav/shell-gradient-presets';
 export declare class AppShell {
     /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
     navStyle: NavChromeStyle;
-    /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */
-    gradient: boolean;
     /**
-     * Optional custom gradient for `background-image` (e.g. SVG URL).
-     * When set, overrides the built-in radial wash.
-     */
-    gradientSrc: string;
-    /**
-     * Built-in shell wash preset when `gradient` is true.
-     * `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+     * Shell chrome wash preset. `none` renders solid chrome; the remaining
+     * presets use token-based washes that adapt to the active color theme.
      */
     gradientPreset: ShellGradientPreset;
     /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */

package/dist/types/components/Badge/Badge.d.ts

@@ -14,7 +14,7 @@ export declare class Badge {
     background: string | undefined;
     /**
      * Ring samples the shell gradient stack (base fill + wash) instead of a flat
-     * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;
+     * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;
      * set `gradient-background` to opt in/out explicitly.
      *
      * The attribute must NOT start with `on` — Stencil's setAccessor routes any

package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts

@@ -5,7 +5,10 @@ export declare class ShellGradientPicker {
     value: ShellGradientPreset;
     groupLabel: string;
     dsChange: EventEmitter<ShellGradientPreset>;
+    el: HTMLElement;
     private handleSwatchSelect;
+    private focusSwatch;
+    private handleSwatchKeyDown;
     private renderSwatch;
     render(): any;
 }

package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts

@@ -1,4 +1,4 @@
 import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
 export type { ShellGradientPreset };
-export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_WASH_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from '../../nav/shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_WASH_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from '../../nav/shell-gradient-presets';
 //# sourceMappingURL=shell-gradient-swatch-types.d.ts.map

package/dist/types/components.d.ts

@@ -78,20 +78,10 @@ export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Too
 export namespace Components {
     interface DsAppShell {
         /**
-          * When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout).
-          * @default false
-         */
-        "gradient": boolean;
-        /**
-          * Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
           * @default 'neutral'
          */
         "gradientPreset": ShellGradientPreset;
-        /**
-          * 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 'dashboard'
@@ -114,7 +104,7 @@ export namespace Components {
          */
         "count": number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an AppShell with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground": boolean;
@@ -2141,20 +2131,10 @@ declare namespace LocalJSX {
 
     interface DsAppShell {
         /**
-          * When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout).
-          * @default false
-         */
-        "gradient"?: boolean;
-        /**
-          * Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
           * @default 'neutral'
          */
         "gradientPreset"?: ShellGradientPreset;
-        /**
-          * 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 'dashboard'
@@ -2177,7 +2157,7 @@ declare namespace LocalJSX {
          */
         "count"?: number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an AppShell with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground"?: boolean;
@@ -3577,8 +3557,6 @@ declare namespace LocalJSX {
 
     interface DsAppShellAttributes {
         "navStyle": NavChromeStyle;
-        "gradient": boolean;
-        "gradientSrc": string;
         "gradientPreset": ShellGradientPreset;
         "shortcutsEnabled": boolean;
     }

package/dist/types/nav/badge-gradient-ring.d.ts

@@ -5,7 +5,7 @@ export interface GradientSurface {
     chromeHost: HTMLElement;
     positionVar: string;
 }
-/** Whether the badge sits under `ds-app-shell[gradient]`. */
+/** Whether the badge sits under a shell with an active wash preset. */
 export declare function isShellGradientActive(from: HTMLElement): boolean;
 /** Bar or panel chrome surface that owns the shell gradient stack. */
 export declare function findGradientSurface(from: HTMLElement): GradientSurface | null;

package/dist/types/nav/index.d.ts

@@ -2,7 +2,7 @@ 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, SHELL_NAV_REVEAL_DURATION_VAR, SHELL_NAV_REVEAL_EASING_VAR, 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_CHROME_SURFACE_POSITION_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, shellChromeLayerActive, readShellViewportDimensions, } from './shell-gradient';
+export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSITION_PANEL_VAR, SHELL_GRADIENT_POSITION_BAR_VAR, SHELL_GRADIENT_OPACITY_VAR, SHELL_CHROME_SURFACE_POSITION_VAR, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, shellChromeLayerActive, readShellViewportDimensions, } from './shell-gradient';
 export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
 export type { MenuPlacement } from '../components/Menu/menu-placement';
 export { PANEL_NAV_USER_MENU_PLACEMENT, } from '../components/Menu/menu-placement';

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

@@ -1,12 +1,22 @@
-/** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
-export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
+/** Built-in shell chrome wash presets. */
+export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';
 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 interface ShellGradientStop {
+    color: string;
+    position: number;
+}
+export interface ShellGradientRecipe {
+    opacity: number;
+    stops: readonly ShellGradientStop[];
+}
 export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null;
+export declare function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null;
+export declare function shellGradientPresetOpacity(preset: ShellGradientPreset): string;
 export declare function isShellGradientPreset(value: string): value is ShellGradientPreset;
 /**
  * Coerce unknown/absent presets to the default. Runtime values escape the
@@ -18,4 +28,6 @@ export declare function isShellGradientPreset(value: string): value is ShellGrad
 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;
+/** Build the production shell geometry from an ordered set of design-time stops. */
+export declare function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string;
 //# sourceMappingURL=shell-gradient-presets.d.ts.map

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

@@ -1,7 +1,7 @@
 /** 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 { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, 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";
@@ -9,16 +9,14 @@ export declare const SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-posi
 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;
+export declare function shellChromeLayerActive(preset: ShellGradientPreset): 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). */
+/** Built-in radial image for the selected shell preset. */
 export declare function shellGradientImage(preset?: ShellGradientPreset): string;
 export interface ShellViewportDimensions {
     width: number;

package/dist/types/utils/shortcut-key.d.ts

@@ -0,0 +1,3 @@
+/** Split a shortcut chord into the labels rendered on individual keycaps. */
+export declare function shortcutKeyLabels(shortcut: string): string[];
+//# sourceMappingURL=shortcut-key.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-Bz3jyrDV.js

@@ -1,2 +0,0 @@
-const n=["none","cool","neutral","warm"];const t=["cool","neutral","warm"];const o="neutral";const r={none:"None",cool:"Cool",neutral:"Neutral",warm:"Warm"};const a={cool:"var(--color-color-intent-blue-strong-background)",neutral:"var(--color-color-intent-grey-strong-background)",warm:"var(--color-color-intent-yellow-strong-background)"};const e="100% 100% at 0% 0%";function s(n){if(n==="none")return null;return a[n]}function c(t){return n.includes(t)}function l(n){return n!=null&&c(n)?n:o}function i(n){const t=l(n);if(t==="none")return"none";const o=s(t);return`radial-gradient(${e}, var(--color-background-transparent) 0%, ${o} 100%)`}const u="--ds-shell-gradient-image";const d="--ds-shell-gradient-size";const g="--ds-shell-gradient-position-panel";const h="--ds-shell-gradient-position-bar";const f="--ds-shell-gradient-opacity";const p="0.1";function b(n=o){return i(n)}function w(n){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const o=t.visualViewport;return{width:Math.round(o?.width??t.innerWidth),height:Math.round(o?.height??t.innerHeight)}}function m(n){return`${Math.round(n.width)}px ${Math.round(n.height)}px`}function k(){return"0 0"}function M(n){return`${-Math.round(n)}px 0`}export{o as D,t as S,r as a,p as b,i as c,u as d,d as e,f,g,h,M as i,b as j,m as k,w as r,k as s};
-//# sourceMappingURL=p-Bz3jyrDV.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["SHELL_GRADIENT_PRESETS","SHELL_GRADIENT_WASH_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","none","cool","neutral","warm","SHELL_GRADIENT_PRESET_STOP","GRADIENT_GEOMETRY","shellGradientPresetStopToken","preset","isShellGradientPreset","value","includes","normalizeShellGradientPreset","buildShellRadialGradientForPreset","normalized","stop","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","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth"],"sources":["src/wc/nav/shell-gradient-presets.ts","src/wc/nav/shell-gradient.ts"],"sourcesContent":["/** Built-in shell chrome wash presets — 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 — 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 — 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 — 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 — 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 — 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"],"mappings":"AAGO,MAAMA,EAAgD,CAAC,OAAQ,OAAQ,UAAW,QAGlF,MAAMC,EAAsE,CACjF,OACA,UACA,QAIK,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,KAAM,OACNC,QAAS,UACTC,KAAM,QAGR,MAAMC,EAAmF,CACvFH,KAAM,mDACNC,QAAS,mDACTC,KAAM,sDAGR,MAAME,EAAoB,qBAEpB,SAAUC,EAA6BC,GAC3C,GAAIA,IAAW,OAAQ,OAAO,KAC9B,OAAOH,EAA2BG,EACpC,CAEM,SAAUC,EAAsBC,GACpC,OAAQb,EAAoCc,SAASD,EACvD,CASM,SAAUE,EACdF,GAEA,OAAOA,GAAS,MAAQD,EAAsBC,GAASA,EAAQX,CACjE,CAGM,SAAUc,EAAkCL,GAChD,MAAMM,EAAaF,EAA6BJ,GAChD,GAAIM,IAAe,OAAQ,MAAO,OAElC,MAAMC,EAAOR,EAA6BO,GAC1C,MAAO,mBAAmBR,8CAA8DS,SAC1F,CC1CO,MAAMC,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAKnC,MAAMC,EAAyB,MAWhC,SAAUC,EACdd,EAA8BT,GAE9B,OAAOc,EAAkCL,EAC3C,CAmBM,SAAUe,EAA4BC,GAC1C,MAAMC,SAAmBC,WAAWC,SAAW,YAAcD,WAAWC,OAASC,UACjF,IAAKH,EAAG,MAAO,CAAEI,MAAO,EAAGC,OAAQ,GAEnC,MAAMC,EAASN,EAAEO,eACjB,MAAO,CACLH,MAAOI,KAAKC,MAAMH,GAAQF,OAASJ,EAAEU,YACrCL,OAAQG,KAAKC,MAAMH,GAAQD,QAAUL,EAAEW,aAE3C,CASM,SAAUC,EAAkBC,GAChC,MAAO,GAAGL,KAAKC,MAAMI,EAAOT,YAAYI,KAAKC,MAAMI,EAAOR,WAC5D,C,SAEgBS,IACd,MAAO,KACT,CAEM,SAAUC,EAAyBC,GACvC,MAAO,IAAIR,KAAKC,MAAMO,QACxB,Q","ignoreList":[]}

package/dist/components/p-CTK82RIw.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-Cp86p-11.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.groupLabel="Shell gradient theme";this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"2500d305749e42bc266e27d724c6edfb412f557e"},t("div",{key:"57a2501b25b98f095967c54bf92d8b5590429cb8",class:"shell-gradient-picker",role:"radiogroup","aria-label":this.groupLabel},this.renderSwatch("none"),t("div",{key:"a550ee975345b382175850dbcad58dd336fab409",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
-//# sourceMappingURL=p-CTK82RIw.js.map