@weave-framework/ui 0.2.107

package/src/styles/_api.scss

@@ -0,0 +1,384 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass-utils';
+@use 'token-utils';
+@use 'theme/defaults';
+
+// Built-in component register. Each entry: name → its grouped token schema.
+// New built-in components add themselves here (this is the "walk all republics" list).
+@use 'components/divider' as divider;
+@use 'components/ripple' as ripple;
+@use 'components/icon' as icon;
+@use 'components/button' as button;
+@use 'components/button-toggle' as button-toggle;
+@use 'components/badge' as badge;
+@use 'components/card' as card;
+@use 'components/toolbar' as toolbar;
+@use 'components/list' as list-cmp;
+@use 'components/grid-list' as grid-list;
+@use 'components/progress-bar' as progress-bar;
+@use 'components/progress-spinner' as progress-spinner;
+@use 'components/checkbox' as checkbox;
+@use 'components/radio' as radio;
+@use 'components/slide-toggle' as slide-toggle;
+@use 'components/form-field' as form-field;
+@use 'components/input' as input;
+@use 'components/chips' as chips;
+// Shared "core republic" (master §4.1): panel/backdrop chrome for every U3 overlay component.
+@use 'components/overlay' as overlay;
+@use 'components/tooltip' as tooltip;
+@use 'components/menu' as menu;
+@use 'components/dialog' as dialog;
+@use 'components/bottom-sheet' as bottom-sheet;
+@use 'components/snackbar' as snackbar;
+@use 'components/select' as select;
+@use 'components/autocomplete' as autocomplete;
+// U4 complex/data components.
+@use 'components/expansion' as expansion;
+@use 'components/tabs' as tabs;
+@use 'components/stepper' as stepper;
+@use 'components/slider' as slider;
+@use 'components/paginator' as paginator;
+@use 'components/sidenav' as sidenav;
+@use 'components/table' as table;
+@use 'components/tree' as tree;
+@use 'components/datepicker' as datepicker;
+@use 'components/timepicker' as timepicker;
+@use 'components/menubar' as menubar;
+@use 'components/popover-edit' as popover-edit;
+
+$_builtins: (
+  'divider': divider.$tokens,
+  'ripple': ripple.$tokens,
+  'icon': icon.$tokens,
+  'button': button.$tokens,
+  'button-toggle': button-toggle.$tokens,
+  'badge': badge.$tokens,
+  'card': card.$tokens,
+  'toolbar': toolbar.$tokens,
+  'list': list-cmp.$tokens,
+  'grid-list': grid-list.$tokens,
+  'progress-bar': progress-bar.$tokens,
+  'progress-spinner': progress-spinner.$tokens,
+  'checkbox': checkbox.$tokens,
+  'radio': radio.$tokens,
+  'slide-toggle': slide-toggle.$tokens,
+  'form-field': form-field.$tokens,
+  'input': input.$tokens,
+  'chips': chips.$tokens,
+  'overlay': overlay.$tokens,
+  'tooltip': tooltip.$tokens,
+  'menu': menu.$tokens,
+  'dialog': dialog.$tokens,
+  'bottom-sheet': bottom-sheet.$tokens,
+  'snackbar': snackbar.$tokens,
+  'select': select.$tokens,
+  'autocomplete': autocomplete.$tokens,
+  'expansion': expansion.$tokens,
+  'tabs': tabs.$tokens,
+  'stepper': stepper.$tokens,
+  'slider': slider.$tokens,
+  'paginator': paginator.$tokens,
+  'sidenav': sidenav.$tokens,
+  'table': table.$tokens,
+  'tree': tree.$tokens,
+  'datepicker': datepicker.$tokens,
+  'timepicker': timepicker.$tokens,
+  'menubar': menubar.$tokens,
+  'popover-edit': popover-edit.$tokens,
+);
+
+/* ───────────────────────── internal emit ───────────────────────── */
+
+// Emit global theme vars (--weave-<group>-<key>). $groups null = all groups.
+@mixin _globals($theme, $groups) {
+  @each $group, $tokens in $theme {
+    @if $groups == null or list.index($groups, $group) {
+      @each $key, $value in $tokens {
+        --weave-#{$group}-#{$key}: #{$value};
+      }
+    }
+  }
+}
+
+// Emit every built-in component's vars. $categories null = all categories.
+@mixin _components($categories) {
+  @each $name, $grouped in $_builtins {
+    @include token-utils.create-token-values($name, token-utils.flatten($grouped, $categories));
+  }
+}
+
+/* ───────────────────────── public API ───────────────────────── */
+
+// One call: set the whole theme. $overrides is a partial map merged over Weave
+// defaults (pass only what you change). Emits all global vars + all component vars.
+@mixin theme($overrides: ()) {
+  $t: map.deep-merge(defaults.$light, $overrides);
+  @include sass-utils.current-selector-or-root() {
+    @include _globals($t, null);
+    @include _components(null);
+  }
+}
+
+// Partial recompile — only that concern's vars (global group + matching component category).
+@mixin colors($overrides: ()) {
+  $t: map.deep-merge(defaults.$light, $overrides);
+  @include sass-utils.current-selector-or-root() {
+    @include _globals($t, ('color'));
+    @include _components(('color'));
+  }
+}
+
+@mixin sizes($overrides: ()) {
+  $t: map.deep-merge(defaults.$light, $overrides);
+  @include sass-utils.current-selector-or-root() {
+    @include _globals($t, ('shape'));
+    @include _components(('size'));
+  }
+}
+
+@mixin typography($overrides: ()) {
+  $t: map.deep-merge(defaults.$light, $overrides);
+  @include sass-utils.current-selector-or-root() {
+    @include _globals($t, ('text'));
+    @include _components(('typography'));
+  }
+}
+
+// Register a component (built-in OR a dev's custom one) → emit its --weave-<name>-* vars.
+// $grouped is a grouped schema; values use ref('group.key') for theme refs, or literals.
+@mixin define($name, $grouped) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values($name, token-utils.flatten($grouped, null));
+  }
+}
+
+// Override existing tokens + add new ones (one map). At root → global; in a selector → scoped.
+@mixin overrides($name, $map) {
+  @include sass-utils.current-selector-or-root() {
+    @each $key, $value in $map {
+      --weave-#{$name}-#{$key}: #{$value};
+    }
+  }
+}
+
+// Named per-component override (discoverable, Material-style). Built-ins get one each.
+@mixin divider-overrides($map) {
+  @include overrides('divider', $map);
+}
+
+@mixin ripple-overrides($map) {
+  @include overrides('ripple', $map);
+}
+
+@mixin icon-overrides($map) {
+  @include overrides('icon', $map);
+}
+
+@mixin button-overrides($map) {
+  @include overrides('button', $map);
+}
+
+@mixin button-toggle-overrides($map) {
+  @include overrides('button-toggle', $map);
+}
+
+@mixin badge-overrides($map) {
+  @include overrides('badge', $map);
+}
+
+@mixin card-overrides($map) {
+  @include overrides('card', $map);
+}
+
+@mixin toolbar-overrides($map) {
+  @include overrides('toolbar', $map);
+}
+
+@mixin list-overrides($map) {
+  @include overrides('list', $map);
+}
+
+@mixin grid-list-overrides($map) {
+  @include overrides('grid-list', $map);
+}
+
+@mixin progress-bar-overrides($map) {
+  @include overrides('progress-bar', $map);
+}
+
+@mixin progress-spinner-overrides($map) {
+  @include overrides('progress-spinner', $map);
+}
+
+@mixin checkbox-overrides($map) {
+  @include overrides('checkbox', $map);
+}
+
+@mixin radio-overrides($map) {
+  @include overrides('radio', $map);
+}
+
+@mixin slide-toggle-overrides($map) {
+  @include overrides('slide-toggle', $map);
+}
+
+@mixin form-field-overrides($map) {
+  @include overrides('form-field', $map);
+}
+
+@mixin input-overrides($map) {
+  @include overrides('input', $map);
+}
+
+@mixin chips-overrides($map) {
+  @include overrides('chips', $map);
+}
+
+@mixin overlay-overrides($map) {
+  @include overrides('overlay', $map);
+}
+
+@mixin tooltip-overrides($map) {
+  @include overrides('tooltip', $map);
+}
+
+@mixin menu-overrides($map) {
+  @include overrides('menu', $map);
+}
+
+@mixin dialog-overrides($map) {
+  @include overrides('dialog', $map);
+}
+
+@mixin bottom-sheet-overrides($map) {
+  @include overrides('bottom-sheet', $map);
+}
+
+@mixin snackbar-overrides($map) {
+  @include overrides('snackbar', $map);
+}
+
+@mixin select-overrides($map) {
+  @include overrides('select', $map);
+}
+
+@mixin autocomplete-overrides($map) {
+  @include overrides('autocomplete', $map);
+}
+
+@mixin expansion-overrides($map) {
+  @include overrides('expansion', $map);
+}
+
+@mixin tabs-overrides($map) {
+  @include overrides('tabs', $map);
+}
+
+@mixin stepper-overrides($map) {
+  @include overrides('stepper', $map);
+}
+
+@mixin slider-overrides($map) {
+  @include overrides('slider', $map);
+}
+
+@mixin paginator-overrides($map) {
+  @include overrides('paginator', $map);
+}
+
+@mixin sidenav-overrides($map) {
+  @include overrides('sidenav', $map);
+}
+
+@mixin table-overrides($map) {
+  @include overrides('table', $map);
+}
+
+@mixin tree-overrides($map) {
+  @include overrides('tree', $map);
+}
+
+@mixin datepicker-overrides($map) {
+  @include overrides('datepicker', $map);
+}
+
+@mixin timepicker-overrides($map) {
+  @include overrides('timepicker', $map);
+}
+
+@mixin menubar-overrides($map) {
+  @include overrides('menubar', $map);
+}
+
+@mixin popover-edit-overrides($map) {
+  @include overrides('popover-edit', $map);
+}
+
+// Honour `prefers-reduced-motion: reduce` for the library's OWN elements. Scoped to
+// `weave-*` classes so it never touches the consumer's markup. Neutralises transitions AND
+// animations (including the infinite progress-bar / spinner loops) by collapsing their
+// duration — using a tiny non-zero duration + a single iteration keeps `animation-fill-mode`
+// end-states intact (safer than `animation: none`, which can strand a reveal at its start).
+// `all-styles()` includes this automatically; include it yourself if you compile per-component.
+@mixin reduced-motion() {
+  @media (prefers-reduced-motion: reduce) {
+    [class^='weave-'],
+    [class*=' weave-'] {
+      &,
+      &::before,
+      &::after {
+        animation-duration: 0.001ms !important;
+        animation-delay: 0ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.001ms !important;
+        transition-delay: 0ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
+  }
+}
+
+// Emit the structural CSS (class rules) for every built-in component.
+// Prefer per-component includes to keep CSS small; all-styles() is the convenience.
+@mixin all-styles() {
+  @include divider.styles();
+  @include ripple.styles();
+  @include icon.styles();
+  @include button.styles();
+  @include button-toggle.styles();
+  @include badge.styles();
+  @include card.styles();
+  @include toolbar.styles();
+  @include list-cmp.styles();
+  @include grid-list.styles();
+  @include progress-bar.styles();
+  @include progress-spinner.styles();
+  @include checkbox.styles();
+  @include radio.styles();
+  @include slide-toggle.styles();
+  @include form-field.styles();
+  @include input.styles();
+  @include chips.styles();
+  @include overlay.styles();
+  @include tooltip.styles();
+  @include menu.styles();
+  @include dialog.styles();
+  @include bottom-sheet.styles();
+  @include snackbar.styles();
+  @include select.styles();
+  @include autocomplete.styles();
+  @include expansion.styles();
+  @include tabs.styles();
+  @include stepper.styles();
+  @include slider.styles();
+  @include paginator.styles();
+  @include sidenav.styles();
+  @include table.styles();
+  @include tree.styles();
+  @include datepicker.styles();
+  @include timepicker.styles();
+  @include menubar.styles();
+  @include popover-edit.styles();
+  @include reduced-motion();
+}

package/src/styles/_helpers.scss

@@ -0,0 +1,101 @@
+// Reusable style fragments for building your own component base ("bring-your-own-skin").
+// Reach for these instead of re-authoring primitives.
+
+@mixin focus-ring($color: var(--weave-color-accent), $width: 2px, $offset: 1px) {
+  outline: $width solid #{$color};
+  outline-offset: $offset;
+}
+
+// Host for a Ripple: the ripple circle is absolutely positioned and must be clipped.
+@mixin ripple-host() {
+  position: relative;
+  overflow: hidden;
+}
+
+@mixin truncate() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin visually-hidden() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Strip native form-control chrome so a wrapper can carry the visual.
+@mixin field-reset() {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  // Suppress the browser's native focus outline — these custom fields show focus via
+  // the component's own accent underline (:focus-within), never a native box. Without
+  // this, a field built on field-reset (e.g. Autocomplete) shows a stray focus rectangle.
+  outline: none;
+  font: inherit;
+  color: inherit;
+}
+
+// THE Weave field look — a hairline bottom border that swaps to accent on focus (no box,
+// no layout shift). The single source of the underline shared by Input + Select (and thus
+// Autocomplete, which composes Input) — include it, don't re-write it per component.
+@mixin field-underline($border, $focus, $width: 1.5px) {
+  border: 0;
+  border-bottom: #{$width} solid #{$border};
+  background: transparent;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+    border-bottom-color: #{$focus};
+    box-shadow: inset 0 -1px 0 #{$focus};
+  }
+}
+
+// THE Weave check ✓ — a rotated border-"L" glyph (pure CSS, no SVG), shared by Checkbox /
+// Select option / Stepper. Set `content` + shape here; the consumer positions + rotates it
+// (translate/rotate differ per use).
+@mixin checkmark($color, $width: 5px, $height: 9px, $thickness: 2px) {
+  content: '';
+  width: #{$width};
+  height: #{$height};
+  border: solid #{$color};
+  border-width: 0 #{$thickness} #{$thickness} 0;
+}
+
+// THE Weave inline clear (×) button — the small round reset shared by Input + Select.
+@mixin clear-button($color, $hover, $size: 18px) {
+  @include field-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: #{$size};
+  height: #{$size};
+  border-radius: 50%;
+  color: #{$color};
+  cursor: pointer;
+
+  &:hover {
+    color: #{$hover};
+  }
+}
+
+// Hairline overlay-panel chrome (menus, dialogs, dropdowns, tooltips): opaque surface +
+// 1px line + radius, NO drop shadow (the Weave design has none — a 1px line + an opaque
+// surface separate the panel from the page). Reuse for bring-your-own-skin panels.
+@mixin overlay-panel() {
+  box-sizing: border-box;
+  min-width: var(--weave-overlay-min-width);
+  background: var(--weave-overlay-surface);
+  color: var(--weave-overlay-text);
+  border: 1px solid var(--weave-overlay-line);
+  border-radius: var(--weave-overlay-radius);
+}

package/src/styles/_index.scss

@@ -0,0 +1,12 @@
+// Public SCSS entry: `@use '@weave-framework/ui' as weave;`
+//
+//   @include weave.theme(( color: (accent: #2f9e8f) ));  // set theme (partial override)
+//   @include weave.all-styles();                         // structural CSS for built-ins
+//   @include weave.divider-overrides(( thickness: 2px )); // tweak one component
+//   @include weave.define('rating', ( ... ));            // your own component
+//   .btn { @include weave.focus-ring; }                  // reusable helpers
+//   color: weave.ref('color.ink');                       // reference a theme var
+
+@forward 'api';
+@forward 'ref';
+@forward 'helpers';

package/src/styles/_ref.scss

@@ -0,0 +1,20 @@
+@use 'sass:string';
+
+// Internal: replace every occurrence of $search in $str with $replace.
+@function _replace($str, $search, $replace) {
+  $index: string.index($str, $search);
+  @if $index {
+    @return string.slice($str, 1, $index - 1) + $replace +
+      _replace(string.slice($str, $index + string.length($search)), $search, $replace);
+  }
+  @return $str;
+}
+
+// ref('color.ink') → var(--weave-color-ink)
+//
+// A component token whose value is a *theme reference* uses ref() so it points at
+// a global theme var — changing the theme cascades to every component. Literal
+// values (18px, 1px, etc.) are written as-is.
+@function ref($path) {
+  @return var(--weave-#{_replace($path, '.', '-')});
+}

package/src/styles/_sass-utils.scss

@@ -0,0 +1,14 @@
+// Emit @content under the current selector if there is one, else under :root.
+//
+// This is what makes overrides scope: include a token mixin at the top level and
+// the vars land on :root (global); include it inside a selector and they land on
+// that selector only (scoped override / per-instance).
+@mixin current-selector-or-root() {
+  @if & {
+    @content;
+  } @else {
+    :root {
+      @content;
+    }
+  }
+}

package/src/styles/_token-utils.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use 'sass:list';
+
+// Emit `--weave-<prefix>-<name>: <value>;` for every entry in a FLAT token map.
+@mixin create-token-values($prefix, $tokens) {
+  @each $name, $value in $tokens {
+    --weave-#{$prefix}-#{$name}: #{$value};
+  }
+}
+
+// Flatten a component's grouped schema — (color: (...), size: (...)) — into a flat
+// (name: value) map. If $categories is a list, keep only those groups (for partial
+// recompile, e.g. colors() → just the 'color' group).
+@function flatten($grouped, $categories: null) {
+  $out: ();
+  @each $category, $tokens in $grouped {
+    @if $categories == null or list.index($categories, $category) {
+      @each $name, $value in $tokens {
+        $out: map.set($out, $name, $value);
+      }
+    }
+  }
+  @return $out;
+}

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

@@ -0,0 +1,10 @@
+// Autocomplete — a text field with a suggestion listbox. Behavior lives in autocomplete.ts
+// (a Weave component: native input + CDK-overlay suggestion panel, static or async options
+// with field-mapping accessors + subtext, aria-autocomplete=list + activedescendant, forms
+// binding); this is the visual: an underline text field (like Input, with prefix/suffix/
+// clear) + a suggestion panel of option rows (label + optional lighter description) with an
+// active-highlight, plus an empty-results row.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,46 @@
+// autocomplete — styles() mixin. The field IS the Input component (composed), so all the
+// field chrome (underline / focus / clear / prefix-suffix / invalid) lives in Input — only
+// the suggestion panel is styled here. The panel reuses the shared overlay-panel chrome;
+// option rows carry a label + optional lighter description with an active-highlight class.
+// Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-autocomplete__panel {
+    @include helpers.overlay-panel;
+    max-height: var(--weave-autocomplete-panel-max-height);
+    overflow-y: auto;
+    padding: var(--weave-autocomplete-panel-padding-y) 0;
+  }
+
+  .weave-autocomplete__option {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--weave-autocomplete-option-gap);
+    min-height: var(--weave-autocomplete-option-min-height);
+    padding: var(--weave-autocomplete-option-padding-y) var(--weave-autocomplete-option-padding-x);
+    color: var(--weave-autocomplete-text);
+    font-size: var(--weave-autocomplete-font-size);
+    cursor: pointer;
+    transition: background var(--weave-autocomplete-duration) ease;
+  }
+
+  .weave-autocomplete__option--active {
+    background: var(--weave-autocomplete-option-hover);
+  }
+
+  .weave-autocomplete__description {
+    font-size: var(--weave-autocomplete-description-size);
+    font-weight: var(--weave-autocomplete-description-weight);
+    line-height: var(--weave-autocomplete-description-line-height);
+    color: var(--weave-autocomplete-description);
+  }
+
+  // Empty-results row — non-interactive, lighter.
+  .weave-autocomplete__empty {
+    padding: var(--weave-autocomplete-empty-padding-y) var(--weave-autocomplete-option-padding-x);
+    color: var(--weave-autocomplete-description);
+    font-size: var(--weave-autocomplete-font-size);
+  }
+}

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

@@ -0,0 +1,28 @@
+// autocomplete — design tokens (schema). The field IS the Input component (composed), so
+// only the suggestion listbox panel is tokenized here (it reuses the shared overlay-panel
+// chrome). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.ink'),
+    option-hover: ref.ref('color.field'),
+    description: ref.ref('color.sub'),
+  ),
+  size: (
+    panel-max-height: 280px,
+    panel-padding-y: 4px,
+    option-min-height: 32px,
+    option-padding-x: 12px,
+    option-padding-y: 5px,
+    option-gap: 1px,
+    empty-padding-y: 8px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    description-size: 11px,
+    description-weight: 400,
+    description-line-height: 1.3,
+  ),
+);

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

@@ -0,0 +1,12 @@
+// Badge — a small status mark. Behavior lives in badge.ts (variant + position + a11y);
+// this is the visual. Three variants:
+//   count (default) — an accent pill (min 15px, white text) over the top corner of a host.
+//   --dot            — a 6px status-red dot over the corner (no text).
+//   --tag            — a standalone outline label ("New"); not overlaid, no positioned mark.
+// Corner via --bottom / --start modifiers (default top-end).
+//
+// 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';