@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,85 +1,106 @@
-The foot of a card that holds more rows than it shows at once: where you are in the list, and the two acts that move
+The foot of a card that holds more rows than it shows at once: where you are in the list, and the acts that move
 through it.
 
 ## Use it when
 
-- A `Table` or a long list of rows is too big to show whole and is paged rather than infinitely scrolled.
-- The person benefits from knowing exactly how many rows there are and where this page sits in them.
+- A `Table` or a long list of rows is too big to show whole and is paged rather than scrolled.
+- The person benefits from knowing how many rows there are and where this page sits in them.
 
 ## Not for
 
-- A short list that fits without paging: no pagination appears at all.
-- An infinite or "load more" list: that is a different pattern (a `Button` at the foot, "Show 25 more"), not this piece.
-- The page itself: pagination belongs in a card's foot, never floating on the page or in the header band (which holds
-  the card's one primary act instead).
+- A short list that fits: no pagination at all.
+- A "load more" list: a `Button` at the foot ("Show 25 more").
+- The page itself: pagination is a card's foot, never floating on the page.
 
 ## Anatomy
 
-- Sits in a card's foot: a hairline (`--ws-edge-card`) above it, the same padding as the card's own sides.
-- Left: a 13 px meta line (`--ws-text-meta`, `--color-text-muted`) stating the range and the total, "1 to 25 of 212".
-- Right: two 32 px ghost icon buttons (`IconButton`, `--ws-control-h`) for the previous and next chevrons, and a small
-  `Select` for rows per page (25, 50, 100).
-- The row sits below the card's content, never inside the band (the band is reserved for the card's one act).
+- A card's foot (`.ws-pagination`): Seth's 0.5 px divider above it (`--ws-divider`), 8 above and below, the card's
+  20 px content edge at the sides (`--ws-card-inset`), its two halves 12 apart.
+- Left: the range and the total (`__range`), 13 / 16 in muted, tabular figures, one line ("1 to 25 of 212").
+- Right (`__end`), 12 apart:
+  - Rows per page (`__rows`): "Rows" in `ws-muted`, 8, then `Select`'s small one (`ws-select ws-select--sm` in its
+    `ws-select-wrap` with the 12 px navy chevron): 28 tall, 12 / 16 medium figures; on touch 40 tall with 16 px figures,
+    so a phone never zooms into it on focus. A bare `<select>` (0.4 markup) still draws, with the OS caret.
+  - The chevrons (`__nav`), 4 apart: two 32 px ghost `IconButton`s (40 on touch).
+- On a narrow card the right half wraps under the range, at the right.
 
 ## Variants and sizes
 
 | Part | Size | Token |
 | --- | --- | --- |
-| Chevron buttons | 32 px, ghost | `IconButton` default |
-| Rows-per-page select | small | `--ws-control-h-sm` (28 px) |
-| Meta line | 13 px | `--ws-text-meta` |
+| Chevron buttons | 32 (40 on touch), ghost | `IconButton` default |
+| Rows-per-page select | 28 (40 on touch) | `Select` `--sm` |
+| Range line | 13 px | `--ws-text-meta` |
 
 ## States
 
-- **First page**: the previous chevron is `disabled` (40% opacity, no pointer events), the next chevron active.
-- **Middle page**: both chevrons active.
-- **Last page**: the next chevron `disabled`, the previous chevron active.
-- **Only one page**: the whole pagination row does not render; a single-page list needs no foot at all.
-- **Loading the next page**: the chevron just pressed shows the button's own pending state (the working dot) rather
-  than a separate spinner; a second press is refused while it runs (`aria-busy`).
-- **Focus**: the kit's `--shadow-focus-ring` on each chevron and the select.
+- **First page**: Previous `disabled`, Next active.
+- **Middle page**: both active.
+- **Last page**: Next `disabled`.
+- **Only one page**: the foot is not drawn.
+- **Loading the next page**: the pressed chevron shows the button's pending state; a second press waits
+  (`aria-busy`).
+- **Narrow**: the right half goes under the range.
+- **Hover** (pointers that hover): the chevrons take `IconButton`'s wash; the select's edge darkens (`Select`).
+- **Focus**: the house's 2 px navy ring on each chevron and the select.
 
 ## Behaviour
 
-- Keyboard: both chevrons are real `<button>`s, reachable by Tab, activated by Enter or Space; the select is a native
-  `<select>`.
-- Pointer: a chevron press moves one page; the rows select changes the page size and returns to page 1.
-- Touch: both icon buttons meet the 40 px floor on a coarse pointer, same as any `IconButton`.
-- Motion: rows cross-fade rather than re-stagger when the page changes, matching the system's rule for search results
-  replacing a list (`10-patterns.md`, "Search, filters and sorting").
+- Keyboard: the chevrons are real `<button>`s; the select is a native `<select>`.
+- Pointer: a chevron moves one page; the rows select changes the page size and returns to page 1.
+- Motion: rows cross-fade when the page changes, never re-stagger.
 
 ## Content
 
-- The meta line always states both the visible range and the total: "1 to 25 of 212", never a bare page number like
-  "Page 1 of 9" alone, so a person always sees the scale of the whole list.
-- No em dashes; "to" joins the range, not a dash.
+- The range always states the visible rows and the total ("1 to 25 of 212"), never "Page 1 of 9" alone.
+- "to" joins the range; no dashes.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `page` | `number` | The current page, 1-based |
+| `page` | `number` | The current page, from 1 |
 | `pageSize` | `number` | Rows per page |
-| `total` | `number` | Total rows across every page |
-| `pageSizeOptions` | `number[]` | Choices for the rows select, default `[25, 50, 100]` |
-| `onPageChange` | `(page: number) => void` | Called on a chevron press |
-| `onPageSizeChange` | `(size: number) => void` | Called when the rows select changes |
+| `total` | `number` | Rows across every page |
+| `pageSizeOptions` | `number[]` | The rows select's choices, default `[25, 50, 100]` |
+| `onPageChange` | `(page: number) => void` | A chevron press |
+| `onPageSizeChange` | `(size: number) => void` | The rows select changed |
 
 ## Rules
 
-- **Lives in a card's foot, never the band**: the band is the card's one primary act; pagination is
-  a second, quieter kind of foot content, so it sits in a plain footer of its own below the band or in place of it when
-  the card has no primary act.
-- **Ghost, not boxed, chevrons**: matching the row-act convention (`Button` secondary or ghost, small, for a row's quiet
-  acts), since paging is a frequent, low-weight act, not the page's one thing to do.
-- **The total is always shown**, honouring the system's "honest data" principle: a person is never left guessing how
-  much more there is.
-- **A page-at-a-time control for long collections**: a lead list, a report of calls, needs paging that a chat-first
-  card never required. Derived from the card's foot pattern, the meta text size, and `IconButton`'s ghost default.
+- **A card's foot, never its band**: the band holds the card's one act.
+- **Ghost chevrons**: paging is frequent and quiet.
+- **The total is always shown**.
 
 ## Source
 
-- **Derived from**: the card foot pattern (the card band's foot placement, `ws-band`, restyled as a plain hairline-topped strip
-  rather than the tinted band), `--ws-text-meta` for the range line, and `Select`'s small size for rows per page.
-- **Precedent**: an intentional addition decided from the system, 26 Oct 2026, since no screen in the first product
-  built on the system paginates a list (its lists are short enough for one card, or scroll inside it).
+**Derived from**: the card foot pattern, Seth's 0.5 px divider (D5), `--ws-text-meta` and `Select`'s small size, and
+the geometry check (4 Nov 2026: at 320 the right half ran past the card; the select was 28 tall on touch).
+**Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+
+## Markup
+
+```html
+<footer class="ws-pagination">
+  <span class="ws-pagination__range">1 to 25 of 212</span>
+  <div class="ws-pagination__end">
+    <div class="ws-pagination__rows">
+      <span class="ws-muted">Rows</span>
+      <span class="ws-select-wrap">
+        <select class="ws-select ws-select--sm" aria-label="Rows per page"><option>25</option><option>50</option><option>100</option></select>
+        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+      </span>
+    </div>
+    <div class="ws-pagination__nav">
+      <button type="button" class="ws-icon-btn" disabled aria-label="Previous page"><!-- 16 px chevron --></button>
+      <button type="button" class="ws-icon-btn" aria-label="Next page"><!-- 16 px chevron --></button>
+    </div>
+  </div>
+</footer>
+```
+
+## Styles
+
+`Pagination/style.css`; the chevrons are `IconButton`'s, the rows select is `Select`'s. Tokens: `--ws-divider`, `--ws-card-inset`,
+`--ws-text-meta`, `--ws-text-dense`, `--ws-control-h-sm`, `--ws-radius-control`, `--ws-field`, `--ws-field-ink`,
+`--ws-edge-card`, `--ws-hairline`, `--color-text-muted`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Navigation" height=503 -->
+<!-- @dsCard group="Navigation" height=463 -->
 <!doctype html>
 <html>
 <head>
@@ -19,11 +19,14 @@
         <div class="ws-pagination__end">
           <div class="ws-pagination__rows">
             <span class="ws-muted">Rows</span>
-            <select aria-label="Rows per page">
-              <option>25</option>
-              <option>50</option>
-              <option>100</option>
-            </select>
+            <span class="ws-select-wrap">
+              <select class="ws-select ws-select--sm" aria-label="Rows per page">
+                <option>25</option>
+                <option>50</option>
+                <option>100</option>
+              </select>
+              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+            </span>
           </div>
           <div class="ws-pagination__nav">
             <button type="button" class="ws-icon-btn" disabled aria-label="Previous page">
@@ -47,11 +50,14 @@
         <div class="ws-pagination__end">
           <div class="ws-pagination__rows">
             <span class="ws-muted">Rows</span>
-            <select aria-label="Rows per page">
-              <option selected>25</option>
-              <option>50</option>
-              <option>100</option>
-            </select>
+            <span class="ws-select-wrap">
+              <select class="ws-select ws-select--sm" aria-label="Rows per page">
+                <option selected>25</option>
+                <option>50</option>
+                <option>100</option>
+              </select>
+              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+            </span>
           </div>
           <div class="ws-pagination__nav">
             <button type="button" class="ws-icon-btn" aria-label="Previous page">
@@ -75,10 +81,13 @@
         <div class="ws-pagination__end">
           <div class="ws-pagination__rows">
             <span class="ws-muted">Rows</span>
-            <select aria-label="Rows per page">
-              <option>25</option>
-              <option selected>100</option>
-            </select>
+            <span class="ws-select-wrap">
+              <select class="ws-select ws-select--sm" aria-label="Rows per page">
+                <option>25</option>
+                <option selected>100</option>
+              </select>
+              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+            </span>
           </div>
           <div class="ws-pagination__nav">
             <button type="button" class="ws-icon-btn" aria-label="Previous page">

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

@@ -0,0 +1,12 @@
+/* ---- Pagination: a card's foot for a long list, the range at the left, rows per page and the chevrons at the right, on
+   the card's 20 edge under Seth's 0.5 px divider. On a narrow card the right half wraps under the range. ---- */
+.ws-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); padding: var(--space-xs) var(--ws-card-inset); border-top: var(--ws-divider); }
+.ws-pagination__range { font-size: var(--ws-text-meta); line-height: var(--space-md); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-pagination__end { display: flex; align-items: center; gap: var(--space-sm); margin-inline-start: auto; }
+.ws-pagination__nav { display: flex; align-items: center; gap: var(--space-xxs); }
+.ws-pagination__rows { display: flex; align-items: center; gap: var(--space-xs); }
+/* The rows select is Select's small one (ws-select ws-select--sm in its wrap). A bare <select> (0.4 markup) keeps its old
+   look, and on touch its words go to 16 so a phone does not zoom into it on focus. */
+.ws-pagination__rows .ws-select { font-variant-numeric: tabular-nums; }
+.ws-pagination__rows select:not(.ws-select) { height: var(--ws-control-h-sm); padding: 0 var(--space-xxs); border: 0; border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); color: var(--ws-field-ink); font-size: var(--ws-text-dense); font-variant-numeric: tabular-nums; cursor: pointer; }
+@media (pointer: coarse) { .ws-pagination__rows select:not(.ws-select) { font-size: var(--ws-text-value); } }

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

@@ -1,90 +1,148 @@
-The thing opened beside the chat: one panel, holding one thing at a time, docked to the canvas's edge.
+The thing opened beside the page or the chat: one pane, holding one thing at a time, as Seth draws the check drawer.
 
 ## Use it when
 
-- The person opens a specific thing from the chat (a lead, a draft, an issue, a chart) and should keep the chat or the page beside it.
-- A page's own side detail (an area, an issue) needs to sit beside the list without covering it, on a wide enough screen.
-- The content is one thing's full detail, not a set of unrelated choices (which would be a `Menu`) or a short modal task (which would be a `Dialog`).
+- The person opens one thing (a check, a lead, a draft, a chart) and should keep the page or the chat beside it.
+- A list's row opens its detail beside the list, on a wide enough screen.
+- The content is one thing's full detail, not a set of choices (`Menu`) or a short blocking task (`Dialog`).
 
 ## Not for
 
-- A task that should block the rest of the screen until it is done: use `Dialog`.
+- A task that must block the rest of the screen until it is done: use `Dialog`.
 - A list of short actions near a button: use `Menu`.
-- A page shown full screen in place of the chat: that is an app page, not a panel.
-- Repeating something the chat or the page already shows: a panel never duplicates a fact already on screen (the system's rule).
+- A page shown full screen in place of the chat: that is an app page.
+- Repeating something already on screen: a panel never says again what the page or the chat shows.
 
 ## Anatomy
 
-- Docks beside the canvas from a wide enough area (so nothing is covered); below that width it slides in over the page instead, full height (full width on a phone).
-- Width: `--ws-thing-width` (440 px), at most half the stage; resizable by drag or by keyboard on the handle, remembered per browser.
-- A header line across its top: the thing's kind on the left (an eyebrow, such as "Lead"), its own small actions and "Close" (never a close icon, always the word) on the right.
-- Its content below, scrolling on its own when it is tall.
-- Round only where it floats: flush to a phone's edge it rounds just its left side; docked on a wide screen it is a rounded surface with the hairline edge and a small gap from the frame's edges.
+- The pane: 440 wide (`--ws-thing-width`), never wider than its row. A 1 px `--ws-tray` rim, 12 px corners
+  (`--ws-radius-drawer`, 11 inside), the `--ws-raised` ground. No shadow and no edge of its own: it sits in the page,
+  not over it. It fills its row's height; the page puts it 24 from what it sits beside (Seth: report 886, gap 24,
+  panel 440).
+- Head (`ws-panel__head`): 20 above, 28 at the sides. The title row (`ws-panel__title-row`): the 22 / 28 title and an
+  optional tag (a `Chip`; "Needs work" is `ws-chip--needs-work`, the pink tint with its AA word), 10 apart; one 14 / 20 line under it, 4 apart. The close (`ws-panel__close`): a 32 px tray
+  square with 6 px corners and a navy 16 px x, centred on the title's first line, 12 from the title block.
+- Body (`ws-panel__body`): scrolls on its own. It holds sections (`ws-panel__section`): 20 above and below, 28 at the
+  sides, their parts 16 apart, each after the first opening with a full-width 0.5 px hairline (`--ws-divider`). The
+  first section follows the head at 16 (Seth's figure row: a 44 / 48 figure and its strip, 20 apart,
+  `ws-panel__figure-row`). The strip takes the rest of the line and must shrink with it: ticks that flex (Seth's 40
+  ticks, 32 tall, 2 apart), never a row of fixed ticks, which runs past the pane on a phone.
+- Foot (`ws-panel__foot`): sections pinned under the body, the first opening with the hairline. Seth's next fix
+  (`ws-panel__next`): a 13 / 18 medium muted label ("Next fix · 1 of 2", `ws-control-words`) 6 above the 15 / 22 fix
+  (`ws-section`), one part of the section, so the 16 between parts never comes between them. Its acts
+  (`ws-panel__acts`, Seth's grey `ws-btn--well` then the navy primary, both `lg`) share the width in equal halves,
+  8 apart, the one primary last; where a half would be under 160 or a label would break, they stack full width, the
+  primary at the bottom. `ws-panel__section--tight` (12 above and below) holds a one-line ask field.
 
 ## Variants and sizes
 
 | Context | Behaviour |
 | --- | --- |
-| Wide area (desktop) | Docks beside the canvas, which narrows to make room; resizable, width remembered |
-| Narrower than the docking threshold | Slides in over the page, full height, inside the area |
-| Phone | Fills the screen |
-| Widened | Takes the whole stage, the chat stepping aside |
+| Wide screen | Beside the page or the chat, 440 wide; the page beside it narrows |
+| Under 40rem | The whole screen (`position: fixed; inset: 0`), no rim, no corners (K5) |
+| Busy | The chrome stays; the body shows `.ws-shimmer` ghosts in the shapes of what is coming |
 
 ## States
 
-- **Entering**: slides in (`ws-slide-in`, opacity and a small `translateX` from `--space-lg`, over `--ws-duration-settle` on `--ws-ease-soft`).
-- **Open**: docked beside the canvas or floating over the page, scrollable content.
-- **Leaving**: it slides back towards its edge and fades (`ws-slide-out`, `--ws-duration-gentle` on `--ws-ease-exit`), then gives its room back to the canvas at once, before the next page finishes loading; with reduced motion it simply goes.
-- **Busy** (its content loading): the content area shows its own loading state (a skeleton); the panel chrome itself does not change.
-- **Narrow**: below the docking width it stops narrowing the canvas and instead overlays it.
-- **Touch**: the resize handle shows only from the `lg` area upward; on a phone there is nothing to resize, since the panel is the screen.
+- **Entering** (North's docked panel, js@647700, "Opens / moves / docks"): it grows out of .97 (`--ws-open-scale`)
+  from the edge it docks to on the panel spring (`--ws-spring-panel`, .42 / .12), fading in over
+  `--ws-duration-hover` (.2 s) and out of an 8 px blur (`--ws-blur-panel`) over .24 s, each on its own clock.
+- **Open**: the head and the foot stay; the body scrolls. Focused as a keyboard scroller, the body draws its ring inside.
+- **Leaving** (`ws-panel--leaving` or `data-leaving`): it goes back to .97 into a 6 px blur, fading, over .16 s
+  (North's chat exit, js@674822; `--ws-panel-out`), faster than it came, taking no presses; remove it 160 ms later,
+  before the page without it renders. With reduced motion it simply goes.
+- **Busy** (`aria-busy="true"`): the body holds `.ws-shimmer` ghosts; the line under the title says what is being
+  fetched ("Checking 9 searches near you.").
+- **Long title**: wraps beside the close; the close stays on the first line.
+- **Phone**: it is the screen; its acts stack when they do not fit side by side. While it is open the app makes the
+  page behind it `inert`, so Tab and a screen reader stay in the panel.
 
 ## Behaviour
 
-- Keyboard: drag handle aside, the panel's own content takes normal tab order; Escape and the "Close" word both close it.
-- Pointer: its left edge is a drag handle (`role="separator"`) to resize it; double-click resets it to its default width.
-- Touch: on a touch screen smaller than the docking width, the panel takes the whole area; nothing to drag.
-- Motion: entrance `ws-slide-in`, exit `ws-slide-out`, both opacity plus a small horizontal shift, never a scale or bounce.
-- Reduced motion: it appears and disappears in place, without the slide.
+- Keyboard: the close comes after the title in tab order; Escape and the close both close it. Focus moves into it when
+  it opens and back to the row that opened it when it closes.
+- Pointer: the close, or the row that opened it pressed again.
+- Touch: the close and the acts are 40 tall.
+- Reduced motion: it appears and goes in place.
+- The preview's last stack is live: press Website, then its close.
 
 ## Content
 
-- One thing at a time: opening a second thing from the same chat replaces what the panel shows, it never stacks.
-- The header never names more than the thing's kind; the thing's own name or title lives in the panel's content, said once.
-- Nothing the chat or the page already shows is repeated inside the panel.
+- One thing at a time: opening another thing replaces what the panel shows; it never stacks.
+- The title is the thing's own name ("Local search"), said once; the tag says its state ("Needs work").
+- The line under the title says what the thing is, in one sentence.
+- The foot says what to do next and holds at most two acts.
 
 ## Props
 
-**`DockedPane`**
+**`DockedPane`** (the reference implementation)
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `storageKey` | string | Where its width is remembered (per browser). |
 | `bounds` | `{ min, max, fallback }` | The widths it can be dragged between, and its default. |
 | `label` | string | What the pane is, for its resize handle ("Resize the lead"). |
-| `leaving` | boolean | The pane is on its way out: it slides back to its edge and fades, then gives its room back before the page answers. |
-| `children` | `ReactNode` | The pane's content, including its own header. |
-
-**`useRoutePane`**
-
-| Name | Type | Meaning |
-| --- | --- | --- |
-| `node` | `HTMLElement \| null` | The pane's root, so focus can move into it when it opens. |
-| `closeHref` | string | Where Escape or the scrim sends the page. |
-| `openSelector` | string | What reopens focus to, matching the link that opened this pane. |
-| `close` | `() => void` | Optional: called instead of navigating straight away, so a close can animate first. |
+| `leaving` | boolean | On its way out: adds `ws-panel--leaving`, then gives its room back. |
+| `children` | `ReactNode` | The pane's head, body and foot. |
 
 ## Rules
 
-- Never an "x": the panel's close control is always the word "Close" (the system's rule, the side workspace).
-- "A thing or a rich card opened from the chat takes the same place; the home screen steps aside" (the system's
-  rule): only one panel's worth of content shows at a time.
-- An unmount is too late to animate a close: `leaving` lets the pane finish its own exit motion before the page without it renders.
-- What the chat already shows is never repeated in the panel (the system's rule: "the home screen has no 'From this chat' list").
+- The close is the tray square with an x (Seth, 301:2021). It replaces the word "Close" (logged in 17-decisions.md).
+- One thing at a time; nothing repeated that the page or the chat already shows.
+- No shadow while it sits in the page: the rim is its edge (D5).
+- Dividers run the full width; the parts inside sit 28 in.
+- A plate inside (`ws-plate`) sits half a step above the pane's ground, so it still shows in dark.
 
 ## Source
 
-- **Derived from**: the system's docked-pane rules (the word "Close", never an icon; one thing shown at a time;
-  nothing repeated that the chat already shows) and its topbar height token.
-- **Precedent**: the first product built on the system; its own panes use a 48 px header line, not the 56 px line
-  used for the chat's own header, and this README and preview follow the 48 px the code actually builds.
+**Derived from**: Seth's check drawer (Figma 301:2011 to 301:2108: 12 / 11 rim, sections 20 / 28 with 16 inside,
+0.5 px #e8e8e8 rules, the foot pinned by a spacer, the 32 px square close, the 44 / 48 figure row), North's docked
+panel motion (js@648139), Revenue OS K5 and K6 and the geometry check (440 on a 390 phone). **Precedent**: the first
+product built on the system.
+
+## Markup
+
+```html
+<aside class="ws-panel" aria-labelledby="check-title">
+  <header class="ws-panel__head">
+    <div class="ws-panel__heading">
+      <div class="ws-panel__title-row">
+        <h2 id="check-title" class="ws-title">Local search</h2>
+        <span class="ws-chip ws-chip--needs-work">Needs work</span>
+      </div>
+      <p class="ws-body">How often you show up on Google Maps when buyers search near you.</p>
+    </div>
+    <button type="button" class="ws-icon-btn ws-panel__close" aria-label="Close Local search">
+      <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+    </button>
+  </header>
+  <div class="ws-panel__body">
+    <section class="ws-panel__section">
+      <div class="ws-panel__figure-row">
+        <span class="ws-figure ws-figure--pane">39</span>
+        <!-- the strip it reads from: ticks that flex, so it shrinks with the line -->
+      </div>
+    </section>
+    <section class="ws-panel__section">
+      <p class="ws-section">Buyers near you see you in 5 of 9 spots, never in the top three.</p>
+    </section>
+  </div>
+  <footer class="ws-panel__foot">
+    <section class="ws-panel__section">
+      <div class="ws-panel__next">
+        <span class="ws-control-words">Next fix · 1 of 2</span>
+        <p class="ws-section">Name the towns you serve in your Google Business Profile.</p>
+      </div>
+      <div class="ws-panel__acts">
+        <button type="button" class="ws-btn ws-btn--well ws-btn--lg">Send to my web person</button>
+        <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Review Grow's rewrite</button>
+      </div>
+    </section>
+  </footer>
+</aside>
+```
+
+## Styles
+
+`Panel/style.css`, built into `bundle.css` and `fello.css`. Tokens only, so it turns dark with the page. The body is
+one of the house's K1 and K2 scrollers: its sections never shrink and nothing inside it stretches the window.