@mhmo91/schmancy 0.10.39 → 0.10.40

package/dist/skills/SKILL.md

@@ -171,6 +171,10 @@ See `layout.md` for the full shell pattern with rail + content area.
 
 A web-component host that establishes `inline-flex` layout declares `flex-shrink: 0` in its `:host` block so it preserves its intrinsic content size regardless of the flex container it lands in.
 
+### DIRECTIVE_TRANSITION_TRACKS_PREV_VALUE
+
+A Lit directive that gates an effect on a value transition stores the previous value in a private field and compares the incoming value against it in `update()`, firing the effect only when the two differ.
+
 ## Workflow
 
 1. User describes a UI task.

package/dist/skills/chips.md

@@ -1,6 +1,46 @@
 # Chips
 
-> Four chip types: filter (toggleable), input (removable), suggestion (action), assist (action + elevated). Filter chips have embedded `magnetic` directive and selection glow.
+> Four chip types: filter (toggleable), input (removable), suggestion (action), assist (action + elevated). Filter chips have embedded `magnetic` directive and selection glow. The `schmancy-chips` **container** wraps a set of chips, owns their selection state, and lays them out as one horizontally-scrolling row (or a wrapping grid).
+
+## Container — `schmancy-chips`
+
+A form-associated container (`SchmancyFormField`: `name`, `required`, `disabled`, `hint`, `checkValidity()`, FormData participation). Slot `<schmancy-filter-chip>` children with **only** `.value` + label — the container drives each child's `selected` from its own `value`, so children carry no `?selected` and no per-chip `@change`. This is the primary entry point; reach for a bare `<schmancy-filter-chip>` only outside a selection group.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string \| string[]` | `''` / `[]` | Selected id (single mode) or ids (multi mode). |
+| `values` | `string[]` | `[]` | Typed alias for `value` in multi mode. |
+| `multi` | `boolean` | `false` | `true` → multiple chips selectable; `value` is `string[]`. |
+| `wrap` | `boolean` | `false` | `false` → **single row, horizontal scroll** (internal `<schmancy-scroll direction="horizontal">`). `true` → multi-row wrap, vertical scroll. |
+| `justify` | `'start' \| 'center' \| 'end'` | `'start'` | Main-axis alignment. |
+| `required` | `boolean` | `false` | Single mode: deselecting the chosen chip is ignored (a value is mandatory). |
+
+| Event | Detail | Fires on |
+|-------|--------|----------|
+| `change` | `{ value: string \| string[] }` | **User interaction only** — child chip toggled. NOT emitted on a programmatic `.value` set, so no `CONTROLLED_VALUE_ECHO_IS_NOT_INTENT` guard is needed. |
+
+Single mode (`multi` false): selecting a chip sets `value` to its id; clicking the selected chip deselects → `change` with `value: ''` (unless `required`). Multi mode: each toggle adds/removes the id from the array.
+
+**Host sizing — required for horizontal overscroll.** `:host` is `width: fit-content`, so by default the container hugs its chips and never scrolls. Constrain the host to trigger the single-row scroll: `class="w-full"` standalone, or `class="flex-1 min-w-0"` as a flex-row item beside other controls.
+
+```html
+<!-- single-select, one horizontally-scrolling row -->
+<schmancy-chips
+  class="w-full"
+  .value=${selectedId ?? ''}
+  @change=${(e: CustomEvent<{ value: string }>) =>
+    pick(e.detail.value || null)}
+>
+  ${repeat(items, i => i.id, i => html`
+    <schmancy-filter-chip .value=${i.id}>${i.label}</schmancy-filter-chip>`)}
+</schmancy-chips>
+
+<!-- multi-select, wrapping grid -->
+<schmancy-chips multi wrap required .value=${tags} @change=${onTags}>
+  ${repeat(opts, o => o.id, o => html`
+    <schmancy-filter-chip .value=${o.id}>${o.name}</schmancy-filter-chip>`)}
+</schmancy-chips>
+```
 
 ## Chip Types
 

package/dist/skills/schmancy/SKILL.md

@@ -171,6 +171,10 @@ See `layout.md` for the full shell pattern with rail + content area.
 
 A web-component host that establishes `inline-flex` layout declares `flex-shrink: 0` in its `:host` block so it preserves its intrinsic content size regardless of the flex container it lands in.
 
+### DIRECTIVE_TRANSITION_TRACKS_PREV_VALUE
+
+A Lit directive that gates an effect on a value transition stores the previous value in a private field and compares the incoming value against it in `update()`, firing the effect only when the two differ.
+
 ## Workflow
 
 1. User describes a UI task.

package/dist/skills/schmancy/chips.md

@@ -1,6 +1,46 @@
 # Chips
 
-> Four chip types: filter (toggleable), input (removable), suggestion (action), assist (action + elevated). Filter chips have embedded `magnetic` directive and selection glow.
+> Four chip types: filter (toggleable), input (removable), suggestion (action), assist (action + elevated). Filter chips have embedded `magnetic` directive and selection glow. The `schmancy-chips` **container** wraps a set of chips, owns their selection state, and lays them out as one horizontally-scrolling row (or a wrapping grid).
+
+## Container — `schmancy-chips`
+
+A form-associated container (`SchmancyFormField`: `name`, `required`, `disabled`, `hint`, `checkValidity()`, FormData participation). Slot `<schmancy-filter-chip>` children with **only** `.value` + label — the container drives each child's `selected` from its own `value`, so children carry no `?selected` and no per-chip `@change`. This is the primary entry point; reach for a bare `<schmancy-filter-chip>` only outside a selection group.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string \| string[]` | `''` / `[]` | Selected id (single mode) or ids (multi mode). |
+| `values` | `string[]` | `[]` | Typed alias for `value` in multi mode. |
+| `multi` | `boolean` | `false` | `true` → multiple chips selectable; `value` is `string[]`. |
+| `wrap` | `boolean` | `false` | `false` → **single row, horizontal scroll** (internal `<schmancy-scroll direction="horizontal">`). `true` → multi-row wrap, vertical scroll. |
+| `justify` | `'start' \| 'center' \| 'end'` | `'start'` | Main-axis alignment. |
+| `required` | `boolean` | `false` | Single mode: deselecting the chosen chip is ignored (a value is mandatory). |
+
+| Event | Detail | Fires on |
+|-------|--------|----------|
+| `change` | `{ value: string \| string[] }` | **User interaction only** — child chip toggled. NOT emitted on a programmatic `.value` set, so no `CONTROLLED_VALUE_ECHO_IS_NOT_INTENT` guard is needed. |
+
+Single mode (`multi` false): selecting a chip sets `value` to its id; clicking the selected chip deselects → `change` with `value: ''` (unless `required`). Multi mode: each toggle adds/removes the id from the array.
+
+**Host sizing — required for horizontal overscroll.** `:host` is `width: fit-content`, so by default the container hugs its chips and never scrolls. Constrain the host to trigger the single-row scroll: `class="w-full"` standalone, or `class="flex-1 min-w-0"` as a flex-row item beside other controls.
+
+```html
+<!-- single-select, one horizontally-scrolling row -->
+<schmancy-chips
+  class="w-full"
+  .value=${selectedId ?? ''}
+  @change=${(e: CustomEvent<{ value: string }>) =>
+    pick(e.detail.value || null)}
+>
+  ${repeat(items, i => i.id, i => html`
+    <schmancy-filter-chip .value=${i.id}>${i.label}</schmancy-filter-chip>`)}
+</schmancy-chips>
+
+<!-- multi-select, wrapping grid -->
+<schmancy-chips multi wrap required .value=${tags} @change=${onTags}>
+  ${repeat(opts, o => o.id, o => html`
+    <schmancy-filter-chip .value=${o.id}>${o.name}</schmancy-filter-chip>`)}
+</schmancy-chips>
+```
 
 ## Chip Types
 

package/dist/{src-8VJ7eluk.js → src-Dmqjtcmp.js}

@@ -4,10 +4,10 @@ import { S as n, b as r, x as i } from "./area-KVDzhT4s.js";
 import "./state-CnZCDMT0.js";
 import "./audio-D3gnp15Y.js";
 import "./autocomplete-DWiEqlQf.js";
-import { S as a } from "./directives-Bfm1lkoy.js";
+import { S as a } from "./directives-BvRTjCFa.js";
 import { n as o } from "./theme.service-7VkM-hVf.js";
 import { o as s } from "./overlay.service-BDLi0p5M.js";
-import "./boat-fqodYt2n.js";
+import "./boat-BeqA9_ms.js";
 import "./busy-enYCTssB.js";
 import "./button.js";
 import "./card-BHTz1GwB.js";
@@ -29,7 +29,7 @@ import "./input.js";
 import "./radio-group-AHLvrN8O.js";
 import "./range.js";
 import { t as c } from "./theme.interface-odQEpZZH.js";
-import "./select-Cawz88lG.js";
+import "./select-CGBsblDA.js";
 import "./switch.js";
 import "./textarea-MPyrMi-S.js";
 import "./form.js";