@felloinnovations/brand-kit 0.5.1 → 0.5.3

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

@@ -5,7 +5,8 @@ nav to a drawer.
 ## Use it when
 
 - The product's work happens on pages a person moves between: a pipeline, a report, a list, settings.
-- There are more destinations than fit a flat list, and they fall into a few groups (Reports, Settings).
+- There are more destinations than fit a flat list, and they fall into a few groups (Reports, Settings), or a page has
+  a few pages of its own (Onboarding: Board, Stalled, Graduated) that fold under it as a section.
 - Every page needs the same place for its name, its acts and a way to fold the nav away.
 - A team member needs to see who they are signed in as, pinned at the foot of the nav.
 
@@ -33,11 +34,24 @@ nav to a drawer.
   - Rows (`__rows`, `__row`): 28 tall (`--ws-control-h-sm`, 40 on touch), 2 apart, 10 px sides, 6 px corners. A 20 px
     icon box (the 16 px icon inside it), 4 px, then the name (`__name`) in 13 / 18 medium body grey, truncated with
     its full words in `title`. Rows are real links (`<a href>`).
+  - Section (`__section`): a row that folds its pages open in place (North's "Sidebar sections open / close"). A
+    `<details>` whose `<summary>` wears `__row`: the icon, the name, a 16 px chevron at the end (`__chevron`, in the
+    resting mark grey) that turns down as it opens. Its pages are a `__rows` list one level in (the icon box and its
+    gap, 24), so their words start on the section's words, 46 from the nav's side; they need no icon of their own.
+    One level only: a section never holds a section.
+  - Folded section (`__fly` and `__panel`): in the 64 px rail a section cannot open, so the `<details>` leaves and a
+    `<button>` row (`__row __fly`, the section's icon, its name in `title`) takes its place, opening the section's
+    pages as a `Menu` panel beside the rail (`ws-menu __panel`, a native popover): its top on the button's, 8 past the
+    rail's edge, flipped up when the room below runs out. The panel names the section in its eyebrow (`__eyebrow`, on
+    the words a `ws-menu-item` row starts on), then its pages as `ws-menu-item` links. Both are in the markup; the nav
+    shows one or the other.
   - Count (`__count`): Seth's navy pill, 18 tall, at least 18 wide, 11 px semibold figures in the act fill's word
     colour (`--ws-on-act`).
   - The person (`__foot`): pinned at the foot under a full-width 1 px rule, never scrolled away, 12 above and 6 below,
     on the rows' edges (22 in at the left, 18 at the right: the groups' 12 / 8 and a row's 10). A 28 px avatar, 10 px,
-    then the name 13 / 16 medium navy (`__foot-name`) over the role in `ws-muted`.
+    then the name 13 / 16 medium navy (`__foot-name`) over the role in `ws-muted`. When the person opens their
+    account menu (a profile, "View as", sign out), the avatar and words sit in a button (`__me`) that opens a `Menu`:
+    a row's 10 px sides and 6 px corners and its wash, the foot's height and the avatar's 22 px edge unchanged.
 - **Stage** (`__stage`): `--ws-glass` with a 4 px blur (`--ws-glass-blur`), a 1 px `--ws-edge-stage` edge, 16 px corners
   (`--ws-radius-panel`), 13 from the window's top (`--ws-stage-inset-top`), 12 from its right and bottom
   (`--ws-stage-inset`), no gap to the nav (the nav's own 8 px is the gap). `--wash` gives it the Fia frames' cream
@@ -62,7 +76,8 @@ nav to a drawer.
   the folded rail).
 - **Touch**: the search box is 40 tall and its words 16, so a phone or tablet never zooms into it on focus.
 - In fello.css: `.ws-app-shell` (+ `--folded`, `--wash`), `__nav`, `__head`, `__wordmark`, `__groups`, `__group`,
-  `__eyebrow`, `__rows`, `__row` (+ `--current`), `__name`, `__count`, `__foot`, `__foot-words`, `__foot-name`,
+  `__eyebrow`, `__rows`, `__row` (+ `--current`), `__name`, `__count`, `__section`, `__chevron`, `__fly`, `__panel`,
+  `__foot`, `__me`, `__foot-words`, `__foot-name`,
   `__stage`, `__bar` (+ `--scrolled`), `__title`, `__acts`, `__search`, `__menu`, `__body` (+ `--wide`); the 0.4
   rail markup `__rail` and `__mark` (+ `--current`, `--wordmark`) still draws, and so does a 0.4 nav (wordmark, group
   names, rows and person straight in `__nav`, no `__head` or `__groups`): the nav itself scrolls then, with the
@@ -73,7 +88,7 @@ nav to a drawer.
 | Variant | Width | Shows |
 | --- | --- | --- |
 | Open (default) | 232 px | The head, grouped rows with names and counts, the person |
-| Folded (`--folded`) | 64 px | The same nav: 40 px rows of icons, the current one on its pill; names faded (still read aloud), counts gone, each row's name and count in its `title` (a pointer's tooltip, a screen reader's description), group names and rules gone, the avatar centred |
+| Folded (`--folded`) | 64 px | The same nav: 40 px rows of icons, the current one on its pill; names faded (still read aloud), counts gone, each row's name and count in its `title` (a pointer's tooltip, a screen reader's description), group names and rules gone, the avatar centred; each section a button that opens its pages in a panel beside the rail |
 | Phone (under 60rem of the shell) | none | The bar's menu button opens the same nav in a drawer at the drawer's width; the stage goes edge to edge, 16 px sides |
 
 | Body | Content width | Use |
@@ -95,6 +110,13 @@ nav to a drawer.
 - **Needs you**: the navy count pill. A bare number, its meaning in `.ws-sr` words inside it ("7 waiting"), never
   `aria-label` on the span (ARIA does not let a plain span carry a label).
 - **Long name**: truncates on one line, the full name in `title`.
+- **Section open / closed**: the chevron points right when closed and down when open, turning on the fold spring as
+  the pages fold in (the house's fold on every kit `<details>`). Whether a section starts open is the app's: open the
+  one that holds the current page.
+- **Closed on the current page**: a closed section that holds the current page wears the current pill itself (the
+  white pill, its icon salmon, its words at salmon's AA step), so the page is never lost behind a fold; opened, the
+  page takes the pill back. Folded, the section's button does the same, and the panel marks the page as the current
+  menu row.
 - **Folded**: only the icons show, so every row carries its name (and its count, "Pipeline, 7 waiting") in `title`;
   in React, a `Tooltip` on hover and focus.
 - **Many rows**: the groups scroll; the head and the person stay. In 0.4 markup (no `__groups`) the nav scrolls and the
@@ -113,7 +135,11 @@ nav to a drawer.
 - Keyboard: rows are links in document order; the fold button carries `aria-expanded` and toggles `--folded` on the
   shell. The phone's drawer is a `Dialog` (`ws-dialog--drawer`) holding the same `__nav` markup; the head's button
   becomes its close.
-- Pointer: hover only tints. Nothing opens on hover.
+- Sections: the `<summary>` is the disclosure (Enter or Space opens and closes it, its open state read aloud). Folded,
+  the section's button opens its panel (Enter or Space, or a click; the browser tells a screen reader it is expanded),
+  Tab goes on into the panel's pages, and Escape or a click away closes it, the focus back on the button. Arrow keys
+  between the panel's rows are the app's, as on every `Menu`.
+- Pointer: hover only tints. Nothing opens on hover, a folded section's panel included.
 - Motion (North): the fold trades width over `--ws-duration-shift` on `--ws-ease-shift`; the rows, the current pill
   and the fold button ride the nav's edge as it moves (nothing jumps to the middle and back), names fade over
   `--ws-duration-hover`, washes ease in over 200 ms, the bar's edge over `--ws-duration-settle`. The current pill
@@ -137,7 +163,10 @@ nav to a drawer.
 
 - A group's name says what kind of page it holds ("Reports"), sentence case, two words at most. The first group can
   go without one.
-- A row's name is the page's own name, sentence case.
+- A row's name is the page's own name, sentence case. A section's name is the page its pages belong to
+  ("Onboarding"), and its pages say only what they add ("Board", "Stalled"), never the section's name again.
+- A way out of the app (a full-screen app inside another: "Back to Turbo") is the last group's one row, a back chevron
+  for its icon, above the person; never in the foot and never at the top.
 - The bar names the page once, exactly as its row does; no second heading repeats it in the body.
 - No em dashes; a count is a bare number.
 
@@ -146,9 +175,9 @@ nav to a drawer.
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `groups` | `{ name?: string; items: NavRow[] }[]` | The nav's groups, in order |
-| `NavRow` | `{ label, icon, href, current?, count? }` | One row: its words, its 16 px icon, whether it is the current page, its count |
-| `person` | `{ name, role, initials }` | The foot |
-| `folded` | `boolean` | The 64 px rail |
+| `NavRow` | `{ label, icon, href, current?, count?, items?: NavRow[] }` | One row: its words, its 16 px icon, whether it is the current page, its count; with `items` it is a section (its own `href` unused), one level only |
+| `person` | `{ name, role, initials, menu?: ReactNode }` | The foot; with `menu`, the person is a button that opens it |
+| `folded` | `boolean` | The 64 px rail (the app keeps the person's choice, in storage, and sets `--folded`) |
 | `bar` | `ReactNode` | The bar's content: a title, a `Breadcrumb` or a `PageBar`, and its acts |
 | `wash` | `boolean` | The cream stage instead of glass |
 
@@ -157,15 +186,20 @@ nav to a drawer.
 - **One navy button per page**: the bar's primary is the page's one; nothing in the body adds a second.
 - **The body is the page**: it brings the 32 px gutter; a page inside never adds its own padding or a `.ws-page`.
 - **The person never scrolls away** and the head never moves: only the groups scroll (K11).
-- **Real links, `aria-current="page"`**: never a clickable `<li>`, never colour alone.
+- **Real links, `aria-current="page"`**: never a clickable `<li>`, never colour alone. A section is a `<summary>` (and,
+  folded, a `<button>`), never a link that also folds.
+- **Sections or groups, by what they hold**: a group names a kind of page ("Reports") and is always open; a section is
+  one page's own pages and folds. A group can hold sections; a section never holds a section.
 - **Seth's tokens only**: no raw colour, size or corner; dark comes from the tokens (D12).
 
 ## Source
 
 **Derived from**: Seth's North app (`style1.css` 22 to 112, 531 to 560; the 232 px sidebar, its 28 px rows, rules,
-navy count, white current pill, the 64 px rail, the glass stage and the frame), the Fia frames' 56 px thread header and
-32 px gutter (D4), and Revenue OS faults K1, K2, K3, K11 and K12. **Precedent**: kit 0.4's AppShell, upgraded in place
-4 Nov 2026 (the 0.4 markup still draws).
+navy count, white current pill, the 64 px rail, the glass stage and the frame; "Sidebar sections open / close" on the
+fold spring), the Fia frames' 56 px thread header and 32 px gutter (D4), and Revenue OS faults K1, K2, K3, K11 and K12.
+Sections, the folded section's panel, the person's menu and the way out come from Customer Value's own rail
+(`CvRail`, Hemanth, 10 Nov 2026), so the app can drop it. **Precedent**: kit 0.4's AppShell, upgraded in place 4 Nov
+2026 (the 0.4 markup still draws).
 
 ## Markup
 
@@ -195,15 +229,48 @@ navy count, white current pill, the 64 px rail, the glass stage and the frame),
             <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg>
             <span class="ws-app-shell__name">Performance</span>
           </a></li>
+          <!-- A section: its pages fold open in place; folded, the button opens them beside the rail -->
+          <li>
+            <details class="ws-app-shell__section" open>
+              <summary class="ws-app-shell__row">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
+                <span class="ws-app-shell__name">Onboarding</span>
+                <svg class="ws-app-shell__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+              </summary>
+              <ul class="ws-app-shell__rows">
+                <li><a href="/onboarding" class="ws-app-shell__row"><span class="ws-app-shell__name">Board</span></a></li>
+                <li><a href="/onboarding/stalled" class="ws-app-shell__row"><span class="ws-app-shell__name">Stalled</span></a></li>
+              </ul>
+            </details>
+            <button type="button" class="ws-app-shell__row ws-app-shell__fly" popovertarget="nav-onboarding" title="Onboarding">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
+              <span class="ws-app-shell__name">Onboarding</span>
+            </button>
+            <div id="nav-onboarding" class="ws-menu ws-app-shell__panel" popover aria-label="Onboarding">
+              <p class="ws-app-shell__eyebrow">Onboarding</p>
+              <ul>
+                <li><a href="/onboarding" class="ws-menu-item">Board</a></li>
+                <li><a href="/onboarding/stalled" class="ws-menu-item">Stalled</a></li>
+              </ul>
+            </div>
+          </li>
         </ul>
       </div>
     </div>
     <div class="ws-app-shell__foot">
-      <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
-      <span class="ws-app-shell__foot-words">
-        <span class="ws-app-shell__foot-name">Priya Nair</span>
-        <span class="ws-muted">Team lead</span>
-      </span>
+      <!-- A static person is the avatar and words straight in the foot; with an account menu, a button: -->
+      <button type="button" class="ws-app-shell__me" popovertarget="nav-me" aria-haspopup="menu">
+        <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
+        <span class="ws-app-shell__foot-words">
+          <span class="ws-app-shell__foot-name">Priya Nair</span>
+          <span class="ws-muted">Team lead</span>
+        </span>
+      </button>
+      <div id="nav-me" class="ws-menu" popover role="menu" aria-label="Your account">
+        <a href="/profile" class="ws-menu-item" role="menuitem">Your profile</a>
+        <div class="ws-menu-line" role="separator"></div>
+        <button type="button" class="ws-menu-item" role="menuitem">Sign out</button>
+      </div>
     </div>
   </nav>
   <div class="ws-app-shell__stage">
@@ -229,12 +296,13 @@ navy count, white current pill, the 64 px rail, the glass stage and the frame),
 
 ## Styles
 
-`AppShell/style.css`, with `IconButton`, `Button` and `Avatar` for the bar's acts and the person (`ws-muted` is the
-house's). Tokens: `--ws-frame`,
+`AppShell/style.css`, with `IconButton`, `Button` and `Avatar` for the bar's acts and the person, and `Menu` for a
+folded section's panel and the person's menu (`ws-muted` is the house's). Tokens: `--ws-frame`,
 `--ws-glass`, `--ws-glass-blur`, `--ws-stage-wash`, `--ws-edge-stage`, `--ws-stage-inset-top`, `--ws-stage-inset`,
 `--ws-sidebar-width`, `--ws-header-h`, `--ws-control-h-sm`, `--ws-touch`, `--ws-field`, `--ws-field-ink`,
 `--ws-focus-width`, `--ws-focus-color`, `--ws-focus-offset`, `--ws-radius-row`, `--ws-radius-control`,
 `--ws-radius-panel`, `--ws-hover`, `--ws-hover-strong`, `--ws-float-rim`, `--ws-shade`, `--ws-ink`,
 `--color-surface`, `--color-text-brand-strong`, `--ws-chart-under-half`, `--ws-on-act`, `--ws-edge-card`,
-`--ws-hairline`, `--ws-chart-card-w`, `--ws-gap-component`, `--ws-gap-group`, `--ws-text-value`, `--ws-duration-shift`, `--ws-ease-shift`. The shell sets `--ws-gutter` to `--space-xl` (32)
+`--ws-hairline`, `--ws-chart-card-w`, `--ws-gap-component`, `--ws-gap-group`, `--ws-text-value`, `--ws-duration-shift`, `--ws-ease-shift`, `--ws-mark-muted`, `--ws-icon-lg`, `--ws-spring-fold`,
+`--ws-spring-fold-duration`. The shell sets `--ws-gutter` to `--space-xl` (32)
 for everything inside it.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Navigation" height=2372 -->
+<!-- @dsCard group="Navigation" height=3552 -->
 <!doctype html>
 <html>
 <head>
@@ -116,6 +116,148 @@
     </div></div>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">Sections: a row that folds its pages open in place, the chevron turning, the pages one level in. A closed section holding the current page wears its pill. A way out of the app is the last group&rsquo;s row; the person opens the account menu</span>
+    <div style="width: 1240px; max-width: 100%; height: 640px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell">
+      <nav class="ws-app-shell__nav" aria-label="Main">
+        <div class="ws-app-shell__head">
+          <span class="ws-app-shell__wordmark">Customer Value</span>
+          <button type="button" class="ws-icon-btn" aria-label="Fold the menu" aria-expanded="true">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
+          </button>
+        </div>
+        <div class="ws-app-shell__groups">
+          <div class="ws-app-shell__group">
+            <ul class="ws-app-shell__rows">
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg><span class="ws-app-shell__name">Home</span></a></li>
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h10M3 8h10M3 12h6"/></svg><span class="ws-app-shell__name">Calvin</span><span class="ws-app-shell__count">2<span class="ws-sr"> waiting</span></span></a></li>
+            </ul>
+          </div>
+          <div class="ws-app-shell__group">
+            <h2 class="ws-app-shell__eyebrow">Book</h2>
+            <ul class="ws-app-shell__rows">
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg><span class="ws-app-shell__name">Accounts</span></a></li>
+              <li>
+                <details class="ws-app-shell__section" open>
+                  <summary class="ws-app-shell__row"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg><span class="ws-app-shell__name">Onboarding</span><svg class="ws-app-shell__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg></summary>
+                  <ul class="ws-app-shell__rows">
+                    <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;"><span class="ws-app-shell__name">Board</span></a></li>
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Stalled</span><span class="ws-app-shell__count">12<span class="ws-sr"> stalled</span></span></a></li>
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Graduated</span></a></li>
+                  </ul>
+                </details>
+              </li>
+              <li>
+                <details class="ws-app-shell__section">
+                  <summary class="ws-app-shell__row"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5.5h10v7H3Z"/><path d="M5.5 5.5V3.5h5v2"/></svg><span class="ws-app-shell__name">Tickets</span><svg class="ws-app-shell__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg></summary>
+                  <ul class="ws-app-shell__rows">
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Open</span></a></li>
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Waiting on the customer</span></a></li>
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Closed</span></a></li>
+                  </ul>
+                </details>
+              </li>
+            </ul>
+          </div>
+          <div class="ws-app-shell__group">
+            <h2 class="ws-app-shell__eyebrow">Team</h2>
+            <ul class="ws-app-shell__rows">
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg><span class="ws-app-shell__name">Performance</span></a></li>
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="11.5" cy="7" r="1.8"/><path d="M1.5 13c0-2.2 2-3.5 4.5-3.5s4.5 1.3 4.5 3.5M10.5 10c1.8 0 3.5.9 3.5 2.6"/></svg><span class="ws-app-shell__name">My team</span></a></li>
+            </ul>
+          </div>
+          <div class="ws-app-shell__group">
+            <ul class="ws-app-shell__rows">
+              <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 4 5.5 8l4 4"/></svg><span class="ws-app-shell__name">Back to Turbo</span></a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="ws-app-shell__foot">
+          <button type="button" class="ws-app-shell__me" popovertarget="shell-me" aria-haspopup="menu">
+            <span class="ws-avatar ws-avatar--sm ws-avatar--plain">HD</span>
+            <span class="ws-app-shell__foot-words">
+              <span class="ws-app-shell__foot-name">Halli Doig</span>
+              <span class="ws-muted">Value delivery lead</span>
+            </span>
+          </button>
+          <div id="shell-me" class="ws-menu" popover role="menu" aria-label="Your account">
+            <a href="#" class="ws-menu-item" role="menuitem" onclick="return false;">Your profile</a>
+            <a href="#" class="ws-menu-item" role="menuitem" onclick="return false;">View as someone else</a>
+            <div class="ws-menu-line" role="separator"></div>
+            <button type="button" class="ws-menu-item" role="menuitem" popovertarget="shell-me" popovertargetaction="hide">Sign out</button>
+          </div>
+        </div>
+      </nav>
+      <div class="ws-app-shell__stage">
+        <header class="ws-app-shell__bar">
+          <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
+          </button>
+          <h1 class="ws-app-shell__title">Onboarding</h1>
+        </header>
+        <main class="ws-app-shell__body">
+          <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-s1"><h2 class="ws-title" id="shell-s1">Twelve onboardings have stalled</h2><p class="ws-body">The oldest has waited 54 days for its first meeting.</p></section>
+        </main>
+      </div>
+    </div></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Folded, a section&rsquo;s row opens its pages as a menu panel beside the rail: it names the section, the current page marked, Escape or a click away closes it and the focus goes back to the row. The row stands in for the current page it holds</span>
+    <div style="width: 1040px; max-width: 100%; height: 460px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell ws-app-shell--folded">
+      <nav class="ws-app-shell__nav" aria-label="Main">
+        <div class="ws-app-shell__head">
+          <span class="ws-app-shell__wordmark">Customer Value</span>
+          <button type="button" class="ws-icon-btn" aria-label="Open the menu" aria-expanded="false">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
+          </button>
+        </div>
+        <div class="ws-app-shell__groups">
+          <div class="ws-app-shell__group">
+            <ul class="ws-app-shell__rows">
+              <li><a href="#" class="ws-app-shell__row" title="Home" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg><span class="ws-app-shell__name">Home</span></a></li>
+              <li><a href="#" class="ws-app-shell__row" title="Accounts" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg><span class="ws-app-shell__name">Accounts</span></a></li>
+              <li>
+                <details class="ws-app-shell__section">
+                  <summary class="ws-app-shell__row"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg><span class="ws-app-shell__name">Onboarding</span><svg class="ws-app-shell__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg></summary>
+                  <ul class="ws-app-shell__rows">
+                    <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;"><span class="ws-app-shell__name">Board</span></a></li>
+                    <li><a href="#" class="ws-app-shell__row" onclick="return false;"><span class="ws-app-shell__name">Stalled</span></a></li>
+                  </ul>
+                </details>
+                <button type="button" class="ws-app-shell__row ws-app-shell__fly" popovertarget="shell-fly-onboarding" title="Onboarding"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg><span class="ws-app-shell__name">Onboarding</span></button>
+                <div id="shell-fly-onboarding" class="ws-menu ws-app-shell__panel" popover aria-label="Onboarding">
+                  <p class="ws-app-shell__eyebrow">Onboarding</p>
+                  <ul>
+                    <li><a href="#" class="ws-menu-item" aria-current="page" onclick="return false;">Board</a></li>
+                    <li><a href="#" class="ws-menu-item" onclick="return false;">Stalled</a></li>
+                    <li><a href="#" class="ws-menu-item" onclick="return false;">Graduated</a></li>
+                  </ul>
+                </div>
+              </li>
+              <li><a href="#" class="ws-app-shell__row" title="Tickets" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5.5h10v7H3Z"/><path d="M5.5 5.5V3.5h5v2"/></svg><span class="ws-app-shell__name">Tickets</span></a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="ws-app-shell__foot">
+          <span class="ws-avatar ws-avatar--sm ws-avatar--plain">HD</span>
+          <span class="ws-app-shell__foot-words"><span class="ws-app-shell__foot-name">Halli Doig</span><span class="ws-muted">Value delivery lead</span></span>
+        </div>
+      </nav>
+      <div class="ws-app-shell__stage">
+        <header class="ws-app-shell__bar">
+          <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
+          </button>
+          <h1 class="ws-app-shell__title">Onboarding board</h1>
+        </header>
+        <main class="ws-app-shell__body">
+          <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-f1"><h2 class="ws-title" id="shell-f1">Twelve onboardings have stalled</h2><p class="ws-body">The oldest has waited 54 days for its first meeting.</p></section>
+        </main>
+      </div>
+    </div></div>
+  </div>
+
   <div class="ws-stack">
     <span class="ws-muted">Folded to the 64 px rail (the same nav, names faded but read aloud and in each row&rsquo;s title), the Fia frames&rsquo; cream stage (--wash), the thread header as the bar with its edge once scrolled, the body loading</span>
     <div style="width: 1040px; max-width: 100%; height: 420px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell ws-app-shell--folded ws-app-shell--wash">
@@ -369,10 +511,13 @@
 <script>
 /* The demo's wiring: a click makes the row the current page (an app's router does this; the pill slides on its own). */
 document.addEventListener('click', (e) => {
-  const row = e.target.closest('.ws-app-shell__row');
+  const row = e.target.closest('a.ws-app-shell__row');
   if (!row) return;
-  for (const r of row.closest('.ws-app-shell__nav').querySelectorAll('.ws-app-shell__row')) r === row ? r.setAttribute('aria-current', 'page') : r.removeAttribute('aria-current');
+  for (const r of row.closest('.ws-app-shell__nav').querySelectorAll('a.ws-app-shell__row')) r === row ? r.setAttribute('aria-current', 'page') : r.removeAttribute('aria-current');
 });
+/* The demo opens the folded section's panel so it shows at rest (in an app the row's click opens it). */
+const fly = document.querySelector('.ws-app-shell__fly');
+try { document.getElementById('shell-fly-onboarding').showPopover({ source: fly }); } catch {}
 </script>
 </body>
 </html>

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

@@ -37,6 +37,35 @@
 /* A row's count: Seth's navy pill, 18 tall, its figure on the act fill's word colour. */
 .ws-app-shell__count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--space-md) + var(--space-3xs)); height: calc(var(--space-md) + var(--space-3xs)); padding: 0 var(--space-xxs); border-radius: var(--radius-full); background: var(--color-text-heading); color: var(--ws-on-act); font-size: var(--ws-text-micro); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
 
+/* A section: a row that folds its pages open in place (North "Sidebar sections open / close", the house's fold on every
+   kit <details>). The row is the <summary>, wearing __row, its chevron at the end turning down as it opens; its pages sit
+   one level in, the icon box and its gap (24), so their words start on the section's words. A closed section that holds
+   the current page wears the current pill itself, so the page is never lost behind a fold. */
+.ws-app-shell__section > summary { list-style: none; }
+.ws-app-shell__section > summary::-webkit-details-marker { display: none; }
+.ws-app-shell__section > .ws-app-shell__rows { margin-inline-start: calc(var(--ws-icon-lg) + var(--space-xxs)); padding-block-start: var(--space-3xs); }
+.ws-app-shell__row > .ws-app-shell__chevron { color: var(--ws-mark-muted); }
+.ws-app-shell__section[open] > summary > .ws-app-shell__chevron { transform: rotate(90deg); }
+.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary { border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); color: var(--color-text-brand-strong); }
+.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary > svg:first-child { color: var(--ws-chart-under-half); }
+/* Folded, a section cannot open in 64 px: its row (__fly, a button) opens its pages as a menu panel beside the rail
+   (__panel, a native popover: the top layer, light dismiss, Escape back to the button). The <details> leaves the rail.
+   The panel names the section (its eyebrow, which the rail hides) over its pages as menu rows. */
+.ws-app-shell__fly { display: none; }
+.ws-app-shell--folded .ws-app-shell__section { display: none; }
+.ws-app-shell--folded .ws-app-shell__fly { display: flex; }
+.ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) { border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); color: var(--color-text-brand-strong); }
+.ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) > svg { color: var(--ws-chart-under-half); }
+.ws-app-shell--folded .ws-app-shell__panel .ws-app-shell__eyebrow { display: block; }
+.ws-app-shell__panel > .ws-app-shell__eyebrow { margin: 0; }
+.ws-app-shell__panel > ul { display: flex; flex-direction: column; gap: var(--space-3xs); }
+/* Beside the rail, its top on the button's, 8 past the rail's edge (the button sits 12 inside it); it flips up when the
+   room below runs out. It grows from that corner. */
+.ws-app-shell__panel { --ws-menu-from: 0px; transform-origin: top left; }
+@supports (position-area: block-end) {
+  .ws-app-shell__panel.ws-menu[popover] { margin: 0 var(--space-xs) 0 calc(var(--space-sm) + var(--space-xs)); position-area: inline-end span-block-end; justify-self: auto; position-try-fallbacks: flip-block; }
+}
+
 /* The person, pinned at the foot under a full-width rule. */
 .ws-app-shell__foot { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-xs-plus); margin-top: auto; padding: var(--space-sm) var(--space-xs) var(--space-xxs-plus) var(--space-sm); border-top: var(--ws-line) solid var(--ws-edge-card); }
 .ws-app-shell__foot > :first-child { margin-inline-start: var(--space-xs-plus); }
@@ -48,6 +77,14 @@
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > :is(.ws-app-shell__wordmark, .ws-app-shell__foot) { position: sticky; z-index: 1; background: var(--ws-frame); background-attachment: fixed; }
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > .ws-app-shell__wordmark { top: 0; min-height: calc(var(--ws-header-h) + var(--ws-line)); margin-inline: 0; padding: var(--ws-line) var(--space-xs) 0 calc(var(--space-sm) + var(--space-xs-plus)); }
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > .ws-app-shell__foot { bottom: 0; padding-bottom: var(--space-sm-plus); }
+/* The person as a button (__me) that opens the account menu (Menu, above it once it flips): the foot keeps its height and
+   edges, the button takes a row's 10 sides and 6 px corners, so the avatar stays 22 in and the wash reads as a row's. */
+.ws-app-shell__me { display: flex; flex: 1; align-items: center; gap: var(--space-xs-plus); min-width: 0; margin-block: calc(var(--space-3xs) * -1); padding: var(--space-3xs) var(--space-xs-plus); border: 0; border-radius: var(--ws-radius-row); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
+.ws-app-shell__foot > .ws-app-shell__me { margin-inline: 0; }
+.ws-app-shell__me:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-app-shell__me:hover { background: var(--ws-hover); } }
+.ws-app-shell__me:active { background: var(--ws-hover-strong); }
+.ws-app-shell--folded .ws-app-shell__me { flex: 0 0 auto; gap: 0; }
 .ws-app-shell__foot-words { display: flex; flex-direction: column; min-width: 0; }
 .ws-app-shell__foot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ws-text-control); line-height: var(--space-md); font-weight: 500; color: var(--color-text-heading); }
 
@@ -137,6 +174,9 @@
   :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))) { position: relative; anchor-scope: --ws-app-shell-current; }
   :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)))::before { content: ""; position: absolute; position-anchor: --ws-app-shell-current; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); opacity: 0; pointer-events: none; }
   .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { anchor-name: --ws-app-shell-current; }
+  /* A closed section, or a folded section's button, stands in for the current page it holds (the page itself has no box). */
+  .ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary,
+  .ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) { anchor-name: --ws-app-shell-current; }
   .ws-app-shell__eyebrow { position: relative; } /* a group's name stays over the pill as it passes, as the rows do */
 }
 
@@ -145,10 +185,17 @@
   .ws-app-shell > .ws-app-shell__nav { transition: width var(--ws-duration-shift) var(--ws-ease-shift); }
   .ws-app-shell :is(.ws-app-shell__wordmark, .ws-app-shell__name, .ws-app-shell__foot-words) { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
   .ws-app-shell__row { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-app-shell__me { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-app-shell__chevron { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
+  @supports (position-area: block-end) {
+    .ws-app-shell__panel.ws-menu[popover]:not(:popover-open) { margin-block-start: 0; }
+    @starting-style { .ws-app-shell__panel.ws-menu[popover]:popover-open { margin-block-start: 0; } }
+  }
   .ws-app-shell__bar { transition: box-shadow var(--ws-duration-settle) var(--ws-ease-soft); }
   @supports (anchor-name: --a) {
     :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))):is(:hover, :focus-within)::before { opacity: 1; transition: inset var(--ws-spring-nav-duration) var(--ws-spring-nav); }
     :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))):is(:hover, :focus-within) .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { background: none; box-shadow: none; }
+    .ws-app-shell__groups:is(:hover, :focus-within) :is(.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary, .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current))) { background: none; box-shadow: none; }
     .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { transition: color var(--ws-duration-hover) var(--ws-ease-soft); }
   }
 }

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

@@ -17,7 +17,7 @@ never coloured, never an app's face.
 
 - Shape: a disc, `radius-full`, `overflow: hidden` so a photo never spills past its edge.
 - Ground: `--ws-surface-sunk`, with navy initials (`--color-text-heading`) semibold, sized to the disc (12 to
-  24 px across the sizes below: 12, 14, 14, 16, 24).
+  24 px across the sizes below: 11, 12, 14, 14, 16, 24).
 - A photo: an `<img alt="">` inside the disc, after the initials, covering it (`object-fit: cover`). The initials stay
   under it, so the disc is never empty: while it loads, and if it never does. With `data-state="loading"` (the React
   component sets it, or a page script until `load`) it waits hidden, then fades in over 200 ms (`--ws-duration-gentle`
@@ -26,13 +26,14 @@ never coloured, never an app's face.
 - `dim`: for someone invited who has not joined yet: the initials in the muted word (`--color-text-muted`, AA on every
   ground), a photo at 60% opacity. The disc itself never fades, so its initials never drop under AA.
 - In fello.css: `.ws-avatar` is the 32 px disc with the ring (it mostly sits on a cream card); `--plain` drops the
-  ring, `--dim` dims it, `--sm`, `--deck`, `--panel` and `--xl` size it. A stack is `.ws-avatar-stack` with
+  ring, `--dim` dims it, `--xs`, `--sm`, `--deck`, `--panel` and `--xl` size it. A stack is `.ws-avatar-stack` with
   `.ws-avatar-stack__more` on the "+N" disc (tabular figures, so "+9" and "+12" sit alike).
 
 ## Variants and sizes
 
 | Size token | Px | Where |
 | --- | --- | --- |
+| `xs` | 20 | A face inside a chip, a dense picker's row, a task row's assignee: a line of words' height (#16) |
 | `sm` | 28 | A dense row (a list's rows, a stack's own faces) |
 | `md` | 32 | A card's or a list's default face |
 | `deck` | 48 | A card in a "go through" deck |
@@ -74,7 +75,7 @@ steps `sm` 28, `md` 32, `deck` 48, `panel` 56, `xl` 64. This README and preview
 | --- | --- | --- |
 | `name` | `string` | Used for the initials and the alt text context |
 | `photo` | `string \| null` | A URL to their picture, or `null` for initials only |
-| `size` | `'sm' \| 'md' \| 'deck' \| 'panel' \| 'xl'` | The disc's size |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'deck' \| 'panel' \| 'xl'` | The disc's size |
 | `dim` | `boolean` | Muted initials (a photo at 60%), for someone invited who has not joined |
 | `ring` | `boolean` | The hairline edge for a cream card |
 
@@ -100,6 +101,8 @@ ring for a cream card. **Precedent**: the first product built on the system.
 
 ```html
 <span class="ws-avatar ws-avatar--sm" aria-hidden="true">PN</span>
+<!-- extra small: inside a chip or a dense row -->
+<span class="ws-avatar ws-avatar--xs" aria-hidden="true">PN</span>
 
 <span class="ws-avatar ws-avatar--plain" aria-hidden="true">DS<img alt="" src="/people/dana.jpg"></span>
 

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

@@ -11,8 +11,9 @@
 <div class="ws-stage ws-stage--column">
 
   <div class="ws-stack" style="align-items: flex-start;">
-    <span class="ws-muted">Sizes: sm 28, md 32, deck 48, panel 56, xl 64 (initials until a photo loads)</span>
+    <span class="ws-muted">Sizes: xs 20, sm 28, md 32, deck 48, panel 56, xl 64 (initials until a photo loads)</span>
     <div class="ws-cluster ws-cluster--group" style="align-items: flex-end;">
+      <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain ws-avatar--xs" aria-hidden="true">PN</span><span class="ws-muted">xs</span></div>
       <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">PN</span><span class="ws-muted">sm</span></div>
       <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain" aria-hidden="true">PN</span><span class="ws-muted">md</span></div>
       <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain ws-avatar--deck" aria-hidden="true">PN</span><span class="ws-muted">deck</span></div>

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

@@ -10,5 +10,8 @@
    house fade of the whole disc left them at 3.7:1); a photo in it fades to 60 %. */
 .ws-avatar--dim { opacity: 1; color: var(--color-text-muted); }
 .ws-avatar--dim > img { opacity: 0.6; }
+/* Extra small (#16): 20, a line of words' height, for a face inside a chip, a dense picker's row or a task row's
+   assignee: initials 11 px semibold. A stack of them overlaps 4, as every stack. */
+.ws-avatar--xs { width: calc(var(--space-md) + var(--space-xxs)); height: calc(var(--space-md) + var(--space-xxs)); font-size: var(--ws-text-micro); }
 /* "+N" in a stack: the same disc, tabular figures, so +9 and +12 sit alike. */
 .ws-avatar-stack__more { font-variant-numeric: tabular-nums; }

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

@@ -1,4 +1,4 @@
-A full-width notice for a state of the whole page or card, in one of four quiet tones, never a loud one.
+A full-width notice for a state of the whole page or card, in one of five quiet tones, never a loud one.
 
 ## Use it when
 
@@ -30,13 +30,17 @@ A full-width notice for a state of the whole page or card, in one of four quiet
 | `neutral` | `--ws-surface-sunk` | `--color-text-body` / muted | a plain status ("as of Friday") |
 | `needs` | `--ws-tint-needs` | `--ws-word-needs` | offline, a trial ending, something to fix |
 | `positive` | `--ws-tint-live` | `--ws-word-positive` | a job finished, an import succeeded |
-| `working` | `--ws-card-tint-blue` | `--color-text-interactive` | still checking, still running |
+| `working` | `--ws-card-tint-blue` | `--color-text-interactive` | still checking, still running; an info status |
+| `alert` | `--ws-tint-alert` | `--ws-word-alert` | something is wrong now: a post that did not publish, a sync that failed; an error status |
+
+An app whose words are error, warning, success and info maps them onto these tones (Colour, Status sets): error is
+`alert`, warning is `needs`, success is `positive`, info is `working`.
 
 There is one size; it spans whatever width its container gives it.
 
 ## States
 
-- **The four tones:** as the table above, each shown with its own icon, words and act.
+- **The five tones:** as the table above, each shown with its own icon, words and act.
 - **With a close act:** the `x` icon button sits at the far right.
 - **Long words / narrow:** the words wrap; the mark and the acts stay on the first line's band.
 - **Dismissed:** the banner is removed entirely; nothing is drawn in its place.
@@ -59,7 +63,7 @@ There is one size; it spans whatever width its container gives it.
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `tone` | `'neutral' \| 'needs' \| 'positive' \| 'working'` | the look, default `neutral` |
+| `tone` | `'neutral' \| 'needs' \| 'positive' \| 'working' \| 'alert'` | the look, default `neutral` |
 | `icon` | `IconName` | the 16 px icon at the left |
 | `children` | `ReactNode` | the words |
 | `action` | `ReactNode` | the `text` or `well` small button at the right |
@@ -95,5 +99,5 @@ from the system, 26 Oct 2026.
 
 ## Styles
 
-`design-system/components/Banner/style.css`: `ws-banner` with `--neutral`, `--needs`, `--positive`, `--working`;
+`design-system/components/Banner/style.css`: `ws-banner` with `--neutral`, `--needs`, `--positive`, `--working`, `--alert`;
 `__mark`, `__words`, `__lead`, `__rest`.

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

@@ -49,6 +49,15 @@
       </div>
     </div>
 
+    <div class="ws-stack">
+      <span class="ws-muted">Alert: an error status, something wrong now</span>
+      <div class="ws-banner ws-banner--alert" role="alert">
+        <svg class="ws-banner__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M8 5v3.5M8 11h.01"/></svg>
+        <span class="ws-banner__words"><span class="ws-banner__lead">The post did not publish.</span> <span class="ws-banner__rest">LinkedIn turned it down at 9:02.</span></span>
+        <button type="button" class="ws-btn ws-btn--text">Try again</button>
+      </div>
+    </div>
+
     <p class="ws-muted">Dismissed: the banner is removed entirely, nothing left in its place.</p>
 
   </div>

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

@@ -16,4 +16,7 @@
 .ws-banner--positive .ws-banner__mark, .ws-banner--positive .ws-banner__lead { color: var(--ws-word-positive); }
 .ws-banner--working { background: var(--ws-card-tint-blue); }
 .ws-banner--working .ws-banner__mark, .ws-banner--working .ws-banner__lead { color: var(--color-text-interactive); }
+/* An error status (#15): something wrong now, the alert red's tint and words. */
+.ws-banner--alert { background: var(--ws-tint-alert); }
+.ws-banner--alert .ws-banner__mark, .ws-banner--alert .ws-banner__lead { color: var(--ws-word-alert); }
 @media (pointer: coarse) { .ws-banner { --ws-banner-band: var(--ws-touch); } }