npm - @adia-ai/web-components - Versions diffs - 0.8.6 → 0.8.8 - Mend

@adia-ai/web-components 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/patterns/forms-conditional-and-autocomplete/forms-conditional-and-autocomplete.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Conditional fields &amp; address autocomplete (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/divider/divider.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/grid/grid.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/divider/divider.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/grid/grid.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./forms-conditional-and-autocomplete.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load forms-conditional-and-autocomplete.examples.html — ${err.message}</p>`;
+      console.error('[forms-conditional-and-autocomplete.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/inline-dialog/inline-dialog.examples.html ADDED Viewed

@@ -0,0 +1,143 @@
+<header>
+  <div>
+    <h1>Inline dialog</h1>
+    <div data-actions>
+      <tag-ui size="sm">popover-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
+    </div>
+  </div>
+  <p>Anchored, non-modal dialog — popover-ui content given dialog semantics (heading + body + actions). Atlassian-style affordance for in-context decisions that don't warrant blocking the page. Distinct from <a href="/site/components/modal">modal-ui</a> (page-blocking, focus-trapped, role=dialog) and <a href="/site/components/popover">popover-ui</a> bare (general anchored surface).</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>Confirm-in-context micro-decisions: rename a row, set a status, pick a label, schedule a thing. The decision belongs <em>here</em> (anchored to the trigger), not <em>over there</em> (centered modal). Three signals it's the right pattern: the action is reversible, the user must still see the surrounding context, and the form is one to three fields. Anything bigger goes in a drawer or modal; anything smaller is a menu-ui or inline edit.</p>
+</section>
+<section data-section data-property="rename">
+  <h2 variant="section">Rename in context</h2>
+  <p data-note>Click "Rename" → popover-ui opens anchored to the trigger, carrying a card-ui with a heading, single input, and Cancel + Save actions. The rest of the page stays interactive (no backdrop, no focus trap). Click outside or press Escape to dismiss.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="rename row dialog">
+      <row-ui gap="3" align="center" style="padding: var(--a-space-4); border: 1px solid var(--md-sys-color-neutral-outline); border-radius: var(--a-radius-md); background: var(--md-sys-color-neutral-background);">
+        <icon-ui name="file-text" size="sm"></icon-ui>
+        <text-ui strong style="flex: 1;">Q4-budget-draft.xlsx</text-ui>
+        <popover-ui data-chunk="inline-dialog-rename" placement="bottom-start">
+          <button-ui slot="trigger" text="Rename" variant="ghost" size="sm" icon-leading="pencil-simple"></button-ui>
+          <card-ui slot="content" style="min-width: 320px;">
+            <header>
+              <span slot="heading" variant="section">Rename file</span>
+            </header>
+            <section>
+              <field-ui label="New name">
+                <input-ui name="filename" value="Q4-budget-draft.xlsx"></input-ui>
+              </field-ui>
+            </section>
+            <footer divider>
+              <button-ui slot="action" text="Cancel" variant="ghost" data-popover-close></button-ui>
+              <button-ui slot="action" text="Save" variant="primary"></button-ui>
+            </footer>
+          </card-ui>
+        </popover-ui>
+      </row-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="status">
+  <h2 variant="section">Set status</h2>
+  <p data-note>Status-picker pattern: trigger shows the current state, popover carries a select + a short note field. Closes on save; the trigger updates to reflect the new state.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="status picker dialog">
+      <row-ui gap="3" align="center" style="padding: var(--a-space-4); border: 1px solid var(--md-sys-color-neutral-outline); border-radius: var(--a-radius-md); background: var(--md-sys-color-neutral-background);">
+        <text-ui strong style="flex: 1;">PR #3247 — Add cursor pagination</text-ui>
+        <popover-ui data-chunk="inline-dialog-status" placement="bottom-start">
+          <button-ui slot="trigger" variant="outline" size="sm">
+            <tag-ui slot="leading" size="sm" variant="warning">In review</tag-ui>
+            <icon-ui slot="trailing" name="caret-down" size="sm"></icon-ui>
+          </button-ui>
+          <card-ui slot="content" style="min-width: 320px;">
+            <header>
+              <span slot="heading" variant="section">Change status</span>
+            </header>
+            <section>
+              <col-ui gap="3">
+                <field-ui label="Status">
+                  <select-ui name="status">
+                    <option value="open">Open</option>
+                    <option value="review" selected>In review</option>
+                    <option value="approved">Approved</option>
+                    <option value="merged">Merged</option>
+                  </select-ui>
+                </field-ui>
+                <field-ui label="Note (optional)">
+                  <input-ui name="note" placeholder="Why the change?"></input-ui>
+                </field-ui>
+              </col-ui>
+            </section>
+            <footer divider>
+              <button-ui slot="action" text="Cancel" variant="ghost" data-popover-close></button-ui>
+              <button-ui slot="action" text="Update" variant="primary"></button-ui>
+            </footer>
+          </card-ui>
+        </popover-ui>
+      </row-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="schedule">
+  <h2 variant="section">Schedule send</h2>
+  <p data-note>Two-field scheduling popover anchored to a split-button (primary action + caret for alternatives). Date + time pickers fit in the popover; the primary send button stays interactive while the user is choosing.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="schedule send dialog">
+      <row-ui gap="0" align="center" style="padding: var(--a-space-4); background: var(--md-sys-color-neutral-background);">
+        <button-ui text="Send now" variant="primary" size="sm"></button-ui>
+        <popover-ui data-chunk="inline-dialog-schedule" placement="bottom-start">
+          <button-ui slot="trigger" icon="caret-down" variant="primary" size="sm" aria-label="More send options"></button-ui>
+          <card-ui slot="content" style="min-width: 320px;">
+            <header>
+              <span slot="heading" variant="section">Schedule send</span>
+              <text-ui slot="description" color="subtle">Picks the next available slot in your timezone</text-ui>
+            </header>
+            <section>
+              <col-ui gap="3">
+                <field-ui label="Date">
+                  <input-ui type="date" name="date" value="2026-03-15"></input-ui>
+                </field-ui>
+                <field-ui label="Time">
+                  <input-ui type="time" name="time" value="09:00"></input-ui>
+                </field-ui>
+              </col-ui>
+            </section>
+            <footer divider>
+              <button-ui slot="action" text="Cancel" variant="ghost" data-popover-close></button-ui>
+              <button-ui slot="action" text="Schedule" variant="primary" icon-leading="clock"></button-ui>
+            </footer>
+          </card-ui>
+        </popover-ui>
+      </row-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>popover-ui carries the anchor + dismiss</strong> — Popover API handles outside-click + Escape; you don't wire it. Default <code>placement="bottom-start"</code> orients the dialog LtR (popover's left edge anchored to the trigger's left edge, growing rightward); the browser's <code>position-try-fallbacks</code> auto-flips to <code>bottom-end</code> when the popover would overflow the viewport.</li>
+    <li><strong>card-ui inside the content slot</strong> — gives you the heading + body + footer structure for free. Keep <code>min-width</code> ≥ 280 px so the form fits without wrap; cap at ~480 px.</li>
+    <li><strong>Cancel button gets <code>data-popover-close</code></strong> — the popover's built-in dismiss handler closes on click without further wiring.</li>
+    <li><strong>Non-modal means non-blocking</strong> — no backdrop, no focus trap, no aria-modal. Page interaction continues; the user can scroll, hover other rows, even open another popover.</li>
+    <li><strong>One to three fields max</strong> — if the form grows beyond three fields, the popover-as-dialog stops working (vertical overflow, ambiguous "where am I?"). Promote to <code>drawer-ui</code> or <code>modal-ui</code>.</li>
+    <li><strong>Primary action is the form verb</strong> — "Rename", "Save", "Schedule" — never "OK". The pattern's whole point is to make the decision tangible in context.</li>
+  </ul>
+</section>
+<section data-section data-property="cross-references">
+  <h2 variant="section">Cross-references</h2>
+  <ul>
+    <li><a href="/site/components/popover">popover-ui</a> · <a href="/site/components/card">card-ui</a> · <a href="/site/components/field">field-ui</a> — primitives composed here.</li>
+    <li><a href="/site/components/modal">modal-ui</a> — page-blocking dialog alternative (use when the decision is irreversible or affects unrelated context).</li>
+    <li><a href="/site/components/drawer">drawer-ui</a> — edge-anchored multi-field form alternative (use when the form has > 3 fields).</li>
+    <li><a href="/site/components/menu">menu-ui</a> — popover-ui specialization for action lists (use instead when content is a list of items, not a form).</li>
+  </ul>
+</section>

package/patterns/inline-dialog/inline-dialog.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Inline dialog (pattern) — AdiaUI</title>
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/popover/popover.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/popover/popover.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./inline-dialog.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load inline-dialog.examples.html — ${err.message}</p>`;
+      console.error('[inline-dialog.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/kanban-board/kanban-board.examples.html ADDED Viewed

@@ -0,0 +1,224 @@
+<header>
+  <div>
+    <h1>Kanban board &amp; sortable lists</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">grid-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui>
+    </div>
+  </div>
+  <p>The drag-to-reorder + drag-between-columns surface. Two patterns share the same primitives: a single sortable list (priority queue, playlist) and a multi-column kanban (status swimlanes, sprint board, pipeline). Both compose <code>card-ui</code>s in containers with HTML5 drag-and-drop wiring.</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    When the order or column-membership of items is itself the
+    state. A sorted list communicates priority; a kanban
+    communicates which stage of a workflow each card is in.
+    Reach for these when status is <em>visible</em> on the surface,
+    not buried in a column of a table.
+  </p>
+</section>
+<section data-section data-property="sortable-list">
+  <h2 variant="section">Sortable list — drag handle to reorder</h2>
+  <p data-note>Single-column list where the row order is the data. Each row carries a leading drag handle (`dots-six-vertical`), the body content, and trailing meta. Hover reveals the handle; drag picks up the row with a shadow + ghost.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="sortable list">
+      <card-ui data-chunk="sortable-list" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Sprint priority</span>
+          <text-ui slot="description" color="subtle">Drag to reorder · 4 items</text-ui>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui>
+              <row-ui gap="2" align="center">
+                <button-ui icon="dots-six-vertical" variant="ghost" size="sm" aria-label="Drag to reorder"></button-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Ship the new auth flow</text-ui>
+                  <text-ui color="subtle" size="sm">Owner: Jordan · Due Friday</text-ui>
+                </col-ui>
+                <tag-ui size="sm" variant="warning">P0</tag-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui>
+              <row-ui gap="2" align="center">
+                <button-ui icon="dots-six-vertical" variant="ghost" size="sm" aria-label="Drag to reorder"></button-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Migrate dashboard tokens</text-ui>
+                  <text-ui color="subtle" size="sm">Owner: Avery · Due next week</text-ui>
+                </col-ui>
+                <tag-ui size="sm">P1</tag-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui>
+              <row-ui gap="2" align="center">
+                <button-ui icon="dots-six-vertical" variant="ghost" size="sm" aria-label="Drag to reorder"></button-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Add Storybook coverage for primitives</text-ui>
+                  <text-ui color="subtle" size="sm">Owner: Sam · No due date</text-ui>
+                </col-ui>
+                <tag-ui size="sm">P2</tag-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui>
+              <row-ui gap="2" align="center">
+                <button-ui icon="dots-six-vertical" variant="ghost" size="sm" aria-label="Drag to reorder"></button-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Investigate slow startup</text-ui>
+                  <text-ui color="subtle" size="sm">Owner: Riley · Backlog</text-ui>
+                </col-ui>
+                <tag-ui size="sm">P2</tag-ui>
+              </row-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="kanban">
+  <h2 variant="section">Kanban board — columns by status</h2>
+  <p data-note>Multi-column grid where each column is a status (To do · In progress · In review · Done). Cards drag horizontally between columns + vertically within. Column header shows count + collapse; per-card chrome shows the assignee avatar + tags.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="kanban board">
+      <grid-ui data-chunk="kanban-board" columns="4" gap="3">
+        <card-ui>
+          <header>
+            <span slot="heading">To do</span>
+            <text-ui slot="description" color="subtle">3</text-ui>
+          </header>
+          <section bleed>
+            <col-ui gap="2" padding="2">
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>Audit kanban accessibility</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Sam Park"></avatar-ui>
+                    <tag-ui size="sm">P1</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>Drag handle hit-target</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Avery Chen"></avatar-ui>
+                    <tag-ui size="sm">P2</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>Empty-column copy</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                    <tag-ui size="sm">P2</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+            </col-ui>
+          </section>
+        </card-ui>
+        <card-ui>
+          <header>
+            <span slot="heading">In progress</span>
+            <text-ui slot="description" color="subtle">2</text-ui>
+          </header>
+          <section bleed>
+            <col-ui gap="2" padding="2">
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>Auth flow rebuild</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                    <tag-ui size="sm" variant="warning">P0</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>OKLCH ramp lint rule</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Kim Granlund"></avatar-ui>
+                    <tag-ui size="sm">P1</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+            </col-ui>
+          </section>
+        </card-ui>
+        <card-ui>
+          <header>
+            <span slot="heading">In review</span>
+            <text-ui slot="description" color="subtle">1</text-ui>
+          </header>
+          <section bleed>
+            <col-ui gap="2" padding="2">
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong>v0.0.27 release notes</text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Riley Tan"></avatar-ui>
+                    <tag-ui size="sm">P1</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+            </col-ui>
+          </section>
+        </card-ui>
+        <card-ui>
+          <header>
+            <span slot="heading">Done</span>
+            <text-ui slot="description" color="subtle">8</text-ui>
+          </header>
+          <section bleed>
+            <col-ui gap="2" padding="2">
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong color="subtle"><s>Safari @scope sweep</s></text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Kim Granlund"></avatar-ui>
+                    <tag-ui size="sm" variant="success">Done</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+              <card-ui raw style="padding: 0.75rem;">
+                <section>
+                  <text-ui strong color="subtle"><s>Toast top-layer channel</s></text-ui>
+                  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
+                    <avatar-ui size="xs" text="Sam Park"></avatar-ui>
+                    <tag-ui size="sm" variant="success">Done</tag-ui>
+                  </row-ui>
+                </section>
+              </card-ui>
+            </col-ui>
+          </section>
+        </card-ui>
+      </grid-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Drag handle is keyboard-accessible</strong> — focus the handle, then arrow-up/down to move within a column, arrow-left/right to move between columns. Without keyboard reorder, the surface is not usable.</li>
+    <li><strong>Column count is bounded</strong> — kanban breaks down past ~6 columns; horizontal scroll is a smell, not a fix. Collapse or paginate columns past the limit.</li>
+    <li><strong>WIP limits live in the column header</strong> — if a stage has a max ("In progress · 5 of 8"), surface the threshold; over-limit columns get a warning tint on the count.</li>
+    <li><strong>Done columns scroll, not grow</strong> — completed work piles up. Cap the visible Done column with "Show 14 more"; full archive lives elsewhere.</li>
+    <li><strong>Empty columns need copy, not a void</strong> — "Drop cards here" or the column's purpose ("Items waiting on a reviewer") makes a fresh board legible. Empty grids look broken.</li>
+    <li><strong>Persist optimistically, reconcile on conflict</strong> — drag should land instantly; on server reject (concurrent move), animate back with a toast. No spinner during the drag.</li>
+  </ul>
+</section>
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/grid">grid-ui</a> · <a href="/site/components/card">card-ui</a> — layout primitives.</li>
+    <li><a href="/site/components/list">list-ui</a> · <a href="/site/components/list-item">list-item-ui</a> — sortable-list anatomy.</li>
+    <li><a href="/site/patterns/filter-bar">filter-bar</a> — frequent companion (filter the cards before reordering).</li>
+    <li><a href="/site/patterns/bulk-action-toolbar">bulk-action-toolbar</a> — sibling for status-change without drag (multi-select then update).</li>
+  </ul>
+</section>

package/patterns/kanban-board/kanban-board.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Kanban board &amp; sortable lists (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/avatar/avatar.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/grid/grid.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/avatar/avatar.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/grid/grid.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./kanban-board.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load kanban-board.examples.html — ${err.message}</p>`;
+      console.error('[kanban-board.html]', err);
+    }
+  </script>
+</body>
+</html>