@helixui/library 1.1.2 → 2.0.0

package/dist/css/hx-side-nav.css

@@ -0,0 +1,149 @@
+/* hx-side-nav — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    height: 100%;
+    /* Mirror the nav background and text on the host so slotted light-DOM
+       content (header, footer slots) inherits the correct dark surface color.
+       Without this, axe-core cannot resolve the background for slotted nodes
+       and evaluates their text against the page white background, producing
+       false-positive color-contrast violations (WCAG 2.1 AA). */
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: var(--hx-side-nav-width, 16rem);
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    transition: width var(--hx-transition-normal, 300ms) ease;
+    overflow: hidden;
+    border-inline-end: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+  }
+
+  /* ─── Collapsed State ─── */
+
+  :host([collapsed]) .side-nav {
+    width: var(--hx-side-nav-collapsed-width, 3.5rem);
+  }
+
+  /* ─── Header ─── */
+
+  .side-nav__header {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-header-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__header {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Body ─── */
+
+  .side-nav__body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--hx-space-2, 0.5rem) 0;
+  }
+
+  /* ─── Footer ─── */
+
+  .side-nav__footer {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-footer-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__footer {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .side-nav__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-space-8, 2rem);
+    height: var(--hx-space-8, 2rem);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .side-nav__toggle:hover {
+    background-color: var(
+      --hx-overlay-white-10,
+      rgba(255, 255, 255, 0.1)
+    ); /* fallback for browsers without color-mix() */
+    color: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .side-nav__toggle:hover {
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+    }
+  }
+
+  .side-nav__toggle: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);
+  }
+
+  .side-nav__toggle svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+    flex-shrink: 0;
+    transition: transform var(--hx-transition-normal, 300ms) ease;
+  }
+
+  :host([collapsed]) .side-nav__toggle svg {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .side-nav {
+      transition: none;
+    }
+
+    .side-nav__toggle {
+      transition: none;
+    }
+
+    .side-nav__toggle svg {
+      transition: none;
+    }
+  }

package/dist/css/hx-skeleton.css

@@ -0,0 +1,82 @@
+/* hx-skeleton — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([loaded]) {
+    display: none;
+  }
+
+  /* ─── Base ─── */
+
+  .skeleton {
+    display: block;
+    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));
+    overflow: hidden;
+    position: relative;
+    width: var(--_width, 100%);
+    height: var(--_height, auto);
+  }
+
+  /* ─── Variant Shapes ─── */
+
+  .skeleton--text {
+    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));
+    height: var(--_height, 1em);
+  }
+
+  .skeleton--circle {
+    border-radius: var(--hx-skeleton-circle-radius, 50%);
+    aspect-ratio: var(--_circle-aspect-ratio, 1);
+    width: var(--_width, 2.5rem);
+    height: var(--_height, var(--_width, 2.5rem));
+  }
+
+  .skeleton--rect {
+    border-radius: var(--hx-skeleton-rect-radius, var(--hx-border-radius-sm, 0.25rem));
+    height: var(--_height, 1rem);
+  }
+
+  .skeleton--button {
+    border-radius: var(--hx-skeleton-button-radius, var(--hx-border-radius-md, 0.375rem));
+    height: var(--_height, 2.5rem);
+  }
+
+  .skeleton--paragraph {
+    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));
+    height: var(--_height, auto);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  /* ─── Shimmer Animation ─── */
+
+  .skeleton--animated::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--hx-skeleton-shimmer-color, var(--hx-overlay-white-40, rgba(255, 255, 255, 0.4))) 50%,
+      transparent 100%
+    );
+    background-size: var(--hx-skeleton-shimmer-width, 200%) 100%;
+    animation: hx-skeleton-shimmer var(--hx-skeleton-duration, 1.5s) ease-in-out infinite;
+  }
+
+  @keyframes hx-skeleton-shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: -200% center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton--animated::after {
+      display: none;
+    }
+  }

package/dist/css/hx-slider.css

@@ -0,0 +1,287 @@
+/* hx-slider — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Container ─── */
+
+  .slider {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Label Row ─── */
+
+  .slider__label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .slider__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .slider__value-display {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+    font-variant-numeric: tabular-nums;
+    min-width: var(--hx-size-8, 2rem);
+    text-align: end;
+  }
+
+  /* ─── Track Container ─── */
+
+  .slider__track-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .slider__track {
+    position: relative;
+    width: 100%;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e9ecef));
+    overflow: visible;
+  }
+
+  /* ─── Size: sm ─── */
+
+  .slider--sm .slider__track {
+    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));
+  }
+
+  .slider--sm .slider__input {
+    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));
+  }
+
+  /* ─── Size: md ─── */
+
+  .slider--md .slider__track {
+    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));
+  }
+
+  .slider--md .slider__input {
+    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));
+  }
+
+  /* ─── Size: lg ─── */
+
+  .slider--lg .slider__track {
+    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));
+  }
+
+  .slider--lg .slider__input {
+    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));
+  }
+
+  /* ─── Fill ─── */
+
+  .slider__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
+    pointer-events: none;
+    transform-origin: left center;
+    transform: scaleX(var(--_fill-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  /* Suppress fill animation on initial render — only animate on user interaction */
+  :host(:not([data-ready])) .slider__fill {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slider__fill {
+      transition: none;
+    }
+  }
+
+  /* ─── Native Range Input ─── */
+
+  .slider__input {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+    /* Expand the hit area so the thumb is easy to grab */
+    padding-block: var(--hx-slider-input-padding-block, 0.75rem);
+  }
+
+  /* In forced-color mode, restore native outline so the input remains focusable */
+  @media (forced-colors: active) {
+    .slider__input {
+      outline: revert;
+      opacity: 1;
+    }
+    .slider__input:focus-visible {
+      outline: 2px solid ButtonText;
+    }
+  }
+
+  .slider__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Thumb (visual, :before on a wrapper or via ::after on track) ─── */
+  /*
+   * The native thumb is hidden (opacity 0 on the input). We render a visible
+   * thumb element positioned by --fill-pct (a raw 0–100 number set in JS).
+   *
+   * Correct alignment formula keeps the thumb centered within the track at
+   * both extremes, preventing the left/right halves from clipping outside:
+   *   left = fillPct% * (1 – thumbSize/100%) + thumbSize * (1 – fillPct/100)
+   * Simplified: left = calc(var(--fill-pct,0)*1% + var(--_thumb-size)*(1 - var(--fill-pct,0)/100))
+   * Combined with translate(-50%,-50%) this places the thumb center correctly
+   * at every position from min to max.
+   */
+
+  .slider__thumb-visual {
+    position: absolute;
+    top: 50%;
+    /* Corrected position: thumb stays within track at all fill values */
+    left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
+    transform: translate(-50%, -50%);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-slider-thumb-border-width, 2px) solid
+      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
+    box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+    pointer-events: none;
+    transition:
+      box-shadow var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slider__thumb-visual {
+      transition: none;
+    }
+  }
+
+  .slider__input:focus-visible ~ .slider__thumb-visual {
+    box-shadow:
+      0 0 0 var(--hx-focus-ring-width, 2px)
+        var(
+          --hx-slider-focus-ring-color,
+          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        ),
+      var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+  }
+
+  /* ─── Thumb sizes ─── */
+
+  .slider--sm .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-sm, var(--hx-size-3, 0.75rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  .slider--md .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-md, var(--hx-size-4, 1rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  .slider--lg .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-lg, var(--hx-size-5, 1.25rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  /* ─── Forced colors (Windows High Contrast) ─── */
+  @media (forced-colors: active) {
+    .slider__fill {
+      background-color: Highlight;
+    }
+    .slider__track {
+      background-color: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+    .slider__thumb-visual {
+      background-color: ButtonText;
+      border-color: ButtonText;
+    }
+    .slider__input:focus-visible ~ .slider__thumb-visual {
+      outline: 2px solid Highlight;
+    }
+  }
+
+  /* ─── Ticks ─── */
+
+  .slider__ticks {
+    position: relative;
+    width: 100%;
+    height: var(--hx-space-2, 0.5rem);
+    margin-top: var(--hx-space-1, 0.25rem);
+  }
+
+  .slider__tick {
+    position: absolute;
+    top: 0;
+    width: var(--hx-border-width-thin, 1px);
+    height: 100%;
+    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #adb5bd));
+    transform: translateX(-50%);
+  }
+
+  /* ─── Range Labels ─── */
+
+  .slider__range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+    margin-top: var(--hx-space-0-5, 0.125rem);
+  }
+
+  /* ─── Help Text ─── */
+
+  .slider__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Disabled state ─── */
+
+  .slider--disabled .slider__fill {
+    background-color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .slider--disabled .slider__thumb-visual {
+    border-color: var(--hx-color-neutral-400, #adb5bd);
+  }

package/dist/css/hx-spinner.css

@@ -0,0 +1,116 @@
+/* hx-spinner — extracted from Shadow DOM styles */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_spinner-size);
+    height: var(--_spinner-size);
+    flex-shrink: 0;
+  }
+
+  .spinner__svg {
+    width: 100%;
+    height: 100%;
+    animation: hx-spinner-rotate var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  .spinner__track {
+    stroke: var(--_spinner-track-color);
+  }
+
+  .spinner__arc {
+    stroke: var(--_spinner-color);
+    /* SVG arc math: viewBox is 24×24, r=10, circumference = 2π × 10 ≈ 62.83.
+       stroke-dasharray: 56 creates a visible arc of ~89% of circumference.
+       stroke-dashoffset: 14 shifts the arc start to produce the ~75% visible gap aesthetic.
+       Adjust both proportionally if r or viewBox dimensions change. */
+    stroke-dasharray: 56;
+    stroke-dashoffset: 14;
+    animation: hx-spinner-dash var(--hx-duration-spinner, 750ms)
+      var(--hx-easing-in-out, ease-in-out) infinite;
+    transform-origin: center;
+  }
+
+  @keyframes hx-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes hx-spinner-dash {
+    0% {
+      stroke-dashoffset: 50;
+    }
+    50% {
+      stroke-dashoffset: 14;
+    }
+    100% {
+      stroke-dashoffset: 50;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner__svg {
+      animation: none;
+    }
+
+    .spinner__arc {
+      animation: none;
+      /* Maintain the static partial arc at full opacity so the loading state remains
+         clearly communicated without motion. A faded arc looks broken; full opacity
+         alongside the track ring unambiguously signals "in progress". */
+      stroke-dashoffset: 14;
+      opacity: 1;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_spinner-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([size='md']) {
+    --_spinner-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([size='lg']) {
+    --_spinner-size: var(--hx-size-8, 2rem);
+  }
+
+  /* ─── Variant Colors ─── */
+
+  :host([variant='default']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  :host([variant='primary']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+  }
+
+  :host([variant='inverted']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-0, #ffffff));
+    /* Fallback for browsers without color-mix() support (Chrome < 111, Firefox < 113, Safari < 16.2).
+       rgba(255, 255, 255, 0.3) approximates the intended 30% white track color. */
+    --_spinner-track-color: var(
+      --hx-spinner-track-color,
+      var(--hx-overlay-white-30, rgba(255, 255, 255, 0.3))
+    );
+  }
+
+  @supports (color: color-mix(in srgb, white 30%, transparent)) {
+    :host([variant='inverted']) {
+      --_spinner-track-color: var(
+        --hx-spinner-track-color,
+        color-mix(in srgb, var(--hx-color-neutral-0, #ffffff) 30%, transparent)
+      );
+    }
+  }