@vellira-ui/tokens 2.98.7 → 2.100.0

package/dist/css/tokens.css

@@ -340,6 +340,7 @@
   --status-info-emphasis-fg: #082F49;
   --surface-canvas: #FAF8FF;
   --surface-default: #FAF8FF;
+  --surface-panel: #FFFFFF;
   --surface-muted: #F4F1FB;
   --surface-subtle: #FDFCFF;
   --surface-elevated: #FFFFFF;
@@ -1268,7 +1269,6 @@
   --modal-content-gap: 16px;
   --modal-content-min-width: 320px;
   --modal-content-max-height: 90vh;
-  --modal-content-native-max-height: 90%;
   --modal-content-viewport-margin: 32px;
   --modal-content-top-offset: 40px;
   --modal-content-z-index-offset: 1;
@@ -1310,13 +1310,7 @@
   --popover-content-bg: #FFFFFF;
   --popover-content-fg: #3D3754;
   --popover-content-border: #E4DDF4;
-  --popover-content-shadow-web: 0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1);
-  --popover-content-shadow-native-x: 0px;
-  --popover-content-shadow-native-y: 12px;
-  --popover-content-shadow-native-blur: 32px;
-  --popover-content-shadow-native-color: #000000;
-  --popover-content-shadow-native-opacity: 0.1;
-  --popover-content-shadow-native-elevation: 8;
+  --popover-content-shadow: 0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1);
   --popover-content-border-width: 1px;
   --popover-content-radius: 16px;
   --popover-content-padding: 16px;
@@ -2347,6 +2341,14 @@
   --tooltip-arrow-bg: #FFFFFF;
   --tooltip-arrow-size: 10px;
   --tooltip-arrow-compact-size: 6px;
+  --modal-content-native-max-height: 90%;
+  --popover-content-shadow-web: 0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1;
+  --popover-content-shadow-native-elevation: 8;
 }
 
 [data-theme='dark'],
@@ -2633,6 +2635,7 @@
   --status-info-emphasis-fg: #0369A1;
   --surface-canvas: #000000;
   --surface-default: #181521;
+  --surface-panel: #181521;
   --surface-muted: #231F31;
   --surface-subtle: #242034;
   --surface-elevated: #2F2A42;
@@ -3561,7 +3564,6 @@
   --modal-content-gap: 16px;
   --modal-content-min-width: 320px;
   --modal-content-max-height: 90vh;
-  --modal-content-native-max-height: 90%;
   --modal-content-viewport-margin: 32px;
   --modal-content-top-offset: 40px;
   --modal-content-z-index-offset: 1;
@@ -3603,13 +3605,7 @@
   --popover-content-bg: #242034;
   --popover-content-fg: #F4F1FB;
   --popover-content-border: #3D3754;
-  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
-  --popover-content-shadow-native-x: 0px;
-  --popover-content-shadow-native-y: 12px;
-  --popover-content-shadow-native-blur: 32px;
-  --popover-content-shadow-native-color: #000000;
-  --popover-content-shadow-native-opacity: 0.1;
-  --popover-content-shadow-native-elevation: 8;
+  --popover-content-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
   --popover-content-border-width: 1px;
   --popover-content-radius: 16px;
   --popover-content-padding: 16px;
@@ -4640,6 +4636,14 @@
   --tooltip-arrow-bg: #2F2A42;
   --tooltip-arrow-size: 10px;
   --tooltip-arrow-compact-size: 6px;
+  --modal-content-native-max-height: 90%;
+  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1;
+  --popover-content-shadow-native-elevation: 8;
 }
 
 [data-theme='high-contrast'],
@@ -4926,6 +4930,7 @@
   --status-info-emphasis-fg: #BAE6FD;
   --surface-canvas: #000000;
   --surface-default: #000000;
+  --surface-panel: #0B1120;
   --surface-muted: #111827;
   --surface-subtle: #1F2937;
   --surface-elevated: #374151;
@@ -5854,7 +5859,6 @@
   --modal-content-gap: 16px;
   --modal-content-min-width: 320px;
   --modal-content-max-height: 90vh;
-  --modal-content-native-max-height: 90%;
   --modal-content-viewport-margin: 32px;
   --modal-content-top-offset: 40px;
   --modal-content-z-index-offset: 1;
@@ -5896,13 +5900,7 @@
   --popover-content-bg: #111827;
   --popover-content-fg: #FFFFFF;
   --popover-content-border: #9CA3AF;
-  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.7);
-  --popover-content-shadow-native-x: 0px;
-  --popover-content-shadow-native-y: 12px;
-  --popover-content-shadow-native-blur: 32px;
-  --popover-content-shadow-native-color: #000000;
-  --popover-content-shadow-native-opacity: 0.1;
-  --popover-content-shadow-native-elevation: 8;
+  --popover-content-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
   --popover-content-border-width: 1px;
   --popover-content-radius: 16px;
   --popover-content-padding: 16px;
@@ -6933,4 +6931,12 @@
   --tooltip-arrow-bg: #FFFFFF;
   --tooltip-arrow-size: 10px;
   --tooltip-arrow-compact-size: 6px;
+  --modal-content-native-max-height: 90%;
+  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.7);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1;
+  --popover-content-shadow-native-elevation: 8;
 }

package/dist/dark/components/contextMenu.d.ts

@@ -2,7 +2,11 @@ export declare const contextMenu: {
     readonly content: {
         readonly bg: string;
         readonly border: string;
-        readonly shadow: string;
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
     };
     readonly item: {
         readonly default: {
@@ -26,7 +30,10 @@ export declare const contextMenu: {
             readonly ring: {
                 readonly color: string;
                 readonly width: string;
-                readonly shadow: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
                 readonly offset: string;
             };
         };
@@ -72,7 +79,10 @@ export declare const contextMenu: {
             readonly ring: {
                 readonly color: string;
                 readonly width: string;
-                readonly shadow: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
                 readonly offset: string;
             };
         };

package/dist/dark/components/contextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/dark/components/contextMenu.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKtB,CAAC"}
+{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/dark/components/contextMenu.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAItB,CAAC"}

package/dist/dark/components/contextMenu.js

@@ -1,11 +1,9 @@
 import { createContextMenuTokensFromSemantics } from '../../factories/createContextMenuTokens.js';
 import { focus } from '../semantic/focus.js';
 import { menu } from '../semantic/menu.js';
-import { shadow } from '../semantic/shadow.js';
 import { text } from '../semantic/text.js';
 export const contextMenu = createContextMenuTokensFromSemantics({
     focus,
     menu,
-    shadow,
     text,
 });

package/dist/dark/components/dropdown.d.ts

@@ -273,7 +273,10 @@ export declare const dropdown: {
             readonly ring: {
                 readonly color: string;
                 readonly width: string;
-                readonly shadow: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
                 readonly offset: string;
             };
         };
@@ -287,7 +290,11 @@ export declare const dropdown: {
         readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";
         readonly border: "#4F4867";
-        readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)";
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
     };
     readonly item: {
         readonly default: {
@@ -311,7 +318,10 @@ export declare const dropdown: {
             readonly ring: {
                 readonly color: string;
                 readonly width: string;
-                readonly shadow: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
                 readonly offset: string;
             };
         };

package/dist/dark/components/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/dark/components/dropdown.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIX,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/dark/components/dropdown.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIX,CAAC"}

package/dist/dark/components/dropdown.js

@@ -1,12 +1,12 @@
 import { createComponentFocusRing } from '../../factories/componentFocusRing.js';
 import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
 import { createInputColorPalette } from '../../factories/createInputPalette.js';
+import { createComponentShadowIntent } from '../../platform-output/component-token-intents.js';
 import { colors } from '../../primitives/colors.js';
 import { withAlpha } from '../../utils/color.js';
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
 import { menu } from '../semantic/menu.js';
-import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const dropdownPaletteDefaults = {
@@ -140,7 +140,7 @@ export const dropdown = {
         bg: menu.background,
         fg: menu.item.default.fg,
         border: menu.border,
-        shadow: shadow.lg,
+        shadow: createComponentShadowIntent('lg'),
     },
     item: {
         default: {

package/dist/dark/components/modal.d.ts

@@ -8,14 +8,20 @@ export declare const modal: {
         readonly bg: string;
         readonly fg: string;
         readonly border: string;
-        readonly shadow: string;
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
         readonly borderWidth: 1;
         readonly radius: number;
         readonly padding: number;
         readonly gap: number;
         readonly minWidth: 320;
-        readonly maxHeight: "90vh";
-        readonly nativeMaxHeight: "90%";
+        readonly maxHeight: Readonly<{
+            kind: "viewport-height";
+            ratio: number;
+        }>;
         readonly viewportMargin: number;
         readonly topOffset: number;
         readonly zIndexOffset: 1;
@@ -66,10 +72,13 @@ export declare const modal: {
         };
         readonly focus: {
             readonly ring: {
-                color: string;
-                width: string;
-                shadow: string;
-                offset: string;
+                readonly color: string;
+                readonly width: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
+                readonly offset: string;
             };
         };
         readonly disabled: {

package/dist/dark/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUhB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAShB,CAAC"}

package/dist/dark/components/modal.js

@@ -3,7 +3,6 @@ import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
 import { focus } from '../semantic/focus.js';
 import { overlay } from '../semantic/overlay.js';
-import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const closeButtonHoverBg = surface.elevated;
@@ -14,7 +13,6 @@ export const modal = createModalTokensFromSemantics({
     focus,
     overlay,
     radius,
-    shadow,
     spacing,
     surface,
     text,

package/dist/dark/components/popover.d.ts

@@ -3,31 +3,11 @@ export declare const popover: {
         readonly bg: string;
         readonly fg: string;
         readonly border: string;
-        readonly shadow: {
-            readonly web: string;
-            readonly native: {
-                readonly x: 0;
-                readonly y: 1;
-                readonly blur: 3;
-                readonly color: "#000000";
-                readonly opacity: 0.04;
-                readonly elevation: 1;
-            } | {
-                readonly x: 0;
-                readonly y: 6;
-                readonly blur: 16;
-                readonly color: "#000000";
-                readonly opacity: 0.08;
-                readonly elevation: 4;
-            } | {
-                readonly x: 0;
-                readonly y: 12;
-                readonly blur: 32;
-                readonly color: "#000000";
-                readonly opacity: 0.1;
-                readonly elevation: 8;
-            };
-        };
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
         readonly borderWidth: 1;
         readonly radius: number;
         readonly padding: number;

package/dist/dark/components/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/dark/components/popover.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/dark/components/popover.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAC"}

package/dist/dark/components/popover.js

@@ -1,14 +1,10 @@
 import { createPopoverTokensFromTheme } from '../../factories/createPopoverTokens.js';
 import { radius } from '../../tokens/radius.js';
-import { shadows } from '../../tokens/shadows.js';
 import { spacing } from '../../tokens/spacing.js';
 import { overlay } from '../semantic/overlay.js';
-import { shadow } from '../semantic/shadow.js';
 import { text } from '../semantic/text.js';
 export const popover = createPopoverTokensFromTheme({
     overlay,
-    shadow,
-    shadows,
     text,
     radius,
     spacing,

package/dist/dark/components/select.d.ts

@@ -2411,7 +2411,11 @@ export declare const select: {
         readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";
         readonly border: "transparent";
-        readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)";
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
         readonly search: {
             readonly bg: "#181521";
             readonly fg: "#F4F1FB";
@@ -2462,7 +2466,10 @@ export declare const select: {
             readonly bg: "#402C9F";
             readonly fg: "#E9E6FF";
             readonly border: "#6346E8";
-            readonly shadow: "none";
+            readonly shadow: Readonly<{
+                kind: "shadow";
+                role: "none";
+            }>;
         };
         readonly disabled: {
             readonly bg: "transparent";

package/dist/dark/components/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"AA2EA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOT,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOT,CAAC"}

package/dist/dark/components/select.js

@@ -1,12 +1,12 @@
 import { createInputColorPalette } from '../../factories/createInputPalette.js';
 import { createSelectPalette } from '../../factories/createSelectPalette.js';
+import { createComponentNoShadowIntent, createComponentShadowIntent, } from '../../platform-output/component-token-intents.js';
 import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { icons } from '../semantic/icons.js';
 import { menu } from '../semantic/menu.js';
-import { shadow } from '../semantic/shadow.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
@@ -185,7 +185,7 @@ export const select = {
         bg: menu.background,
         fg: menu.item.default.fg,
         border: 'transparent',
-        shadow: shadow.lg,
+        shadow: createComponentShadowIntent('lg'),
         search: {
             bg: surface.default,
             fg: text.primary,
@@ -236,7 +236,7 @@ export const select = {
             bg: control.selected.muted.bg,
             fg: control.selected.muted.fg,
             border: control.selected.muted.border,
-            shadow: 'none',
+            shadow: createComponentNoShadowIntent(),
         },
         disabled: {
             bg: menu.item.disabled.bg,

package/dist/dark/components/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/dark/components/tooltip.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO,gEAMlB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/dark/components/tooltip.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO,gEAKlB,CAAC"}

package/dist/dark/components/tooltip.js

@@ -3,10 +3,8 @@ import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
 import { typography } from '../../tokens/typography.js';
 import { overlay } from '../semantic/overlay.js';
-import { shadow } from '../semantic/shadow.js';
 export const tooltip = createTooltipTokensFromTheme({
     overlay,
-    shadow,
     radius,
     spacing,
     typography,

package/dist/dark/semantic/surface.d.ts

@@ -1,6 +1,7 @@
 export declare const surface: {
     readonly canvas: "#000000";
     readonly default: "#181521";
+    readonly panel: "#181521";
     readonly muted: "#231F31";
     readonly subtle: "#242034";
     readonly elevated: "#2F2A42";

package/dist/dark/semantic/surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAeV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAgBV,CAAC"}

package/dist/dark/semantic/surface.js

@@ -3,6 +3,7 @@ import { withAlpha } from '../../utils/color.js';
 export const surface = {
     canvas: colors.mono[950],
     default: colors.vellira[950],
+    panel: colors.vellira[950],
     muted: colors.vellira[900],
     subtle: colors.vellira[850],
     elevated: colors.vellira[800],

package/dist/factories/componentFocusRing.d.ts

@@ -1,13 +1,15 @@
 export type SemanticFocusRing = {
     readonly color: string;
     readonly width: string;
-    readonly shadow: string;
     readonly offsetColor: string;
 };
 export declare const createComponentFocusRing: (ring: SemanticFocusRing) => {
     readonly color: string;
     readonly width: string;
-    readonly shadow: string;
+    readonly shadow: Readonly<{
+        kind: "shadow";
+        role: "focus-ring";
+    }>;
     readonly offset: string;
 };
 //# sourceMappingURL=componentFocusRing.d.ts.map

package/dist/factories/componentFocusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentFocusRing.d.ts","sourceRoot":"","sources":["../../src/factories/componentFocusRing.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,iBAAiB;;;;;CAMnD,CAAC"}
+{"version":3,"file":"componentFocusRing.d.ts","sourceRoot":"","sources":["../../src/factories/componentFocusRing.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,iBAAiB;;;;;;;;CAMnD,CAAC"}

package/dist/factories/componentFocusRing.js

@@ -1,6 +1,7 @@
+import { createComponentFocusRingShadowIntent } from '../platform-output/component-token-intents.js';
 export const createComponentFocusRing = (ring) => ({
     color: ring.color,
     width: ring.width,
-    shadow: ring.shadow,
+    shadow: createComponentFocusRingShadowIntent(),
     offset: ring.offsetColor,
 });

package/dist/factories/createContextMenuTokens.d.ts

@@ -1,4 +1,4 @@
-import { type SemanticFocusRing } from './componentFocusRing.js';
+import { createComponentFocusRing, type SemanticFocusRing } from './componentFocusRing.js';
 type ContextMenuState = {
     readonly bg: string;
     readonly fg: string;
@@ -9,16 +9,10 @@ type ContextMenuDangerStates = {
     readonly active: ContextMenuState;
     readonly disabled: ContextMenuState;
 };
-type ContextMenuFocusRing = {
-    readonly color: string;
-    readonly width: string;
-    readonly shadow: string;
-    readonly offset: string;
-};
+type ContextMenuFocusRing = ReturnType<typeof createComponentFocusRing>;
 type ContextMenuTokensConfig = {
     contentBg: string;
     contentBorder: string;
-    contentShadow: string;
     itemDefault: ContextMenuState;
     itemHover: ContextMenuState;
     itemActive: ContextMenuState;
@@ -50,9 +44,6 @@ export type ContextMenuThemeSemantics = {
             danger: ContextMenuDangerStates;
         };
     };
-    shadow: {
-        lg: string;
-    };
     text: {
         interactive: string;
         interactiveHover: string;
@@ -64,7 +55,11 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
     readonly content: {
         readonly bg: string;
         readonly border: string;
-        readonly shadow: string;
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
     };
     readonly item: {
         readonly default: ContextMenuState;
@@ -76,7 +71,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
         };
         readonly pressed: ContextMenuState;
         readonly focus: {
-            readonly ring: ContextMenuFocusRing;
+            readonly ring: {
+                readonly color: string;
+                readonly width: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
+                readonly offset: string;
+            };
         };
         readonly disabled: ContextMenuState;
         readonly danger: ContextMenuDangerStates;
@@ -97,7 +100,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
             readonly bg: "transparent";
             readonly fg: string;
             readonly border: "transparent";
-            readonly ring: ContextMenuFocusRing;
+            readonly ring: {
+                readonly color: string;
+                readonly width: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
+                readonly offset: string;
+            };
         };
         readonly disabled: {
             readonly bg: "transparent";
@@ -109,11 +120,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
         readonly fg: string;
     };
 };
-export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shadow, text, }: ContextMenuThemeSemantics) => {
+export declare const createContextMenuTokensFromSemantics: ({ focus, menu, text, }: ContextMenuThemeSemantics) => {
     readonly content: {
         readonly bg: string;
         readonly border: string;
-        readonly shadow: string;
+        readonly shadow: Readonly<{
+            kind: "shadow";
+            role: "elevation";
+            level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
+        }>;
     };
     readonly item: {
         readonly default: ContextMenuState;
@@ -125,7 +140,15 @@ export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shado
         };
         readonly pressed: ContextMenuState;
         readonly focus: {
-            readonly ring: ContextMenuFocusRing;
+            readonly ring: {
+                readonly color: string;
+                readonly width: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
+                readonly offset: string;
+            };
         };
         readonly disabled: ContextMenuState;
         readonly danger: ContextMenuDangerStates;
@@ -146,7 +169,15 @@ export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shado
             readonly bg: "transparent";
             readonly fg: string;
             readonly border: "transparent";
-            readonly ring: ContextMenuFocusRing;
+            readonly ring: {
+                readonly color: string;
+                readonly width: string;
+                readonly shadow: Readonly<{
+                    kind: "shadow";
+                    role: "focus-ring";
+                }>;
+                readonly offset: string;
+            };
         };
         readonly disabled: {
             readonly bg: "transparent";