@felloinnovations/brand-kit 0.5.0 → 0.5.3

package/design-system/17-decisions.md

@@ -494,3 +494,54 @@ the team builds on the kit gets them, not North alone.
 | 5 Nov 2026 | Amit (via Claude, open to veto) | `--ws-duration-fill-page` (1700 ms, North's "Metric + goal bars fill") is a token: the tiles' charts and the goal bars both use it (D4). A tile's foot figure rises in after the draw; it does not count up (the 4 Nov rule: a headline figure shows its value) | tokens, Motion |
 | 5 Nov 2026 | Amit (via Claude, open to veto) | `TrendLine`: North's revenue chart and its NRR line become one kit chart, a value over periods on an axis as a line (dots, the hatched area under it) or as columns, with the Bars / Line morph (`--ws-spring-morph-chart`), the hovered column band and the hovered dot. Overturns 09-charts' "a free line chart: make it thin bars" for one series on an axis; two series stay two cards. Its columns start at zero (North's ARR chart starts at $20M: the kit does not) | Charts, `TrendLine`, `TrendBars`, `StepLine` |
 
+## Rulings added 10 Nov 2026 (kit 0.5.1)
+
+Amit looked at the loading skeletons in an app built on the kit: the shimmer swept salmon, purple and green tints across
+every grey ghost block. He wants loaders calm and neutral.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 10 Nov 2026 | Amit (via Claude) | Loading is one quiet tone: the shimmer (`--ws-shimmer`) is the ghost grey with a lighter pass of the same grey, never a chart hue, in light, night, the navy ground and every palette. Overturns D7's "loading is a shimmer in the chart colours", the Motion row "The skeleton breathes" (4 Nov) for its colours, and the loading shimmer as an exception to "no gradient text" in Colour. North's timing stays: the 300 % band at 100 deg over 1.8 s (`--ws-loop-shimmer` on `--ws-ease-shimmer`), still under reduced motion | Skeleton, Motion, Colour, Patterns, every `ws-shimmer` ghost |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | How it is drawn. The ground is the ghost grey itself (`--ws-shimmer-ground` is now `--ws-ghost`: #E3DFDB, the night's #273544), the same at rest and in motion, so a ghost shows on the cream (1.29:1) and on the tray (1.13:1) in every theme and Skeleton's own ground for a card's foot is gone. The pass is the ghost 70 % of the way to the cream in light (#F6F3F0: 1.07:1 off the cream, 1.06:1 off the tray, so it shows on both) and 7 % toward the ink in dark (#354250; #364351 on the navy ground), the same step by eye (CIEDE2000 4.3); it derives from the ghost, the page and the ink, so a palette moves it. The chart ghost's colour band is dropped, not made neutral: in blend mode colour a neutral band has no hue and paints nothing, and in normal blend it would paint the card between the bars. Each bar is now a ghost under the same shimmer, so one token drives every loader | tokens (`_product.css`, `_dark.css`), Skeleton, the Motion card (its two rows now Close and Not yet) |
+| 10 Nov 2026 | Open, for Amit to rule | Not changed: `StatusLine`'s working words still pass through the AA steps of salmon, purple and teal. They are words at work, not a ghost; if "loaders" covers them too, they take a neutral pass next | StatusLine |
+
+## Rulings added 10 Nov 2026 (Hemanth's feedback, kit 0.5.2)
+
+Hemanth built the Customer Value app on the kit (10 Nov call with Amit) and found what it was missing: two lines at
+once on one chart (the kit said "two lines are two cards"), a whole page's loader, a stage track and a milestone row
+for an onboarding, one card for two boards, a chat page for Calvin, and a way to update without re-running adopt,
+which had stopped after 10 to 15 files. The look stays locked at 0.5 (Seth, Nikhil and Amit): everything here adds,
+nothing restyles.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | `TrendLine` draws up to three series in one unit on one axis (`__series`), navy, teal, purple, with a key; a hover reads every series for the period. Several series are lines only: no hatch, no Bars / Line switch. Different units, or one series more than four times another, are two TrendLines stacked in one card on the same periods; never two value axes. Overturns the 5 Nov "two series stay two cards" | Charts, `TrendLine` |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | A whole page loading is the page's own bar and board, not a new shape: the `PageBar` with its name at once, its data-bound words and act as ghosts, and the board holding tile and card skeletons where the real ones land (no new CSS). A list or a board page uses `Table`'s and `KanbanBoard`'s own ghosts | `Skeleton`, `EmptyState` |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | A thing's stages read across (`Stepper --across`), the in-hand stage opening in view; dated points are a milestone row (`--milestones`), the measure on each milestone, one quiet act on one not yet reached. A stall or a late milestone is words in needs-you (`__late`); the ring stays navy. `Timeline` stays the feed of what happened | `Stepper`, `Timeline`, Choosing components |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | Every board wears one card, its slots in a fixed order (kind and figure, time in stage, the title as the card's link, meta, up to three chips, a foot with people, a tally and one icon act, one well act when the stage waits on the person). Never a rail per column, a stage hue, an underlined title or a navy button on a card: a board is many cards, and one navy per page | `KanbanBoard` |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | An email, a call and a text are `ChatCard` kinds (the sender's words quoted on a sunk plate, three lines at most; Reply, or Listen for a call), and an account is a kind with its standing as a rating chip and one navy act. An agent that works a book of accounts keeps one thread per account and a daily briefing on top, the one time it speaks first (recipe 25) | `ChatCard`, Page recipes, AI experiences |
+| 10 Nov 2026 | Amit (via Claude) | An app already on the kit takes a newer release with `brand-catchup` (only what the releases changed), never a second adopt. Adopt is done when `check-drift` finds nothing left or every leftover is named, and it leaves a baseline in CI so nothing new drifts in | `brand-catchup`, `brand-adopt`, `brand-audit`, `check-drift`, AGENTS.md |
+
+## Rulings added 11 Nov 2026 (Madan's Marketing OS feedback and Hemanth's sidebar, kit 0.5.3)
+
+Madan filed eighteen gaps from moving Marketing OS (ContentOS) onto the kit, and Hemanth asked for a sidebar that holds
+sections. Nikhil (10 Nov): Marketing OS shows the new UI to Stephen before Thursday, and apps never build a missing
+component with Claude, so the kit carries each of these. Everything adds; nothing that exists changes how it looks.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | AppShell's sidebar holds sections: a page's own pages fold in place, one level only. Folded, a section opens a Menu panel beside the rail, and the person at the foot opens the account menu. A group stays always open | `AppShell`, Choosing components |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A chosen option is a tick at the row's end, never the sunk cream (that is the keyboard's) | `Combobox` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A far month or year is two small native selects in the picker's head; Today and Clear sit in a foot under Menu's line | `DateInput` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A time, and a date with a time, are the native field in DateInput's shell; no kit picker draws hours | `DateInput`, Choosing components |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A joined act's caret holds the act's other forms, never other acts; a navy joined act is the surface's one navy act | `Button` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | Chip `--sm` (20) and Avatar `--xs` (20) are the dense steps; a chip that acts keeps 24 | `Chip`, `Avatar` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | Error, warning, success and info map onto the kit's tones (alert, needs, positive, working): no separate status colours, no solid status fills, and a field's error stays needs. `--ws-tint-alert`, the alert red at 8 %, is the ground of an error status | Colour, `Banner`, `Chip`, tokens |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A drawer rising from a pane casts `--ws-shadow-rise`, the menu's drop upward | Space and layout, tokens |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A dialog a library mounts is `ws-dialog--mounted` with `ws-dialog__scrim`: placed by the kit, the same moves as keyframes, out on `data-state="closed"` or `data-leaving` | `Dialog`, Motion |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A card fold's acts sit beside the summary, never inside it; `ws-fold__peek` shows only while folded; tones are Banner's three | `Fold` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A picture rounds its own corners and the card never clips; a grid choice is a flush ring plus a tick, never the tab | `Card`, Choosing components |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | An InlineEdit has the same box and type at rest and editing; its focus ring is drawn inside the box; the pencil always shows on touch | `InlineEdit` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A mention is mid blue words with no fill; only a mention of you takes the needs tint. The comment marker on content is the blue card tint, never an underline | `CommentThread` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | A diff never says it with colour alone: a sign, and an underline for what was added; removed lines are not struck, so the old words stay readable | `TextDiff` |
+| 11 Nov 2026 | Amit (via Claude, open to veto) | Things on dates are a `Calendar`; a plan across its window is a `PlanTimeline`. Today is the one salmon mark in both; tones follow the palette; neither restyles `Stepper`, which keeps steps and milestones without a date axis | `Calendar`, `PlanTimeline`, Choosing components |

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; }