@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,94 +1,139 @@
-Every switch and tab row on the platform: a cream track with a sliding navy thumb, one component so the thumb always
-slides the same way.
+Every switch and tab row on the platform: Seth's grey well with a navy current item, one component so the current
+item always moves the same way.
 
 ## Use it when
 
 - A view or a mode needs switching on one page (cold call, live transfer, follow-up; this week, this month, all time).
-- A set of panels needs real tabs (`tabs`, a `role="tablist"` with arrow-key navigation).
-- A switch must fill its box on a phone (`stretch`) or sit tight beside a chat (`dense`).
+- A pane needs real tabs (`tabs`: a `role="tablist"` with arrow-key navigation), such as Seth's drawer tabs.
+- A report's views carry a figure each (Seth's view tabs: "Your score 72"): `figures`.
+- A page's period filter (`sm`, inside `FilterBar`) or a list head's filter (`clear`).
+- A form's single choice among two to four short options (native radios inside the items).
 
 ## Not for
 
-- A form's single choice among several: use `Radio`/`RadioGroup` or `Select`.
-- An act that does something once, not a state the page remembers: use `Button`.
+- A form's choice among many, or long options: use `Radio`/`RadioGroup` or `Select`.
+- Five or more sections of one page: use `Tabs`.
+- An act that does something once: use `Button`.
 - A removable or markable fact: use `Chip`.
 
 ## Anatomy
 
-- Track: `--ws-radius-row` (6px) corners, `--color-bg-page` (cream) ground, the fine hairline edge
-  (`--ws-shadow-hairline`), 2px padding inside, 2px gap between items.
-- Item: `--ws-radius-control` (4px) corners, 28px tall, 12px medium words, `--space-sm` sides (tighter, `--space-xs`, when
-  `dense`).
-- Current item: a navy (`--color-text-heading`) thumb that slides under the item (`layoutId`, a spring), white 12px
-  medium words; the rest `--color-text-body`, navy on hover.
-- Icon (optional): 16px (`--space-md`), before the label.
-- Count (optional): a small pill after the label, white at 70% opacity on the current item.
+- Track: the well (`--ws-well`, #EDEDED), no edge, 8 px corners (`--ws-radius-card`), 3 px inside (`--ws-halo`), items
+  2 px apart (`--space-3xs`). It sits at its own width (a flex column never stretches it), never wider than its column:
+  past that it scrolls sideways inside and fades at the edge that hides items.
+- Item: 32 px (`--ws-control-h`) tall, 12 px sides, 6 px corners (`--ws-radius-row`), 13 / 18 medium navy words, a 16 px
+  icon 6 px before them; 40 px on a touch screen. The track is 38 tall (46 on touch).
+- Current item: navy (`--color-text-heading`) with `--ws-on-act` words.
+- Count: the item's own words after the label ("Needs a reply 10", 8 apart), numerals even; or inline ("Fix · 2").
 
 ## Variants and sizes
 
 | Variant | What it looks like | Where |
 | --- | --- | --- |
-| Switch (default) | a `role="group"` of buttons, or a `nav` of links when every item has an `href` | a mode or filter kept on the page or in the URL |
-| `tabs` | a real `role="tablist"`, each item a `tab` with `aria-selected`, arrow keys and Home/End move and choose | a set of panels (the screen fades between them with `CrossFade`) |
-| `stretch` | each item an equal share of the width, full width on a phone (`stretch="always"`: at every width) | a switch inside a narrow card or a phone screen |
-| `quiet` | the current item wears a sunk cream thumb with heading words, not navy | a switch that sits beside the page's one primary button, so two navy things do not compete |
-| `pills` | separate half-clear cream pills instead of one track, the current one white with a navy outline and a lift | a page's own top-level tabs (the Team page) |
-| `dense` | tighter sides, for a row that must fit beside the chat | a narrow column |
+| Switch (default) | the well track, buttons with `aria-pressed`, or links with `aria-current` | a mode or a filter kept on the page or in the URL |
+| `tabs` | a real `role="tablist"`, each item a `tab` with `aria-selected` | a pane's sections (Seth's drawer tabs) |
+| `--stretch` | each item an equal share of the width, never narrower than its words (past that the track scrolls) | a switch in a narrow card or on a phone |
+| `--figures` | cream cells on the well, a name at the left (13 / 18 body grey) and a figure at the right (15 / 20 semibold navy), 40 tall, 10 / 14 inside; the current cell Seth's #2C4870; a row each when the track is too narrow for their names | a report's views, each with its number |
+| `--clear` | no ground, so no side halo: the first and last items sit on the column's edges, in line with the rows; with `--stretch` | Seth's filter in a list head (Review inbox) |
+| `--quiet` | the current item cream (`--ws-raised`) with navy words; in dark the tray a step lighter with the card edge inside, so it still shows on the dark well | beside the page's one navy act, so two navy things do not compete |
+| `--sm` | North's filter size: a 28 px track on the surface with a 0.5 px edge inside, 2 in; items 24 tall, 10 sides, 4 px corners, 12 / 16 words | a page's period filter (`FilterBar`), the theme switch |
+| `--dense` | 8 px sides | a row beside the chat |
+| `__item--icon` | an icon alone, square (32; 28 by 24 in `sm`) with its name in `aria-label` | a chart's type, the theme switch |
+
+`pills` (separate pills for the Team page's own top-level tabs) is a React-only look in the first product.
 
 ## States
 
-- **Default:** the track at rest, the current item's thumb in place.
-- **Hover:** a non-current item's words turn `--color-text-heading` (no fill change).
-- **Focus:** the kit's focus halo on the focused item.
-- **Pressed:** the item scales slightly on `active:scale`; the thumb itself only moves on a real selection change.
-- **Selected (current):** the navy thumb (or sunk, if `quiet`) with white or heading words, `aria-selected="true"` (tabs),
-  `aria-pressed`/`aria-current` (a switch or links).
-- **Pending / loading:** not applicable; switching is instant, since it is a local or URL state, not a request.
-- **Disabled:** not a state the component defines; an item that cannot be chosen is left out rather than shown disabled.
-- **Error:** not applicable.
-- **Empty:** a group needs at least one item to mean anything; it is never rendered with zero.
-- **Long label:** the item's words truncate (`.truncate`) rather than push the track wider, except where a fixed width
-  (`stretch="always"`) is not in play, in which case the track is left to grow.
-- **Narrow:** `stretch` makes every item an equal share of the available width on a phone.
-- **Touch:** the whole track grows to 40px tall (`--ws-touch`) on a touch screen.
+- **Default:** the track at rest, the current item in place.
+- **Hover (a mouse only):** a non-current item takes the navy wash (`--ws-hover`); a figure cell a wash over its cream.
+- **Focus:** the kit's ring, drawn inside the item (the track is a dense row). On the current item the ring takes the
+  fill's words colour (`--ws-on-act`), 2 px further in, so it shows on the navy (a radio group's focus always sits on its
+  chosen item); on `--quiet` it stays navy.
+- **Pressed:** nothing moves (North).
+- **Selected (current):** navy with cream words; `aria-selected="true"` (tabs), `aria-pressed="true"` (a switch),
+  `aria-current` (links), or a checked radio inside.
+- **Pending / loading:** not applicable; switching is instant (a local or URL state).
+- **Disabled:** an item that cannot be chosen is usually left out; one that is coming (a disabled button, or a disabled
+  radio inside) shows at 40% and takes no hover.
+- **Error / empty:** not applicable; a group is never rendered with no items.
+- **Long label:** items keep one line; a track too wide for its column scrolls inside with the edge fade. `figures`
+  cells wrap their names.
+- **Narrow:** `--stretch` shares the width; `figures` cells take a row each; past four items on a phone, use a `Select`.
+- **Touch:** items 40 tall, icon items 40 wide.
+- **Dark:** the well, the hover wash and the act take their dark values; the figure cells' current is the act.
 
 ## Behaviour
 
-- Keyboard: a switch is a normal button group (Tab moves between items); `tabs` is one stop for Tab, and the arrow keys
-  (plus Home and End) move between tabs and choose as they go, per the ARIA tabs pattern.
-- Pointer / touch: tapping an item chooses it; the thumb slides to it.
-- Motion: the thumb slides on the "snappy" spring (`motionTokens.indicator`); interrupted mid-slide it turns toward the
-  new choice rather than jumping. Reduced motion shows the thumb already in place with no sliding.
+- Keyboard: a switch is a group of buttons (Tab moves between them); `tabs` is one Tab stop and the arrow keys (plus
+  Home and End) move and choose, per the ARIA tabs pattern; native radios move with the arrow keys on their own.
+- Pointer / touch: tapping an item chooses it.
+- Motion: the navy thumb slides to each new choice (North's "Toggle pill slide", `springs.indicator` .38 / .16), plain
+  CSS with no script and no new markup. The chosen item is a CSS anchor; the track's `::before` is the thumb, its four
+  edges easing on motion's own `spring(.38, .16)` written out as `linear()` (700 ms, a 0.8% give;
+  `--ws-spring-indicator-duration` and `--ws-spring-indicator`). At rest the chosen item paints its own ground (the 0.4 look
+  and the real ground for contrast tools); while the track is pointed at or holds focus the thumb takes over that
+  ground, so a choice made then slides, and a choice made in mid-flight turns toward the new item from where the thumb
+  is. A resize or a late font, away from the pointer, lands it at once. The words turn over 250 ms
+  (`--ws-duration-text`). Without CSS anchor positioning the ground moves at once; under reduced motion everything is
+  still. `--figures` keeps its cells (each has its own ground). Try it in the preview: click any item.
 
 ## Content
 
 - Short labels, sentence case, one or two words where possible ("Cold call", "This month").
-- A count beside a label is read as "(8)" to assistive tech, not spoken as part of the label itself.
-- No em dashes in a label.
+- A count is read as part of the item ("Needs a reply, 10").
+- No em dashes.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `label` | `string` | the group's own name (an `aria-label` on the switch or `nav`, the `aria-label` on `tablist`) |
-| `items` | `SegmentedItem[]` | `key`, `label`, `href` or `onSelect`, `current`, `icon?`, `count?`, `replace?`, `ariaLabel?`, `title?`, and (`tabs`) `id`/`controls` |
-| `tabs` | `boolean` | renders a real tab row instead of a switch |
+| `label` | `string` | the group's own name (`aria-label` on the switch, the `nav` or the `tablist`) |
+| `items` | `SegmentedItem[]` | `key`, `label`, `href` or `onSelect`, `current`, `icon?`, `count?`, `figure?`, `ariaLabel?`, `title?`, and (`tabs`) `id`/`controls` |
+| `tabs` | `boolean` | a real tab row instead of a switch |
 | `stretch` | `boolean \| 'always'` | fills the width on a phone, or at every width |
-| `dense` | `boolean` | tighter sides for a narrow column |
-| `quiet` | `boolean` | a sunk thumb with heading words instead of navy |
-| `pills` | `boolean` | separate pills instead of one track |
+| `size` | `'medium' \| 'small'` | `small` is the 28 px filter size |
+| `figures` | `boolean` | Seth's view tabs |
+| `clear`, `quiet`, `dense` | `boolean` | the looks above |
 | `className` | `string` | layout only |
 
 ## Rules
 
-- Every switch and tab row on the platform is `Segmented`, so the navy thumb always slides the same way; a screen never
-  draws its own tabs (13 Oct 2026, the owner's call).
-- `tabs` is a real tablist: `role="tablist"`, each a `tab` with `aria-selected`, the arrow keys, Home and End moving
-  between them and choosing as they go; a tab's panel fades in with `CrossFade`.
-- `quiet` exists so a switch never competes with the page's one navy primary button.
-- `pills` is the one place a switch is not a single track, for the Team page's own top-level tabs (23 Oct 2026).
+- Every switch and tab row of two to four items is `Segmented`, so the current item always moves the same way; a screen
+  never draws its own (13 Oct 2026).
+- `tabs` is a real tablist: `role="tablist"`, `tab`s with `aria-selected`, arrows, Home and End.
+- The track is Seth's well (D1): #EDEDED, no edge, 8 / 6 corners, 3 in, 2 apart; the 0.4.0 cream track with a hairline
+  is gone.
+- `--quiet` exists so a switch never competes with the page's one navy act.
+- More than four items on a phone become a `Select`.
 
 ## Source
 
-**Derived from**: the system's rule that every switch and tab row shares one sliding-thumb component, and the ARIA
-tabs pattern for `tabs`. **Precedent**: the first product built on the system.
+**Derived from**: Seth's well switch (Grow drawer tabs 301:2069; Review inbox filter 313:2737-2743: 3 in, 2 apart, 8 / 6
+corners, 32 px items, 13 / 18 words, navy current with cream words) and his view tabs (301:1658: cream cells, a name and
+a figure, the #2C4870 current). North's filter size (style1.css:804-808) for `sm` and its indicator spring. The geometry
+check's fixes: the stretch in a flex column, the 0 px icons, the touch height.
+
+## Markup
+
+```html
+<div class="ws-segmented" role="group" aria-label="Call kind">
+  <button type="button" class="ws-segmented__item" aria-pressed="true">Cold call</button>
+  <button type="button" class="ws-segmented__item" aria-pressed="false">Live transfer</button>
+</div>
+
+<div class="ws-segmented ws-segmented--figures" role="tablist" aria-label="Audit report">
+  <button type="button" role="tab" aria-selected="true" class="ws-segmented__item">Your score<span class="ws-segmented__figure">72</span></button>
+  <button type="button" role="tab" aria-selected="false" tabindex="-1" class="ws-segmented__item">Compared against other teams<span class="ws-segmented__figure">1 of 5</span></button>
+</div>
+
+<div class="ws-segmented" role="radiogroup" aria-label="Call length">
+  <label class="ws-segmented__item"><input type="radio" name="len" value="30" checked>30 min</label>
+  <label class="ws-segmented__item"><input type="radio" name="len" value="60">An hour</label>
+</div>
+```
+
+## Styles
+
+`design-system/components/Segmented/style.css`: `ws-segmented` with `--stretch`, `--figures`, `--clear`, `--quiet`,
+`--sm`, `--dense`; `ws-segmented__item` (and `--icon`), `__count`, `__figure`. The edge fade is the scroll-driven
+`ws-scroll-edges` (shared with `Tabs`); touch heights come from the house's touch block.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Actions" height=344 -->
+<!-- @dsCard group="Actions" height=760 -->
 <!doctype html>
 <html>
 <head>
@@ -11,48 +11,129 @@
 <div class="ws-stage ws-stage--column">
 
   <div class="ws-stack">
-    <span class="ws-muted">A three-item switch (a team's outreach card: Cold call chosen)</span>
+    <span class="ws-muted">The well switch: 3 px in, 2 apart, 32 px items, navy current (Seth's drawer tabs). Click any item on this page: the thumb slides to it on North's toggle pill spring</span>
     <div class="ws-segmented" role="group" aria-label="Call kind">
-      <button type="button" class="ws-segmented__item" aria-selected="true" aria-current="true">Cold call</button>
-      <button type="button" class="ws-segmented__item">Live transfer</button>
-      <button type="button" class="ws-segmented__item">Follow-up</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="true">Cold call</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Live transfer</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Follow-up</button>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">A tab row (role="tablist", arrow keys move between tabs)</span>
-    <ul role="tablist" aria-label="Sections" class="ws-segmented">
-      <li role="presentation"><button role="tab" id="tab-pipeline" aria-controls="panel-pipeline" aria-selected="true" tabindex="0" class="ws-segmented__item">Pipeline</button></li>
-      <li role="presentation"><button role="tab" id="tab-activity" aria-controls="panel-activity" aria-selected="false" tabindex="-1" class="ws-segmented__item">Activity</button></li>
-      <li role="presentation"><button role="tab" id="tab-reports" aria-controls="panel-reports" aria-selected="false" tabindex="-1" class="ws-segmented__item">Reports</button></li>
+    <span class="ws-muted">A tab row (role="tablist") with a count in the words</span>
+    <ul role="tablist" aria-label="Local search" class="ws-segmented">
+      <li role="presentation"><button role="tab" id="tab-where" aria-controls="panel-where" aria-selected="true" tabindex="0" class="ws-segmented__item">Where we checked</button></li>
+      <li role="presentation"><button role="tab" id="tab-why" aria-controls="panel-why" aria-selected="false" tabindex="-1" class="ws-segmented__item">Why</button></li>
+      <li role="presentation"><button role="tab" id="tab-fix" aria-controls="panel-fix" aria-selected="false" tabindex="-1" class="ws-segmented__item">Fix · 2</button></li>
+      <li role="presentation"><button role="tab" id="tab-found" aria-controls="panel-found" aria-selected="false" tabindex="-1" class="ws-segmented__item">Found</button></li>
     </ul>
   </div>
 
+  <div class="ws-stack" style="width: 360px; max-width: 100%;">
+    <span class="ws-muted">Stretched (equal shares), and clear: Seth's filter in a list head, no ground</span>
+    <div class="ws-segmented ws-segmented--stretch" role="group" aria-label="Report range">
+      <button type="button" class="ws-segmented__item" aria-pressed="false">This week</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="true">This month</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">All time</button>
+    </div>
+    <div class="ws-segmented ws-segmented--stretch ws-segmented--clear" role="group" aria-label="Reviews">
+      <button type="button" class="ws-segmented__item" aria-pressed="true">Needs a reply<span class="ws-segmented__count">10</span></button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">All<span class="ws-segmented__count">100</span></button>
+    </div>
+  </div>
+
   <div class="ws-stack">
-    <span class="ws-muted">Stretched to fill a 320px box</span>
-    <div style="width: 320px; max-width: 100%;">
-      <div class="ws-segmented ws-segmented--stretch" role="group" aria-label="Report range">
-        <button type="button" class="ws-segmented__item">This week</button>
-        <button type="button" class="ws-segmented__item" aria-selected="true" aria-current="true">This month</button>
-        <button type="button" class="ws-segmented__item">All time</button>
+    <span class="ws-muted">Figures: Seth's view tabs (a name at the left, its figure at the right; a row each when narrow)</span>
+    <div class="ws-segmented ws-segmented--figures" role="tablist" aria-label="Audit report">
+      <button type="button" role="tab" aria-selected="true" class="ws-segmented__item">Your score<span class="ws-segmented__figure">72</span></button>
+      <button type="button" role="tab" aria-selected="false" tabindex="-1" class="ws-segmented__item">Compared against other teams<span class="ws-segmented__figure">1 of 5</span></button>
+      <button type="button" role="tab" aria-selected="false" tabindex="-1" class="ws-segmented__item">Which AI platforms mention you<span class="ws-segmented__figure">10 of 16</span></button>
+    </div>
+  </div>
+
+  <div class="ws-cluster ws-cluster--loose ws-cluster--start">
+    <div class="ws-stack">
+      <span class="ws-muted">Small: North's filter size (28 px track)</span>
+      <div class="ws-segmented ws-segmented--sm" role="group" aria-label="Period">
+        <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="false">Quarter</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="false">Year</button>
+      </div>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">Quiet (beside the page's navy act)</span>
+      <div class="ws-segmented ws-segmented--quiet" role="group" aria-label="Show">
+        <button type="button" class="ws-segmented__item" aria-pressed="true">Open</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="false">Done</button>
+      </div>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">Dense (8 px sides), with an item that cannot be chosen yet (40%)</span>
+      <div class="ws-segmented ws-segmented--dense" role="group" aria-label="Reply as">
+        <button type="button" class="ws-segmented__item" aria-pressed="true">Text</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="false">Email</button>
+        <button type="button" class="ws-segmented__item" aria-pressed="false" disabled>Voice</button>
+      </div>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">With icons, and icons alone</span>
+      <div class="ws-cluster">
+        <div class="ws-segmented" role="group" aria-label="View">
+          <button type="button" class="ws-segmented__item" aria-pressed="true">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></svg>
+            Board
+          </button>
+          <button type="button" class="ws-segmented__item" aria-pressed="false">
+            <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="M2 4h12M2 8h12M2 12h12"/></svg>
+            List
+          </button>
+        </div>
+        <div class="ws-segmented" role="group" aria-label="Chart">
+          <button type="button" class="ws-segmented__item ws-segmented__item--icon" aria-pressed="true" aria-label="Bars" title="Bars">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 13V8M8 13V3M12 13V6"/></svg>
+          </button>
+          <button type="button" class="ws-segmented__item ws-segmented__item--icon" aria-pressed="false" aria-label="Line" title="Line">
+            <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="M2 12l4-4 3 2 5-6"/></svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">With icons</span>
-    <div class="ws-segmented" role="group" aria-label="View">
-      <button type="button" class="ws-segmented__item" aria-selected="true" aria-current="true">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></svg>
-        Board
-      </button>
-      <button type="button" class="ws-segmented__item">
-        <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="M2 4h12M2 8h12M2 12h12"/></svg>
-        List
-      </button>
+    <span class="ws-muted">A form's choice: native radios inside the items (arrow keys move the choice)</span>
+    <div class="ws-segmented" role="radiogroup" aria-label="Call length">
+      <label class="ws-segmented__item"><input type="radio" name="len" value="15">15 min</label>
+      <label class="ws-segmented__item"><input type="radio" name="len" value="30" checked>30 min</label>
+      <label class="ws-segmented__item"><input type="radio" name="len" value="60">An hour</label>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 300px; max-width: 100%;">
+    <span class="ws-muted">Too many for its column: the track scrolls inside (on a phone, past four, use a Select)</span>
+    <div class="ws-segmented" role="group" aria-label="Stage">
+      <button type="button" class="ws-segmented__item" aria-pressed="false">New</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="true">Quote sent</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Signed</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Closed won</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Closed lost</button>
     </div>
   </div>
 
 </div>
+<script>
+/* The demo's wiring: a click chooses the item (an app keeps the choice; the kit only draws it, and the thumb slides on
+   its own). The radios choose themselves. */
+document.addEventListener('click', (e) => {
+  const item = e.target.closest('button.ws-segmented__item');
+  const attr = item && !item.disabled && ['aria-pressed', 'aria-selected', 'aria-current'].find((a) => item.hasAttribute(a));
+  if (!attr) return;
+  for (const i of item.closest('.ws-segmented').querySelectorAll('.ws-segmented__item')) {
+    i.setAttribute(attr, String(i === item));
+    if (attr === 'aria-selected') i.tabIndex = i === item ? 0 : -1;
+  }
+});
+</script>
 </body>
 </html>

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

@@ -0,0 +1,94 @@
+/* ---- Segmented: Seth's well switch (0.5.0, D1; 301:2069, 313:2737): the #EDEDED well with no edge, 8 px corners, 3 px
+   inside, items 2 apart, 32 tall, 6 px corners, 13 / 18 medium navy words; the current item navy with cream words. It
+   sits at its own width (a flex column never stretches it), never wider than its column (it scrolls inside, never
+   clipping its inset focus ring). Restates the house's Segmented block, so that copy can go. ---- */
+.ws-segmented { display: inline-flex; align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: var(--ws-halo); gap: var(--space-3xs); border-radius: var(--ws-radius-card); background: var(--ws-well); box-shadow: none; }
+.ws-segmented::-webkit-scrollbar { display: none; }
+/* Wider than its column, the track fades at the edge that hides items (the house ws-scroll-edges fade; nothing when it fits). */
+@supports (animation-timeline: scroll()) {
+  .ws-segmented { 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-segmented > li { display: flex; }
+.ws-segmented__item { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--space-xxs-plus); height: var(--ws-control-h); padding: 0 var(--space-sm); border: 0; border-radius: var(--ws-radius-row); background-color: transparent; color: var(--color-text-heading); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; white-space: nowrap; cursor: pointer; }
+.ws-segmented__item svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); }
+/* A count inside an item ("Fix · 2", "Needs a reply 10"): the item's own words, 8 from the label, numerals even. */
+.ws-segmented__count { margin-inline-start: var(--space-3xs); font-variant-numeric: tabular-nums; }
+/* An item can hold a native radio (a form's choice, the theme switch): the label is the target, the input is hidden. */
+.ws-segmented__item > input { position: absolute; width: var(--ws-line); height: var(--ws-line); margin: 0; opacity: 0; pointer-events: none; }
+.ws-segmented__item:has(> input:focus-visible) { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) {
+  .ws-segmented__item:not(:where(:disabled, :has(> input:disabled))):hover { background-color: var(--ws-hover); color: var(--color-text-heading); }
+}
+/* The current item paints its own ground over the hover beat. Where the browser anchors (Motion, at the end), one thumb
+   under the items paints it instead and slides to each new choice. */
+.ws-segmented__item[aria-selected="true"], .ws-segmented__item[aria-current]:not([aria-current="false"]), .ws-segmented__item[aria-checked="true"], .ws-segmented__item[aria-pressed="true"], .ws-segmented__item:has(> input:checked) { background-color: var(--color-text-heading); color: var(--ws-on-act); }
+.ws-segmented__item:has(> input:disabled), .ws-segmented__item:disabled { opacity: 0.4; cursor: not-allowed; }
+/* Focus on the current item: a navy ring on a navy fill would vanish (and a radio group's focus always sits on its
+   chosen item), so the ring there is the fill's own words colour, 2 px further in. */
+.ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"]):focus-visible, .ws-segmented__item:has(> input:checked:focus-visible) { outline-color: var(--ws-on-act); outline-offset: calc(var(--ws-focus-width) * -2); }
+
+/* stretch: equal shares of the width, never narrower than an item's words (past that the track scrolls). clear: no
+   ground (Seth's filter in a list head). quiet: the current item cream (the raised ground, so it still shows on the
+   dark well) with navy words, beside the page's one navy act. dense: tighter sides beside the chat. */
+.ws-segmented--stretch { display: flex; align-self: stretch; }
+.ws-segmented--stretch > * { flex: 1 1 0; }
+/* A clear track has no ground to hold its 3 px halo, so the halo keeps only its height: the first and last items sit on
+   the column's edges, in line with the rows and words above and below (Seth's track p 3 with no fill showed only as a
+   3 px miss). */
+.ws-segmented--clear { padding-inline: 0; background: transparent; }
+.ws-segmented--dense .ws-segmented__item { padding: 0 var(--space-xs); }
+/* In dark the raised ground is barely off the well (1.14:1), so there the chosen item takes the tray, a step lighter,
+   with the card edge inside it (derived: Seth draws only light). */
+.ws-segmented--quiet { --ws-segmented-quiet: var(--ws-raised); --ws-segmented-quiet-edge: transparent; }
+[data-theme="dark"] .ws-segmented--quiet { --ws-segmented-quiet: var(--ws-tray); --ws-segmented-quiet-edge: var(--ws-edge-card); }
+@media (prefers-color-scheme: dark) { [data-theme="system"] .ws-segmented--quiet { --ws-segmented-quiet: var(--ws-tray); --ws-segmented-quiet-edge: var(--ws-edge-card); } }
+.ws-segmented--quiet .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) { background-color: var(--ws-segmented-quiet); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-segmented-quiet-edge); color: var(--color-text-heading); }
+.ws-segmented--quiet .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"]):focus-visible, .ws-segmented--quiet .ws-segmented__item:has(> input:checked:focus-visible) { outline-color: var(--ws-focus-color); outline-offset: calc(var(--ws-focus-width) * -1); }
+/* sm: North's filter size (style1.css:804): a 28 px track on the surface with the 0.5 px edge inside, 2 in, items
+   24 tall, 10 sides, 4 px corners, 12 / 16 words. */
+.ws-segmented--sm { padding: var(--space-3xs); border-radius: var(--ws-radius-row); background: var(--color-surface); box-shadow: var(--ws-shadow-hairline-in); }
+.ws-segmented--sm .ws-segmented__item { height: var(--space-lg); padding: 0 var(--space-xs-plus); border-radius: var(--ws-radius-control); font-size: var(--ws-text-dense); line-height: var(--space-md); }
+/* An item that is an icon alone (its name in aria-label): square, 32 (28 by 24 in sm). */
+.ws-segmented__item--icon { width: var(--ws-control-h); padding: 0; }
+.ws-segmented--sm .ws-segmented__item--icon { width: var(--ws-control-h-sm); padding: 0; }
+
+/* figures: Seth's view tabs (301:1658): each item a cream cell, its name at the left (13 / 18 body grey) and its figure
+   at the right (15 / 20 semibold navy), 40 tall, 10 / 14 inside. The current cell is Seth's #2C4870 (light; the act in
+   dark) with cream words. Cells wrap to a row each when the track is too narrow for three names. */
+.ws-segmented--figures { display: flex; flex-wrap: wrap; align-self: stretch; overflow: visible; mask-image: none; animation: none; }
+.ws-segmented--figures > * { flex: 1 1 var(--space-9xl); min-width: 0; }
+.ws-segmented--figures .ws-segmented__item { justify-content: space-between; gap: var(--space-sm); height: auto; min-height: var(--space-2xl); padding: var(--space-xs-plus) var(--space-sm-plus); background-color: var(--ws-raised); color: var(--color-text-body); white-space: normal; text-align: start; }
+.ws-segmented__figure { flex-shrink: 0; font-size: var(--ws-text-section); line-height: var(--ws-leading-row); font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
+@media (hover: hover) {
+  .ws-segmented--figures .ws-segmented__item:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); }
+}
+.ws-segmented--figures .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) { background-color: var(--ws-agent-tally); background-image: none; color: var(--ws-on-act); }
+.ws-segmented--figures .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) .ws-segmented__figure { color: inherit; }
+@media (pointer: coarse) { .ws-segmented__item--icon, .ws-segmented--sm .ws-segmented__item--icon { min-width: var(--ws-touch); } }
+
+/* ---- Motion: North's "Toggle pill slide" (springs.indicator, .38 / .16; north-motion 3). A thumb slides to each new
+   choice instead of the ground jumping from item to item. The chosen item is the anchor (CSS anchor positioning) and
+   the track's ::before is the thumb, under the items, its four edges easing on motion's own spring(.38, .16) written
+   out as linear() (motion's toString: 700 ms, a 0.8% give). At rest the chosen item paints its own ground, so a resting
+   track is the 0.4 track pixel for pixel (and every contrast tool reads the real ground); while the track is pointed at
+   or holds focus the thumb takes over that ground (the same box, the same paint, at once), so a choice made then
+   slides. Only a real choice moves it (North: the pill moves only on a real selection); a resize or a late font, away
+   from the pointer, lands at once. No new markup, so a 0.4 track slides too. Without anchor positioning, or under
+   reduced motion, the ground moves at once. --figures keeps its cells: each has its own ground. The words turn over
+   250 ms (North css:150).
+   The spring is the global --ws-spring-indicator over --ws-spring-indicator-duration. ---- */
+@supports (anchor-name: --a) {
+  .ws-segmented:not(.ws-segmented--figures) { position: relative; anchor-scope: --ws-segmented-thumb; }
+  .ws-segmented:not(.ws-segmented--figures)::before { content: ""; position: absolute; position-anchor: --ws-segmented-thumb; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); border-radius: var(--ws-radius-row); background: var(--color-text-heading); opacity: 0; pointer-events: none; }
+  .ws-segmented--sm:not(.ws-segmented--figures)::before { border-radius: var(--ws-radius-control); }
+  .ws-segmented--quiet:not(.ws-segmented--figures)::before { background: var(--ws-segmented-quiet); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-segmented-quiet-edge); }
+  .ws-segmented:not(.ws-segmented--figures) .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) { anchor-name: --ws-segmented-thumb; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ws-segmented__item { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-text) var(--ws-ease-soft); }
+  @supports (anchor-name: --a) {
+    .ws-segmented:not(.ws-segmented--figures):is(:hover, :focus-within)::before { opacity: 1; transition: inset var(--ws-spring-indicator-duration) var(--ws-spring-indicator); }
+    .ws-segmented:not(.ws-segmented--figures):is(:hover, :focus-within) .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) { background-color: transparent; box-shadow: none; }
+    .ws-segmented:not(.ws-segmented--figures) .ws-segmented__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) { transition: color var(--ws-duration-text) var(--ws-ease-soft); }
+  }
+}

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

@@ -0,0 +1,64 @@
+Progress split by area and by step: Seth's "1 of 6" figure, a line under it, and one bar of segments with each area named.
+
+**Use it when**
+
+- A checklist's progress has a few areas, each with its own steps (fixes by Website, Social, Local search), and the
+  page opens on how far along the whole thing is.
+- The reader should see both the total ("1 of 6") and where the done steps are.
+
+**Not for**
+
+- One share with no areas: use `TickStrip` or `Meter`.
+- Ordered steps someone walks through: use `Stepper`.
+- A score: use `ScoreHero`.
+
+**Anatomy**
+
+- A column, 6 apart (`--space-xxs-plus`): the figure (`ws-figure ws-figure--pane`, 44/48 regular navy, proportional
+  numerals so its ink sits on the bar's edge), the line (14/20 `--color-text-body`), the areas.
+- Areas: equal columns 12 apart, at least 96 wide, so on a narrow column they wrap onto the same columns (16 between
+  rows). Each area is a `TickStrip --bar` (one segment a step: 12 tall, 4 apart, 2 px corners; done teal, the rest the
+  track) and 8 under it its label (13/18 medium `--color-text-muted`, one line, a `title` when it can truncate).
+
+**States**
+
+- Default: done segments in teal.
+- Draw (`--draw` on a strip, `--i` on each lit segment): segments rise in as the card's draw.
+- Nothing done: every segment the track; the figure says "0 of 6".
+- Long label: truncates with its `title`.
+- Reduced motion: in place.
+- Hover, focus: none; each area's list below the bar is where people act.
+
+**Behaviour**
+
+- The `<section>` carries `aria-label` with the total and each area ("1 of 6 fixes done: Website 0 of 2 ..."); the
+  areas are `aria-hidden`.
+
+**Rules**
+
+- Areas keep the order of the list below them, so the bar is a map of the page.
+- Equal widths, whatever each area's count (Seth's frame holds two a group, so a width by count is unknown).
+- One tone: done is teal; there is no partial tone.
+
+**Source**
+
+**Seth**: Fixes checklist, "Progress by area" (308:2481 to 308:2501): figure, line and bar 6 apart, areas 12 apart,
+segments 4 apart and 12 tall, labels 8 under.
+
+**Markup**
+
+```html
+<section class="ws-segmented-progress" aria-label="1 of 6 fixes done: Website 0 of 2, Social 1 of 2, Local search 0 of 2">
+  <p class="ws-figure ws-figure--pane">1 of 6</p>
+  <p class="ws-segmented-progress__line">From your Nov 2 audit.</p>
+  <div class="ws-segmented-progress__areas" aria-hidden="true">
+    <div class="ws-segmented-progress__area">
+      <div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span></div>
+      <span class="ws-segmented-progress__label">Social</span>
+    </div>
+  </div>
+</section>
+```
+
+**Styles**: `SegmentedProgress/style.css` (with `TickStrip/style.css`), in `bundle.css` and `fello.css` as
+`.ws-segmented-progress`. Every value is a token.