@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/css/hx-drawer.css

@@ -0,0 +1,262 @@
+/* hx-drawer — extracted from Shadow DOM styles */
+/* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: contents;
+  }
+
+  :host([contained]) {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* ─── Overlay ─── */
+
+  .drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--hx-z-index-modal, 1400);
+    display: flex;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  :host([contained]) .drawer-overlay {
+    position: absolute;
+  }
+
+  .drawer-overlay.is-open {
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  /* ─── Backdrop ─── */
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
+    opacity: 0;
+    transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
+  }
+
+  .drawer-overlay.is-open .drawer-backdrop {
+    opacity: var(--hx-drawer-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Panel ─── */
+
+  .drawer-panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
+    color: var(--hx-drawer-color, var(--hx-color-neutral-900));
+    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
+    overflow: hidden;
+    outline: none;
+    z-index: 1; /* local stacking context: panel above backdrop within overlay container */
+    transition:
+      transform var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out),
+      opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-panel {
+      transition: none;
+    }
+
+    .drawer-close-button {
+      transition: none;
+    }
+  }
+
+  /* ─── Placement: end (default — right) ─── */
+
+  :host([placement='end']) .drawer-panel,
+  :host(:not([placement])) .drawer-panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(100%);
+  }
+
+  :host([placement='end']) .drawer-overlay.is-open .drawer-panel,
+  :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: start (left) ─── */
+
+  :host([placement='start']) .drawer-panel {
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(-100%);
+  }
+
+  :host([placement='start']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: top ─── */
+
+  :host([placement='top']) .drawer-panel {
+    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(-100%);
+  }
+
+  :host([placement='top']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: bottom ─── */
+
+  :host([placement='bottom']) .drawer-panel {
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(100%);
+  }
+
+  :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Header ─── */
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-space-4, 1rem);
+    padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+
+  .drawer-title {
+    margin: 0;
+    flex: 1 1 auto;
+    font-family: var(--hx-font-family-sans);
+    font-size: var(--hx-font-size-lg);
+    font-weight: var(--hx-font-weight-semibold);
+    line-height: var(--hx-line-height-tight);
+    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
+  }
+
+  .drawer-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+  }
+
+  .drawer-close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
+  }
+
+  .drawer-close-button:hover {
+    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-neutral-900);
+  }
+
+  .drawer-close-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-drawer-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Visually-hidden close button (no-header mode, WCAG 4.1.2) ─── */
+  /* Keeps the button reachable by keyboard/AT but invisible to sighted users. */
+
+  .drawer-close-button--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;
+  }
+
+  /* When focused via keyboard, restore visibility so users know where focus is. */
+  .drawer-close-button--sr-only:focus-visible {
+    position: static;
+    width: auto;
+    height: auto;
+    clip: auto;
+    white-space: normal;
+    overflow: visible;
+    margin: 0;
+  }
+
+  /* ─── Body ─── */
+
+  .drawer-body {
+    flex: 1 1 auto;
+    padding: var(--hx-drawer-body-padding, var(--hx-space-6, 1.5rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }

package/dist/css/hx-dropdown.css

@@ -0,0 +1,46 @@
+/* hx-dropdown — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='panel'] {
+    position: fixed;
+    z-index: var(--hx-dropdown-panel-z-index, 1000);
+    min-width: var(--hx-dropdown-panel-min-width, 160px);
+    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-dropdown-panel-shadow,
+      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))
+    );
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      visibility var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  [part='panel'].panel--visible {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='panel'] {
+      transition: none;
+    }
+  }

package/dist/css/hx-field-label.css

@@ -0,0 +1,38 @@
+/* hx-field-label — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
+    font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  .required-indicator {
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  .optional-indicator {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-normal, 400);
+    color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  .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;
+  }

package/dist/css/hx-field.css

@@ -0,0 +1,119 @@
+/* hx-field — 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-field-gap, var(--hx-space-1, 0.25rem));
+    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Inline Layout ─── */
+
+  .field--layout-inline {
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .field--layout-inline .field__label-wrapper {
+    display: flex;
+    align-items: baseline;
+    flex-shrink: 0;
+    min-width: 8rem;
+  }
+
+  /* ─── 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-field-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: pointer;
+  }
+
+  .field__required-marker {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Control Wrapper ─── */
+
+  .field__control {
+    display: block;
+  }
+
+  /* ─── Error Slot Announcer (visually hidden live region) ─── */
+
+  .field__error-slot-announcer {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) .field__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='sm']) .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__help-text {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__label {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .field--error .field__control {
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }

package/dist/css/hx-file-upload.css

@@ -0,0 +1,241 @@
+/* hx-file-upload — 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-2, 0.5rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Label ─── */
+
+  .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-color-neutral-700, #343a40);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Dropzone ─── */
+
+  .dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-space-32, 8rem);
+    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
+    border: var(--hx-border-width-thin, 1px) dashed
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));
+    cursor: pointer;
+    text-align: center;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    user-select: none;
+    color: var(--hx-color-neutral-600, #495057);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .dropzone:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-color: var(
+      --hx-file-upload-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-500))
+    );
+  }
+
+  .dropzone--drag-over {
+    border-color: var(--hx-color-primary-500, #2563eb);
+    background-color: var(
+      --hx-file-upload-dropzone-active-bg,
+      color-mix(
+        in srgb,
+        var(--hx-color-primary-500, #2563eb) 8%,
+        var(--hx-color-neutral-0, #ffffff)
+      )
+    );
+    border-style: solid;
+  }
+
+  .dropzone--error {
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropzone {
+      transition: none;
+    }
+  }
+
+  /* ─── Hidden file input ─── */
+
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── File list ─── */
+
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .file-list:empty {
+    display: none;
+  }
+
+  /* ─── File item ─── */
+
+  .file-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .file-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .file-item__name {
+    flex: 1;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-color-neutral-800, #212529);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-item__size {
+    flex-shrink: 0;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+  }
+
+  .file-item__remove {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-1, 0.25rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6c757d);
+    cursor: pointer;
+    line-height: 1;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .file-item__remove:hover {
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);
+  }
+
+  .file-item__remove:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .file-item__remove {
+      transition: none;
+    }
+  }
+
+  /* ─── Progress bar ─── */
+
+  .progress-track {
+    width: 100%;
+    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
+    background-color: var(--hx-color-neutral-200, #e9ecef);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    width: 100%;
+    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
+    border-radius: inherit;
+    transform-origin: left center;
+    transform: scaleX(var(--_progress-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none;
+    }
+  }
+
+  /* ─── Screen-reader only utility ─── */
+
+  .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;
+  }
+
+  /* ─── Error message ─── */
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }

package/dist/css/hx-form.css

@@ -0,0 +1,2 @@
+/* hx-form — extracted from Shadow DOM styles */
+/* no styles */