@weave-framework/ui 0.2.107

package/src/styles/components/snackbar/_styles.scss

@@ -0,0 +1,59 @@
+// snackbar — styles() mixin (class rules). An inverted (ink) bar anchored to the bottom
+// edge by the CDK overlay; its own margin insets it from the edge, and it slides up on open.
+// The action is an accent-tinted text button. Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-snackbar {
+    display: flex;
+    align-items: center;
+    gap: var(--weave-snackbar-gap);
+    box-sizing: border-box;
+    margin: var(--weave-snackbar-offset);
+    max-width: var(--weave-snackbar-max-width);
+    padding: var(--weave-snackbar-padding-y) var(--weave-snackbar-padding-x);
+    border-radius: var(--weave-snackbar-radius);
+    background: var(--weave-snackbar-background);
+    color: var(--weave-snackbar-text);
+    font-size: var(--weave-snackbar-font-size);
+    font-weight: var(--weave-snackbar-weight);
+    line-height: var(--weave-snackbar-line-height);
+    animation: weave-snackbar-in var(--weave-snackbar-duration) ease;
+  }
+
+  @keyframes weave-snackbar-in {
+    from {
+      transform: translateY(12px);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .weave-snackbar__message {
+    flex: 1 1 auto;
+  }
+
+  // Accent text button (no fill) — reads on the dark bar.
+  .weave-snackbar__action {
+    flex: 0 0 auto;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    margin-inline-start: var(--weave-snackbar-gap);
+    color: var(--weave-snackbar-action);
+    font: inherit;
+    font-weight: var(--weave-snackbar-action-weight);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+  }
+
+  .weave-snackbar__action:hover,
+  .weave-snackbar__action:focus-visible {
+    text-decoration: underline;
+    outline: none;
+  }
+}

package/src/styles/components/snackbar/_tokens.scss

@@ -0,0 +1,28 @@
+// snackbar — design tokens (schema). A bottom-anchored toast bar (inverted: ink bg, canvas
+// text) with an accent action. Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    background: ref.ref('color.ink'),
+    text: ref.ref('color.surface'),
+    // The action reads as an accent-tinted label on the dark bar.
+    action: ref.ref('color.accent'),
+  ),
+  size: (
+    // Inset from the viewport edges (the CDK anchors the bar to the bottom edge).
+    offset: 24px,
+    max-width: 480px,
+    radius: ref.ref('shape.radius'),
+    padding-y: 12px,
+    padding-x: 16px,
+    gap: 12px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 500,
+    line-height: 1.4,
+    action-weight: 600,
+  ),
+);

package/src/styles/components/stepper/_index.scss

@@ -0,0 +1,14 @@
+// Stepper — a horizontal step-through (wizard). Behavior lives in stepper.ts (current-
+// index nav + linear gating + Back/Continue; panel contents appended on mount); this is
+// the visual.
+//
+// Numbered circles joined by connector lines, state via the NATIVE data attr (not a class):
+// [data-state=done] = accent fill + a pure-CSS ✓ (number hidden), [data-state=active] =
+// accent fill + number, [data-state=upcoming] = bordered circle. Connectors go accent once
+// the step before them is done.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin). Add another
+// concern as its own file and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/stepper/_styles.scss

@@ -0,0 +1,129 @@
+// stepper — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-stepper {
+    display: flex;
+    flex-direction: column;
+
+    @content;
+  }
+
+  .weave-stepper__header {
+    display: flex;
+    align-items: center;
+  }
+
+  .weave-stepper__step {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-stepper-gap);
+    min-width: 0; // allow the step to shrink so the header never overflows its box
+    padding: var(--weave-stepper-step-padding-y) var(--weave-stepper-step-padding-x);
+    border: 0;
+    background: transparent;
+    color: var(--weave-stepper-label);
+    font-family: inherit;
+    font-size: var(--weave-stepper-label-size);
+    font-weight: var(--weave-stepper-label-weight);
+    cursor: pointer;
+  }
+
+  // The label shrinks + ellipsizes rather than pushing the header past its width.
+  .weave-stepper__label {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .weave-stepper__step[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  .weave-stepper__step:focus-visible {
+    @include helpers.focus-ring;
+    border-radius: var(--weave-stepper-radius);
+  }
+
+  // The numbered circle.
+  .weave-stepper__indicator {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--weave-stepper-indicator-size);
+    height: var(--weave-stepper-indicator-size);
+    border-radius: 50%;
+    font-size: var(--weave-stepper-number-size);
+    line-height: 1;
+    transition:
+      background var(--weave-stepper-duration) ease,
+      border-color var(--weave-stepper-duration) ease,
+      color var(--weave-stepper-duration) ease;
+  }
+
+  // Upcoming — a bordered circle with a sub number + sub label (state via data-state).
+  .weave-stepper__step[data-state='upcoming'] .weave-stepper__indicator {
+    border: var(--weave-stepper-border-width) solid var(--weave-stepper-upcoming-border);
+    color: var(--weave-stepper-upcoming-text);
+  }
+
+  .weave-stepper__step[data-state='upcoming'] .weave-stepper__label {
+    color: var(--weave-stepper-label-upcoming);
+  }
+
+  // Active — accent fill with the number.
+  .weave-stepper__step[data-state='active'] .weave-stepper__indicator {
+    background: var(--weave-stepper-active-background);
+    color: var(--weave-stepper-on-accent);
+  }
+
+  // Done — accent fill with a ✓ (pure CSS rotated-L check), number hidden.
+  .weave-stepper__step[data-state='done'] .weave-stepper__indicator {
+    background: var(--weave-stepper-done-background);
+  }
+
+  .weave-stepper__step[data-state='done'] .weave-stepper__number {
+    display: none;
+  }
+
+  .weave-stepper__step[data-state='done'] .weave-stepper__indicator::after {
+    @include helpers.checkmark(var(--weave-stepper-on-accent), var(--weave-stepper-check-width), var(--weave-stepper-check-height));
+    margin-top: -2px;
+    transform: rotate(45deg);
+  }
+
+  .weave-stepper__optional {
+    margin-inline-start: var(--weave-stepper-optional-gap);
+    color: var(--weave-stepper-optional);
+    font-size: var(--weave-stepper-optional-size);
+  }
+
+  // Connector line between steps; accent once the step before it is done.
+  .weave-stepper__connector {
+    flex: 1 1 auto;
+    min-width: var(--weave-stepper-connector-min);
+    height: var(--weave-stepper-connector-height);
+    margin: 0 var(--weave-stepper-connector-gap);
+    background: var(--weave-stepper-connector);
+    transition: background var(--weave-stepper-duration) ease;
+  }
+
+  .weave-stepper__connector[data-state='done'] {
+    background: var(--weave-stepper-connector-done);
+  }
+
+  .weave-stepper__panel {
+    padding: var(--weave-stepper-panel-padding-y) 0;
+  }
+
+  // The Back / Continue actions ARE the Button component (composed, not re-created) —
+  // this is just their layout row.
+  .weave-stepper__actions {
+    display: flex;
+    gap: var(--weave-stepper-actions-gap);
+    margin-top: var(--weave-stepper-actions-margin);
+  }
+}

package/src/styles/components/stepper/_tokens.scss

@@ -0,0 +1,44 @@
+// stepper — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    // Numbered circles: done = accent + ✓, active = accent + number, upcoming = bordered.
+    active-background: ref.ref('color.accent'),
+    done-background: ref.ref('color.accent'),
+    // On-accent glyphs are a fixed light literal (accent is dark in both Light + Dim,
+    // so surface/canvas wouldn't contrast) — same call as Badge.
+    on-accent: #fff,
+    upcoming-border: ref.ref('color.line'),
+    upcoming-text: ref.ref('color.sub'),
+    label: ref.ref('color.ink'),
+    label-upcoming: ref.ref('color.sub'),
+    optional: ref.ref('color.sub'),
+    connector: ref.ref('color.line'),
+    connector-done: ref.ref('color.accent'),
+  ),
+  size: (
+    indicator-size: 26px,
+    gap: 10px,
+    step-padding-x: 2px,
+    step-padding-y: 4px,
+    connector-min: 24px,
+    connector-height: 1px,
+    connector-gap: 6px,
+    border-width: 1.5px,
+    radius: ref.ref('shape.radius'),
+    check-width: 5px,
+    check-height: 9px,
+    optional-gap: 6px,
+    panel-padding-y: 16px,
+    actions-gap: 8px,
+    actions-margin: 8px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    label-size: 13px,
+    label-weight: 500,
+    number-size: 12px,
+    optional-size: 10px,
+  ),
+);

package/src/styles/components/table/_index.scss

@@ -0,0 +1,14 @@
+// Table — the flagship data surface. Behavior lives in table.ts (column-def + DataSource,
+// sortable headers, row selection + expansion via CDK SelectionModel, sticky header +
+// columns, show/hide, built imperatively so cells can be arbitrary nodes and the body stays
+// reactive); this is the visual.
+//
+// A real <table> in an overflow-x:auto scroll box. Hairline separators (box-shadow, no
+// borders/shadow), compact rows, sticky header (+ optional sticky columns), and accent as a
+// mark: the sort arrow, the 2px accent left border + accentSoft tint on a selected row.
+// State rides native attrs — [aria-sort] / [aria-selected] / [aria-expanded].
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/table/_styles.scss

@@ -0,0 +1,202 @@
+// table — styles() mixin (class rules). A real <table> (thead/tbody/th/td) in an
+// overflow-x:auto scroll box: sticky header, optional sticky columns, hairline row
+// separators (box-shadow, no borders/shadow), compact rows, accent-as-a-mark selection.
+// State rides native attrs ([aria-sort], [aria-selected], [aria-expanded]). Forwarded by
+// ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-table {
+    position: relative;
+  }
+
+  // Scroll box for BOTH axes — a max-height (set inline) makes the body scroll vertically
+  // while the sticky header stays pinned to the box top; wide tables scroll horizontally
+  // while sticky columns stay pinned to the box edge.
+  .weave-table__scroll {
+    overflow: auto;
+  }
+
+  .weave-table__grid {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--weave-table-surface);
+    color: var(--weave-table-text);
+    font-size: var(--weave-table-font-size);
+    line-height: var(--weave-table-line-height);
+  }
+
+  /* ── header ── */
+  .weave-table__header-cell {
+    position: sticky;
+    top: 0;
+    z-index: 2; // above scrolling body rows
+    box-sizing: border-box;
+    padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x);
+    background: var(--weave-table-surface);
+    color: var(--weave-table-header-text);
+    font-size: var(--weave-table-header-size);
+    font-weight: var(--weave-table-header-weight);
+    text-align: left;
+    white-space: nowrap;
+    box-shadow: 0 1px 0 var(--weave-table-line); // hairline under the header
+  }
+
+  .weave-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-table-control-gap);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .weave-table__sort--active {
+    color: var(--weave-table-header-active);
+  }
+
+  .weave-table__sort:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  .weave-table__sort-arrow {
+    display: inline-block;
+    width: 1em;
+    color: var(--weave-table-sort-arrow);
+    font-size: var(--weave-table-arrow-size);
+  }
+
+  /* ── column resize grip (drag the header edge; keyboard on the separator) ── */
+  .weave-table__resize-grip {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: var(--weave-table-resize-grip-width);
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+    outline: none;
+  }
+
+  // The visible hairline, centred in the (wider) hit area.
+  .weave-table__resize-grip::after {
+    content: '';
+    position: absolute;
+    top: 20%;
+    right: calc((var(--weave-table-resize-grip-width) - var(--weave-table-resize-grip-line)) / 2);
+    width: var(--weave-table-resize-grip-line);
+    height: 60%;
+    background: var(--weave-table-resize-grip);
+  }
+
+  .weave-table__resize-grip:hover::after,
+  .weave-table__resize-grip:focus-visible::after {
+    background: var(--weave-table-resize-grip-active);
+  }
+
+  // While dragging a grip, suppress text selection across the table.
+  .weave-table[data-resizing] {
+    user-select: none;
+  }
+
+  /* ── body cells ── */
+  .weave-table__cell {
+    box-sizing: border-box;
+    padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x);
+    box-shadow: 0 -1px 0 var(--weave-table-line); // hairline row separator (no borders)
+    white-space: nowrap;
+  }
+
+  .weave-table__cell--numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Reserve the selected-row marker space on the first cell so selecting never shifts content.
+  .weave-table__row > .weave-table__cell:first-child {
+    border-left: var(--weave-table-marker-width) solid transparent;
+  }
+
+  .weave-table__row:hover > .weave-table__cell {
+    background: var(--weave-table-row-hover);
+  }
+
+  /* ── selection (native ARIA attr, no state class) ── */
+  .weave-table__row[aria-selected='true'] > .weave-table__cell {
+    background: var(--weave-table-selected-background);
+  }
+
+  .weave-table__row[aria-selected='true'] > .weave-table__cell:first-child {
+    border-left-color: var(--weave-table-selected-marker);
+  }
+
+  /* ── sticky columns (offsets set inline by JS) ── */
+  .weave-table__cell--sticky-start,
+  .weave-table__cell--sticky-end {
+    position: sticky;
+    z-index: 1;
+    background: var(--weave-table-surface);
+  }
+
+  // Sticky header cells sit at the corner — above both the sticky body columns and rows.
+  .weave-table__header-cell.weave-table__cell--sticky-start,
+  .weave-table__header-cell.weave-table__cell--sticky-end {
+    z-index: 3;
+  }
+
+  /* ── select + expand utility columns (fixed width set inline for sticky offsets) ── */
+  .weave-table__select,
+  .weave-table__expand {
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  // Selection checkboxes = the real Checkbox component's class contract (.weave-checkbox),
+  // rendered by table.ts — one checkbox visual across the library (no table-local restyle).
+
+  .weave-table__expand-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--weave-table-expand-size);
+    height: var(--weave-table-expand-size);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--weave-table-header-text);
+    cursor: pointer;
+  }
+
+  .weave-table__expand-toggle::before {
+    content: '\25B8'; // ▸
+    display: inline-block;
+    transition: transform var(--weave-table-duration) ease;
+  }
+
+  .weave-table__expand-toggle[aria-expanded='true']::before {
+    transform: rotate(90deg);
+  }
+
+  .weave-table__expand-toggle:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  /* ── expanded detail row ── */
+  .weave-table__detail-cell {
+    padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x);
+    background: var(--weave-table-detail-background);
+    box-shadow: 0 -1px 0 var(--weave-table-line);
+  }
+
+  /* ── empty state ── */
+  .weave-table__empty {
+    padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x);
+    color: var(--weave-table-empty-text);
+    text-align: center;
+  }
+}

package/src/styles/components/table/_tokens.scss

@@ -0,0 +1,47 @@
+// table — design tokens (schema). A hairline data grid: compact rows, sticky header,
+// accent-as-a-mark (sort arrow, 2px selected-row border, accentSoft tint). Forwarded by
+// ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    surface: ref.ref('color.surface'),
+    text: ref.ref('color.ink'),
+    // Header labels: inactive = sub, active sort column = ink.
+    header-text: ref.ref('color.sub'),
+    header-active: ref.ref('color.ink'),
+    line: ref.ref('color.line'),
+    row-hover: ref.ref('color.field'),
+    // accentSoft = accent at ~12% alpha (the selected-row tint from the design).
+    selected-background: color-mix(in srgb, ref.ref('color.accent') 12%, transparent),
+    selected-marker: ref.ref('color.accent'),
+    sort-arrow: ref.ref('color.accent'),
+    // Column-resize grip: a hairline that lights to accent on hover/drag.
+    resize-grip: ref.ref('color.line'),
+    resize-grip-active: ref.ref('color.accent'),
+    // Expanded-row detail panel — a subtle inset tint.
+    detail-background: ref.ref('color.field'),
+    empty-text: ref.ref('color.sub'),
+  ),
+  size: (
+    row-height: 34px,
+    cell-padding-x: 12px,
+    cell-padding-y: 7px,
+    // 2px accent left border on the selected row (reserved transparent otherwise).
+    marker-width: 2px,
+    // Gap between a sort header's label and its arrow.
+    control-gap: 6px,
+    expand-size: 20px,
+    // Column-resize grip: hit area + the visible hairline width.
+    resize-grip-width: 9px,
+    resize-grip-line: 2px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    header-size: 12px,
+    header-weight: 600,
+    line-height: 1.3,
+    arrow-size: 12px,
+  ),
+);

package/src/styles/components/tabs/_index.scss

@@ -0,0 +1,13 @@
+// Tabs — a tablist with one visible panel. Behavior lives in tabs.ts (active-index
+// selection + roving tabindex via the CDK listKeyManager; panel contents appended on
+// mount); this is the visual.
+//
+// A row of role=tab buttons over a 1px rule; the active tab inks and shows a 5px accent
+// square before its label (the Weave mark — no sliding underline). State rides the NATIVE
+// ARIA attr, not a class: [aria-selected=true] inks the tab + paints the ::before square.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin). Add another
+// concern as its own file and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/tabs/_styles.scss

@@ -0,0 +1,76 @@
+// tabs — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-tabs {
+    display: flex;
+    flex-direction: column;
+
+    @content;
+  }
+
+  // The tab row sits over a 1px rule (design).
+  .weave-tabs__list {
+    display: flex;
+    border-bottom: 1px solid var(--weave-tabs-line);
+  }
+
+  .weave-tabs__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-tabs-gap);
+    padding: var(--weave-tabs-tab-padding-y) var(--weave-tabs-tab-padding-x);
+    border: 0;
+    background: transparent;
+    color: var(--weave-tabs-text);
+    font-family: inherit;
+    font-size: var(--weave-tabs-tab-size);
+    font-weight: var(--weave-tabs-tab-weight);
+    cursor: pointer;
+    transition: color var(--weave-tabs-duration) ease;
+  }
+
+  // The 5px accent square before the label — space is always reserved (transparent when
+  // inactive) so activating a tab never shifts its label. State via the ARIA attr.
+  .weave-tabs__tab::before {
+    content: '';
+    flex: none;
+    width: var(--weave-tabs-marker-size);
+    height: var(--weave-tabs-marker-size);
+    background: transparent;
+  }
+
+  .weave-tabs__tab[aria-selected='true'] {
+    color: var(--weave-tabs-text-active);
+  }
+
+  .weave-tabs__tab[aria-selected='true']::before {
+    background: var(--weave-tabs-marker);
+  }
+
+  // Subtle hover — ink the label (enabled tabs only).
+  .weave-tabs__tab:not([aria-disabled='true']):hover {
+    color: var(--weave-tabs-text-active);
+  }
+
+  .weave-tabs__tab[aria-disabled='true'] {
+    color: var(--weave-tabs-disabled-text);
+    cursor: not-allowed;
+  }
+
+  .weave-tabs__tab:focus-visible {
+    @include helpers.focus-ring;
+    outline-offset: -2px; // ring sits inside the tab
+  }
+
+  .weave-tabs__panel {
+    padding: var(--weave-tabs-panel-padding-y) 0;
+    color: var(--weave-tabs-panel-text);
+    font-size: var(--weave-tabs-panel-size);
+  }
+
+  .weave-tabs__panel:focus-visible {
+    @include helpers.focus-ring;
+    outline-offset: -2px;
+  }
+}

package/src/styles/components/tabs/_tokens.scss

@@ -0,0 +1,28 @@
+// tabs — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    // Inactive tabs are sub; the active tab inks + gets an accent square mark
+    // (design: "active = ink + 5px accent square before label; no sliding underline").
+    text: ref.ref('color.sub'),
+    text-active: ref.ref('color.ink'),
+    marker: ref.ref('color.accent'),
+    line: ref.ref('color.line'),
+    disabled-text: ref.ref('color.sub'),
+    panel-text: ref.ref('color.ink'),
+  ),
+  size: (
+    tab-padding-x: 14px,
+    tab-padding-y: 10px,
+    marker-size: 5px,
+    gap: 7px,
+    panel-padding-y: 14px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    tab-size: 13px,
+    tab-weight: 500,
+    panel-size: 13px,
+  ),
+);

package/src/styles/components/timepicker/_index.scss

@@ -0,0 +1,9 @@
+// Timepicker — a time field + spinner popover. Behavior lives in timepicker.ts (trigger field
+// + a CDK-overlay panel of hour/minute spinbutton columns + an AM/PM toggle, per the design);
+// this is the visual. An underline trigger field (shared field-underline helper, like
+// Datepicker) with a clock icon; the panel reuses the overlay-panel chrome.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+
+@forward 'tokens';
+@forward 'styles';