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

package/custom-elements.json

@@ -2831,9 +2831,13 @@
               "default": "var(--hx-color-action-primary-bg)"
             },
             {
-              "description": "Hover background 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": "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",
@@ -2869,6 +2873,16 @@
               "name": "--hx-button-inverted-color",
               "default": "var(--hx-color-text-inverse)"
             },
+            {
+              "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": "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": "Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).",
               "name": "--hx-button-inverted-ghost-hover-bg",
@@ -2892,15 +2906,15 @@
               "name": "--hx-color-action-primary-bg-active"
             },
             {
-              "description": "Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark).",
+              "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": "Secondary/outline variant border.",
+              "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": "Secondary/outline variant hover fill.",
+              "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"
             },
             {
@@ -2923,6 +2937,14 @@
               "description": "Danger variant active fill.",
               "name": "--hx-color-action-danger-bg-active"
             },
+            {
+              "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": "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": "Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).",
               "name": "--hx-color-text-on-primary"
@@ -3113,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
             },
@@ -3271,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"
             },
@@ -29740,7 +29762,7 @@
               "name": "--hx-color-error-text"
             },
             {
-              "description": "Error border primitive fallback inside the focus-state cascade.",
+              "description": "Error border primitive fallback inside the invalid-state cascade.",
               "name": "--hx-color-error-600"
             }
           ],

package/dist/components/hx-button/hx-button.d.ts

@@ -28,7 +28,8 @@ declare const HelixButton_base: typeof HelixElement;
  * @csspart spinner - The loading spinner SVG element.
  *
  * @cssprop [--hx-button-bg=var(--hx-color-action-primary-bg)] - Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).
- * @cssprop [--hx-button-hover-bg] - Hover background override; when set, overrides the variant default hover background from outside the shadow DOM.
+ * @cssprop [--hx-button-hover-bg] - 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.
+ * @cssprop [--hx-button-active-bg] - 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.
  * @cssprop [--hx-button-color=var(--hx-color-text-on-primary)] - Button text color (variants route through text.on-{role} / text.on-{role}-strong).
  * @cssprop [--hx-button-border-color=transparent] - Button border color (secondary/outline variants route through action.secondary.border).
  * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.
@@ -37,20 +38,24 @@ declare const HelixButton_base: typeof HelixElement;
  * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.
  *
  * @cssprop [--hx-button-inverted-color=var(--hx-color-text-inverse)] - Text color when inverted (resolves to neutral-0).
+ * @cssprop [--hx-button-inverted-primary-interactive-color=var(--hx-color-text-on-primary)] - 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.
+ * @cssprop [--hx-button-inverted-danger-interactive-color=var(--hx-color-text-on-error)] - 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.
  * @cssprop [--hx-button-inverted-ghost-hover-bg=var(--hx-color-border-on-dark-default)] - Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).
  * @cssprop [--hx-button-inverted-focus-ring-color=var(--hx-color-border-on-dark-strong)] - Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).
  *
  * @cssprop [--hx-color-action-primary-bg] - Primary variant resting fill (3.2.1 semantic action layer).
  * @cssprop [--hx-color-action-primary-bg-hover] - Primary variant hover fill.
  * @cssprop [--hx-color-action-primary-bg-active] - Primary variant active/pressed fill.
- * @cssprop [--hx-color-action-secondary-fg] - Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark).
- * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border.
- * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill.
+ * @cssprop [--hx-color-action-secondary-fg] - 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.
+ * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).
+ * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).
  * @cssprop [--hx-color-action-ghost-fg] - Ghost variant fg.
  * @cssprop [--hx-color-action-ghost-bg-hover] - Ghost variant hover fill.
  * @cssprop [--hx-color-action-danger-bg] - Danger variant resting fill.
  * @cssprop [--hx-color-action-danger-bg-hover] - Danger variant hover fill.
  * @cssprop [--hx-color-action-danger-bg-active] - Danger variant active fill.
+ * @cssprop [--hx-color-action-primary-bg-inverted-hover] - Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).
+ * @cssprop [--hx-color-action-danger-bg-inverted-hover] - Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).
  * @cssprop [--hx-color-text-on-primary] - Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).
  * @cssprop [--hx-color-text-on-primary-strong] - Foreground for primary-hover fill (resolves to neutral-0 across modes).
  * @cssprop [--hx-color-text-on-error] - Foreground for danger fill (resolves to neutral-900).
@@ -121,6 +126,16 @@ export declare class HelixButton extends HelixButton_base {
     /**
      * When true, flips button colors for placement on dark or gradient backgrounds.
      * Forces text to white and adjusts hover/focus ring colors across all variants.
+     *
+     * **Mode scope:** `[inverted]` is validated for placement on a dark *region*
+     * within a light-mode-active page (hero banners, gradient sections, dark
+     * cards). It is NOT validated for use within a dark-mode-active root
+     * context: in dark mode, `surface.inverse` flips to a light surface
+     * (neutral-100), and the lifted `-400` hover/active fills lose UI-floor
+     * contrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1
+     * floor). Mode-aware fill stops + foreground for the dark-mode-inverted
+     * combination are tracked as a 3.2.x follow-up.
+     *
      * @attr inverted
      */
     inverted: boolean;

package/dist/components/hx-button/hx-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hx-button.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9E,OAAO,4CAA4C,CAAC;AAIpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,6DAA6D;AAC7D,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,UAAU,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,WAAY,SAAQ,gBAAgC;IAM/D,OAAgB,MAAM,4BAAuB;IAI7C,gBAAgB;IAChB,OAAgB,cAAc,UAAQ;IAItC;;;OAGG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAa;IAE3F;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAEtC;;;;OAIG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;;;;;;OAQG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;;;OAIG;IACH,OAAO,KAAK,eAAe,GAE1B;cAIkB,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM3D,gBAAgB;IAChB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAO5B;IAGX,OAAO,CAAC,qBAAqB,CAAS;IAE7B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe3D,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB/D,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAoBhC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAgCpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IA6BtB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAiBX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,WAAW,CAAC;KAC1B;IACD,UAAU,mBAAmB;QAC3B,UAAU,EAAE,WAAW,CAAC;YAAE,aAAa,EAAE,UAAU,CAAA;SAAE,CAAC,CAAC;KACxD;CACF"}
+{"version":3,"file":"hx-button.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9E,OAAO,4CAA4C,CAAC;AAIpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,6DAA6D;AAC7D,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,UAAU,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,qBACa,WAAY,SAAQ,gBAAgC;IAM/D,OAAgB,MAAM,4BAAuB;IAI7C,gBAAgB;IAChB,OAAgB,cAAc,UAAQ;IAItC;;;OAGG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAa;IAE3F;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAEtC;;;;OAIG;IAEH,IAAI,UAAS;IAEb;;;;;;;;;;;;;;OAcG;IAEH,QAAQ,UAAS;IAEjB;;;;;;;;OAQG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;;;OAIG;IACH,OAAO,KAAK,eAAe,GAE1B;cAIkB,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM3D,gBAAgB;IAChB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAO5B;IAGX,OAAO,CAAC,qBAAqB,CAAS;IAE7B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe3D,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB/D,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAoBhC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAgCpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IA6BtB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAiBX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,WAAW,CAAC;KAC1B;IACD,UAAU,mBAAmB;QAC3B,UAAU,EAAE,WAAW,CAAC;YAAE,aAAa,EAAE,UAAU,CAAA;SAAE,CAAC,CAAC;KACxD;CACF"}

package/dist/components/hx-button/hx-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAuW7B,CAAC"}
+{"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA4Y7B,CAAC"}

package/dist/components/hx-button/index.js

@@ -1,4 +1,4 @@
-import { H as e } from "../../shared/hx-button-D3Royxqp.js";
+import { H as e } from "../../shared/hx-button-ebUV8KhT.js";
 export {
   e as HelixButton
 };

package/dist/components/hx-side-nav/index.js

@@ -1,4 +1,4 @@
-import { H as i, a as x } from "../../shared/hx-nav-item-C9zXD1zK.js";
+import { H as i, a as x } from "../../shared/hx-nav-item-CvTxO3Sa.js";
 export {
   i as HelixNavItem,
   x as HelixSideNav

package/dist/components/hx-text-input/hx-text-input.d.ts

@@ -53,7 +53,7 @@ declare const HelixTextInput_base: typeof HelixElement & (new (...args: any[]) =
  * @cssprop [--hx-color-text-strong] - Resting input text + label color (semantic).
  * @cssprop [--hx-color-border-strong] - Resting border color (semantic).
  * @cssprop [--hx-color-error-text] - Error state text + border color (semantic).
- * @cssprop [--hx-color-error-600] - Error border primitive fallback inside the focus-state cascade.
+ * @cssprop [--hx-color-error-600] - Error border primitive fallback inside the invalid-state cascade.
  */
 export declare class HelixTextInput extends HelixTextInput_base {
     static styles: import('lit').CSSResult[];

package/dist/css/helix-all.css

@@ -1279,9 +1279,46 @@
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
+  }
+
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
   }
 
   /* Secondary inverted — white border and translucent hover fill */

package/dist/css/helix-core.css

@@ -602,9 +602,46 @@
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
+  }
+
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
   }
 
   /* Secondary inverted — white border and translucent hover fill */

package/dist/css/helix-tokens.css

@@ -141,6 +141,7 @@
   --hx-color-action-danger-bg: var(--hx-color-error-500);
   --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
   --hx-color-action-danger-bg-active: var(--hx-color-error-700);
+  --hx-color-action-danger-bg-inverted-hover: var(--hx-color-error-400);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
   --hx-body-font-family: var(--hx-font-family-sans);

package/dist/css/hx-button.css

@@ -253,9 +253,46 @@
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
+  }
+
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
   }
 
   /* Secondary inverted — white border and translucent hover fill */

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-25T23:24:47.443Z */
+/* index.css — generated 2026-04-26T02:36:59.940Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';

package/dist/css/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-04-25T23:24:47.443Z",
+  "generated": "2026-04-26T02:36:59.939Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -264,6 +264,7 @@
         "--hx-color-action-danger-bg",
         "--hx-color-action-danger-bg-active",
         "--hx-color-action-danger-bg-hover",
+        "--hx-color-action-danger-bg-inverted-hover",
         "--hx-color-action-ghost-bg-hover",
         "--hx-color-action-ghost-fg",
         "--hx-color-action-primary-bg",

package/dist/index.js

@@ -6,7 +6,7 @@ import { H as v } from "./shared/hx-avatar-C9hOmlAb.js";
 import { H as E } from "./shared/hx-badge-CQXgOXJM.js";
 import { H as k } from "./shared/hx-banner-DT7Zn9Bo.js";
 import { H as B, a as P } from "./shared/hx-breadcrumb-item-COeYcB2x.js";
-import { H as M } from "./shared/hx-button-D3Royxqp.js";
+import { H as M } from "./shared/hx-button-ebUV8KhT.js";
 import { H as N } from "./shared/hx-button-group-BI-QBqmO.js";
 import { H as A } from "./shared/hx-card-CU1QnjNb.js";
 import { H as G, a as U } from "./shared/hx-carousel-item-BaE4hpLl.js";
@@ -53,7 +53,7 @@ import { H as So } from "./shared/hx-prose-BThYcASV.js";
 import { H as To, a as bo } from "./shared/hx-radio-N8xgDd_5.js";
 import { H as go } from "./shared/hx-rating-i2FL1WUN.js";
 import { H as vo } from "./shared/hx-select-vgaBo1Ai.js";
-import { H as Eo, a as Do } from "./shared/hx-nav-item-C9zXD1zK.js";
+import { H as Eo, a as Do } from "./shared/hx-nav-item-CvTxO3Sa.js";
 import { H as wo } from "./shared/hx-skeleton-Cnieh5Uc.js";
 import { H as Po } from "./shared/hx-slider-ydBamYhd.js";
 import { H as Mo } from "./shared/hx-spinner-DL5AYr16.js";

package/dist/shared/{hx-button-D3Royxqp.js → hx-button-ebUV8KhT.js}

@@ -1,11 +1,11 @@
-import { css as f, html as d, nothing as s } from "lit";
-import { property as a, customElement as v } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
+import { css as v, html as d, nothing as s } from "lit";
+import { property as a, customElement as f } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import { d as p } from "./dev-warn-YlwPHjtX.js";
-import { m as x } from "./aria-delegation-Doq6RRUy.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-const m = f`
+import { m as g } from "./aria-delegation-Doq6RRUy.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+const m = v`
   :host {
     display: inline-block;
   }
@@ -260,9 +260,46 @@ const m = f`
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
+  }
+
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
   }
 
   /* Secondary inverted — white border and translucent hover fill */
@@ -365,12 +402,12 @@ const m = f`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, r, l, i) => {
-  for (var o = i > 1 ? void 0 : i ? _(r, l) : r, h = t.length - 1, b; h >= 0; h--)
-    (b = t[h]) && (o = (i ? b(r, l, o) : b(o)) || o);
-  return i && o && y(r, l, o), o;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
+  for (var o = i > 1 ? void 0 : i ? _(r, h) : r, l = t.length - 1, b; l >= 0; l--)
+    (b = t[l]) && (o = (i ? b(r, h, o) : b(o)) || o);
+  return i && o && y(r, h, o), o;
 };
-let e = class extends x(g) {
+let e = class extends g(x) {
   constructor() {
     super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.full = !1, this.inverted = !1, this.accessibleLabel = "", this._emptySlotWarnEmitted = !1;
   }
@@ -393,8 +430,8 @@ let e = class extends x(g) {
     const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     !((r == null ? void 0 : r.assignedNodes({ flatten: !0 })) ?? []).some(
       (o) => {
-        var h;
-        return o.nodeType !== Node.TEXT_NODE || (((h = o.textContent) == null ? void 0 : h.trim().length) ?? 0) > 0;
+        var l;
+        return o.nodeType !== Node.TEXT_NODE || (((l = o.textContent) == null ? void 0 : l.trim().length) ?? 0) > 0;
       }
     ) && !this._effectiveLabel && (this._emptySlotWarnEmitted = !0);
   }
@@ -410,11 +447,11 @@ let e = class extends x(g) {
   // ─── Slot Handlers ───
   /** @internal */
   _handleDefaultSlotChange(t) {
-    const l = t.target.assignedNodes({ flatten: !0 }).some((i) => {
+    const h = t.target.assignedNodes({ flatten: !0 }).some((i) => {
       var o;
       return i.nodeType !== Node.TEXT_NODE || (((o = i.textContent) == null ? void 0 : o.trim().length) ?? 0) > 0;
     });
-    !l && !this._effectiveLabel && this._emptySlotWarnEmitted, l && (this._emptySlotWarnEmitted = !1);
+    !h && !this._effectiveLabel && this._emptySlotWarnEmitted, h && (this._emptySlotWarnEmitted = !1);
   }
   // ─── Event Handling ───
   /**
@@ -496,9 +533,9 @@ let e = class extends x(g) {
     return this.href !== void 0 ? d`
         <a
           part="button"
-          class=${u(t)}
-          href=${this.disabled || this.loading ? s : c(this.href)}
-          target=${c(this.target)}
+          class=${c(t)}
+          href=${this.disabled || this.loading ? s : u(this.href)}
+          target=${u(this.target)}
           rel=${this.target === "_blank" ? "noopener noreferrer" : s}
           aria-label=${this._effectiveLabel || s}
           aria-disabled=${this.disabled ? "true" : s}
@@ -511,7 +548,7 @@ let e = class extends x(g) {
       ` : d`
       <button
         part="button"
-        class=${u(t)}
+        class=${c(t)}
         ?disabled=${this.disabled}
         type=${this.type}
         aria-label=${this._effectiveLabel || s}
@@ -570,9 +607,9 @@ n([
   a({ type: String, attribute: "accessible-label" })
 ], e.prototype, "accessibleLabel", 2);
 e = n([
-  v("hx-button")
+  f("hx-button")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-button-D3Royxqp.js.map
+//# sourceMappingURL=hx-button-ebUV8KhT.js.map