@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/css/hx-status-indicator.css

@@ -0,0 +1,97 @@
+/* hx-status-indicator — extracted from Shadow DOM styles */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    flex-shrink: 0;
+  }
+
+  .indicator__dot {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--_dot-color);
+    position: relative;
+    z-index: 1; /* dot above pulse ring within shadow root */
+  }
+
+  .indicator__pulse-ring {
+    display: none;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));
+    opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */
+    animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;
+    z-index: 0; /* pulse ring beneath dot within shadow root */
+  }
+
+  :host([pulse]) .indicator__pulse-ring {
+    display: block;
+  }
+
+  @keyframes hx-status-pulse {
+    0% {
+      transform: scale(1);
+      opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */
+    }
+    100% {
+      transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([pulse]) .indicator__pulse-ring {
+      animation: none;
+      display: none;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));
+  }
+
+  :host([size='md']) {
+    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
+  }
+
+  :host([size='lg']) {
+    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));
+  }
+
+  /* ─── Status Colors ─── */
+
+  :host([status='online']) {
+    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
+  }
+
+  :host([status='offline']) {
+    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
+  }
+
+  :host([status='away']) {
+    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
+  }
+
+  :host([status='busy']) {
+    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));
+  }
+
+  :host([status='unknown']) {
+    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
+  }

package/dist/css/hx-steps.css

@@ -0,0 +1,52 @@
+/* hx-steps — extracted from Shadow DOM styles */
+:host {
+    display: block;
+
+    /* ─── Size defaults (md) ─── */
+    --hx-steps-indicator-size: var(--hx-size-8, 2rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);
+    --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+
+    /* ─── Item layout defaults (horizontal) ─── */
+    --hx-steps-item-flex: 1;
+    --hx-steps-item-width: auto;
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  /* ─── Orientation: vertical ─── */
+
+  :host([orientation='vertical']) {
+    --hx-steps-item-flex: initial;
+    --hx-steps-item-width: 100%;
+  }
+
+  :host([orientation='vertical']) .steps {
+    flex-direction: column;
+  }
+
+  /* ─── Size: sm ─── */
+
+  :host([size='sm']) {
+    --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);
+    --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  /* ─── Size: lg ─── */
+
+  :host([size='lg']) {
+    --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);
+    --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);
+    --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
+  }

package/dist/css/hx-structured-list.css

@@ -0,0 +1,75 @@
+/* hx-structured-list — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));
+    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));
+    --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));
+  }
+
+  :host([condensed]) {
+    --_padding-block: var(--hx-structured-list-condensed-padding-block, var(--hx-space-2, 0.5rem));
+    --_padding-inline: var(
+      --hx-structured-list-condensed-padding-inline,
+      var(--hx-space-3, 0.75rem)
+    );
+  }
+
+  .list {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :host([bordered]) .list {
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    overflow: hidden;
+  }
+
+  :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {
+    background: var(--_bg-stripe);
+  }
+`;
+
+export const helixStructuredListRowStyles = css`
+  :host {
+    display: block;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    align-items: baseline;
+    padding-block: var(--_padding-block, var(--hx-space-4, 1rem));
+    padding-inline: var(--_padding-inline, var(--hx-space-4, 1rem));
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  :host(:not(:last-of-type)) .row {
+    border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  .row__label {
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .row__value {
+    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .row__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .row__actions:empty {
+    display: none;
+  }

package/dist/css/hx-style-scope.css

@@ -0,0 +1,4 @@
+/* hx-style-scope — extracted from Shadow DOM styles */
+:host {
+    display: contents;
+  }

package/dist/css/hx-switch.css

@@ -0,0 +1,169 @@
+/* hx-switch — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* --- Layout --- */
+
+  .switch {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .switch__control-row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  /* --- Track --- */
+
+  .switch__track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    border: none;
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .switch__track:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-switch-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .switch--checked .switch__track {
+    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* --- Thumb --- */
+
+  .switch__thumb {
+    position: absolute;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  /* --- Size: sm (track 32x18, thumb 14px) --- */
+
+  .switch--sm .switch__track {
+    width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));
+    height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));
+  }
+
+  .switch--sm .switch__thumb {
+    width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
+    height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--sm.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));
+  }
+
+  /* --- Size: md (track 40x22, thumb 18px) --- */
+
+  .switch--md .switch__track {
+    width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));
+    height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));
+  }
+
+  .switch--md .switch__thumb {
+    width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
+    height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--md.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));
+  }
+
+  /* --- Size: lg (track 48x26, thumb 22px) --- */
+
+  .switch--lg .switch__track {
+    width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));
+    height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));
+  }
+
+  .switch--lg .switch__thumb {
+    width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
+    height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--lg.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));
+  }
+
+  /* --- Label --- */
+
+  .switch__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .switch__required-marker {
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* --- Help Text & Error --- */
+
+  .switch__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .switch__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* --- Reduced Motion --- */
+
+  @media (prefers-reduced-motion: reduce) {
+    .switch__track,
+    .switch__thumb {
+      transition: none;
+    }
+  }

package/dist/css/hx-table.css

@@ -0,0 +1,128 @@
+/* hx-table — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Scroll Wrapper ─── */
+
+  .table-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ─── Table ─── */
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  :host([full-width]) table {
+    width: 100%;
+  }
+
+  /* ─── Caption ─── */
+
+  caption {
+    caption-side: top;
+    text-align: start;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  /* ─── Slotted sub-component styling ─── */
+
+  /*
+   * ::slotted() only matches DIRECT slot assignees. hx-table's direct
+   * slot children are hx-thead, hx-tbody, and hx-tfoot — never hx-tr,
+   * hx-th, or hx-td. CSS custom properties inherit through shadow DOM
+   * boundaries, so variables set on section elements cascade to their
+   * slotted row and cell descendants automatically.
+   */
+
+  /* Header background via CSS vars that cascade through display:contents */
+  ::slotted(hx-thead) {
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
+  :host([variant='striped']) ::slotted(hx-tbody) {
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Hover variant: set hover bg variable on direct slotted section elements */
+  :host([variant='hover']) ::slotted(hx-tbody),
+  :host([variant='hover']) ::slotted(hx-thead),
+  :host([variant='striped']) ::slotted(hx-tbody),
+  :host([variant='striped']) ::slotted(hx-thead),
+  :host([variant='default']) ::slotted(hx-tbody),
+  :host([variant='default']) ::slotted(hx-thead) {
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Compact variant: reduced padding signal set on section elements that cascade to cells */
+  :host([variant='compact']) ::slotted(hx-thead),
+  :host([variant='compact']) ::slotted(hx-tbody),
+  :host([variant='compact']) ::slotted(hx-tfoot) {
+    --_hx-table-cell-padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Sticky Header ─── */
+
+  :host([sticky-header]) ::slotted(hx-thead) {
+    --_hx-table-th-position: sticky;
+    --_hx-table-th-top: 0;
+    --_hx-table-th-z-index: 1;
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Focus ─── */
+
+  ::slotted(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+  }
+
+  /* ─── Responsive Mobile Card Layout ─── */
+
+  @media (max-width: 768px) {
+    .table-wrapper {
+      overflow-x: visible;
+    }
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted(*) {
+      transition: none !important;
+    }
+  }
+`;
+
+/**
+ * Styles shared by sub-components (hx-th, hx-td) for cell layout.
+ * Exported so sub-components can import them directly.
+ */
+export const helixTableCellBaseStyles = css`
+  :host {
+    display: contents;
+  }
+`;
+
+export const helixTableRowBaseStyles = css`
+  :host {
+    display: contents;
+  }
+`;
+
+export const helixTableSectionBaseStyles = css`
+  :host {
+    display: contents;
+  }

package/dist/css/hx-tabs.css

@@ -0,0 +1,76 @@
+/* hx-tabs — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Container ─── */
+
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-tabs-gap, 0);
+  }
+
+  :host([orientation='vertical']) .tabs {
+    flex-direction: row;
+  }
+
+  /* ─── Tablist ─── */
+
+  .tablist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0;
+    border-bottom: var(--hx-tabs-border-width, 1px) solid
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tablist::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ─── Vertical Orientation ─── */
+
+  :host([orientation='vertical']) {
+    --_tab-indicator-bottom: 0px;
+    --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);
+    --_tab-indicator-bottom-color: transparent;
+    --_tab-indicator-end-color: var(
+      --hx-tabs-indicator-color,
+      var(--hx-color-primary-500, #2563eb)
+    );
+  }
+
+  :host([orientation='vertical']) .tablist {
+    flex-direction: column;
+    border-bottom: none;
+    border-inline-end: var(--hx-tabs-border-width, 1px) solid
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+    overflow-x: visible;
+    overflow-y: auto;
+    min-width: var(--hx-tabs-vertical-width, 12rem);
+    flex-shrink: 0;
+  }
+
+  /* ─── Panels Container ─── */
+
+  .panels {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tablist {
+      scroll-behavior: auto;
+    }
+  }