@ds-mo/ui 3.2.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +238 -20
- package/dist/angular/ds-app-shell.d.ts +1 -1
- package/dist/angular/ds-app-shell.js +3 -3
- package/dist/angular/ds-panel-tools.d.ts +1 -1
- package/dist/angular/ds-panel-tools.js +3 -3
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-app-shell.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-Cp86p-11.js → p-B4gGwfix.js} +2 -2
- package/dist/components/p-B4gGwfix.js.map +1 -0
- package/dist/components/{p-NkAPA-Dz.js → p-BKhG2xrW.js} +2 -2
- package/dist/components/{p-BFiaUYu7.js → p-BkvLF-hA.js} +2 -2
- package/dist/components/p-BmXUb8VH.js +2 -0
- package/dist/components/p-BmXUb8VH.js.map +1 -0
- package/dist/components/p-D0B9uDTP.js +2 -0
- package/dist/components/p-D0B9uDTP.js.map +1 -0
- package/dist/components/{p-DHjjwgku.js → p-DDcNrhWb.js} +2 -2
- package/dist/components/p-ORF34W29.js +2 -0
- package/dist/components/p-ORF34W29.js.map +1 -0
- package/dist/components/{p-8WTsyLQ9.js → p-drBA73M_.js} +2 -2
- package/dist/components/{p-DolYlDbY.js → p-mNNklnCo.js} +2 -2
- package/dist/components/p-oT42N7Zj.js +2 -0
- package/dist/components/p-oT42N7Zj.js.map +1 -0
- package/dist/docs/components.json +58 -75
- package/dist/lib/nav/badge-gradient-ring.d.ts +1 -1
- package/dist/lib/nav/index.d.ts +1 -1
- package/dist/lib/nav/index.js +51 -14
- package/dist/lib/nav/index.js.map +2 -2
- package/dist/lib/nav/shell-gradient-presets.d.ts +14 -2
- package/dist/lib/nav/shell-gradient.d.ts +3 -5
- package/dist/types/components/AppShell/AppShell.d.ts +3 -10
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/PanelTools/PanelTools.d.ts +11 -0
- package/dist/types/components/PanelTools/index.d.ts +1 -1
- package/dist/types/components/PanelTools/panel-tools-types.d.ts +1 -0
- package/dist/types/components/PanelTools/panel-tools-utils.d.ts +8 -1
- package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts +3 -0
- package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts +1 -1
- package/dist/types/components.d.ts +17 -28
- package/dist/types/nav/badge-gradient-ring.d.ts +1 -1
- package/dist/types/nav/index.d.ts +1 -1
- package/dist/types/nav/shell-gradient-presets.d.ts +14 -2
- package/dist/types/nav/shell-gradient.d.ts +3 -5
- package/dist/types/nav/shell-shortcuts.d.ts +1 -1
- package/dist/types/utils/shortcut-key.d.ts +3 -0
- package/package.json +1 -1
- package/dist/components/p-Bz3jyrDV.js +0 -2
- package/dist/components/p-Bz3jyrDV.js.map +0 -1
- package/dist/components/p-CTK82RIw.js +0 -2
- package/dist/components/p-CTK82RIw.js.map +0 -1
- package/dist/components/p-Cp86p-11.js.map +0 -1
- package/dist/components/p-DEgY_Lnb.js +0 -2
- package/dist/components/p-DEgY_Lnb.js.map +0 -1
- package/dist/components/p-DI8rHm9u.js +0 -2
- package/dist/components/p-DI8rHm9u.js.map +0 -1
- /package/dist/components/{p-NkAPA-Dz.js.map → p-BKhG2xrW.js.map} +0 -0
- /package/dist/components/{p-BFiaUYu7.js.map → p-BkvLF-hA.js.map} +0 -0
- /package/dist/components/{p-DHjjwgku.js.map → p-DDcNrhWb.js.map} +0 -0
- /package/dist/components/{p-8WTsyLQ9.js.map → p-drBA73M_.js.map} +0 -0
- /package/dist/components/{p-DolYlDbY.js.map → p-mNNklnCo.js.map} +0 -0
|
@@ -5,7 +5,7 @@ export interface GradientSurface {
|
|
|
5
5
|
chromeHost: HTMLElement;
|
|
6
6
|
positionVar: string;
|
|
7
7
|
}
|
|
8
|
-
/** Whether the badge sits under
|
|
8
|
+
/** Whether the badge sits under a shell with an active wash preset. */
|
|
9
9
|
export declare function isShellGradientActive(from: HTMLElement): boolean;
|
|
10
10
|
/** Bar or panel chrome surface that owns the shell gradient stack. */
|
|
11
11
|
export declare function findGradientSurface(from: HTMLElement): GradientSurface | null;
|
package/dist/lib/nav/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export type { NavChromeStyle } from './nav-chrome';
|
|
|
2
2
|
export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle, shouldResyncNavChromeStyle, } from './nav-chrome';
|
|
3
3
|
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';
|
|
4
4
|
export type { ShellNavRevealOrigin } from './shell-view-transition';
|
|
5
|
-
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,
|
|
5
|
+
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';
|
|
6
6
|
export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
|
|
7
7
|
export type { MenuPlacement } from '../components/Menu/menu-placement';
|
|
8
8
|
export { PANEL_NAV_USER_MENU_PLACEMENT, } from '../components/Menu/menu-placement';
|
package/dist/lib/nav/index.js
CHANGED
|
@@ -117,23 +117,59 @@ function runShellNavStyleRevealOnReady(transition, originEl) {
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
// src/wc/nav/shell-gradient-presets.ts
|
|
120
|
-
var SHELL_GRADIENT_PRESETS = [
|
|
120
|
+
var SHELL_GRADIENT_PRESETS = [
|
|
121
|
+
"none",
|
|
122
|
+
"cool",
|
|
123
|
+
"neutral",
|
|
124
|
+
"warm",
|
|
125
|
+
"fresh"
|
|
126
|
+
];
|
|
121
127
|
var DEFAULT_SHELL_GRADIENT_PRESET = "neutral";
|
|
122
128
|
var SHELL_GRADIENT_PRESET_LABELS = {
|
|
123
129
|
none: "None",
|
|
124
130
|
cool: "Cool",
|
|
125
131
|
neutral: "Neutral",
|
|
126
|
-
warm: "Warm"
|
|
132
|
+
warm: "Warm",
|
|
133
|
+
fresh: "Fresh"
|
|
127
134
|
};
|
|
128
|
-
var
|
|
129
|
-
cool:
|
|
130
|
-
|
|
131
|
-
|
|
135
|
+
var SHELL_GRADIENT_RECIPES = {
|
|
136
|
+
cool: {
|
|
137
|
+
opacity: 0.1,
|
|
138
|
+
stops: [
|
|
139
|
+
{ color: "var(--color-background-transparent)", position: 0 },
|
|
140
|
+
{ color: "var(--color-color-intent-blue-strong-background)", position: 100 }
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
neutral: {
|
|
144
|
+
opacity: 0.1,
|
|
145
|
+
stops: [
|
|
146
|
+
{ color: "var(--color-background-transparent)", position: 0 },
|
|
147
|
+
{ color: "var(--color-color-intent-grey-strong-background)", position: 100 }
|
|
148
|
+
]
|
|
149
|
+
},
|
|
150
|
+
warm: {
|
|
151
|
+
opacity: 0.1,
|
|
152
|
+
stops: [
|
|
153
|
+
{ color: "var(--color-background-transparent)", position: 0 },
|
|
154
|
+
{ color: "var(--color-color-intent-yellow-strong-background)", position: 100 }
|
|
155
|
+
]
|
|
156
|
+
},
|
|
157
|
+
fresh: {
|
|
158
|
+
opacity: 0.4,
|
|
159
|
+
stops: [
|
|
160
|
+
{ color: "var(--color-color-intent-cyan-faint-background)", position: 0 },
|
|
161
|
+
{ color: "var(--color-background-transparent)", position: 47 },
|
|
162
|
+
{ color: "var(--color-background-transparent)", position: 58 },
|
|
163
|
+
{ color: "var(--color-color-intent-red-faint-background)", position: 83 },
|
|
164
|
+
{ color: "var(--color-color-intent-pink-faint-background)", position: 100 }
|
|
165
|
+
]
|
|
166
|
+
}
|
|
132
167
|
};
|
|
133
168
|
var GRADIENT_GEOMETRY = "100% 100% at 0% 0%";
|
|
134
169
|
function shellGradientPresetStopToken(preset) {
|
|
135
170
|
if (preset === "none") return null;
|
|
136
|
-
|
|
171
|
+
const stops = SHELL_GRADIENT_RECIPES[preset].stops;
|
|
172
|
+
return stops[stops.length - 1]?.color ?? null;
|
|
137
173
|
}
|
|
138
174
|
function isShellGradientPreset(value) {
|
|
139
175
|
return SHELL_GRADIENT_PRESETS.includes(value);
|
|
@@ -144,8 +180,11 @@ function normalizeShellGradientPreset(value) {
|
|
|
144
180
|
function buildShellRadialGradientForPreset(preset) {
|
|
145
181
|
const normalized = normalizeShellGradientPreset(preset);
|
|
146
182
|
if (normalized === "none") return "none";
|
|
147
|
-
|
|
148
|
-
|
|
183
|
+
return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);
|
|
184
|
+
}
|
|
185
|
+
function buildShellRadialGradientFromStops(stops) {
|
|
186
|
+
const serialized = stops.map((stop) => `${stop.color} ${stop.position}%`).join(", ");
|
|
187
|
+
return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;
|
|
149
188
|
}
|
|
150
189
|
|
|
151
190
|
// src/wc/nav/shell-gradient.ts
|
|
@@ -155,9 +194,8 @@ var SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
|
|
|
155
194
|
var SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-position-bar";
|
|
156
195
|
var SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
|
|
157
196
|
var SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
return gradient;
|
|
197
|
+
function shellChromeLayerActive(preset) {
|
|
198
|
+
return normalizeShellGradientPreset(preset) !== "none";
|
|
161
199
|
}
|
|
162
200
|
function buildShellRadialGradient(preset = DEFAULT_SHELL_GRADIENT_PRESET) {
|
|
163
201
|
return buildShellRadialGradientForPreset(preset);
|
|
@@ -307,7 +345,7 @@ function barGradientPositionFromPanelWidth(panelWidthPx) {
|
|
|
307
345
|
var BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
|
|
308
346
|
function isShellGradientActive(from) {
|
|
309
347
|
const shell = from.closest("ds-app-shell");
|
|
310
|
-
return shell
|
|
348
|
+
return shell !== null && shell.getAttribute("gradient-preset") !== "none";
|
|
311
349
|
}
|
|
312
350
|
function findGradientSurface(from) {
|
|
313
351
|
const barHost = from.closest("ds-bar-nav");
|
|
@@ -379,7 +417,6 @@ export {
|
|
|
379
417
|
SHELL_BAR_NAV_VT_NAME,
|
|
380
418
|
SHELL_CHROME_SURFACE_POSITION_VAR,
|
|
381
419
|
SHELL_GRADIENT_IMAGE_VAR,
|
|
382
|
-
SHELL_GRADIENT_OPACITY,
|
|
383
420
|
SHELL_GRADIENT_OPACITY_VAR,
|
|
384
421
|
SHELL_GRADIENT_POSITION_BAR_VAR,
|
|
385
422
|
SHELL_GRADIENT_POSITION_PANEL_VAR,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,22 @@
|
|
|
1
|
-
/** Built-in shell chrome wash presets
|
|
2
|
-
export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
|
|
1
|
+
/** Built-in shell chrome wash presets. */
|
|
2
|
+
export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';
|
|
3
3
|
export declare const SHELL_GRADIENT_PRESETS: ShellGradientPreset[];
|
|
4
4
|
/** Wash presets shown after the `none` option in pickers. */
|
|
5
5
|
export declare const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[];
|
|
6
6
|
/** Default wash when `gradient-preset` is omitted. */
|
|
7
7
|
export declare const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset;
|
|
8
8
|
export declare const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string>;
|
|
9
|
+
export interface ShellGradientStop {
|
|
10
|
+
color: string;
|
|
11
|
+
position: number;
|
|
12
|
+
}
|
|
13
|
+
export interface ShellGradientRecipe {
|
|
14
|
+
opacity: number;
|
|
15
|
+
stops: readonly ShellGradientStop[];
|
|
16
|
+
}
|
|
9
17
|
export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null;
|
|
18
|
+
export declare function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null;
|
|
19
|
+
export declare function shellGradientPresetOpacity(preset: ShellGradientPreset): string;
|
|
10
20
|
export declare function isShellGradientPreset(value: string): value is ShellGradientPreset;
|
|
11
21
|
/**
|
|
12
22
|
* Coerce unknown/absent presets to the default. Runtime values escape the
|
|
@@ -18,3 +28,5 @@ export declare function isShellGradientPreset(value: string): value is ShellGrad
|
|
|
18
28
|
export declare function normalizeShellGradientPreset(value: string | null | undefined): ShellGradientPreset;
|
|
19
29
|
/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */
|
|
20
30
|
export declare function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string;
|
|
31
|
+
/** Build the production shell geometry from an ordered set of design-time stops. */
|
|
32
|
+
export declare function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
|
|
2
2
|
import type { ShellGradientPreset } from './shell-gradient-presets';
|
|
3
3
|
export type { ShellGradientPreset } from './shell-gradient-presets';
|
|
4
|
-
export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
|
|
4
|
+
export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from './shell-gradient-presets';
|
|
5
5
|
export declare const SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
|
|
6
6
|
export declare const SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
|
|
7
7
|
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
|
|
|
9
9
|
export declare const SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
|
|
10
10
|
/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */
|
|
11
11
|
export declare const SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
|
|
12
|
-
/** Layer opacity for the nav gradient wash. */
|
|
13
|
-
export declare const SHELL_GRADIENT_OPACITY = "0.1";
|
|
14
12
|
/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */
|
|
15
|
-
export declare function shellChromeLayerActive(
|
|
13
|
+
export declare function shellChromeLayerActive(preset: ShellGradientPreset): boolean;
|
|
16
14
|
/**
|
|
17
15
|
* Shell radial wash — same for panel and bar nav.
|
|
18
16
|
* Tokens follow `data-theme` (light/dark intent stops).
|
|
19
17
|
*/
|
|
20
18
|
export declare function buildShellRadialGradient(preset?: ShellGradientPreset): string;
|
|
21
|
-
/** Built-in radial image
|
|
19
|
+
/** Built-in radial image for the selected shell preset. */
|
|
22
20
|
export declare function shellGradientImage(preset?: ShellGradientPreset): string;
|
|
23
21
|
export interface ShellViewportDimensions {
|
|
24
22
|
width: number;
|
|
@@ -3,19 +3,12 @@ import { type ShellGradientPreset } from '../../nav/shell-gradient-presets';
|
|
|
3
3
|
export declare class AppShell {
|
|
4
4
|
/** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
|
|
5
5
|
navStyle: NavChromeStyle;
|
|
6
|
-
/** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */
|
|
7
|
-
gradient: boolean;
|
|
8
6
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*/
|
|
12
|
-
gradientSrc: string;
|
|
13
|
-
/**
|
|
14
|
-
* Built-in shell wash preset when `gradient` is true.
|
|
15
|
-
* `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
|
|
7
|
+
* Shell chrome wash preset. `none` renders solid chrome; the remaining
|
|
8
|
+
* presets use token-based washes that adapt to the active color theme.
|
|
16
9
|
*/
|
|
17
10
|
gradientPreset: ShellGradientPreset;
|
|
18
|
-
/** 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. */
|
|
11
|
+
/** 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. */
|
|
19
12
|
shortcutsEnabled: boolean;
|
|
20
13
|
el: HTMLElement;
|
|
21
14
|
private resizeObserver;
|
|
@@ -14,7 +14,7 @@ export declare class Badge {
|
|
|
14
14
|
background: string | undefined;
|
|
15
15
|
/**
|
|
16
16
|
* Ring samples the shell gradient stack (base fill + wash) instead of a flat
|
|
17
|
-
* `box-shadow`. Auto-enabled
|
|
17
|
+
* `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;
|
|
18
18
|
* set `gradient-background` to opt in/out explicitly.
|
|
19
19
|
*
|
|
20
20
|
* The attribute must NOT start with `on` — Stencil's setAccessor routes any
|
|
@@ -16,6 +16,11 @@ export declare class PanelTools {
|
|
|
16
16
|
itemsJson: string;
|
|
17
17
|
toolsLabel: string;
|
|
18
18
|
toolShortcutsLabel: string;
|
|
19
|
+
/**
|
|
20
|
+
* Optional localStorage key for the last active tool. The drawer always starts
|
|
21
|
+
* closed; only the tool identity is restored for continuity within this browser.
|
|
22
|
+
*/
|
|
23
|
+
storageKey: string;
|
|
19
24
|
/** Emitted when a rail button is toggled. Detail = { id, selected }. */
|
|
20
25
|
dsToolChange: EventEmitter<{
|
|
21
26
|
id: PanelToolsToolId;
|
|
@@ -35,10 +40,16 @@ export declare class PanelTools {
|
|
|
35
40
|
disconnectedCallback(): void;
|
|
36
41
|
private deferMotionEnable;
|
|
37
42
|
connectedCallback(): void;
|
|
43
|
+
componentWillLoad(): void;
|
|
38
44
|
openChanged(isOpen: boolean, wasOpen?: boolean): void;
|
|
39
45
|
activeToolChanged(): void;
|
|
46
|
+
storageKeyChanged(): void;
|
|
40
47
|
componentDidLoad(): void;
|
|
41
48
|
itemsChanged(): void;
|
|
49
|
+
private restoreLastActiveTool;
|
|
50
|
+
private persistLastActiveTool;
|
|
51
|
+
private clearPersistedTool;
|
|
52
|
+
private reconcileActiveTool;
|
|
42
53
|
private handleTransitionEnd;
|
|
43
54
|
/** Rail selection follows `open` immediately — independent of the slide animation. */
|
|
44
55
|
private isRailSelected;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
|
|
2
|
-
export { PANEL_TOOLS_FOOTER_TOOL_ID, PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
|
|
2
|
+
export { PANEL_TOOLS_FOOTER_TOOL_ID, PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_SHORTCUTS, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -6,6 +6,7 @@ export declare const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId;
|
|
|
6
6
|
/** Rail footer slot — flush to the bottom of the tools column. */
|
|
7
7
|
export declare const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId;
|
|
8
8
|
export declare const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string>;
|
|
9
|
+
export declare const PANEL_TOOLS_SHORTCUTS: Partial<Record<PanelToolsToolId, string>>;
|
|
9
10
|
export interface PanelToolsItem {
|
|
10
11
|
id: PanelToolsToolId;
|
|
11
12
|
/** Icon name for <ds-icon>. */
|
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
|
|
2
2
|
export declare function parsePanelToolsItems(items: PanelToolsItem[], itemsJson: string): PanelToolsItem[];
|
|
3
|
+
export declare function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[];
|
|
4
|
+
export declare function isPanelToolsToolId(value: string | null): value is PanelToolsToolId;
|
|
5
|
+
export declare function reconcilePanelToolsAvailability(items: PanelToolsItem[], open: boolean, activeTool: PanelToolsToolId | ''): {
|
|
6
|
+
open: boolean;
|
|
7
|
+
activeTool: PanelToolsToolId | '';
|
|
8
|
+
removedTool: PanelToolsToolId | '';
|
|
9
|
+
};
|
|
3
10
|
export declare function shouldResyncPanelToolsItems(prev: PanelToolsItem[], next: PanelToolsItem[]): boolean;
|
|
4
11
|
export type PanelToolsMotion = 'opening' | 'closing' | 'idle';
|
|
5
12
|
/** True when the drawer clip is fully closed — safe to skip painting slot content. */
|
|
@@ -5,7 +5,10 @@ export declare class ShellGradientPicker {
|
|
|
5
5
|
value: ShellGradientPreset;
|
|
6
6
|
groupLabel: string;
|
|
7
7
|
dsChange: EventEmitter<ShellGradientPreset>;
|
|
8
|
+
el: HTMLElement;
|
|
8
9
|
private handleSwatchSelect;
|
|
10
|
+
private focusSwatch;
|
|
11
|
+
private handleSwatchKeyDown;
|
|
9
12
|
private renderSwatch;
|
|
10
13
|
render(): any;
|
|
11
14
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
|
|
2
2
|
export type { ShellGradientPreset };
|
|
3
|
-
export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_WASH_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from '../../nav/shell-gradient-presets';
|
|
3
|
+
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';
|
|
4
4
|
//# sourceMappingURL=shell-gradient-swatch-types.d.ts.map
|
|
@@ -78,27 +78,17 @@ export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Too
|
|
|
78
78
|
export namespace Components {
|
|
79
79
|
interface DsAppShell {
|
|
80
80
|
/**
|
|
81
|
-
*
|
|
82
|
-
* @default false
|
|
83
|
-
*/
|
|
84
|
-
"gradient": boolean;
|
|
85
|
-
/**
|
|
86
|
-
* Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
|
|
81
|
+
* Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
|
|
87
82
|
* @default 'neutral'
|
|
88
83
|
*/
|
|
89
84
|
"gradientPreset": ShellGradientPreset;
|
|
90
|
-
/**
|
|
91
|
-
* Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
|
|
92
|
-
* @default ''
|
|
93
|
-
*/
|
|
94
|
-
"gradientSrc": string;
|
|
95
85
|
/**
|
|
96
86
|
* Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
|
|
97
87
|
* @default 'dashboard'
|
|
98
88
|
*/
|
|
99
89
|
"navStyle": NavChromeStyle;
|
|
100
90
|
/**
|
|
101
|
-
* 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.
|
|
91
|
+
* 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.
|
|
102
92
|
* @default true
|
|
103
93
|
*/
|
|
104
94
|
"shortcutsEnabled": boolean;
|
|
@@ -114,7 +104,7 @@ export namespace Components {
|
|
|
114
104
|
*/
|
|
115
105
|
"count": number;
|
|
116
106
|
/**
|
|
117
|
-
* Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled
|
|
107
|
+
* 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.
|
|
118
108
|
* @default false
|
|
119
109
|
*/
|
|
120
110
|
"gradientBackground": boolean;
|
|
@@ -946,6 +936,11 @@ export namespace Components {
|
|
|
946
936
|
* @default false
|
|
947
937
|
*/
|
|
948
938
|
"open": boolean;
|
|
939
|
+
/**
|
|
940
|
+
* Optional localStorage key for the last active tool. The drawer always starts closed; only the tool identity is restored for continuity within this browser.
|
|
941
|
+
* @default ''
|
|
942
|
+
*/
|
|
943
|
+
"storageKey": string;
|
|
949
944
|
/**
|
|
950
945
|
* @default 'Tool shortcuts'
|
|
951
946
|
*/
|
|
@@ -2136,27 +2131,17 @@ declare namespace LocalJSX {
|
|
|
2136
2131
|
|
|
2137
2132
|
interface DsAppShell {
|
|
2138
2133
|
/**
|
|
2139
|
-
*
|
|
2140
|
-
* @default false
|
|
2141
|
-
*/
|
|
2142
|
-
"gradient"?: boolean;
|
|
2143
|
-
/**
|
|
2144
|
-
* Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
|
|
2134
|
+
* Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
|
|
2145
2135
|
* @default 'neutral'
|
|
2146
2136
|
*/
|
|
2147
2137
|
"gradientPreset"?: ShellGradientPreset;
|
|
2148
|
-
/**
|
|
2149
|
-
* Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
|
|
2150
|
-
* @default ''
|
|
2151
|
-
*/
|
|
2152
|
-
"gradientSrc"?: string;
|
|
2153
2138
|
/**
|
|
2154
2139
|
* Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
|
|
2155
2140
|
* @default 'dashboard'
|
|
2156
2141
|
*/
|
|
2157
2142
|
"navStyle"?: NavChromeStyle;
|
|
2158
2143
|
/**
|
|
2159
|
-
* 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.
|
|
2144
|
+
* 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.
|
|
2160
2145
|
* @default true
|
|
2161
2146
|
*/
|
|
2162
2147
|
"shortcutsEnabled"?: boolean;
|
|
@@ -2172,7 +2157,7 @@ declare namespace LocalJSX {
|
|
|
2172
2157
|
*/
|
|
2173
2158
|
"count"?: number;
|
|
2174
2159
|
/**
|
|
2175
|
-
* Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled
|
|
2160
|
+
* 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.
|
|
2176
2161
|
* @default false
|
|
2177
2162
|
*/
|
|
2178
2163
|
"gradientBackground"?: boolean;
|
|
@@ -3073,6 +3058,11 @@ declare namespace LocalJSX {
|
|
|
3073
3058
|
* @default false
|
|
3074
3059
|
*/
|
|
3075
3060
|
"open"?: boolean;
|
|
3061
|
+
/**
|
|
3062
|
+
* Optional localStorage key for the last active tool. The drawer always starts closed; only the tool identity is restored for continuity within this browser.
|
|
3063
|
+
* @default ''
|
|
3064
|
+
*/
|
|
3065
|
+
"storageKey"?: string;
|
|
3076
3066
|
/**
|
|
3077
3067
|
* @default 'Tool shortcuts'
|
|
3078
3068
|
*/
|
|
@@ -3567,8 +3557,6 @@ declare namespace LocalJSX {
|
|
|
3567
3557
|
|
|
3568
3558
|
interface DsAppShellAttributes {
|
|
3569
3559
|
"navStyle": NavChromeStyle;
|
|
3570
|
-
"gradient": boolean;
|
|
3571
|
-
"gradientSrc": string;
|
|
3572
3560
|
"gradientPreset": ShellGradientPreset;
|
|
3573
3561
|
"shortcutsEnabled": boolean;
|
|
3574
3562
|
}
|
|
@@ -3797,6 +3785,7 @@ declare namespace LocalJSX {
|
|
|
3797
3785
|
"itemsJson": string;
|
|
3798
3786
|
"toolsLabel": string;
|
|
3799
3787
|
"toolShortcutsLabel": string;
|
|
3788
|
+
"storageKey": string;
|
|
3800
3789
|
}
|
|
3801
3790
|
interface DsRadioGroupAttributes {
|
|
3802
3791
|
"value": string;
|
|
@@ -5,7 +5,7 @@ export interface GradientSurface {
|
|
|
5
5
|
chromeHost: HTMLElement;
|
|
6
6
|
positionVar: string;
|
|
7
7
|
}
|
|
8
|
-
/** Whether the badge sits under
|
|
8
|
+
/** Whether the badge sits under a shell with an active wash preset. */
|
|
9
9
|
export declare function isShellGradientActive(from: HTMLElement): boolean;
|
|
10
10
|
/** Bar or panel chrome surface that owns the shell gradient stack. */
|
|
11
11
|
export declare function findGradientSurface(from: HTMLElement): GradientSurface | null;
|