@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/css/hx-format-date.css

@@ -0,0 +1,10 @@
+/* hx-format-date — extracted from Shadow DOM styles */
+:host {
+    display: inline;
+  }
+
+  [part='base'] {
+    display: inline;
+    font: inherit;
+    color: inherit;
+  }

package/dist/css/hx-grid.css

@@ -0,0 +1,14 @@
+/* hx-grid — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+`;
+
+export const helixGridItemStyles = css`
+  :host {
+    display: block;
+    min-width: 0;
+    min-height: 0;
+  }

package/dist/css/hx-help-text.css

@@ -0,0 +1,50 @@
+/* hx-help-text — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .help-text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hx-help-text-icon-gap, 0.375rem);
+    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
+    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
+    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    margin: 0;
+  }
+
+  .help-text__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .help-text__text {
+    min-width: 0;
+  }
+
+  /* ─── Variant: default ─── */
+
+  .help-text--default {
+    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  /* ─── Variant: error ─── */
+
+  .help-text--error {
+    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  .help-text--warning {
+    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+  }
+
+  /* ─── Variant: success ─── */
+
+  .help-text--success {
+    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+  }

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

@@ -0,0 +1,152 @@
+/* hx-icon-button — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-icon-button-bg);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast),
+      color var(--hx-transition-fast),
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.
+     min-width/min-height override the explicit size tokens when they fall below
+     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
+
+  .button--sm {
+    padding: var(--hx-space-1);
+    width: var(--hx-icon-button-size, var(--hx-size-8));
+    height: var(--hx-icon-button-size, var(--hx-size-8));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-sm);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2);
+    width: var(--hx-icon-button-size, var(--hx-size-10));
+    height: var(--hx-icon-button-size, var(--hx-size-10));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-md);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3);
+    width: var(--hx-icon-button-size, var(--hx-size-12));
+    height: var(--hx-icon-button-size, var(--hx-size-12));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    font-size: var(--hx-font-size-lg);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .button--primary {
+    --hx-icon-button-bg: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--primary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-600);
+  }
+
+  .button--secondary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: var(--hx-color-primary-500);
+  }
+
+  .button--secondary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-50);
+  }
+
+  .button--tertiary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-neutral-700);
+    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+  }
+
+  .button--tertiary:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  .button--danger {
+    --hx-icon-button-bg: var(--hx-color-error-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--danger:hover {
+    --hx-icon-button-bg: var(--hx-color-error-600);
+  }
+
+  .button--ghost {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  /* ─── Icon Container ─── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent
+       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }

package/dist/css/hx-icon.css

@@ -0,0 +1,73 @@
+/* hx-icon — extracted from Shadow DOM styles */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* vertical-align: middle ensures the icon aligns to the visual centre of
+       adjacent inline text rather than the text baseline. */
+    vertical-align: middle;
+    /* overflow: hidden prevents malformed or oversized icons from painting
+       outside the component boundary. The inner SVG may still set
+       overflow: visible for its own viewBox content. */
+    overflow: hidden;
+    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    color: var(--hx-icon-color, currentColor);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ───
+     Fallback pixel values mirror the design token values at time of writing.
+     If token values are updated the fallbacks should be updated to match. */
+
+  :host([hx-size='xs']) {
+    --hx-icon-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) {
+    --hx-icon-size: var(--hx-size-5, 1.25rem);
+  }
+
+  :host([hx-size='md']) {
+    --hx-icon-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) {
+    --hx-icon-size: var(--hx-size-8, 2rem);
+  }
+
+  :host([hx-size='xl']) {
+    --hx-icon-size: var(--hx-size-10, 2.5rem);
+  }
+
+  /* ─── SVG (sprite mode) ───
+     In sprite mode [part="svg"] is an actual <svg> element. The selector
+     targets it specifically. In inline mode the part is applied to a <span>
+     wrapper — see .icon__inline below. */
+
+  svg[part='svg'] {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+    overflow: visible;
+  }
+
+  /* ─── Inline SVG wrapper ───
+     In inline mode [part="svg"] is a <span> that wraps the fetched SVG.
+     The inner <svg> is sized to fill the wrapper. */
+
+  .icon__inline {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon__inline svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+  }

package/dist/css/hx-image.css

@@ -0,0 +1,41 @@
+/* hx-image — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .image__container {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));
+    border-radius: var(--_radius, var(--hx-image-border-radius, 0));
+  }
+
+  .image__container--error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--hx-image-fallback-min-height, 3rem);
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  .image__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--_fit, var(--hx-image-object-fit, cover));
+  }
+
+  .image__caption {
+    display: none;
+    padding: var(--hx-image-caption-padding, 0.5rem 0 0);
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));
+    font-size: var(--hx-image-caption-font-size, 0.875rem);
+  }
+
+  .image__caption--visible {
+    display: block;
+  }

package/dist/css/hx-link.css

@@ -0,0 +1,105 @@
+/* hx-link — extracted from Shadow DOM styles */
+:host {
+    display: inline;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  /* --- Base Link --- */
+
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
+    font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: var(--hx-link-text-decoration, underline);
+    text-underline-offset: var(--hx-link-underline-offset, 2px);
+    cursor: pointer;
+    outline: 0;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      text-decoration-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .link:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: var(--hx-link-text-decoration-hover, underline);
+  }
+
+  .link:active {
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+  }
+
+  .link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-link-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  /* --- Variant: subtle --- */
+
+  .link--subtle {
+    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    text-decoration: none;
+  }
+
+  .link--subtle:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: underline;
+  }
+
+  /* --- Variant: danger --- */
+
+  .link--danger {
+    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .link--danger:hover {
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+  }
+
+  /* --- Disabled --- */
+
+  .link--disabled {
+    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    text-decoration: none;
+    pointer-events: none;
+  }
+
+  /* --- External link icon --- */
+
+  .link__external-icon {
+    display: inline-flex;
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .link {
+      transition: none;
+    }
+  }
+
+  /* --- Visually hidden (sr-only) --- */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }

package/dist/css/hx-list.css

@@ -0,0 +1,48 @@
+/* hx-list — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-list-gap, 0);
+  }
+
+  /* ─── Variant: bulleted ─── */
+
+  .list--bulleted {
+    padding-inline-start: var(--hx-space-6, 1.5rem);
+    list-style: disc;
+  }
+
+  /* ─── Variant: numbered ─── */
+
+  .list--numbered {
+    padding-inline-start: var(--hx-space-6, 1.5rem);
+    list-style: decimal;
+  }
+
+  /* ─── Variant: interactive ─── */
+
+  .list--interactive {
+    list-style: none;
+    padding: 0;
+  }
+
+  /* ─── Variant: description ─── */
+
+  .list--description {
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ─── Dividers ─── */
+
+  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+  }

package/dist/css/hx-menu.css

@@ -0,0 +1,21 @@
+/* hx-menu — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    padding: var(--hx-space-1, 0.25rem);
+    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-menu-shadow,
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1)
+    );
+    min-width: var(--hx-menu-min-width, 10rem);
+    outline: none;
+  }

package/dist/css/hx-meter.css

@@ -0,0 +1,113 @@
+/* hx-meter — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    width: 100%;
+  }
+
+  .meter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+  }
+
+  .meter__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .meter__track {
+    position: relative;
+    width: 100%;
+    height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
+    overflow: hidden;
+  }
+
+  .meter__indicator {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    background-color: var(--_indicator-color);
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
+    transition:
+      transform var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Default (no thresholds configured) ─── */
+
+  :host {
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));
+  }
+
+  /* ─── Semantic state colors ─── */
+
+  :host([data-state='optimum']) {
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));
+  }
+
+  :host([data-state='warning']) {
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));
+  }
+
+  :host([data-state='danger']) {
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
+  }
+
+  /* ─── State Label (WCAG 1.4.1) ─── */
+  /* Visible text label rendered below the track when a semantic state is active. */
+  /* Ensures the meter state is not conveyed by fill color alone.                 */
+  /* aria-hidden="true" because aria-valuetext already includes the state for AT. */
+
+  .meter__state-label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .meter__state-label[data-state='optimum'] {
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));
+  }
+
+  .meter__state-label[data-state='warning'] {
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));
+  }
+
+  .meter__state-label[data-state='danger'] {
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Native meter hidden (we use custom rendering) ─── */
+
+  .meter__native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }