@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,104 @@
+/* ---- Table: the wide-table pattern. Records in a card: a sticky head and first column (a shade on its edge once the rows
+   slide under it), a fade on the side that hides columns, outer cells on the card's 20 px edge, 8 px above and below every
+   cell (40 the row's minimum), numbers right-aligned in fixed columns, totals in the foot, columns that fold by priority
+   and a phone fold. The card is a size container: what folds follows the table's width, not the window's. ---- */
+.ws-table { --ws-table-ground: var(--color-bg-page); --ws-table-shade: color-mix(in srgb, var(--ws-shade) 7.8431372549%, transparent); /* the 8-bit step of 8% (20 of 255), as rgba() painted it in this gradient */ --ws-table-num-w: var(--space-4xl); --ws-table-check-w: calc(var(--ws-card-inset) + var(--space-lg) + var(--space-sm)); container: ws-table / inline-size; }
+/* Not clipped (K1): the scroller inside holds the columns and takes the card's corners. */
+.ws-table > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+.ws-table > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
+/* The scroller: sideways always; up and down once it is given a height (--ws-table-max-h), so the head and the totals stay. */
+.ws-table__scroll { overflow: auto; max-height: var(--ws-table-max-h, none); overscroll-behavior-x: contain; scrollbar-width: thin; }
+/* Its ring would sit under the stuck cells, so a focused scroller rings its card instead, 2 px out. */
+.ws-table:has(> .ws-table__scroll:focus-visible) { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+@supports selector(:has(*)) { .ws-table > .ws-table__scroll:focus-visible { outline: none; } }
+/* Separate borders: a collapsed border belongs to the table and stays behind when its sticky cell moves. */
+.ws-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
+/* Every cell: one line (columns scroll, rows never squash to a word a line), 8 px above and below, 12 at the sides, 20 at
+   the card's edge. A cell that may wrap says so (__wrap). */
+.ws-table th, .ws-table td { padding: var(--space-xs) var(--space-sm); background-color: var(--ws-table-ground); text-align: left; vertical-align: middle; white-space: nowrap; }
+.ws-table tr > :first-child { padding-left: var(--ws-card-inset); }
+.ws-table tr > :last-child { padding-right: var(--ws-card-inset); }
+.ws-table .ws-table__wrap { white-space: normal; min-width: var(--space-9xl); }
+/* Head: 13 / 18 medium muted labels, stuck to the top of the scroller. */
+.ws-table thead th { position: sticky; top: 0; z-index: 2; height: var(--ws-row-h-dense); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); border-bottom: var(--ws-divider); }
+.ws-table thead th[aria-sort="ascending"], .ws-table thead th[aria-sort="descending"] { color: var(--color-text-heading); }
+.ws-table__sort { display: inline-flex; align-items: center; gap: var(--space-xxs); border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+.ws-table__sort svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); flex-shrink: 0; }
+.ws-table th[aria-sort="ascending"] .ws-table__sort svg { transform: rotate(180deg); }
+@media (hover: hover) { .ws-table__sort:hover { color: var(--color-text-heading); } }
+/* An unsorted column's chevron only says it sorts: dimmed (--ws-dim), so two columns never both read as sorted; it comes
+   up on hover and focus. */
+.ws-table th:not([aria-sort="ascending"], [aria-sort="descending"]) .ws-table__sort svg { opacity: var(--ws-dim); }
+.ws-table th .ws-table__sort:focus-visible svg { opacity: 1; }
+@media (hover: hover) { .ws-table th .ws-table__sort:hover svg { opacity: 1; } }
+/* Body: 40 px rows, a 0.5 px line between them. */
+.ws-table tbody tr, .ws-table tfoot tr { height: var(--ws-row-h-dense); }
+.ws-table tbody th, .ws-table tbody td { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 400; color: var(--color-text-body); }
+.ws-table tbody tr + tr > * { border-top: var(--ws-divider); }
+.ws-table .ws-table__name { font-weight: 500; color: var(--color-text-heading); }
+/* A second line in a cell (a figure's base, a name's role). */
+.ws-table__sub { display: block; font-size: var(--ws-text-meta); line-height: var(--space-md); font-weight: 400; color: var(--color-text-muted); }
+/* Numbers: right-aligned, tabular, in a fixed column (64, 96 wide) so every row's digits stack; a wider number widens
+   the column, it never truncates. */
+.ws-table .ws-table__num { width: var(--ws-table-num-w); text-align: right; font-variant-numeric: tabular-nums; }
+.ws-table .ws-table__num--wide { --ws-table-num-w: var(--space-6xl); }
+/* Totals: the body's rhythm, a line above, 600 navy; they stay at the foot of a scroller that has a height. */
+.ws-table tfoot th, .ws-table tfoot td { position: sticky; bottom: 0; z-index: 1; border-top: var(--ws-divider); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 600; color: var(--color-text-heading); }
+/* The first column stays while the rest slide under it (and the check column with it). */
+.ws-table tr > :first-child, .ws-table .ws-table__check + * { position: sticky; left: 0; z-index: 1; }
+.ws-table .ws-table__check + * { left: var(--ws-table-check-w); }
+.ws-table thead tr > :first-child, .ws-table thead .ws-table__check + * { z-index: 3; }
+.ws-table tfoot tr > :first-child, .ws-table tfoot .ws-table__check + * { z-index: 2; }
+/* The check column: a fixed width (the sticky name sits after it), the skinned Checkbox on a 24 px target, 40 on touch. */
+.ws-table .ws-table__check { width: var(--ws-table-check-w); padding-right: var(--space-sm); }
+.ws-table__check .ws-check { position: relative; align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); padding: 0; }
+.ws-table__check .ws-check__box { margin-top: 0; }
+@media (pointer: coarse) { .ws-table__check .ws-check::after { content: ""; position: absolute; inset: calc((100% - var(--ws-touch)) / 2); } }
+/* Row acts: small ghost buttons, always in the DOM. The More act stands in for them on a phone. */
+.ws-table .ws-table__acts { text-align: right; }
+.ws-table__acts .ws-btn + .ws-btn { margin-left: var(--space-xxs); }
+.ws-table .ws-table__more { display: none; }
+/* Hover: North's faint navy wash (a colour change, nothing moves); selected: the sunk cream and a 2 px navy mark on the
+   row's left edge, so the state is never colour alone. */
+.ws-table tbody tr > * { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { .ws-table tbody tr:hover > * { background-image: linear-gradient(var(--ws-hover-faint), var(--ws-hover-faint)); } }
+.ws-table .ws-table__row--selected > *, .ws-table tr[aria-selected="true"] > * { background-color: var(--ws-surface-sunk); }
+.ws-table .ws-table__row--selected > :first-child, .ws-table tr[aria-selected="true"] > :first-child { box-shadow: inset var(--ws-ring) 0 0 var(--color-text-heading); }
+/* Edge cues. The sticky column's shade: the last sticky cell of each row throws a soft shade over the rows sliding under
+   it, only once they have moved (a scroll-driven fade where the browser has one; a hairline that is always there where it
+   has not). The far edge: while columns are hidden past it the rows fade out there, and the fade lifts at the end. */
+.ws-table tr > :first-child:not(.ws-table__check)::after, .ws-table .ws-table__check + *::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--space-xs); background: linear-gradient(to right, var(--ws-table-shade), transparent); opacity: 0; pointer-events: none; }
+/* In dark a navy or black shade vanishes into the dark ground (8 % black moved it 1 step), so the edge reads the dark
+   theme's way, as a lit rim: the card edge fading out. */
+[data-theme="dark"] .ws-table { --ws-table-shade: var(--ws-edge-card); }
+@media (prefers-color-scheme: dark) { [data-theme="system"] .ws-table { --ws-table-shade: var(--ws-edge-card); } }
+@supports (animation-timeline: scroll()) {
+  .ws-table__scroll { scroll-timeline: --ws-table-x inline; mask-image: linear-gradient(to left, transparent, var(--ws-mask) var(--space-lg)); mask-size: calc(100% + var(--space-lg)) 100%; mask-repeat: no-repeat; animation: ws-table-end linear both; animation-timeline: scroll(self inline); animation-range: calc(100% - var(--space-lg)) 100%; }
+  .ws-table__scroll tr > :first-child:not(.ws-table__check)::after, .ws-table__scroll .ws-table__check + *::after { animation: ws-table-shade linear both; animation-timeline: --ws-table-x; animation-range: 0 var(--space-lg); }
+}
+@supports not (animation-timeline: scroll()) {
+  .ws-table__scroll tr > :first-child:not(.ws-table__check), .ws-table__scroll .ws-table__check + * { box-shadow: inset calc(var(--ws-hairline) * -1) 0 0 var(--ws-edge); }
+  /* The hairline outranks the selected mark there; a selected row's stuck name carries both. */
+  .ws-table__scroll .ws-table__row--selected > :first-child:not(.ws-table__check), .ws-table__scroll tr[aria-selected="true"] > :first-child:not(.ws-table__check) { box-shadow: inset var(--ws-ring) 0 0 var(--color-text-heading), inset calc(var(--ws-hairline) * -1) 0 0 var(--ws-edge); }
+}
+@keyframes ws-table-shade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ws-table-end { from { mask-position: calc(var(--space-lg) * -1) 0; } to { mask-position: 0 0; } }
+/* Column priority and the phone fold. A low-priority column (__low) folds away when the table is narrower than 48rem;
+   the row's fold line (__fold, under its name) then says what it held. */
+.ws-table__fold { display: none; font-size: var(--ws-text-meta); line-height: var(--space-md); font-weight: 400; color: var(--color-text-muted); }
+@container ws-table (max-width: 48rem) {
+  .ws-table .ws-table__low { display: none; }
+  .ws-table .ws-table__fold { display: block; }
+}
+/* Under 30rem the row acts fold into one More act, and a name that would push the rest off the card wraps at 40 % of
+   the table, so the stuck columns never leave the sliding ones a sliver (a name that fits keeps its one line). */
+@container ws-table (max-width: 30rem) {
+  .ws-table .ws-table__acts > :not(.ws-table__more) { display: none; }
+  .ws-table .ws-table__more { display: inline-flex; }
+  .ws-table .ws-table__name { min-width: 40cqi; white-space: normal; }
+}
+/* Loading: a ghost bar in each cell, in the chart colours' sweep (add ws-shimmer), the head shown at once. */
+.ws-table__placeholder { height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
+.ws-table__placeholder.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
+/* Empty: the same card, a sentence and the act that clears the filter. */
+.ws-table__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--ws-card-inset); text-align: center; }

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

@@ -8,81 +8,106 @@ The underline tab row: five or more sections of a settings or detail page, read
 
 ## Not for
 
-- Two to four views of the same data: use `Segmented` (the pill, navy-thumb switch), which stays the rule for that range.
+- Two to four views of the same data: use `Segmented`.
 - Moving between whole pages of a product: use `AppShell`'s nav or `TopBar`'s links.
 - A one-off disclosure that opens and closes in place: use `Fold`.
 
 ## Anatomy
 
-- Row: items 32 px tall (`--ws-control-h`), 14 px medium words, a hairline (`--ws-edge-slot`, the same tone as a day
-  cell's or a chart row's hairline) under the whole row.
-- Rest: `--color-text-body` (grey-7).
-- Current: `--color-text-heading` (navy), a 2 px navy underline (`--ws-ring`) sitting just under the item, above the
-  row's own hairline.
-- A count: a small `ws-chip` beside the label when a section has a number worth surfacing (unread items, one upcoming
-  showing).
+- Row: tabs 32 px tall (`--ws-control-h`, 40 on touch), 14 / 20 medium words, 24 px apart, a 1 px hairline
+  (`--ws-edge-slot`) under the whole row at the column's width.
+- The first tab's words sit on the content edge, the same edge as the card's head and body (K7). Each tab's box bleeds
+  6 px past its words, and the row 6 px past the column, so the focus ring has room and no word moves.
+- Rest: `--color-text-body`. Current: navy words and a 2 px navy underline under the words, over the hairline.
+- A count: a small `ws-chip` after the label (18 tall, 11 px).
+- Overflow: the row scrolls sideways with no scrollbar and fades 32 px at the edge that hides tabs (nothing fades when
+  every tab fits).
 - The whole row is `role="tablist"`; each item `role="tab"` with `aria-selected` and a matching `role="tabpanel"`.
 
 ## Variants and sizes
 
 | Variant | Where |
 | --- | --- |
-| `underline` (this component) | Five-plus sections of one thing; matches the brand kit's own `underline` Tabs variant |
-| `pill` | The kit's other Tabs variant is this product's `Segmented`, used for 2 to 4 views; it is a different component here, not a Tabs prop |
+| The row (this component) | five or more sections of one thing |
+| `ws-tabs-fold` | the row on a desktop and a `Select` of the same sections on a phone (under 40rem): for a row too long to scroll comfortably on a phone |
 
 ## States
 
-- **Default**: grey-7 words, no mark.
-- **Hover**: words move toward `--color-text-heading` (no underline until selected).
-- **Focus**: the kit's `--shadow-focus-ring`; arrow keys move focus along the tablist per the ARIA tabs pattern.
-- **Selected**: navy words, the 2 px underline.
-- **With a count**: the chip sits after the label, never replacing it.
-- **Narrow (360 px and under)**: the row scrolls horizontally with no visible scrollbar; the hairline still runs the
-  row's full scrollable width so it never looks cut off.
-- **Disabled** (a section not yet available): 40% opacity, `aria-disabled`, not reachable by click or arrow key.
+- **Default:** grey words, no mark.
+- **Hover (a mouse only):** the words turn navy (no underline until selected).
+- **Focus:** the kit's ring, drawn inside the tab's box (the row scrolls, so a ring outside it would be cut).
+- **Selected:** navy words, the 2 px underline.
+- **With a count:** the chip sits after the label, never replacing it.
+- **Disabled** (a section not yet available): 40%, `aria-disabled="true"`, skipped by click and arrow keys.
+- **Long row:** it scrolls sideways and fades at the hidden edge; the page brings the chosen tab into view.
+- **Narrow:** as long; on a phone, `ws-tabs-fold` shows the `Select` instead.
+- **Touch:** tabs 40 tall; the row swipes.
+- **Dark:** the hairline, the words and the underline take their dark values.
 
 ## Behaviour
 
-- Keyboard: `role="tablist"`; left/right arrow (or up/down if the brief calls for a vertical row, not used here) moves
-  selection, Home/End jump to the first/last tab; only the selected tab is in the Tab order (`tabindex="-1"` on the
-  rest), matching the brief's note that hand-rolled tabs miss this and the kit's Radix `Tabs` gets it right.
-  Activation is automatic on arrow move (select-on-focus), the common pattern for this kind of tab.
-- Pointer: a click selects the tab under it.
-- Touch: the row's items carry the 24 px minimum for words that act; the scrollable row allows a swipe past the fold.
-- Motion: the underline can glide between tabs on `--ws-ease-soft` as a shared layout id, the same technique as the
-  sidebar's current wash and `Segmented`'s thumb; reduced motion shows it landing without the glide.
+- Keyboard: left and right arrows move and choose, Home and End jump to the ends; only the chosen tab is in the Tab order
+  (`tabindex="-1"` on the rest). Activation follows focus.
+- On a choice the page calls `tab.scrollIntoView({ inline: 'nearest', block: 'nearest' })`, so the chosen tab is never
+  off screen (K7); `scroll-padding-inline` keeps it clear of the fade.
+- With `ws-tabs-fold`, the page keeps the row and the `Select` on the same section.
+- Motion: the underline slides to the chosen tab and takes its width (North's tab spring, .4 / .12, the department
+  card underline), plain CSS with no script and no new markup. The chosen tab is a CSS anchor; the row's `::after` is
+  the travelling underline, its two ends easing on motion's own `spring(.4, .12)` written out as `linear()` (500 ms;
+  `--ws-spring-tab-duration` and `--ws-spring-tab`). At rest the chosen tab draws its own underline (the 0.4 look); while
+  the row is pointed at or holds focus the travelling one takes its place, so a choice made then slides. Without CSS
+  anchor positioning, or under reduced motion, it lands at once. The edge fade follows the scroll and is not motion.
+  Try it in the preview: click a tab.
 
 ## Content
 
-- Section names: sentence case, one or two words, naming the section not instructing ("Overview", "Showings", not
-  "View the showings").
+- Section names: sentence case, one or two words, naming the section ("Overview", "Showings").
 - No em dashes.
-- A count chip is a bare number (occasionally with a short word, "1 new"), never a sentence.
+- A count chip is a bare number (or a short word, "1 new"), never a sentence.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `items` | `{ id, label, count?, disabled? }[]` | The tabs, in order |
-| `value` | `string` | The selected tab's id |
-| `onChange` | `(id: string) => void` | Called when selection moves |
-| `panels` | `Record<string, ReactNode>` | Each tab's content, rendered for the selected id |
+| `items` | `{ id, label, count?, disabled? }[]` | the tabs, in order |
+| `value` | `string` | the chosen tab's id |
+| `onChange` | `(id: string) => void` | called when the choice moves |
+| `panels` | `Record<string, ReactNode>` | each tab's content |
+| `foldOnPhone` | `boolean` | renders `ws-tabs-fold` with its `Select` |
 
 ## Rules
 
-- **Underline tabs for five-plus sections; `Segmented` for two to four views**: the two components are never
-  interchangeable fixes for the same job (`08-choosing-components.md`, "Switch between a few views" vs this piece).
-- **No tab row of its own styles** (the system's own rule): every tab row in a product built on this system is this
-  component, never a hand-drawn set of buttons with a bottom border.
-- **The hairline under the row is `--ws-edge-slot`**, matching a day cell's and a chart row's fine edge rather than the
-  card edge tone (`--ws-edge-card`), since a tab row sits inside content rather than bounding a surface.
-- **Source**: Intentional addition, decided from the system (26 Oct 2026): five-plus sections of a settings or detail
-  page need a row `Segmented` was never meant to hold. Derived from the kit's own underline Tabs variant (Radix-based,
-  matching this product's look exactly) and the card's foot hairline tone for the row's underline.
+- Underline tabs for five-plus sections; `Segmented` for two to four views.
+- No tab row of its own styles: every tab row is this component.
+- The first tab's words sit on the content edge (K7: the 0.4.0 row put them 4 px in).
+- A tab row never hides its overflow silently: it fades at the hidden edge and the chosen tab is always in view; more
+  than four tabs on a phone fold into a `Select`.
+- The hairline under the row is `--ws-edge-slot`, a content line, not a surface edge.
 
 ## Source
 
-**Derived from**: the kit's own underline `Tabs` variant (Radix-based), restyled with the product's navy-current and
-`--ws-edge-slot` hairline tokens in place of the kit's own border colour, and the system's split between underline
-tabs (five-plus sections) and the pill `Segmented` switch (two to four views). **Precedent**: an intentional addition
-decided from the system, 26 Oct 2026.
+**Derived from**: the kit's underline Tabs (26 Oct 2026), the Revenue OS audit's K7 (the row hid its overflow and its
+chosen tab, and its first tab sat 4 px in), North's tab underline spring (app.js) and its focus ring.
+
+## Markup
+
+```html
+<div role="tablist" aria-label="Lead" class="ws-tabs">
+  <button type="button" role="tab" id="t-overview" aria-selected="true" aria-controls="p-overview" class="ws-tabs__tab">Overview</button>
+  <button type="button" role="tab" id="t-showings" aria-selected="false" aria-controls="p-showings" tabindex="-1" class="ws-tabs__tab">Showings <span class="ws-chip ws-chip--sunk">1</span></button>
+</div>
+<div id="p-overview" role="tabpanel" aria-labelledby="t-overview">...</div>
+
+<div class="ws-tabs-fold">
+  <div role="tablist" aria-label="Account" class="ws-tabs">...</div>
+  <span class="ws-select-wrap ws-tabs-fold__select">
+    <select class="ws-select" aria-label="Section"><option selected>Overview</option><option>Deals</option></select>
+    <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>
+  </span>
+</div>
+```
+
+## Styles
+
+`design-system/components/Tabs/style.css`: `ws-tabs`, `ws-tabs__tab`, `ws-tabs-fold` and `__select`. The edge fade is a
+scroll-driven animation (`ws-scroll-edges`, shared with `Segmented`); where a browser has none, the row scrolls without it.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Navigation" height=234 -->
+<!-- @dsCard group="Navigation" height=420 -->
 <!doctype html>
 <html>
 <head>
@@ -8,37 +8,69 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey ws-stage--column" style="gap: var(--ws-gap-component);">
+<div class="ws-stage ws-stage--column">
 
   <div class="ws-stack">
-    <span class="ws-muted">6 sections, one with a count, the current tab navy with the underline, a hairline under the row</span>
-    <div role="tablist" aria-label="Lead" class="ws-tabs">
-      <button type="button" role="tab" id="t-overview" aria-selected="true" aria-controls="p-overview" class="ws-tabs__tab">Overview</button>
-      <button type="button" role="tab" id="t-activity" aria-selected="false" aria-controls="p-activity" class="ws-tabs__tab" tabindex="-1">Activity</button>
-      <button type="button" role="tab" id="t-showings" aria-selected="false" aria-controls="p-showings" class="ws-tabs__tab" tabindex="-1">
-        Showings <span class="ws-chip ws-chip--sunk">1</span>
-      </button>
-      <button type="button" role="tab" id="t-calls" aria-selected="false" aria-controls="p-calls" class="ws-tabs__tab" tabindex="-1">Calls</button>
-      <button type="button" role="tab" id="t-notes" aria-selected="false" aria-controls="p-notes" class="ws-tabs__tab" tabindex="-1">Notes</button>
-      <button type="button" role="tab" id="t-offer" aria-selected="false" aria-controls="p-offer" class="ws-tabs__tab" tabindex="-1">Offer</button>
+    <span class="ws-muted">Six sections, one with a count, one not ready yet; the first tab's words on the content edge. More than four on a phone fold into a Select. Click a tab: the underline slides to it on North's tab spring</span>
+    <div class="ws-card ws-card--inset">
+      <div class="ws-tabs-fold">
+      <div role="tablist" aria-label="Lead" class="ws-tabs">
+        <button type="button" role="tab" id="t-overview" aria-selected="true" aria-controls="p-overview" class="ws-tabs__tab">Overview</button>
+        <button type="button" role="tab" id="t-activity" aria-selected="false" aria-controls="p-overview" class="ws-tabs__tab" tabindex="-1">Activity</button>
+        <button type="button" role="tab" id="t-showings" aria-selected="false" aria-controls="p-overview" class="ws-tabs__tab" tabindex="-1">Showings <span class="ws-chip ws-chip--sunk">1</span></button>
+        <button type="button" role="tab" id="t-calls" aria-selected="false" aria-controls="p-overview" class="ws-tabs__tab" tabindex="-1">Calls</button>
+        <button type="button" role="tab" id="t-notes" aria-selected="false" aria-controls="p-overview" class="ws-tabs__tab" tabindex="-1">Notes</button>
+        <button type="button" role="tab" id="t-offer" aria-selected="false" aria-disabled="true" aria-controls="p-overview" class="ws-tabs__tab" tabindex="-1">Offer</button>
+      </div>
+      <span class="ws-select-wrap ws-tabs-fold__select">
+        <select class="ws-select" aria-label="Section" aria-controls="p-overview">
+          <option selected>Overview</option><option>Activity</option><option>Showings (1)</option><option>Calls</option><option>Notes</option><option disabled>Offer</option>
+        </select>
+        <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>
+      </span>
+      </div>
+      <p id="p-overview" role="tabpanel" aria-labelledby="t-overview" class="ws-body" style="padding-top: var(--space-sm);">New lead 6 days ago, referred by Dana Alvarez.</p>
     </div>
-    <div id="p-overview" role="tabpanel" aria-labelledby="t-overview" class="ws-body" style="padding-top: var(--space-sm);">New lead 6 days ago, referred by Dana Alvarez.</div>
   </div>
 
-  <div class="ws-stack" style="width: 360px; max-width: 100%;">
-    <span class="ws-muted">360 px: the row scrolls sideways with no visible scrollbar, the hairline keeps its width</span>
-    <div role="tablist" aria-label="Lead, narrow" class="ws-tabs">
-      <button type="button" role="tab" aria-selected="true" class="ws-tabs__tab">Overview</button>
-      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Activity</button>
-      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">
-        Showings <span class="ws-chip ws-chip--sunk">1</span>
-      </button>
-      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Calls</button>
-      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Notes</button>
-      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Offer</button>
+  <div class="ws-stack" style="width: 300px; max-width: 100%;">
+    <span class="ws-muted">Too wide for its column: it scrolls sideways and fades at the edge that hides tabs</span>
+    <div role="tablist" aria-label="Pipeline stage" class="ws-tabs">
+      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Upcoming demos</button>
+      <button type="button" role="tab" aria-selected="true" class="ws-tabs__tab">Quote sent</button>
+      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Signed</button>
+      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Closed won</button>
+      <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Closed lost</button>
+    </div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">The fold: the row on a desktop, a Select of the same sections on a phone</span>
+    <div class="ws-tabs-fold">
+      <div role="tablist" aria-label="Account" class="ws-tabs">
+        <button type="button" role="tab" aria-selected="true" class="ws-tabs__tab">Overview</button>
+        <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Deals</button>
+        <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Contacts</button>
+        <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Usage</button>
+        <button type="button" role="tab" aria-selected="false" class="ws-tabs__tab" tabindex="-1">Billing</button>
+      </div>
+      <span class="ws-select-wrap ws-tabs-fold__select">
+        <select class="ws-select" aria-label="Section">
+          <option selected>Overview</option><option>Deals</option><option>Contacts</option><option>Usage</option><option>Billing</option>
+        </select>
+        <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>
+      </span>
     </div>
   </div>
 
 </div>
+<script>
+/* The demo's wiring: a click chooses the tab (an app keeps the choice; the underline slides on its own). */
+document.addEventListener('click', (e) => {
+  const tab = e.target.closest('.ws-tabs__tab');
+  if (!tab || tab.getAttribute('aria-disabled') === 'true') return;
+  for (const t of tab.closest('.ws-tabs').querySelectorAll('.ws-tabs__tab')) { t.setAttribute('aria-selected', String(t === tab)); t.tabIndex = t === tab ? 0 : -1; }
+});
+</script>
 </body>
 </html>

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

@@ -0,0 +1,44 @@
+/* ---- Tabs: a page's own sections, words on a hairline, the current one navy with a 2 px underline under its words.
+   The first tab's words sit on the content edge (K7); each tab's box bleeds 6 px past its words (and the row 6 px past
+   the column) so the inset focus ring has room without moving a word. The row scrolls sideways when it is too wide,
+   fading at the edge that hides tabs (a scroll-driven fade: nothing shows when it all fits), and a page brings the
+   chosen tab into view (scrollIntoView, inline: nearest). On a phone a long row can fold into a Select (.ws-tabs-fold). ---- */
+.ws-tabs { display: flex; align-items: stretch; gap: var(--space-lg); margin-inline: calc(var(--space-xxs-plus) * -1); padding-inline: var(--space-xxs-plus); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--space-xl); background: linear-gradient(in srgb, var(--ws-edge-slot), var(--ws-edge-slot)) bottom / 100% var(--ws-line) no-repeat content-box; }
+.ws-tabs::-webkit-scrollbar { display: none; }
+@supports (animation-timeline: scroll()) {
+  .ws-tabs { mask-image: linear-gradient(90deg, transparent, currentColor var(--ws-fade-start), currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+}
+.ws-tabs__tab { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-xxs-plus); height: var(--ws-control-h); margin-inline: calc(var(--space-xxs-plus) * -1); padding: 0 var(--space-xxs-plus); border: 0; border-radius: var(--ws-radius-control); background: none; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-body); white-space: nowrap; cursor: pointer; }
+.ws-tabs__tab:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-tabs__tab:hover { color: var(--color-text-heading); } }
+.ws-tabs__tab[aria-selected="true"] { color: var(--color-text-heading); }
+.ws-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-xxs-plus); right: var(--space-xxs-plus); bottom: 0; height: var(--ws-ring); background: var(--color-text-heading); border-radius: var(--ws-radius-bar); }
+.ws-tabs__tab[aria-disabled="true"] { opacity: 0.4; cursor: default; }
+.ws-tabs__tab .ws-chip { height: calc(var(--space-md) + var(--space-3xs)); padding: 0 var(--space-xxs-plus); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); }
+/* The fold: on a phone the row gives way to a Select of the same sections (the page keeps the two in step). */
+.ws-tabs-fold__select { display: none; }
+@media (max-width: 40rem) {
+  .ws-tabs-fold > .ws-tabs { display: none; }
+  .ws-tabs-fold > .ws-tabs-fold__select { display: flex; }
+}
+
+/* ---- Motion: the underline slides to the chosen tab on North's tab spring (.4 / .12, the department card underline,
+   app.js@754407; north-motion 3) instead of jumping. The chosen tab is the anchor (CSS anchor positioning) and the
+   row's ::after is a travelling underline, under the tab's words (6 in from its box), its two ends easing on motion's
+   own spring(.4, .12) written out as linear() (500 ms). At rest the chosen tab draws its own underline, so a resting row
+   is the 0.4 row pixel for pixel; while the row is pointed at or holds focus the travelling one takes its place (the
+   same bar, at once), so a choice made then slides. Only a real choice moves it; a resize or a late font, away from
+   the pointer, lands it at once. No new markup. Without anchor positioning, or under reduced motion, the underline
+   moves at once. The spring is the global --ws-spring-tab over --ws-spring-tab-duration. ---- */
+@supports (anchor-name: --a) {
+  .ws-tabs { position: relative; anchor-scope: --ws-tabs-current; }
+  .ws-tabs::after { content: ""; position: absolute; position-anchor: --ws-tabs-current; left: calc(anchor(left) + var(--space-xxs-plus)); right: calc(anchor(right) + var(--space-xxs-plus)); bottom: anchor(bottom); height: var(--ws-ring); border-radius: var(--ws-radius-bar); background: var(--color-text-heading); opacity: 0; pointer-events: none; }
+  .ws-tabs__tab[aria-selected="true"] { anchor-name: --ws-tabs-current; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ws-tabs__tab { transition: color var(--ws-duration-hover) var(--ws-ease-soft); }
+  @supports (anchor-name: --a) {
+    .ws-tabs:is(:hover, :focus-within)::after { opacity: 1; transition: left var(--ws-spring-tab-duration) var(--ws-spring-tab), right var(--ws-spring-tab-duration) var(--ws-spring-tab); }
+    .ws-tabs:is(:hover, :focus-within) .ws-tabs__tab[aria-selected="true"]::after { opacity: 0; }
+  }
+}

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

@@ -1,6 +1,7 @@
 The kit's marketing piece: for a public page, never a product screen.
 
-A quoted customer, their initials and their role, a `KitCard` built to carry proof rather than product state.
+A quoted customer, their initials and their role: a figure on the kit's card, built to carry proof rather than
+product state.
 
 ## Use it when
 
@@ -15,34 +16,33 @@ A quoted customer, their initials and their role, a `KitCard` built to carry pro
 
 ## Anatomy
 
-- Card: `KitCard`, `surface="white"`, `--space-lg` (24px) padding.
-- Quote: `--font-size-md` (16px), 24px line height, `--color-text-primary`, no quotation marks drawn by the
-  component (the text itself may open with one if it reads naturally).
-- Avatar: a 36px circle (`--ws-control-h-md`, the nearest token to this diameter; see Source) with the person's
-  initials, `--color-gray-1` fill, `--color-brand-navy` text.
-- Name: `--font-size-sm` (14px) medium, `--color-brand-navy`.
-- Role: `--font-size-2xs` (12px), `--color-text-muted`, directly under the name.
+- Card (`.ws-testimonial`, a `<figure>`): 4px corners, a 1px `--color-border-default` edge, `--color-surface`,
+  `--space-lg` (24px) padding, a column.
+- Quote (`__quote`, a `<blockquote>`): 16/24 `--color-text-primary`, no quotation marks drawn by the component.
+- Person (`__who`, a `<figcaption>`): on the card's foot, at least `--space-md` (16px) under the quote; the avatar and
+  the words `--space-sm` (12px) apart, centred on each other.
+- Avatar (`__avatar`): a 36px disc (`--ws-control-h-md`), `--ws-surface-sunk` fill, 12px semibold initials in
+  `--color-text-heading`.
+- Name (`__name`): 14/20 medium `--color-text-heading`. Role (`__role`): 12/16 `--color-text-muted`, under the name.
+- Row (`.ws-testimonial-row`): a grid of columns at least 280px wide, `--layout-col-gap` (24px) apart, the cards equal
+  height in each row; a third card that wraps takes the next row's first column at the same width, never the full row.
 
 ## Variants and sizes
 
-One layout. Shown two up, but the card has no fixed width of its own; it takes whatever column a page gives it.
-In fello.css: `.ws-testimonial` (`__quote`, `__who`, `__avatar`, `__name`, `__role`); two or three side by side sit in
-`.ws-testimonial-row`, which wraps them to one column when they no longer fit.
+One layout. The card has no fixed width of its own; it takes the column the row gives it.
 
 ## States
 
 - **Default:** as above.
-- **Hover / focus / selected / pressed:** not applicable; a testimonial is read-only, never a link or a button.
-- **Pending / disabled / error:** not applicable.
+- **Hover / focus / selected / pressed / pending / disabled / error:** not applicable; a testimonial is read-only.
 - **Empty:** not applicable; a testimonial without a real quote and a real name is not shown.
-- **Long label:** a longer quote wraps across more lines; the name and role stay pinned under it rather than
-  being pushed off by a fixed card height.
-- **Narrow:** the avatar and name wrap to a tidy row down to a fairly narrow column before the role would need to
-  wrap under the name as well.
+- **Long label:** a longer quote wraps; the person stays on the card's foot, level with the person on the next card.
+- **Narrow:** the cards stack; the avatar and the words stay in a row, and a long role wraps under the name.
 
 ## Behaviour
 
 - Keyboard / pointer / touch: nothing interactive; the card is static content.
+- Screen readers: the figure, blockquote and figcaption tie the words to the person who said them.
 - Motion: none.
 
 ## Content
@@ -53,7 +53,7 @@ In fello.css: `.ws-testimonial` (`__quote`, `__who`, `__avatar`, `__name`, `__ro
 
 ## Props
 
-Not a kit export; composed from `KitCard`. A reusable version would take:
+Not a kit export. A reusable version would take:
 
 | Prop | Type | Meaning |
 | --- | --- | --- |
@@ -64,20 +64,36 @@ Not a kit export; composed from `KitCard`. A reusable version would take:
 
 ## Rules
 
-- **Intentional addition, decided from the system (26 Oct 2026):** the kit ships `Card` but no testimonial
-  pattern; this composes one from it rather than adding a new surface.
-- The card stays at the kit's 4px radius ceiling rather than a softer corner, which the kit's own doc comment
-  calls out by name: the testimonial card had already moved to 4px, "tighter than feature cards"
-  (`dist/index.d.ts`, doc comment on `cardVariants`). This component is exactly that testimonial card.
-- The avatar shows initials rather than a photo, matching the system's own rule for people without a photo ("neutral
-  discs, navy initials"), so a marketing page and the product agree on how to represent a person with no image.
-- No 36px avatar token exists in `tokens/tokens.md`; `--ws-control-h-md` happens to equal 36px and is reused here
-  for the diameter rather than writing a raw `36px` (see Source for the value this could not otherwise find a
-  token for).
+- **The person sits on the card's foot** (4 Nov 2026): side by side, a short quote left its person higher than the
+  next card's.
+- **A wrapped card keeps its column** (4 Nov 2026): the row was a wrapping flex row, so a third card on a tablet ran
+  the full width under the other two. It is a grid now.
+- **A figure, not a div** (4 Nov 2026): `<figure>`, `<blockquote>` and `<figcaption>`, so the quote and its source are
+  one thing to a screen reader.
+- **The avatar is the house disc**: `--ws-surface-sunk` with heading-colour initials, the system's "neutral discs, navy
+  initials", in both themes (it was `--color-gray-1`, which stayed near white in dark).
+- The card stays at the kit's 4px radius ceiling, the testimonial card's own "tighter than feature cards" corner.
 
 ## Source
 
-**Derived from**: the kit's own `Card` (no dedicated testimonial pattern), its documented 4px "tighter than feature
-cards" testimonial radius, and the system's neutral-disc initials-avatar rule for a person with no photo; the 36px
-avatar reuses `--ws-control-h-md` as the nearest existing step, since no avatar-size token this large exists.
-**Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+**Derived from**: the kit's own card, its 4px testimonial radius, the house neutral disc and the dark-safe surface
+names (D12). **Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+
+## Markup
+
+```html
+<div class="ws-testimonial-row">
+  <figure class="ws-testimonial">
+    <blockquote class="ws-testimonial__quote">Our team closes a cold call in under six minutes now.</blockquote>
+    <figcaption class="ws-testimonial__who">
+      <span class="ws-testimonial__avatar" aria-hidden="true">PN</span>
+      <div class="ws-testimonial__person">
+        <div class="ws-testimonial__name">Priya Nair</div>
+        <div class="ws-testimonial__role">Team lead, Nair Realty Group</div>
+      </div>
+    </figcaption>
+  </figure>
+</div>
+```
+
+Styles: the `Testimonial` block (`components/Testimonial/style.css`). Nothing else.

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

@@ -1,6 +1,6 @@
-<!-- @dsCard group="Marketing" height=202 -->
+<!-- @dsCard group="Marketing" height=198 -->
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Testimonial</title>
@@ -11,27 +11,27 @@
 <div class="ws-stage ws-stage--grey">
 <div class="ws-testimonial-row">
 
-  <div class="ws-testimonial">
-    <p class="ws-testimonial__quote">Our team closes a cold call in under six minutes now. We book more appointments with fewer calls, not more of them.</p>
-    <div class="ws-testimonial__who">
+  <figure class="ws-testimonial">
+    <blockquote class="ws-testimonial__quote">Our team closes a cold call in under six minutes now. We book more appointments with fewer calls, not more of them.</blockquote>
+    <figcaption class="ws-testimonial__who">
       <span class="ws-testimonial__avatar" aria-hidden="true">PN</span>
-      <div>
+      <div class="ws-testimonial__person">
         <div class="ws-testimonial__name">Priya Nair</div>
         <div class="ws-testimonial__role">Team lead, Nair Realty Group</div>
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 
-  <div class="ws-testimonial">
-    <p class="ws-testimonial__quote">It drafts our weekly posts from our own wins. I approve one in under a minute instead of starting from a blank page every Friday.</p>
-    <div class="ws-testimonial__who">
+  <figure class="ws-testimonial">
+    <blockquote class="ws-testimonial__quote">It drafts our weekly posts from our own wins. I approve one in under a minute instead of starting from a blank page every Friday, and the team actually reads them.</blockquote>
+    <figcaption class="ws-testimonial__who">
       <span class="ws-testimonial__avatar" aria-hidden="true">DS</span>
-      <div>
+      <div class="ws-testimonial__person">
         <div class="ws-testimonial__name">Dana Soto</div>
         <div class="ws-testimonial__role">Broker, Soto Home Group</div>
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 
 </div>
 </div>