@weave-framework/ui 0.2.107

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

@@ -0,0 +1,128 @@
+// expansion — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-expansion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--weave-expansion-divider);
+    border-radius: var(--weave-expansion-radius);
+    overflow: hidden; // clip the rounded corners over the panels
+
+    @content;
+  }
+
+  // Hairline between panels (design: separate surfaces with a 1px line, no shadow).
+  .weave-expansion__panel + .weave-expansion__panel {
+    border-top: 1px solid var(--weave-expansion-divider);
+  }
+
+  .weave-expansion__heading {
+    margin: 0;
+  }
+
+  .weave-expansion__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--weave-expansion-header-gap);
+    width: 100%;
+    min-height: var(--weave-expansion-header-height);
+    padding: var(--weave-expansion-padding-y) var(--weave-expansion-padding-x);
+    border: 0;
+    background: transparent;
+    color: var(--weave-expansion-text);
+    font-family: inherit;
+    font-size: var(--weave-expansion-header-size);
+    font-weight: var(--weave-expansion-header-weight);
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--weave-expansion-duration) ease;
+  }
+
+  .weave-expansion__header:hover {
+    background: var(--weave-expansion-header-hover-background);
+  }
+
+  // Open header — the field tint (state via the native ARIA attr, no state class).
+  .weave-expansion__header[aria-expanded='true'] {
+    background: var(--weave-expansion-header-open-background);
+  }
+
+  .weave-expansion__header:focus-visible {
+    @include helpers.focus-ring;
+    outline-offset: -2px; // ring sits inside the header
+  }
+
+  .weave-expansion__header[aria-disabled='true'] {
+    color: var(--weave-expansion-disabled-text);
+    cursor: not-allowed;
+  }
+
+  .weave-expansion__title {
+    flex: 1;
+    min-width: 0;
+    @include helpers.truncate;
+  }
+
+  // The +/- marker (design), toggled purely off the header's aria-expanded state.
+  .weave-expansion__marker {
+    flex: none;
+    width: var(--weave-expansion-marker-width);
+    color: var(--weave-expansion-marker);
+    font-weight: var(--weave-expansion-marker-weight);
+    text-align: center;
+  }
+
+  .weave-expansion__marker::after {
+    content: '+';
+  }
+
+  .weave-expansion__header[aria-expanded='true'] .weave-expansion__marker::after {
+    content: '\2212'; // minus sign (−), not a hyphen
+  }
+
+  // Collapse via grid-template-rows 0fr→1fr — no JS height measurement. The height
+  // change is instant: transitioning `fr` values is unreliable inside a flex column
+  // (Chrome resolves an animating `1fr` to 0 in an auto-height container), so the
+  // reveal is carried by a keyframe on the content instead (fades/slides in on open).
+  .weave-expansion__region {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+
+  .weave-expansion__region[data-open='true'] {
+    grid-template-rows: 1fr;
+  }
+
+  // The clip layer — no padding here, so the grid row collapses fully to 0 when
+  // closed (padding on the animating grid child would keep it from reaching 0).
+  .weave-expansion__body {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  // The padded content sits inside the clip layer.
+  .weave-expansion__content {
+    padding: var(--weave-expansion-body-padding-y) var(--weave-expansion-body-padding-x);
+    color: var(--weave-expansion-text);
+    font-size: var(--weave-expansion-body-size);
+  }
+
+  // Reveal on open (robust everywhere, unlike an fr transition).
+  .weave-expansion__region[data-open='true'] .weave-expansion__content {
+    animation: weave-expansion-reveal var(--weave-expansion-duration) ease;
+  }
+
+  @keyframes weave-expansion-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+// expansion — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.ink'),
+    marker: ref.ref('color.sub'),
+    divider: ref.ref('color.line'),
+    // Open header takes the field tint (design: "open header gets --field bg").
+    header-open-background: ref.ref('color.field'),
+    // Subtle hover — half-strength field so it reads under the open state.
+    header-hover-background: color-mix(in srgb, ref.ref('color.field') 55%, transparent),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    radius: ref.ref('shape.radius'),
+    header-height: 44px,
+    header-gap: 12px,
+    padding-x: 14px,
+    padding-y: 10px,
+    body-padding-x: 14px,
+    body-padding-y: 12px,
+    marker-width: 16px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    header-size: 13px,
+    header-weight: 600,
+    body-size: 13px,
+    marker-weight: 400,
+  ),
+);

package/src/styles/components/form-field/_index.scss

@@ -0,0 +1,13 @@
+// Form Field — the lean label/hint/error frame around a control. Behavior lives in
+// form-field.ts (auto-wires the slotted control's id/for/aria-describedby/aria-invalid,
+// and derives the error state); this is the visual.
+//
+// A column: `__label` (uppercase 10px) above, `__control` (the slot), and a
+// `__hint`/`__error` line (11px) below. In the error state the `--invalid` root turns the
+// label `error` red; the control's own underline reddens off the aria-invalid this sets.
+//
+// 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/form-field/_styles.scss

@@ -0,0 +1,39 @@
+// form-field — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--weave-form-field-gap);
+
+    @content;
+  }
+
+  .weave-form-field__label {
+    font-size: var(--weave-form-field-label-size);
+    font-weight: var(--weave-form-field-label-weight);
+    text-transform: uppercase;
+    letter-spacing: var(--weave-form-field-label-tracking);
+    color: var(--weave-form-field-label);
+  }
+
+  .weave-form-field__control {
+    display: block;
+  }
+
+  .weave-form-field__hint {
+    font-size: var(--weave-form-field-message-size);
+    color: var(--weave-form-field-hint);
+  }
+
+  .weave-form-field__error {
+    font-size: var(--weave-form-field-message-size);
+    color: var(--weave-form-field-error);
+  }
+
+  /* Error state — the label reddens (the control's underline reddens off the
+     aria-invalid this field sets, styled by the control itself). */
+  .weave-form-field--invalid .weave-form-field__label {
+    color: var(--weave-form-field-error);
+  }
+}

package/src/styles/components/form-field/_tokens.scss

@@ -0,0 +1,19 @@
+// form-field — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    label: ref.ref('color.sub'),
+    hint: ref.ref('color.sub'),
+    error: ref.ref('color.error'),
+  ),
+  size: (
+    gap: 6px,
+    label-size: 10px,
+    message-size: 11px,
+  ),
+  typography: (
+    label-weight: 600,
+    label-tracking: 0.14em,
+  ),
+);

package/src/styles/components/grid-list/_index.scss

@@ -0,0 +1,12 @@
+// Grid List — a responsive grid of square tiles. Behavior lives in grid-list.ts (a thin
+// container that forwards `class`); this is the visual.
+//
+// `repeat(auto-fill, minmax(min-tile, 1fr))` with 1px gaps that read as hairlines (the
+// container's line background shows through), one `__tile--accent` tile optionally filled.
+// Pure CSS — reflows to the container width with no JS.
+//
+// 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/grid-list/_styles.scss

@@ -0,0 +1,31 @@
+// grid-list — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-grid-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--weave-grid-list-min-tile), 1fr));
+    gap: var(--weave-grid-list-gap);
+    // The gaps + outer frame are the same 1px line; tiles paint over it, so the grid
+    // reads as hairline-separated cells with no drop shadow (the Weave surface style).
+    background: var(--weave-grid-list-border);
+    border: var(--weave-grid-list-gap) solid var(--weave-grid-list-border);
+    border-radius: var(--weave-grid-list-radius);
+    overflow: hidden; // clip the tile corners to the container radius
+
+    @content;
+  }
+
+  .weave-grid-list__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    background: var(--weave-grid-list-tile-background);
+    color: var(--weave-grid-list-tile-text);
+  }
+
+  .weave-grid-list__tile--accent {
+    background: var(--weave-grid-list-accent-background);
+    color: var(--weave-grid-list-accent-text);
+  }
+}

package/src/styles/components/grid-list/_tokens.scss

@@ -0,0 +1,18 @@
+// grid-list — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    // The 1px gaps show this through — the container background reads as hairlines.
+    border: ref.ref('color.line'),
+    tile-background: ref.ref('color.surface'),
+    tile-text: ref.ref('color.ink'),
+    accent-background: ref.ref('color.accent'),
+    accent-text: ref.ref('color.canvas'),
+  ),
+  size: (
+    min-tile: 96px,
+    gap: 1px,
+    radius: ref.ref('shape.radius'),
+  ),
+);

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

@@ -0,0 +1,8 @@
+// Icon — inline SVG at Weave scale (18px, 1.4 hairline stroke, currentColor).
+// Behavior lives in icon.ts; this is the token schema + the class contract.
+//
+// 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/icon/_styles.scss

@@ -0,0 +1,18 @@
+// icon — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-icon {
+    display: inline-flex;
+    width: var(--weave-icon-size);
+    height: var(--weave-icon-size);
+    flex: 0 0 auto;
+    line-height: 0;
+    color: inherit;
+  }
+
+  .weave-icon svg {
+    width: 100%;
+    height: 100%;
+    stroke-width: var(--weave-icon-stroke);
+  }
+}

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

@@ -0,0 +1,8 @@
+// icon — design tokens (schema). Forwarded by ./_index.scss.
+
+$tokens: (
+  size: (
+    size: 18px,
+    stroke: 1.4,
+  ),
+);

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

@@ -0,0 +1,13 @@
+// Input — a native `<input>`/`<textarea>` as a Weave underline field. Behavior lives in
+// input.ts (value + forms binding, clearable, multiline, prefix/suffix slot collapse);
+// this is the visual.
+//
+// A flex row sharing one `border-bottom`: `__prefix` · `__field` · `__clear` · `__suffix`.
+// Focus → accent underline (inset shadow, no layout shift); `--invalid` → error underline
+// (off the bound control's state). Empty prefix/suffix collapse via `--empty` (JS-set).
+//
+// 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/input/_styles.scss

@@ -0,0 +1,111 @@
+// input — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-input {
+    // THE shared Weave field underline (single source; Select uses the same helper).
+    @include helpers.field-underline(var(--weave-input-border), var(--weave-input-focus), var(--weave-input-border-width));
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-input-gap);
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--weave-input-text);
+
+    @content;
+  }
+
+  /* Multiline aligns adornments to the first line, not the vertical centre. */
+  .weave-input--multiline {
+    align-items: flex-start;
+  }
+
+  /* Error — red underline (driven by the bound control's touched-and-invalid state). */
+  .weave-input--invalid {
+    border-bottom-color: var(--weave-input-error);
+  }
+
+  .weave-input--invalid:focus-within {
+    border-bottom-color: var(--weave-input-error);
+    box-shadow: inset 0 -1px 0 var(--weave-input-error);
+  }
+
+  .weave-input__field {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    font-size: var(--weave-input-font-size);
+    color: inherit;
+    padding: var(--weave-input-padding-y) 0;
+    outline: none;
+  }
+
+  .weave-input__field::placeholder {
+    color: var(--weave-input-placeholder);
+  }
+
+  /* Neutralise the browser autofill tint (blue/yellow box) so the field stays a
+     transparent underline. The 100000s transition defers the autofill background
+     indefinitely; text/caret keep the field colour. */
+  .weave-input__field:-webkit-autofill,
+  .weave-input__field:-webkit-autofill:hover,
+  .weave-input__field:-webkit-autofill:focus {
+    transition: background-color 100000s ease-in-out 0s;
+    -webkit-text-fill-color: var(--weave-input-text);
+    caret-color: var(--weave-input-text);
+  }
+
+  /* Suppress native adornments Weave replaces or omits: the `type=search` clear (we
+     ship our own `__clear`) and the `type=number` spinner buttons. */
+  .weave-input__field::-webkit-search-cancel-button,
+  .weave-input__field::-webkit-search-decoration {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .weave-input__field::-webkit-outer-spin-button,
+  .weave-input__field::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .weave-input__field[type='number'] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  .weave-input__field:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  textarea.weave-input__field {
+    resize: vertical;
+    line-height: 1.4;
+  }
+
+  /* Prefix / suffix — adornment text or icon; empty slots collapse (JS adds --empty). */
+  .weave-input__prefix,
+  .weave-input__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    color: var(--weave-input-adornment);
+    font-size: var(--weave-input-font-size);
+  }
+
+  .weave-input__prefix--empty,
+  .weave-input__suffix--empty {
+    display: none;
+  }
+
+  /* Clear × — the shared Weave clear button (same as Select). */
+  .weave-input__clear {
+    @include helpers.clear-button(var(--weave-input-adornment), var(--weave-input-text));
+    flex: none;
+    font-size: var(--weave-input-clear-size);
+    line-height: 1;
+  }
+}

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

@@ -0,0 +1,21 @@
+// input — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    border: ref.ref('color.line'),
+    focus: ref.ref('color.accent'),
+    error: ref.ref('color.error'),
+    text: ref.ref('color.ink'),
+    placeholder: ref.ref('color.sub'),
+    adornment: ref.ref('color.sub'),
+  ),
+  size: (
+    padding-y: 6px,
+    gap: 8px,
+    border-width: 1.5px,
+    clear-size: 15px,
+    font-size: 13px,
+    duration: ref.ref('motion.fast'),
+  ),
+);

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

@@ -0,0 +1,12 @@
+// List — a vertical list of selectable rows. Behavior lives in list.ts (selection +
+// roving tabindex + typeahead via the CDK listKeyManager); this is the visual.
+//
+// Two modes off one class contract: role=listbox (selectable) rows are interactive,
+// role=list rows are plain. Selected state is the NATIVE ARIA attr, not a class:
+// [aria-selected=true] paints the accentSoft tint + a 2px accent left border.
+//
+// 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/list/_styles.scss

@@ -0,0 +1,87 @@
+// list — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-list {
+    display: flex;
+    flex-direction: column;
+
+    @content;
+  }
+
+  .weave-list__row {
+    display: flex;
+    align-items: center;
+    gap: var(--weave-list-padding-x);
+    min-height: var(--weave-list-row-height);
+    padding: var(--weave-list-padding-y) var(--weave-list-padding-x);
+    // A 2px accent left border appears only when selected; reserve the space now so
+    // selection doesn't shift the row content (transparent placeholder border).
+    border-left: var(--weave-list-marker-width) solid transparent;
+    color: var(--weave-list-text);
+    font-size: var(--weave-list-font-size);
+    font-weight: var(--weave-list-weight);
+    line-height: var(--weave-list-line-height);
+    transition: background var(--weave-list-duration) ease;
+  }
+
+  // Hairline separators between rows (design: separate surfaces with a 1px line, no shadow).
+  .weave-list__row + .weave-list__row {
+    box-shadow: 0 -1px 0 var(--weave-list-divider);
+  }
+
+  // Only the selectable listbox rows are interactive.
+  .weave-list[role='listbox'] .weave-list__row {
+    cursor: pointer;
+  }
+
+  .weave-list[role='listbox'] .weave-list__row:hover {
+    background: var(--weave-list-hover);
+  }
+
+  .weave-list__row:focus-visible {
+    @include helpers.focus-ring;
+    outline-offset: -2px; // ring sits inside the row
+  }
+
+  .weave-list__title {
+    flex: 1;
+    min-width: 0;
+    @include helpers.truncate;
+  }
+
+  .weave-list__meta {
+    flex: none;
+    color: var(--weave-list-meta);
+    font-size: var(--weave-list-meta-font-size);
+  }
+
+  // Reorder drag handle — only this starts a drag (row clicks still select). touch-action:none
+  // so a touch-drag on the grip doesn't scroll the page.
+  .weave-list__drag-handle {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--weave-list-drag-handle-size);
+    color: var(--weave-list-drag-handle);
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .weave-list__drag-handle:active {
+    cursor: grabbing;
+  }
+
+  /* Selected — accentSoft tint + 2px accent left border (state via native ARIA attr). */
+  .weave-list__row[aria-selected='true'] {
+    background: var(--weave-list-selected-background);
+    border-left-color: var(--weave-list-selected-marker);
+  }
+
+  .weave-list__row[aria-disabled='true'] {
+    color: var(--weave-list-disabled-text);
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,31 @@
+// list — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    text: ref.ref('color.ink'),
+    meta: ref.ref('color.sub'),
+    hover: ref.ref('color.field'),
+    divider: ref.ref('color.line'),
+    // 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'),
+    disabled-text: ref.ref('color.sub'),
+    // The reorder drag handle (⠿ grip).
+    drag-handle: ref.ref('color.sub'),
+  ),
+  size: (
+    row-height: 34px,
+    padding-x: 12px,
+    padding-y: 7px,
+    marker-width: 2px,
+    drag-handle-size: 16px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    meta-font-size: 11px,
+    weight: 500,
+    line-height: 1.3,
+  ),
+);

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

@@ -0,0 +1,9 @@
+// Menu — a dropdown of action rows anchored under a trigger by the CDK overlay. Behavior
+// lives in menu.ts (the `use:menu` action — open/close, connectedPosition, roving focus via
+// listKeyManager + typeahead, Esc/Tab return focus, transparent click-away backdrop); this
+// is the visual: the shared overlay-panel chrome + lean full-width menuitem rows whose
+// hover/roving-active tint comes from the native :hover/:focus pseudo (no state class).
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';