@ds-mo/ui 2.6.3 → 2.8.0

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

@@ -16,7 +16,7 @@ export class ShellGradientSwatch {
   /** Wash preset this orb previews. */
   @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;
 
-  /** Selected state — brand ring with background offset (notification-dot pattern). */
+  /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
   @Prop({ reflect: true }) selected = false;
 
   @Prop() inactive = false;
@@ -41,16 +41,27 @@ 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}
           onClick={this.handleClick}
-        />
+        >
+          <span class="shell-gradient-swatch__fill" aria-hidden="true" />
+          <span class="shell-gradient-swatch__border" aria-hidden="true" />
+          <span class="shell-gradient-swatch__interaction" aria-hidden="true" />
+          <span class="shell-gradient-swatch__halo" aria-hidden="true" />
+          <span class="shell-gradient-swatch__stroke" aria-hidden="true" />
+        </button>
       </Host>
     );
   }

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'
@@ -830,7 +825,7 @@ export namespace Components {
          */
         "preset": ShellGradientPreset1;
         /**
-          * Selected state — brand ring with background offset (notification-dot pattern).
+          * Selected — brand stroke + halo over inner fill/border/interaction stack.
           * @default false
          */
         "selected": boolean;
@@ -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'
@@ -2705,7 +2695,7 @@ declare namespace LocalJSX {
          */
         "preset"?: ShellGradientPreset1;
         /**
-          * Selected state — brand ring with background offset (notification-dot pattern).
+          * Selected — brand stroke + halo over inner fill/border/interaction stack.
           * @default false
          */
         "selected"?: boolean;
@@ -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/src/wc/utils/token-defaults.ts

@@ -16,6 +16,7 @@ import {
   effectAnimationDelayShort2,
   effectAnimationDurationMedium1,
   effectAnimationDurationShort3,
+  effectMotionShort2,
   effectMotionShort3,
 } from '@ds-mo/tokens/ts';
 
@@ -33,6 +34,7 @@ export const TOKEN_DEFAULTS = {
   panelWidthMd: dimensionPanelWidthMd,
   panelWidthLg: dimensionPanelWidthLg,
   menuWidthXs: dimensionMenuWidthXs,
+  motionShort2: effectMotionShort2,
   motionShort3: effectMotionShort3,
   animationDurationShort3: effectAnimationDurationShort3,
   animationDurationMedium1: effectAnimationDurationMedium1,

package/dist/components/p-B1BEEbOa.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as t,a as n,t as o}from"./index.js";import{d as r}from"./p-DOMIPWaB.js";import{d as a}from"./p-Bknnbbb7.js";import{a as d,T as c}from"./p-BHIptqCl.js";import{r as u}from"./p-BWUTr_XN.js";import{r as l}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:s,popupWidth:i,popupHeight:t,side:n,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:u}=e;let l=0;let h=0;switch(n){case"top":h=s.top-t-r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"bottom":h=s.bottom+r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"left":l=s.left-i-r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break;case"right":l=s.right+r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break}return{x:Math.min(Math.max(l,d),c-i-d),y:Math.min(Math.max(h,d),u-t-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-section--gradient-picker.sc-ds-menu{padding-bottom:var(--dimension-space-050)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const p=8;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=i(this,"dsClose");this.dsSelect=i(this,"dsSelect");this.dsGradientSelect=i(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return u(c.space050,c.space050)}get sideOffsetPx(){return u(this.sideOffset,c.space050)}get alignOffsetPx(){return u(this.alignOffset,0)}get popupFallbackWidthPx(){return u(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return u(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return l(c.motionShort3,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=p;const i=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(i)}};this.positionRetryRaf=requestAnimationFrame(i)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const s=this.el.querySelector(".menu-popup");if(!s)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth||this.popupFallbackWidthPx,popupHeight:s.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const s=e.findIndex((e=>e.isSelected&&!e.isInactive));const i=e.findIndex((e=>!e.isInactive));this.focusedIndex=s>=0?s:i>=0?i:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const s=e.target;const i=this.el.querySelector(".menu-popup");const t=this.resolvedAnchor;if(i?.contains(s)||t?.contains(s))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;const s=this.flatItems;const i=s.map(((e,s)=>({it:e,i:s}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!i.length)return;const t=i.indexOf(this.focusedIndex);const n=t<0?0:t;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n+1)%i.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n-1+i.length)%i.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[i.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const s=this.el.querySelectorAll(".menu-item");s[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return t(n,{style:{display:"contents"}});const e=this.activeSections;let s=0;const i={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)i["width"]=this.menuWidth;if(this.minWidth)i["min-width"]=this.minWidth;return t(n,{style:{display:"contents"}},t("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:i,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((i,n)=>t("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1,"menu-section--gradient-picker":m(i)},role:i.header?"group":undefined,"aria-label":i.header},i.header&&t("div",{class:"section-header","aria-hidden":"true"},t("span",{class:"text-body-small-emphasis section-label"},i.header)),m(i)?t("ds-shell-gradient-picker",{value:i.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):i.items.map((e=>{const i=s++;const n=this.focusedIndex===i;return t("button",{key:i,type:"button",class:{"menu-item":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":n&&this.focusRingVisible,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=i}},t("div",{class:"menu-item__content"},t("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&t("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&t("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},t("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),g)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}v();export{g as M,v as d};
-//# sourceMappingURL=p-B1BEEbOa.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","motionShort3","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","value","onDsChange","detail","isFocused","type","isDestructive","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n  popupWidth: number;\n  popupHeight: number;\n  side: MenuSide;\n  align: MenuAlign;\n  sideOffsetPx: number;\n  alignOffsetPx: number;\n  viewportPadPx: number;\n  viewportWidth: number;\n  viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n  const {\n    anchorRect: a,\n    popupWidth: pw,\n    popupHeight: ph,\n    side,\n    align,\n    sideOffsetPx,\n    alignOffsetPx,\n    viewportPadPx: vpPad,\n    viewportWidth,\n    viewportHeight,\n  } = input;\n\n  let x = 0;\n  let y = 0;\n\n  switch (side) {\n    case 'top':\n      y = a.top - ph - sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'bottom':\n      y = a.bottom + sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'left':\n      x = a.left - pw - sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n    case 'right':\n      x = a.right + sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n  }\n\n  return {\n    x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n    y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n  };\n}\n","import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n  header?: string;\n  variant: 'gradient-picker';\n  value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n  section: MenuSection,\n): section is MenuGradientPickerSection {\n  return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/focus-ring.css';\n\n/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: var(--dimension-menu-width-xs);\n  max-width: var(--dimension-panel-width-lg);\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n  box-shadow: var(--effect-shadow-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-075);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.section-label {\n  color: var(--color-foreground-secondary);\n}\n\n.menu-section--gradient-picker {\n  padding-bottom: var(--dimension-space-050);\n}\n\n/* ── Items ───────────────────────────────────────────────────────────────── */\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  color: inherit;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_selected-bg: var(--color-interaction-active);\n}\n\n.menu-item:has(.menu-item__subtext) {\n  align-items: flex-start;\n}\n\n/* Interaction layer — same ::after pattern as tabs / BarNav trigger */\n.menu-item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.menu-item--selected::after {\n  background: var(--_selected-bg);\n  transition: none;\n}\n\n.menu-item:hover:not(:disabled):not(.menu-item--selected)::after {\n  background: var(--_hover-bg);\n  transition: none;\n}\n\n.menu-item:active:not(:disabled)::after {\n  background: var(--_pressed-bg);\n  transition: none;\n}\n\n.menu-item--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.menu-item--destructive .menu-item__label {\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.menu-item__label {\n  color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n  color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n  color: var(--color-foreground-secondary);\n  line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  height: var(--dimension-size-250);\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-translucent);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n  background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n  position: absolute;\n  top: var(--dimension-space-025);\n  left: var(--dimension-space-025);\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  border-radius: 50%;\n  background-color: var(--color-foreground-on-bold-background-primary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n  transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\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  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a `gradient-picker` section swatch is chosen. */\n  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.listenersReady = true;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, this.closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\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 popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuGradientPickerSection(section) ? [] : section.items,\n    );\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    this.pos = computeMenuPosition({\n      anchorRect: anchorEl.getBoundingClientRect(),\n      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: this.alignOffsetPx,\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0\n      ? selectedIdx\n      : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => {\n      if (this.shouldRender && !this.closing) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  private handleGradientSelect(preset: ShellGradientPreset) {\n    this.dsGradientSelect.emit(preset);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{\n                'menu-section': true,\n                'menu-section--divided': si < sections.length - 1,\n                'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n              }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {isMenuGradientPickerSection(section) ? (\n                <ds-shell-gradient-picker\n                  value={section.value}\n                  onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n                    e.stopPropagation();\n                    this.handleGradientSelect(e.detail);\n                  }}\n                />\n              ) : (\n                section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'ds-focus-ring-inset': true,\n                      'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onMouseDown={() => { this.focusRingVisible = false; }}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              }))}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BHIptqCl.js

@@ -1,2 +0,0 @@
-const n="--dimension-iconography-md";const i="--dimension-iconography-sm";const o="--dimension-iconography-xs";const a="--dimension-menu-width-xs";const t="--dimension-panel-width-md";const e="--dimension-size-300";const s="--dimension-space-050";const c="--effect-animation-delay-long-2";const m="--effect-animation-delay-medium-1";const d="--effect-animation-duration-medium-1";const r="--effect-animation-duration-short-3";const h="--effect-motion-short-3";const l={space050:s,size300:e,iconographyMd:n,iconographySm:i,iconographyXs:o,panelWidthMd:t,menuWidthXs:a,motionShort3:h,animationDurationShort3:r,animationDurationMedium1:d,animationDelayMedium1:m,animationDelayLong2:c,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))"};const p={space050:`var(${s})`};export{l as T,p as a};
-//# sourceMappingURL=p-BHIptqCl.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dimensionIconographyMd","dimensionIconographySm","dimensionIconographyXs","dimensionMenuWidthXs","dimensionPanelWidthMd","dimensionSize300","dimensionSpace050","effectAnimationDelayLong2","effectAnimationDelayMedium1","effectAnimationDurationMedium1","effectAnimationDurationShort3","effectMotionShort3","TOKEN_DEFAULTS","space050","size300","iconographyMd","iconographySm","iconographyXs","panelWidthMd","menuWidthXs","motionShort3","animationDurationShort3","animationDurationMedium1","animationDelayMedium1","animationDelayLong2","menuFallbackHeight","tooltipFallbackWidth","TOKEN_CSS_LENGTHS"],"sources":["node_modules/@ds-mo/tokens/dist/index.mjs","src/wc/utils/token-defaults.ts"],"sourcesContent":["export const colorAlwaysDarkBackground = '--color-always-dark-background';\nexport const colorAlwaysDarkBorderBoldAi = '--color-always-dark-border-bold-ai';\nexport const colorAlwaysDarkBorderBoldBrand = '--color-always-dark-border-bold-brand';\nexport const colorAlwaysDarkBorderBoldCaution = '--color-always-dark-border-bold-caution';\nexport const colorAlwaysDarkBorderBoldGuide = '--color-always-dark-border-bold-guide';\nexport const colorAlwaysDarkBorderBoldNegative = '--color-always-dark-border-bold-negative';\nexport const colorAlwaysDarkBorderBoldNeutral = '--color-always-dark-border-bold-neutral';\nexport const colorAlwaysDarkBorderBoldPositive = '--color-always-dark-border-bold-positive';\nexport const colorAlwaysDarkBorderBoldWalkthrough = '--color-always-dark-border-bold-walkthrough';\nexport const colorAlwaysDarkBorderBoldWarning = '--color-always-dark-border-bold-warning';\nexport const colorAlwaysDarkBorderFaintAi = '--color-always-dark-border-faint-ai';\nexport const colorAlwaysDarkBorderFaintBrand = '--color-always-dark-border-faint-brand';\nexport const colorAlwaysDarkBorderFaintCaution = '--color-always-dark-border-faint-caution';\nexport const colorAlwaysDarkBorderFaintGuide = '--color-always-dark-border-faint-guide';\nexport const colorAlwaysDarkBorderFaintNegative = '--color-always-dark-border-faint-negative';\nexport const colorAlwaysDarkBorderFaintNeutral = '--color-always-dark-border-faint-neutral';\nexport const colorAlwaysDarkBorderFaintPositive = '--color-always-dark-border-faint-positive';\nexport const colorAlwaysDarkBorderFaintWalkthrough = '--color-always-dark-border-faint-walkthrough';\nexport const colorAlwaysDarkBorderFaintWarning = '--color-always-dark-border-faint-warning';\nexport const colorAlwaysDarkBorderMediumAi = '--color-always-dark-border-medium-ai';\nexport const colorAlwaysDarkBorderMediumBrand = '--color-always-dark-border-medium-brand';\nexport const colorAlwaysDarkBorderMediumCaution = '--color-always-dark-border-medium-caution';\nexport const colorAlwaysDarkBorderMediumGuide = '--color-always-dark-border-medium-guide';\nexport const colorAlwaysDarkBorderMediumNegative = '--color-always-dark-border-medium-negative';\nexport const colorAlwaysDarkBorderMediumNeutral = '--color-always-dark-border-medium-neutral';\nexport const colorAlwaysDarkBorderMediumPositive = '--color-always-dark-border-medium-positive';\nexport const colorAlwaysDarkBorderMediumWalkthrough = '--color-always-dark-border-medium-walkthrough';\nexport const colorAlwaysDarkBorderMediumWarning = '--color-always-dark-border-medium-warning';\nexport const colorAlwaysDarkBorderPrimary = '--color-always-dark-border-primary';\nexport const colorAlwaysDarkBorderSecondary = '--color-always-dark-border-secondary';\nexport const colorAlwaysDarkBorderStrongAi = '--color-always-dark-border-strong-ai';\nexport const colorAlwaysDarkBorderStrongBrand = '--color-always-dark-border-strong-brand';\nexport const colorAlwaysDarkBorderStrongCaution = '--color-always-dark-border-strong-caution';\nexport const colorAlwaysDarkBorderStrongGuide = '--color-always-dark-border-strong-guide';\nexport const colorAlwaysDarkBorderStrongNegative = '--color-always-dark-border-strong-negative';\nexport const colorAlwaysDarkBorderStrongNeutral = '--color-always-dark-border-strong-neutral';\nexport const colorAlwaysDarkBorderStrongPositive = '--color-always-dark-border-strong-positive';\nexport const colorAlwaysDarkBorderStrongWalkthrough = '--color-always-dark-border-strong-walkthrough';\nexport const colorAlwaysDarkBorderStrongWarning = '--color-always-dark-border-strong-warning';\nexport const colorAlwaysDarkBorderTertiary = '--color-always-dark-border-tertiary';\nexport const colorAlwaysDarkDivider = '--color-always-dark-divider';\nexport const colorAlwaysDarkForegroundAi = '--color-always-dark-foreground-ai';\nexport const colorAlwaysDarkForegroundBrand = '--color-always-dark-foreground-brand';\nexport const colorAlwaysDarkForegroundCaution = '--color-always-dark-foreground-caution';\nexport const colorAlwaysDarkForegroundGuide = '--color-always-dark-foreground-guide';\nexport const colorAlwaysDarkForegroundNegative = '--color-always-dark-foreground-negative';\nexport const colorAlwaysDarkForegroundNeutral = '--color-always-dark-foreground-neutral';\nexport const colorAlwaysDarkForegroundPositive = '--color-always-dark-foreground-positive';\nexport const colorAlwaysDarkForegroundPrimary = '--color-always-dark-foreground-primary';\nexport const colorAlwaysDarkForegroundQuaternary = '--color-always-dark-foreground-quaternary';\nexport const colorAlwaysDarkForegroundSecondary = '--color-always-dark-foreground-secondary';\nexport const colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';\nexport const colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';\nexport const colorAlwaysDarkForegroundWarning = '--color-always-dark-foreground-warning';\nexport const colorAlwaysDarkInteractionActive = '--color-always-dark-interaction-active';\nexport const colorAlwaysDarkInteractionFocus = '--color-always-dark-interaction-focus';\nexport const colorAlwaysDarkInteractionHover = '--color-always-dark-interaction-hover';\nexport const colorAlwaysDarkInteractionPressed = '--color-always-dark-interaction-pressed';\nexport const colorBackgroundBoldAi = '--color-background-bold-ai';\nexport const colorBackgroundBoldBrand = '--color-background-bold-brand';\nexport const colorBackgroundBoldCaution = '--color-background-bold-caution';\nexport const colorBackgroundBoldGuide = '--color-background-bold-guide';\nexport const colorBackgroundBoldNegative = '--color-background-bold-negative';\nexport const colorBackgroundBoldNeutral = '--color-background-bold-neutral';\nexport const colorBackgroundBoldPositive = '--color-background-bold-positive';\nexport const colorBackgroundBoldWalkthrough = '--color-background-bold-walkthrough';\nexport const colorBackgroundBoldWarning = '--color-background-bold-warning';\nexport const colorBackgroundFaintAi = '--color-background-faint-ai';\nexport const colorBackgroundFaintBrand = '--color-background-faint-brand';\nexport const colorBackgroundFaintCaution = '--color-background-faint-caution';\nexport const colorBackgroundFaintGuide = '--color-background-faint-guide';\nexport const colorBackgroundFaintNegative = '--color-background-faint-negative';\nexport const colorBackgroundFaintNeutral = '--color-background-faint-neutral';\nexport const colorBackgroundFaintPositive = '--color-background-faint-positive';\nexport const colorBackgroundFaintWalkthrough = '--color-background-faint-walkthrough';\nexport const colorBackgroundFaintWarning = '--color-background-faint-warning';\nexport const colorBackgroundMediumAi = '--color-background-medium-ai';\nexport const colorBackgroundMediumBrand = '--color-background-medium-brand';\nexport const colorBackgroundMediumCaution = '--color-background-medium-caution';\nexport const colorBackgroundMediumGuide = '--color-background-medium-guide';\nexport const colorBackgroundMediumNegative = '--color-background-medium-negative';\nexport const colorBackgroundMediumNeutral = '--color-background-medium-neutral';\nexport const colorBackgroundMediumPositive = '--color-background-medium-positive';\nexport const colorBackgroundMediumWalkthrough = '--color-background-medium-walkthrough';\nexport const colorBackgroundMediumWarning = '--color-background-medium-warning';\nexport const colorBackgroundPrimary = '--color-background-primary';\nexport const colorBackgroundSecondary = '--color-background-secondary';\nexport const colorBackgroundShade = '--color-background-shade';\nexport const colorBackgroundStrongAi = '--color-background-strong-ai';\nexport const colorBackgroundStrongBrand = '--color-background-strong-brand';\nexport const colorBackgroundStrongCaution = '--color-background-strong-caution';\nexport const colorBackgroundStrongGuide = '--color-background-strong-guide';\nexport const colorBackgroundStrongNegative = '--color-background-strong-negative';\nexport const colorBackgroundStrongNeutral = '--color-background-strong-neutral';\nexport const colorBackgroundStrongPositive = '--color-background-strong-positive';\nexport const colorBackgroundStrongWalkthrough = '--color-background-strong-walkthrough';\nexport const colorBackgroundStrongWarning = '--color-background-strong-warning';\nexport const colorBackgroundTranslucent = '--color-background-translucent';\nexport const colorBackgroundTransparent = '--color-background-transparent';\nexport const colorBorderBoldAi = '--color-border-bold-ai';\nexport const colorBorderBoldBrand = '--color-border-bold-brand';\nexport const colorBorderBoldCaution = '--color-border-bold-caution';\nexport const colorBorderBoldGuide = '--color-border-bold-guide';\nexport const colorBorderBoldNegative = '--color-border-bold-negative';\nexport const colorBorderBoldNeutral = '--color-border-bold-neutral';\nexport const colorBorderBoldPositive = '--color-border-bold-positive';\nexport const colorBorderBoldWalkthrough = '--color-border-bold-walkthrough';\nexport const colorBorderBoldWarning = '--color-border-bold-warning';\nexport const colorBorderFaintAi = '--color-border-faint-ai';\nexport const colorBorderFaintBrand = '--color-border-faint-brand';\nexport const colorBorderFaintCaution = '--color-border-faint-caution';\nexport const colorBorderFaintGuide = '--color-border-faint-guide';\nexport const colorBorderFaintNegative = '--color-border-faint-negative';\nexport const colorBorderFaintNeutral = '--color-border-faint-neutral';\nexport const colorBorderFaintPositive = '--color-border-faint-positive';\nexport const colorBorderFaintWalkthrough = '--color-border-faint-walkthrough';\nexport const colorBorderFaintWarning = '--color-border-faint-warning';\nexport const colorBorderMediumAi = '--color-border-medium-ai';\nexport const colorBorderMediumBrand = '--color-border-medium-brand';\nexport const colorBorderMediumCaution = '--color-border-medium-caution';\nexport const colorBorderMediumGuide = '--color-border-medium-guide';\nexport const colorBorderMediumNegative = '--color-border-medium-negative';\nexport const colorBorderMediumNeutral = '--color-border-medium-neutral';\nexport const colorBorderMediumPositive = '--color-border-medium-positive';\nexport const colorBorderMediumWalkthrough = '--color-border-medium-walkthrough';\nexport const colorBorderMediumWarning = '--color-border-medium-warning';\nexport const colorBorderOnBoldBackgroundPrimary = '--color-border-on-bold-background-primary';\nexport const colorBorderOnBoldBackgroundSecondary = '--color-border-on-bold-background-secondary';\nexport const colorBorderOnBoldBackgroundTertiary = '--color-border-on-bold-background-tertiary';\nexport const colorBorderOnMediumBackgroundPrimary = '--color-border-on-medium-background-primary';\nexport const colorBorderOnMediumBackgroundSecondary = '--color-border-on-medium-background-secondary';\nexport const colorBorderOnMediumBackgroundTertiary = '--color-border-on-medium-background-tertiary';\nexport const colorBorderOnStrongBackgroundPrimary = '--color-border-on-strong-background-primary';\nexport const colorBorderOnStrongBackgroundSecondary = '--color-border-on-strong-background-secondary';\nexport const colorBorderOnStrongBackgroundTertiary = '--color-border-on-strong-background-tertiary';\nexport const colorBorderOnTranslucentBackgroundPrimary = '--color-border-on-translucent-background-primary';\nexport const colorBorderOnTranslucentBackgroundSecondary = '--color-border-on-translucent-background-secondary';\nexport const colorBorderOnTranslucentBackgroundTertiary = '--color-border-on-translucent-background-tertiary';\nexport const colorBorderPrimary = '--color-border-primary';\nexport const colorBorderSecondary = '--color-border-secondary';\nexport const colorBorderStrongAi = '--color-border-strong-ai';\nexport const colorBorderStrongBrand = '--color-border-strong-brand';\nexport const colorBorderStrongCaution = '--color-border-strong-caution';\nexport const colorBorderStrongGuide = '--color-border-strong-guide';\nexport const colorBorderStrongNegative = '--color-border-strong-negative';\nexport const colorBorderStrongNeutral = '--color-border-strong-neutral';\nexport const colorBorderStrongPositive = '--color-border-strong-positive';\nexport const colorBorderStrongWalkthrough = '--color-border-strong-walkthrough';\nexport const colorBorderStrongWarning = '--color-border-strong-warning';\nexport const colorBorderTertiary = '--color-border-tertiary';\nexport const colorColorIntentBlueBoldBackground = '--color-color-intent-blue-bold-background';\nexport const colorColorIntentBlueBoldBorder = '--color-color-intent-blue-bold-border';\nexport const colorColorIntentBlueBoldForeground = '--color-color-intent-blue-bold-foreground';\nexport const colorColorIntentBlueFaintBackground = '--color-color-intent-blue-faint-background';\nexport const colorColorIntentBlueFaintBorder = '--color-color-intent-blue-faint-border';\nexport const colorColorIntentBlueFaintForeground = '--color-color-intent-blue-faint-foreground';\nexport const colorColorIntentBlueMediumBackground = '--color-color-intent-blue-medium-background';\nexport const colorColorIntentBlueMediumBorder = '--color-color-intent-blue-medium-border';\nexport const colorColorIntentBlueMediumForeground = '--color-color-intent-blue-medium-foreground';\nexport const colorColorIntentBlueStrongBackground = '--color-color-intent-blue-strong-background';\nexport const colorColorIntentBlueStrongBorder = '--color-color-intent-blue-strong-border';\nexport const colorColorIntentBlueStrongForeground = '--color-color-intent-blue-strong-foreground';\nexport const colorColorIntentCyanBoldBackground = '--color-color-intent-cyan-bold-background';\nexport const colorColorIntentCyanBoldBorder = '--color-color-intent-cyan-bold-border';\nexport const colorColorIntentCyanBoldForeground = '--color-color-intent-cyan-bold-foreground';\nexport const colorColorIntentCyanFaintBackground = '--color-color-intent-cyan-faint-background';\nexport const colorColorIntentCyanFaintBorder = '--color-color-intent-cyan-faint-border';\nexport const colorColorIntentCyanFaintForeground = '--color-color-intent-cyan-faint-foreground';\nexport const colorColorIntentCyanMediumBackground = '--color-color-intent-cyan-medium-background';\nexport const colorColorIntentCyanMediumBorder = '--color-color-intent-cyan-medium-border';\nexport const colorColorIntentCyanMediumForeground = '--color-color-intent-cyan-medium-foreground';\nexport const colorColorIntentCyanStrongBackground = '--color-color-intent-cyan-strong-background';\nexport const colorColorIntentCyanStrongBorder = '--color-color-intent-cyan-strong-border';\nexport const colorColorIntentCyanStrongForeground = '--color-color-intent-cyan-strong-foreground';\nexport const colorColorIntentGreenBoldBackground = '--color-color-intent-green-bold-background';\nexport const colorColorIntentGreenBoldBorder = '--color-color-intent-green-bold-border';\nexport const colorColorIntentGreenBoldForeground = '--color-color-intent-green-bold-foreground';\nexport const colorColorIntentGreenFaintBackground = '--color-color-intent-green-faint-background';\nexport const colorColorIntentGreenFaintBorder = '--color-color-intent-green-faint-border';\nexport const colorColorIntentGreenFaintForeground = '--color-color-intent-green-faint-foreground';\nexport const colorColorIntentGreenMediumBackground = '--color-color-intent-green-medium-background';\nexport const colorColorIntentGreenMediumBorder = '--color-color-intent-green-medium-border';\nexport const colorColorIntentGreenMediumForeground = '--color-color-intent-green-medium-foreground';\nexport const colorColorIntentGreenStrongBackground = '--color-color-intent-green-strong-background';\nexport const colorColorIntentGreenStrongBorder = '--color-color-intent-green-strong-border';\nexport const colorColorIntentGreenStrongForeground = '--color-color-intent-green-strong-foreground';\nexport const colorColorIntentGreyBoldBackground = '--color-color-intent-grey-bold-background';\nexport const colorColorIntentGreyBoldBorder = '--color-color-intent-grey-bold-border';\nexport const colorColorIntentGreyBoldForeground = '--color-color-intent-grey-bold-foreground';\nexport const colorColorIntentGreyFaintBackground = '--color-color-intent-grey-faint-background';\nexport const colorColorIntentGreyFaintBorder = '--color-color-intent-grey-faint-border';\nexport const colorColorIntentGreyFaintForeground = '--color-color-intent-grey-faint-foreground';\nexport const colorColorIntentGreyMediumBackground = '--color-color-intent-grey-medium-background';\nexport const colorColorIntentGreyMediumBorder = '--color-color-intent-grey-medium-border';\nexport const colorColorIntentGreyMediumForeground = '--color-color-intent-grey-medium-foreground';\nexport const colorColorIntentGreyStrongBackground = '--color-color-intent-grey-strong-background';\nexport const colorColorIntentGreyStrongBorder = '--color-color-intent-grey-strong-border';\nexport const colorColorIntentGreyStrongForeground = '--color-color-intent-grey-strong-foreground';\nexport const colorColorIntentInteractionOnBoldBackgroundFocus = '--color-color-intent-interaction-on-bold-background-focus';\nexport const colorColorIntentInteractionOnBoldBackgroundHover = '--color-color-intent-interaction-on-bold-background-hover';\nexport const colorColorIntentInteractionOnBoldBackgroundPressed = '--color-color-intent-interaction-on-bold-background-pressed';\nexport const colorColorIntentInteractionOnFaintBackgroundFocus = '--color-color-intent-interaction-on-faint-background-focus';\nexport const colorColorIntentInteractionOnFaintBackgroundHover = '--color-color-intent-interaction-on-faint-background-hover';\nexport const colorColorIntentInteractionOnFaintBackgroundPressed = '--color-color-intent-interaction-on-faint-background-pressed';\nexport const colorColorIntentInteractionOnMediumBackgroundFocus = '--color-color-intent-interaction-on-medium-background-focus';\nexport const colorColorIntentInteractionOnMediumBackgroundHover = '--color-color-intent-interaction-on-medium-background-hover';\nexport const colorColorIntentInteractionOnMediumBackgroundPressed = '--color-color-intent-interaction-on-medium-background-pressed';\nexport const colorColorIntentInteractionOnStrongBackgroundFocus = '--color-color-intent-interaction-on-strong-background-focus';\nexport const colorColorIntentInteractionOnStrongBackgroundHover = '--color-color-intent-interaction-on-strong-background-hover';\nexport const colorColorIntentInteractionOnStrongBackgroundPressed = '--color-color-intent-interaction-on-strong-background-pressed';\nexport const colorColorIntentMagentaBoldBackground = '--color-color-intent-magenta-bold-background';\nexport const colorColorIntentMagentaBoldBorder = '--color-color-intent-magenta-bold-border';\nexport const colorColorIntentMagentaBoldForeground = '--color-color-intent-magenta-bold-foreground';\nexport const colorColorIntentMagentaFaintBackground = '--color-color-intent-magenta-faint-background';\nexport const colorColorIntentMagentaFaintBorder = '--color-color-intent-magenta-faint-border';\nexport const colorColorIntentMagentaFaintForeground = '--color-color-intent-magenta-faint-foreground';\nexport const colorColorIntentMagentaMediumBackground = '--color-color-intent-magenta-medium-background';\nexport const colorColorIntentMagentaMediumBorder = '--color-color-intent-magenta-medium-border';\nexport const colorColorIntentMagentaMediumForeground = '--color-color-intent-magenta-medium-foreground';\nexport const colorColorIntentMagentaStrongBackground = '--color-color-intent-magenta-strong-background';\nexport const colorColorIntentMagentaStrongBorder = '--color-color-intent-magenta-strong-border';\nexport const colorColorIntentMagentaStrongForeground = '--color-color-intent-magenta-strong-foreground';\nexport const colorColorIntentOliveBoldBackground = '--color-color-intent-olive-bold-background';\nexport const colorColorIntentOliveBoldBorder = '--color-color-intent-olive-bold-border';\nexport const colorColorIntentOliveBoldForeground = '--color-color-intent-olive-bold-foreground';\nexport const colorColorIntentOliveFaintBackground = '--color-color-intent-olive-faint-background';\nexport const colorColorIntentOliveFaintBorder = '--color-color-intent-olive-faint-border';\nexport const colorColorIntentOliveFaintForeground = '--color-color-intent-olive-faint-foreground';\nexport const colorColorIntentOliveMediumBackground = '--color-color-intent-olive-medium-background';\nexport const colorColorIntentOliveMediumBorder = '--color-color-intent-olive-medium-border';\nexport const colorColorIntentOliveMediumForeground = '--color-color-intent-olive-medium-foreground';\nexport const colorColorIntentOliveStrongBackground = '--color-color-intent-olive-strong-background';\nexport const colorColorIntentOliveStrongBorder = '--color-color-intent-olive-strong-border';\nexport const colorColorIntentOliveStrongForeground = '--color-color-intent-olive-strong-foreground';\nexport const colorColorIntentOrangeBoldBackground = '--color-color-intent-orange-bold-background';\nexport const colorColorIntentOrangeBoldBorder = '--color-color-intent-orange-bold-border';\nexport const colorColorIntentOrangeBoldForeground = '--color-color-intent-orange-bold-foreground';\nexport const colorColorIntentOrangeFaintBackground = '--color-color-intent-orange-faint-background';\nexport const colorColorIntentOrangeFaintBorder = '--color-color-intent-orange-faint-border';\nexport const colorColorIntentOrangeFaintForeground = '--color-color-intent-orange-faint-foreground';\nexport const colorColorIntentOrangeMediumBackground = '--color-color-intent-orange-medium-background';\nexport const colorColorIntentOrangeMediumBorder = '--color-color-intent-orange-medium-border';\nexport const colorColorIntentOrangeMediumForeground = '--color-color-intent-orange-medium-foreground';\nexport const colorColorIntentOrangeStrongBackground = '--color-color-intent-orange-strong-background';\nexport const colorColorIntentOrangeStrongBorder = '--color-color-intent-orange-strong-border';\nexport const colorColorIntentOrangeStrongForeground = '--color-color-intent-orange-strong-foreground';\nexport const colorColorIntentPinkBoldBackground = '--color-color-intent-pink-bold-background';\nexport const colorColorIntentPinkBoldBorder = '--color-color-intent-pink-bold-border';\nexport const colorColorIntentPinkBoldForeground = '--color-color-intent-pink-bold-foreground';\nexport const colorColorIntentPinkFaintBackground = '--color-color-intent-pink-faint-background';\nexport const colorColorIntentPinkFaintBorder = '--color-color-intent-pink-faint-border';\nexport const colorColorIntentPinkFaintForeground = '--color-color-intent-pink-faint-foreground';\nexport const colorColorIntentPinkMediumBackground = '--color-color-intent-pink-medium-background';\nexport const colorColorIntentPinkMediumBorder = '--color-color-intent-pink-medium-border';\nexport const colorColorIntentPinkMediumForeground = '--color-color-intent-pink-medium-foreground';\nexport const colorColorIntentPinkStrongBackground = '--color-color-intent-pink-strong-background';\nexport const colorColorIntentPinkStrongBorder = '--color-color-intent-pink-strong-border';\nexport const colorColorIntentPinkStrongForeground = '--color-color-intent-pink-strong-foreground';\nexport const colorColorIntentPurpleBoldBackground = '--color-color-intent-purple-bold-background';\nexport const colorColorIntentPurpleBoldBorder = '--color-color-intent-purple-bold-border';\nexport const colorColorIntentPurpleBoldForeground = '--color-color-intent-purple-bold-foreground';\nexport const colorColorIntentPurpleFaintBackground = '--color-color-intent-purple-faint-background';\nexport const colorColorIntentPurpleFaintBorder = '--color-color-intent-purple-faint-border';\nexport const colorColorIntentPurpleFaintForeground = '--color-color-intent-purple-faint-foreground';\nexport const colorColorIntentPurpleMediumBackground = '--color-color-intent-purple-medium-background';\nexport const colorColorIntentPurpleMediumBorder = '--color-color-intent-purple-medium-border';\nexport const colorColorIntentPurpleMediumForeground = '--color-color-intent-purple-medium-foreground';\nexport const colorColorIntentPurpleStrongBackground = '--color-color-intent-purple-strong-background';\nexport const colorColorIntentPurpleStrongBorder = '--color-color-intent-purple-strong-border';\nexport const colorColorIntentPurpleStrongForeground = '--color-color-intent-purple-strong-foreground';\nexport const colorColorIntentRedBoldBackground = '--color-color-intent-red-bold-background';\nexport const colorColorIntentRedBoldBorder = '--color-color-intent-red-bold-border';\nexport const colorColorIntentRedBoldForeground = '--color-color-intent-red-bold-foreground';\nexport const colorColorIntentRedFaintBackground = '--color-color-intent-red-faint-background';\nexport const colorColorIntentRedFaintBorder = '--color-color-intent-red-faint-border';\nexport const colorColorIntentRedFaintForeground = '--color-color-intent-red-faint-foreground';\nexport const colorColorIntentRedMediumBackground = '--color-color-intent-red-medium-background';\nexport const colorColorIntentRedMediumBorder = '--color-color-intent-red-medium-border';\nexport const colorColorIntentRedMediumForeground = '--color-color-intent-red-medium-foreground';\nexport const colorColorIntentRedStrongBackground = '--color-color-intent-red-strong-background';\nexport const colorColorIntentRedStrongBorder = '--color-color-intent-red-strong-border';\nexport const colorColorIntentRedStrongForeground = '--color-color-intent-red-strong-foreground';\nexport const colorColorIntentTealBoldBackground = '--color-color-intent-teal-bold-background';\nexport const colorColorIntentTealBoldBorder = '--color-color-intent-teal-bold-border';\nexport const colorColorIntentTealBoldForeground = '--color-color-intent-teal-bold-foreground';\nexport const colorColorIntentTealFaintBackground = '--color-color-intent-teal-faint-background';\nexport const colorColorIntentTealFaintBorder = '--color-color-intent-teal-faint-border';\nexport const colorColorIntentTealFaintForeground = '--color-color-intent-teal-faint-foreground';\nexport const colorColorIntentTealMediumBackground = '--color-color-intent-teal-medium-background';\nexport const colorColorIntentTealMediumBorder = '--color-color-intent-teal-medium-border';\nexport const colorColorIntentTealMediumForeground = '--color-color-intent-teal-medium-foreground';\nexport const colorColorIntentTealStrongBackground = '--color-color-intent-teal-strong-background';\nexport const colorColorIntentTealStrongBorder = '--color-color-intent-teal-strong-border';\nexport const colorColorIntentTealStrongForeground = '--color-color-intent-teal-strong-foreground';\nexport const colorColorIntentYellowBoldBackground = '--color-color-intent-yellow-bold-background';\nexport const colorColorIntentYellowBoldBorder = '--color-color-intent-yellow-bold-border';\nexport const colorColorIntentYellowBoldForeground = '--color-color-intent-yellow-bold-foreground';\nexport const colorColorIntentYellowFaintBackground = '--color-color-intent-yellow-faint-background';\nexport const colorColorIntentYellowFaintBorder = '--color-color-intent-yellow-faint-border';\nexport const colorColorIntentYellowFaintForeground = '--color-color-intent-yellow-faint-foreground';\nexport const colorColorIntentYellowMediumBackground = '--color-color-intent-yellow-medium-background';\nexport const colorColorIntentYellowMediumBorder = '--color-color-intent-yellow-medium-border';\nexport const colorColorIntentYellowMediumForeground = '--color-color-intent-yellow-medium-foreground';\nexport const colorColorIntentYellowStrongBackground = '--color-color-intent-yellow-strong-background';\nexport const colorColorIntentYellowStrongBorder = '--color-color-intent-yellow-strong-border';\nexport const colorColorIntentYellowStrongForeground = '--color-color-intent-yellow-strong-foreground';\nexport const colorDataCategory1 = '--color-data-category-1';\nexport const colorDataCategory10 = '--color-data-category-10';\nexport const colorDataCategory11 = '--color-data-category-11';\nexport const colorDataCategory12 = '--color-data-category-12';\nexport const colorDataCategory2 = '--color-data-category-2';\nexport const colorDataCategory3 = '--color-data-category-3';\nexport const colorDataCategory4 = '--color-data-category-4';\nexport const colorDataCategory5 = '--color-data-category-5';\nexport const colorDataCategory6 = '--color-data-category-6';\nexport const colorDataCategory7 = '--color-data-category-7';\nexport const colorDataCategory8 = '--color-data-category-8';\nexport const colorDataCategory9 = '--color-data-category-9';\nexport const colorDataDivergingBlueOrange51 = '--color-data-diverging-blue-orange-5-1';\nexport const colorDataDivergingBlueOrange52 = '--color-data-diverging-blue-orange-5-2';\nexport const colorDataDivergingBlueOrange53 = '--color-data-diverging-blue-orange-5-3';\nexport const colorDataDivergingBlueOrange54 = '--color-data-diverging-blue-orange-5-4';\nexport const colorDataDivergingBlueOrange55 = '--color-data-diverging-blue-orange-5-5';\nexport const colorDataDivergingBlueOrange71 = '--color-data-diverging-blue-orange-7-1';\nexport const colorDataDivergingBlueOrange72 = '--color-data-diverging-blue-orange-7-2';\nexport const colorDataDivergingBlueOrange73 = '--color-data-diverging-blue-orange-7-3';\nexport const colorDataDivergingBlueOrange74 = '--color-data-diverging-blue-orange-7-4';\nexport const colorDataDivergingBlueOrange75 = '--color-data-diverging-blue-orange-7-5';\nexport const colorDataDivergingBlueOrange76 = '--color-data-diverging-blue-orange-7-6';\nexport const colorDataDivergingBlueOrange77 = '--color-data-diverging-blue-orange-7-7';\nexport const colorDataDivergingBlueOrange91 = '--color-data-diverging-blue-orange-9-1';\nexport const colorDataDivergingBlueOrange92 = '--color-data-diverging-blue-orange-9-2';\nexport const colorDataDivergingBlueOrange93 = '--color-data-diverging-blue-orange-9-3';\nexport const colorDataDivergingBlueOrange94 = '--color-data-diverging-blue-orange-9-4';\nexport const colorDataDivergingBlueOrange95 = '--color-data-diverging-blue-orange-9-5';\nexport const colorDataDivergingBlueOrange96 = '--color-data-diverging-blue-orange-9-6';\nexport const colorDataDivergingBlueOrange97 = '--color-data-diverging-blue-orange-9-7';\nexport const colorDataDivergingBlueOrange98 = '--color-data-diverging-blue-orange-9-8';\nexport const colorDataDivergingBlueOrange99 = '--color-data-diverging-blue-orange-9-9';\nexport const colorDataMisc1 = '--color-data-misc-1';\nexport const colorDataMisc2 = '--color-data-misc-2';\nexport const colorDataMisc3 = '--color-data-misc-3';\nexport const colorDataMisc4 = '--color-data-misc-4';\nexport const colorDataSequenceBlue21 = '--color-data-sequence-blue-2-1';\nexport const colorDataSequenceBlue22 = '--color-data-sequence-blue-2-2';\nexport const colorDataSequenceBlue31 = '--color-data-sequence-blue-3-1';\nexport const colorDataSequenceBlue32 = '--color-data-sequence-blue-3-2';\nexport const colorDataSequenceBlue33 = '--color-data-sequence-blue-3-3';\nexport const colorDataSequenceBlue41 = '--color-data-sequence-blue-4-1';\nexport const colorDataSequenceBlue42 = '--color-data-sequence-blue-4-2';\nexport const colorDataSequenceBlue43 = '--color-data-sequence-blue-4-3';\nexport const colorDataSequenceBlue44 = '--color-data-sequence-blue-4-4';\nexport const colorDataWinLossLoss = '--color-data-win-loss-loss';\nexport const colorDataWinLossWin = '--color-data-win-loss-win';\nexport const colorDataWinLossWinAlt = '--color-data-win-loss-win-alt';\nexport const colorDividerDivider = '--color-divider-divider';\nexport const colorDividerOnBoldBackground = '--color-divider-on-bold-background';\nexport const colorDividerOnMediumBackground = '--color-divider-on-medium-background';\nexport const colorDividerOnStrongBackground = '--color-divider-on-strong-background';\nexport const colorDividerOnTranslucentBackground = '--color-divider-on-translucent-background';\nexport const colorDriverStatusBackgroundDriving = '--color-driver-status-background-driving';\nexport const colorDriverStatusBackgroundOffDuty = '--color-driver-status-background-off-duty';\nexport const colorDriverStatusBackgroundOnDuty = '--color-driver-status-background-on-duty';\nexport const colorDriverStatusBackgroundPersonalConveyance = '--color-driver-status-background-personal-conveyance';\nexport const colorDriverStatusBackgroundYardMove = '--color-driver-status-background-yard-move';\nexport const colorDriverStatusForeground = '--color-driver-status-foreground';\nexport const colorDriverStatusInteractionFocus = '--color-driver-status-interaction-focus';\nexport const colorDriverStatusInteractionHover = '--color-driver-status-interaction-hover';\nexport const colorDriverStatusInteractionPressed = '--color-driver-status-interaction-pressed';\nexport const colorElevationHighlight = '--color-elevation-highlight';\nexport const colorElevationShadow = '--color-elevation-shadow';\nexport const colorEntityClusterMarkerBackground = '--color-entity-cluster-marker-background';\nexport const colorEntityClusterMarkerForeground = '--color-entity-cluster-marker-foreground';\nexport const colorEntityClusterMarkerInteractionFocus = '--color-entity-cluster-marker-interaction-focus';\nexport const colorEntityClusterMarkerInteractionHover = '--color-entity-cluster-marker-interaction-hover';\nexport const colorEntityClusterMarkerInteractionPressed = '--color-entity-cluster-marker-interaction-pressed';\nexport const colorEntityMarkerBackgroundIdling = '--color-entity-marker-background-idling';\nexport const colorEntityMarkerBackgroundImmobilized = '--color-entity-marker-background-immobilized';\nexport const colorEntityMarkerBackgroundInMotion = '--color-entity-marker-background-in-motion';\nexport const colorEntityMarkerBackgroundStale = '--color-entity-marker-background-stale';\nexport const colorEntityMarkerBackgroundStationary = '--color-entity-marker-background-stationary';\nexport const colorEntityMarkerForeground = '--color-entity-marker-foreground';\nexport const colorEntityMarkerInteractionFocus = '--color-entity-marker-interaction-focus';\nexport const colorEntityMarkerInteractionHover = '--color-entity-marker-interaction-hover';\nexport const colorEntityMarkerInteractionPressed = '--color-entity-marker-interaction-pressed';\nexport const colorForegroundBoldAi = '--color-foreground-bold-ai';\nexport const colorForegroundBoldBrand = '--color-foreground-bold-brand';\nexport const colorForegroundBoldCaution = '--color-foreground-bold-caution';\nexport const colorForegroundBoldGuide = '--color-foreground-bold-guide';\nexport const colorForegroundBoldNegative = '--color-foreground-bold-negative';\nexport const colorForegroundBoldNeutral = '--color-foreground-bold-neutral';\nexport const colorForegroundBoldPositive = '--color-foreground-bold-positive';\nexport const colorForegroundBoldWalkthrough = '--color-foreground-bold-walkthrough';\nexport const colorForegroundBoldWarning = '--color-foreground-bold-warning';\nexport const colorForegroundFaintAi = '--color-foreground-faint-ai';\nexport const colorForegroundFaintBrand = '--color-foreground-faint-brand';\nexport const colorForegroundFaintCaution = '--color-foreground-faint-caution';\nexport const colorForegroundFaintGuide = '--color-foreground-faint-guide';\nexport const colorForegroundFaintNegative = '--color-foreground-faint-negative';\nexport const colorForegroundFaintNeutral = '--color-foreground-faint-neutral';\nexport const colorForegroundFaintPositive = '--color-foreground-faint-positive';\nexport const colorForegroundFaintWalkthrough = '--color-foreground-faint-walkthrough';\nexport const colorForegroundFaintWarning = '--color-foreground-faint-warning';\nexport const colorForegroundMediumAi = '--color-foreground-medium-ai';\nexport const colorForegroundMediumBrand = '--color-foreground-medium-brand';\nexport const colorForegroundMediumCaution = '--color-foreground-medium-caution';\nexport const colorForegroundMediumGuide = '--color-foreground-medium-guide';\nexport const colorForegroundMediumNegative = '--color-foreground-medium-negative';\nexport const colorForegroundMediumNeutral = '--color-foreground-medium-neutral';\nexport const colorForegroundMediumPositive = '--color-foreground-medium-positive';\nexport const colorForegroundMediumWalkthrough = '--color-foreground-medium-walkthrough';\nexport const colorForegroundMediumWarning = '--color-foreground-medium-warning';\nexport const colorForegroundOnBoldBackgroundPrimary = '--color-foreground-on-bold-background-primary';\nexport const colorForegroundOnBoldBackgroundQuaternary = '--color-foreground-on-bold-background-quaternary';\nexport const colorForegroundOnBoldBackgroundSecondary = '--color-foreground-on-bold-background-secondary';\nexport const colorForegroundOnBoldBackgroundTertiary = '--color-foreground-on-bold-background-tertiary';\nexport const colorForegroundOnMediumBackgroundPrimary = '--color-foreground-on-medium-background-primary';\nexport const colorForegroundOnMediumBackgroundQuaternary = '--color-foreground-on-medium-background-quaternary';\nexport const colorForegroundOnMediumBackgroundSecondary = '--color-foreground-on-medium-background-secondary';\nexport const colorForegroundOnMediumBackgroundTertiary = '--color-foreground-on-medium-background-tertiary';\nexport const colorForegroundOnStrongBackgroundPrimary = '--color-foreground-on-strong-background-primary';\nexport const colorForegroundOnStrongBackgroundQuaternary = '--color-foreground-on-strong-background-quaternary';\nexport const colorForegroundOnStrongBackgroundSecondary = '--color-foreground-on-strong-background-secondary';\nexport const colorForegroundOnStrongBackgroundTertiary = '--color-foreground-on-strong-background-tertiary';\nexport const colorForegroundOnTranslucentBackgroundPrimary = '--color-foreground-on-translucent-background-primary';\nexport const colorForegroundOnTranslucentBackgroundQuaternary = '--color-foreground-on-translucent-background-quaternary';\nexport const colorForegroundOnTranslucentBackgroundSecondary = '--color-foreground-on-translucent-background-secondary';\nexport const colorForegroundOnTranslucentBackgroundTertiary = '--color-foreground-on-translucent-background-tertiary';\nexport const colorForegroundPrimary = '--color-foreground-primary';\nexport const colorForegroundQuaternary = '--color-foreground-quaternary';\nexport const colorForegroundSecondary = '--color-foreground-secondary';\nexport const colorForegroundStrongAi = '--color-foreground-strong-ai';\nexport const colorForegroundStrongBrand = '--color-foreground-strong-brand';\nexport const colorForegroundStrongCaution = '--color-foreground-strong-caution';\nexport const colorForegroundStrongGuide = '--color-foreground-strong-guide';\nexport const colorForegroundStrongNegative = '--color-foreground-strong-negative';\nexport const colorForegroundStrongNeutral = '--color-foreground-strong-neutral';\nexport const colorForegroundStrongPositive = '--color-foreground-strong-positive';\nexport const colorForegroundStrongWalkthrough = '--color-foreground-strong-walkthrough';\nexport const colorForegroundStrongWarning = '--color-foreground-strong-warning';\nexport const colorForegroundTertiary = '--color-foreground-tertiary';\nexport const colorInteractionActive = '--color-interaction-active';\nexport const colorInteractionFocus = '--color-interaction-focus';\nexport const colorInteractionHover = '--color-interaction-hover';\nexport const colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';\nexport const colorInteractionOnBoldBackgroundFocus = '--color-interaction-on-bold-background-focus';\nexport const colorInteractionOnBoldBackgroundHover = '--color-interaction-on-bold-background-hover';\nexport const colorInteractionOnBoldBackgroundPressed = '--color-interaction-on-bold-background-pressed';\nexport const colorInteractionOnMediumBackgroundActive = '--color-interaction-on-medium-background-active';\nexport const colorInteractionOnMediumBackgroundFocus = '--color-interaction-on-medium-background-focus';\nexport const colorInteractionOnMediumBackgroundHover = '--color-interaction-on-medium-background-hover';\nexport const colorInteractionOnMediumBackgroundPressed = '--color-interaction-on-medium-background-pressed';\nexport const colorInteractionOnStrongBackgroundActive = '--color-interaction-on-strong-background-active';\nexport const colorInteractionOnStrongBackgroundFocus = '--color-interaction-on-strong-background-focus';\nexport const colorInteractionOnStrongBackgroundHover = '--color-interaction-on-strong-background-hover';\nexport const colorInteractionOnStrongBackgroundPressed = '--color-interaction-on-strong-background-pressed';\nexport const colorInteractionOnTranslucentBackgroundActive = '--color-interaction-on-translucent-background-active';\nexport const colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-translucent-background-focus';\nexport const colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';\nexport const colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';\nexport const colorInteractionPressed = '--color-interaction-pressed';\nexport const colorInvertedBackground = '--color-inverted-background';\nexport const colorInvertedBorderBoldAi = '--color-inverted-border-bold-ai';\nexport const colorInvertedBorderBoldBrand = '--color-inverted-border-bold-brand';\nexport const colorInvertedBorderBoldCaution = '--color-inverted-border-bold-caution';\nexport const colorInvertedBorderBoldGuide = '--color-inverted-border-bold-guide';\nexport const colorInvertedBorderBoldNegative = '--color-inverted-border-bold-negative';\nexport const colorInvertedBorderBoldNeutral = '--color-inverted-border-bold-neutral';\nexport const colorInvertedBorderBoldPositive = '--color-inverted-border-bold-positive';\nexport const colorInvertedBorderBoldWalkthrough = '--color-inverted-border-bold-walkthrough';\nexport const colorInvertedBorderBoldWarning = '--color-inverted-border-bold-warning';\nexport const colorInvertedBorderFaintAi = '--color-inverted-border-faint-ai';\nexport const colorInvertedBorderFaintBrand = '--color-inverted-border-faint-brand';\nexport const colorInvertedBorderFaintCaution = '--color-inverted-border-faint-caution';\nexport const colorInvertedBorderFaintGuide = '--color-inverted-border-faint-guide';\nexport const colorInvertedBorderFaintNegative = '--color-inverted-border-faint-negative';\nexport const colorInvertedBorderFaintNeutral = '--color-inverted-border-faint-neutral';\nexport const colorInvertedBorderFaintPositive = '--color-inverted-border-faint-positive';\nexport const colorInvertedBorderFaintWalkthrough = '--color-inverted-border-faint-walkthrough';\nexport const colorInvertedBorderFaintWarning = '--color-inverted-border-faint-warning';\nexport const colorInvertedBorderMediumAi = '--color-inverted-border-medium-ai';\nexport const colorInvertedBorderMediumBrand = '--color-inverted-border-medium-brand';\nexport const colorInvertedBorderMediumCaution = '--color-inverted-border-medium-caution';\nexport const colorInvertedBorderMediumGuide = '--color-inverted-border-medium-guide';\nexport const colorInvertedBorderMediumNegative = '--color-inverted-border-medium-negative';\nexport const colorInvertedBorderMediumNeutral = '--color-inverted-border-medium-neutral';\nexport const colorInvertedBorderMediumPositive = '--color-inverted-border-medium-positive';\nexport const colorInvertedBorderMediumWalkthrough = '--color-inverted-border-medium-walkthrough';\nexport const colorInvertedBorderMediumWarning = '--color-inverted-border-medium-warning';\nexport const colorInvertedBorderPrimary = '--color-inverted-border-primary';\nexport const colorInvertedBorderSecondary = '--color-inverted-border-secondary';\nexport const colorInvertedBorderStrongAi = '--color-inverted-border-strong-ai';\nexport const colorInvertedBorderStrongBrand = '--color-inverted-border-strong-brand';\nexport const colorInvertedBorderStrongCaution = '--color-inverted-border-strong-caution';\nexport const colorInvertedBorderStrongGuide = '--color-inverted-border-strong-guide';\nexport const colorInvertedBorderStrongNegative = '--color-inverted-border-strong-negative';\nexport const colorInvertedBorderStrongNeutral = '--color-inverted-border-strong-neutral';\nexport const colorInvertedBorderStrongPositive = '--color-inverted-border-strong-positive';\nexport const colorInvertedBorderStrongWalkthrough = '--color-inverted-border-strong-walkthrough';\nexport const colorInvertedBorderStrongWarning = '--color-inverted-border-strong-warning';\nexport const colorInvertedBorderTertiary = '--color-inverted-border-tertiary';\nexport const colorInvertedDivider = '--color-inverted-divider';\nexport const colorInvertedForegroundAi = '--color-inverted-foreground-ai';\nexport const colorInvertedForegroundBrand = '--color-inverted-foreground-brand';\nexport const colorInvertedForegroundCaution = '--color-inverted-foreground-caution';\nexport const colorInvertedForegroundGuide = '--color-inverted-foreground-guide';\nexport const colorInvertedForegroundNegative = '--color-inverted-foreground-negative';\nexport const colorInvertedForegroundNeutral = '--color-inverted-foreground-neutral';\nexport const colorInvertedForegroundPositive = '--color-inverted-foreground-positive';\nexport const colorInvertedForegroundPrimary = '--color-inverted-foreground-primary';\nexport const colorInvertedForegroundQuaternary = '--color-inverted-foreground-quaternary';\nexport const colorInvertedForegroundSecondary = '--color-inverted-foreground-secondary';\nexport const colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';\nexport const colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';\nexport const colorInvertedForegroundWarning = '--color-inverted-foreground-warning';\nexport const colorInvertedInteractionActive = '--color-inverted-interaction-active';\nexport const colorInvertedInteractionFocus = '--color-inverted-interaction-focus';\nexport const colorInvertedInteractionHover = '--color-inverted-interaction-hover';\nexport const colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';\nexport const colorLocationMarkerBackgroundBrand = '--color-location-marker-background-brand';\nexport const colorLocationMarkerBackgroundCaution = '--color-location-marker-background-caution';\nexport const colorLocationMarkerBackgroundNegative = '--color-location-marker-background-negative';\nexport const colorLocationMarkerBackgroundNeutral = '--color-location-marker-background-neutral';\nexport const colorLocationMarkerBackgroundPositive = '--color-location-marker-background-positive';\nexport const colorLocationMarkerBackgroundWarning = '--color-location-marker-background-warning';\nexport const colorLocationMarkerForeground = '--color-location-marker-foreground';\nexport const colorLocationMarkerInteractionFocus = '--color-location-marker-interaction-focus';\nexport const colorLocationMarkerInteractionHover = '--color-location-marker-interaction-hover';\nexport const colorLocationMarkerInteractionPressed = '--color-location-marker-interaction-pressed';\nexport const colorMediaBackground = '--color-media-background';\nexport const colorMediaBorderPrimary = '--color-media-border-primary';\nexport const colorMediaBorderSecondary = '--color-media-border-secondary';\nexport const colorMediaBorderTertiary = '--color-media-border-tertiary';\nexport const colorMediaDivider = '--color-media-divider';\nexport const colorMediaForegroundPrimary = '--color-media-foreground-primary';\nexport const colorMediaForegroundQuaternary = '--color-media-foreground-quaternary';\nexport const colorMediaForegroundSecondary = '--color-media-foreground-secondary';\nexport const colorMediaForegroundTertiary = '--color-media-foreground-tertiary';\nexport const colorMediaInteractionActive = '--color-media-interaction-active';\nexport const colorMediaInteractionFocus = '--color-media-interaction-focus';\nexport const colorMediaInteractionHover = '--color-media-interaction-hover';\nexport const colorMediaInteractionPressed = '--color-media-interaction-pressed';\nexport const colorNavigationBackground = '--color-navigation-background';\nexport const colorNavigationBorderPrimary = '--color-navigation-border-primary';\nexport const colorNavigationBorderSecondary = '--color-navigation-border-secondary';\nexport const colorNavigationBorderTertiary = '--color-navigation-border-tertiary';\nexport const colorNavigationDivider = '--color-navigation-divider';\nexport const colorNavigationForegroundBrand = '--color-navigation-foreground-brand';\nexport const colorNavigationForegroundPrimary = '--color-navigation-foreground-primary';\nexport const colorNavigationForegroundQuaternary = '--color-navigation-foreground-quaternary';\nexport const colorNavigationForegroundSecondary = '--color-navigation-foreground-secondary';\nexport const colorNavigationForegroundTertiary = '--color-navigation-foreground-tertiary';\nexport const colorNavigationInteractionActive = '--color-navigation-interaction-active';\nexport const colorNavigationInteractionFocus = '--color-navigation-interaction-focus';\nexport const colorNavigationInteractionHover = '--color-navigation-interaction-hover';\nexport const colorNavigationInteractionPressed = '--color-navigation-interaction-pressed';\nexport const colorReferenceBlack0 = '--color-reference-black-0';\nexport const colorReferenceBlack10 = '--color-reference-black-10';\nexport const colorReferenceBlack100 = '--color-reference-black-100';\nexport const colorReferenceBlack15 = '--color-reference-black-15';\nexport const colorReferenceBlack20 = '--color-reference-black-20';\nexport const colorReferenceBlack25 = '--color-reference-black-25';\nexport const colorReferenceBlack30 = '--color-reference-black-30';\nexport const colorReferenceBlack35 = '--color-reference-black-35';\nexport const colorReferenceBlack40 = '--color-reference-black-40';\nexport const colorReferenceBlack45 = '--color-reference-black-45';\nexport const colorReferenceBlack5 = '--color-reference-black-5';\nexport const colorReferenceBlack50 = '--color-reference-black-50';\nexport const colorReferenceBlack55 = '--color-reference-black-55';\nexport const colorReferenceBlack60 = '--color-reference-black-60';\nexport const colorReferenceBlack65 = '--color-reference-black-65';\nexport const colorReferenceBlack70 = '--color-reference-black-70';\nexport const colorReferenceBlack75 = '--color-reference-black-75';\nexport const colorReferenceBlack80 = '--color-reference-black-80';\nexport const colorReferenceBlack85 = '--color-reference-black-85';\nexport const colorReferenceBlack90 = '--color-reference-black-90';\nexport const colorReferenceBlack95 = '--color-reference-black-95';\nexport const colorReferenceDarkBlue250L27C05Faint = '--color-reference-dark-blue-250-l27-c05-faint';\nexport const colorReferenceDarkBlue250L50C17Medium = '--color-reference-dark-blue-250-l50-c17-medium';\nexport const colorReferenceDarkBlue250L65C20Bold = '--color-reference-dark-blue-250-l65-c20-bold';\nexport const colorReferenceDarkBlue250L91C05Strong = '--color-reference-dark-blue-250-l91-c05-strong';\nexport const colorReferenceDarkCyan215L27C05Faint = '--color-reference-dark-cyan-215-l27-c05-faint';\nexport const colorReferenceDarkCyan215L50C11Medium = '--color-reference-dark-cyan-215-l50-c11-medium';\nexport const colorReferenceDarkCyan215L70C15Bold = '--color-reference-dark-cyan-215-l70-c15-bold';\nexport const colorReferenceDarkCyan215L92C07Strong = '--color-reference-dark-cyan-215-l92-c07-strong';\nexport const colorReferenceDarkGreen145L27C05Faint = '--color-reference-dark-green-145-l27-c05-faint';\nexport const colorReferenceDarkGreen145L50C17Medium = '--color-reference-dark-green-145-l50-c17-medium';\nexport const colorReferenceDarkGreen145L70C19Bold = '--color-reference-dark-green-145-l70-c19-bold';\nexport const colorReferenceDarkGreen145L93C06Strong = '--color-reference-dark-green-145-l93-c06-strong';\nexport const colorReferenceDarkMagenta325L28C05Faint = '--color-reference-dark-magenta-325-l28-c05-faint';\nexport const colorReferenceDarkMagenta325L51C17Medium = '--color-reference-dark-magenta-325-l51-c17-medium';\nexport const colorReferenceDarkMagenta325L67C20Bold = '--color-reference-dark-magenta-325-l67-c20-bold';\nexport const colorReferenceDarkMagenta325L90C08Strong = '--color-reference-dark-magenta-325-l90-c08-strong';\nexport const colorReferenceDarkOlive115L27C05Faint = '--color-reference-dark-olive-115-l27-c05-faint';\nexport const colorReferenceDarkOlive115L51C13Medium = '--color-reference-dark-olive-115-l51-c13-medium';\nexport const colorReferenceDarkOlive115L75C19Bold = '--color-reference-dark-olive-115-l75-c19-bold';\nexport const colorReferenceDarkOlive115L93C05Strong = '--color-reference-dark-olive-115-l93-c05-strong';\nexport const colorReferenceDarkOrange60L28C05Faint = '--color-reference-dark-orange-60-l28-c05-faint';\nexport const colorReferenceDarkOrange60L51C13Medium = '--color-reference-dark-orange-60-l51-c13-medium';\nexport const colorReferenceDarkOrange60L75C20Bold = '--color-reference-dark-orange-60-l75-c20-bold';\nexport const colorReferenceDarkOrange60L92C06Strong = '--color-reference-dark-orange-60-l92-c06-strong';\nexport const colorReferenceDarkPink0L28C05Faint = '--color-reference-dark-pink-0-l28-c05-faint';\nexport const colorReferenceDarkPink0L52C17Medium = '--color-reference-dark-pink-0-l52-c17-medium';\nexport const colorReferenceDarkPink0L68C20Bold = '--color-reference-dark-pink-0-l68-c20-bold';\nexport const colorReferenceDarkPink0L92C05Strong = '--color-reference-dark-pink-0-l92-c05-strong';\nexport const colorReferenceDarkPurple290L28C05Faint = '--color-reference-dark-purple-290-l28-c05-faint';\nexport const colorReferenceDarkPurple290L52C17Medium = '--color-reference-dark-purple-290-l52-c17-medium';\nexport const colorReferenceDarkPurple290L67C20Bold = '--color-reference-dark-purple-290-l67-c20-bold';\nexport const colorReferenceDarkPurple290L92C05Strong = '--color-reference-dark-purple-290-l92-c05-strong';\nexport const colorReferenceDarkRed30L28C05Faint = '--color-reference-dark-red-30-l28-c05-faint';\nexport const colorReferenceDarkRed30L51C17Medium = '--color-reference-dark-red-30-l51-c17-medium';\nexport const colorReferenceDarkRed30L70C20Bold = '--color-reference-dark-red-30-l70-c20-bold';\nexport const colorReferenceDarkRed30L91C06Strong = '--color-reference-dark-red-30-l91-c06-strong';\nexport const colorReferenceDarkTeal180L27C05Faint = '--color-reference-dark-teal-180-l27-c05-faint';\nexport const colorReferenceDarkTeal180L50C12Medium = '--color-reference-dark-teal-180-l50-c12-medium';\nexport const colorReferenceDarkTeal180L70C15Bold = '--color-reference-dark-teal-180-l70-c15-bold';\nexport const colorReferenceDarkTeal180L93C08Strong = '--color-reference-dark-teal-180-l93-c08-strong';\nexport const colorReferenceDarkYellow85L28C05Faint = '--color-reference-dark-yellow-85-l28-c05-faint';\nexport const colorReferenceDarkYellow85L51C12Medium = '--color-reference-dark-yellow-85-l51-c12-medium';\nexport const colorReferenceDarkYellow85L80C18Bold = '--color-reference-dark-yellow-85-l80-c18-bold';\nexport const colorReferenceDarkYellow85L93C05Strong = '--color-reference-dark-yellow-85-l93-c05-strong';\nexport const colorReferenceGreyL18 = '--color-reference-grey-l18';\nexport const colorReferenceGreyL20 = '--color-reference-grey-l20';\nexport const colorReferenceGreyL27DarkFaint = '--color-reference-grey-l27-dark-faint';\nexport const colorReferenceGreyL30LightStrong = '--color-reference-grey-l30-light-strong';\nexport const colorReferenceGreyL50DarkMedium = '--color-reference-grey-l50-dark-medium';\nexport const colorReferenceGreyL51LightBold = '--color-reference-grey-l51-light-bold';\nexport const colorReferenceGreyL65DarkBold = '--color-reference-grey-l65-dark-bold';\nexport const colorReferenceGreyL75LightMedium = '--color-reference-grey-l75-light-medium';\nexport const colorReferenceGreyL91DarkStrong = '--color-reference-grey-l91-dark-strong';\nexport const colorReferenceGreyL93LightFaint = '--color-reference-grey-l93-light-faint';\nexport const colorReferenceGreyL98 = '--color-reference-grey-l98';\nexport const colorReferenceLightBlue250L33C09Strong = '--color-reference-light-blue-250-l33-c09-strong';\nexport const colorReferenceLightBlue250L50C18Bold = '--color-reference-light-blue-250-l50-c18-bold';\nexport const colorReferenceLightBlue250L70C18Medium = '--color-reference-light-blue-250-l70-c18-medium';\nexport const colorReferenceLightBlue250L92C04Faint = '--color-reference-light-blue-250-l92-c04-faint';\nexport const colorReferenceLightCyan215L30C07Strong = '--color-reference-light-cyan-215-l30-c07-strong';\nexport const colorReferenceLightCyan215L51C11Bold = '--color-reference-light-cyan-215-l51-c11-bold';\nexport const colorReferenceLightCyan215L75C17Medium = '--color-reference-light-cyan-215-l75-c17-medium';\nexport const colorReferenceLightCyan215L94C04Faint = '--color-reference-light-cyan-215-l94-c04-faint';\nexport const colorReferenceLightGreen145L35C13Strong = '--color-reference-light-green-145-l35-c13-strong';\nexport const colorReferenceLightGreen145L50C19Bold = '--color-reference-light-green-145-l50-c19-bold';\nexport const colorReferenceLightGreen145L75C22Medium = '--color-reference-light-green-145-l75-c22-medium';\nexport const colorReferenceLightGreen145L94C05Faint = '--color-reference-light-green-145-l94-c05-faint';\nexport const colorReferenceLightMagenta325L30C13Strong = '--color-reference-light-magenta-325-l30-c13-strong';\nexport const colorReferenceLightMagenta325L54C20Bold = '--color-reference-light-magenta-325-l54-c20-bold';\nexport const colorReferenceLightMagenta325L70C23Medium = '--color-reference-light-magenta-325-l70-c23-medium';\nexport const colorReferenceLightMagenta325L94C05Faint = '--color-reference-light-magenta-325-l94-c05-faint';\nexport const colorReferenceLightOlive115L35C09Strong = '--color-reference-light-olive-115-l35-c09-strong';\nexport const colorReferenceLightOlive115L51C13Bold = '--color-reference-light-olive-115-l51-c13-bold';\nexport const colorReferenceLightOlive115L85C22Medium = '--color-reference-light-olive-115-l85-c22-medium';\nexport const colorReferenceLightOlive115L93C05Faint = '--color-reference-light-olive-115-l93-c05-faint';\nexport const colorReferenceLightOrange60L35C09Strong = '--color-reference-light-orange-60-l35-c09-strong';\nexport const colorReferenceLightOrange60L52C13Bold = '--color-reference-light-orange-60-l52-c13-bold';\nexport const colorReferenceLightOrange60L75C20Medium = '--color-reference-light-orange-60-l75-c20-medium';\nexport const colorReferenceLightOrange60L93C05Faint = '--color-reference-light-orange-60-l93-c05-faint';\nexport const colorReferenceLightPink0L29C10Strong = '--color-reference-light-pink-0-l29-c10-strong';\nexport const colorReferenceLightPink0L53C20Bold = '--color-reference-light-pink-0-l53-c20-bold';\nexport const colorReferenceLightPink0L70C22Medium = '--color-reference-light-pink-0-l70-c22-medium';\nexport const colorReferenceLightPink0L93C05Faint = '--color-reference-light-pink-0-l93-c05-faint';\nexport const colorReferenceLightPurple290L35C13Strong = '--color-reference-light-purple-290-l35-c13-strong';\nexport const colorReferenceLightPurple290L52C20Bold = '--color-reference-light-purple-290-l52-c20-bold';\nexport const colorReferenceLightPurple290L75C15Medium = '--color-reference-light-purple-290-l75-c15-medium';\nexport const colorReferenceLightPurple290L92C04Faint = '--color-reference-light-purple-290-l92-c04-faint';\nexport const colorReferenceLightRed30L30C11Strong = '--color-reference-light-red-30-l30-c11-strong';\nexport const colorReferenceLightRed30L53C20Bold = '--color-reference-light-red-30-l53-c20-bold';\nexport const colorReferenceLightRed30L70C20Medium = '--color-reference-light-red-30-l70-c20-medium';\nexport const colorReferenceLightRed30L93C04Faint = '--color-reference-light-red-30-l93-c04-faint';\nexport const colorReferenceLightTeal180L35C09Strong = '--color-reference-light-teal-180-l35-c09-strong';\nexport const colorReferenceLightTeal180L50C12Bold = '--color-reference-light-teal-180-l50-c12-bold';\nexport const colorReferenceLightTeal180L75C17Medium = '--color-reference-light-teal-180-l75-c17-medium';\nexport const colorReferenceLightTeal180L94C05Faint = '--color-reference-light-teal-180-l94-c05-faint';\nexport const colorReferenceLightYellow85L40C09Strong = '--color-reference-light-yellow-85-l40-c09-strong';\nexport const colorReferenceLightYellow85L51C12Bold = '--color-reference-light-yellow-85-l51-c12-bold';\nexport const colorReferenceLightYellow85L85C20Medium = '--color-reference-light-yellow-85-l85-c20-medium';\nexport const colorReferenceLightYellow85L93C08Faint = '--color-reference-light-yellow-85-l93-c08-faint';\nexport const colorReferenceWhite0 = '--color-reference-white-0';\nexport const colorReferenceWhite10 = '--color-reference-white-10';\nexport const colorReferenceWhite100 = '--color-reference-white-100';\nexport const colorReferenceWhite15 = '--color-reference-white-15';\nexport const colorReferenceWhite20 = '--color-reference-white-20';\nexport const colorReferenceWhite25 = '--color-reference-white-25';\nexport const colorReferenceWhite30 = '--color-reference-white-30';\nexport const colorReferenceWhite35 = '--color-reference-white-35';\nexport const colorReferenceWhite40 = '--color-reference-white-40';\nexport const colorReferenceWhite45 = '--color-reference-white-45';\nexport const colorReferenceWhite5 = '--color-reference-white-5';\nexport const colorReferenceWhite50 = '--color-reference-white-50';\nexport const colorReferenceWhite55 = '--color-reference-white-55';\nexport const colorReferenceWhite60 = '--color-reference-white-60';\nexport const colorReferenceWhite65 = '--color-reference-white-65';\nexport const colorReferenceWhite70 = '--color-reference-white-70';\nexport const colorReferenceWhite75 = '--color-reference-white-75';\nexport const colorReferenceWhite80 = '--color-reference-white-80';\nexport const colorReferenceWhite85 = '--color-reference-white-85';\nexport const colorReferenceWhite90 = '--color-reference-white-90';\nexport const colorReferenceWhite95 = '--color-reference-white-95';\nexport const colorSafetyScoreBackgroundExcellent = '--color-safety-score-background-excellent';\nexport const colorSafetyScoreBackgroundFair = '--color-safety-score-background-fair';\nexport const colorSafetyScoreBackgroundGood = '--color-safety-score-background-good';\nexport const colorSafetyScoreForegroundOnExcellent = '--color-safety-score-foreground-on-excellent';\nexport const colorSafetyScoreForegroundOnFair = '--color-safety-score-foreground-on-fair';\nexport const colorSafetyScoreForegroundOnGood = '--color-safety-score-foreground-on-good';\nexport const colorSafetyScoreInteractionFocus = '--color-safety-score-interaction-focus';\nexport const colorSafetyScoreInteractionHover = '--color-safety-score-interaction-hover';\nexport const colorSafetyScoreInteractionPressed = '--color-safety-score-interaction-pressed';\nexport const colorSettingsProfileBackground = '--color-settings-profile-background';\nexport const colorSettingsProfileBorder = '--color-settings-profile-border';\nexport const colorSettingsProfileForeground = '--color-settings-profile-foreground';\nexport const colorShimmerFade = '--color-shimmer-fade';\nexport const colorShimmerHighlight = '--color-shimmer-highlight';\nexport const dimensionBase = '--dimension-base';\nexport const dimensionCardWidthLg = '--dimension-card-width-lg';\nexport const dimensionCardWidthMd = '--dimension-card-width-md';\nexport const dimensionCardWidthSm = '--dimension-card-width-sm';\nexport const dimensionCardWidthXs = '--dimension-card-width-xs';\nexport const dimensionFormWidthLg = '--dimension-form-width-lg';\nexport const dimensionFormWidthMd = '--dimension-form-width-md';\nexport const dimensionFormWidthSm = '--dimension-form-width-sm';\nexport const dimensionFormWidthXl = '--dimension-form-width-xl';\nexport const dimensionFormWidthXs = '--dimension-form-width-xs';\nexport const dimensionIconography2xl = '--dimension-iconography-2xl';\nexport const dimensionIconography3xl = '--dimension-iconography-3xl';\nexport const dimensionIconographyLg = '--dimension-iconography-lg';\nexport const dimensionIconographyMd = '--dimension-iconography-md';\nexport const dimensionIconographySm = '--dimension-iconography-sm';\nexport const dimensionIconographyXl = '--dimension-iconography-xl';\nexport const dimensionIconographyXs = '--dimension-iconography-xs';\nexport const dimensionMenuWidthLg = '--dimension-menu-width-lg';\nexport const dimensionMenuWidthMd = '--dimension-menu-width-md';\nexport const dimensionMenuWidthSm = '--dimension-menu-width-sm';\nexport const dimensionMenuWidthXs = '--dimension-menu-width-xs';\nexport const dimensionModalWidth2xl = '--dimension-modal-width-2xl';\nexport const dimensionModalWidthFill = '--dimension-modal-width-fill';\nexport const dimensionModalWidthLg = '--dimension-modal-width-lg';\nexport const dimensionModalWidthMd = '--dimension-modal-width-md';\nexport const dimensionModalWidthSm = '--dimension-modal-width-sm';\nexport const dimensionModalWidthXl = '--dimension-modal-width-xl';\nexport const dimensionModalWidthXs = '--dimension-modal-width-xs';\nexport const dimensionOffset000 = '--dimension-offset-000';\nexport const dimensionOffset025 = '--dimension-offset-025';\nexport const dimensionOffset050 = '--dimension-offset-050';\nexport const dimensionOffset075 = '--dimension-offset-075';\nexport const dimensionOffset100 = '--dimension-offset-100';\nexport const dimensionOffset125 = '--dimension-offset-125';\nexport const dimensionOffset150 = '--dimension-offset-150';\nexport const dimensionOffset175 = '--dimension-offset-175';\nexport const dimensionOffset200 = '--dimension-offset-200';\nexport const dimensionOffset250 = '--dimension-offset-250';\nexport const dimensionOffsetBase = '--dimension-offset-base';\nexport const dimensionOffsetN025 = '--dimension-offset-n025';\nexport const dimensionOffsetN050 = '--dimension-offset-n050';\nexport const dimensionOffsetN075 = '--dimension-offset-n075';\nexport const dimensionOffsetN100 = '--dimension-offset-n100';\nexport const dimensionOffsetN125 = '--dimension-offset-n125';\nexport const dimensionOffsetN150 = '--dimension-offset-n150';\nexport const dimensionOffsetN175 = '--dimension-offset-n175';\nexport const dimensionOffsetN200 = '--dimension-offset-n200';\nexport const dimensionOffsetN250 = '--dimension-offset-n250';\nexport const dimensionPanelWidth2xl = '--dimension-panel-width-2xl';\nexport const dimensionPanelWidth2xs = '--dimension-panel-width-2xs';\nexport const dimensionPanelWidthFill = '--dimension-panel-width-fill';\nexport const dimensionPanelWidthLg = '--dimension-panel-width-lg';\nexport const dimensionPanelWidthMd = '--dimension-panel-width-md';\nexport const dimensionPanelWidthSm = '--dimension-panel-width-sm';\nexport const dimensionPanelWidthXl = '--dimension-panel-width-xl';\nexport const dimensionPanelWidthXs = '--dimension-panel-width-xs';\nexport const dimensionRadius000 = '--dimension-radius-000';\nexport const dimensionRadius012 = '--dimension-radius-012';\nexport const dimensionRadius025 = '--dimension-radius-025';\nexport const dimensionRadius037 = '--dimension-radius-037';\nexport const dimensionRadius050 = '--dimension-radius-050';\nexport const dimensionRadius075 = '--dimension-radius-075';\nexport const dimensionRadius100 = '--dimension-radius-100';\nexport const dimensionRadius125 = '--dimension-radius-125';\nexport const dimensionRadius150 = '--dimension-radius-150';\nexport const dimensionRadius175 = '--dimension-radius-175';\nexport const dimensionRadius200 = '--dimension-radius-200';\nexport const dimensionRadius250 = '--dimension-radius-250';\nexport const dimensionRadius300 = '--dimension-radius-300';\nexport const dimensionRadius400 = '--dimension-radius-400';\nexport const dimensionRadius600 = '--dimension-radius-600';\nexport const dimensionRadiusBase = '--dimension-radius-base';\nexport const dimensionRadiusHalf = '--dimension-radius-half';\nexport const dimensionScaleDefault = '--dimension-scale-default';\nexport const dimensionScaleSubtle = '--dimension-scale-subtle';\nexport const dimensionSize000 = '--dimension-size-000';\nexport const dimensionSize050 = '--dimension-size-050';\nexport const dimensionSize075 = '--dimension-size-075';\nexport const dimensionSize100 = '--dimension-size-100';\nexport const dimensionSize150 = '--dimension-size-150';\nexport const dimensionSize200 = '--dimension-size-200';\nexport const dimensionSize250 = '--dimension-size-250';\nexport const dimensionSize300 = '--dimension-size-300';\nexport const dimensionSize400 = '--dimension-size-400';\nexport const dimensionSize500 = '--dimension-size-500';\nexport const dimensionSize600 = '--dimension-size-600';\nexport const dimensionSize800 = '--dimension-size-800';\nexport const dimensionSizeBase = '--dimension-size-base';\nexport const dimensionSpace000 = '--dimension-space-000';\nexport const dimensionSpace012 = '--dimension-space-012';\nexport const dimensionSpace025 = '--dimension-space-025';\nexport const dimensionSpace050 = '--dimension-space-050';\nexport const dimensionSpace075 = '--dimension-space-075';\nexport const dimensionSpace100 = '--dimension-space-100';\nexport const dimensionSpace125 = '--dimension-space-125';\nexport const dimensionSpace150 = '--dimension-space-150';\nexport const dimensionSpace175 = '--dimension-space-175';\nexport const dimensionSpace200 = '--dimension-space-200';\nexport const dimensionSpace250 = '--dimension-space-250';\nexport const dimensionSpace300 = '--dimension-space-300';\nexport const dimensionSpace400 = '--dimension-space-400';\nexport const dimensionSpace600 = '--dimension-space-600';\nexport const dimensionSpace800 = '--dimension-space-800';\nexport const dimensionSpaceBase = '--dimension-space-base';\nexport const dimensionSpaceN012 = '--dimension-space-n012';\nexport const dimensionSpaceN025 = '--dimension-space-n025';\nexport const dimensionSpaceN050 = '--dimension-space-n050';\nexport const dimensionSpaceN075 = '--dimension-space-n075';\nexport const dimensionSpaceN100 = '--dimension-space-n100';\nexport const dimensionSpaceN125 = '--dimension-space-n125';\nexport const dimensionSpaceN150 = '--dimension-space-n150';\nexport const dimensionSpaceN175 = '--dimension-space-n175';\nexport const dimensionSpaceN200 = '--dimension-space-n200';\nexport const dimensionSpaceN250 = '--dimension-space-n250';\nexport const dimensionSpaceN300 = '--dimension-space-n300';\nexport const dimensionSpaceN400 = '--dimension-space-n400';\nexport const dimensionSpaceN600 = '--dimension-space-n600';\nexport const dimensionSpaceN800 = '--dimension-space-n800';\nexport const dimensionStrokeWidth012 = '--dimension-stroke-width-012';\nexport const dimensionStrokeWidth015 = '--dimension-stroke-width-015';\nexport const dimensionStrokeWidth018 = '--dimension-stroke-width-018';\nexport const dimensionStrokeWidth025 = '--dimension-stroke-width-025';\nexport const dimensionStrokeWidth037 = '--dimension-stroke-width-037';\nexport const dimensionStrokeWidth050 = '--dimension-stroke-width-050';\nexport const dimensionStrokeWidthBase = '--dimension-stroke-width-base';\nexport const dimensionTableColumnWidthLg = '--dimension-table-column-width-lg';\nexport const dimensionTableColumnWidthMd = '--dimension-table-column-width-md';\nexport const dimensionTableColumnWidthSm = '--dimension-table-column-width-sm';\nexport const dimensionTableColumnWidthXl = '--dimension-table-column-width-xl';\nexport const dimensionTableColumnWidthXs = '--dimension-table-column-width-xs';\nexport const dimensionTooltipWidthLg = '--dimension-tooltip-width-lg';\nexport const dimensionTooltipWidthMd = '--dimension-tooltip-width-md';\nexport const dimensionTooltipWidthSm = '--dimension-tooltip-width-sm';\nexport const dimensionZIndexBase = '--dimension-z-index-base';\nexport const dimensionZIndexFloating = '--dimension-z-index-floating';\nexport const dimensionZIndexModal = '--dimension-z-index-modal';\nexport const dimensionZIndexOverlay = '--dimension-z-index-overlay';\nexport const dimensionZIndexRaised = '--dimension-z-index-raised';\nexport const dimensionZIndexTooltip = '--dimension-z-index-tooltip';\nexport const effectAnimationDelayInstant = '--effect-animation-delay-instant';\nexport const effectAnimationDelayLong1 = '--effect-animation-delay-long-1';\nexport const effectAnimationDelayLong2 = '--effect-animation-delay-long-2';\nexport const effectAnimationDelayLong3 = '--effect-animation-delay-long-3';\nexport const effectAnimationDelayMedium1 = '--effect-animation-delay-medium-1';\nexport const effectAnimationDelayMedium2 = '--effect-animation-delay-medium-2';\nexport const effectAnimationDelayMedium3 = '--effect-animation-delay-medium-3';\nexport const effectAnimationDelayShort1 = '--effect-animation-delay-short-1';\nexport const effectAnimationDelayShort2 = '--effect-animation-delay-short-2';\nexport const effectAnimationDelayShort3 = '--effect-animation-delay-short-3';\nexport const effectAnimationDurationInstant = '--effect-animation-duration-instant';\nexport const effectAnimationDurationLong1 = '--effect-animation-duration-long-1';\nexport const effectAnimationDurationLong2 = '--effect-animation-duration-long-2';\nexport const effectAnimationDurationLong3 = '--effect-animation-duration-long-3';\nexport const effectAnimationDurationMedium1 = '--effect-animation-duration-medium-1';\nexport const effectAnimationDurationMedium2 = '--effect-animation-duration-medium-2';\nexport const effectAnimationDurationMedium3 = '--effect-animation-duration-medium-3';\nexport const effectAnimationDurationShort1 = '--effect-animation-duration-short-1';\nexport const effectAnimationDurationShort2 = '--effect-animation-duration-short-2';\nexport const effectAnimationDurationShort3 = '--effect-animation-duration-short-3';\nexport const effectAnimationEasingEaseIn = '--effect-animation-easing-ease-in';\nexport const effectAnimationEasingEaseInOut = '--effect-animation-easing-ease-in-out';\nexport const effectAnimationEasingEaseInOutBack = '--effect-animation-easing-ease-in-out-back';\nexport const effectAnimationEasingEaseOut = '--effect-animation-easing-ease-out';\nexport const effectAnimationEasingLinear = '--effect-animation-easing-linear';\nexport const effectBlurLg = '--effect-blur-lg';\nexport const effectBlurMd = '--effect-blur-md';\nexport const effectBlurSm = '--effect-blur-sm';\nexport const effectElevationDepressedMd = '--effect-elevation-depressed-md';\nexport const effectElevationDepressedSm = '--effect-elevation-depressed-sm';\nexport const effectElevationElevatedFloating = '--effect-elevation-elevated-floating';\nexport const effectElevationElevatedMd = '--effect-elevation-elevated-md';\nexport const effectElevationElevatedNone = '--effect-elevation-elevated-none';\nexport const effectElevationElevatedPanelBottom = '--effect-elevation-elevated-panel-bottom';\nexport const effectElevationElevatedPanelLeft = '--effect-elevation-elevated-panel-left';\nexport const effectElevationElevatedPanelRight = '--effect-elevation-elevated-panel-right';\nexport const effectElevationElevatedPanelTop = '--effect-elevation-elevated-panel-top';\nexport const effectElevationElevatedSm = '--effect-elevation-elevated-sm';\nexport const effectFocusRing = '--effect-focus-ring';\nexport const effectHighlightDepressedMd = '--effect-highlight-depressed-md';\nexport const effectHighlightDepressedSm = '--effect-highlight-depressed-sm';\nexport const effectHighlightElevatedFloating = '--effect-highlight-elevated-floating';\nexport const effectHighlightElevatedMd = '--effect-highlight-elevated-md';\nexport const effectHighlightElevatedNone = '--effect-highlight-elevated-none';\nexport const effectHighlightElevatedPanelBottom = '--effect-highlight-elevated-panel-bottom';\nexport const effectHighlightElevatedPanelLeft = '--effect-highlight-elevated-panel-left';\nexport const effectHighlightElevatedPanelRight = '--effect-highlight-elevated-panel-right';\nexport const effectHighlightElevatedPanelTop = '--effect-highlight-elevated-panel-top';\nexport const effectHighlightElevatedSm = '--effect-highlight-elevated-sm';\nexport const effectMotionInstant = '--effect-motion-instant';\nexport const effectMotionLong1 = '--effect-motion-long-1';\nexport const effectMotionLong2 = '--effect-motion-long-2';\nexport const effectMotionLong3 = '--effect-motion-long-3';\nexport const effectMotionMedium1 = '--effect-motion-medium-1';\nexport const effectMotionMedium2 = '--effect-motion-medium-2';\nexport const effectMotionMedium3 = '--effect-motion-medium-3';\nexport const effectMotionShort1 = '--effect-motion-short-1';\nexport const effectMotionShort2 = '--effect-motion-short-2';\nexport const effectMotionShort3 = '--effect-motion-short-3';\nexport const effectShadowDepressedMd = '--effect-shadow-depressed-md';\nexport const effectShadowDepressedSm = '--effect-shadow-depressed-sm';\nexport const effectShadowElevatedFloating = '--effect-shadow-elevated-floating';\nexport const effectShadowElevatedMd = '--effect-shadow-elevated-md';\nexport const effectShadowElevatedNone = '--effect-shadow-elevated-none';\nexport const effectShadowElevatedPanelBottom = '--effect-shadow-elevated-panel-bottom';\nexport const effectShadowElevatedPanelLeft = '--effect-shadow-elevated-panel-left';\nexport const effectShadowElevatedPanelRight = '--effect-shadow-elevated-panel-right';\nexport const effectShadowElevatedPanelTop = '--effect-shadow-elevated-panel-top';\nexport const effectShadowElevatedSm = '--effect-shadow-elevated-sm';\nexport const effectTransitionInteractionBackgroundInstant = '--effect-transition-interaction-background-instant';\nexport const effectTransitionInteractionBackgroundLong1 = '--effect-transition-interaction-background-long-1';\nexport const effectTransitionInteractionBackgroundLong2 = '--effect-transition-interaction-background-long-2';\nexport const effectTransitionInteractionBackgroundLong3 = '--effect-transition-interaction-background-long-3';\nexport const effectTransitionInteractionBackgroundMedium1 = '--effect-transition-interaction-background-medium-1';\nexport const effectTransitionInteractionBackgroundMedium2 = '--effect-transition-interaction-background-medium-2';\nexport const effectTransitionInteractionBackgroundMedium3 = '--effect-transition-interaction-background-medium-3';\nexport const effectTransitionInteractionBackgroundShort1 = '--effect-transition-interaction-background-short-1';\nexport const effectTransitionInteractionBackgroundShort2 = '--effect-transition-interaction-background-short-2';\nexport const effectTransitionInteractionBackgroundShort3 = '--effect-transition-interaction-background-short-3';\nexport const effectTransitionInteractionBorderColorInstant = '--effect-transition-interaction-border-color-instant';\nexport const effectTransitionInteractionBorderColorLong1 = '--effect-transition-interaction-border-color-long-1';\nexport const effectTransitionInteractionBorderColorLong2 = '--effect-transition-interaction-border-color-long-2';\nexport const effectTransitionInteractionBorderColorLong3 = '--effect-transition-interaction-border-color-long-3';\nexport const effectTransitionInteractionBorderColorMedium1 = '--effect-transition-interaction-border-color-medium-1';\nexport const effectTransitionInteractionBorderColorMedium2 = '--effect-transition-interaction-border-color-medium-2';\nexport const effectTransitionInteractionBorderColorMedium3 = '--effect-transition-interaction-border-color-medium-3';\nexport const effectTransitionInteractionBorderColorShort1 = '--effect-transition-interaction-border-color-short-1';\nexport const effectTransitionInteractionBorderColorShort2 = '--effect-transition-interaction-border-color-short-2';\nexport const effectTransitionInteractionBorderColorShort3 = '--effect-transition-interaction-border-color-short-3';\nexport const effectTransitionInteractionColorInstant = '--effect-transition-interaction-color-instant';\nexport const effectTransitionInteractionColorLong1 = '--effect-transition-interaction-color-long-1';\nexport const effectTransitionInteractionColorLong2 = '--effect-transition-interaction-color-long-2';\nexport const effectTransitionInteractionColorLong3 = '--effect-transition-interaction-color-long-3';\nexport const effectTransitionInteractionColorMedium1 = '--effect-transition-interaction-color-medium-1';\nexport const effectTransitionInteractionColorMedium2 = '--effect-transition-interaction-color-medium-2';\nexport const effectTransitionInteractionColorMedium3 = '--effect-transition-interaction-color-medium-3';\nexport const effectTransitionInteractionColorShort1 = '--effect-transition-interaction-color-short-1';\nexport const effectTransitionInteractionColorShort2 = '--effect-transition-interaction-color-short-2';\nexport const effectTransitionInteractionColorShort3 = '--effect-transition-interaction-color-short-3';\nexport const effectTransitionInteractionOpacityInstant = '--effect-transition-interaction-opacity-instant';\nexport const effectTransitionInteractionOpacityLong1 = '--effect-transition-interaction-opacity-long-1';\nexport const effectTransitionInteractionOpacityLong2 = '--effect-transition-interaction-opacity-long-2';\nexport const effectTransitionInteractionOpacityLong3 = '--effect-transition-interaction-opacity-long-3';\nexport const effectTransitionInteractionOpacityMedium1 = '--effect-transition-interaction-opacity-medium-1';\nexport const effectTransitionInteractionOpacityMedium2 = '--effect-transition-interaction-opacity-medium-2';\nexport const effectTransitionInteractionOpacityMedium3 = '--effect-transition-interaction-opacity-medium-3';\nexport const effectTransitionInteractionOpacityShort1 = '--effect-transition-interaction-opacity-short-1';\nexport const effectTransitionInteractionOpacityShort2 = '--effect-transition-interaction-opacity-short-2';\nexport const effectTransitionInteractionOpacityShort3 = '--effect-transition-interaction-opacity-short-3';\nexport const effectTransitionInteractionTransformInstant = '--effect-transition-interaction-transform-instant';\nexport const effectTransitionInteractionTransformLong1 = '--effect-transition-interaction-transform-long-1';\nexport const effectTransitionInteractionTransformLong2 = '--effect-transition-interaction-transform-long-2';\nexport const effectTransitionInteractionTransformLong3 = '--effect-transition-interaction-transform-long-3';\nexport const effectTransitionInteractionTransformMedium1 = '--effect-transition-interaction-transform-medium-1';\nexport const effectTransitionInteractionTransformMedium2 = '--effect-transition-interaction-transform-medium-2';\nexport const effectTransitionInteractionTransformMedium3 = '--effect-transition-interaction-transform-medium-3';\nexport const effectTransitionInteractionTransformShort1 = '--effect-transition-interaction-transform-short-1';\nexport const effectTransitionInteractionTransformShort2 = '--effect-transition-interaction-transform-short-2';\nexport const effectTransitionInteractionTransformShort3 = '--effect-transition-interaction-transform-short-3';\nexport const typographyFontFamily = '--typography-font-family';\nexport const typographyFontsize2xl = '--typography-fontsize-2xl';\nexport const typographyFontsize3xl = '--typography-fontsize-3xl';\nexport const typographyFontsizeLg = '--typography-fontsize-lg';\nexport const typographyFontsizeMd = '--typography-fontsize-md';\nexport const typographyFontsizeSm = '--typography-fontsize-sm';\nexport const typographyFontsizeXl = '--typography-fontsize-xl';\nexport const typographyFontsizeXs = '--typography-fontsize-xs';\nexport const typographyLetterspacingNegative = '--typography-letterspacing-negative';\nexport const typographyLetterspacingNegativeDouble = '--typography-letterspacing-negative-double';\nexport const typographyLetterspacingNegativeHalf = '--typography-letterspacing-negative-half';\nexport const typographyLetterspacingNone = '--typography-letterspacing-none';\nexport const typographyLetterspacingPositive = '--typography-letterspacing-positive';\nexport const typographyLineheight2xl = '--typography-lineheight-2xl';\nexport const typographyLineheight3xl = '--typography-lineheight-3xl';\nexport const typographyLineheightLg = '--typography-lineheight-lg';\nexport const typographyLineheightMd = '--typography-lineheight-md';\nexport const typographyLineheightSm = '--typography-lineheight-sm';\nexport const typographyLineheightXl = '--typography-lineheight-xl';\nexport const typographyLineheightXs = '--typography-lineheight-xs';\nexport const typographyParagraphspacingLg = '--typography-paragraphspacing-lg';\nexport const typographyParagraphspacingMd = '--typography-paragraphspacing-md';\nexport const typographyParagraphspacingNone = '--typography-paragraphspacing-none';\nexport const typographyParagraphspacingSm = '--typography-paragraphspacing-sm';\nexport const typographyWeightBold = '--typography-weight-bold';\nexport const typographyWeightMedium = '--typography-weight-medium';\nexport const typographyWeightRegular = '--typography-weight-regular';\nexport const typographyWeightSemibold = '--typography-weight-semibold';\n","import {\n  dimensionIconographyMd,\n  dimensionIconographySm,\n  dimensionIconographyXs,\n  dimensionMenuWidthXs,\n  dimensionPanelWidth2xs,\n  dimensionPanelWidthLg,\n  dimensionPanelWidthMd,\n  dimensionSize300,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayShort2,\n  effectAnimationDurationMedium1,\n  effectAnimationDurationShort3,\n  effectMotionShort3,\n} from '@ds-mo/tokens/ts';\n\n/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */\nexport const TOKEN_DEFAULTS = {\n  space050: dimensionSpace050,\n  space200: dimensionSpace200,\n  size300: dimensionSize300,\n  size600: dimensionSize600,\n  size800: dimensionSize800,\n  iconographyMd: dimensionIconographyMd,\n  iconographySm: dimensionIconographySm,\n  iconographyXs: dimensionIconographyXs,\n  panelWidth2xs: dimensionPanelWidth2xs,\n  panelWidthMd: dimensionPanelWidthMd,\n  panelWidthLg: dimensionPanelWidthLg,\n  menuWidthXs: dimensionMenuWidthXs,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayShort2: effectAnimationDelayShort2,\n  animationDelayLong2: effectAnimationDelayLong2,\n  /** Unmeasured menu height fallback: 20× base (160px at default scale). */\n  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',\n  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */\n  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',\n} as const;\n\nexport type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;\n\n/** Valid CSS length strings for overlay offset props — bind on `sideOffset` / `alignOffset` in hosts. */\nexport const TOKEN_CSS_LENGTHS = {\n  space050: `var(${dimensionSpace050})`,\n  space200: `var(${dimensionSpace200})`,\n  menuWidthXs: `var(${dimensionMenuWidthXs})`,\n} as const;\n"],"mappings":"AAotBO,MAAMA,EAAyB,6BAC/B,MAAMC,EAAyB,6BAE/B,MAAMC,EAAyB,6BAI/B,MAAMC,EAAuB,4BAgC7B,MAAMC,EAAwB,6BA8B9B,MAAMC,EAAmB,uBASzB,MAAMC,EAAoB,wBAkD1B,MAAMC,EAA4B,kCAElC,MAAMC,EAA8B,oCAUpC,MAAMC,EAAiC,uCAKvC,MAAMC,EAAgC,sCAuCtC,MAAMC,EAAqB,0BCt3B3B,MAAMC,EAAiB,CAC5BC,SAAUP,EAEVQ,QAAST,EAGTU,cAAef,EACfgB,cAAef,EACfgB,cAAef,EAEfgB,aAAcd,EAEde,YAAahB,EACbiB,aAAcT,EACdU,wBAAyBX,EACzBY,yBAA0Bb,EAC1Bc,sBAAuBf,EAEvBgB,oBAAqBjB,EAErBkB,mBAAoB,wCAEpBC,qBAAsB,+DAMjB,MAAMC,EAAoB,CAC/Bd,SAAU,OAAOP,a","ignoreList":[]}

package/dist/components/p-Bknnbbb7.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as i,h as t,a as r,t as a}from"./index.js";import{D as n,a as o,b as d,c}from"./p-DuI6g-ke.js";const l=()=>`.sc-ds-shell-gradient-swatch-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-gradient-swatch:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-shell-gradient-swatch-h{display:inline-flex;--_swatch-ring-bg:var(--color-background-primary)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:0;border:none;border-radius:var(--dimension-radius-half);background-color:var(--color-background-secondary);cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch.sc-ds-shell-gradient-swatch::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;opacity:var(--ds-shell-gradient-opacity, 0.1);pointer-events:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled)::after{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled)::after{background:var(--color-interaction-pressed)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:disabled{opacity:0.5;cursor:not-allowed}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch::after{box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand),     inset 0 0 0 calc(var(--dimension-stroke-width-025) * 2) var(--_swatch-ring-bg)}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=i(this,"dsSelect");this.preset=n;this.selected=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??o[this.preset];return t(r,{key:"0d63449bfeef981b6924bf5b12b845de262f8e2b"},t("button",{key:"aeded9b5c5677f9dc54012a9dda473d264e1f028",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"shell-gradient-swatch--selected":this.selected},style:{"--_swatch-gradient-image":c(this.preset),"--ds-shell-gradient-opacity":d},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.inactive,onClick:this.handleClick}))}static get style(){return l()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],inactive:[4],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(a(s))){customElements.define(a(s),h)}break}}))}g();export{h as S,g as d};
-//# sourceMappingURL=p-Bknnbbb7.js.map

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