@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/css/hx-pagination.css

@@ -0,0 +1,193 @@
+/* hx-pagination — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .pagination-root {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-4, 1rem);
+    flex-wrap: wrap;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .list {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-pagination-gap, var(--hx-space-1, 0.25rem));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .item {
+    display: flex;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--hx-pagination-button-size, 2.25rem);
+    height: var(--hx-pagination-button-size, 2.25rem);
+    padding: 0 var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+    border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      border-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .button:hover:not(:disabled) {
+    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .button[aria-current='page'] {
+    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(
+      --hx-pagination-active-border-color,
+      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
+    );
+    color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
+    font-weight: var(--hx-font-weight-semibold, 600);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .button:disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  .ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--hx-pagination-button-size, 2.25rem);
+    height: var(--hx-pagination-button-size, 2.25rem);
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #6b7280));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    user-select: none;
+  }
+
+  .button[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* Page size selector */
+  .page-size-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .page-size-label {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-500, #6b7280);
+    white-space: nowrap;
+  }
+
+  .page-size-select {
+    height: var(--hx-pagination-button-size, 2.25rem);
+    padding: 0 var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+    border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    cursor: pointer;
+  }
+
+  .page-size-select:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* Visually hidden — used for aria-live status messages */
+  .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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }
+
+  /* Windows High Contrast / forced-colors support */
+  @media (forced-colors: active) {
+    .button {
+      border: 1px solid ButtonText;
+      color: ButtonText;
+      background: ButtonFace;
+      forced-color-adjust: none;
+    }
+
+    .button:hover:not(:disabled) {
+      border-color: Highlight;
+      color: Highlight;
+    }
+
+    .button:focus-visible {
+      outline-color: Highlight;
+    }
+
+    .button[aria-current='page'] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    .button:disabled {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    .button[aria-disabled='true'] {
+      color: GrayText;
+    }
+
+    .page-size-select {
+      border-color: ButtonText;
+      color: ButtonText;
+      background: ButtonFace;
+      forced-color-adjust: none;
+    }
+  }

package/dist/css/hx-patient-banner.css

@@ -0,0 +1,139 @@
+/* hx-patient-banner — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    width: 100%;
+
+    /* ─── Private token vars (3-tier cascade) ─── */
+    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f9fafb));
+    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    --_padding: var(
+      --hx-patient-banner-padding,
+      var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)
+    );
+    --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));
+    --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #6b7280));
+    --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));
+    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));
+    --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
+    --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
+    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Banner Container ─── */
+
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+    padding: var(--_padding);
+    background-color: var(--_bg);
+    border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    font-family: var(--_font-family);
+    width: 100%;
+    position: relative;
+  }
+
+  /* ─── Photo Area ─── */
+
+  .banner__photo-area {
+    flex-shrink: 0;
+    width: var(--_photo-size);
+    height: var(--_photo-size);
+    /* Minimum 44x44px touch target for interactive photo content. */
+    min-width: 44px;
+    min-height: 44px;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--_photo-bg);
+  }
+
+  /* ─── Fields Grid ─── */
+
+  .banner__fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Individual Field ─── */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    min-width: 0;
+  }
+
+  .field__label {
+    font-size: var(--_label-font-size);
+    color: var(--_label-color);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+  }
+
+  .field__value {
+    font-size: var(--_value-font-size);
+    color: var(--_value-color);
+    font-weight: var(--hx-font-weight-normal, 400);
+    line-height: var(--hx-line-height-normal, 1.5);
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  /* ─── Identifier Rule Violation ─── */
+  /* Visual indicator when Joint Commission two-identifier rule is not met. */
+
+  :host([aria-invalid='true']) .banner {
+    border-bottom-color: var(--hx-color-error-400, #f87171);
+    background-color: var(--hx-color-error-50, #fef2f2);
+    /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));
+  }
+
+  :host([aria-invalid='true']) .banner::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--hx-border-width-thick, 4px);
+    background-color: var(--hx-color-error-500, #ef4444);
+    border-radius: 0;
+  }
+
+  /* ─── Visually-hidden violation live region ─── */
+  /* Announces identifier rule violations to screen readers without visible text. */
+
+  .violation-message {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Motion reduction ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }

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

@@ -0,0 +1,97 @@
+/* hx-phi-field — extracted from Shadow DOM styles */
+:host {
+    display: inline-flex;
+  }
+
+  /* ─── Container ─── */
+
+  .phi-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    font-family: var(--hx-phi-field-font-family, var(--hx-font-family-mono, monospace));
+  }
+
+  /* ─── Value ─── */
+
+  .phi-field__value--masked {
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
+    letter-spacing: 0.1em;
+  }
+
+  .phi-field__value--revealed {
+    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #111827));
+  }
+
+  /* ─── Screen Reader Status ─── */
+
+  .phi-field__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    padding: 0;
+    margin: -1px;
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .phi-field__toggle {
+    display: inline-flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: var(--hx-space-1, 0.25rem);
+    color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
+    cursor: pointer;
+    line-height: 1;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  .phi-field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-phi-field-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .phi-field__toggle:hover {
+    opacity: var(--hx-opacity-90, 0.9);
+  }
+
+  .phi-field__toggle:active {
+    opacity: var(--hx-opacity-50, 0.5);
+  }
+
+  .phi-field__toggle svg {
+    width: 1em;
+    height: 1em;
+    pointer-events: none;
+  }
+
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) {
+    opacity: var(--hx-phi-field-disabled-opacity, var(--hx-opacity-50, 0.5));
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .phi-field--disabled .phi-field__toggle {
+    cursor: not-allowed;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .phi-field__toggle {
+      transition: none;
+    }
+  }

package/dist/css/hx-popover.css

@@ -0,0 +1,61 @@
+/* hx-popover — extracted from Shadow DOM styles */
+:host {
+    /* P2-05: display:contents lets the trigger-wrapper control layout inline;
+       position:relative was vestigial — body uses position:fixed via Floating UI */
+    display: contents;
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='body'] {
+    position: fixed;
+    z-index: var(--hx-popover-z-index, 9999);
+    max-width: var(--hx-popover-max-width, 320px);
+    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-popover-shadow,
+      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))
+    );
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--hx-popover-transition-duration, 0.2s) ease,
+      visibility var(--hx-popover-transition-duration, 0.2s) ease;
+    word-wrap: break-word;
+  }
+
+  [part='body'].visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [part='body']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-popover-arrow-size, 10px);
+    height: var(--hx-popover-arrow-size, 10px);
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='body'] {
+      transition: none;
+    }
+  }

package/dist/css/hx-popup.css

@@ -0,0 +1,31 @@
+/* hx-popup — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  [part='popup'] {
+    position: fixed;
+    z-index: var(--hx-popup-z-index, 9000);
+    inset: 0 auto auto 0;
+    box-sizing: border-box;
+    transition: var(--hx-popup-transition, none);
+  }
+
+  :host(:not([active])) [part='popup'] {
+    display: none;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-arrow-size, 8px);
+    height: var(--hx-arrow-size, 8px);
+    background: var(--hx-arrow-color, var(--hx-color-neutral-0, #ffffff));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='popup'] {
+      transition: none;
+    }
+  }

package/dist/css/hx-progress-bar.css

@@ -0,0 +1,133 @@
+/* hx-progress-bar — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .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;
+  }
+
+  .progress-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .progress-bar__label {
+    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .progress-bar__track {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    width: 100%;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .progress-bar--sm .progress-bar__track {
+    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));
+  }
+
+  .progress-bar--md .progress-bar__track {
+    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));
+  }
+
+  .progress-bar--lg .progress-bar__track {
+    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));
+  }
+
+  .progress-bar__fill {
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+  }
+
+  /* ─── Variant Colors ─── */
+
+  .progress-bar--default .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+  }
+
+  .progress-bar--success .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+  }
+
+  .progress-bar--warning .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+  }
+
+  .progress-bar--danger .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  @keyframes hx-progress-indeterminate {
+    0% {
+      transform: translateX(-100%) scaleX(0.4);
+    }
+    50% {
+      transform: translateX(50%) scaleX(0.6);
+    }
+    100% {
+      transform: translateX(250%) scaleX(0.4);
+    }
+  }
+
+  .progress-bar--indeterminate .progress-bar__fill {
+    transform: translateX(-100%) scaleX(0.4);
+    transform-origin: left center;
+    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)
+      ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+
+    .progress-bar--indeterminate .progress-bar__fill {
+      animation: none;
+      transform: scaleX(1);
+      opacity: var(--hx-opacity-disabled, 0.5); /* reduced from animation; no exact token for 0.4 */
+    }
+  }
+
+  /* ─── High Contrast Mode ─── */
+
+  @media (forced-colors: active) {
+    .progress-bar__track {
+      border: 1px solid ButtonText;
+      background-color: Canvas;
+    }
+
+    .progress-bar__fill {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+  }