@helixui/library 3.2.0-next.83 → 3.2.0-next.89

package/custom-elements.json

@@ -2826,21 +2826,21 @@
           "name": "HelixButton",
           "cssProperties": [
             {
-              "description": "Button background color.",
+              "description": "Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).",
               "name": "--hx-button-bg",
-              "default": "var(--hx-color-primary-500)"
+              "default": "var(--hx-color-action-primary-bg)"
             },
             {
-              "description": "Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.",
+              "description": "Hover background override; when set, overrides the variant default hover background from outside the shadow DOM.",
               "name": "--hx-button-hover-bg"
             },
             {
-              "description": "Button text color.",
+              "description": "Button text color (variants route through text.on-{role} / text.on-{role}-strong).",
               "name": "--hx-button-color",
-              "default": "var(--hx-color-neutral-0)"
+              "default": "var(--hx-color-text-on-primary)"
             },
             {
-              "description": "Button border color.",
+              "description": "Button border color (secondary/outline variants route through action.secondary.border).",
               "name": "--hx-button-border-color",
               "default": "transparent"
             },
@@ -2865,187 +2865,103 @@
               "default": "var(--hx-focus-ring-color)"
             },
             {
-              "description": "Text color when inverted.",
+              "description": "Text color when inverted (resolves to neutral-0).",
               "name": "--hx-button-inverted-color",
-              "default": "#ffffff"
+              "default": "var(--hx-color-text-inverse)"
             },
             {
-              "description": "Ghost hover bg when inverted.",
+              "description": "Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).",
               "name": "--hx-button-inverted-ghost-hover-bg",
-              "default": "rgba(255,255,255,0.15)"
+              "default": "var(--hx-color-border-on-dark-default)"
             },
             {
-              "description": "Focus ring color when inverted.",
+              "description": "Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).",
               "name": "--hx-button-inverted-focus-ring-color",
-              "default": "rgba(255,255,255,0.5)"
-            },
-            {
-              "description": "Opacity.",
-              "name": "--hx-opacity-disabled"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-md"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-primary-500"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-0"
-            },
-            {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
-            },
-            {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-semibold"
-            },
-            {
-              "description": "Line height.",
-              "name": "--hx-line-height-tight"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-focus-ring-color"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-offset"
-            },
-            {
-              "description": "CSS filter.",
-              "name": "--hx-filter-brightness-hover"
-            },
-            {
-              "description": "CSS filter.",
-              "name": "--hx-filter-brightness-active"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
-            },
-            {
-              "description": "Minimum touch target size.",
-              "name": "--hx-touch-target-min"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-md"
+              "default": "var(--hx-color-border-on-dark-strong)"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-10"
+              "description": "Primary variant resting fill (3.2.1 semantic action layer).",
+              "name": "--hx-color-action-primary-bg"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-6"
+              "description": "Primary variant hover fill.",
+              "name": "--hx-color-action-primary-bg-hover"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-lg"
+              "description": "Primary variant active/pressed fill.",
+              "name": "--hx-color-action-primary-bg-active"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-12"
+              "description": "Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark).",
+              "name": "--hx-color-action-secondary-fg"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-50"
+              "description": "Secondary/outline variant border.",
+              "name": "--hx-color-action-secondary-border"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-100"
+              "description": "Secondary/outline variant hover fill.",
+              "name": "--hx-color-action-secondary-bg-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-900"
+              "description": "Ghost variant fg.",
+              "name": "--hx-color-action-ghost-fg"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-200"
+              "description": "Ghost variant hover fill.",
+              "name": "--hx-color-action-ghost-bg-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-error-500"
+              "description": "Danger variant resting fill.",
+              "name": "--hx-color-action-danger-bg"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-error-600"
+              "description": "Danger variant hover fill.",
+              "name": "--hx-color-action-danger-bg-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-300"
+              "description": "Danger variant active fill.",
+              "name": "--hx-color-action-danger-bg-active"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-50"
+              "description": "Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).",
+              "name": "--hx-color-text-on-primary"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-600"
+              "description": "Foreground for primary-hover fill (resolves to neutral-0 across modes).",
+              "name": "--hx-color-text-on-primary-strong"
             },
             {
-              "description": "Animation duration.",
-              "name": "--hx-duration-spinner"
+              "description": "Foreground for danger fill (resolves to neutral-900).",
+              "name": "--hx-color-text-on-error"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-muted"
+              "description": "Foreground for danger-hover fill (resolves to neutral-0 across modes).",
+              "name": "--hx-color-text-on-error-strong"
             },
             {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-50"
+              "description": "Foreground for tertiary variant on surface.sunken.",
+              "name": "--hx-color-text-primary"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
+              "description": "Tertiary variant resting fill.",
+              "name": "--hx-color-surface-sunken"
             },
             {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-70"
+              "description": "Tertiary variant hover fill.",
+              "name": "--hx-color-surface-raised"
             },
             {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-15"
+              "description": "Inverted-tertiary resting border (overlay-white-10).",
+              "name": "--hx-color-border-on-dark-subtle"
             },
             {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-25"
+              "description": "Inverted-tertiary hover border + inverted-secondary/ghost hover border (overlay-white-30).",
+              "name": "--hx-color-border-on-dark-default"
             },
             {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-20"
+              "description": "Inverted focus-visible outline (overlay-white-70).",
+              "name": "--hx-color-border-on-dark-strong"
             }
           ],
           "cssParts": [
@@ -23091,80 +23007,20 @@
               "default": "var(--hx-color-text-inverse)"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-900"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-100"
+              "description": "Side-nav surface fill (resolves to neutral-900 light, near-black dark).",
+              "name": "--hx-color-surface-inverse"
             },
             {
-              "description": "Transition timing.",
-              "name": "--hx-transition-normal"
+              "description": "Side-nav text color (resolves to neutral-0).",
+              "name": "--hx-color-text-inverse"
             },
             {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
+              "description": "Header/footer divider border.",
+              "name": "--hx-color-border-strong"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-700"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-14"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-8"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-sm"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-400"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
-            },
-            {
-              "description": "Overlay color.",
-              "name": "--hx-overlay-white-10"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-focus-ring-color"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-offset"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-5"
+              "description": "Toggle button hover surface (overlay-white-10 primitive — semantic layer for inverted affordances).",
+              "name": "--hx-color-border-on-dark-subtle"
             }
           ],
           "cssParts": [
@@ -29840,124 +29696,52 @@
               "default": "1.125rem"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-disabled"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-focus-ring-color"
+              "description": "Outer border-width override (canonical hx-{tag}-* prefix; sits above --hx-input-* aliases in the cascade).",
+              "name": "--hx-text-input-border-width",
+              "default": "var(--hx-border-width-thin)"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
+              "description": "Outer horizontal padding override.",
+              "name": "--hx-text-input-padding-x",
+              "default": "var(--hx-space-3)"
             },
             {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
+              "description": "Outer vertical padding override.",
+              "name": "--hx-text-input-padding-y",
+              "default": "var(--hx-space-2)"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-opacity"
+              "description": "Outer font-size override.",
+              "name": "--hx-text-input-font-size",
+              "default": "var(--hx-font-size-md)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
+              "description": "Outer sm-variant font-size override (falls through to --hx-input-sm-font-size).",
+              "name": "--hx-text-input-sm-font-size"
             },
             {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
+              "description": "Outer lg-variant font-size override (falls through to --hx-input-lg-font-size).",
+              "name": "--hx-text-input-lg-font-size"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
+              "description": "Resting field surface (semantic).",
+              "name": "--hx-color-surface-default"
             },
             {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-medium"
+              "description": "Resting input text + label color (semantic).",
+              "name": "--hx-color-text-strong"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-700"
-            },
-            {
-              "description": "Line height.",
-              "name": "--hx-line-height-normal"
+              "description": "Resting border color (semantic).",
+              "name": "--hx-color-border-strong"
             },
             {
-              "description": "Color.",
+              "description": "Error state text + border color (semantic).",
               "name": "--hx-color-error-text"
             },
             {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-bold"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-300"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-md"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-0"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-error-500"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-500"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-md"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-800"
-            },
-            {
-              "description": "Size token.",
-              "name": "--hx-size-10"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-400"
-            },
-            {
-              "description": "Size token.",
-              "name": "--hx-size-8"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
-            },
-            {
-              "description": "Size token.",
-              "name": "--hx-size-12"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-xs"
+              "description": "Error border primitive fallback inside the focus-state cascade.",
+              "name": "--hx-color-error-600"
             }
           ],
           "cssParts": [
@@ -32109,12 +31893,12 @@
               "name": "--hx-border-radius-md"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-900"
+              "description": "Default-variant background semantic (neutral-900 anchor; flipped per mode).",
+              "name": "--hx-color-surface-inverse"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-0"
+              "description": "Default-variant foreground semantic (neutral-0 anchor; flipped per mode).",
+              "name": "--hx-color-text-inverse"
             },
             {
               "description": "CSS custom property.",
@@ -32151,20 +31935,36 @@
               "name": "--hx-transition-normal"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-success-600"
+              "description": "Success-variant background semantic (3.2.1 cascade).",
+              "name": "--hx-color-surface-success-strong"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-warning-500"
+              "description": "Warning-variant background semantic (3.2.1 cascade).",
+              "name": "--hx-color-surface-warning-strong"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-error-600"
+              "description": "Danger-variant background semantic (3.2.1 cascade).",
+              "name": "--hx-color-surface-danger-strong"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-600"
+              "description": "Info-variant background semantic (3.2.1 cascade).",
+              "name": "--hx-color-surface-info-strong"
+            },
+            {
+              "description": "Success-variant foreground semantic (neutral-0 across modes).",
+              "name": "--hx-color-text-on-success-strong"
+            },
+            {
+              "description": "Warning-variant foreground semantic (neutral-900; warning sits on lighter -500 fill).",
+              "name": "--hx-color-text-on-warning"
+            },
+            {
+              "description": "Danger-variant foreground semantic (neutral-0 across modes).",
+              "name": "--hx-color-text-on-error-strong"
+            },
+            {
+              "description": "Info-variant foreground semantic (neutral-0 across modes).",
+              "name": "--hx-color-text-on-primary-strong"
             },
             {
               "description": "Minimum touch target size.",