@ds-mo/ui 2.6.3 → 2.7.0

package/src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx

@@ -1,6 +1,6 @@
 import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 import {
-  SHELL_GRADIENT_PRESETS,
+  SHELL_GRADIENT_WASH_PRESETS,
   DEFAULT_SHELL_GRADIENT_PRESET,
   type ShellGradientPreset,
 } from '../ShellGradientSwatch/shell-gradient-swatch-types';
@@ -23,6 +23,20 @@ export class ShellGradientPicker {
     this.dsChange.emit(preset);
   };
 
+  private renderSwatch(preset: ShellGradientPreset) {
+    return (
+      <ds-shell-gradient-swatch
+        key={preset}
+        preset={preset}
+        selected={this.value === preset}
+        onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {
+          e.stopPropagation();
+          this.handleSwatchSelect(e.detail);
+        }}
+      />
+    );
+  }
+
   render() {
     return (
       <Host>
@@ -31,17 +45,9 @@ export class ShellGradientPicker {
           role="radiogroup"
           aria-label="Shell gradient theme"
         >
-          {SHELL_GRADIENT_PRESETS.map(preset => (
-            <ds-shell-gradient-swatch
-              key={preset}
-              preset={preset}
-              selected={this.value === preset}
-              onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {
-                e.stopPropagation();
-                this.handleSwatchSelect(e.detail);
-              }}
-            />
-          ))}
+          {this.renderSwatch('none')}
+          <div class="shell-gradient-picker__divider" aria-hidden="true" />
+          {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}
         </div>
       </Host>
     );

package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx

@@ -41,11 +41,16 @@ export class ShellGradientSwatch {
             'shell-gradient-swatch': true,
             'ds-focus-ring-inset': true,
             'shell-gradient-swatch--selected': this.selected,
+            'shell-gradient-swatch--none': this.preset === 'none',
           }}
-          style={{
-            '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),
-            '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,
-          }}
+          style={
+            this.preset === 'none'
+              ? undefined
+              : {
+                  '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),
+                  '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,
+                }
+          }
           aria-label={label}
           aria-pressed={this.selected ? 'true' : 'false'}
           disabled={this.inactive}

package/src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts

@@ -9,6 +9,7 @@ export type { ShellGradientPreset };
 export {
   DEFAULT_SHELL_GRADIENT_PRESET,
   SHELL_GRADIENT_PRESETS,
+  SHELL_GRADIENT_WASH_PRESETS,
   SHELL_GRADIENT_PRESET_LABELS,
   buildShellRadialGradientForPreset,
   isShellGradientPreset,

package/src/wc/components.d.ts

@@ -108,7 +108,7 @@ export namespace Components {
          */
         "gradient": boolean;
         /**
-          * Built-in shell wash preset when `gradient` is true. `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
           * @default DEFAULT_SHELL_GRADIENT_PRESET
          */
         "gradientPreset": ShellGradientPreset;
@@ -117,11 +117,6 @@ export namespace Components {
           * @default ''
          */
         "gradientSrc": string;
-        /**
-          * When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`.
-          * @default false
-         */
-        "grid": boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -1919,7 +1914,7 @@ declare namespace LocalJSX {
          */
         "gradient"?: boolean;
         /**
-          * Built-in shell wash preset when `gradient` is true. `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * Built-in shell wash preset when `gradient` is true. `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
           * @default DEFAULT_SHELL_GRADIENT_PRESET
          */
         "gradientPreset"?: ShellGradientPreset;
@@ -1928,11 +1923,6 @@ declare namespace LocalJSX {
           * @default ''
          */
         "gradientSrc"?: string;
-        /**
-          * When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`.
-          * @default false
-         */
-        "grid"?: boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -3075,7 +3065,6 @@ declare namespace LocalJSX {
     interface DsAppShellAttributes {
         "navStyle": NavChromeStyle;
         "gradient": boolean;
-        "grid": boolean;
         "gradientSrc": string;
         "gradientPreset": ShellGradientPreset;
         "shortcutsEnabled": boolean;

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

@@ -1,18 +1,26 @@
-/** Built-in shell chrome wash presets — cool (blue), neutral (grey), warm (yellow). */
-export type ShellGradientPreset = 'cool' | 'neutral' | 'warm';
+/** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
+export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
 
-export const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['cool', 'neutral', 'warm'];
+export const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['none', 'cool', 'neutral', 'warm'];
+
+/** Wash presets shown after the `none` option in pickers. */
+export const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [
+  'cool',
+  'neutral',
+  'warm',
+];
 
 /** Default wash when `gradient-preset` is omitted. */
 export const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';
 
 export const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {
+  none: 'None',
   cool: 'Cool',
   neutral: 'Neutral',
   warm: 'Warm',
 };
 
-const SHELL_GRADIENT_PRESET_STOP: Record<ShellGradientPreset, string> = {
+const SHELL_GRADIENT_PRESET_STOP: Record<Exclude<ShellGradientPreset, 'none'>, string> = {
   cool: 'var(--color-color-intent-blue-strong-background)',
   neutral: 'var(--color-color-intent-grey-strong-background)',
   warm: 'var(--color-color-intent-yellow-strong-background)',
@@ -20,7 +28,8 @@ const SHELL_GRADIENT_PRESET_STOP: Record<ShellGradientPreset, string> = {
 
 const GRADIENT_GEOMETRY = '100% 100% at 0% 0%';
 
-export function shellGradientPresetStopToken(preset: ShellGradientPreset): string {
+export function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {
+  if (preset === 'none') return null;
   return SHELL_GRADIENT_PRESET_STOP[preset];
 }
 
@@ -28,8 +37,10 @@ export function isShellGradientPreset(value: string): value is ShellGradientPres
   return (SHELL_GRADIENT_PRESETS as string[]).includes(value);
 }
 
-/** Radial wash for a preset — transparent at top-left into the intent stop. */
+/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */
 export function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {
+  if (preset === 'none') return 'none';
+
   const stop = shellGradientPresetStopToken(preset);
   return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, ${stop} 100%)`;
 }

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

@@ -26,9 +26,9 @@ export const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-posi
 /** Layer opacity for the nav gradient wash. */
 export const SHELL_GRADIENT_OPACITY = '0.1';
 
-/** Whether the shared chrome layer (bg + optional wash/grid) should mount. */
-export function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {
-  return gradient || grid;
+/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */
+export function shellChromeLayerActive(gradient: boolean): boolean {
+  return gradient;
 }
 
 /**

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

@@ -1 +0,0 @@
-{"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","inactive","handleClick","dsSelect","emit","render","label","ariaLabel","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","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\n:host {\n  display: inline-flex;\n  --_swatch-ring-bg: var(--color-background-primary);\n}\n\n.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-background-secondary);\n  cursor: pointer;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n/* Wash layer — matches shell chrome at 10% opacity over secondary surface. */\n.shell-gradient-swatch::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  border-radius: inherit;\n  background-image: var(--_swatch-gradient-image);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  opacity: var(--ds-shell-gradient-opacity, 0.1);\n  pointer-events: none;\n}\n\n/* Interaction layer — above wash, below focus ring. */\n.shell-gradient-swatch::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.shell-gradient-swatch:hover:not(:disabled)::after {\n  background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled)::after {\n  background: var(--color-interaction-pressed);\n}\n\n.shell-gradient-swatch:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Selected — inset 2px brand ring + inset 2px surface halo behind it. */\n.shell-gradient-swatch--selected::after {\n  box-shadow:\n    inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand),\n    inset 0 0 0 calc(var(--dimension-stroke-width-025) * 2) var(--_swatch-ring-bg);\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 state — brand ring with background offset (notification-dot pattern). */\n  @Prop({ reflect: true }) selected = false;\n\n  @Prop() inactive = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n  private handleClick = () => {\n    if (this.inactive) 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            'shell-gradient-swatch--selected': this.selected,\n          }}\n          style={{\n            '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n            '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,\n          }}\n          aria-label={label}\n          aria-pressed={this.selected ? 'true' : 'false'}\n          disabled={this.inactive}\n          onClick={this.handleClick}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sHAAA,MAAMA,EAAyB,IAAM,qiF,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,SAAW,MAMXJ,KAAAK,YAAc,KACpB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKM,SAASC,KAAKP,KAAKC,OAAO,CA2BlC,CAxBC,MAAAO,GACE,MAAMC,EAAQT,KAAKU,WAAaC,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,kCAAmChB,KAAKG,UAE1Cc,MAAO,CACL,2BAA4BC,EAAkClB,KAAKC,QACnE,8BAA+BkB,GAChC,aACWV,EAAK,eACHT,KAAKG,SAAW,OAAS,QACvCiB,SAAUpB,KAAKI,SACfiB,QAASrB,KAAKK,c","ignoreList":[]}

package/dist/components/p-DOMIPWaB.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{d}from"./p-Bknnbbb7.js";import{D as n,S as c}from"./p-DuI6g-ke.js";const l=()=>`.sc-ds-shell-gradient-picker-h{display:block}.shell-gradient-picker.sc-ds-shell-gradient-picker{display:flex;align-items:center;gap:var(--dimension-space-100);padding:var(--dimension-space-050) var(--dimension-space-075) var(--dimension-space-075)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}render(){return i(a,{key:"decc075b09071f721637d8462dd18c9f4be943e5"},i("div",{key:"9444dfe9b5a2d7d2f0b40cb46a41cb86eb1b8082",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},c.map((e=>i("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})))))}static get style(){return l()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);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(r(e))){customElements.define(r(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(e))){d()}break}}))}o();export{h as S,o as d};
-//# sourceMappingURL=p-DOMIPWaB.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","handleSwatchSelect","preset","dsChange","emit","render","h","Host","key","class","role","SHELL_GRADIENT_PRESETS","map","selected","onDsSelect","e","stopPropagation","detail"],"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}\n\n.shell-gradient-picker {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-050) var(--dimension-space-075) var(--dimension-space-075);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  SHELL_GRADIENT_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\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  render() {\n    return (\n      <Host>\n        <div\n          class=\"shell-gradient-picker\"\n          role=\"radiogroup\"\n          aria-label=\"Shell gradient theme\"\n        >\n          {SHELL_GRADIENT_PRESETS.map(preset => (\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        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uIAAA,MAAMA,EAAyB,IAAM,2P,MCYxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EAIMF,KAAAG,mBAAsBC,IAC5B,GAAIA,IAAWJ,KAAKC,MAAO,OAC3BD,KAAKC,MAAQG,EACbJ,KAAKK,SAASC,KAAKF,EAAO,CA0B7B,CAvBC,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,wBACNC,KAAK,aAAY,aACN,wBAEVC,EAAuBC,KAAIV,GAC1BI,EAAA,4BACEE,IAAKN,EACLA,OAAQA,EACRW,SAAUf,KAAKC,QAAUG,EACzBY,WAAaC,IACXA,EAAEC,kBACFlB,KAAKG,mBAAmBc,EAAEE,OAAO,O","ignoreList":[]}

package/dist/components/p-DuI6g-ke.js

@@ -1,2 +0,0 @@
-const n=["cool","neutral","warm"];const t="neutral";const o={cool:"Cool",neutral:"Neutral",warm:"Warm"};const r={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 a="100% 100% at 0% 0%";function s(n){return r[n]}function e(n){const t=s(n);return`radial-gradient(${a}, var(--color-background-transparent) 0%, ${t} 100%)`}const c="--ds-shell-gradient-image";const l="--ds-shell-gradient-size";const i="--ds-shell-gradient-position-panel";const u="--ds-shell-gradient-position-bar";const d="--ds-shell-gradient-opacity";const g="0.1";function h(n=t){return e(n)}function f(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 p(n){return`${Math.round(n.width)}px ${Math.round(n.height)}px`}function b(){return"0 0"}function w(n){return`${-Math.round(n)}px 0`}export{t as D,n as S,o as a,g as b,e as c,c as d,l as e,d as f,i as g,u as h,w as i,h as j,p as k,f as r,b as s};
-//# sourceMappingURL=p-DuI6g-ke.js.map

package/dist/components/p-DuI6g-ke.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SHELL_GRADIENT_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","cool","neutral","warm","SHELL_GRADIENT_PRESET_STOP","GRADIENT_GEOMETRY","shellGradientPresetStopToken","preset","buildShellRadialGradientForPreset","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 — cool (blue), neutral (grey), warm (yellow). */\nexport type ShellGradientPreset = 'cool' | 'neutral' | 'warm';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['cool', 'neutral', 'warm'];\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  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n};\n\nconst SHELL_GRADIENT_PRESET_STOP: Record<ShellGradientPreset, 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 {\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/** Radial wash for a preset — transparent at top-left into the intent stop. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const stop = shellGradientPresetStopToken(preset);\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 (bg + optional wash/grid) should mount. */\nexport function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {\n  return gradient || grid;\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,UAAW,QAG1E,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,QAAS,UACTC,KAAM,QAGR,MAAMC,EAAkE,CACtEH,KAAM,mDACNC,QAAS,mDACTC,KAAM,sDAGR,MAAME,EAAoB,qBAEpB,SAAUC,EAA6BC,GAC3C,OAAOH,EAA2BG,EACpC,CAOM,SAAUC,EAAkCD,GAChD,MAAME,EAAOH,EAA6BC,GAC1C,MAAO,mBAAmBF,8CAA8DI,SAC1F,CCjBO,MAAMC,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAKnC,MAAMC,EAAyB,MAWhC,SAAUC,EACdT,EAA8BR,GAE9B,OAAOS,EAAkCD,EAC3C,CAmBM,SAAUU,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":[]}