@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/css/hx-card.css

@@ -0,0 +1,161 @@
+/* hx-card — extracted from Shadow DOM styles */
+: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;
+  }

package/dist/css/hx-carousel.css

@@ -0,0 +1,211 @@
+/* hx-carousel — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    position: relative;
+  }
+
+  /* ─── Base ─── */
+
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  :host([orientation='vertical']) .base {
+    flex-direction: row;
+  }
+
+  /* ─── Navigation ─── */
+
+  .navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) .navigation {
+    flex-direction: column;
+  }
+
+  .nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    /* 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);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-0, #fff);
+    color: var(--hx-color-neutral-700, #374151);
+    cursor: pointer;
+    padding: 0;
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      color var(--hx-transition-fast, 0.15s ease),
+      border-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .nav-btn:hover:not([disabled]) {
+    background: var(--hx-color-neutral-50, #f9fafb);
+    border-color: var(--hx-color-neutral-400, #9ca3af);
+  }
+
+  .nav-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav-btn[disabled] {
+    opacity: var(--hx-opacity-disabled, 0.4);
+    cursor: not-allowed;
+  }
+
+  .nav-btn svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* ─── Play/Pause ─── */
+
+  .play-pause-btn {
+    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);
+    border: var(--hx-border-width-thin, 1px) solid transparent;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6b7280);
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .play-pause-btn:hover {
+    background: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  .play-pause-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Scroll Container ─── */
+
+  .scroll-container-wrapper {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .slide-viewport {
+    overflow: hidden;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  .track {
+    display: flex;
+    transition: transform var(--hx-transition-base, 0.3s ease);
+  }
+
+  :host([orientation='vertical']) .track {
+    flex-direction: column;
+  }
+
+  /* ─── Pagination ─── */
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  :host([orientation='vertical']) .pagination {
+    flex-direction: column;
+  }
+
+  .pagination-item {
+    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);
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  .pagination-dot {
+    display: block;
+    width: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    height: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-300, #d1d5db);
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      transform var(--hx-transition-fast, 0.15s ease);
+  }
+
+  .pagination-item[aria-current='true'] .pagination-dot,
+  .pagination-item.is-active .pagination-dot {
+    background: var(--hx-color-primary-600, #2563eb);
+    transform: scale(1.25);
+  }
+
+  .pagination-item:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  /* ─── Controls row ─── */
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Live Region ─── */
+
+  .live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .track,
+    .nav-btn,
+    .pagination-dot,
+    .play-pause-btn {
+      transition: none;
+    }
+  }

package/dist/css/hx-checkbox-group.css

@@ -0,0 +1,77 @@
+/* hx-checkbox-group — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Fieldset ─── */
+
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2);
+    font-family: var(--hx-font-family-sans);
+  }
+
+  /* ─── Legend ─── */
+
+  .fieldset__legend {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1);
+    font-size: var(--hx-font-size-sm);
+    font-weight: var(--hx-font-weight-medium);
+    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal);
+    padding: 0;
+    margin-bottom: var(--hx-space-1);
+  }
+
+  .fieldset__required-marker {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Items Container ─── */
+
+  .fieldset__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));
+  }
+
+  :host([orientation='horizontal']) .fieldset__items {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* ─── Error State ─── */
+
+  .fieldset--error .fieldset__legend {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .fieldset__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .fieldset__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    line-height: var(--hx-line-height-normal);
+  }

package/dist/css/hx-checkbox.css

@@ -0,0 +1,219 @@
+/* hx-checkbox — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Control (checkbox + label row) ─── */
+
+  .checkbox__control {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--hx-space-2, 0.5rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .checkbox__control {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hidden Native Input ─── */
+
+  .checkbox__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Visual Checkbox ─── */
+
+  .checkbox__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    border: var(--hx-border-width-medium, 2px) solid
+      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    margin-top: var(--hx-space-px, 1px);
+  }
+
+  /* ─── Focus Ring ─── */
+
+  .checkbox__input:focus-visible ~ .checkbox__box {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-checkbox-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Checked State ─── */
+
+  .checkbox--checked .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Indeterminate State ─── */
+
+  .checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Error State ─── */
+
+  .checkbox--error .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .checkbox--error.checkbox--checked .checkbox__box,
+  .checkbox--error.checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Hover ─── */
+
+  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */
+  .checkbox__control:hover .checkbox__box {
+    border-color: var(
+      --hx-checkbox-hover-border-color,
+      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
+    );
+  }
+
+  .checkbox--checked .checkbox__control:hover .checkbox__box {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .checkbox--error .checkbox__control:hover .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Checkmark Icon ─── */
+
+  .checkbox__icon {
+    display: none;
+    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    fill: none;
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .checkbox--checked .checkbox__icon--check {
+    display: block;
+  }
+
+  .checkbox--indeterminate .checkbox__icon--indeterminate {
+    display: block;
+  }
+
+  /* ─── Label ─── */
+
+  .checkbox__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .checkbox__required-marker {
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .checkbox__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-inline-start: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-inline-start: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) {
+    --hx-checkbox-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__help-text,
+  :host([hx-size='sm']) .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  :host([hx-size='lg']) {
+    --hx-checkbox-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__help-text,
+  :host([hx-size='lg']) .checkbox__error {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .checkbox__box {
+      transition: none;
+    }
+  }