@helixui/library 3.1.0-next.66 → 3.1.0-next.67

package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hx-code-snippet.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-code-snippet/hx-code-snippet.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAyMlC,CAAC"}
+{"version":3,"file":"hx-code-snippet.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-code-snippet/hx-code-snippet.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA4MlC,CAAC"}

package/dist/components/hx-code-snippet/index.js

@@ -1,4 +1,4 @@
-import { H as p } from "../../shared/hx-code-snippet-B7wUKzyb.js";
+import { H as p } from "../../shared/hx-code-snippet-DssubcYM.js";
 export {
   p as HelixCodeSnippet
 };

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

@@ -1,4 +1,4 @@
-import { H as i } from "../../shared/hx-rating-C3E3ENJb.js";
+import { H as i } from "../../shared/hx-rating-BO9kl9pb.js";
 export {
   i as HelixRating
 };

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

@@ -1,4 +1,4 @@
-import { H as e } from "../../shared/hx-stat-BTpykQAt.js";
+import { H as e } from "../../shared/hx-stat-DTRyLF3a.js";
 export {
   e as HelixStat
 };

package/dist/components/hx-status-indicator/index.js

@@ -1,4 +1,4 @@
-import { H as o } from "../../shared/hx-status-indicator-X2QEWNFt.js";
+import { H as o } from "../../shared/hx-status-indicator-DIGRGM2G.js";
 export {
   o as HelixStatusIndicator
 };

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

@@ -1,4 +1,4 @@
-import { H as p, a as s } from "../../shared/hx-step-CRNQlmSo.js";
+import { H as p, a as s } from "../../shared/hx-step-D15gtcLm.js";
 export {
   p as HelixStep,
   s as HelixSteps

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

@@ -1,4 +1,4 @@
-import { H as l, a as H, b, c as x, d as i, e as s, f as T } from "../../shared/hx-td-Bra35cH4.js";
+import { H as l, a as H, b, c as x, d as i, e as s, f as T } from "../../shared/hx-td-B737T0_c.js";
 export {
   l as HelixTable,
   H as HelixTableBody,

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

@@ -1 +1 @@
-{"version":3,"file":"hx-theme.d.ts","sourceRoot":"","sources":["../../../src/components/hx-theme/hx-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAAC;AAmLpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,OAAgB,MAAM,4BAAsB;IAE5C;;;;;;;OAOG;IAEH,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAAW;IAK7D;;;;;;;;;;;;;;;;;OAiBG;IAEH,KAAK,SAAM;IAEX;;;;;;;;;;;OAWG;IAEH,MAAM,EAAE,UAAU,CAAU;IAE5B;;;;;;OAMG;IAEH,OAAO,EAAE,WAAW,CAAiB;IAErC,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAA+B;IAClD,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAA6B;IAClD,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAA8B;IACjD,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAA8B;IACnD,4DAA4D;IAC5D,OAAO,CAAC,YAAY,CAA+B;IACnD,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAA6B;IAE1C,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWjD,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA2B5C,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACH,IAAI,cAAc,IAAI,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAMhE;IAED;;;;OAIG;IACH,IAAI,eAAe,IAAI,MAAM,GAAG,SAAS,CASxC;IAED,gBAAgB;IAChB,OAAO,CAAC,eAAe;IAcvB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAUzB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAQzB,+EAA+E;IAC/E,OAAO,CAAC,kBAAkB;IAS1B,gBAAgB;IAChB,OAAO,CAAC,kBAAkB;IAQ1B,+EAA+E;IAC/E,OAAO,CAAC,oBAAoB;IAO5B,gBAAgB;IAChB,OAAO,CAAC,oBAAoB;IAyB5B,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAcZ,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF;AAED,6FAA6F;AAC7F,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC"}
+{"version":3,"file":"hx-theme.d.ts","sourceRoot":"","sources":["../../../src/components/hx-theme/hx-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAAC;AAqLpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,OAAgB,MAAM,4BAAsB;IAE5C;;;;;;;OAOG;IAEH,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAAW;IAK7D;;;;;;;;;;;;;;;;;OAiBG;IAEH,KAAK,SAAM;IAEX;;;;;;;;;;;OAWG;IAEH,MAAM,EAAE,UAAU,CAAU;IAE5B;;;;;;OAMG;IAEH,OAAO,EAAE,WAAW,CAAiB;IAErC,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAA+B;IAClD,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAA6B;IAClD,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAA8B;IACjD,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAA8B;IACnD,4DAA4D;IAC5D,OAAO,CAAC,YAAY,CAA+B;IACnD,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAA6B;IAE1C,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWjD,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA2B5C,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACH,IAAI,cAAc,IAAI,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,MAAM,CAMhE;IAED;;;;OAIG;IACH,IAAI,eAAe,IAAI,MAAM,GAAG,SAAS,CASxC;IAED,gBAAgB;IAChB,OAAO,CAAC,eAAe;IAcvB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAUzB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAQzB,+EAA+E;IAC/E,OAAO,CAAC,kBAAkB;IAS1B,gBAAgB;IAChB,OAAO,CAAC,kBAAkB;IAQ1B,+EAA+E;IAC/E,OAAO,CAAC,oBAAoB;IAO5B,gBAAgB;IAChB,OAAO,CAAC,oBAAoB;IAyB5B,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAcZ,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF;AAED,6FAA6F;AAC7F,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC"}

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

@@ -1,4 +1,4 @@
-import { H as o } from "../../shared/hx-theme-DP4oPU1i.js";
+import { H as o } from "../../shared/hx-theme-BiyQ7UUK.js";
 export {
   o as HelixTheme
 };

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

@@ -1,4 +1,4 @@
-import { H as s, a as o, t as e } from "../../shared/toast-factory-BPPnG3mM.js";
+import { H as s, a as o, t as e } from "../../shared/toast-factory-M373dTcz.js";
 export {
   s as HelixToast,
   o as HelixToastStack,

package/dist/css/helix-all.css

@@ -2504,8 +2504,8 @@
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0f172a));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -2515,7 +2515,7 @@
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0f172a));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -2555,7 +2555,7 @@
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -2569,10 +2569,11 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -2587,8 +2588,9 @@
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    border-color: var(--hx-color-border-default, #e2e8f0);
   }
 
   .code-snippet__copy-button:focus-visible {
@@ -2612,9 +2614,10 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
+    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -2624,8 +2627,8 @@
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
   }
 
   .code-snippet__expand-button:focus-visible {
@@ -2640,7 +2643,7 @@
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #64748b));
     user-select: none;
     text-align: end;
   }
@@ -8000,7 +8003,7 @@ export const helixGridItemStyles = css`
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     line-height: 1;
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
@@ -8051,7 +8054,7 @@ export const helixGridItemStyles = css`
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }
@@ -9819,7 +9822,7 @@ export const helixGridItemStyles = css`
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-stat-color, var(--hx-color-text-strong, #1e293b));
   }
 
   /* ─── Size Variants ─── */
@@ -9863,13 +9866,13 @@ export const helixGridItemStyles = css`
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -10034,7 +10037,7 @@ export const helixGridItemStyles = css`
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #334155));
     line-height: 1;
     white-space: nowrap;
   }
@@ -10535,7 +10538,7 @@ export const helixStructuredListRowStyles = css`
     text-align: start;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-table-header-color, var(--hx-color-text-strong, #1e293b));
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -10551,12 +10554,12 @@ export const helixStructuredListRowStyles = css`
 
   /* Header background via CSS vars that cascade through display:contents */
   ::slotted(hx-thead) {
-    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
   :host([variant='striped']) ::slotted(hx-tbody) {
-    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -10566,7 +10569,7 @@ export const helixStructuredListRowStyles = css`
   :host([variant='striped']) ::slotted(hx-thead),
   :host([variant='default']) ::slotted(hx-tbody),
   :host([variant='default']) ::slotted(hx-thead) {
-    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -10582,7 +10585,7 @@ export const helixStructuredListRowStyles = css`
     --_hx-table-th-position: sticky;
     --_hx-table-th-top: 0;
     --_hx-table-th-z-index: 1;
-    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* ─── Focus ─── */
@@ -11857,8 +11860,8 @@ export const helixTableSectionBaseStyles = css`
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -11885,22 +11888,22 @@ export const helixTableSectionBaseStyles = css`
 
   .toast--success {
     --hx-toast-bg: var(--hx-color-success-600, #15803d);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-success, #ffffff);
   }
 
   .toast--warning {
     --hx-toast-bg: var(--hx-color-warning-500, #d97706);
-    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toast-color: var(--hx-color-text-on-warning, #0f172a);
   }
 
   .toast--danger {
     --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-error, #ffffff);
   }
 
   .toast--info {
     --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-primary, #ffffff);
   }
 
   /* ─── Severity Label (WCAG 1.4.1) ─── */

package/dist/css/helix-data.css

@@ -15,8 +15,8 @@
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0f172a));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -26,7 +26,7 @@
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0f172a));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -66,7 +66,7 @@
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -80,10 +80,11 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -98,8 +99,9 @@
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    border-color: var(--hx-color-border-default, #e2e8f0);
   }
 
   .code-snippet__copy-button:focus-visible {
@@ -123,9 +125,10 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
+    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -135,8 +138,8 @@
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
   }
 
   .code-snippet__expand-button:focus-visible {
@@ -151,7 +154,7 @@
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #64748b));
     user-select: none;
     text-align: end;
   }
@@ -614,7 +617,7 @@ export const helixStructuredListRowStyles = css`
     text-align: start;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-table-header-color, var(--hx-color-text-strong, #1e293b));
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -630,12 +633,12 @@ export const helixStructuredListRowStyles = css`
 
   /* Header background via CSS vars that cascade through display:contents */
   ::slotted(hx-thead) {
-    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
   :host([variant='striped']) ::slotted(hx-tbody) {
-    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -645,7 +648,7 @@ export const helixStructuredListRowStyles = css`
   :host([variant='striped']) ::slotted(hx-thead),
   :host([variant='default']) ::slotted(hx-tbody),
   :host([variant='default']) ::slotted(hx-thead) {
-    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -661,7 +664,7 @@ export const helixStructuredListRowStyles = css`
     --_hx-table-th-position: sticky;
     --_hx-table-th-top: 0;
     --_hx-table-th-z-index: 1;
-    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* ─── Focus ─── */

package/dist/css/helix-feedback.css

@@ -888,7 +888,7 @@
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-stat-color, var(--hx-color-text-strong, #1e293b));
   }
 
   /* ─── Size Variants ─── */
@@ -932,13 +932,13 @@
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -1103,7 +1103,7 @@
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #334155));
     line-height: 1;
     white-space: nowrap;
   }
@@ -1190,8 +1190,8 @@
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -1218,22 +1218,22 @@
 
   .toast--success {
     --hx-toast-bg: var(--hx-color-success-600, #15803d);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-success, #ffffff);
   }
 
   .toast--warning {
     --hx-toast-bg: var(--hx-color-warning-500, #d97706);
-    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toast-color: var(--hx-color-text-on-warning, #0f172a);
   }
 
   .toast--danger {
     --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-error, #ffffff);
   }
 
   .toast--info {
     --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-color: var(--hx-color-text-on-primary, #ffffff);
   }
 
   /* ─── Severity Label (WCAG 1.4.1) ─── */

package/dist/css/helix-forms.css

@@ -2537,7 +2537,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     line-height: 1;
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
@@ -2588,7 +2588,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }

package/dist/css/hx-code-snippet.css

@@ -13,8 +13,8 @@
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0f172a));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -24,7 +24,7 @@
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0f172a));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -64,7 +64,7 @@
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -78,10 +78,11 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -96,8 +97,9 @@
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    border-color: var(--hx-color-border-default, #e2e8f0);
   }
 
   .code-snippet__copy-button:focus-visible {
@@ -121,9 +123,10 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
+    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -133,8 +136,8 @@
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-inverse, #0f172a);
+    color: var(--hx-color-text-inverse, #ffffff);
   }
 
   .code-snippet__expand-button:focus-visible {
@@ -149,7 +152,7 @@
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #64748b));
     user-select: none;
     text-align: end;
   }

package/dist/css/hx-rating.css

@@ -33,7 +33,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     line-height: 1;
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
@@ -84,7 +84,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }

package/dist/css/hx-stat.css

@@ -8,7 +8,7 @@
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-stat-color, var(--hx-color-text-strong, #1e293b));
   }
 
   /* ─── Size Variants ─── */
@@ -52,13 +52,13 @@
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }