@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/css/hx-clinical-status.css

@@ -0,0 +1,248 @@
+/* hx-clinical-status — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Screen-reader-only utility ─── */
+  /* @design-system-approved: WCAG standard visually-hidden technique for a11y */
+
+  .sr-only {
+    position: absolute;
+    width: 1px; /* @design-system-approved: standard sr-only technique */
+    height: 1px; /* @design-system-approved: standard sr-only technique */
+    padding: 0;
+    margin: -1px; /* @design-system-approved: standard sr-only technique */
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Container ─── */
+
+  .clinical-status {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
+    border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));
+    border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Compact Mode ─── */
+
+  .clinical-status--compact {
+    padding: var(
+      --hx-clinical-status-compact-padding,
+      var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)
+    );
+    gap: var(--hx-space-2, 0.5rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  /* ─── Severity: info ─── */
+
+  :host([severity='info']) .clinical-status,
+  :host(:not([severity])) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);
+    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Severity: warning ─── */
+
+  :host([severity='warning']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Severity: critical ─── */
+
+  :host([severity='critical']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);
+    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);
+  }
+
+  /* ─── Severity: emergent ─── */
+
+  :host([severity='emergent']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);
+    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);
+    border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
+    font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  /* ─── Icon ─── */
+
+  .clinical-status__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .clinical-status__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  .clinical-status--compact .clinical-status__icon svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Message ─── */
+
+  .clinical-status__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */
+
+  .clinical-status__severity-label {
+    position: absolute;
+    width: 1px; /* @design-system-approved: standard sr-only technique */
+    height: 1px; /* @design-system-approved: standard sr-only technique */
+    padding: 0;
+    margin: -1px; /* @design-system-approved: standard sr-only technique */
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Actions ─── */
+
+  .clinical-status__actions {
+    display: none;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+
+  .clinical-status__actions--visible {
+    display: flex;
+  }
+
+  /* ─── Dismiss Button ─── */
+
+  .clinical-status__dismiss-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    cursor: pointer;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: 1;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+    opacity: 0.7;
+  }
+
+  .clinical-status__dismiss-button:hover {
+    opacity: 1;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .clinical-status__dismiss-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    opacity: 1;
+  }
+
+  .clinical-status__dismiss-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  .clinical-status--compact .clinical-status__dismiss-button {
+    min-width: var(--hx-space-8, 2rem);
+    min-height: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── Acknowledge Button ─── */
+
+  .clinical-status__acknowledge-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    border: var(--hx-border-width-thin, 1px) solid currentColor;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    text-transform: uppercase;
+    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    cursor: pointer;
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-touch-target-size, 44px);
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+  }
+
+  .clinical-status__acknowledge-button:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .clinical-status__acknowledge-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .clinical-status--compact .clinical-status__acknowledge-button {
+    min-height: var(--hx-space-8, 2rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .clinical-status__dismiss-button,
+    .clinical-status__acknowledge-button {
+      transition: none;
+    }
+  }

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

@@ -0,0 +1,179 @@
+/* hx-code-snippet — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline;
+  }
+
+  /* ─── Inline Mode ─── */
+
+  .code-snippet--inline {
+    display: inline;
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
+    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
+      var(--hx-code-snippet-inline-padding-x, 0.375em);
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
+  }
+
+  /* ─── Block Mode Container ─── */
+
+  .code-snippet {
+    position: relative;
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
+    overflow: hidden;
+  }
+
+  /* ─── Hidden Slot ─── */
+
+  .code-snippet__slot {
+    display: none;
+  }
+
+  /* ─── Header ─── */
+
+  .code-snippet__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;
+    min-height: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── Pre / Code ─── */
+
+  .code-snippet__pre {
+    margin: 0;
+    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));
+    overflow-x: auto;
+    white-space: pre;
+  }
+
+  .code-snippet__pre--wrap {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .code-snippet__code {
+    display: block;
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
+    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-relaxed, 1.625);
+    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    tab-size: var(--hx-code-snippet-tab-size, 2);
+  }
+
+  /* ─── Copy Button ─── */
+
+  .code-snippet__copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    /* 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);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-200, #e2e8f0);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */
+    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);
+    white-space: nowrap;
+    z-index: 1; /* @audit-exception: local stacking context within shadow root */
+  }
+
+  .code-snippet__copy-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    border-color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .code-snippet__copy-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .code-snippet__copy-button:active {
+    /* Non-standard token — fallback 0.8 applies if token is absent */
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Expand Button ─── */
+
+  .code-snippet__expand-button {
+    display: block;
+    width: 100%;
+    /* 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);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    border: none;
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-300, #cbd5e1);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .code-snippet__expand-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  .code-snippet__expand-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Line Numbers ─── */
+
+  .code-snippet__line-number {
+    display: inline-block;
+    min-width: var(--hx-space-8, 2rem);
+    padding-inline-end: var(--hx-space-3, 0.75rem);
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    user-select: none;
+    text-align: end;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .code-snippet__copy-button {
+      transition: none;
+    }
+
+    .code-snippet__expand-button {
+      transition: none;
+    }
+  }
+
+  /* ─── 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;
+  }

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

@@ -0,0 +1,2 @@
+/* hx-color-picker — extracted from Shadow DOM styles */
+:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}

package/dist/css/hx-combobox.css

@@ -0,0 +1,2 @@
+/* hx-combobox — extracted from Shadow DOM styles */
+:host{display:block}: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-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.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-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-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-combobox-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-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-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-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__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}.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-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}

package/dist/css/hx-container.css

@@ -0,0 +1,82 @@
+/* hx-container — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    contain: layout style;
+    width: 100%;
+    background-color: var(--hx-container-bg, transparent);
+    box-sizing: border-box;
+  }
+
+  /* ─── Vertical Padding Variants ─── */
+
+  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */
+  :host([padding='none']) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  :host([padding='sm']) {
+    padding-top: var(--hx-space-6, 1.5rem);
+    padding-bottom: var(--hx-space-6, 1.5rem);
+  }
+
+  :host([padding='md']) {
+    padding-top: var(--hx-space-12, 3rem);
+    padding-bottom: var(--hx-space-12, 3rem);
+  }
+
+  :host([padding='lg']) {
+    padding-top: var(--hx-space-16, 4rem);
+    padding-bottom: var(--hx-space-16, 4rem);
+  }
+
+  :host([padding='xl']) {
+    padding-top: var(--hx-space-24, 6rem);
+    padding-bottom: var(--hx-space-24, 6rem);
+  }
+
+  :host([padding='2xl']) {
+    padding-top: var(--hx-space-32, 8rem);
+    padding-bottom: var(--hx-space-32, 8rem);
+  }
+
+  /* ─── Inner Container ─── */
+
+  .container__inner {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ─── Width Variants ─── */
+
+  .container__inner--full {
+    max-width: none;
+  }
+
+  .container__inner--content {
+    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));
+  }
+
+  .container__inner--narrow {
+    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));
+  }
+
+  .container__inner--sm {
+    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));
+  }
+
+  .container__inner--md {
+    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));
+  }
+
+  .container__inner--lg {
+    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));
+  }
+
+  .container__inner--xl {
+    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
+  }

package/dist/css/hx-copy-button.css

@@ -0,0 +1,121 @@
+/* hx-copy-button — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2);
+    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
+    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-copy-button-bg, transparent);
+    color: var(--hx-copy-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;
+    font-family: var(--hx-font-family-sans);
+    font-weight: var(--hx-font-weight-medium);
+    white-space: nowrap;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+
+  .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);
+    min-width: var(--hx-size-8);
+    height: var(--hx-size-8);
+    font-size: var(--hx-font-size-sm);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2);
+    min-width: var(--hx-size-10);
+    height: var(--hx-size-10);
+    font-size: var(--hx-font-size-md);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3);
+    min-width: var(--hx-size-12);
+    height: var(--hx-size-12);
+    font-size: var(--hx-font-size-lg);
+  }
+
+  /* ─── Copied / Success State ─── */
+
+  .button--copied {
+    color: var(--hx-color-success-text, var(--hx-color-primary-500));
+    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
+       A border provides visual differentiation for users with color blindness. */
+    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
+  }
+
+  /* ─── Icon Container ─── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+    opacity: var(--hx-opacity-disabled);
+  }
+
+  /* ─── 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-width: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }