@vellira-ui/tokens 2.98.5 → 2.98.7

package/dist/token-architecture.js

@@ -219,6 +219,178 @@ export function requireTokenValueKind(tokenPath, value) {
         return kind;
     throw new Error(`Unknown numeric token value kind for "${tokenPath}". Add a canonical namespace or role rule before serializing this token.`);
 }
+export const canonicalInteractionStates = [
+    'default',
+    'hover',
+    'pressed',
+    'active',
+    'selected',
+    'disabled',
+    'focus',
+];
+/**
+ * Interaction-state semantics consumed by token audits, Generator V2, and agents.
+ * State names describe meaning, never a visual intensity level.
+ */
+export const interactionStateVocabularyV1 = {
+    default: {
+        temporality: 'resting',
+        meaning: 'Resting enabled state before interaction or persistent selection.',
+    },
+    hover: {
+        temporality: 'transient',
+        meaning: 'Pointer hover only; optional when the input platform has no hover capability.',
+    },
+    pressed: {
+        temporality: 'transient',
+        meaning: 'Physical pointer or key activation while the interaction is held.',
+    },
+    active: {
+        temporality: 'persistent-or-current',
+        meaning: 'Current or persistently active domain state; never an alias for physical press.',
+    },
+    selected: {
+        temporality: 'persistent',
+        meaning: 'Chosen, checked, or selected domain state.',
+    },
+    disabled: {
+        temporality: 'persistent',
+        meaning: 'Unavailable interaction state that cannot be activated.',
+    },
+    focus: {
+        temporality: 'transient-or-current',
+        meaning: 'Current input focus indication, independent from hover, press, or selection.',
+    },
+};
+/**
+ * Domains where active is intentionally distinct from physical press.
+ * Patterns are architecture metadata for #890; they are not runtime selectors.
+ */
+export const legitimatePersistentActiveStateDomainsV1 = [
+    {
+        pattern: 'semantic.surface.active',
+        meaning: 'Generic current/active surface role distinct from surface.pressed.',
+    },
+    {
+        pattern: 'semantic.menu.item.active',
+        meaning: 'Current/highlighted menu item independent from physical press.',
+    },
+    {
+        pattern: 'semantic.menu.item.danger.active',
+        meaning: 'Current/highlighted danger menu item.',
+    },
+    {
+        pattern: 'components.contextMenu.item.active',
+        meaning: 'Current/highlighted context-menu item.',
+    },
+    {
+        pattern: 'components.dropdown.*.item.active',
+        meaning: 'Current/highlighted dropdown item independent from :active press.',
+    },
+    {
+        pattern: 'components.select.*.option.active',
+        meaning: 'Current/highlighted Select option independent from aria-selected and press.',
+    },
+    {
+        pattern: 'components.tabs.*.*.active',
+        meaning: 'Current active tab presentation; physical press is a separate interaction.',
+    },
+];
+export const semanticVocabularyV1 = {
+    surface: {
+        purpose: 'Layer and interaction backgrounds.',
+        roles: [
+            'canvas',
+            'default',
+            'subtle',
+            'muted',
+            'elevated',
+            'hover',
+            'active',
+            'pressed',
+            'disabled',
+            'danger',
+            'inverse',
+        ],
+    },
+    text: {
+        purpose: 'Text foreground hierarchy and text interaction roles.',
+        roles: [
+            'primary',
+            'secondary',
+            'muted',
+            'subtle',
+            'disabled',
+            'brand',
+            'interactive',
+            'interactiveHover',
+            'interactivePressed',
+            'inverse',
+        ],
+    },
+    icons: {
+        purpose: 'Icon foreground hierarchy; interactive roles are distinct from brand identity.',
+        roles: [
+            'default',
+            'secondary',
+            'muted',
+            'subtle',
+            'disabled',
+            'interactive',
+            'brand',
+            'interactiveHover',
+            'success',
+            'danger',
+            'inverse',
+        ],
+    },
+    border: {
+        purpose: 'Structural border strength plus generic interactive border emphasis.',
+        roles: [
+            'subtle',
+            'muted',
+            'default',
+            'strong',
+            'elevated',
+            'disabled',
+            'interactive',
+        ],
+    },
+    divider: {
+        purpose: 'Non-interactive separators.',
+        roles: ['muted', 'default', 'strong'],
+    },
+    focus: {
+        purpose: 'Input-focus indication only; independent from hover and pressed states.',
+        roles: ['ring.color', 'ring.width', 'ring.shadow', 'ring.offsetColor'],
+    },
+    status: {
+        purpose: 'Status intent paint using explicit consumption roles.',
+        intents: ['success', 'error', 'warning', 'info'],
+        roles: ['fg', 'bg', 'border', 'ring', 'emphasisFg'],
+    },
+    action: {
+        purpose: 'Action intent palettes; accent is the cyan secondary-brand hue, neutral is non-brand action chrome.',
+        roles: ['primary', 'accent', 'neutral', 'danger'],
+        states: ['default', 'hover', 'pressed', 'muted', 'subtle'],
+    },
+    control: {
+        purpose: 'Generic form-control state paint; pressed is physical press and selected is persistent choice.',
+        roles: ['default', 'hover', 'pressed', 'selected', 'disabled', 'focus'],
+    },
+    menu: {
+        purpose: 'Menu-item roles where active/current is a legitimate domain state.',
+        roles: ['item', 'item.danger'],
+    },
+    overlay: {
+        purpose: 'Reusable overlay surfaces named by presentation purpose, not component history.',
+        roles: ['backdrop', 'tooltip', 'floating', 'dialog'],
+    },
+    shadow: {
+        purpose: 'Semantic elevation references; renderer ownership is normalized separately.',
+        roles: ['sm', 'md', 'lg', 'xl'],
+    },
+};
 export const canonicalTokenVocabulary = {
     surface: [
         'canvas',
@@ -236,8 +408,8 @@ export const canonicalTokenVocabulary = {
     state: [
         'default',
         'hover',
-        'active',
         'pressed',
+        'active',
         'selected',
         'disabled',
         'focus',
@@ -251,11 +423,19 @@ export const canonicalTokenVocabulary = {
         'brand',
         'interactive',
         'interactiveHover',
-        'interactiveActive',
+        'interactivePressed',
         'inverse',
     ],
-    border: ['subtle', 'muted', 'default', 'strong', 'elevated', 'disabled'],
-    intent: ['primary', 'neutral', 'success', 'warning', 'danger'],
+    border: [
+        'subtle',
+        'muted',
+        'default',
+        'strong',
+        'elevated',
+        'disabled',
+        'interactive',
+    ],
+    intent: ['primary', 'accent', 'neutral', 'success', 'warning', 'danger'],
     status: ['success', 'error', 'warning', 'info'],
 };
 export const canonicalSemanticRolePaths = [
@@ -278,50 +458,61 @@ export const canonicalSemanticRolePaths = [
     'text.brand',
     'text.interactive',
     'text.interactiveHover',
-    'text.interactiveActive',
+    'text.interactivePressed',
     'text.inverse',
+    'icons.default',
+    'icons.secondary',
+    'icons.muted',
+    'icons.subtle',
+    'icons.disabled',
+    'icons.interactive',
+    'icons.brand',
+    'icons.interactiveHover',
+    'icons.success',
+    'icons.danger',
+    'icons.inverse',
     'border.subtle',
     'border.muted',
     'border.default',
     'border.strong',
     'border.elevated',
     'border.disabled',
-    'border.focus',
+    'border.interactive',
     'divider.muted',
     'divider.default',
     'divider.strong',
     'focus.ring.color',
     'focus.ring.width',
     'focus.ring.shadow',
-    'focus.ring.offset',
+    'focus.ring.offsetColor',
     'status.success.fg',
     'status.success.bg',
     'status.success.border',
     'status.success.ring',
-    'status.success.strong',
+    'status.success.emphasisFg',
     'status.error.fg',
     'status.error.bg',
     'status.error.border',
     'status.error.ring',
-    'status.error.strong',
+    'status.error.emphasisFg',
     'status.warning.fg',
     'status.warning.bg',
     'status.warning.border',
     'status.warning.ring',
-    'status.warning.strong',
+    'status.warning.emphasisFg',
     'status.info.fg',
     'status.info.bg',
     'status.info.border',
     'status.info.ring',
-    'status.info.strong',
+    'status.info.emphasisFg',
     'overlay.backdrop',
     'overlay.tooltip.bg',
     'overlay.tooltip.fg',
     'overlay.tooltip.border',
-    'overlay.popover.bg',
-    'overlay.popover.border',
-    'overlay.modal.bg',
-    'overlay.modal.border',
+    'overlay.floating.bg',
+    'overlay.floating.border',
+    'overlay.dialog.bg',
+    'overlay.dialog.border',
 ];
 export const componentTokenFactoryModel = {
     canonicalName: 'create<Component>Tokens',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.98.5",
+  "version": "2.98.7",
   "description": "Design tokens for Vellira Design System",
   "keywords": [
     "vellira",

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

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly active: {
-        readonly bg: "#3D3754";
-        readonly fg: "#F4F1FB";
-    };
-    readonly brandHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#D4CCFF";
-    };
-    readonly tabHover: {
-        readonly fg: "#D4CCFF";
-    };
-    readonly tabFocus: {
-        readonly ring: "#F59E0B";
-    };
-    readonly optionHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly optionActive: {
-        readonly bg: "#3D3754";
-        readonly fg: "#F4F1FB";
-    };
-    readonly triggerHover: {
-        readonly bg: "#2F2A42";
-        readonly fg: "#F4F1FB";
-    };
-    readonly border: "#3D3754";
-};
-//# sourceMappingURL=navigation.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/navigation.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCb,CAAC"}

package/dist/dark/semantic/navigation.js

@@ -1,37 +0,0 @@
-import { colors } from '../../primitives/colors.js';
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: colors.primary[200],
-    },
-    tabHover: {
-        fg: colors.primary[200],
-    },
-    tabFocus: {
-        ring: colors.warning[500],
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    border: border.muted,
-};

package/dist/highContrast/semantic/navigation.d.ts

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly active: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly brandHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FCD34D";
-    };
-    readonly tabHover: {
-        readonly fg: "#FCD34D";
-    };
-    readonly tabFocus: {
-        readonly ring: "#FBBF24";
-    };
-    readonly optionHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly optionActive: {
-        readonly bg: "#374151";
-        readonly fg: "#FFFFFF";
-    };
-    readonly triggerHover: {
-        readonly bg: "#374151";
-        readonly fg: "#FCD34D";
-    };
-    readonly border: "#9CA3AF";
-};
-//# sourceMappingURL=navigation.d.ts.map

package/dist/highContrast/semantic/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/navigation.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC"}

package/dist/highContrast/semantic/navigation.js

@@ -1,36 +0,0 @@
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    tabHover: {
-        fg: text.interactiveHover,
-    },
-    tabFocus: {
-        ring: text.interactive,
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    border: border.default,
-};

package/dist/light/semantic/navigation.d.ts

@@ -1,34 +0,0 @@
-export declare const navigation: {
-    readonly hover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#3D3754";
-    };
-    readonly active: {
-        readonly bg: "#EEE8FA";
-        readonly fg: "#3D3754";
-    };
-    readonly brandHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#402C9F";
-    };
-    readonly tabHover: {
-        readonly fg: "#402C9F";
-    };
-    readonly tabFocus: {
-        readonly ring: "#5037C8";
-    };
-    readonly optionHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#3D3754";
-    };
-    readonly optionActive: {
-        readonly bg: "#EEE8FA";
-        readonly fg: "#3D3754";
-    };
-    readonly triggerHover: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#402C9F";
-    };
-    readonly border: "#E4DDF4";
-};
-//# sourceMappingURL=navigation.d.ts.map

package/dist/light/semantic/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/navigation.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC"}

package/dist/light/semantic/navigation.js

@@ -1,37 +0,0 @@
-import { colors } from '../../primitives/colors.js';
-import { border } from './border.js';
-import { surface } from './surface.js';
-import { text } from './text.js';
-export const navigation = {
-    hover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    active: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    brandHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    tabHover: {
-        fg: text.interactiveHover,
-    },
-    tabFocus: {
-        ring: colors.primary[700],
-    },
-    optionHover: {
-        bg: surface.hover,
-        fg: text.primary,
-    },
-    optionActive: {
-        bg: surface.active,
-        fg: text.primary,
-    },
-    triggerHover: {
-        bg: surface.hover,
-        fg: text.interactiveHover,
-    },
-    border: border.muted,
-};