@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/css/hx-counter.css

@@ -0,0 +1,51 @@
+/* hx-counter — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  .counter {
+    display: inline-flex;
+    align-items: baseline;
+    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .counter--sm {
+    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+  }
+
+  .counter--md {
+    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+  }
+
+  .counter--lg {
+    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
+  }
+
+  /* ─── Screen-reader only (visually hidden live region) ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .counter {
+      /* Animation is handled in JS — reduced-motion consumers
+         will see the final value immediately via the component logic */
+    }
+  }

package/dist/css/hx-data-table.css

@@ -0,0 +1,207 @@
+/* hx-data-table — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Scroll Wrapper ─── */
+
+  .table-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ─── Table ─── */
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: var(--hx-data-table-min-width, 600px);
+  }
+
+  /* ─── Head ─── */
+
+  thead {
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  :host([sticky-header]) thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Cells ─── */
+
+  th,
+  td {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    text-align: start;
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    vertical-align: middle;
+  }
+
+  th {
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    white-space: nowrap;
+  }
+
+  td {
+    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+  }
+
+  /* ─── Checkbox Column ─── */
+
+  th.col-checkbox,
+  td.col-checkbox {
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    width: var(--hx-touch-target-min, 2.75rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    padding-inline-end: var(--hx-space-2, 0.5rem);
+  }
+
+  th.col-checkbox {
+    text-align: center;
+  }
+
+  td.col-checkbox {
+    text-align: center;
+  }
+
+  /* ─── Sort Button ─── */
+
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: inherit;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .sort-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Sort Icon ─── */
+
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .sort-icon--active {
+    opacity: var(--hx-opacity-100, 1);
+    color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .sort-icon--desc {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Row States ─── */
+
+  tbody tr {
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  tbody tr:hover {
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  tbody tr[aria-selected='true'] {
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  /* ─── Checkbox Input ─── */
+
+  input[type='checkbox'] {
+    width: var(--hx-size-4, 1rem);
+    height: var(--hx-size-4, 1rem);
+    cursor: pointer;
+    accent-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* ─── Loading Skeleton ─── */
+
+  .skeleton-cell {
+    display: block;
+    height: 1em;
+    border-radius: var(--hx-border-radius-sm, 2px);
+    background: linear-gradient(
+      90deg,
+      var(--hx-color-neutral-200, #e2e8f0) 25%,
+      var(--hx-color-neutral-100, #f1f5f9) 50%,
+      var(--hx-color-neutral-200, #e2e8f0) 75%
+    );
+    background-size: 200% 100%;
+    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
+  }
+
+  @keyframes hx-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-cell {
+      animation: none;
+      opacity: var(
+        --hx-opacity-50,
+        0.5
+      ); /* reduced from animation; approximate to available token */
+    }
+
+    .sort-icon {
+      transition: none;
+    }
+
+    tbody tr {
+      transition: none;
+    }
+  }
+
+  /* ─── Cell Focus ─── */
+
+  td:focus-visible,
+  th:focus-visible,
+  [part~='td']:focus-visible,
+  [part~='th']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Empty State ─── */
+
+  .empty-cell {
+    text-align: center;
+    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
+  }

package/dist/css/hx-date-picker.css

@@ -0,0 +1,2 @@
+/* hx-date-picker — extracted from Shadow DOM styles */
+:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}

package/dist/css/hx-dialog.css

@@ -0,0 +1,190 @@
+/* hx-dialog — extracted from Shadow DOM styles */
+:host {
+    display: contents;
+  }
+
+  /* ─── Native dialog reset ─── */
+
+  dialog {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: visible;
+    /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */
+    position: relative;
+    z-index: calc(var(--hx-z-index-modal, 1400) + 1);
+  }
+
+  /* ─── Dialog container ─── */
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));
+    color: var(--hx-dialog-color, var(--hx-color-neutral-900));
+    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
+    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
+    width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
+    max-width: calc(100vw - var(--hx-space-8, 2rem));
+    max-height: calc(100vh - var(--hx-space-8, 2rem));
+    overflow: hidden;
+    outline: none;
+
+    /* Open/close animation */
+    opacity: 0;
+    transform: translateY(var(--hx-space-4, 1rem)) scale(0.97);
+    transition:
+      opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out),
+      transform var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open] .dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dialog {
+      transition: none;
+    }
+
+    .dialog__close-btn {
+      transition: none;
+    }
+  }
+
+  /* ─── Native backdrop (modal mode) ─── */
+
+  dialog::backdrop {
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    opacity: 0;
+    transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open]::backdrop {
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog::backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Non-modal backdrop overlay ─── */
+
+  .dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+    /* D5 — backdrop z-index must be lower than the dialog element's z-index */
+    z-index: var(--hx-z-index-modal, 1400);
+  }
+
+  /* ─── Header ─── */
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
+    border-bottom: var(--hx-border-width-thin) solid
+      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
+    gap: var(--hx-space-4);
+    flex-shrink: 0;
+  }
+
+  .dialog__heading {
+    margin: 0;
+    font-family: var(--hx-font-family-sans);
+    font-size: var(--hx-font-size-lg);
+    font-weight: var(--hx-font-weight-semibold);
+    line-height: var(--hx-line-height-tight);
+    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
+    flex: 1 1 auto;
+  }
+
+  /* ─── Built-in close button (D17) ─── */
+
+  .dialog__close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    padding: 0;
+    margin-inline-start: auto;
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    color: var(--hx-color-neutral-500, #6b7280);
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
+    transition:
+      color var(--hx-duration-fast, 100ms) ease,
+      background-color var(--hx-duration-fast, 100ms) ease;
+  }
+
+  .dialog__close-btn::before {
+    content: '×';
+  }
+
+  .dialog__close-btn:hover {
+    color: var(--hx-color-neutral-900);
+    background-color: var(--hx-color-neutral-100);
+  }
+
+  .dialog__close-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-dialog-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Body ─── */
+
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--hx-dialog-body-padding, var(--hx-space-6));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-space-3);
+    padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
+    border-top: var(--hx-border-width-thin) solid
+      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+
+  /* ─── Visually-hidden description (D8) ─── */
+
+  .dialog__description {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }

package/dist/css/hx-divider.css

@@ -0,0 +1,87 @@
+/* hx-divider — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
+    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));
+    --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
+    --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Spacing Variants ─── */
+
+  :host([spacing='none']) {
+    --_spacing: 0;
+  }
+
+  :host([spacing='sm']) {
+    --_spacing: var(--hx-space-2, 0.5rem);
+  }
+
+  :host,
+  :host([spacing='md']) {
+    --_spacing: var(--hx-space-4, 1rem);
+  }
+
+  :host([spacing='lg']) {
+    --_spacing: var(--hx-space-6, 1.5rem);
+  }
+
+  /* ─── Horizontal (default) ─── */
+
+  :host([orientation='horizontal']) {
+    margin-block: var(--_spacing);
+  }
+
+  /* ─── Vertical ─── */
+
+  :host([orientation='vertical']) {
+    display: inline-flex;
+    align-self: stretch;
+    margin-inline: var(--_spacing);
+  }
+
+  /* ─── Base (hr) — horizontal ─── */
+
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: var(--_divider-label-gap);
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Base — vertical ─── */
+
+  :host([orientation='vertical']) .divider {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  /* ─── Lines flanking label ─── */
+
+  .divider__line {
+    flex: 1;
+    background-color: var(--_divider-color);
+  }
+
+  :host(:not([orientation='vertical'])) .divider__line {
+    height: var(--_divider-width);
+  }
+
+  :host([orientation='vertical']) .divider__line {
+    width: var(--_divider-width);
+    height: auto;
+    min-height: 0;
+  }
+
+  /* ─── Label ─── */
+
+  .divider__label {
+    flex-shrink: 0;
+    color: var(--_divider-label-color);
+    font-size: var(--_divider-label-size);
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+  }