@weave-framework/ui 0.2.107

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

@@ -0,0 +1,72 @@
+// badge — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-badge {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+
+    @content;
+  }
+
+  .weave-badge__mark {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--weave-badge-min-size);
+    height: var(--weave-badge-min-size);
+    padding: 0 var(--weave-badge-padding-x);
+    border-radius: var(--weave-badge-radius);
+    background: var(--weave-badge-background);
+    color: var(--weave-badge-text);
+    font-size: var(--weave-badge-font-size);
+    font-weight: var(--weave-badge-weight);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  /* Dot — a bare 6px mark, no text. */
+  .weave-badge--dot .weave-badge__mark {
+    min-width: var(--weave-badge-dot-size);
+    width: var(--weave-badge-dot-size);
+    height: var(--weave-badge-dot-size);
+    padding: 0;
+    background: var(--weave-badge-dot);
+  }
+
+  /* Corners (default top-end). */
+  .weave-badge--bottom .weave-badge__mark {
+    top: auto;
+    bottom: 0;
+    transform: translate(50%, 50%);
+  }
+
+  .weave-badge--start .weave-badge__mark {
+    right: auto;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  .weave-badge--bottom.weave-badge--start .weave-badge__mark {
+    transform: translate(-50%, 50%);
+  }
+
+  /* Tag — a standalone outline label; the container IS the visible mark. */
+  .weave-badge--tag {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--weave-badge-tag-padding-y) var(--weave-badge-tag-padding-x);
+    border: 1px solid var(--weave-badge-tag-border);
+    border-radius: var(--weave-badge-tag-radius);
+    color: var(--weave-badge-tag-text);
+    font-size: var(--weave-badge-tag-font-size);
+    font-weight: var(--weave-badge-weight);
+    line-height: 1;
+  }
+}

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

@@ -0,0 +1,27 @@
+// badge — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    background: ref.ref('color.accent'),
+    // on-accent text is fixed white (accent is dark in both themes)
+    text: #ffffff,
+    dot: ref.ref('color.error'),
+    tag-border: ref.ref('color.line'),
+    tag-text: ref.ref('color.sub'),
+  ),
+  size: (
+    min-size: 15px,
+    dot-size: 6px,
+    padding-x: 5px,
+    radius: 999px,
+    font-size: 10px,
+    tag-radius: ref.ref('shape.radius'),
+    tag-padding-x: 6px,
+    tag-padding-y: 2px,
+    tag-font-size: 10px,
+  ),
+  typography: (
+    weight: 600,
+  ),
+);

package/src/styles/components/bottom-sheet/_index.scss

@@ -0,0 +1,9 @@
+// Bottom Sheet — a full-width modal docked to the bottom edge. Behavior lives in
+// bottom-sheet.ts (openBottomSheet → BottomSheetRef; shares the modal core with Dialog —
+// CDK overlay + dimming backdrop + blockScroll + focus-trap/restore + Esc/backdrop close +
+// the three regions); this is the visual: a hairline sheet capped in width/height, top-only
+// radius, sliding up on open, with a scrolling content region.
+//
+// Barrel — forwards the split partials ($tokens + the styles() mixin).
+@forward 'tokens';
+@forward 'styles';

package/src/styles/components/bottom-sheet/_styles.scss

@@ -0,0 +1,77 @@
+// bottom-sheet — styles() mixin (class rules). A hairline modal docked to the bottom edge
+// (positioned by the CDK globalPosition: left:0/right:0/bottom:0), capped in width (centred
+// on wide screens via margin-inline:auto) and height (content scrolls inside). Top-only
+// corner radius, slides up on open. Same three-region layout as Dialog. Forwarded by
+// ./_index.scss.
+
+@mixin styles() {
+  .weave-bottom-sheet {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    // Capped + centred within the left:0/right:0 box the CDK sets.
+    max-width: var(--weave-bottom-sheet-max-width);
+    margin-inline: auto;
+    max-height: var(--weave-bottom-sheet-max-height);
+    background: var(--weave-bottom-sheet-surface);
+    color: var(--weave-bottom-sheet-text);
+    border: 1px solid var(--weave-bottom-sheet-line);
+    border-bottom: 0; // sits flush on the viewport's bottom edge
+    border-radius: var(--weave-bottom-sheet-radius) var(--weave-bottom-sheet-radius) 0 0;
+    overflow: hidden;
+    animation: weave-bottom-sheet-in var(--weave-bottom-sheet-duration) ease;
+  }
+
+  @keyframes weave-bottom-sheet-in {
+    from {
+      transform: translateY(100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  // Top grab-handle — drag it down to dismiss (touch-action:none so touch drags don't scroll).
+  .weave-bottom-sheet__handle {
+    flex: 0 0 auto;
+    width: var(--weave-bottom-sheet-handle-width);
+    height: var(--weave-bottom-sheet-handle-height);
+    margin: var(--weave-bottom-sheet-handle-top) auto 0;
+    border-radius: 999px; // structural full-pill
+    background: var(--weave-bottom-sheet-handle);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .weave-bottom-sheet__handle:active {
+    cursor: grabbing;
+  }
+
+  .weave-bottom-sheet__header {
+    flex: 0 0 auto;
+    padding: var(--weave-bottom-sheet-padding);
+    border-bottom: 1px solid var(--weave-bottom-sheet-line);
+    font-size: var(--weave-bottom-sheet-title-size);
+    font-weight: var(--weave-bottom-sheet-title-weight);
+    line-height: var(--weave-bottom-sheet-title-line-height);
+  }
+
+  .weave-bottom-sheet__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--weave-bottom-sheet-padding);
+    line-height: var(--weave-bottom-sheet-content-line-height);
+  }
+
+  .weave-bottom-sheet__actions {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--weave-bottom-sheet-actions-gap);
+    padding: var(--weave-bottom-sheet-padding);
+    border-top: 1px solid var(--weave-bottom-sheet-line);
+  }
+}

package/src/styles/components/bottom-sheet/_tokens.scss

@@ -0,0 +1,33 @@
+// bottom-sheet — design tokens (schema). A full-width modal docked to the bottom edge; 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'),
+    line: ref.ref('color.line'),
+    // The drag-to-dismiss grab handle.
+    handle: ref.ref('color.line'),
+  ),
+  size: (
+    // Grab-handle grabber bar (drag-to-dismiss).
+    handle-width: 36px,
+    handle-height: 4px,
+    handle-top: 8px,
+    // Cap the sheet's height so it never covers the whole screen; content scrolls inside.
+    max-height: 72vh,
+    // Wide-screen comfort cap (the sheet centers rather than spanning ultra-wide displays).
+    max-width: 640px,
+    radius: ref.ref('shape.radius'),
+    padding: 20px,
+    actions-gap: 8px,
+    duration: ref.ref('motion.sheet'),
+  ),
+  typography: (
+    title-size: 15px,
+    title-weight: 600,
+    title-line-height: 1.3,
+    content-line-height: 1.5,
+  ),
+);

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

@@ -0,0 +1,12 @@
+// Button — Weave actions. Behavior lives in button.ts (variant class + ripple +
+// native <button>); this is the visual (token schema + styles() rules).
+//
+// Variants (REAL Weave, as --<variant>): default = Primary (ink fill, canvas text);
+// --outline (1px ink border, inverts on hover); --marked (text + inset -2px accent);
+// --ghost (text, sub→ink on hover); --icon (34px square). Disabled via [disabled].
+//
+// 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/button/_styles.scss

@@ -0,0 +1,106 @@
+// button — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--weave-button-gap);
+    padding: var(--weave-button-padding-y) var(--weave-button-padding-x);
+    border: 1px solid transparent;
+    border-radius: var(--weave-button-radius);
+    background: var(--weave-button-background);
+    color: var(--weave-button-text);
+    font-size: var(--weave-button-font-size);
+    font-weight: var(--weave-button-weight);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--weave-button-duration) ease,
+      color var(--weave-button-duration) ease,
+      opacity var(--weave-button-duration) ease;
+    @include helpers.ripple-host; // position:relative; overflow:hidden — clips the ripple
+
+    @content; // (b) bring-your-own-skin: append into our scope
+  }
+
+  .weave-button:hover {
+    opacity: var(--weave-button-hover-opacity);
+  }
+
+  .weave-button:active {
+    transform: translateY(1px);
+  }
+
+  .weave-button:focus-visible {
+    @include helpers.focus-ring;
+  }
+
+  /* Outline — 1px ink border, inverts to the primary fill on hover. */
+  .weave-button--outline {
+    background: transparent;
+    color: var(--weave-button-background);
+    border-color: var(--weave-button-border);
+  }
+
+  .weave-button--outline:hover {
+    background: var(--weave-button-background);
+    color: var(--weave-button-text);
+    opacity: 1;
+  }
+
+  /* Marked — text with a 2px accent underline mark (no fill). */
+  .weave-button--marked {
+    background: transparent;
+    color: var(--weave-button-background);
+    box-shadow: inset 0 calc(-1 * var(--weave-button-mark-width)) 0 var(--weave-button-accent);
+  }
+
+  .weave-button--marked:hover {
+    opacity: 1;
+  }
+
+  /* Ghost — text only; sub → ink on hover. */
+  .weave-button--ghost {
+    background: transparent;
+    color: var(--weave-button-ghost-text);
+  }
+
+  .weave-button--ghost:hover {
+    background: transparent;
+    color: var(--weave-button-ghost-text-hover);
+    opacity: 1;
+  }
+
+  /* Icon — 34px square, houses a single <Icon>. The glyph inherits the surrounding
+     text color (ink on a light surface, canvas on an ink toolbar) so it's visible on
+     any background — never hard-code ink here. */
+  .weave-button--icon {
+    width: var(--weave-button-icon-size);
+    height: var(--weave-button-icon-size);
+    padding: 0;
+    background: transparent;
+    color: inherit;
+  }
+
+  .weave-button--icon:hover {
+    background: var(--weave-button-icon-hover);
+    opacity: 1;
+  }
+
+  /* Disabled (native attr, not a class) — field bg, sub text, no feedback. */
+  .weave-button[disabled] {
+    background: var(--weave-button-disabled-background);
+    color: var(--weave-button-disabled-text);
+    border-color: transparent;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  .weave-button[disabled]:active {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,36 @@
+// button — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    background: ref.ref('color.ink'),
+    // Primary fill
+    text: ref.ref('color.canvas'),
+    // Primary text
+    border: ref.ref('color.ink'),
+    accent: ref.ref('color.accent'),
+    // marked underline
+    ghost-text: ref.ref('color.sub'),
+    ghost-text-hover: ref.ref('color.ink'),
+    // Adaptive tint (a faint wash of the current text color) so an icon button's
+    // hover reads on ANY background — light surface or ink toolbar. Resolved at the
+    // use site, where currentColor = the button's inherited color.
+    icon-hover: color-mix(in srgb, currentColor 8%, transparent),
+    disabled-background: ref.ref('color.field'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    radius: ref.ref('shape.radius'),
+    padding-x: 18px,
+    padding-y: 9px,
+    gap: 8px,
+    icon-size: 34px,
+    mark-width: 2px,
+    hover-opacity: 0.85,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 600,
+  ),
+);

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

@@ -0,0 +1,12 @@
+// Button Toggle — a segmented control. Behavior lives in button-toggle.ts (selection
+// + roving tabindex via the CDK listKeyManager); this is the visual.
+//
+// A 1px-bordered container with border-left segment dividers; the selected segment
+// fills with ink + canvas text. Selected state is the NATIVE ARIA attr, not a class:
+// [aria-checked=true] (single/radio) and [aria-pressed=true] (multi).
+//
+// 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/button-toggle/_styles.scss

@@ -0,0 +1,57 @@
+// button-toggle — styles() mixin (class rules). Forwarded by ./_index.scss.
+@use '../../helpers' as helpers;
+
+@mixin styles() {
+  .weave-button-toggle {
+    display: inline-flex;
+    border: 1px solid var(--weave-button-toggle-border);
+    border-radius: var(--weave-button-toggle-radius);
+    overflow: hidden; // clip the segment corners to the container radius
+
+    @content;
+  }
+
+  .weave-button-toggle__segment {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--weave-button-toggle-icon-gap);
+    border: 0;
+    border-left: 1px solid var(--weave-button-toggle-border);
+    background: transparent;
+    color: var(--weave-button-toggle-text);
+    font-size: var(--weave-button-toggle-font-size);
+    font-weight: var(--weave-button-toggle-weight);
+    padding: var(--weave-button-toggle-padding-y) var(--weave-button-toggle-padding-x);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background var(--weave-button-toggle-duration) ease,
+      color var(--weave-button-toggle-duration) ease;
+  }
+
+  .weave-button-toggle__segment:first-child {
+    border-left: 0;
+  }
+
+  .weave-button-toggle__segment:hover {
+    background: var(--weave-button-toggle-hover);
+  }
+
+  .weave-button-toggle__segment:focus-visible {
+    @include helpers.focus-ring;
+    outline-offset: -2px; // ring sits inside the hairline container
+  }
+
+  /* Selected — the accent-free ink fill (state via native ARIA attr, not a class). */
+  .weave-button-toggle__segment[aria-checked='true'],
+  .weave-button-toggle__segment[aria-pressed='true'] {
+    background: var(--weave-button-toggle-selected-background);
+    color: var(--weave-button-toggle-selected-text);
+  }
+
+  .weave-button-toggle__segment[disabled] {
+    color: var(--weave-button-toggle-disabled-text);
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,25 @@
+// button-toggle — 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'),
+    selected-background: ref.ref('color.ink'),
+    selected-text: ref.ref('color.canvas'),
+    disabled-text: ref.ref('color.sub'),
+  ),
+  size: (
+    radius: ref.ref('shape.radius'),
+    padding-x: 12px,
+    padding-y: 7px,
+    // Gap between a segment's optional leading icon and its label.
+    icon-gap: 6px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    font-size: 13px,
+    weight: 600,
+  ),
+);

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

@@ -0,0 +1,15 @@
+// Card — a surface panel. Behavior lives in card.ts (just a container + class forward);
+// this is the visual. Keyline: surface bg, 1px line border, radius 4px, NO shadow.
+//
+// The card is a vertical stack; parts are the class contract the consumer composes:
+//   __media   full-bleed image slot (bleeds past the card padding, clipped to radius)
+//   __title   heading row
+//   __body    text
+//   __actions text-button row (one typically a --marked Button)
+// --interactive adds a hover tint (make it actually clickable by wrapping a link/button).
+//
+// 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/card/_styles.scss

@@ -0,0 +1,68 @@
+// card — styles() mixin (class rules). Forwarded by ./_index.scss.
+
+@mixin styles() {
+  .weave-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--weave-card-gap);
+    padding: var(--weave-card-padding);
+    background: var(--weave-card-background);
+    border: 1px solid var(--weave-card-border);
+    border-radius: var(--weave-card-radius);
+    overflow: hidden; // clip the full-bleed media to the radius
+    color: var(--weave-card-body-text);
+
+    @content;
+  }
+
+  .weave-card--interactive {
+    cursor: pointer;
+    transition: background var(--weave-card-duration) ease;
+  }
+
+  .weave-card--interactive:hover {
+    background: var(--weave-card-hover);
+  }
+
+  /* Media — bleeds to the card edges (cancels the padding) and to the top. */
+  .weave-card__media {
+    margin: calc(-1 * var(--weave-card-padding)) calc(-1 * var(--weave-card-padding)) 0;
+  }
+
+  .weave-card__media > *,
+  .weave-card__media img {
+    display: block;
+    width: 100%;
+  }
+
+  .weave-card__title {
+    margin: 0;
+    font-size: var(--weave-card-title-size);
+    font-weight: var(--weave-card-title-weight);
+    letter-spacing: -0.02em;
+    color: var(--weave-card-title-text);
+  }
+
+  .weave-card__body {
+    margin: 0;
+    font-size: var(--weave-card-body-size);
+    line-height: var(--weave-card-body-line-height);
+    color: var(--weave-card-body-text);
+  }
+
+  /* Secondary/meta text inside a card. */
+  .weave-card__meta {
+    font-size: var(--weave-card-body-size);
+    color: var(--weave-card-meta-text);
+  }
+
+  /* Actions sink to the bottom: in an equal-height row the content area takes the
+     slack and the action row stays pinned to the card's bottom edge (no dead gap
+     below it). When the card is only as tall as its content, `auto` collapses to 0. */
+  .weave-card__actions {
+    display: flex;
+    gap: var(--weave-card-actions-gap);
+    align-items: center;
+    margin-top: auto;
+  }
+}

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

@@ -0,0 +1,26 @@
+// card — design tokens (schema). Forwarded by ./_index.scss.
+@use '../../ref' as ref;
+
+$tokens: (
+  color: (
+    background: ref.ref('color.surface'),
+    border: ref.ref('color.line'),
+    hover: ref.ref('color.field'),
+    title-text: ref.ref('color.ink'),
+    body-text: ref.ref('color.ink'),
+    meta-text: ref.ref('color.sub'),
+  ),
+  size: (
+    radius: ref.ref('shape.radius'),
+    padding: 16px,
+    gap: 10px,
+    actions-gap: 8px,
+    duration: ref.ref('motion.fast'),
+  ),
+  typography: (
+    title-size: 15px,
+    title-weight: 600,
+    body-size: 13px,
+    body-line-height: 1.5,
+  ),
+);

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

@@ -0,0 +1,13 @@
+// Checkbox — a native `<input type=checkbox>` with the Weave visual. Behavior lives in
+// checkbox.ts (two-way value + forms control binding + tri-state); this is the visual.
+//
+// A 20px box: off = transparent + 1.5px border, on = accent fill + a white ✓ (a rotated
+// border tick via `::after`), indeterminate = a mixed dash (`::before`). State is the
+// NATIVE input pseudo (`:checked` / `:indeterminate` / `:focus-visible` / `:disabled`),
+// read off the visually-hidden input by the adjacent `__box` — no state 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';