@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/css/helix-core.css

@@ -0,0 +1,1784 @@
+/* helix-core.css — 15 components */
+
+/* ── hx-avatar ── */
+:host {
+    display: inline-block;
+  }
+
+  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */
+  .avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: var(--hx-avatar-size);
+    height: var(--hx-avatar-size);
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    border-radius: var(--hx-avatar-border-radius);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .avatar--xs {
+    --hx-avatar-size: var(--hx-size-6, 1.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);
+  }
+
+  .avatar--sm {
+    --hx-avatar-size: var(--hx-size-8, 2rem);
+    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  .avatar--md {
+    --hx-avatar-size: var(--hx-size-10, 2.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .avatar--lg {
+    --hx-avatar-size: var(--hx-size-12, 3rem);
+    --hx-avatar-font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  .avatar--xl {
+    --hx-avatar-size: var(--hx-size-16, 4rem);
+    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Shape Variants ─── */
+
+  .avatar--circle {
+    --hx-avatar-border-radius: 50%;
+  }
+
+  .avatar--square {
+    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Image ─── */
+
+  .avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  /* ─── Initials ─── */
+
+  .avatar__initials {
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-avatar-font-size);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
+    user-select: none;
+  }
+
+  /* ─── Fallback Icon ─── */
+
+  .avatar__fallback-icon {
+    width: 60%;
+    height: 60%;
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+  }
+
+  /* ─── Badge Slot ─── */
+
+  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */
+  .avatar__badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */
+  .avatar__badge--hidden {
+    display: none;
+  }
+
+  /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
+     leaving no visual boundary. Add a border so the avatar remains perceivable.
+     WCAG 1.4.11 Non-text Contrast (Level AA). */
+  @media (forced-colors: active) {
+    .avatar {
+      border: 2px solid ButtonText;
+    }
+  }
+/* ── hx-badge ── */
+:host {
+    display: inline-block;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-1, 0.25rem);
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .badge--sm {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))
+      var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));
+  }
+
+  .badge--md {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));
+  }
+
+  .badge--lg {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Style Variants ─── */
+
+  .badge--primary {
+    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .badge--secondary {
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
+    --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+  }
+
+  .badge--success {
+    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);
+  }
+
+  .badge--warning {
+    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
+    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
+    --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);
+  }
+
+  .badge--error {
+    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);
+  }
+
+  .badge--neutral {
+    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);
+  }
+
+  .badge--info {
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
+    --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+  }
+
+  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
+  /* Visually hidden text prefix for semantic variants (success/warning/error/info). */
+  /* Ensures the variant is not conveyed by color alone.                             */
+
+  .badge__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 ─── */
+
+  .badge--pill {
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));
+  }
+
+  /* ─── Dot Indicator (empty + pulse) ─── */
+
+  .badge--dot {
+    width: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));
+    height: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  /* Guard: hide prefix slot and slotted content in dot mode to prevent overflow */
+  .badge--dot ::slotted(*) {
+    display: none;
+  }
+
+  /* ─── Pulse Animation ─── */
+
+  @keyframes hx-badge-pulse {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 var(--hx-badge-pulse-color, currentColor);
+    }
+    50% {
+      opacity: var(--hx-opacity-75, 0.75);
+      box-shadow: 0 0 0 4px transparent;
+    }
+  }
+
+  .badge--pulse {
+    animation: hx-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))
+      var(--hx-badge-pulse-easing, var(--hx-easing-in-out, ease-in-out)) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .badge--pulse {
+      animation: none;
+    }
+  }
+
+  /* ─── Remove Button ─── */
+
+  .badge__remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    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;
+    /* WCAG 2.5.5: minimum 44×44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+  }
+
+  .badge__remove-button:hover {
+    opacity: var(--hx-opacity-100, 1);
+  }
+
+  .badge__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);
+  }
+/* ── hx-button ── */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  :host([full]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host([full]) .button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* ─── Base Button ─── */
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);
+    border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    text-decoration: none;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .button:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .button--sm {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .button--primary {
+    --hx-button-bg: var(--hx-color-primary-500);
+    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-border-color: transparent;
+  }
+
+  .button--secondary {
+    --hx-button-bg: transparent;
+    --hx-button-color: var(--hx-color-primary-500);
+    --hx-button-border-color: var(--hx-color-primary-500);
+  }
+
+  .button--secondary:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
+  }
+
+  .button--tertiary {
+    --hx-button-bg: var(--hx-color-neutral-100);
+    --hx-button-color: var(--hx-color-neutral-900);
+    --hx-button-border-color: transparent;
+  }
+
+  .button--tertiary:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
+  }
+
+  .button--danger {
+    --hx-button-bg: var(--hx-color-error-500);
+    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-border-color: transparent;
+  }
+
+  .button--danger:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));
+  }
+
+  .button--ghost {
+    --hx-button-bg: transparent;
+    --hx-button-color: var(--hx-color-primary-500);
+    --hx-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
+  }
+
+  .button--outline {
+    --hx-button-bg: transparent;
+    --hx-button-color: var(--hx-color-neutral-900);
+    --hx-button-border-color: var(--hx-color-neutral-300);
+  }
+
+  .button--outline:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
+  }
+
+  .button--primary:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));
+  }
+
+  /* ─── Disabled ─── */
+
+  /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.
+     Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */
+  .button[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Loading State ─── */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  @keyframes hx-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+
+    .button__spinner {
+      animation: none;
+      opacity: var(--hx-opacity-muted, 0.6);
+    }
+  }
+
+  /* ─── Inverted Mode ─── */
+
+  /* Override text color and filter-based hover/active for all variants */
+  :host([inverted]) .button {
+    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));
+    filter: none;
+  }
+
+  :host([inverted]) .button:hover {
+    filter: none;
+  }
+
+  :host([inverted]) .button:active {
+    filter: none;
+  }
+
+  :host([inverted]) .button:focus-visible {
+    outline-color: var(
+      --hx-button-inverted-focus-ring-color,
+      var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))
+    );
+  }
+
+  /* Primary inverted — slight transparent white overlay on hover */
+  :host([inverted]) .button--primary:hover {
+    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);
+  }
+
+  /* Secondary inverted — white border and text */
+  :host([inverted]) .button--secondary {
+    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));
+  }
+
+  :host([inverted]) .button--secondary:hover {
+    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+  }
+
+  /* Tertiary inverted */
+  :host([inverted]) .button--tertiary {
+    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+    --hx-button-border-color: transparent;
+  }
+
+  :host([inverted]) .button--tertiary:hover {
+    --hx-button-bg: var(--hx-overlay-white-25, rgba(255, 255, 255, 0.25));
+  }
+
+  /* Ghost inverted — transparent base, white hover bg */
+  :host([inverted]) .button--ghost {
+    --hx-button-bg: transparent;
+    --hx-button-border-color: transparent;
+  }
+
+  :host([inverted]) .button--ghost:hover {
+    --hx-button-bg: var(
+      --hx-button-inverted-ghost-hover-bg,
+      var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))
+    );
+  }
+
+  /* Outline inverted — white border */
+  :host([inverted]) .button--outline {
+    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));
+  }
+
+  :host([inverted]) .button--outline:hover {
+    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+  }
+
+  /* ─── Prefix / Suffix / Label ─── */
+
+  .button__prefix,
+  .button__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .button__label {
+    flex: 1 1 auto;
+  }
+/* ── hx-button-group ── */
+:host {
+    display: inline-flex;
+    contain: layout style;
+  }
+
+  .group {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  /* ─── Orientation Variants ─── */
+
+  .group--horizontal {
+    flex-direction: row;
+  }
+
+  .group--vertical {
+    flex-direction: column;
+  }
+
+  /* ─── No Double Borders: Horizontal ─── */
+
+  .group--horizontal ::slotted(*:not(:first-child)) {
+    margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
+  }
+
+  /* ─── No Double Borders: Vertical ─── */
+
+  .group--vertical ::slotted(*:not(:first-child)) {
+    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));
+  }
+
+  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
+
+  .group--horizontal ::slotted(:only-child) {
+    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
+
+  .group--horizontal ::slotted(:first-child:not(:only-child)) {
+    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0
+      var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
+
+  .group--horizontal ::slotted(:last-child:not(:only-child)) {
+    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)
+      var(--hx-border-radius-md, 0.375rem) 0;
+  }
+
+  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
+
+  .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {
+    --hx-button-border-radius: 0;
+  }
+
+  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
+
+  .group--vertical ::slotted(:only-child) {
+    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Border Radius: Vertical — First child keeps top corners ─── */
+
+  .group--vertical ::slotted(:first-child:not(:only-child)) {
+    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)
+      var(--hx-border-radius-md, 0.375rem) 0 0;
+  }
+
+  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
+
+  .group--vertical ::slotted(:last-child:not(:only-child)) {
+    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)
+      var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Border Radius: Vertical — Middle children have no radius ─── */
+
+  .group--vertical ::slotted(:not(:first-child):not(:last-child)) {
+    --hx-button-border-radius: 0;
+  }
+
+  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
+
+  .group ::slotted(:focus-within) {
+    z-index: 1;
+    position: relative;
+  }
+/* ── hx-card ── */
+:host {
+    display: block;
+    color: var(--hx-card-color, inherit);
+    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
+    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    overflow: hidden;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    transition:
+      box-shadow var(--hx-transition-normal, 250ms ease),
+      transform var(--hx-transition-normal, 250ms ease);
+  }
+
+  /* ─── Elevation Variants ─── */
+
+  .card--flat {
+    box-shadow: none;
+  }
+
+  .card--raised {
+    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  }
+
+  .card--floating {
+    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
+  }
+
+  /* ─── Style Variants ─── */
+
+  .card--default {
+    /* Default styling — uses base styles */
+  }
+
+  .card--featured {
+    border-color: var(--hx-color-primary-500, #2563eb);
+    border-width: var(--hx-border-width-medium, 2px);
+  }
+
+  .card--compact .card__body {
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__heading {
+    padding-top: var(--hx-space-3, 0.75rem);
+    padding-inline-end: var(--hx-space-3, 0.75rem);
+    padding-inline-start: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__footer {
+    padding-inline-end: var(--hx-space-3, 0.75rem);
+    padding-bottom: var(--hx-space-3, 0.75rem);
+    padding-inline-start: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__actions {
+    padding-inline-end: var(--hx-space-3, 0.75rem);
+    padding-bottom: var(--hx-space-3, 0.75rem);
+    padding-inline-start: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Interactive ─── */
+
+  .card--interactive {
+    cursor: pointer;
+  }
+
+  .card--interactive:hover {
+    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    transform: translateY(var(--hx-lift-md, -2px));
+  }
+
+  .card--interactive:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .card--interactive:active {
+    transform: translateY(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+
+    .card--interactive:hover {
+      transform: none;
+    }
+
+    .card--interactive:active {
+      transform: none;
+    }
+  }
+
+  /* ─── Hidden empty slot wrappers ─── */
+
+  [hidden] {
+    display: none !important;
+  }
+
+  /* ─── Sections ─── */
+
+  .card__image {
+    overflow: hidden;
+    line-height: 0;
+  }
+
+  .card__image ::slotted(img) {
+    width: 100%;
+    aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);
+    display: block;
+    object-fit: cover;
+  }
+
+  .card__heading {
+    padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: 0;
+    padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .card__body {
+    padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    flex: 1;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    color: var(--hx-card-color, var(--hx-color-neutral-600, #495057));
+  }
+
+  .card__footer {
+    padding-top: 0;
+    padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+  }
+
+  .card__actions {
+    display: flex;
+    gap: var(--hx-space-2, 0.5rem);
+    padding-top: var(--hx-space-4, 1rem);
+    padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+    margin-top: auto;
+  }
+/* ── hx-divider ── */
+: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;
+  }
+/* ── hx-icon ── */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* vertical-align: middle ensures the icon aligns to the visual centre of
+       adjacent inline text rather than the text baseline. */
+    vertical-align: middle;
+    /* overflow: hidden prevents malformed or oversized icons from painting
+       outside the component boundary. The inner SVG may still set
+       overflow: visible for its own viewBox content. */
+    overflow: hidden;
+    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    color: var(--hx-icon-color, currentColor);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ───
+     Fallback pixel values mirror the design token values at time of writing.
+     If token values are updated the fallbacks should be updated to match. */
+
+  :host([hx-size='xs']) {
+    --hx-icon-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) {
+    --hx-icon-size: var(--hx-size-5, 1.25rem);
+  }
+
+  :host([hx-size='md']) {
+    --hx-icon-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) {
+    --hx-icon-size: var(--hx-size-8, 2rem);
+  }
+
+  :host([hx-size='xl']) {
+    --hx-icon-size: var(--hx-size-10, 2.5rem);
+  }
+
+  /* ─── SVG (sprite mode) ───
+     In sprite mode [part="svg"] is an actual <svg> element. The selector
+     targets it specifically. In inline mode the part is applied to a <span>
+     wrapper — see .icon__inline below. */
+
+  svg[part='svg'] {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+    overflow: visible;
+  }
+
+  /* ─── Inline SVG wrapper ───
+     In inline mode [part="svg"] is a <span> that wraps the fetched SVG.
+     The inner <svg> is sized to fill the wrapper. */
+
+  .icon__inline {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon__inline svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+  }
+/* ── hx-icon-button ── */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-icon-button-bg);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast),
+      color var(--hx-transition-fast),
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.
+     min-width/min-height override the explicit size tokens when they fall below
+     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
+
+  .button--sm {
+    padding: var(--hx-space-1);
+    width: var(--hx-icon-button-size, var(--hx-size-8));
+    height: var(--hx-icon-button-size, var(--hx-size-8));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-sm);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2);
+    width: var(--hx-icon-button-size, var(--hx-size-10));
+    height: var(--hx-icon-button-size, var(--hx-size-10));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-md);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3);
+    width: var(--hx-icon-button-size, var(--hx-size-12));
+    height: var(--hx-icon-button-size, var(--hx-size-12));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-lg);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .button--primary {
+    --hx-icon-button-bg: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--primary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-600);
+  }
+
+  .button--secondary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: var(--hx-color-primary-500);
+  }
+
+  .button--secondary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-50);
+  }
+
+  .button--tertiary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-neutral-700);
+    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+  }
+
+  .button--tertiary:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  .button--danger {
+    --hx-icon-button-bg: var(--hx-color-error-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--danger:hover {
+    --hx-icon-button-bg: var(--hx-color-error-600);
+  }
+
+  .button--ghost {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  /* ─── Icon Container ─── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent
+       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }
+/* ── hx-image ── */
+:host {
+    display: block;
+  }
+
+  .image__container {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));
+    border-radius: var(--_radius, var(--hx-image-border-radius, 0));
+  }
+
+  .image__container--error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--hx-image-fallback-min-height, 3rem);
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  .image__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--_fit, var(--hx-image-object-fit, cover));
+  }
+
+  .image__caption {
+    display: none;
+    padding: var(--hx-image-caption-padding, 0.5rem 0 0);
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));
+    font-size: var(--hx-image-caption-font-size, 0.875rem);
+  }
+
+  .image__caption--visible {
+    display: block;
+  }
+/* ── hx-link ── */
+:host {
+    display: inline;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  /* --- Base Link --- */
+
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
+    font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: var(--hx-link-text-decoration, underline);
+    text-underline-offset: var(--hx-link-underline-offset, 2px);
+    cursor: pointer;
+    outline: 0;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      text-decoration-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .link:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: var(--hx-link-text-decoration-hover, underline);
+  }
+
+  .link:active {
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+  }
+
+  .link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-link-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  /* --- Variant: subtle --- */
+
+  .link--subtle {
+    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    text-decoration: none;
+  }
+
+  .link--subtle:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: underline;
+  }
+
+  /* --- Variant: danger --- */
+
+  .link--danger {
+    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .link--danger:hover {
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+  }
+
+  /* --- Disabled --- */
+
+  .link--disabled {
+    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    text-decoration: none;
+    pointer-events: none;
+  }
+
+  /* --- External link icon --- */
+
+  .link__external-icon {
+    display: inline-flex;
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .link {
+      transition: none;
+    }
+  }
+
+  /* --- Visually hidden (sr-only) --- */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+/* ── hx-skeleton ── */
+:host {
+    display: block;
+  }
+
+  :host([loaded]) {
+    display: none;
+  }
+
+  /* ─── Base ─── */
+
+  .skeleton {
+    display: block;
+    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));
+    overflow: hidden;
+    position: relative;
+    width: var(--_width, 100%);
+    height: var(--_height, auto);
+  }
+
+  /* ─── Variant Shapes ─── */
+
+  .skeleton--text {
+    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));
+    height: var(--_height, 1em);
+  }
+
+  .skeleton--circle {
+    border-radius: var(--hx-skeleton-circle-radius, 50%);
+    aspect-ratio: var(--_circle-aspect-ratio, 1);
+    width: var(--_width, 2.5rem);
+    height: var(--_height, var(--_width, 2.5rem));
+  }
+
+  .skeleton--rect {
+    border-radius: var(--hx-skeleton-rect-radius, var(--hx-border-radius-sm, 0.25rem));
+    height: var(--_height, 1rem);
+  }
+
+  .skeleton--button {
+    border-radius: var(--hx-skeleton-button-radius, var(--hx-border-radius-md, 0.375rem));
+    height: var(--_height, 2.5rem);
+  }
+
+  .skeleton--paragraph {
+    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));
+    height: var(--_height, auto);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  /* ─── Shimmer Animation ─── */
+
+  .skeleton--animated::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--hx-skeleton-shimmer-color, var(--hx-overlay-white-40, rgba(255, 255, 255, 0.4))) 50%,
+      transparent 100%
+    );
+    background-size: var(--hx-skeleton-shimmer-width, 200%) 100%;
+    animation: hx-skeleton-shimmer var(--hx-skeleton-duration, 1.5s) ease-in-out infinite;
+  }
+
+  @keyframes hx-skeleton-shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: -200% center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton--animated::after {
+      display: none;
+    }
+  }
+/* ── hx-spinner ── */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_spinner-size);
+    height: var(--_spinner-size);
+    flex-shrink: 0;
+  }
+
+  .spinner__svg {
+    width: 100%;
+    height: 100%;
+    animation: hx-spinner-rotate var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  .spinner__track {
+    stroke: var(--_spinner-track-color);
+  }
+
+  .spinner__arc {
+    stroke: var(--_spinner-color);
+    /* SVG arc math: viewBox is 24×24, r=10, circumference = 2π × 10 ≈ 62.83.
+       stroke-dasharray: 56 creates a visible arc of ~89% of circumference.
+       stroke-dashoffset: 14 shifts the arc start to produce the ~75% visible gap aesthetic.
+       Adjust both proportionally if r or viewBox dimensions change. */
+    stroke-dasharray: 56;
+    stroke-dashoffset: 14;
+    animation: hx-spinner-dash var(--hx-duration-spinner, 750ms)
+      var(--hx-easing-in-out, ease-in-out) infinite;
+    transform-origin: center;
+  }
+
+  @keyframes hx-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes hx-spinner-dash {
+    0% {
+      stroke-dashoffset: 50;
+    }
+    50% {
+      stroke-dashoffset: 14;
+    }
+    100% {
+      stroke-dashoffset: 50;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner__svg {
+      animation: none;
+    }
+
+    .spinner__arc {
+      animation: none;
+      /* Maintain the static partial arc at full opacity so the loading state remains
+         clearly communicated without motion. A faded arc looks broken; full opacity
+         alongside the track ring unambiguously signals "in progress". */
+      stroke-dashoffset: 14;
+      opacity: 1;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_spinner-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([size='md']) {
+    --_spinner-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([size='lg']) {
+    --_spinner-size: var(--hx-size-8, 2rem);
+  }
+
+  /* ─── Variant Colors ─── */
+
+  :host([variant='default']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  :host([variant='primary']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+  }
+
+  :host([variant='inverted']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-0, #ffffff));
+    /* Fallback for browsers without color-mix() support (Chrome < 111, Firefox < 113, Safari < 16.2).
+       rgba(255, 255, 255, 0.3) approximates the intended 30% white track color. */
+    --_spinner-track-color: var(
+      --hx-spinner-track-color,
+      var(--hx-overlay-white-30, rgba(255, 255, 255, 0.3))
+    );
+  }
+
+  @supports (color: color-mix(in srgb, white 30%, transparent)) {
+    :host([variant='inverted']) {
+      --_spinner-track-color: var(
+        --hx-spinner-track-color,
+        color-mix(in srgb, var(--hx-color-neutral-0, #ffffff) 30%, transparent)
+      );
+    }
+  }
+/* ── hx-tag ── */
+: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);
+  }
+/* ── hx-text ── */
+: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;
+  }
+/* ── hx-visually-hidden ── */
+:host {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  :host([focusable]:focus-within) {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip: auto !important;
+    clip-path: none !important;
+    white-space: normal !important;
+    border: 0 !important;
+  }