@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/design-system/components/Switch/style.css

@@ -0,0 +1,31 @@
+/* ---- Switch: North's anatomy (0.5.0, D1; style1.css:2049): a filled track, a round thumb with a soft shade, navy when
+   on. The off track is North's warm grey taken to the 3:1 a control asks (#7F7F7F), so off reads as a control and not as
+   nothing; the thumb's side and the label say the state too. 36 by 20 with a 16 thumb; --sm is North's 28 by 16 with a
+   12 thumb, for a dense list. The track carries no border, so the thumb sits 2 px in on every side (the 0.4.0 one sat
+   2 / 1). Track over the hover beat, thumb over the settle beat on the grow curve. ---- */
+.ws-switch { --ws-switch-w: var(--ws-control-h-md); --ws-switch-h: var(--ws-icon-lg); --ws-switch-thumb: var(--ws-icon); --ws-switch-line: calc(var(--space-md) + var(--space-xxs)); position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-xs-plus); width: fit-content; max-width: 100%; padding: var(--space-xxs) 0; cursor: pointer; }
+.ws-switch input { position: absolute; width: var(--ws-line); height: var(--ws-line); margin: 0; opacity: 0; }
+.ws-switch__track { position: relative; flex-shrink: 0; width: var(--ws-switch-w); height: var(--ws-switch-h); margin-top: calc((var(--ws-switch-line) - var(--ws-switch-h)) / 2); border: 0; border-radius: var(--radius-full); background: var(--ws-control-off); }
+.ws-switch__thumb { position: absolute; top: calc((var(--ws-switch-h) - var(--ws-switch-thumb)) / 2); left: calc((var(--ws-switch-h) - var(--ws-switch-thumb)) / 2); width: var(--ws-switch-thumb); height: var(--ws-switch-thumb); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 18%, transparent); }
+.ws-switch input:checked + .ws-switch__track { background: var(--color-text-heading); }
+.ws-switch input:checked + .ws-switch__track .ws-switch__thumb { transform: translateX(calc(var(--ws-switch-w) - var(--ws-switch-h))); background: var(--ws-on-act); }
+.ws-switch input:focus-visible + .ws-switch__track { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+/* Hover, on a mouse only, as Checkbox and Radio answer it: the off track a step toward the navy, the on track North's
+   brighter act (--ws-act-hover). A colour change, nothing moves. */
+@media (hover: hover) {
+  .ws-switch:not(.ws-switch--disabled):hover input:not(:checked, :disabled) + .ws-switch__track { background-color: color-mix(in srgb, var(--ws-control-off) 85%, var(--color-text-heading)); }
+  .ws-switch:not(.ws-switch--disabled):hover input:checked:not(:disabled) + .ws-switch__track { background-color: var(--ws-act-hover); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ws-switch__track { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-switch__thumb { transition: transform var(--ws-duration-settle) var(--ws-ease-grow), background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+}
+.ws-switch--sm { --ws-switch-w: var(--ws-control-h-sm); --ws-switch-h: var(--space-md); --ws-switch-thumb: var(--ws-icon-sm); }
+.ws-switch__words { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3xs); }
+.ws-switch__label { font-size: var(--ws-text-body); line-height: var(--ws-switch-line); color: var(--color-text-heading); font-weight: 500; }
+.ws-switch--disabled, .ws-switch:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
+/* Saving, then saved: a word beside the label, never a spinner on the thumb. */
+.ws-switch__status { display: inline-flex; align-items: center; gap: var(--space-xxs); font-size: var(--ws-text-dense); line-height: var(--space-md); }
+.ws-switch__saved { color: var(--ws-word-positive); }
+.ws-switch__saving { color: var(--color-text-interactive); }
+@media (pointer: coarse) { .ws-switch { padding-block: calc((var(--ws-touch) - var(--ws-switch-line)) / 2); } }

package/design-system/components/Table/README.md

@@ -1,106 +1,177 @@
-Rows of records inside one card, read down its columns: a header of muted labels, dense rows, a sticky first column,
-selection, row acts and paging.
+Rows of records inside one card, read down its columns: a head of muted labels, 40 px rows, a first column that stays
+while the rest scroll, numbers in fixed right-aligned columns, totals in the foot, columns that fold away by priority and
+a phone fold. This is the whole wide-table pattern; build every records table from it.
 
 ## Use it when
 
 - The question is about columns (comparing scores, stages or dates across many people or records), not about reading
   each item as a thing on its own.
-- A list is wide enough that a plain list of rows (`.ws-row`) would repeat the same words in every row's layout; a table says each
-  column's meaning once, in its header.
-- Rows need to be selected together for a bulk act, sorted by a column, or paged through a long collection.
+- A list is wide enough that a plain list of rows (`.ws-row`) would repeat the same words in every row's layout; a table
+  says each column's meaning once, in its head.
+- Rows need to be selected together for a bulk act, sorted by a column, totalled, or paged through.
 
 ## Not for
 
 - A list read as individual things (a person, a lead as a whole, a chat card): use rows in a `Card`
   (`08-choosing-components.md`, "Rows vs table").
+- A grid of yes-or-no answers (a question by a source): use `Matrix`.
+- A list of checks with a score each: use `CheckRow`.
 - Ranking people by one number with the rank itself the point: use `Leaderboard`.
 - A history of events: use `Timeline`.
 
 ## Anatomy
 
-- One card (`ws-card`), the table inside it; a wide table scrolls inside the card with the first column sticky, never
-  the page.
-- Header row: 32 px (`--ws-control-h`), 12 px medium muted labels (`--color-text-muted`); a sortable header is itself a
-  button with its label and a 12 px chevron, never a bare clickable cell.
-- Body rows: 40 px (`--ws-row-h-dense`), a hairline between rows (`--ws-edge-slot`).
-- First column: sticky while the table scrolls sideways, 14 px medium navy (`--color-text-heading`), so the row's name
-  is always visible.
-- Numbers: right-aligned, tabular numerals; a change lives in its own column as a `ChangeChip`.
-- A checkbox column: a native checkbox skinned navy when checked, the same shape as the standalone `Checkbox`.
-- Row acts: small ghost `Button`s at the right, always present in the DOM (not inserted on hover), so they are reachable
-  by keyboard and on touch where hover never shows; a hover state that reveals them visually is a nicety layered on top,
-  never the only way to reach them.
-- Row states: hover tints `--ws-surface-sunk`; a selected row keeps the same tint and adds a 2 px navy inset on its
-  left edge (`--ws-focus-inset`'s look, used here as a selection mark rather than a focus ring).
-- Empty: the same card, a sentence and the act that clears it, no separate empty component.
-- Loading: skeleton bars in place of cell content, the header shown at once.
-- Pagination sits in the card's foot (`Pagination`), below the rows.
+- One card (`ws-card ws-table`), the table inside a scroller (`.ws-table__scroll`, always there: it holds the columns
+  and takes the card's corners). A wide table scrolls inside its card, never the page.
+- Every cell: 8 px above and below (`--space-xs`), 12 at the sides (`--space-sm`), one line (`white-space: nowrap`, so
+  a squeezed table scrolls instead of breaking every cell to a word a line). A cell that may wrap takes `ws-table__wrap`
+  (at least 200 wide).
+- The outer cells sit on the card's 20 px edge (`--ws-card-inset`): the first cell's left and the last cell's right, so
+  the table lines up with the card's head, band and pagination.
+- Head: rows at least 40 (`--ws-row-h-dense`), 13 / 18 medium muted labels (`--ws-text-control`, `--color-text-muted`),
+  a 0.5 px line under (`--ws-divider`). It sticks to the top of the scroller once the scroller has a height
+  (`--ws-table-max-h`). A sortable head is a real button (`__sort`) with a 12 px chevron; the sorted column's label
+  turns navy and its `th` carries `aria-sort`. An unsorted column's chevron is dimmed to 0.3 (`--ws-dim`) until it is
+  hovered or focused, so only the sorted column reads as the sort.
+- Body: rows at least 40, a 0.5 px line between them; 14 / 20 body words; the name column (`__name`, a `th scope="row"`)
+  14 / 20 medium navy.
+- First column: it stays while the rest slide under it (with the check column, when there is one). Once the rows have
+  moved, an 8 px shade falls from its edge over them; where the browser has no scroll-driven animations a 0.5 px line
+  stands in for the shade, always.
+- The far edge: while columns are hidden past it, the last 24 px of the rows fade out; the fade lifts when the table
+  reaches its end. A table that fits shows neither cue.
+- Numbers: `__num`, on the `th` and on every cell of the column, right-aligned, tabular, in a fixed column 64 wide
+  (`--wide`: 96, for money). A wider number widens its column; it never truncates.
+- A second line in a cell (`__sub`): 13 / 16 muted, under a name or a figure.
+- Check column (`__check`): a fixed 56 px column (20 + a 24 px target + 12), the skinned `Checkbox` (`ws-check`) on a
+  24 px target, 40 on touch through a hit area.
+- Row acts (`__acts`): small ghost `Button`s at the right, always in the DOM, 4 apart.
+- Totals (`tfoot`): the body's rhythm, a 0.5 px line above, 600 navy; they stay at the foot of a scroller with a height.
+- Pagination sits in the card's foot (`Pagination`), below the scroller.
 
 ## Variants and sizes
 
 | Part | Value |
 | --- | --- |
-| Header height | 32 px |
-| Row height | 40 px (`--ws-row-h-dense`) |
-| Row with an avatar | 48 px (`--ws-row-h`), as in `Leaderboard` |
-| Checkbox column | 36 px wide, left-aligned |
+| Head and body rows | 40 at least, 8 above and below |
+| Outer cells | 20 from the card's edge |
+| Number column | 64 (`--ws-table-num-w`), 96 with `__num--wide` |
+| Check column | 56 (`--ws-table-check-w`) |
+| Sticky shade | 8 px, navy 8 % (`--ws-table-shade`); in dark the card edge (`--ws-edge-card`) fading out, since a dark shade vanishes on the dark ground |
+| Far-edge fade | 24 px |
+| Low-priority columns | fold under a 48rem table |
+| Row acts to More | under a 30rem table |
+| Stuck name, narrow | wraps at 40 % of a table under 30rem |
 
 ## States
 
 - **Default**: as above.
-- **Hover**: `--ws-surface-sunk` across the row, including the sticky first column.
-- **Selected**: `--ws-surface-sunk` plus the 2 px navy inset on the first cell's left edge; several selected rows show a
-  count chip and bulk acts in the card's foot (`10-patterns.md`, "Selection and bulk acts").
-- **Sorted column**: the header's chevron points the sort direction; only one column sorts at a time.
-- **Empty, no matches**: the same card, "Nobody matches your filter", the act that clears it.
-- **Empty, first use**: the same card, a sentence inviting the first record and the act that adds one, in the band.
-- **Loading**: skeleton bars sized to each column's typical content, the header already in place.
-- **Narrow**: columns beyond the first fold behind a "More" act per row (an `IconButton` opening a `Menu` or the row's
-  own detail) rather than letting the table scroll off-screen on a phone.
-- **Touch**: row acts and the checkbox meet the 40 px floor; the sticky column still sticks under a touch scroll.
+- **Hover**: North's faint navy wash (`--ws-hover-faint`) across the row, sticky cells included; nothing moves.
+- **Selected**: `aria-selected="true"` (or `__row--selected`): the sunk cream (`--ws-surface-sunk`) and a 2 px navy mark
+  on the row's left edge, so the state is never colour alone. Where the hairline stands in for the shade, the selected row's
+  stuck name carries both. Several selected rows show a count and the bulk acts in
+  the card's foot (`10-patterns.md`, "Selection and bulk acts").
+- **Sorted**: the column's label navy, its chevron at full strength pointing the way (down for descending); the other
+  sortable heads keep a dimmed chevron; one column sorts at a time.
+- **Scrolled**: the shade on the first column's edge; the fade at the far edge until the end.
+- **Narrow, 48rem**: columns marked `__low` fold away and each row's fold line (`__fold`, under the name, 13 / 16 muted)
+  shows what they held.
+- **Narrow, 30rem**: the row acts fold into one More act (`__more`, a small `IconButton` opening the row's `Menu`), and
+  a name that would push the rest off the card wraps at 40 % of the table (`min-width: 40cqi`), so on a 320 phone the
+  stuck columns leave the sliding ones over 100 px, not a sliver. A name that fits keeps its one line.
+- **Empty, no matches**: the same card, a sentence and the act that clears the filter (`__empty`).
+- **Empty, first use**: the same card, a sentence inviting the first record and the act that adds one.
+- **Loading**: a ghost bar per cell under the shimmer (`__placeholder ws-shimmer`), the head shown at once;
+  still under reduced motion.
+- **Touch**: the check target, the More act and the row acts reach 40, the sort button 24.
 
 ## Behaviour
 
-- Keyboard: a sortable header is a real `<button>`; row acts are real buttons in the DOM at all times, reachable by Tab
-  without a hover; a checkbox is a native input.
-- Pointer: a row tints on hover; clicking a sort header re-sorts; row acts respond to a plain click.
-- Touch: row acts stay visible rather than depending on a hover that touch never fires.
-- Motion: rows cross-fade when a sort or filter changes the set, never a re-stagger (`10-patterns.md`, "Search, filters
-  and sorting").
+- Keyboard: the scroller is a focusable region (`tabindex="0"`, `role="region"` and a label), so arrow keys scroll it;
+  its ring goes round the card, 2 px out (inside, the stuck cells would cover it). A sort head is a real button; row
+  acts are real buttons, reachable without a hover; a checkbox is a native input.
+- Pointer: a row tints on hover; a sort head re-sorts; row acts respond to a plain click.
+- Motion: the hover wash over 200 ms (`--ws-duration-hover`); the edge cues follow the scroll itself, so they are the
+  same with reduced motion. Rows cross-fade when a sort or a filter changes the set, never a re-stagger.
 
 ## Content
 
 - Column labels are short nouns, sentence case, never a question.
-- Numbers are plain, tabular, with their unit in the header only, not repeated in every cell.
+- A number's unit lives in its head ("Price", "Score"), not in every cell.
+- Totals say what they total ("Total, 5 leads").
 - No em dashes.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `columns` | `{ key, label, align?, sortable? }[]` | Column definitions, in order |
+| `columns` | `{ key, label, align?, sortable?, priority?, wide? }[]` | Column definitions, in order; `priority: 'low'` folds under 48rem |
 | `rows` | `Record<string, ReactNode>[]` | The data, one object per row |
+| `totals` | `Record<string, ReactNode>` | The foot row, when the columns add up |
 | `selected` | `string[]` | Selected row ids |
 | `onSort`, `onSelect` | functions | Sort and selection callbacks |
 | `rowActions` | `(row) => ReactNode` | A row's small ghost acts |
+| `maxHeight` | `string` | Sets `--ws-table-max-h`, so the head and totals stay |
 | `pagination` | `PaginationProps` | Rendered in the card's foot |
 
 ## Rules
 
-- **A wide table scrolls inside its card, the first column sticky, never the page** (`08-choosing-components.md`,
-  "Rows vs table").
-- **Row acts are always in the DOM**: hover-to-reveal is cosmetic only, following the system's rule that nothing
-  essential depends on a pointer that touch and the keyboard do not have.
-- **A selected row never changes colour alone**: the navy inset mark travels with the tint, matching the "never a state
-  by colour alone" rule.
-- **Source**: Intentional addition, decided from the system (26 Oct 2026): records with real columns to compare need a
-  grid the first product's own chat-first cards never required (its lists read as rows of things, not columns of
-  facts). Derived from the dense row height, the slot-edge hairline, the sunk hover and selection tint used everywhere,
-  and `Checkbox`'s navy-when-chosen rule.
+- **A wide table scrolls inside its card, the first column staying, never the page** (`08-choosing-components.md`,
+  "Rows vs table"), and it always shows that it scrolls: the shade and the fade.
+- **One content edge per card**: the first and last cells sit on the card's 20 px edge, like its head (K8).
+- **Numbers line up through fixed numeric columns** (North, A4), right-aligned, tabular, the `th` included.
+- **Every row is one line**: a squeezed table scrolls; only a cell marked `__wrap` breaks, and under 30rem the stuck
+  name, which would otherwise leave no room for the columns sliding under it.
+- **A selected row never changes colour alone**: the navy mark travels with the tint.
+- **Row acts are always in the DOM**: hover-to-reveal is cosmetic only.
+- **No clip on the card**: the scroller is the child that rounds; a menu opened from a row opens in the top layer
+  (K9), never inside the scroller.
 
 ## Source
 
-**Derived from**: `--ws-row-h-dense` (40 px, a plain list row) and `--ws-row-h` (48 px, a list row with an avatar),
-`--ws-edge-slot` for the row hairline, `--ws-surface-sunk`/`--ws-focus-inset` for hover and selection, `Checkbox`'s
-navy-when-chosen rule, and `Pagination` for the foot. **Precedent**: an intentional addition decided from the system,
-26 Oct 2026; no card in the first product renders a column-oriented table.
+**Derived from**: the dense row height, the 0.5 px divider (`--ws-divider`, D5), North's hover wash and its fixed
+numeric columns (style1.css 1168, 1001), the K8 audit of Aryan's Revenue OS mockup (sticky head missing, hidden
+columns with no cue, cells 12 in against the card's 20, no vertical padding, no totals), and `Checkbox`.
+**Precedent**: an intentional addition decided from the system, 26 Oct 2026; completed as the wide-table pattern in
+0.5.0 (4 Nov 2026).
+
+## Markup
+
+```html
+<section class="ws-card ws-table" aria-label="Leads">
+  <div class="ws-table__scroll" role="region" aria-label="Leads, scrolls sideways" tabindex="0">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col" class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select all leads"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></th>
+          <th scope="col" class="ws-table__name">Name</th>
+          <th scope="col" class="ws-table__num" aria-sort="descending"><button type="button" class="ws-table__sort">Score <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></th>
+          <th scope="col" class="ws-table__num ws-table__num--wide">Price</th>
+          <th scope="col" class="ws-table__low">Source</th>
+          <th scope="col" class="ws-table__acts"><span class="ws-sr">Acts</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr aria-selected="false">
+          <td class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select Priya Nair"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+          <th scope="row" class="ws-table__name">Priya Nair<span class="ws-table__fold">Zillow</span></th>
+          <td class="ws-table__num">82</td>
+          <td class="ws-table__num ws-table__num--wide">$612,000</td>
+          <td class="ws-table__low">Zillow</td>
+          <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Priya</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Priya Nair"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor"/><circle cx="8" cy="8" r="0.9" fill="currentColor"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor"/></svg></button></td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr><td class="ws-table__check"></td><th scope="row">Total, 1 lead</th><td class="ws-table__num">82</td><td class="ws-table__num ws-table__num--wide">$612,000</td><td class="ws-table__low"></td><td class="ws-table__acts"></td></tr>
+      </tfoot>
+    </table>
+  </div>
+</section>
+```
+
+## Styles
+
+`design-system/components/Table/style.css`, in `bundle.css` and `fello.css`. Light, dark and the navy ground come from
+the tokens (`--color-bg-page`, `--ws-surface-sunk`, `--ws-hover-faint`, `--ws-divider`); a table on another surface
+sets `--ws-table-ground`. The card is a size container named `ws-table`, so it needs the width of its column (a card in
+a shrink-to-fit row collapses: give it a width). The edge cues use scroll-driven animations where the browser has them.

package/design-system/components/Table/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Data" height=552 -->
+<!-- @dsCard group="Data" height=900 -->
 <!doctype html>
 <html>
 <head>
@@ -8,135 +8,169 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
+<div class="ws-stage ws-stage--grey ws-stage--column">
 
-  <div class="ws-stack" style="width: 900px; max-width: 100%;">
-    <span class="ws-muted">900 px: checkbox column, a sortable header, a selected row (navy inset), tabular numbers, acts always in the DOM</span>
+  <div class="ws-stack">
+    <span class="ws-muted">Wide table: check column and the name stay while the rest scroll (a shade on the name's edge once they move, a fade on the far edge while columns are hidden), numbers right-aligned in fixed columns, a sorted column, a selected row, totals in the foot (under 30rem a long name wraps so the sliding columns keep room)</span>
     <section class="ws-card ws-table" aria-label="Leads">
-      <div class="ws-table__scroll">
+      <div class="ws-table__scroll" role="region" aria-label="Leads, scrolls sideways" tabindex="0">
         <table>
           <thead>
             <tr>
-              <th class="ws-table__check"><label class="ws-sr" for="chk-all">Select all</label><input id="chk-all" type="checkbox" aria-label="Select all rows"></th>
-              <th scope="col">Name</th>
+              <th scope="col" class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select all leads"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></th>
+              <th scope="col" class="ws-table__name">Name</th>
               <th scope="col">Stage</th>
-              <th scope="col" class="ws-table__num">
-                <button type="button" class="ws-table__sort" aria-label="Sort by score, ascending">Score
-                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
+              <th scope="col" class="ws-table__num" aria-sort="descending">
+                <button type="button" class="ws-table__sort">Score
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
                 </button>
               </th>
               <th scope="col" class="ws-table__num">Change</th>
+              <th scope="col" class="ws-table__num ws-table__num--wide">
+                <button type="button" class="ws-table__sort">Price
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+                </button>
+              </th>
               <th scope="col">Last call</th>
-              <th scope="col" class="ws-table__num">Acts</th>
+              <th scope="col" class="ws-table__low">Source</th>
+              <th scope="col" class="ws-table__low">Owner</th>
+              <th scope="col" class="ws-table__acts"><span class="ws-sr">Acts</span></th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td class="ws-table__check"><input type="checkbox" aria-label="Select Priya Nair"></td>
-              <td class="ws-table__name">Priya Nair</td>
+              <td class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select Priya Nair"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+              <th scope="row" class="ws-table__name">Priya Nair<span class="ws-table__fold">Zillow, Dana Alvarez</span></th>
               <td><span class="ws-chip ws-chip--needs">New lead</span></td>
               <td class="ws-table__num">82</td>
               <td class="ws-table__num"><span class="ws-change ws-change--up"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12L12 4M6 4h6v6"/></svg>6</span></td>
+              <td class="ws-table__num ws-table__num--wide">$612,000</td>
               <td>Oct 21</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__low">Zillow</td>
+              <td class="ws-table__low">Dana Alvarez</td>
+              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Priya</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Priya Nair"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
             </tr>
-            <tr class="ws-table__row--selected">
-              <td class="ws-table__check"><input type="checkbox" checked aria-label="Select Dana Alvarez"></td>
-              <td class="ws-table__name">Dana Alvarez</td>
+            <tr class="ws-table__row--selected" aria-selected="true">
+              <td class="ws-table__check"><label class="ws-check"><input type="checkbox" checked aria-label="Select Dana Alvarez"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+              <th scope="row" class="ws-table__name">Dana Alvarez<span class="ws-table__fold">Referral, Sam Okafor</span></th>
               <td><span class="ws-chip ws-chip--live">Offer out</span></td>
               <td class="ws-table__num">91</td>
               <td class="ws-table__num"><span class="ws-change ws-change--up"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12L12 4M6 4h6v6"/></svg>3</span></td>
+              <td class="ws-table__num ws-table__num--wide">$1,245,000</td>
               <td>Oct 24</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__low">Referral</td>
+              <td class="ws-table__low">Sam Okafor</td>
+              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Dana</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Dana Alvarez"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
             </tr>
             <tr>
-              <td class="ws-table__check"><input type="checkbox" aria-label="Select Sam Okafor"></td>
-              <td class="ws-table__name">Sam Okafor</td>
+              <td class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select Sam Okafor"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+              <th scope="row" class="ws-table__name">Sam Okafor<span class="ws-table__fold">Open house, Dana Alvarez</span></th>
               <td><span class="ws-chip ws-chip--sunk">Showing booked</span></td>
               <td class="ws-table__num">67</td>
               <td class="ws-table__num"><span class="ws-change ws-change--down"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l8 8M12 6v6H6"/></svg>4</span></td>
+              <td class="ws-table__num ws-table__num--wide">$489,500</td>
               <td>Oct 18</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__low">Open house</td>
+              <td class="ws-table__low">Dana Alvarez</td>
+              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Sam</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Sam Okafor"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
             </tr>
             <tr>
-              <td class="ws-table__check"><input type="checkbox" aria-label="Select Nellie Park"></td>
-              <td class="ws-table__name">Nellie Park</td>
+              <td class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select Nellie Park-Whitcombe"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+              <th scope="row" class="ws-table__name">Nellie Park-Whitcombe<span class="ws-table__sub">Buyer, first home</span><span class="ws-table__fold">Zillow, Jo Whitfield</span></th>
               <td><span class="ws-chip ws-chip--sunk">Follow-up sent</span></td>
-              <td class="ws-table__num">74</td>
+              <td class="ws-table__num">74<span class="ws-table__sub">of 100</span></td>
               <td class="ws-table__num"><span class="ws-change"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h8"/></svg>0</span></td>
+              <td class="ws-table__num ws-table__num--wide">$530,000</td>
               <td>Oct 22</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__low">Zillow</td>
+              <td class="ws-table__low">Jo Whitfield</td>
+              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Nellie</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Nellie Park-Whitcombe"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
             </tr>
             <tr>
-              <td class="ws-table__check"><input type="checkbox" aria-label="Select Marco Diaz"></td>
-              <td class="ws-table__name">Marco Diaz</td>
+              <td class="ws-table__check"><label class="ws-check"><input type="checkbox" aria-label="Select Marco Diaz"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg></span></label></td>
+              <th scope="row" class="ws-table__name">Marco Diaz<span class="ws-table__fold">Website, Sam Okafor</span></th>
               <td><span class="ws-chip ws-chip--needs">New lead</span></td>
               <td class="ws-table__num">58</td>
               <td class="ws-table__num"><span class="ws-change ws-change--up"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12L12 4M6 4h6v6"/></svg>9</span></td>
+              <td class="ws-table__num ws-table__num--wide">$375,000</td>
               <td>Oct 15</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__low">Website</td>
+              <td class="ws-table__low">Sam Okafor</td>
+              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Marco</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Marco Diaz"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
             </tr>
+          </tbody>
+          <tfoot>
             <tr>
-              <td class="ws-table__check"><input type="checkbox" aria-label="Select Jo Whitfield"></td>
-              <td class="ws-table__name">Jo Whitfield</td>
-              <td><span class="ws-chip ws-chip--live">Closed</span></td>
-              <td class="ws-table__num">88</td>
-              <td class="ws-table__num"><span class="ws-change ws-change--up"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12L12 4M6 4h6v6"/></svg>2</span></td>
-              <td>Oct 9</td>
-              <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call</button><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Move</button></td>
+              <td class="ws-table__check"></td>
+              <th scope="row">Total, 5 leads</th>
+              <td></td>
+              <td class="ws-table__num"></td>
+              <td class="ws-table__num"></td>
+              <td class="ws-table__num ws-table__num--wide">$3,251,500</td>
+              <td></td>
+              <td class="ws-table__low"></td>
+              <td class="ws-table__low"></td>
+              <td class="ws-table__acts"></td>
             </tr>
-          </tbody>
+          </tfoot>
         </table>
       </div>
     </section>
   </div>
 
-  <div class="ws-cluster ws-cluster--component ws-cluster--start" style="width: 100%;">
-    <figure class="ws-stack" style="width: 300px;">
-      <span class="ws-muted">480 px: name, stage, score stay; the rest folds into "More" per row (caption)</span>
+  <div class="ws-cluster ws-cluster--component ws-cluster--start">
+    <figure class="ws-stack" style="width: 340px;">
+      <span class="ws-muted">Under 48rem the low-priority columns fold into a line under each name; under 30rem the row acts become one More act</span>
       <section class="ws-card ws-table" aria-label="Leads, narrow">
-        <table>
-          <thead><tr><th scope="col">Name</th><th scope="col">Stage</th><th scope="col" class="ws-table__num">More</th></tr></thead>
-          <tbody>
-            <tr>
-              <td class="ws-table__name">Priya Nair</td>
-              <td><span class="ws-chip ws-chip--needs">New lead</span></td>
-              <td class="ws-table__acts"><button type="button" class="ws-icon-btn" aria-label="More for Priya Nair"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
-            </tr>
-            <tr class="ws-table__row--selected">
-              <td class="ws-table__name">Dana Alvarez</td>
-              <td><span class="ws-chip ws-chip--live">Offer out</span></td>
-              <td class="ws-table__acts"><button type="button" class="ws-icon-btn" aria-label="More for Dana Alvarez"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
-            </tr>
-            <tr>
-              <td class="ws-table__name">Sam Okafor</td>
-              <td><span class="ws-chip ws-chip--sunk">Showing booked</span></td>
-              <td class="ws-table__acts"><button type="button" class="ws-icon-btn" aria-label="More for Sam Okafor"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="ws-table__scroll" role="region" aria-label="Leads, narrow" tabindex="0">
+          <table>
+            <thead><tr><th scope="col" class="ws-table__name">Name</th><th scope="col" class="ws-table__num">Score</th><th scope="col" class="ws-table__low">Source</th><th scope="col" class="ws-table__acts"><span class="ws-sr">Acts</span></th></tr></thead>
+            <tbody>
+              <tr>
+                <th scope="row" class="ws-table__name">Priya Nair<span class="ws-table__fold">Zillow, Oct 21</span></th>
+                <td class="ws-table__num">82</td>
+                <td class="ws-table__low">Zillow</td>
+                <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Priya</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Priya Nair"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
+              </tr>
+              <tr class="ws-table__row--selected" aria-selected="true">
+                <th scope="row" class="ws-table__name">Dana Alvarez<span class="ws-table__fold">Referral, Oct 24</span></th>
+                <td class="ws-table__num">91</td>
+                <td class="ws-table__low">Referral</td>
+                <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Dana</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Dana Alvarez"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
+              </tr>
+              <tr>
+                <th scope="row" class="ws-table__name">Sam Okafor<span class="ws-table__fold">Open house, Oct 18</span></th>
+                <td class="ws-table__num">67</td>
+                <td class="ws-table__low">Open house</td>
+                <td class="ws-table__acts"><button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Call Sam</button><button type="button" class="ws-icon-btn ws-icon-btn--sm ws-table__more" aria-label="More for Sam Okafor"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="0.9" fill="currentColor" stroke="none"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor" stroke="none"/></svg></button></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </section>
     </figure>
 
-    <div class="ws-stack" style="width: 240px;">
-      <span class="ws-muted">Loading: skeleton rows, the head shown at once</span>
+    <div class="ws-stack" style="width: 300px;">
+      <span class="ws-muted">Loading: ghost bars under the shimmer, the head shown at once</span>
       <section class="ws-card ws-table" aria-busy="true" aria-label="Leads, loading">
-        <table>
-          <thead><tr><th scope="col">Name</th><th scope="col">Score</th></tr></thead>
-          <tbody>
-            <tr><td><div class="ws-table__placeholder" style="width: var(--space-6xl);"></div></td><td><div class="ws-table__placeholder" style="width: var(--space-lg);"></div></td></tr>
-            <tr><td><div class="ws-table__placeholder" style="width: calc(var(--space-6xl) + var(--space-md));"></div></td><td><div class="ws-table__placeholder" style="width: var(--space-lg);"></div></td></tr>
-            <tr><td><div class="ws-table__placeholder" style="width: var(--space-5xl);"></div></td><td><div class="ws-table__placeholder" style="width: var(--space-lg);"></div></td></tr>
-          </tbody>
-        </table>
+        <div class="ws-table__scroll">
+          <table>
+            <thead><tr><th scope="col" class="ws-table__name">Name</th><th scope="col" class="ws-table__num">Score</th></tr></thead>
+            <tbody>
+              <tr><td><div class="ws-table__placeholder ws-shimmer" style="width: var(--space-6xl);"></div></td><td class="ws-table__num"><div class="ws-table__placeholder ws-shimmer" style="width: var(--space-lg); margin-left: auto;"></div></td></tr>
+              <tr><td><div class="ws-table__placeholder ws-shimmer" style="width: calc(var(--space-6xl) + var(--space-md));"></div></td><td class="ws-table__num"><div class="ws-table__placeholder ws-shimmer" style="width: var(--space-lg); margin-left: auto;"></div></td></tr>
+              <tr><td><div class="ws-table__placeholder ws-shimmer" style="width: var(--space-5xl);"></div></td><td class="ws-table__num"><div class="ws-table__placeholder ws-shimmer" style="width: var(--space-lg); margin-left: auto;"></div></td></tr>
+            </tbody>
+          </table>
+        </div>
       </section>
     </div>
 
-    <div class="ws-stack" style="width: 240px;">
+    <div class="ws-stack" style="width: 300px;">
       <span class="ws-muted">Empty, no matches: the same card, the act that clears the filter</span>
-      <section class="ws-card ws-table">
+      <section class="ws-card ws-table" aria-label="Leads, no matches">
         <div class="ws-table__empty">
-          <p class="ws-body">Nobody matches "offer out, over 90".</p>
+          <p class="ws-body">Nobody matches “offer out, over 90”.</p>
           <button type="button" class="ws-btn ws-btn--secondary">Clear the filter</button>
         </div>
       </section>