@weave-framework/ui 0.2.107

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

@@ -0,0 +1,60 @@
+// menu — styles() mixin (class rules). The panel reuses the shared overlay-panel chrome
+// (surface + 1px line + radius, no shadow); rows are lean full-width buttons whose
+// hover/roving-active state paints from the native :hover/:focus pseudo (no state class).
+// Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-menu {
+    @include helpers.overlay-panel;
+    min-width: var(--weave-menu-min-width);
+    padding: var(--weave-menu-padding-y) 0;
+    overflow: hidden; // clip rows to the panel radius
+  }
+
+  .weave-menu__item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--weave-menu-item-gap);
+    width: 100%;
+    min-height: var(--weave-menu-item-height);
+    padding: var(--weave-menu-item-padding-y) var(--weave-menu-item-padding-x);
+    border: 0;
+    background: transparent;
+    color: var(--weave-menu-item-text);
+    font: inherit;
+    font-size: var(--weave-menu-font-size);
+    font-weight: var(--weave-menu-weight);
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--weave-menu-duration) ease;
+  }
+
+  // Optional subtext under the label — smaller + lighter (the drop-list row pattern).
+  .weave-menu__description {
+    font-size: var(--weave-menu-description-size);
+    font-weight: var(--weave-menu-description-weight);
+    line-height: var(--weave-menu-description-line-height);
+    color: var(--weave-menu-item-description);
+  }
+
+  // Hover AND the roving-focused row share the tint (focus is moved programmatically).
+  // Disabled rows never tint — exclude them from :hover (they can't be focused anyway).
+  .weave-menu__item:not(:disabled):hover,
+  .weave-menu__item:focus {
+    background: var(--weave-menu-item-hover);
+    outline: none;
+  }
+
+  .weave-menu__item[disabled] {
+    color: var(--weave-menu-item-disabled);
+    cursor: default;
+  }
+
+  .weave-menu__divider {
+    height: var(--weave-menu-divider-height);
+    margin: var(--weave-menu-padding-y) 0;
+    background: var(--weave-menu-divider);
+  }
+}

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

@@ -0,0 +1,33 @@
+// menu — design tokens (schema). A dropdown panel of action rows; the panel chrome comes
+// from the shared overlay republic (helpers.overlay-panel), these are the item tokens.
+// Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    item-text: ref.ref('color.ink'),
+    // Hover / roving-active row tint.
+    item-hover: ref.ref('color.field'),
+    item-disabled: ref.ref('color.sub'),
+    // Subtext (description) under a row's label — lighter than the label.
+    item-description: ref.ref('color.sub'),
+    divider: ref.ref('color.line'),
+  ),
+  size: (
+    min-width: 180px,
+    padding-y: 4px,
+    item-height: 32px,
+    item-padding-x: 12px,
+    item-padding-y: 5px,
+    item-gap: 1px,
+    divider-height: 1px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 500,
+    description-size: 11px,
+    description-weight: 400,
+    description-line-height: 1.3,
+  ),
+);

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

@@ -0,0 +1,9 @@
+// Menubar — an app menu bar (WAI-ARIA menubar). Behavior lives in menubar.ts (a role=menubar
+// of top items, each opening the shared Menu panel via menu-core; roving Left/Right +
+// ArrowDown-opens + Left/Right-switch-while-open + Esc); this is the bar visual only — the
+// dropdown reuses the `.weave-menu` panel.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,41 @@
+// menubar — styles() mixin (class rules). A horizontal bar of text items; hover + open state
+// ride native/ARIA attrs ([aria-expanded], [aria-disabled]). The dropdown is the shared
+// `.weave-menu` panel (styled by the menu component). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-menubar {
+    display: flex;
+    align-items: center;
+    gap: var(--weave-menubar-gap);
+  }
+
+  .weave-menubar__item {
+    @include helpers.field-reset;
+    padding: var(--weave-menubar-item-padding-y) var(--weave-menubar-item-padding-x);
+    border-radius: var(--weave-menubar-radius);
+    color: var(--weave-menubar-text);
+    font-size: var(--weave-menubar-font-size);
+    font-weight: var(--weave-menubar-weight);
+    cursor: pointer;
+    transition: background var(--weave-menubar-duration) ease;
+  }
+
+  .weave-menubar__item:not([aria-disabled='true']):hover {
+    background: var(--weave-menubar-item-hover);
+  }
+
+  // The open top item keeps the field tint (matches the dropdown being anchored to it).
+  .weave-menubar__item[aria-expanded='true'] {
+    background: var(--weave-menubar-item-open);
+  }
+
+  .weave-menubar__item[aria-disabled='true'] {
+    color: var(--weave-menubar-disabled-text);
+    cursor: default;
+  }
+
+  .weave-menubar__item:focus-visible {
+    @include helpers.focus-ring;
+  }
+}

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

@@ -0,0 +1,25 @@
+// menubar — design tokens (schema). The top bar row + text items; the dropdown reuses the
+// shared `.weave-menu` panel (menu-core), so nothing here styles the dropdown. Forwarded by
+// ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.ink'),
+    item-hover: ref.ref('color.field'),
+    // The open top item gets the same field tint (a subtle pressed state).
+    item-open: ref.ref('color.field'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    gap: 2px,
+    item-padding-x: 10px,
+    item-padding-y: 6px,
+    radius: ref.ref('shape.radius'),
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 500,
+  ),
+);

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

@@ -0,0 +1,8 @@
+// Overlay — shared chrome for every CDK-overlay panel (a "core republic", master §4.1),
+// consumed by Tooltip / Menu / Select / Autocomplete / Dialog / Bottom Sheet / Snackbar.
+// No behavior (the CDK createOverlay/positioning owns that); this is only the panel +
+// backdrop visual + the --weave-overlay-* tokens shared across those components.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,25 @@
+// overlay — styles() mixin. The CDK stamps `weave-overlay-backdrop` on every backdrop
+// element (createOverlay), so styling that class here dims all modal backdrops centrally;
+// menus/selects pass the --transparent modifier for an invisible click-catcher. The panel
+// chrome is the reusable helpers.overlay-panel mixin, exposed as .weave-overlay-panel for
+// components that opt in (and for bring-your-own-skin). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  // Dimming scrim behind modal panels (dialog / bottom-sheet).
+  .weave-overlay-backdrop {
+    background: var(--weave-overlay-backdrop);
+  }
+
+  // Invisible click-catcher for anchored panels (menu / select) — captures click-away
+  // + scroll without a visible dim.
+  .weave-overlay-backdrop--transparent {
+    background: transparent;
+  }
+
+  // Hairline panel chrome (no shadow — the Weave design separates surfaces with a 1px line
+  // + an opaque surface, never a drop shadow).
+  .weave-overlay-panel {
+    @include helpers.overlay-panel;
+  }
+}

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

@@ -0,0 +1,21 @@
+// overlay — shared chrome tokens for every CDK-overlay panel (tooltip / menu / select /
+// autocomplete / dialog / bottom-sheet / snackbar). A "core republic" (master §4.1): its
+// own --weave-overlay-* vars, shared by all overlay components. Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    surface: ref.ref('color.surface'),
+    text: ref.ref('color.ink'),
+    line: ref.ref('color.line'),
+    // Modal dimming scrim — a fixed dark tone (a dim reads the same over Light or Dim
+    // content); override via overlay-overrides((backdrop: …)) to taste.
+    backdrop: rgba(20, 22, 28, 0.32),
+  ),
+  size: (
+    radius: ref.ref('shape.radius'),
+    min-width: 180px,
+    padding-y: 4px,
+    duration: ref.ref('motion.fast'),
+  ),
+);

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

@@ -0,0 +1,14 @@
+// Paginator — page navigation over a total item count. Behavior lives in paginator.ts
+// (windowed page run + prev/next + manual jump + optional page-size menu); this is the
+// visual.
+//
+// Prev/next arrows around a windowed run of page buttons (boundary pages + a sibling
+// window + ellipses); the active page takes the ink fill via the NATIVE ARIA attr
+// [aria-current=page] (not a class). A tabular-nums range label + a jump input + an
+// optional page-size trigger follow.
+//
+// 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/paginator/_styles.scss

@@ -0,0 +1,77 @@
+// paginator — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-paginator {
+    display: flex;
+    align-items: center;
+    gap: var(--weave-paginator-gap);
+    flex-wrap: wrap;
+    color: var(--weave-paginator-text);
+    font-size: var(--weave-paginator-font-size);
+    font-weight: var(--weave-paginator-weight);
+  }
+
+  // Page + nav buttons ARE the Button component (active = primary ink fill, others =
+  // ghost). The paginator only makes them a compact square hit target — Button owns the
+  // colours / hover / focus / disabled / active-fill.
+  .weave-paginator__page,
+  .weave-paginator__nav {
+    min-width: var(--weave-paginator-button);
+    height: var(--weave-paginator-button);
+    padding: 0 var(--weave-paginator-button-padding-x);
+  }
+
+  .weave-paginator__nav {
+    font-size: var(--weave-paginator-nav-glyph-size); // the ‹ › glyphs read a touch larger
+    line-height: 1;
+  }
+
+  .weave-paginator__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--weave-paginator-button);
+    height: var(--weave-paginator-button);
+    color: var(--weave-paginator-disabled-text);
+  }
+
+  .weave-paginator__range {
+    margin-inline-start: var(--weave-paginator-section-gap);
+    color: var(--weave-paginator-range);
+    font-size: var(--weave-paginator-range-size);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  // Manual "go to page" entry — the field IS the Input component; this is only the
+  // label + a width for the composed <Input> (layout is the paginator's job).
+  .weave-paginator__jump {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-paginator-jump-gap);
+    margin-inline-start: var(--weave-paginator-section-gap);
+    color: var(--weave-paginator-range);
+    font-size: var(--weave-paginator-range-size);
+  }
+
+  .weave-paginator__jump-field {
+    width: var(--weave-paginator-jump-width);
+  }
+
+  .weave-paginator__jump-field .weave-input__field {
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Optional page-size picker — the control IS the Select component; this just spaces +
+  // widths the composed <Select>.
+  .weave-paginator__size {
+    margin-inline-start: var(--weave-paginator-section-gap);
+    width: var(--weave-paginator-size-width);
+  }
+
+  .weave-paginator--disabled {
+    opacity: var(--weave-paginator-disabled-opacity);
+  }
+}

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

@@ -0,0 +1,28 @@
+// paginator — design tokens (schema). Page + nav buttons ARE the Button component
+// (colours/hover/active-fill are Button's), so only layout/spacing + the extra parts
+// (range label, jump width, page-size width) are tokenized here. Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.sub'),
+    range: ref.ref('color.sub'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    button: 28px,
+    button-padding-x: 6px,
+    gap: 2px,
+    section-gap: 16px,
+    jump-gap: 6px,
+    jump-width: 56px,
+    size-width: 116px,
+    disabled-opacity: 0.6,
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 500,
+    range-size: 12px,
+    nav-glyph-size: 16px,
+  ),
+);

package/src/styles/components/popover-edit/_index.scss

@@ -0,0 +1,9 @@
+// Popover-edit — inline cell editing. Behavior lives in popover-edit.ts (a `use:popoverEdit`
+// action: click/Enter/F2 opens a non-modal editor popover; Enter/click-away commit, Esc
+// cancels); this is the visual — the overlay-panel chrome + a text field sharing Input's
+// underline.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/popover-edit/_styles.scss

@@ -0,0 +1,31 @@
+// popover-edit — styles() mixin (class rules). The inline-edit popover: overlay-panel chrome +
+// a text field sharing Input's underline (the shared field-underline helper). Forwarded by
+// ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-popover-edit {
+    @include helpers.overlay-panel;
+    min-width: var(--weave-popover-edit-min-width);
+    padding: var(--weave-popover-edit-padding);
+  }
+
+  .weave-popover-edit__input {
+    // field-reset first (strips chrome), then the shared underline wins the bottom border.
+    @include helpers.field-reset;
+    @include helpers.field-underline(
+      var(--weave-popover-edit-border),
+      var(--weave-popover-edit-focus),
+      var(--weave-popover-edit-border-width)
+    );
+    display: block;
+    width: 100%;
+    padding: var(--weave-popover-edit-field-padding-y) 0;
+    color: var(--weave-popover-edit-text);
+    font-size: var(--weave-popover-edit-font-size);
+  }
+
+  .weave-popover-edit__input::placeholder {
+    color: var(--weave-popover-edit-placeholder);
+  }
+}

package/src/styles/components/popover-edit/_tokens.scss

@@ -0,0 +1,21 @@
+// popover-edit — design tokens (schema). A small inline-edit popover: the shared overlay-panel
+// chrome + a text field sharing Input's underline. Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.ink'),
+    placeholder: ref.ref('color.sub'),
+    border: ref.ref('color.line'),
+    focus: ref.ref('color.accent'),
+  ),
+  size: (
+    padding: 8px,
+    min-width: 160px,
+    field-padding-y: 4px,
+    border-width: 1.5px,
+  ),
+  typography: (
+    font-size: 13px,
+  ),
+);

package/src/styles/components/progress-bar/_index.scss

@@ -0,0 +1,11 @@
+// Progress Bar — a thin horizontal progress indicator. Behavior lives in
+// progress-bar.ts (value clamping + the indeterminate flag + ARIA); this is the visual.
+//
+// A 4px field track with an accent fill: determinate drives the fill width inline
+// (0–100%), indeterminate slides a fixed-width segment via the indet keyframes.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin, which also
+// carries the @keyframes). Add another concern as its own file and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/progress-bar/_styles.scss

@@ -0,0 +1,39 @@
+// progress-bar — styles() mixin (class rules + keyframes). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-progress-bar {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: var(--weave-progress-bar-height);
+    background: var(--weave-progress-bar-track);
+    border-radius: var(--weave-progress-bar-radius);
+  }
+
+  .weave-progress-bar__fill {
+    position: relative;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background: var(--weave-progress-bar-fill);
+    border-radius: inherit;
+    transition: width var(--weave-progress-bar-duration) ease;
+  }
+
+  /* Indeterminate — a fixed-width segment slides across; the width is keyframe-driven,
+     so no inline width and no transition. */
+  .weave-progress-bar--indeterminate .weave-progress-bar__fill {
+    width: var(--weave-progress-bar-segment);
+    transition: none;
+    animation: weave-progress-bar-indet var(--weave-progress-bar-indet-duration) ease-in-out infinite;
+  }
+
+  @keyframes weave-progress-bar-indet {
+    0% {
+      left: calc(-1 * var(--weave-progress-bar-segment));
+    }
+    100% {
+      left: 100%;
+    }
+  }
+}

package/src/styles/components/progress-bar/_tokens.scss

@@ -0,0 +1,17 @@
+// progress-bar — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    track: ref.ref('color.field'),
+    fill: ref.ref('color.accent'),
+  ),
+  size: (
+    height: 4px,
+    radius: 2px,
+    duration: ref.ref('motion.fast'),
+    // The indeterminate sliding segment: its width + travel speed.
+    segment: 40%,
+    indet-duration: 1.4s,
+  ),
+);

package/src/styles/components/progress-spinner/_index.scss

@@ -0,0 +1,11 @@
+// Progress Spinner — an indeterminate spinning ring. Behavior lives in
+// progress-spinner.ts (the size flag + ARIA); this is the visual.
+//
+// A `field` ring with an accent top arc rotating `spin .8s linear infinite`. Two sizes
+// (default 26px, `--small` 18px). Pure CSS; `role=progressbar` with no aria-valuenow.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin, which also
+// carries the @keyframes). Add another concern as its own file and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/progress-spinner/_styles.scss

@@ -0,0 +1,26 @@
+// progress-spinner — styles() mixin (class rules + keyframes). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-progress-spinner {
+    box-sizing: border-box;
+    display: inline-block;
+    width: var(--weave-progress-spinner-diameter);
+    height: var(--weave-progress-spinner-diameter);
+    border: var(--weave-progress-spinner-thickness) solid var(--weave-progress-spinner-track);
+    border-top-color: var(--weave-progress-spinner-indicator);
+    border-radius: 50%;
+    animation: weave-progress-spinner-spin var(--weave-progress-spinner-duration) linear infinite;
+  }
+
+  /* Compact 18px ring. */
+  .weave-progress-spinner--small {
+    width: var(--weave-progress-spinner-diameter-small);
+    height: var(--weave-progress-spinner-diameter-small);
+  }
+
+  @keyframes weave-progress-spinner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/styles/components/progress-spinner/_tokens.scss

@@ -0,0 +1,15 @@
+// progress-spinner — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    track: ref.ref('color.field'),
+    indicator: ref.ref('color.accent'),
+  ),
+  size: (
+    diameter: 26px,
+    diameter-small: 18px,
+    thickness: 2px,
+    duration: 0.8s,
+  ),
+);

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

@@ -0,0 +1,14 @@
+// Radio — a single-select group of native `<input type=radio>`. Behavior lives in
+// radio.ts (value + forms binding; native `name` gives arrow-nav + roving for free);
+// this is the visual.
+//
+// Each radio is a 20px circle: off = 1.5px ring, on = accent ring + an 8px accent dot
+// (a scaled `__box::after`). State is the NATIVE input pseudo (`:checked` /
+// `:focus-visible` / `:disabled`), read off the visually-hidden input — no state classes.
+// The container is `.weave-radio-group` (role=radiogroup); each item is `.weave-radio`.
+//
+// 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/radio/_styles.scss

@@ -0,0 +1,92 @@
+// radio — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--weave-radio-group-gap);
+
+    @content;
+  }
+
+  .weave-radio {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-radio-gap);
+    cursor: pointer;
+  }
+
+  /* The real input overlays the whole label (opacity 0) — keyboard/pointer reachable,
+     native radio grouping intact — while the __box carries the visual. */
+  .weave-radio__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .weave-radio__box {
+    position: relative;
+    flex: none;
+    box-sizing: border-box;
+    width: var(--weave-radio-size);
+    height: var(--weave-radio-size);
+    border: var(--weave-radio-border-width) solid var(--weave-radio-border);
+    border-radius: 50%;
+    background: var(--weave-radio-background);
+    transition: border-color var(--weave-radio-duration) ease;
+  }
+
+  /* The dot — scales in when selected. */
+  .weave-radio__box::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: var(--weave-radio-dot-size);
+    height: var(--weave-radio-dot-size);
+    border-radius: 50%;
+    background: var(--weave-radio-dot);
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    transition:
+      transform var(--weave-radio-duration) ease,
+      opacity var(--weave-radio-duration) ease;
+  }
+
+  .weave-radio__label {
+    font-size: var(--weave-radio-label-size);
+    color: var(--weave-radio-label-text);
+  }
+
+  /* Selected — accent ring + dot (state via the native :checked pseudo, no class). */
+  .weave-radio__input:checked + .weave-radio__box {
+    border-color: var(--weave-radio-checked-border);
+  }
+
+  .weave-radio__input:checked + .weave-radio__box::after {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  .weave-radio__input:focus-visible + .weave-radio__box {
+    @include helpers.focus-ring;
+  }
+
+  .weave-radio__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .weave-radio__input:disabled + .weave-radio__box {
+    opacity: 0.5;
+  }
+
+  .weave-radio__input:disabled ~ .weave-radio__label {
+    color: var(--weave-radio-disabled-text);
+  }
+}