@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/css/hx-tag.css

@@ -0,0 +1,146 @@
+/* hx-tag — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+    /* cursor: not-allowed is intentionally omitted — pointer-events: none prevents cursor display */
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));
+    font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+    vertical-align: middle;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .tag--sm {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-xs, 0.75rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-0-5, 0.125rem))
+      var(--hx-tag-padding-x, var(--hx-space-1-5, 0.375rem));
+  }
+
+  .tag--md {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-sm, 0.875rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-tag-padding-x, var(--hx-space-2, 0.5rem));
+  }
+
+  .tag--lg {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-md, 1rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-1-5, 0.375rem))
+      var(--hx-tag-padding-x, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Color Variants ─── */
+
+  .tag--default {
+    --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);
+    --hx-tag-color: var(--hx-color-neutral-700, #374151);
+    --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);
+  }
+
+  .tag--primary {
+    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);
+    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
+  }
+
+  .tag--success {
+    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
+    --hx-tag-color: var(--hx-color-success-700, #15803d);
+    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
+  }
+
+  .tag--warning {
+    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-tag-color: var(--hx-color-warning-700, #b45309);
+    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
+  }
+
+  .tag--danger {
+    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-tag-color: var(--hx-color-error-700, #b91c1c);
+    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
+  }
+
+  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
+  /* Visually hidden text prefix for semantic variants (success/warning/danger). */
+  /* Ensures the variant state is not conveyed by color alone.                   */
+
+  .tag__variant-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Pill Mode ─── */
+
+  /* Uses --hx-tag-border-radius-pill (separate from --hx-tag-border-radius) so consumer
+     overrides to --hx-tag-border-radius don't break pill shape. */
+  .tag--pill {
+    border-radius: var(--hx-tag-border-radius-pill, var(--hx-border-radius-full, 9999px));
+  }
+
+  /* ─── Prefix / Suffix slots ─── */
+
+  .tag__prefix,
+  .tag__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Hide wrappers when slots have no assigned content */
+  .tag__prefix--hidden,
+  .tag__suffix--hidden {
+    display: none;
+  }
+
+  /* ─── Remove Button ─── */
+
+  .tag__remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    /* 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);
+    padding: 0;
+    margin-inline-start: var(--hx-space-1, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: var(--hx-opacity-75, 0.75);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    line-height: 0;
+  }
+
+  .tag__remove-button:hover {
+    opacity: var(--hx-opacity-100, 1);
+  }
+
+  .tag__remove-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
+    outline-offset: var(--hx-focus-ring-offset, 1px);
+  }

package/dist/css/hx-text-input.css

@@ -0,0 +1,214 @@
+/* hx-text-input — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  /*
+   * Attribute-based focus hooks set by FocusMixin.
+   * :host([focused]) — fires whenever the component or any descendant has focus.
+   * :host([focused-visible]) — fires only for keyboard-initiated focus.
+   * These complement the :focus-within rules on .field__input-wrapper and are
+   * exposed as theming hooks for consumers who target the host element.
+   */
+  :host([focused]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  :host([focused-visible]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Label ─── */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Input Wrapper ─── */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(
+      --hx-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-input-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-input-error-color, var(--hx-color-error-500, #dc3545))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Slots (Prefix / Suffix) ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    color: var(--hx-color-neutral-500, #6c757d);
+    flex-shrink: 0;
+  }
+
+  /* Only add padding when slot has content — avoids phantom space on empty slots */
+  .field__prefix--filled {
+    padding: 0 var(--hx-space-3, 0.75rem);
+  }
+
+  .field__suffix--filled {
+    padding: 0 var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Native Input ─── */
+
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-input-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%;
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .field--size-sm .field__input {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-size-8, 2rem);
+    font-size: var(--hx-input-sm-font-size, 0.875rem);
+  }
+
+  .field--size-md .field__input {
+    /* md is the default — no overrides needed */
+  }
+
+  .field--size-lg .field__input {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    min-height: var(--hx-size-12, 3rem);
+    font-size: var(--hx-input-lg-font-size, 1.125rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper {
+      transition: none;
+    }
+  }

package/dist/css/hx-text.css

@@ -0,0 +1,149 @@
+/* hx-text — extracted from Shadow DOM styles */
+:host {
+    display: inline;
+  }
+
+  /* ─── Base ─── */
+
+  .text {
+    display: inline;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-text-font-size);
+    font-weight: var(--hx-text-font-weight);
+    line-height: var(--hx-text-line-height);
+    letter-spacing: var(--hx-text-letter-spacing);
+    color: var(--hx-text-color);
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Variants ─── */
+
+  .text--body {
+    --hx-text-font-size: var(--hx-font-size-md, 1rem);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--body-sm {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--body-lg {
+    --hx-text-font-size: var(--hx-font-size-lg, 1.125rem);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--label {
+    --hx-text-font-size: var(--hx-font-size-md, 1rem);
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--label-sm {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--caption {
+    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--code {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+    font-family: var(--hx-font-family-mono, monospace);
+  }
+
+  .text--overline {
+    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    text-transform: uppercase;
+  }
+
+  /* ─── Colors ─── */
+
+  .text--color-default {
+    --hx-text-color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  .text--color-subtle {
+    --hx-text-color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .text--color-disabled {
+    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
+  }
+
+  .text--color-inverse {
+    --hx-text-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .text--color-danger {
+    --hx-text-color: var(--hx-color-error-600, #dc2626);
+  }
+
+  .text--color-success {
+    --hx-text-color: var(--hx-color-success-600, #16a34a);
+  }
+
+  .text--color-warning {
+    --hx-text-color: var(--hx-color-warning-600, #d97706);
+  }
+
+  /* ─── Weight Overrides ─── */
+
+  .text--weight-regular {
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
+  }
+
+  .text--weight-medium {
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .text--weight-semibold {
+    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  .text--weight-bold {
+    --hx-text-font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Truncation ─── */
+
+  .text--truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text--clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  :host([truncate]) {
+    display: block;
+  }
+
+  :host([lines]:not([lines='0'])) {
+    display: block;
+  }

package/dist/css/hx-textarea.css

@@ -0,0 +1,180 @@
+/* hx-textarea — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* --- Label --- */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* --- Textarea Wrapper --- */
+
+  .field__textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: hidden;
+  }
+
+  .field__textarea-wrapper:focus-within {
+    border-color: var(
+      --hx-input-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(
+            --hx-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* --- Error State --- */
+
+  .field--error .field__textarea-wrapper {
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__textarea-wrapper:focus-within {
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* --- Native Textarea --- */
+
+  .field__textarea {
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
+    width: 100%;
+    resize: vertical;
+  }
+
+  .field__textarea::placeholder {
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .field__textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__textarea-wrapper {
+      transition: none;
+    }
+  }
+
+  /* --- Resize Variants --- */
+
+  :host([resize='none']) .field__textarea {
+    resize: none;
+  }
+
+  /* resize: vertical is the base default — no override needed for [resize='vertical'] */
+
+  :host([resize='both']) .field__textarea {
+    resize: both;
+  }
+
+  :host([resize='auto']) .field__textarea {
+    resize: none;
+    overflow: hidden;
+  }
+
+  /* --- Character Counter --- */
+
+  .field__counter {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+    text-align: end;
+  }
+
+  /* --- Visually Hidden (screen reader only) --- */
+
+  .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;
+  }
+
+  /* --- Help Text & Error Messages --- */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }

package/dist/css/hx-theme.css

@@ -0,0 +1,23 @@
+/* hx-theme — extracted from Shadow DOM styles */
+:host {
+    display: contents;
+  }
+
+  /* display: contents makes this wrapper layout-invisible; exposed as [part="base"]
+     for consumer targeting via CSS parts without affecting layout */
+  .theme-base {
+    display: contents;
+  }
+
+  /* Visually hidden but accessible to screen readers — used for aria-live announcements */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }