@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.
Files changed (82) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/agent.json +238 -20
  3. package/dist/angular/ds-app-shell.d.ts +1 -1
  4. package/dist/angular/ds-app-shell.js +3 -3
  5. package/dist/angular/ds-panel-tools.d.ts +1 -1
  6. package/dist/angular/ds-panel-tools.js +3 -3
  7. package/dist/components/ds-app-shell.js +1 -1
  8. package/dist/components/ds-app-shell.js.map +1 -1
  9. package/dist/components/ds-badge.js +1 -1
  10. package/dist/components/ds-banner.js +1 -1
  11. package/dist/components/ds-bar-nav.js +1 -1
  12. package/dist/components/ds-bar-nav.js.map +1 -1
  13. package/dist/components/ds-button-unfilled.js +1 -1
  14. package/dist/components/ds-card-data-viz-donut.js +1 -1
  15. package/dist/components/ds-card-setting.js +1 -1
  16. package/dist/components/ds-chart-donut.js +1 -1
  17. package/dist/components/ds-chart-donut.js.map +1 -1
  18. package/dist/components/ds-menu.js +1 -1
  19. package/dist/components/ds-modal.js +1 -1
  20. package/dist/components/ds-panel-nav.js +1 -1
  21. package/dist/components/ds-panel-nav.js.map +1 -1
  22. package/dist/components/ds-panel-tools.js +1 -1
  23. package/dist/components/ds-panel-tools.js.map +1 -1
  24. package/dist/components/ds-select.js +1 -1
  25. package/dist/components/ds-shell-gradient-picker.js +1 -1
  26. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  27. package/dist/components/ds-tab-group-nav.js +1 -1
  28. package/dist/components/ds-tab-group.js +1 -1
  29. package/dist/components/ds-tooltip-data-viz.js +1 -1
  30. package/dist/components/ds-tooltip.js +1 -1
  31. package/dist/components/{p-Cp86p-11.js → p-B4gGwfix.js} +2 -2
  32. package/dist/components/p-B4gGwfix.js.map +1 -0
  33. package/dist/components/{p-NkAPA-Dz.js → p-BKhG2xrW.js} +2 -2
  34. package/dist/components/{p-BFiaUYu7.js → p-BkvLF-hA.js} +2 -2
  35. package/dist/components/p-BmXUb8VH.js +2 -0
  36. package/dist/components/p-BmXUb8VH.js.map +1 -0
  37. package/dist/components/p-D0B9uDTP.js +2 -0
  38. package/dist/components/p-D0B9uDTP.js.map +1 -0
  39. package/dist/components/{p-DHjjwgku.js → p-DDcNrhWb.js} +2 -2
  40. package/dist/components/p-ORF34W29.js +2 -0
  41. package/dist/components/p-ORF34W29.js.map +1 -0
  42. package/dist/components/{p-8WTsyLQ9.js → p-drBA73M_.js} +2 -2
  43. package/dist/components/{p-DolYlDbY.js → p-mNNklnCo.js} +2 -2
  44. package/dist/components/p-oT42N7Zj.js +2 -0
  45. package/dist/components/p-oT42N7Zj.js.map +1 -0
  46. package/dist/docs/components.json +58 -75
  47. package/dist/lib/nav/badge-gradient-ring.d.ts +1 -1
  48. package/dist/lib/nav/index.d.ts +1 -1
  49. package/dist/lib/nav/index.js +51 -14
  50. package/dist/lib/nav/index.js.map +2 -2
  51. package/dist/lib/nav/shell-gradient-presets.d.ts +14 -2
  52. package/dist/lib/nav/shell-gradient.d.ts +3 -5
  53. package/dist/types/components/AppShell/AppShell.d.ts +3 -10
  54. package/dist/types/components/Badge/Badge.d.ts +1 -1
  55. package/dist/types/components/PanelTools/PanelTools.d.ts +11 -0
  56. package/dist/types/components/PanelTools/index.d.ts +1 -1
  57. package/dist/types/components/PanelTools/panel-tools-types.d.ts +1 -0
  58. package/dist/types/components/PanelTools/panel-tools-utils.d.ts +8 -1
  59. package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts +3 -0
  60. package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts +1 -1
  61. package/dist/types/components.d.ts +17 -28
  62. package/dist/types/nav/badge-gradient-ring.d.ts +1 -1
  63. package/dist/types/nav/index.d.ts +1 -1
  64. package/dist/types/nav/shell-gradient-presets.d.ts +14 -2
  65. package/dist/types/nav/shell-gradient.d.ts +3 -5
  66. package/dist/types/nav/shell-shortcuts.d.ts +1 -1
  67. package/dist/types/utils/shortcut-key.d.ts +3 -0
  68. package/package.json +1 -1
  69. package/dist/components/p-Bz3jyrDV.js +0 -2
  70. package/dist/components/p-Bz3jyrDV.js.map +0 -1
  71. package/dist/components/p-CTK82RIw.js +0 -2
  72. package/dist/components/p-CTK82RIw.js.map +0 -1
  73. package/dist/components/p-Cp86p-11.js.map +0 -1
  74. package/dist/components/p-DEgY_Lnb.js +0 -2
  75. package/dist/components/p-DEgY_Lnb.js.map +0 -1
  76. package/dist/components/p-DI8rHm9u.js +0 -2
  77. package/dist/components/p-DI8rHm9u.js.map +0 -1
  78. /package/dist/components/{p-NkAPA-Dz.js.map → p-BKhG2xrW.js.map} +0 -0
  79. /package/dist/components/{p-BFiaUYu7.js.map → p-BkvLF-hA.js.map} +0 -0
  80. /package/dist/components/{p-DHjjwgku.js.map → p-DDcNrhWb.js.map} +0 -0
  81. /package/dist/components/{p-8WTsyLQ9.js.map → p-drBA73M_.js.map} +0 -0
  82. /package/dist/components/{p-DolYlDbY.js.map → p-mNNklnCo.js.map} +0 -0
@@ -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, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, shellChromeLayerActive, readShellViewportDimensions, } from './shell-gradient';
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';
@@ -1,12 +1,22 @@
1
- /** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
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,4 +28,6 @@ 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;
21
33
  //# sourceMappingURL=shell-gradient-presets.d.ts.map
@@ -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(gradient: boolean): boolean;
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 (`gradientSrc` on shell overrides). */
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;
@@ -1,6 +1,6 @@
1
1
  import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
2
2
  export type ShellShortcutAction = 'toggle-panel-nav' | 'close-panel-tools' | `open-tool:${PanelToolsToolId}`;
3
- /** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
3
+ /** Tool shortcut keys (K/A/S/M/N/?) toggle open/closed via `ds-panel-tools.activateTool`. */
4
4
  /** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
5
5
  export declare function isBareShellShortcutKey(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
6
6
  /** Skip shell shortcuts while typing in an editable control. */
@@ -0,0 +1,3 @@
1
+ /** Split a shortcut chord into the labels rendered on individual keycaps. */
2
+ export declare function shortcutKeyLabels(shortcut: string): string[];
3
+ //# sourceMappingURL=shortcut-key.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "3.2.1",
3
+ "version": "4.0.0",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=p-Bz3jyrDV.js.map
@@ -1 +0,0 @@
1
- {"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":[]}
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=p-CTK82RIw.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","groupLabel","handleSwatchSelect","preset","dsChange","emit","renderSwatch","h","key","selected","onDsSelect","e","stopPropagation","detail","render","Host","class","role","SHELL_GRADIENT_WASH_PRESETS","map"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* One row — same width footprint as menu items; 24px orbs + divider inside. */\n.shell-gradient-picker {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n min-height: var(--dimension-size-400);\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n}\n\n.shell-gradient-picker__divider {\n flex: 0 0 auto;\n align-self: center;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-300);\n background-color: var(--color-border-tertiary);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_WASH_PRESETS,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\n\n@Component({\n tag: 'ds-shell-gradient-picker',\n styleUrl: 'ShellGradientPicker.css',\n scoped: true,\n})\nexport class ShellGradientPicker {\n /** Active shell wash preset. */\n @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n @Prop() groupLabel: string = 'Shell gradient theme';\n\n @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n private handleSwatchSelect = (preset: ShellGradientPreset) => {\n if (preset === this.value) return;\n this.value = preset;\n this.dsChange.emit(preset);\n };\n\n private renderSwatch(preset: ShellGradientPreset) {\n return (\n <ds-shell-gradient-swatch\n key={preset}\n preset={preset}\n selected={this.value === preset}\n onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"shell-gradient-picker\"\n role=\"radiogroup\"\n aria-label={this.groupLabel}\n >\n {this.renderSwatch('none')}\n <div class=\"shell-gradient-picker__divider\" aria-hidden=\"true\" />\n {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4IAAA,MAAMA,EAAyB,IAAM,ye,MCYxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EACMF,KAAAG,WAAqB,uBAIrBH,KAAAI,mBAAsBC,IAC5B,GAAIA,IAAWL,KAAKC,MAAO,OAC3BD,KAAKC,MAAQI,EACbL,KAAKM,SAASC,KAAKF,EAAO,CAgC7B,CA7BS,YAAAG,CAAaH,GACnB,OACEI,EAAA,4BACEC,IAAKL,EACLA,OAAQA,EACRM,SAAUX,KAAKC,QAAUI,EACzBO,WAAaC,IACXA,EAAEC,kBACFd,KAAKI,mBAAmBS,EAAEE,OAAO,G,CAMzC,MAAAC,GACE,OACEP,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,OAAAC,IAAA,2CACEQ,MAAM,wBACNC,KAAK,aAAY,aACLnB,KAAKG,YAEhBH,KAAKQ,aAAa,QACnBC,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,iCAAgC,cAAa,SACvDE,EAA4BC,KAAIhB,GAAUL,KAAKQ,aAAaH,M","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","isInactive","ariaLabel","handleClick","dsSelect","emit","render","label","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","SHELL_GRADIENT_OPACITY","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n * Default: fill → border → interaction (hover/press)\n * Selected: fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 auto;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n --_swatch-inner-inset: calc(\n var(--dimension-stroke-width-025) + var(--dimension-space-025)\n );\n --_swatch-ring-bg: var(--color-background-primary);\n --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.shell-gradient-swatch {\n position: relative;\n box-sizing: border-box;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n padding: 0;\n border: none;\n border-radius: var(--dimension-radius-half);\n background: transparent;\n cursor: pointer;\n flex-shrink: 0;\n isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: inherit;\n pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n z-index: 1;\n background-color: var(--color-background-secondary);\n background-image: var(--_swatch-gradient-image);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 0 0;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n z-index: 2;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n z-index: 3;\n background: transparent;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion),\n background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n z-index: 4;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n z-index: 5;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n top: var(--_swatch-inner-inset);\n right: var(--_swatch-inner-inset);\n bottom: var(--_swatch-inner-inset);\n left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n .shell-gradient-swatch__fill,\n .shell-gradient-swatch__border,\n .shell-gradient-swatch__interaction,\n .shell-gradient-swatch__halo,\n .shell-gradient-swatch__stroke {\n transition: none;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\nimport { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-shell-gradient-swatch',\n styleUrl: 'ShellGradientSwatch.css',\n scoped: true,\n})\nexport class ShellGradientSwatch {\n /** Wash preset this orb previews. */\n @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** Selected — brand stroke + halo over inner fill/border/interaction stack. */\n @Prop({ reflect: true }) selected = false;\n\n @Prop() isInactive = false;\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n private handleClick = () => {\n if (this.isInactive) return;\n this.dsSelect.emit(this.preset);\n };\n\n render() {\n const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n return (\n <Host>\n <button\n type=\"button\"\n class={{\n 'shell-gradient-swatch': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': this.isInactive,\n 'shell-gradient-swatch--selected': this.selected,\n 'shell-gradient-swatch--none': this.preset === 'none',\n }}\n style={\n this.preset === 'none'\n ? undefined\n : {\n '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,\n }\n }\n aria-label={label}\n aria-pressed={this.selected ? 'true' : 'false'}\n disabled={this.isInactive}\n onClick={this.handleClick}\n >\n <span class=\"shell-gradient-swatch__fill\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__border\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__interaction\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__halo\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__stroke\" aria-hidden=\"true\" />\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"2HAAA,MAAMA,EAAyB,IAAM,+iL,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,WAAa,MAEcJ,KAAAK,UAA2B,KAItDL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,WAAY,OACrBJ,KAAKO,SAASC,KAAKR,KAAKC,OAAO,CAuClC,CApCC,MAAAQ,GACE,MAAMC,EAAQV,KAAKK,WAAaM,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,sBAAuBhB,KAAKI,WAC5B,kCAAmCJ,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,GAChC,aAEKV,EAAK,eACHV,KAAKG,SAAW,OAAS,QACvCkB,SAAUrB,KAAKI,WACfkB,QAAStB,KAAKM,aAEdM,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,SACxDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCAAoC,cAAa,SAC7DJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,U","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-BOQRM49Q.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a?.hasAttribute("gradient")===true}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half)}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
2
- //# sourceMappingURL=p-DEgY_Lnb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","as","emphasis","color"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n element: HTMLElement;\n chromeHost: HTMLElement;\n positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n // resolves where @stencil/core types are installed — 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",":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0;\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--selected) {\n --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n BADGE_GRADIENT_POSITION_VAR,\n isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n default: 'var(--color-background-secondary)',\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n @Element() el!: HTMLElement;\n\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"+\". */\n @Prop() max: number = 9;\n\n /** Surface context for the ring around dots. */\n @Prop() surface: BadgeSurface = 'default';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n * set `gradient-background` to opt in/out explicitly.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n @Prop() isSelected: boolean = false;\n\n /** Accessible label. Defaults to the count as a string. */\n @Prop() label: string | undefined;\n\n /** Bumps on resize/layout so render recomputes gradient ring position. */\n @State() private gradientLayoutVersion = 0;\n\n private gradientObserver: ResizeObserver | null = null;\n private gradientWindowListener: (() => void) | null = null;\n\n componentDidLoad() {\n this.enableShellGradientRingIfNeeded();\n }\n\n disconnectedCallback() {\n this.unbindGradientRingSync();\n }\n\n @Watch('gradientBackground')\n gradientBackgroundChanged() {\n this.bindGradientRingSync();\n }\n\n /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n private enableShellGradientRingIfNeeded() {\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n }\n\n if (this.gradientBackground) {\n this.bindGradientRingSync();\n }\n }\n\n private bindGradientRingSync() {\n this.unbindGradientRingSync();\n\n if (!this.gradientBackground) return;\n\n const update = () => {\n this.gradientLayoutVersion += 1;\n };\n update();\n\n this.gradientWindowListener = update;\n window.addEventListener('resize', update);\n\n if (typeof ResizeObserver !== 'undefined') {\n this.gradientObserver = new ResizeObserver(update);\n this.gradientObserver.observe(this.el);\n\n const shell = this.el.closest('ds-app-shell');\n if (shell) this.gradientObserver.observe(shell);\n\n const bar = this.el.closest('ds-bar-nav');\n if (bar) this.gradientObserver.observe(bar);\n\n const panel = this.el.closest('ds-panel-nav');\n if (panel) this.gradientObserver.observe(panel);\n }\n }\n\n private unbindGradientRingSync() {\n if (this.gradientWindowListener) {\n window.removeEventListener('resize', this.gradientWindowListener);\n this.gradientWindowListener = null;\n }\n\n this.gradientObserver?.disconnect();\n this.gradientObserver = null;\n }\n\n private ringHostStyle(ring: string): Record<string, string> {\n void this.gradientLayoutVersion;\n\n const style: Record<string, string> = { '--_badge-ring': ring };\n if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n return style;\n }\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? '+' : String(this.count);\n const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--selected': this.isSelected,\n 'badge--on-gradient-background': this.gradientBackground,\n }}\n aria-label={ariaLabel}\n style={this.ringHostStyle(ring)}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CCrBA,MAAMC,EAAW,IAAM,mjECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA0GvD,CAxGC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBxB,EAAsBmB,KAAKgB,IAAK,CAC9DhB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMY,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKgB,IAEnC,MAAMjC,EAAQiB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAID,EAAOiB,KAAKQ,iBAAiBa,QAAQtC,GAEzC,MAAMuC,EAAMtB,KAAKgB,GAAGhC,QAAQ,cAC5B,GAAIsC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAIuC,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKK,qBAAuBxB,EAAsBmB,KAAKgB,IAAK,OAAOY,EAGxEA,EAAMhD,GAA+B,MACrC,OAAOgD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,QAAU,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,IAAM+B,OAAOlC,KAAKE,OAC1D,MAAMiC,EAAYnC,KAAKoC,QAAUN,EAAQ,eAAiBI,OAAOlC,KAAKE,QACtE,MAAMyB,EAAO3B,KAAKqC,YAAclD,EAAaa,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB9B,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACW8B,EACZP,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASS,GAAG,OAAOvC,QAAQ,eAAewC,SAAQ,KAACC,MAAM,WACtDT,I","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{d as e}from"./p-BOQRM49Q.js";import{T as r,a}from"./p-8WTsyLQ9.js";import{r as h}from"./p-BWUTr_XN.js";import{r as d}from"./p-C1cBr-Ri.js";import{C as l}from"./p-Cx-ywr1e.js";const c=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const p={md:a.size400,sm:a.size300,xs:a.size200};let u=0;let f=0;let m=null;function g(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function v(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const b=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=r.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++f}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(m===this)m=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(a.space050,a.space050)}get sideOffsetPx(){return h(this.sideOffset,a.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return d(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return d(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return d(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){this.positionObserver?.disconnect();this.positionObserver=null;if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)v(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl)}hideInstant(){this.clearTimers();u=Date.now();if(m===this)m=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(m&&m!==this){m.hideInstant();t=true}m=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(m===this)m=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("div");i.className=`key-hint ${s}`;i.setAttribute("aria-hidden","true");i.appendChild(g({variant:"text-caption",emphasis:true,text:this.shortcutKey}));o.appendChild(i)};n("start");const e=g({variant:t,wrap:"nowrap",text:this.label});v(e);o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const d=Math.min(Math.max(a,r),window.innerWidth-s-r);const l=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(d)}px, ${Math.round(l)}px)`}render(){return s(o,{key:"e7b7ba3e135e931084ca3f792f0c525d226f53a9",style:{display:"contents"}},s("slot",{key:"d61ae230318f63cbdc6cbafd3ac0a69697a7d5f6"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return c()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),b)}break;case"ds-text":if(!customElements.get(n(t))){e()}break}}))}y();export{b as T,y as d};
2
- //# sourceMappingURL=p-DI8rHm9u.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","label","trim","hideInstant","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","disconnect","remove","reapplyLabelStyles","requestAnimationFrame","calculatePosition","ResizeObserver","observe","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","hint","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n flex-shrink: 0;\n min-width: max-content;\n max-width: none;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n.key-hint {\n width: var(--ds-control-icon, var(--dimension-size-200));\n height: var(--ds-control-icon, var(--dimension-size-200));\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n border-bottom-width: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-025);\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n wrap: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n if (opts.wrap) el.wrap = opts.wrap;\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n el.style.flexShrink = '0';\n el.style.minWidth = 'max-content';\n el.style.maxWidth = 'none';\n el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private positionObserver: ResizeObserver | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private mouseEnterHandler: () => void = () => this.show();\n private mouseLeaveHandler: () => void = () => this.hide();\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler: () => void = () => this.show();\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.schedulePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child) return;\n this.anchor = child;\n child.setAttribute('aria-describedby', this.tooltipId);\n child.addEventListener('mouseenter', this.mouseEnterHandler);\n child.addEventListener('mouseleave', this.mouseLeaveHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.anchor.removeAttribute('aria-describedby');\n this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private destroyPopup() {\n this.positionObserver?.disconnect();\n this.positionObserver = null;\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /**\n * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n */\n private schedulePosition() {\n if (!this.popupEl) return;\n\n const reapplyLabelStyles = () => {\n const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n if (label instanceof HTMLElement) styleTooltipLabel(label);\n };\n\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n });\n });\n\n this.positionObserver?.disconnect();\n this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n this.positionObserver.observe(this.popupEl);\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.schedulePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const hint = document.createElement('div');\n hint.className = `key-hint ${sc}`;\n hint.setAttribute('aria-hidden', 'true');\n hint.appendChild(\n createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),\n );\n inner.appendChild(hint);\n };\n\n appendShortcut('start');\n\n // ds-text is the layout box (metric-box + 2px control label-inset).\n // Inline styles required — see styleTooltipLabel.\n const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n styleTooltipLabel(label);\n inner.appendChild(label);\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const sideOffset = this.sideOffsetPx;\n const alignOffset = this.alignOffsetPx;\n const vpPad = this.viewportPadPx;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - th - sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'bottom':\n y = a.bottom + sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'left':\n x = a.left - tw - sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n case 'right':\n x = a.right + sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n }\n\n const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}