@weave-framework/ui 0.2.107

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

@@ -0,0 +1,108 @@
+// checkbox — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-checkbox-gap);
+    cursor: pointer;
+
+    @content;
+  }
+
+  /* The real input overlays the whole label (opacity 0) so it stays keyboard- and
+     pointer-reachable while the __box carries the visual. */
+  .weave-checkbox__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .weave-checkbox__box {
+    position: relative;
+    flex: none;
+    box-sizing: border-box;
+    width: var(--weave-checkbox-size);
+    height: var(--weave-checkbox-size);
+    border: var(--weave-checkbox-border-width) solid var(--weave-checkbox-border);
+    border-radius: var(--weave-checkbox-radius);
+    background: var(--weave-checkbox-background);
+    transition:
+      background var(--weave-checkbox-duration) ease,
+      border-color var(--weave-checkbox-duration) ease;
+  }
+
+  /* The ✓ tick — the shared checkmark glyph, revealed when checked. */
+  .weave-checkbox__box::after {
+    @include helpers.checkmark(var(--weave-checkbox-mark));
+    position: absolute;
+    left: 50%;
+    top: 46%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    opacity: 0;
+    transition: opacity var(--weave-checkbox-duration) ease;
+  }
+
+  /* The mixed dash — shown when indeterminate. */
+  .weave-checkbox__box::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 10px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--weave-checkbox-mark);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity var(--weave-checkbox-duration) ease;
+  }
+
+  .weave-checkbox__label {
+    font-size: var(--weave-checkbox-label-size);
+    color: var(--weave-checkbox-label-text);
+  }
+
+  /* On (checked or indeterminate) — the accent fill. */
+  .weave-checkbox__input:checked + .weave-checkbox__box,
+  .weave-checkbox__input:indeterminate + .weave-checkbox__box {
+    background: var(--weave-checkbox-checked-background);
+    border-color: var(--weave-checkbox-checked-background);
+  }
+
+  .weave-checkbox__input:checked + .weave-checkbox__box::after {
+    opacity: 1;
+  }
+
+  /* Indeterminate rules come AFTER checked so a box that is both shows the dash, not
+     the tick. */
+  .weave-checkbox__input:indeterminate + .weave-checkbox__box::after {
+    opacity: 0;
+  }
+
+  .weave-checkbox__input:indeterminate + .weave-checkbox__box::before {
+    opacity: 1;
+  }
+
+  .weave-checkbox__input:focus-visible + .weave-checkbox__box {
+    @include helpers.focus-ring;
+  }
+
+  .weave-checkbox__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .weave-checkbox__input:disabled + .weave-checkbox__box {
+    opacity: 0.5;
+  }
+
+  .weave-checkbox__input:disabled ~ .weave-checkbox__label {
+    color: var(--weave-checkbox-disabled-text);
+  }
+}

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

@@ -0,0 +1,25 @@
+// checkbox — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    border: ref.ref('color.line'),
+    background: transparent,
+    checked-background: ref.ref('color.accent'),
+    // On-accent tick: a fixed white (accent is dark in Light + Dim, so surface/canvas
+    // wouldn't contrast) — same call as the badge.
+    mark: #fff,
+    label-text: ref.ref('color.ink'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    size: 20px,
+    radius: 3px,
+    border-width: 1.5px,
+    gap: 8px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    label-size: 13px,
+  ),
+);

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

@@ -0,0 +1,12 @@
+// Chips — a removable tag list. Behavior lives in chips.ts (array value + forms binding,
+// remove via × / Backspace/Delete, arrow-nav via the CDK listKeyManager); this is the visual.
+//
+// Each chip is a 1px-bordered pill (radius 3px) = `__label` + a `×` `__remove` button; an
+// optional dashed `__chip--add` "+ Add" chip trails the list. Roving-tabindex group
+// (`role=group`); the remove button carries an `aria-label`.
+//
+// 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/chips/_styles.scss

@@ -0,0 +1,83 @@
+// chips — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-chips {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--weave-chips-gap);
+
+    @content;
+  }
+
+  .weave-chips__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-chips-chip-gap);
+    padding: var(--weave-chips-padding-y) var(--weave-chips-padding-x);
+    border: 1px solid var(--weave-chips-border);
+    border-radius: var(--weave-chips-radius);
+    background: transparent;
+    color: var(--weave-chips-text);
+    font-size: var(--weave-chips-font-size);
+    line-height: var(--weave-chips-line-height);
+  }
+
+  .weave-chips__chip:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  .weave-chips__label {
+    white-space: nowrap;
+  }
+
+  .weave-chips__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--weave-chips-remove-size);
+    height: var(--weave-chips-remove-size);
+    margin-inline-end: var(--weave-chips-remove-nudge); // pull the × toward the chip edge (RTL-aware)
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--weave-chips-remove);
+    font-size: var(--weave-chips-remove-font-size);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      color var(--weave-chips-duration) ease,
+      background var(--weave-chips-duration) ease;
+  }
+
+  .weave-chips__remove:hover:not(:disabled) {
+    color: var(--weave-chips-text);
+    background: var(--weave-chips-hover);
+  }
+
+  .weave-chips__remove:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* The dashed "+ Add" chip — a real button. */
+  .weave-chips__chip--add {
+    gap: var(--weave-chips-add-gap);
+    border-style: dashed;
+    color: var(--weave-chips-add-text);
+    cursor: pointer;
+    font-family: inherit;
+    transition: background var(--weave-chips-duration) ease;
+  }
+
+  .weave-chips__chip--add:hover:not(:disabled) {
+    background: var(--weave-chips-hover);
+  }
+
+  .weave-chips__chip--add:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,28 @@
+// chips — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    border: ref.ref('color.line'),
+    text: ref.ref('color.ink'),
+    hover: ref.ref('color.field'),
+    remove: ref.ref('color.sub'),
+    add-text: ref.ref('color.sub'),
+  ),
+  size: (
+    radius: 3px,
+    padding-x: 10px,
+    padding-y: 4px,
+    gap: 8px,
+    chip-gap: 6px,
+    add-gap: 4px,
+    remove-size: 16px,
+    remove-nudge: -4px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 12px,
+    line-height: 1.4,
+    remove-font-size: 14px,
+  ),
+);

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

@@ -0,0 +1,10 @@
+// Datepicker — a date field + calendar popover. Behavior lives in datepicker.ts (trigger
+// field + a CDK-overlay calendar grid, all date math via the CDK Date adapter); this is the
+// visual. An underline trigger field (shared field-underline helper, like Select) with a
+// calendar icon; the calendar reuses the overlay-panel chrome and lays out a 7-col month grid
+// where the selected day = accent fill + white and today = an inset accent ring.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,203 @@
+// datepicker — styles() mixin. An underline trigger field (shared field-underline helper,
+// like Select) with a calendar icon; the calendar panel reuses the overlay-panel chrome and
+// lays out a 7-col month grid. Selected day = accent fill + white; today = inset accent ring;
+// state rides ARIA attrs / classes (the panel is portaled — no native pseudo). Forwarded by
+// ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-datepicker {
+    display: block;
+  }
+
+  .weave-datepicker__field {
+    @include helpers.field-underline(
+      var(--weave-datepicker-border),
+      var(--weave-datepicker-focus),
+      var(--weave-datepicker-border-width)
+    );
+    display: flex;
+    align-items: center;
+    gap: var(--weave-datepicker-gap);
+    padding: var(--weave-datepicker-field-padding-y) 0;
+    color: var(--weave-datepicker-text);
+    font-size: var(--weave-datepicker-font-size);
+    font-weight: var(--weave-datepicker-weight);
+    line-height: 1.4;
+    cursor: pointer;
+  }
+
+  .weave-datepicker__value--placeholder {
+    color: var(--weave-datepicker-placeholder);
+  }
+
+  // Editable text field (opt-in `editable`) — the input IS the combobox; underline is the
+  // field wrapper's (shared helper), so the input strips its own chrome.
+  .weave-datepicker__input {
+    @include helpers.field-reset;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    color: var(--weave-datepicker-text);
+  }
+
+  .weave-datepicker__input::placeholder {
+    color: var(--weave-datepicker-placeholder);
+  }
+
+  // Calendar-toggle button (editable mode) — wraps the icon glyph.
+  .weave-datepicker__icon-button {
+    @include helpers.field-reset;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    cursor: pointer;
+  }
+
+  .weave-datepicker__icon-button:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  .weave-datepicker__spacer {
+    flex: 1 1 auto;
+  }
+
+  .weave-datepicker__clear {
+    @include helpers.clear-button(var(--weave-datepicker-placeholder), var(--weave-datepicker-text));
+  }
+
+  // A small calendar glyph (pure CSS: a bordered box with a filled header bar).
+  .weave-datepicker__icon {
+    position: relative;
+    flex: 0 0 auto;
+    width: var(--weave-datepicker-icon-size);
+    height: var(--weave-datepicker-icon-size);
+    border: 1.5px solid var(--weave-datepicker-icon);
+    border-radius: 2px;
+  }
+
+  .weave-datepicker__icon::before {
+    content: '';
+    position: absolute;
+    inset: -1.5px -1.5px auto -1.5px;
+    height: 3px;
+    background: var(--weave-datepicker-icon);
+    border-radius: 2px 2px 0 0;
+  }
+
+  .weave-datepicker--disabled .weave-datepicker__field {
+    color: var(--weave-datepicker-disabled-text);
+    cursor: default;
+  }
+
+  .weave-datepicker--invalid .weave-datepicker__field {
+    border-bottom-color: var(--weave-datepicker-error);
+    box-shadow: inset 0 -1px 0 0 var(--weave-datepicker-error);
+  }
+
+  /* ── calendar panel ── */
+  .weave-datepicker__panel {
+    @include helpers.overlay-panel;
+    width: var(--weave-datepicker-panel-width);
+    padding: var(--weave-datepicker-panel-padding);
+  }
+
+  .weave-datepicker__nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+
+  .weave-datepicker__nav-button {
+    @include helpers.field-reset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--weave-datepicker-nav-size);
+    height: var(--weave-datepicker-nav-size);
+    border-radius: 50%;
+    color: var(--weave-datepicker-nav);
+    cursor: pointer;
+  }
+
+  .weave-datepicker__nav-button:hover {
+    color: var(--weave-datepicker-nav-hover);
+    background: var(--weave-datepicker-cell-hover);
+  }
+
+  .weave-datepicker__nav-button:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  .weave-datepicker__month-label {
+    font-size: var(--weave-datepicker-month-label-size);
+    font-weight: var(--weave-datepicker-month-label-weight);
+    color: var(--weave-datepicker-text);
+  }
+
+  .weave-datepicker__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 2px;
+  }
+
+  .weave-datepicker__weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--weave-datepicker-cell-size);
+    color: var(--weave-datepicker-weekday);
+    font-size: var(--weave-datepicker-weekday-size);
+    font-weight: 400;
+  }
+
+  .weave-datepicker__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .weave-datepicker__cell {
+    @include helpers.field-reset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--weave-datepicker-cell-size);
+    height: var(--weave-datepicker-cell-size);
+    margin: 1px auto;
+    border-radius: var(--weave-datepicker-cell-radius);
+    color: var(--weave-datepicker-cell-text);
+    font-size: var(--weave-datepicker-cell-size);
+    cursor: pointer;
+  }
+
+  // A non-day slot (leading/trailing blank).
+  .weave-datepicker__cell--blank {
+    cursor: default;
+  }
+
+  .weave-datepicker__cell:not(:disabled):not(.weave-datepicker__cell--selected):hover {
+    background: var(--weave-datepicker-cell-hover);
+  }
+
+  .weave-datepicker__cell:focus-visible {
+    @include helpers.focus-ring($offset: -1px);
+  }
+
+  // Today = an inset accent ring (design).
+  .weave-datepicker__cell--today {
+    box-shadow: inset 0 0 0 1px var(--weave-datepicker-today-ring);
+  }
+
+  // Selected = accent fill + white (design) — wins over today's ring.
+  .weave-datepicker__cell--selected {
+    background: var(--weave-datepicker-selected-background);
+    color: var(--weave-datepicker-selected-text);
+    box-shadow: none;
+  }
+
+  .weave-datepicker__cell--disabled {
+    color: var(--weave-datepicker-disabled-text);
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,50 @@
+// datepicker — design tokens (schema). An underline trigger field (like Select) + a calendar
+// popover: a 7-col month grid where the selected day = accent fill + white and today = an
+// inset accent ring (per the design README). Panel reuses 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'),
+    icon: ref.ref('color.sub'),
+    disabled-text: ref.ref('color.sub'),
+    // Calendar.
+    nav: ref.ref('color.sub'),
+    nav-hover: ref.ref('color.ink'),
+    weekday: ref.ref('color.sub'),
+    cell-text: ref.ref('color.ink'),
+    cell-hover: ref.ref('color.field'),
+    // Selected day = accent fill + white text (the design).
+    selected-background: ref.ref('color.accent'),
+    selected-text: ref.ref('color.surface'),
+    // Today = an inset 1px accent ring.
+    today-ring: ref.ref('color.accent'),
+  ),
+  size: (
+    gap: 8px,
+    field-padding-y: 6px,
+    border-width: 1.5px,
+    radius: ref.ref('shape.radius'),
+    icon-size: 14px,
+    // Calendar geometry (design: ~236px popover).
+    panel-width: 236px,
+    panel-padding: 10px,
+    cell-size: 30px,
+    cell-radius: ref.ref('shape.radius'),
+    nav-size: 26px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 500,
+    cell-size: 12px,
+    weekday-size: 11px,
+    month-label-size: 13px,
+    month-label-weight: 600,
+  ),
+);

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

@@ -0,0 +1,9 @@
+// Dialog — a centered modal panel. Behavior lives in dialog.ts (openDialog → DialogRef:
+// CDK overlay + dimming backdrop + blockScroll + focus-trap/restore + Esc/backdrop close);
+// this is the visual: a hairline flex-column panel with three regions — a fixed header
+// (optional), a vertically-scrolling content area (always), and a fixed actions row
+// (optional) — bounded so it never exceeds the viewport.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';

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

@@ -0,0 +1,54 @@
+// dialog — styles() mixin (class rules). A hairline modal panel (surface + 1px line, NO
+// shadow) laid out as a flex column of three regions: a fixed header, a scrolling content
+// area, and a fixed actions row. The panel never exceeds the viewport (max-width/height),
+// so tall content scrolls INSIDE __content while header/actions stay put. Forwarded by
+// ./_index.scss.
+
+@mixin styles() {
+  .weave-dialog {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: var(--weave-dialog-width);
+    min-width: var(--weave-dialog-min-width);
+    // Never exceed the viewport — this clamp always wins over the inline width/height.
+    max-width: calc(100vw - 2 * var(--weave-dialog-margin));
+    max-height: calc(100vh - 2 * var(--weave-dialog-margin));
+    background: var(--weave-dialog-surface);
+    color: var(--weave-dialog-text);
+    border: 1px solid var(--weave-dialog-line);
+    border-radius: var(--weave-dialog-radius);
+    overflow: hidden; // clip the regions to the panel radius
+  }
+
+  // Header — fixed (doesn't scroll); only present when the dev supplies one.
+  .weave-dialog__header {
+    flex: 0 0 auto;
+    padding: var(--weave-dialog-padding);
+    border-bottom: 1px solid var(--weave-dialog-line);
+    font-size: var(--weave-dialog-title-size);
+    font-weight: var(--weave-dialog-title-weight);
+    line-height: var(--weave-dialog-title-line-height);
+  }
+
+  // Content — always present; takes the remaining height and scrolls vertically.
+  // `min-height:0` lets the flex child shrink below its content size so the scroll engages.
+  .weave-dialog__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--weave-dialog-padding);
+    line-height: var(--weave-dialog-content-line-height);
+  }
+
+  // Actions — fixed footer, right-aligned; only present when the dev supplies actions.
+  .weave-dialog__actions {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--weave-dialog-actions-gap);
+    padding: var(--weave-dialog-padding);
+    border-top: 1px solid var(--weave-dialog-line);
+  }
+}

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

@@ -0,0 +1,29 @@
+// dialog — design tokens (schema). A centered modal panel; the backdrop dim comes from the
+// shared overlay republic. Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    surface: ref.ref('color.surface'),
+    text: ref.ref('color.ink'),
+    // Header/actions dividers.
+    line: ref.ref('color.line'),
+  ),
+  size: (
+    // Default preferred width; per-dialog override via openDialog({ width }). Always
+    // clamped by the viewport (max-width below), so it can't overflow the screen.
+    width: 560px,
+    min-width: 320px,
+    // Gap kept from each viewport edge (drives the max-width/height clamp).
+    margin: 16px,
+    radius: ref.ref('shape.radius'),
+    padding: 20px,
+    actions-gap: 8px,
+  ),
+  typography: (
+    title-size: 15px,
+    title-weight: 600,
+    title-line-height: 1.3,
+    content-line-height: 1.5,
+  ),
+);

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

@@ -0,0 +1,8 @@
+// Divider — a hairline rule. Weave: 1px var(--line) horizontal; 1px×16px vertical.
+// Pure CSS (no behavior). Two-layer anatomy: token schema ($tokens) + styles() rules.
+//
+// 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/divider/_styles.scss

@@ -0,0 +1,18 @@
+// divider — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-divider {
+    border: 0;
+    border-top: var(--weave-divider-thickness) solid var(--weave-divider-line);
+    margin: 0;
+    align-self: stretch;
+  }
+
+  .weave-divider--vertical {
+    border-top: 0;
+    border-left: var(--weave-divider-thickness) solid var(--weave-divider-line);
+    width: 0;
+    height: var(--weave-divider-height);
+    align-self: center;
+  }
+}

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

@@ -0,0 +1,12 @@
+// divider — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    line: ref.ref('color.line'),
+  ),
+  size: (
+    thickness: 1px,
+    height: 16px, // vertical divider length
+  ),
+);

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

@@ -0,0 +1,14 @@
+// Expansion — an accordion of collapsible panels. Behavior lives in expansion.ts
+// (open-set + single/multi toggle + arrow-key header nav; bodies appended on mount);
+// this is the visual.
+//
+// A panel = a role=heading > <button> header (title + a +/- marker) toggling a
+// role=region body. Open/collapsed state rides the NATIVE ARIA attrs, not a class:
+// [aria-expanded=true] tints the header (--field) + flips the marker to −; the region
+// [data-open=true] animates via grid-template-rows 0fr→1fr (no JS height measure).
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin). Add another
+// concern as its own file and @forward it here.
+
+@forward 'tokens';
+@forward 'styles';