@helixui/library 3.2.0-next.85 → 3.2.0-next.91

package/custom-elements.json

@@ -2826,21 +2826,25 @@
           "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 (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.",
               "name": "--hx-button-hover-bg"
             },
             {
-              "description": "Button text color.",
+              "description": "Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.",
+              "name": "--hx-button-active-bg"
+            },
+            {
+              "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 +2869,121 @@
               "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"
-            },
-            {
-              "description": "Ghost hover bg when inverted.",
-              "name": "--hx-button-inverted-ghost-hover-bg",
-              "default": "rgba(255,255,255,0.15)"
-            },
-            {
-              "description": "Focus ring color when inverted.",
-              "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"
+              "default": "var(--hx-color-text-inverse)"
             },
             {
-              "description": "CSS filter.",
-              "name": "--hx-filter-brightness-active"
+              "description": "Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.",
+              "name": "--hx-button-inverted-primary-interactive-color",
+              "default": "var(--hx-color-text-on-primary)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
+              "description": "Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.",
+              "name": "--hx-button-inverted-danger-interactive-color",
+              "default": "var(--hx-color-text-on-error)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
+              "description": "Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).",
+              "name": "--hx-button-inverted-ghost-hover-bg",
+              "default": "var(--hx-color-border-on-dark-default)"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
+              "description": "Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).",
+              "name": "--hx-button-inverted-focus-ring-color",
+              "default": "var(--hx-color-border-on-dark-strong)"
             },
             {
-              "description": "Minimum touch target size.",
-              "name": "--hx-touch-target-min"
+              "description": "Primary variant resting fill (3.2.1 semantic action layer).",
+              "name": "--hx-color-action-primary-bg"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
+              "description": "Primary variant hover fill.",
+              "name": "--hx-color-action-primary-bg-hover"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-md"
+              "description": "Primary variant active/pressed fill.",
+              "name": "--hx-color-action-primary-bg-active"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-10"
+              "description": "Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.",
+              "name": "--hx-color-action-secondary-fg"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-6"
+              "description": "Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).",
+              "name": "--hx-color-action-secondary-border"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-lg"
+              "description": "Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).",
+              "name": "--hx-color-action-secondary-bg-hover"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-12"
+              "description": "Ghost variant fg.",
+              "name": "--hx-color-action-ghost-fg"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-50"
+              "description": "Ghost variant hover fill.",
+              "name": "--hx-color-action-ghost-bg-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-100"
+              "description": "Danger variant resting fill.",
+              "name": "--hx-color-action-danger-bg"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-900"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-200"
+              "description": "Danger variant hover fill.",
+              "name": "--hx-color-action-danger-bg-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-error-500"
+              "description": "Danger variant active fill.",
+              "name": "--hx-color-action-danger-bg-active"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-error-600"
+              "description": "Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).",
+              "name": "--hx-color-action-primary-bg-inverted-hover"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-300"
+              "description": "Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).",
+              "name": "--hx-color-action-danger-bg-inverted-hover"
             },
             {
-              "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": [
@@ -3197,7 +3135,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, flips button colors for placement on dark or gradient backgrounds.\nForces text to white and adjusts hover/focus ring colors across all variants.",
+              "description": "When true, flips button colors for placement on dark or gradient backgrounds.\nForces text to white and adjusts hover/focus ring colors across all variants.\n\n**Mode scope:** `[inverted]` is validated for placement on a dark *region*\nwithin a light-mode-active page (hero banners, gradient sections, dark\ncards). It is NOT validated for use within a dark-mode-active root\ncontext: in dark mode, `surface.inverse` flips to a light surface\n(neutral-100), and the lifted `-400` hover/active fills lose UI-floor\ncontrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\nfloor). Mode-aware fill stops + foreground for the dark-mode-inverted\ncombination are tracked as a 3.2.x follow-up.",
               "attribute": "inverted",
               "reflects": true
             },
@@ -3355,7 +3293,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, flips button colors for placement on dark or gradient backgrounds.\nForces text to white and adjusts hover/focus ring colors across all variants.",
+              "description": "When true, flips button colors for placement on dark or gradient backgrounds.\nForces text to white and adjusts hover/focus ring colors across all variants.\n\n**Mode scope:** `[inverted]` is validated for placement on a dark *region*\nwithin a light-mode-active page (hero banners, gradient sections, dark\ncards). It is NOT validated for use within a dark-mode-active root\ncontext: in dark mode, `surface.inverse` flips to a light surface\n(neutral-100), and the lifted `-400` hover/active fills lose UI-floor\ncontrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\nfloor). Mode-aware fill stops + foreground for the dark-mode-inverted\ncombination are tracked as a 3.2.x follow-up.",
               "fieldName": "inverted",
               "attribute": "inverted"
             },
@@ -23091,80 +23029,20 @@
               "default": "var(--hx-color-text-inverse)"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-900"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-100"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-normal"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
-            },
-            {
-              "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": "Side-nav surface fill (resolves to neutral-900 light, near-black dark).",
+              "name": "--hx-color-surface-inverse"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
+              "description": "Side-nav text color (resolves to neutral-0).",
+              "name": "--hx-color-text-inverse"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-offset"
+              "description": "Header/footer divider border.",
+              "name": "--hx-color-border-strong"
             },
             {
-              "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 +29718,52 @@
               "default": "1.125rem"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-disabled"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-focus-ring-color"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
+              "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": "Width.",
-              "name": "--hx-focus-ring-width"
+              "description": "Outer horizontal padding override.",
+              "name": "--hx-text-input-padding-x",
+              "default": "var(--hx-space-3)"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-opacity"
+              "description": "Outer vertical padding override.",
+              "name": "--hx-text-input-padding-y",
+              "default": "var(--hx-space-2)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
+              "description": "Outer font-size override.",
+              "name": "--hx-text-input-font-size",
+              "default": "var(--hx-font-size-md)"
             },
             {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
+              "description": "Outer sm-variant font-size override (falls through to --hx-input-sm-font-size).",
+              "name": "--hx-text-input-sm-font-size"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
+              "description": "Outer lg-variant font-size override (falls through to --hx-input-lg-font-size).",
+              "name": "--hx-text-input-lg-font-size"
             },
             {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-medium"
+              "description": "Resting field surface (semantic).",
+              "name": "--hx-color-surface-default"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-700"
+              "description": "Resting input text + label color (semantic).",
+              "name": "--hx-color-text-strong"
             },
             {
-              "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 invalid-state cascade.",
+              "name": "--hx-color-error-600"
             }
           ],
           "cssParts": [