@helixui/library 1.1.2 → 2.0.0-next.30

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

@@ -0,0 +1,309 @@
+/* hx-split-button — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Container ─── */
+
+  .split-button {
+    display: inline-flex;
+    align-items: stretch;
+    position: relative;
+  }
+
+  /* ─── Primary Button ─── */
+
+  .split-button__primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
+    border-inline-end: none;
+    border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
+      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    text-decoration: none;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    flex: 1 1 auto;
+  }
+
+  .split-button__primary:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    z-index: 1;
+    position: relative;
+  }
+
+  .split-button__primary:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .split-button__primary:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  .split-button__primary[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Trigger Button ─── */
+
+  .split-button__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
+      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));
+    border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .split-button__trigger:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    z-index: 1;
+    position: relative;
+  }
+
+  .split-button__trigger:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .split-button__trigger:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  .split-button__trigger[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Trigger Icon ─── */
+
+  .split-button__chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .split-button__chevron--open {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Size Variants ─── */
+
+  /* sm */
+  .split-button--sm .split-button__primary {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  .split-button--sm .split-button__trigger {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  /* md */
+  .split-button--md .split-button__primary {
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  .split-button--md .split-button__trigger {
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  /* lg */
+  .split-button--lg .split-button__primary {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  .split-button--lg .split-button__trigger {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  /* ─── Variant: primary ─── */
+
+  .split-button--primary .split-button__primary,
+  .split-button--primary .split-button__trigger {
+    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-border-color: transparent;
+    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);
+  }
+
+  /* ─── Variant: secondary ─── */
+
+  .split-button--secondary .split-button__primary,
+  .split-button--secondary .split-button__trigger {
+    --hx-split-button-bg: transparent;
+    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
+  }
+
+  .split-button--secondary .split-button__primary:hover,
+  .split-button--secondary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
+    filter: none;
+  }
+
+  /* ─── Variant: tertiary ─── */
+
+  .split-button--tertiary .split-button__primary,
+  .split-button--tertiary .split-button__trigger {
+    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-border-color: transparent;
+    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+  }
+
+  .split-button--tertiary .split-button__primary:hover,
+  .split-button--tertiary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    filter: none;
+  }
+
+  /* ─── Variant: danger ─── */
+
+  .split-button--danger .split-button__primary,
+  .split-button--danger .split-button__trigger {
+    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-border-color: transparent;
+    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
+  }
+
+  .split-button--danger .split-button__primary:hover,
+  .split-button--danger .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
+    filter: none;
+  }
+
+  /* ─── Variant: ghost ─── */
+
+  .split-button--ghost .split-button__primary,
+  .split-button--ghost .split-button__trigger {
+    --hx-split-button-bg: transparent;
+    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-border-color: transparent;
+    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
+  }
+
+  .split-button--ghost .split-button__primary:hover,
+  .split-button--ghost .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    filter: none;
+  }
+
+  /* ─── Variant: outline ─── */
+
+  .split-button--outline .split-button__primary,
+  .split-button--outline .split-button__trigger {
+    --hx-split-button-bg: transparent;
+    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+  }
+
+  .split-button--outline .split-button__primary:hover,
+  .split-button--outline .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    filter: none;
+  }
+
+  /* ─── Dropdown Menu Panel ─── */
+
+  @keyframes hx-split-button-menu-open {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .split-button__menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    inset-inline-end: 0;
+    min-width: 100%;
+    max-height: var(--hx-split-button-menu-max-height, 18rem);
+    overflow-y: auto;
+    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-split-button-menu-shadow,
+      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),
+      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))
+    );
+    padding: var(--hx-space-1, 0.25rem);
+    z-index: var(--hx-z-index-dropdown, 1000);
+  }
+
+  .split-button__menu--open {
+    display: block;
+    animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .split-button__primary,
+    .split-button__trigger,
+    .split-button__chevron {
+      transition: none;
+    }
+
+    .split-button__menu--open {
+      animation: none;
+    }
+  }

package/dist/css/hx-split-panel.css

@@ -0,0 +1,168 @@
+/* hx-split-panel — extracted from Shadow DOM styles */
+:host {
+    display: flex;
+    --_divider-size: var(--hx-split-panel-divider-size, 4px);
+    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
+    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
+    overflow: hidden;
+  }
+
+  :host([orientation='horizontal']) {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .panel {
+    overflow: auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .panel--start {
+    flex-shrink: 0;
+  }
+
+  .panel--end {
+    flex: 1;
+  }
+
+  :host([orientation='horizontal']) .panel--start {
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .panel--start {
+    width: 100%;
+  }
+
+  /* ─── Divider Track (flex child wrapper) ─── */
+
+  .divider-track {
+    flex-shrink: 0;
+    position: relative;
+    overflow: visible;
+    display: flex;
+    align-items: stretch;
+  }
+
+  :host([orientation='horizontal']) .divider-track {
+    width: var(--_divider-size);
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .divider-track {
+    width: 100%;
+    height: var(--_divider-size);
+  }
+
+  /* ─── Divider (separator role — no interactive children) ─── */
+
+  .divider {
+    flex: 1;
+    background-color: var(--_divider-color);
+    cursor: col-resize;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+  }
+
+  :host([orientation='horizontal']) .divider {
+    cursor: col-resize;
+  }
+
+  :host([orientation='vertical']) .divider {
+    cursor: row-resize;
+  }
+
+  .divider:hover,
+  .divider:focus-visible {
+    background-color: var(--_divider-hover-color);
+  }
+
+  .divider:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-panel-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
+  }
+
+  :host([disabled]) .divider {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .divider:hover,
+  :host([disabled]) .divider:focus-visible {
+    background-color: var(--_divider-color);
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* ─── Collapse Controls (siblings of separator, not children) ─── */
+
+  .collapse-controls {
+    position: absolute;
+    top: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    z-index: 2;
+    pointer-events: auto;
+  }
+
+  :host([orientation='vertical']) .collapse-controls {
+    flex-direction: row;
+  }
+
+  .collapse-btn {
+    background: var(--_divider-hover-color);
+    border: 2px solid var(--hx-color-neutral-0);
+    color: var(--hx-color-neutral-0);
+    width: var(--hx-size-5, 1.25rem);
+    height: var(--hx-size-5, 1.25rem);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--hx-split-panel-btn-icon-size, 0.5rem);
+    padding: 0;
+    line-height: 1;
+    flex-shrink: 0;
+    /* WCAG 2.5.5: minimum 44×44px touch target via transparent hit-area */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+  }
+
+  .collapse-btn:hover {
+    filter: brightness(1.1);
+  }
+
+  .collapse-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-panel-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) {
+    .divider {
+      transition: none;
+    }
+  }

package/dist/css/hx-stack.css

@@ -0,0 +1,104 @@
+/* hx-stack — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline-block;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Direction ─── */
+
+  :host([direction='horizontal']) [part='base'] {
+    flex-direction: row;
+  }
+
+  :host([direction='vertical']) [part='base'] {
+    flex-direction: column;
+  }
+
+  /* ─── Wrap ─── */
+
+  :host([wrap]) [part='base'] {
+    flex-wrap: wrap;
+  }
+
+  /* ─── Alignment ─── */
+
+  :host([align='start']) [part='base'] {
+    align-items: flex-start;
+  }
+
+  :host([align='center']) [part='base'] {
+    align-items: center;
+  }
+
+  :host([align='end']) [part='base'] {
+    align-items: flex-end;
+  }
+
+  :host([align='stretch']) [part='base'] {
+    align-items: stretch;
+  }
+
+  :host([align='baseline']) [part='base'] {
+    align-items: baseline;
+  }
+
+  /* ─── Justify ─── */
+
+  :host([justify='start']) [part='base'] {
+    justify-content: flex-start;
+  }
+
+  :host([justify='center']) [part='base'] {
+    justify-content: center;
+  }
+
+  :host([justify='end']) [part='base'] {
+    justify-content: flex-end;
+  }
+
+  :host([justify='between']) [part='base'] {
+    justify-content: space-between;
+  }
+
+  :host([justify='around']) [part='base'] {
+    justify-content: space-around;
+  }
+
+  :host([justify='evenly']) [part='base'] {
+    justify-content: space-evenly;
+  }
+
+  /* ─── Gap ─── */
+
+  :host([gap='none']) [part='base'] {
+    gap: 0;
+  }
+
+  :host([gap='xs']) [part='base'] {
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  :host([gap='sm']) [part='base'] {
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  :host([gap='md']) [part='base'] {
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  :host([gap='lg']) [part='base'] {
+    gap: var(--hx-space-6, 1.5rem);
+  }
+
+  :host([gap='xl']) [part='base'] {
+    gap: var(--hx-space-8, 2rem);
+  }

package/dist/css/hx-stat.css

@@ -0,0 +1,106 @@
+/* hx-stat — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
+    font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
+    color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .stat--sm .stat__value {
+    font-size: var(--hx-stat-value-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--sm .stat__label {
+    font-size: var(--hx-stat-label-font-size-sm, var(--hx-font-size-xs, 0.75rem));
+  }
+
+  .stat--md .stat__value {
+    font-size: var(--hx-stat-value-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--md .stat__label {
+    font-size: var(--hx-stat-label-font-size-md, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  .stat--lg .stat__value {
+    font-size: var(--hx-stat-value-font-size-lg, var(--hx-font-size-5xl, 3rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--lg .stat__label {
+    font-size: var(--hx-stat-label-font-size-lg, var(--hx-font-size-md, 1rem));
+  }
+
+  /* ─── Value ─── */
+
+  .stat__header {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-stat-header-gap, var(--hx-space-2, 0.5rem));
+  }
+
+  .stat__value {
+    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));
+  }
+
+  /* ─── Label ─── */
+
+  .stat__label {
+    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));
+    font-weight: var(--hx-font-weight-normal, 400);
+  }
+
+  /* ─── Icon Slot ─── */
+
+  .stat__icon {
+    display: flex;
+    align-items: center;
+    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));
+    flex-shrink: 0;
+  }
+
+  /* ─── Trend Indicator ─── */
+
+  .stat__trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    padding: var(--hx-space-0-5, 0.125rem) var(--hx-space-1-5, 0.375rem);
+  }
+
+  .stat__trend--up {
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));
+    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
+  }
+
+  .stat__trend--down {
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));
+    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
+  }
+
+  .stat__trend-arrow {
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
+  }
+
+  /* ─── Hidden empty slot wrappers ─── */
+
+  [hidden] {
+    display: none !important;
+  }