@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/css/helix-data.css

@@ -0,0 +1,639 @@
+/* helix-data.css — 5 components */
+
+/* ── hx-code-snippet ── */
+:host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline;
+  }
+
+  /* ─── Inline Mode ─── */
+
+  .code-snippet--inline {
+    display: inline;
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
+    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
+      var(--hx-code-snippet-inline-padding-x, 0.375em);
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
+  }
+
+  /* ─── Block Mode Container ─── */
+
+  .code-snippet {
+    position: relative;
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
+    overflow: hidden;
+  }
+
+  /* ─── Hidden Slot ─── */
+
+  .code-snippet__slot {
+    display: none;
+  }
+
+  /* ─── Header ─── */
+
+  .code-snippet__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;
+    min-height: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── Pre / Code ─── */
+
+  .code-snippet__pre {
+    margin: 0;
+    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));
+    overflow-x: auto;
+    white-space: pre;
+  }
+
+  .code-snippet__pre--wrap {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .code-snippet__code {
+    display: block;
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
+    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-relaxed, 1.625);
+    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    tab-size: var(--hx-code-snippet-tab-size, 2);
+  }
+
+  /* ─── Copy Button ─── */
+
+  .code-snippet__copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    /* WCAG 2.5.5: minimum 44×44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-200, #e2e8f0);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */
+    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);
+    white-space: nowrap;
+    z-index: 1; /* @audit-exception: local stacking context within shadow root */
+  }
+
+  .code-snippet__copy-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    border-color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .code-snippet__copy-button: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);
+  }
+
+  .code-snippet__copy-button:active {
+    /* Non-standard token — fallback 0.8 applies if token is absent */
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Expand Button ─── */
+
+  .code-snippet__expand-button {
+    display: block;
+    width: 100%;
+    /* WCAG 2.5.5: minimum 44×44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    border: none;
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-300, #cbd5e1);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .code-snippet__expand-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  .code-snippet__expand-button: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);
+  }
+
+  /* ─── Line Numbers ─── */
+
+  .code-snippet__line-number {
+    display: inline-block;
+    min-width: var(--hx-space-8, 2rem);
+    padding-inline-end: var(--hx-space-3, 0.75rem);
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    user-select: none;
+    text-align: end;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .code-snippet__copy-button {
+      transition: none;
+    }
+
+    .code-snippet__expand-button {
+      transition: none;
+    }
+  }
+
+  /* ─── Screen-reader only ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+/* ── hx-data-table ── */
+: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 {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: var(--hx-data-table-min-width, 600px);
+  }
+
+  /* ─── Head ─── */
+
+  thead {
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  :host([sticky-header]) thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Cells ─── */
+
+  th,
+  td {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    text-align: start;
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    vertical-align: middle;
+  }
+
+  th {
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    white-space: nowrap;
+  }
+
+  td {
+    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+  }
+
+  /* ─── Checkbox Column ─── */
+
+  th.col-checkbox,
+  td.col-checkbox {
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    width: var(--hx-touch-target-min, 2.75rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    padding-inline-end: var(--hx-space-2, 0.5rem);
+  }
+
+  th.col-checkbox {
+    text-align: center;
+  }
+
+  td.col-checkbox {
+    text-align: center;
+  }
+
+  /* ─── Sort Button ─── */
+
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: inherit;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .sort-btn: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);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Sort Icon ─── */
+
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .sort-icon--active {
+    opacity: var(--hx-opacity-100, 1);
+    color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .sort-icon--desc {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Row States ─── */
+
+  tbody tr {
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  tbody tr:hover {
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  tbody tr[aria-selected='true'] {
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  /* ─── Checkbox Input ─── */
+
+  input[type='checkbox'] {
+    width: var(--hx-size-4, 1rem);
+    height: var(--hx-size-4, 1rem);
+    cursor: pointer;
+    accent-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* ─── Loading Skeleton ─── */
+
+  .skeleton-cell {
+    display: block;
+    height: 1em;
+    border-radius: var(--hx-border-radius-sm, 2px);
+    background: linear-gradient(
+      90deg,
+      var(--hx-color-neutral-200, #e2e8f0) 25%,
+      var(--hx-color-neutral-100, #f1f5f9) 50%,
+      var(--hx-color-neutral-200, #e2e8f0) 75%
+    );
+    background-size: 200% 100%;
+    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
+  }
+
+  @keyframes hx-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-cell {
+      animation: none;
+      opacity: var(
+        --hx-opacity-50,
+        0.5
+      ); /* reduced from animation; approximate to available token */
+    }
+
+    .sort-icon {
+      transition: none;
+    }
+
+    tbody tr {
+      transition: none;
+    }
+  }
+
+  /* ─── Cell Focus ─── */
+
+  td:focus-visible,
+  th:focus-visible,
+  [part~='td']:focus-visible,
+  [part~='th']: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);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Empty State ─── */
+
+  .empty-cell {
+    text-align: center;
+    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
+  }
+/* ── hx-list ── */
+: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));
+  }
+/* ── hx-structured-list ── */
+: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;
+  }
+/* ── hx-table ── */
+: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;
+  }