@weave-framework/ui 0.2.107

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

@@ -0,0 +1,24 @@
+// radio — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    border: ref.ref('color.line'),
+    background: transparent,
+    checked-border: ref.ref('color.accent'),
+    dot: ref.ref('color.accent'),
+    label-text: ref.ref('color.ink'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    size: 20px,
+    border-width: 1.5px,
+    dot-size: 8px,
+    gap: 8px,
+    group-gap: 12px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    label-size: 13px,
+  ),
+);

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

@@ -0,0 +1,8 @@
+// Ripple — the click-feedback circle. Behavior lives in ripple.ts (a `use:` action);
+// this is the visual (tokens + the injected `.weave-ripple` element + keyframes).
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin). Add another
+// concern as its own file (e.g. _keyframes.scss) and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,20 @@
+// ripple — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  @keyframes weave-ripple {
+    to {
+      transform: scale(var(--weave-ripple-scale));
+      opacity: 0;
+    }
+  }
+
+  .weave-ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: var(--weave-ripple-opacity);
+    transform: scale(0);
+    pointer-events: none;
+    animation: weave-ripple var(--weave-ripple-duration) ease-out;
+  }
+}

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

@@ -0,0 +1,12 @@
+// ripple — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    opacity: 0.22,
+  ),
+  size: (
+    duration: ref.ref('motion.ripple'),
+    scale: 4,
+  ),
+);

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

@@ -0,0 +1,9 @@
+// Select — a combobox/listbox form control. Behavior lives in select.ts (a Weave component:
+// trigger field + CDK-overlay listbox panel, single/multiple, aria-activedescendant, the
+// shared option model with subtext, forms binding); this is the visual: an underline trigger
+// (like Input, with prefix/suffix/clear/chevron) + a listbox panel of option rows (label +
+// optional lighter description) with hover/active/selected states.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,120 @@
+// select — styles() mixin. An underline trigger field (like Input) whose value/placeholder
+// sits left and a chevron right; focus swaps the underline to accent. The listbox panel
+// reuses the shared overlay-panel chrome; option rows carry a label + optional lighter
+// description, with hover/active/selected states off classes (selection = a class, since the
+// panel is portaled and there's no native pseudo). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-select {
+    display: block;
+  }
+
+  .weave-select__field {
+    // THE shared Weave field underline (same helper as Input — one source, one look).
+    @include helpers.field-underline(var(--weave-select-border), var(--weave-select-focus), var(--weave-select-border-width));
+    display: flex;
+    align-items: center;
+    gap: var(--weave-select-gap);
+    padding: var(--weave-select-field-padding-y) 0;
+    color: var(--weave-select-text);
+    font-size: var(--weave-select-font-size);
+    font-weight: var(--weave-select-weight);
+    line-height: 1.4;
+    cursor: pointer;
+  }
+
+  .weave-select__value--placeholder {
+    color: var(--weave-select-placeholder);
+  }
+
+  .weave-select__spacer {
+    flex: 1 1 auto;
+  }
+
+  // A CSS down-caret.
+  .weave-select__chevron {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid var(--weave-select-chevron);
+    transition: transform var(--weave-select-duration) ease;
+  }
+
+  .weave-select__field[aria-expanded='true'] .weave-select__chevron {
+    transform: rotate(180deg);
+  }
+
+  // Empty prefix/suffix slots collapse (JS adds --empty), so the gap skips them.
+  .weave-select__prefix--empty,
+  .weave-select__suffix--empty {
+    display: none;
+  }
+
+  .weave-select__clear {
+    @include helpers.clear-button(var(--weave-select-placeholder), var(--weave-select-text));
+  }
+
+  .weave-select--disabled .weave-select__field {
+    color: var(--weave-select-disabled-text);
+    cursor: default;
+  }
+
+  .weave-select--invalid .weave-select__field {
+    border-bottom-color: var(--weave-select-error);
+    box-shadow: inset 0 -1px 0 0 var(--weave-select-error);
+  }
+
+  /* ── the listbox panel ── */
+  .weave-select__panel {
+    @include helpers.overlay-panel;
+    max-height: var(--weave-select-panel-max-height);
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  .weave-select__option {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1px;
+    min-height: var(--weave-select-option-min-height);
+    padding: 5px calc(var(--weave-select-option-padding-x) + 16px) 5px var(--weave-select-option-padding-x);
+    color: var(--weave-select-text);
+    font-size: var(--weave-select-font-size);
+    cursor: pointer;
+    transition: background var(--weave-select-duration) ease;
+  }
+
+  .weave-select__option--active {
+    background: var(--weave-select-option-hover);
+  }
+
+  .weave-select__option--selected {
+    background: var(--weave-select-option-selected);
+  }
+
+  // The shared checkmark glyph on the selected option (single + multiple).
+  .weave-select__option--selected::after {
+    @include helpers.checkmark(var(--weave-select-option-mark));
+    position: absolute;
+    right: var(--weave-select-option-padding-x);
+    top: 50%;
+    margin-top: -6px;
+    transform: rotate(45deg);
+  }
+
+  .weave-select__option[aria-disabled='true'] {
+    color: var(--weave-select-disabled-text);
+    cursor: default;
+  }
+
+  .weave-select__description {
+    font-size: var(--weave-select-description-size);
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--weave-select-description);
+  }
+}

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

@@ -0,0 +1,35 @@
+// select — design tokens (schema). An underline trigger field (like Input) + a listbox
+// panel (reusing the shared overlay-panel chrome). 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'),
+    error: ref.ref('color.error'),
+    chevron: ref.ref('color.sub'),
+    disabled-text: ref.ref('color.sub'),
+    option-hover: ref.ref('color.field'),
+    // Selected-row tint (the design's accent+12%).
+    option-selected: color-mix(in srgb, ref.ref('color.accent') 12%, transparent),
+    option-mark: ref.ref('color.accent'),
+    description: ref.ref('color.sub'),
+  ),
+  size: (
+    gap: 8px,
+    field-padding-y: 6px,
+    border-width: 1.5px,
+    radius: ref.ref('shape.radius'),
+    panel-max-height: 280px,
+    option-min-height: 32px,
+    option-padding-x: 12px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    description-size: 11px,
+    weight: 500,
+  ),
+);

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

@@ -0,0 +1,14 @@
+// Sidenav — the responsive layout shell. Behavior lives in sidenav.ts (side/over/push
+// modes, responsive breakpoint auto-mode, controlled/uncontrolled open state, focus-trap
+// in over mode); this is the visual.
+//
+// A `__drawer` beside a `__content` (+ an `__backdrop` scrim), all driven by root modifier
+// classes: --side (drawer in flow, pushes content) / --over (drawer floats over + backdrop) /
+// --push (drawer floats + shifts content); --opened, --end (dock edge), --backdrop. No
+// per-element state class — the open/mode state rides the root modifiers.
+//
+// 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/sidenav/_styles.scss

@@ -0,0 +1,105 @@
+// sidenav — styles() mixin (class rules). A layout shell driven entirely by root modifier
+// classes (--side/--over/--push, --opened, --end, --backdrop) — no per-element state. The
+// drawer is in-flow (side, pushes content) or absolute (over/push, floats). Forwarded by
+// ./_index.scss.
+
+@mixin styles() {
+  .weave-sidenav {
+    position: relative;
+    display: flex;
+    overflow: hidden; // clip the off-canvas drawer when closed
+  }
+
+  .weave-sidenav__drawer {
+    box-sizing: border-box;
+    width: var(--weave-sidenav-width);
+    background: var(--weave-sidenav-drawer-background);
+    border-right: 1px solid var(--weave-sidenav-drawer-line);
+    overflow: auto;
+    transition:
+      transform var(--weave-sidenav-duration) ease,
+      margin var(--weave-sidenav-duration) ease;
+  }
+
+  .weave-sidenav__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: auto;
+    transition: margin var(--weave-sidenav-duration) ease;
+  }
+
+  // Dimming scrim — present but inert until `over` + opened toggles `--backdrop` on the root.
+  .weave-sidenav__backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: var(--weave-sidenav-backdrop-z);
+    background: var(--weave-sidenav-backdrop);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--weave-sidenav-duration) ease;
+  }
+
+  .weave-sidenav--backdrop .weave-sidenav__backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ── side: drawer is in flow and pushes the content ── */
+  .weave-sidenav--side .weave-sidenav__drawer {
+    flex: 0 0 var(--weave-sidenav-width);
+  }
+
+  // Closed side drawer slides out and yields its space (negative margin, not transform).
+  .weave-sidenav--side:not(.weave-sidenav--opened) .weave-sidenav__drawer {
+    margin-inline-start: calc(-1 * var(--weave-sidenav-width));
+  }
+
+  /* ── over / push: drawer floats over the content ── */
+  .weave-sidenav--over .weave-sidenav__drawer,
+  .weave-sidenav--push .weave-sidenav__drawer {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: var(--weave-sidenav-drawer-z);
+    transform: translateX(-100%); // off-canvas when closed
+  }
+
+  .weave-sidenav--over.weave-sidenav--opened .weave-sidenav__drawer,
+  .weave-sidenav--push.weave-sidenav--opened .weave-sidenav__drawer {
+    transform: translateX(0);
+  }
+
+  // push additionally shifts the content over by the drawer width when open.
+  .weave-sidenav--push.weave-sidenav--opened .weave-sidenav__content {
+    margin-inline-start: var(--weave-sidenav-width);
+  }
+
+  /* ── end position: drawer docks to the inline-end edge ── */
+  .weave-sidenav--end .weave-sidenav__drawer {
+    order: 2;
+    border-right: 0;
+    border-left: 1px solid var(--weave-sidenav-drawer-line);
+  }
+
+  .weave-sidenav--end.weave-sidenav--side:not(.weave-sidenav--opened) .weave-sidenav__drawer {
+    margin-inline-start: 0;
+    margin-inline-end: calc(-1 * var(--weave-sidenav-width));
+  }
+
+  .weave-sidenav--end.weave-sidenav--over .weave-sidenav__drawer,
+  .weave-sidenav--end.weave-sidenav--push .weave-sidenav__drawer {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+
+  .weave-sidenav--end.weave-sidenav--over.weave-sidenav--opened .weave-sidenav__drawer,
+  .weave-sidenav--end.weave-sidenav--push.weave-sidenav--opened .weave-sidenav__drawer {
+    transform: translateX(0);
+  }
+
+  .weave-sidenav--end.weave-sidenav--push.weave-sidenav--opened .weave-sidenav__content {
+    margin-inline-start: 0;
+    margin-inline-end: var(--weave-sidenav-width);
+  }
+}

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

@@ -0,0 +1,24 @@
+// sidenav — design tokens (schema). A layout shell: a drawer beside content, with side/over/
+// push modes. The `over` backdrop reuses the shared U3 overlay scrim tone. Forwarded by
+// ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    drawer-background: ref.ref('color.surface'),
+    // Hairline between the drawer and the content (design: separate surfaces with a 1px line).
+    drawer-line: ref.ref('color.line'),
+    // Modal dimming scrim in `over` mode — reuse the shared overlay republic's tone so every
+    // scrim in the library reads identically (override via overlay-overrides((backdrop: …))).
+    backdrop: var(--weave-overlay-backdrop),
+  ),
+  size: (
+    // Drawer width (design: ~230px off-canvas / 200px sticky — one token, consumer overrides).
+    width: 230px,
+    // Slide/push transition — reuse the sheet motion (a drawer slides like a bottom sheet).
+    duration: ref.ref('motion.sheet'),
+    // The over/push drawer stacks above the backdrop, which stacks above the content.
+    backdrop-z: 1,
+    drawer-z: 2,
+  ),
+);

package/src/styles/components/slide-toggle/_index.scss

@@ -0,0 +1,13 @@
+// Slide Toggle — a native `<input type=checkbox>` presented as a switch. Behavior lives
+// in slide-toggle.ts (two-way value + forms control binding; role=switch); this is the
+// visual.
+//
+// A 42×24 track (`field`→accent) with an 18px knob (`__track::after`) that slides across
+// `.16s` when on. State is the NATIVE input pseudo (`:checked` / `:focus-visible` /
+// `:disabled`), read off the visually-hidden input by the adjacent `__track` — no classes.
+//
+// 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/slide-toggle/_styles.scss

@@ -0,0 +1,86 @@
+// slide-toggle — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-slide-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-slide-toggle-gap);
+    cursor: pointer;
+
+    @content;
+  }
+
+  .weave-slide-toggle__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .weave-slide-toggle__track {
+    position: relative;
+    flex: none;
+    box-sizing: border-box;
+    width: var(--weave-slide-toggle-track-width);
+    height: var(--weave-slide-toggle-track-height);
+    border-radius: var(--weave-slide-toggle-radius);
+    background: var(--weave-slide-toggle-track-off);
+    transition: background var(--weave-slide-toggle-duration) ease;
+  }
+
+  /* The knob — slides across when on. */
+  .weave-slide-toggle__track::after {
+    content: '';
+    position: absolute;
+    top: var(--weave-slide-toggle-knob-inset);
+    left: var(--weave-slide-toggle-knob-inset);
+    width: var(--weave-slide-toggle-knob-size);
+    height: var(--weave-slide-toggle-knob-size);
+    border-radius: var(--weave-slide-toggle-knob-radius);
+    background: var(--weave-slide-toggle-knob-off);
+    transition:
+      transform var(--weave-slide-toggle-duration) ease,
+      background var(--weave-slide-toggle-duration) ease;
+  }
+
+  .weave-slide-toggle__label {
+    font-size: var(--weave-slide-toggle-label-size);
+    color: var(--weave-slide-toggle-label-text);
+  }
+
+  /* On — accent track + white knob slid to the far side. */
+  .weave-slide-toggle__input:checked + .weave-slide-toggle__track {
+    background: var(--weave-slide-toggle-track-on);
+  }
+
+  .weave-slide-toggle__input:checked + .weave-slide-toggle__track::after {
+    transform: translateX(
+      calc(
+        var(--weave-slide-toggle-track-width) - var(--weave-slide-toggle-knob-size) - 2 *
+          var(--weave-slide-toggle-knob-inset)
+      )
+    );
+    background: var(--weave-slide-toggle-knob-on);
+  }
+
+  .weave-slide-toggle__input:focus-visible + .weave-slide-toggle__track {
+    @include helpers.focus-ring;
+  }
+
+  .weave-slide-toggle__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .weave-slide-toggle__input:disabled + .weave-slide-toggle__track {
+    opacity: 0.5;
+  }
+
+  .weave-slide-toggle__input:disabled ~ .weave-slide-toggle__label {
+    color: var(--weave-slide-toggle-disabled-text);
+  }
+}

package/src/styles/components/slide-toggle/_tokens.scss

@@ -0,0 +1,24 @@
+// slide-toggle — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    track-off: ref.ref('color.field'),
+    track-on: ref.ref('color.accent'),
+    knob-off: ref.ref('color.ink'),
+    // On-accent knob: a fixed white (accent is dark in Light + Dim).
+    knob-on: #fff,
+    label-text: ref.ref('color.ink'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    track-width: 42px,
+    track-height: 24px,
+    knob-size: 18px,
+    knob-inset: 3px,
+    radius: 3px,
+    knob-radius: 2px,
+    gap: 8px,
+    duration: 0.16s,
+  ),
+);

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

@@ -0,0 +1,13 @@
+// Slider — a value over a range. Behavior lives in slider.ts (custom role=slider:
+// pointer-capture drag + Arrow/Home/End/Page keys + forms/signals binding); this is the
+// visual.
+//
+// A 2px --field track with an accent fill to the value; the thumb is a 3×18 ink bar
+// (positioned by an inline left:%) with a 5px accent cap (the Weave mark). State via
+// modifiers: --disabled dims + not-allowed, --invalid reddens the fill/cap.
+//
+// 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/slider/_styles.scss

@@ -0,0 +1,77 @@
+// slider — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--weave-slider-height);
+    cursor: pointer;
+    touch-action: none; // let a pointer drag control the value, not scroll the page
+    user-select: none;
+
+    @content;
+  }
+
+  // 2px track (design).
+  .weave-slider__track {
+    position: relative;
+    width: 100%;
+    height: var(--weave-slider-track-height);
+    background: var(--weave-slider-track);
+    border-radius: calc(var(--weave-slider-track-height) / 2);
+  }
+
+  // Accent fill to the value (width set inline).
+  .weave-slider__fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    height: 100%;
+    background: var(--weave-slider-fill);
+    border-radius: inherit;
+  }
+
+  // Thumb = a 3×18 ink bar (positioned by an inline left:%), centred on the value.
+  .weave-slider__thumb {
+    position: absolute;
+    top: 50%;
+    width: var(--weave-slider-thumb-width);
+    height: var(--weave-slider-thumb-height);
+    background: var(--weave-slider-thumb);
+    transform: translate(-50%, -50%);
+  }
+
+  // …with a 5px accent cap on top (the Weave mark).
+  .weave-slider__thumb::after {
+    content: '';
+    position: absolute;
+    top: calc(var(--weave-slider-cap-size) / -2);
+    left: 50%;
+    width: var(--weave-slider-cap-size);
+    height: var(--weave-slider-cap-size);
+    background: var(--weave-slider-cap);
+    transform: translateX(-50%);
+  }
+
+  // Focus shows on the thumb (a small ring around the handle), not a box around the whole
+  // track — the conventional slider focus indicator.
+  .weave-slider:focus-visible {
+    outline: none;
+  }
+
+  .weave-slider:focus-visible .weave-slider__thumb {
+    @include helpers.focus-ring;
+  }
+
+  // Invalid — the fill + cap redden (state via the --invalid modifier from the control).
+  .weave-slider--invalid .weave-slider__fill,
+  .weave-slider--invalid .weave-slider__thumb::after {
+    background: var(--weave-slider-error);
+  }
+
+  .weave-slider--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,21 @@
+// slider — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    // 2px --field track, accent fill; thumb = an ink bar with a 5px accent cap (design).
+    track: ref.ref('color.field'),
+    fill: ref.ref('color.accent'),
+    thumb: ref.ref('color.ink'),
+    cap: ref.ref('color.accent'),
+    error: ref.ref('color.error'),
+  ),
+  size: (
+    height: 18px,
+    track-height: 2px,
+    thumb-width: 3px,
+    thumb-height: 18px,
+    cap-size: 5px,
+    duration: ref.ref('motion.fast'),
+  ),
+);

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

@@ -0,0 +1,8 @@
+// Snackbar — a brief bottom toast. Behavior lives in snackbar.ts (snackbar(msg, opts) →
+// SnackbarRef; a bottom CDK overlay with no backdrop, auto-dismiss paused on hover/focus,
+// an optional action, live-announcer for SR, one-at-a-time queue); this is the visual: an
+// inverted (ink) bar inset from the bottom edge, sliding up, with an accent action button.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';