@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,154 @@
+/* ---- AppShell: a product's frame, Seth's North (D1). The 232 px nav on the frame's wash, a glass stage 13 down and 12 in
+   from the window's edge, its 56 px bar and a body that owns the scroll. It fills its parent's height: give that parent
+   the window's (100dvh). It measures itself: under 60rem of its own width it is the phone form (no nav, a menu button,
+   the stage edge to edge). The gutter is Seth's 32 (D4, --ws-gutter). ---- */
+.ws-app-shell { container: ws-app-shell / inline-size; display: flex; height: 100%; min-height: 0; background: var(--ws-frame); }
+
+/* The nav: 232 open, 64 folded, on the stage's 13 / 12 insets. Its head sits on the bar's line (past the stage's 1 px edge, the 56 height), the
+   groups scroll between the head and the person, who never scrolls away (K11). */
+.ws-app-shell__nav { display: flex; flex-direction: column; min-height: 0; padding-block: var(--ws-line) var(--space-xs); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
+.ws-app-shell > .ws-app-shell__nav { width: var(--ws-sidebar-width); flex-shrink: 0; margin-block: var(--ws-stage-inset-top) var(--ws-stage-inset); }
+/* Head and person sit on the groups' 12 / 8 sides and take a row's 10 inside them (North: the nav's 12, the head's 10),
+   so the name and the avatar start on the row icons' edge, 22 in, from two steps on the scale. */
+.ws-app-shell__head { display: flex; align-items: center; gap: var(--space-xs); height: var(--ws-header-h); padding-inline: var(--space-sm) var(--space-xs); }
+.ws-app-shell__wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-lg); line-height: var(--space-lg); font-weight: 600; color: var(--color-text-heading); }
+.ws-app-shell__head > .ws-app-shell__wordmark { flex: 1; padding-inline-start: var(--space-xs-plus); }
+.ws-app-shell__groups { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ws-ink) 18%, transparent) transparent; }
+/* A group: rows at x 12, 212 wide; the 1 px rule between groups runs the nav's full width. Markup from 0.4 (eyebrows and
+   rows straight in the nav) keeps the same edges. */
+.ws-app-shell__group { padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-sm); }
+.ws-app-shell__group + .ws-app-shell__group { border-top: var(--ws-line) solid var(--ws-edge-card); }
+.ws-app-shell__nav > :is(.ws-app-shell__rows, .ws-app-shell__eyebrow, .ws-app-shell__wordmark) { margin-inline: var(--space-sm) var(--space-xs); }
+.ws-app-shell__nav > .ws-app-shell__wordmark { flex-shrink: 0; display: flex; align-items: center; min-height: var(--ws-header-h); padding-inline: var(--space-xs-plus); }
+/* A group's name: Seth's sentence-case head, 11 / 16 medium (his 10 px, at the kit's 11 px floor), on the icons' edge. */
+.ws-app-shell__eyebrow { display: block; min-height: var(--ws-control-h-sm); padding: var(--space-sm) var(--space-xs-plus) 0; font-size: var(--ws-text-micro); line-height: var(--space-md); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--color-text-muted); }
+.ws-app-shell__rows { display: flex; flex-direction: column; gap: var(--space-3xs); }
+
+/* A row: 28 tall (40 on touch, K10), 2 apart, 13 px medium words, a 20 px icon box, 6 px corners. Hover is Seth's navy
+   wash; the current page is a white pill with his coral, the word at its AA step (D2). */
+.ws-app-shell__row { position: relative; display: flex; align-items: center; gap: var(--space-xxs); width: 100%; height: var(--ws-control-h-sm); padding: 0 var(--space-xs-plus); border: 0; border-radius: var(--ws-radius-row); background: none; text-align: left; text-decoration: none; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-body); cursor: pointer; }
+.ws-app-shell__row > svg { flex-shrink: 0; width: var(--ws-icon-lg); height: var(--ws-icon-lg); padding: var(--space-3xs); color: var(--ws-mark-muted); }
+.ws-app-shell__row:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-app-shell__row:hover { background: var(--ws-hover); } }
+.ws-app-shell__row:active { background: var(--ws-hover-strong); }
+.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { 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__row:is(.ws-app-shell__row--current, [aria-current="page"]) > svg { color: var(--ws-chart-under-half); }
+.ws-app-shell__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* 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; }
+
+/* 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); }
+.ws-app-shell__foot > :last-child { margin-inline-end: var(--space-xs-plus); }
+/* 0.4 markup (wordmark, rows and person straight in the nav, no __groups): the nav itself scrolls, so the wordmark and
+   the person stick to its ends (K11), the nav's full width, on the frame's wash fixed to the window as the frame is, so
+   no seam shows. The nav's own 1 / 8 ends move into them, so no row peeks past either. */
+.ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) { padding-block: 0; }
+.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); }
+.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); }
+
+/* Folded: the same nav as a 64 px rail of 40 px rows, names faded (still read aloud), counts gone, no group names or
+   rules. Each row carries its name and count in title. */
+.ws-app-shell--folded > .ws-app-shell__nav { width: var(--ws-rail-width); }
+.ws-app-shell--folded .ws-app-shell__head { justify-content: flex-end; gap: 0; padding-inline: 0 var(--space-md); }
+@media (pointer: coarse) { .ws-app-shell--folded .ws-app-shell__head { padding-inline-end: var(--space-sm); } }
+.ws-app-shell--folded :is(.ws-app-shell__head > .ws-app-shell__wordmark, .ws-app-shell__foot-words) { flex: 0 0 0; padding: 0; opacity: 0; }
+.ws-app-shell--folded :is(.ws-app-shell__group, .ws-app-shell__nav > .ws-app-shell__rows) { padding-inline: var(--space-sm); }
+.ws-app-shell--folded .ws-app-shell__nav > .ws-app-shell__rows { margin-inline: 0; }
+.ws-app-shell--folded .ws-app-shell__row { overflow: hidden; }
+.ws-app-shell--folded .ws-app-shell__name { opacity: 0; }
+/* The count leaves the rail; the row's title carries it ("Pipeline, 7 waiting"), read as its description. */
+.ws-app-shell--folded .ws-app-shell__count { display: none; }
+.ws-app-shell--folded .ws-app-shell__eyebrow { display: none; }
+.ws-app-shell--folded .ws-app-shell__group + .ws-app-shell__group { border-top-color: transparent; }
+/* The person takes the rail's own 64 at once, so the avatar sits centred on the rail from the fold's first frame. */
+.ws-app-shell--folded .ws-app-shell__foot { width: var(--ws-rail-width); justify-content: center; gap: 0; padding-inline: 0; border-top-color: transparent; }
+.ws-app-shell--folded .ws-app-shell__foot > * { margin-inline: 0; }
+/* A rail drawn on its own (0.4 markup): the same 64 px rail of 40 x 36 marks. */
+.ws-app-shell__rail { width: var(--ws-rail-width); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); margin-block: var(--ws-stage-inset-top) var(--ws-stage-inset); padding-block: var(--ws-line) var(--space-xs); }
+.ws-app-shell__mark { display: flex; align-items: center; justify-content: center; width: var(--space-2xl); height: var(--ws-control-h-md); border-radius: var(--ws-radius-row); color: var(--color-text-body); }
+.ws-app-shell__mark--wordmark { height: var(--ws-header-h); font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-heading); }
+.ws-app-shell__mark--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(--ws-chart-under-half); }
+.ws-app-shell__mark svg { width: var(--ws-icon); height: var(--ws-icon); }
+
+/* The stage: Seth's glass, 16 px corners, his 1 px edge; --wash is the Fia frames' cream stage. The blur sits on a layer
+   under the content (::before), not on the stage: an element with a backdrop-filter is the box of every position: fixed
+   thing inside it, so a toaster, a phone's full-screen panel or a full-screen card would fill only the stage and be cut
+   to it. Through the layer they reach the window. */
+.ws-app-shell__stage { position: relative; isolation: isolate; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; margin: var(--ws-stage-inset-top) var(--ws-stage-inset) var(--ws-stage-inset) 0; border: var(--ws-line) solid var(--ws-edge-stage); border-radius: var(--ws-radius-panel); background: var(--ws-glass); overflow: clip; }
+.ws-app-shell__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(var(--ws-glass-blur)); backdrop-filter: blur(var(--ws-glass-blur)); pointer-events: none; }
+.ws-app-shell--wash .ws-app-shell__stage { background: var(--ws-stage-wash); }
+.ws-app-shell--wash .ws-app-shell__stage::before { content: none; }
+/* The bar: the 56 px line on the content's 32 edges, flat at rest; its 0.5 px edge shows once the body scrolls under it
+   (set --scrolled from the body's scroll). It holds the page's name (or a Breadcrumb, or a PageBar) and its acts; 8
+   above and below, so a bar that wraps (a PageBar on a phone) never touches the stage's edge. */
+.ws-app-shell__bar { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-md); min-height: var(--ws-header-h); padding: var(--space-xs) var(--ws-gutter); }
+.ws-app-shell__bar--scrolled { box-shadow: inset 0 calc(var(--ws-hairline) * -1) 0 var(--ws-edge-card); }
+.ws-app-shell__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-md); line-height: var(--ws-leading-section); font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); }
+.ws-app-shell__acts { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
+.ws-app-shell__search { display: flex; flex-shrink: 1; align-items: center; gap: var(--space-xxs); width: calc(var(--space-9xl) + var(--space-md) + var(--space-xxs)); min-width: var(--space-8xl); height: var(--ws-control-h); padding: 0 var(--space-xs); border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); color: var(--color-text-muted); font-size: var(--ws-text-meta); white-space: nowrap; overflow: hidden; cursor: text; }
+.ws-app-shell__search svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); flex-shrink: 0; }
+/* The search is a real field: a <label> round an <input type="search">; the ring goes on the box, not the bare input. */
+.ws-app-shell__search > input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; font: inherit; color: var(--ws-field-ink); }
+.ws-app-shell__search > input::placeholder { color: var(--color-text-muted); opacity: 1; }
+.ws-app-shell__search > input:focus-visible { outline: none; }
+.ws-app-shell__search:focus-within { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+@media (pointer: coarse) { .ws-app-shell__search { height: var(--ws-touch); font-size: var(--ws-text-value); } } /* 16 px words: a phone does not zoom into the field on focus */
+.ws-app-shell .ws-app-shell__menu { display: none; } /* two classes: IconButton's display sits later in the bundle */
+/* The body is the page: it scrolls (and never chains into the window), sizes what is inside it (a container, as .ws-page
+   is) and caps its content at the kit's content width on one start edge (K12). No .ws-page inside it. */
+.ws-app-shell__body { flex: 1; min-width: 0; min-height: 0; container-type: inline-size; display: flex; flex-direction: column; gap: var(--ws-gap-component); padding: var(--space-md) var(--ws-gutter) var(--space-2xl); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ws-ink) 18%, transparent) transparent; }
+.ws-app-shell__stage > .ws-app-shell__body:first-child { padding-top: var(--ws-gutter); }
+.ws-app-shell :is(.ws-app-shell__body, .ws-app-shell__groups):focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* The content's cap is the board's two columns, as on .ws-page (Seth's North: 1119), so a section, its tiles and a
+   board all end on one edge. */
+.ws-app-shell__body > * { max-width: calc(var(--ws-chart-card-w) * 2 + var(--ws-gap-component)); }
+/* --wide: a Fia app page (Grow, Fixes, Inbox, Tally) runs the body's full width, Seth's 1350 in a 1416 stage. */
+.ws-app-shell__body--wide > * { max-width: none; }
+/* A filled page (a --fill Split) ends 24 above the stage's foot, Seth's drawer inset (301:2011), not the page's 40. */
+.ws-app-shell__body:has(> .ws-split--fill) { padding-bottom: max(var(--ws-gap-group), env(safe-area-inset-bottom)); }
+
+/* The phone form, under 60rem of the shell's own width (North drops the nav at 960): the nav leaves for a drawer opened
+   from the bar's menu button (the same nav markup, at the drawer's width), the stage goes edge to edge, 16 px sides. */
+@container ws-app-shell (max-width: 60rem) {
+  .ws-app-shell > :is(.ws-app-shell__nav, .ws-app-shell__rail) { display: none; }
+  .ws-app-shell__stage { margin: 0; border: 0; border-radius: 0; }
+  .ws-app-shell .ws-app-shell__menu { display: inline-flex; }
+  .ws-app-shell__search { display: none; }
+  .ws-app-shell__bar, .ws-app-shell__body { padding-inline: max(var(--space-md), env(safe-area-inset-left)) max(var(--space-md), env(safe-area-inset-right)); }
+  .ws-app-shell .ws-app-shell__bar { padding-top: max(var(--space-xs), env(safe-area-inset-top)); }
+  .ws-app-shell__body { padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom)); }
+}
+
+/* The current pill slides (North "Sidebar active row slide", health.navSlide, springs.nav .4 / .1; north-motion 3): a
+   white pill slides to the new page's row instead of jumping. The current row is the anchor (CSS anchor positioning)
+   and the rows' scroller draws the travelling pill (its ::before: __groups, or a 0.4 nav that holds its rows), under
+   the rows, its four edges easing on motion's own spring(.4, .1) written out as linear() (550 ms). At rest the current
+   row paints its own pill, so a resting nav is the 0.4 nav pixel for pixel; while the rows are pointed at or hold focus
+   the travelling pill takes its place (the same box, the same paint, at once), so a page chosen then slides to. The
+   fold (its button is outside the rows) and a resize carry the pill with its row at once. No new markup. Without
+   anchor positioning, or under reduced motion, the pill moves at once. The spring is the global --ws-spring-nav over --ws-spring-nav-duration. The 0.4 rail's
+   marks stay put. */
+@supports (anchor-name: --a) {
+  :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; }
+  .ws-app-shell__eyebrow { position: relative; } /* a group's name stays over the pill as it passes, as the rows do */
+}
+
+/* Motion (North): the fold trades width on the shift curve, names fade, washes and the bar's edge ease in. */
+@media (prefers-reduced-motion: no-preference) {
+  .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__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__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,14 +17,17 @@ 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
-  20 px across the sizes below).
-- A photo fades in over the initials once it has loaded (`--ws-duration-gentle` on `--ws-ease-soft`), so the disc
-  never pops in empty or shows a blank frame.
+  24 px across the sizes below: 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`
+  on `--ws-ease-soft`); without it the photo simply shows when the browser has it.
 - `ring`: an outer hairline (`--ws-shadow-hairline`) so the disc reads on a cream card.
-- `dim`: 60% opacity, for someone invited who has not joined yet.
+- `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
-  `.ws-avatar-stack__more` on the "+N" disc.
+  `.ws-avatar-stack__more` on the "+N" disc (tabular figures, so "+9" and "+12" sit alike).
 
 ## Variants and sizes
 
@@ -44,16 +47,18 @@ steps `sm` 28, `md` 32, `deck` 48, `panel` 56, `xl` 64. This README and preview
 
 - **Default**: initials on the sunk ground.
 - **Photo loaded**: the photo fills the disc, cropped to cover.
-- **Loading**: initials show from the first frame; the photo crossfades in once `load` fires (or at once if the
-  browser already had it cached).
+- **Loading**: initials show from the first frame; a photo marked `data-state="loading"` crossfades in once the mark is
+  dropped on `load` (or at once if the browser already had it cached).
+- **Photo failed**: the initials stay; nothing breaks, nothing shows a broken image (drop the `<img>` on `error`).
 - **Ring**: the hairline edge, for a disc sitting directly on a cream card with nothing else to separate them.
-- **Dim**: 60% opacity, for an invited person who has not joined.
+- **Dim**: muted initials (a photo at 60%), for an invited person who has not joined.
 - **Stack overflow**: a disc in the same ground reading "+N" in place of a fifth face.
 
 ## Behaviour
 
 - Decorative: `aria-hidden`, since whoever uses it names the person in words beside it (a row's title, a card's
-  label) or in its own accessible label.
+  label) or in its own accessible label. A stack that stands alone takes `role="img"` and a label naming the people
+  ("Priya Nair, Dana Sato and 12 more").
 - No keyboard or pointer behaviour of its own: it carries no click.
 - No motion but the photo's own crossfade; nothing moves with reduced motion beyond that opacity change settling
   at once instead of easing.
@@ -70,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 |
-| `dim` | `boolean` | 60% opacity, for someone invited who has not joined |
+| `dim` | `boolean` | Muted initials (a photo at 60%), for someone invited who has not joined |
 | `ring` | `boolean` | The hairline edge for a cream card |
 
 `AvatarStack` takes `people: { name, photo }[]` and shows the first four, overlapping by 4 px, with "+N" for the
@@ -90,3 +95,25 @@ rest.
 
 **Derived from**: the system rules for people as neutral navy-initial discs, the sizing scale and the hairline
 ring for a cream card. **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<span class="ws-avatar ws-avatar--sm" aria-hidden="true">PN</span>
+
+<span class="ws-avatar ws-avatar--plain" aria-hidden="true">DS<img alt="" src="/people/dana.jpg"></span>
+
+<div class="ws-avatar-stack" role="img" aria-label="Priya Nair, Dana Sato, Sam Chen, Nina Ross and 12 more">
+  <span class="ws-avatar ws-avatar--sm">PN</span>
+  <span class="ws-avatar ws-avatar--sm">DS</span>
+  <span class="ws-avatar ws-avatar--sm">SC</span>
+  <span class="ws-avatar ws-avatar--sm">NR</span>
+  <span class="ws-avatar ws-avatar--sm ws-avatar-stack__more">+12</span>
+</div>
+```
+
+## Styles
+
+The disc, its sizes and the stack are house styles (`design-system/components/_house.css`, "Rows and lists"); the photo
+layer is `design-system/components/Avatar/style.css`. Both are in `bundle.css` and `fello.css`. Dark comes from the
+tokens: the sunk ground, the navy initials (`--color-text-heading`), the stack's rings in `--color-bg-page`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="People" height=332 -->
+<!-- @dsCard group="People" height=420 -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
 
   <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>
-    <div class="ws-cluster ws-cluster--group">
+    <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--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>
@@ -21,6 +21,15 @@
     </div>
   </div>
 
+  <div class="ws-stack" style="align-items: flex-start;">
+    <span class="ws-muted">Photo: it covers the disc once loaded, the initials stay under it (the stand-in picture here is a drawing, not a person)</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" aria-hidden="true">DS<img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23cfc8c0'/%3E%3Ccircle cx='32' cy='26' r='12' fill='%23a39a90'/%3E%3Cpath d='M10 64c2-14 12-22 22-22s20 8 22 22z' fill='%23a39a90'/%3E%3C/svg%3E"></span><span class="ws-muted">loaded</span></div>
+      <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain" aria-hidden="true">DS<img alt="" data-state="loading" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23cfc8c0'/%3E%3C/svg%3E"></span><span class="ws-muted">loading</span></div>
+      <div class="ws-stack ws-stack--tight" style="align-items: center;"><span class="ws-avatar ws-avatar--plain ws-avatar--panel" aria-hidden="true">DS<img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23cfc8c0'/%3E%3Ccircle cx='32' cy='26' r='12' fill='%23a39a90'/%3E%3Cpath d='M10 64c2-14 12-22 22-22s20 8 22 22z' fill='%23a39a90'/%3E%3C/svg%3E"></span><span class="ws-muted">panel</span></div>
+    </div>
+  </div>
+
   <div class="ws-stack" style="align-items: flex-start;">
     <span class="ws-muted">Ring (on a cream card) and dim (invited, not yet joined)</span>
     <div class="ws-cluster ws-cluster--group">
@@ -31,12 +40,12 @@
 
   <div class="ws-stack" style="align-items: flex-start;">
     <span class="ws-muted">AvatarStack: four faces overlapping by 4 px on cream rings, the rest as "+N"</span>
-    <div class="ws-avatar-stack" aria-hidden="true">
+    <div class="ws-avatar-stack" role="img" aria-label="Priya Nair, Dana Sato, Sam Chen, Nina Ross and 12 more">
       <span class="ws-avatar ws-avatar--sm">PN</span>
       <span class="ws-avatar ws-avatar--sm">DS</span>
       <span class="ws-avatar ws-avatar--sm">SC</span>
       <span class="ws-avatar ws-avatar--sm">NR</span>
-      <span class="ws-avatar ws-avatar--sm ws-avatar-stack__more">+3</span>
+      <span class="ws-avatar ws-avatar--sm ws-avatar-stack__more">+12</span>
     </div>
   </div>
 

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

@@ -0,0 +1,14 @@
+/* ---- Avatar: the photo layer over the initials disc (the disc, its sizes and the stack are house styles). The photo
+   covers the disc once it loads; until then, and if it never does, the initials under it are the mark. ---- */
+.ws-avatar { position: relative; }
+.ws-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+/* A photo still loading (the React component sets data-state, or a page script on load) shows the initials; it fades in
+   over them once it has loaded. Without data-state the photo simply shows when the browser has it. */
+.ws-avatar > img[data-state="loading"] { opacity: 0; }
+@media (prefers-reduced-motion: no-preference) { .ws-avatar > img { transition: opacity var(--ws-duration-gentle) var(--ws-ease-soft); } }
+/* Dim (invited, not yet joined): the disc stays whole and its initials take the muted word, AA on every ground (the
+   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; }
+/* "+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/Badge/README.md

@@ -15,26 +15,23 @@ A small count or mark riding on the corner of a face, an icon or a nav row, sayi
 
 ## Anatomy
 
-- Box: at least 16 px tall, `--ws-radius-chip` (2 px) corners, matching `Chip`'s own corner rule rather than the kit's
-  pill shape, since this sits on top of a host, not inline in a sentence.
-- Words: 11 px semibold (`--ws-text-micro` at weight 600). 04-type.md's floor is "nothing under 11 px, and 11 only for a
-  chart's axis letters"; a badge's number is the one other place that floor value is reused, because a crowded count on
-  a small face cannot afford more room and this is the smallest the type system allows, not an invented smaller size.
-- Dot: 6 px, solid `--color-brand-salmon`, no words, for a face too small for a number.
-- Position: overlapping the host's corner (a small negative offset), so it reads as riding on the host, not beside it.
+- Box: an 18 px pill (`--space-md` + `--space-3xs`, `--radius-full`), at least as wide as it is tall, 6 px sides: North's
+  count. On a host's corner it is 16 px, 4 px sides, so it covers less of a face, with a 2 px ring of the page round it.
+- Words: 11 px semibold (`--ws-text-micro` at 600), even numerals, so a count that changes does not jiggle.
+- Dot: 6 px, solid salmon (`--ws-chart-under-half`), no words, for a face too small for a number.
+- Position on a host: the top-right corner, 4 px out, riding on the host.
 
 ## Variants and sizes
 
 | Tone | Fill | Words | Where |
 | --- | --- | --- | --- |
+| `navy` | `--color-text-heading` | `--ws-on-act` | a count in the nav or on a row (North's count) |
 | `needs` | `--ws-tint-needs` | `--ws-word-needs` | a count that needs you (unread, overdue) |
 | `neutral` | `--ws-surface-sunk` | `--color-text-heading` | a plain count with no urgency |
-| dot | `--color-brand-salmon` | (none) | a face too small to hold a number |
+| dot | `--ws-chart-under-half` | (none) | a face too small to hold a number |
 
-These two tones reuse `Chip`'s own `needs` and `sunk`/`navy` colour pairs rather than inventing new ones: `Chip`'s own
-rule is "a seventh look is a sign the screen needs a different component, not a new tone," and `Badge` earns its own
-component by being a different shape and role (an overlay mark, not an inline fact), not by adding a seventh `Chip`
-tone.
+The kit's marketing pill (`ws-kit-badge`, six tones) is shown captioned "kit, marketing only"; its words now take the AA
+step on their own tint (brand, success and error were 2.3 to 3.6:1).
 
 ## States
 
@@ -44,15 +41,21 @@ tone.
 - **On a nav row:** sits at the row's trailing edge.
 - **On an icon button:** sits at the button's top-right corner.
 - **The dot alone:** no number, no words, just the 6 px mark.
+- **Default, navy:** the act's navy, cream numerals (in the nav).
+- **Changed:** re-keyed with `ws-pop`, it pops in from 0.85 on the small-mark overshoot (`--ws-ease-pop`); still under
+  reduced motion.
 - **Empty:** a badge with nothing to say is left out, never rendered at zero.
+- **Dark:** every tone takes its dark values; the ring round a corner badge is the page's dark ground.
 
 ## Behaviour
 
 - Keyboard / pointer: none of its own; a badge is a `<span>`, not a control. If the host is interactive (a nav row, an
   icon button), the badge's count is read as part of that host's accessible name ("Needs you, 3"), never as a separate
-  focusable element.
-- Motion: none on its own; a badge appearing with its host may rise with it (`ws-rise`).
-- Reduced motion: no change, since it has no motion of its own.
+  focusable element: inside a row it stays readable; on a face or an icon button it is `aria-hidden` and the host's
+  label carries the count ("Leads, 12 new"), never a count only the eye gets.
+- Motion: a badge whose number changes is re-keyed with `ws-pop` and pops in (North's badge spring); one appearing with
+  its host rises with it (`ws-rise`).
+- Reduced motion: still.
 
 ## Content
 
@@ -64,18 +67,18 @@ tone.
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `tone` | `'needs' \| 'neutral'` | the look, default `needs` |
+| `tone` | `'navy' \| 'needs' \| 'neutral'` | the look, default `needs` |
 | `count` | `number` | the number shown; omit together with `dot` to show nothing |
 | `dot` | `boolean` | shows the plain salmon dot instead of a number |
 | `max` | `number` | a count past this shows as `"${max}+"` |
 
 ## Rules
 
-- Two tones only, both borrowed from `Chip`'s existing colour pairs, so a badge never introduces a colour the system
-  does not already use for "needs you" or "a neutral count."
+- Three tones only: the act's navy (a count in the nav, North's), and `Chip`'s "needs you" and neutral pairs, so a badge
+  never brings a colour the system does not already use.
 - The dot is the one case with no words, used only where a number would crowd a small face, matching the system's
   existing "a small salmon dot" needs-you mark used elsewhere on a sidebar face.
-- Never a seventh tone: a look that does not fit `needs` or `neutral` is a sign the screen needs a different component.
+- Never a fourth tone: a look that does not fit is a sign the screen needs a different component.
 
 ## Source
 
@@ -90,3 +93,22 @@ without overwhelming it), 11 px semibold instead of 12 px medium (the type floor
 only two tones instead of six, both reusing `Chip`'s existing AA-safe colour pairs rather than the kit's PROVISIONAL
 feedback tokens. The kit's six marketing tones are shown here captioned "kit, marketing only" and are not used in the
 product.
+
+0.5.0: North's count (style1.css:482; C6, C30) overturns the 2 px corners and the "no navy pill" rule: an 18 px navy pill
+with cream 11 px numerals; the corner badge keeps 16 px.
+
+## Markup
+
+```html
+<span class="ws-app-shell__row">Needs you <span class="ws-badge ws-badge--navy">5</span></span>
+<span class="ws-badge-host">
+  <span class="ws-avatar" role="img" aria-label="Priya Nair, 3 unread">PN</span>
+  <span class="ws-badge ws-badge--needs" aria-hidden="true">3</span>
+</span>
+```
+
+## Styles
+
+`design-system/components/Badge/style.css`: `ws-badge` with `--navy`, `--needs`, `--neutral`, `--dot`; `ws-badge-host`;
+the marketing `ws-kit-badge` and its six tones: `ws-kit-badge--navy`, `ws-kit-badge--neutral`, `ws-kit-badge--brand`,
+`ws-kit-badge--success`, `ws-kit-badge--error`, `ws-kit-badge--outline` (marketing pages only).

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Feedback" height=244 -->
+<!-- @dsCard group="Feedback" height=280 -->
 <!doctype html>
 <html>
 <head>
@@ -12,25 +12,26 @@
   <div class="ws-stack ws-stack--group">
 
     <div class="ws-stack">
-      <span class="ws-muted">On an avatar, a nav row and an icon button</span>
+      <span class="ws-muted">A count: navy in a nav row, the needs tint on a face, sunk on an icon button (18 px pills)</span>
       <div class="ws-cluster ws-cluster--component">
-        <span class="ws-badge-host">
-          <span class="ws-avatar">PN</span>
-          <span class="ws-badge ws-badge--needs" aria-hidden="true">3</span>
-        </span>
         <div style="width: 180px;">
           <span class="ws-app-shell__row ws-app-shell__row--current">
             <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h10M3 8h10M3 12h7"/></svg>
             <span class="ws-app-shell__name">Needs you</span>
-            <span class="ws-badge ws-badge--needs" aria-hidden="true">5</span>
+            <span class="ws-badge ws-badge--navy">5</span>
           </span>
         </div>
+        <span class="ws-badge-host">
+          <span class="ws-avatar" role="img" aria-label="Priya Nair, 3 unread">PN</span>
+          <span class="ws-badge ws-badge--needs" aria-hidden="true">3</span>
+        </span>
         <span class="ws-badge-host">
           <button type="button" class="ws-icon-btn ws-icon-btn--outline" aria-label="Leads, 12 new">
-            <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.5" r="2.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
+            <svg 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="5.5" r="2.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
           </button>
           <span class="ws-badge ws-badge--neutral" aria-hidden="true">12</span>
         </span>
+        <span class="ws-badge ws-badge--navy ws-pop" aria-hidden="true">128</span>
       </div>
     </div>
 
@@ -45,11 +46,13 @@
     </div>
 
     <div class="ws-stack">
-      <span class="ws-muted">Kit, marketing only: the six badgeVariants tones (dist/index.js), not used in the product</span>
-      <div class="ws-cluster ws-cluster--component">
+      <span class="ws-muted">Kit, marketing only: the six badgeVariants tones, words on their AA step</span>
+      <div class="ws-cluster">
         <span class="ws-kit-badge ws-kit-badge--navy">Navy</span>
         <span class="ws-kit-badge ws-kit-badge--neutral">Neutral</span>
         <span class="ws-kit-badge ws-kit-badge--brand">Brand</span>
+      </div>
+      <div class="ws-cluster">
         <span class="ws-kit-badge ws-kit-badge--success">Success</span>
         <span class="ws-kit-badge ws-kit-badge--error">Error</span>
         <span class="ws-kit-badge ws-kit-badge--outline">Outline</span>

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

@@ -0,0 +1,23 @@
+/* ---- Badge: a count or a dot on a face, a row or a button (and the kit's marketing pill). North's count (0.5.0, D1;
+   C6): an 18 px pill, 11 px semibold numerals that keep their width; navy for a count in the nav, the needs tint for
+   something that needs you, sunk for a plain count. It pops in when its number changes (re-key it with ws-pop). ---- */
+.ws-badge { 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-plus); border-radius: var(--radius-full); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-badge--navy { background: var(--color-text-heading); color: var(--ws-on-act); }
+.ws-badge--needs { background: var(--ws-tint-needs); color: var(--ws-word-needs); }
+.ws-badge--neutral { background: var(--ws-surface-sunk); color: var(--color-text-heading); }
+.ws-badge--dot { width: var(--space-xxs-plus); min-width: var(--space-xxs-plus); height: var(--space-xxs-plus); padding: 0; background: var(--ws-chart-under-half); }
+.ws-badge.ws-pop { animation-timing-function: var(--ws-ease-pop); }
+/* What a badge sits on: the badge on its top right corner, 4 px out, 16 tall so it covers less of a face, a 2 px ring
+   of the page keeping it apart. */
+.ws-badge-host { position: relative; display: inline-flex; }
+.ws-badge-host > .ws-badge { position: absolute; top: calc(var(--space-xxs) * -1); right: calc(var(--space-xxs) * -1); min-width: var(--space-md); height: var(--space-md); padding: 0 var(--space-xxs); box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); }
+.ws-badge-host > .ws-badge--dot { min-width: var(--space-xxs-plus); height: var(--space-xxs-plus); padding: 0; }
+/* The kit's badge, marketing pages only: a pill, 12 px medium, six tones. Words take their AA step on their own tint;
+   the outline is drawn inside, so every tone is the same size. */
+.ws-kit-badge { display: inline-flex; align-items: center; gap: var(--space-xxs); height: var(--space-lg); padding: 0 var(--space-xs-plus); border-radius: var(--radius-full); font-size: var(--font-size-2xs); line-height: var(--space-md); font-weight: 500; white-space: nowrap; }
+.ws-kit-badge--navy { background: color-mix(in srgb, var(--color-text-heading) 10%, transparent); color: var(--color-text-heading); }
+.ws-kit-badge--neutral { background: var(--ws-track); color: var(--color-text-heading); }
+.ws-kit-badge--brand { background: color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent); color: var(--color-text-brand-strong); }
+.ws-kit-badge--success { background: var(--color-feedback-success-bg); color: var(--color-text-success-strong); }
+.ws-kit-badge--error { background: color-mix(in srgb, var(--color-feedback-error) 14%, transparent); color: var(--color-text-error-strong); }
+.ws-kit-badge--outline { background: transparent; color: var(--color-text-body); box-shadow: inset 0 0 0 var(--ws-line) var(--color-border-hairline); }

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

@@ -14,13 +14,14 @@ A full-width notice for a state of the whole page or card, in one of four quiet
 
 ## Anatomy
 
-- Shell: full width of its container, `--space-sm` (12 px) padding, `--ws-radius-card` (8 px) corners, a flex row of an
-  icon, words, an act and an optional close.
-- Icon: 16 px line icon at the left, coloured to match the tone's words.
-- Words: 14 px, two parts: the first sentence navy medium (`--color-text-heading`, weight 500), the rest body grey
-  regular (`--color-text-body`): an emphasis on the headline clause, not a two-tone treatment of every word.
-- Act: a text act (`ws-act`, quiet) or a secondary small (28 px) button, at the right.
-- Optional close: a 24 px `xs` ghost `IconButton` "x".
+- Shell: full width of its container, 8 / 12 px inside (`--space-xs`, `--space-sm`), 8 px corners (`--ws-radius-card`),
+  a row of a mark, words, an act and an optional close, 8 apart.
+- One band: everything is centred on a 28 px band at the top (40 on touch): the mark, the first line of words and each
+  act. When the words wrap on a phone the mark and the acts stay level with the first line.
+- Mark: 16 px line icon at the left, in the tone's words colour.
+- Words: 14 / 20, two parts: the first sentence navy medium, the rest body grey.
+- Act: a `text` button or a `well` small (28 px) button, at the right.
+- Optional close: a 24 px `xs` ghost `IconButton` x (a 40 px target on touch).
 
 ## Variants and sizes
 
@@ -37,7 +38,9 @@ There is one size; it spans whatever width its container gives it.
 
 - **The four 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.
+- **Dark:** each tint and its words take their dark values; every pair stays AA.
 
 ## Behaviour
 
@@ -59,7 +62,7 @@ There is one size; it spans whatever width its container gives it.
 | `tone` | `'neutral' \| 'needs' \| 'positive' \| 'working'` | the look, default `neutral` |
 | `icon` | `IconName` | the 16 px icon at the left |
 | `children` | `ReactNode` | the words |
-| `action` | `ReactNode` | the text or secondary small button at the right |
+| `action` | `ReactNode` | the `text` or `well` small button at the right |
 | `onDismiss` | `() => void` | present only when the close act shows |
 
 ## Rules
@@ -74,5 +77,23 @@ There is one size; it spans whatever width its container gives it.
 
 **Derived from**: 10-patterns.md's one ad hoc case ("Offline, a muted line at the top of the stage"), generalized into
 four tones built on the system's own wash tokens (`ws-tint-needs`, `ws-tint-live`, `ws-card-tint-blue`,
-`ws-surface-sunk`) and `Button`'s secondary small size for its act. **Precedent**: an intentional addition decided
+`ws-surface-sunk`) and `Button`'s small size for its act. **Precedent**: an intentional addition decided
 from the system, 26 Oct 2026.
+
+0.5.0: the band fix (the mark and the acts floated to the middle of wrapped words).
+
+## Markup
+
+```html
+<div class="ws-banner ws-banner--needs" 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"><path d="M8 2.3 14.6 13.5H1.4L8 2.3Z"/><path d="M8 6.4v3"/><path d="M8 11.5v.05"/></svg>
+  <span class="ws-banner__words"><span class="ws-banner__lead">You're offline.</span> <span class="ws-banner__rest">Changes will send once you're back.</span></span>
+  <button type="button" class="ws-btn ws-btn--well ws-btn--sm">Retry</button>
+  <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Dismiss"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
+</div>
+```
+
+## Styles
+
+`design-system/components/Banner/style.css`: `ws-banner` with `--neutral`, `--needs`, `--positive`, `--working`;
+`__mark`, `__words`, `__lead`, `__rest`.

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

@@ -25,7 +25,7 @@
       <div class="ws-banner ws-banner--needs" 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"><path d="M8 2.3 14.6 13.5H1.4L8 2.3Z"/><path d="M8 6.4v3"/><path d="M8 11.5v.05"/></svg>
         <span class="ws-banner__words"><span class="ws-banner__lead">You're offline.</span> <span class="ws-banner__rest">Changes will send once you're back.</span></span>
-        <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Retry</button>
+        <button type="button" class="ws-btn ws-btn--well ws-btn--sm">Retry</button>
         <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Dismiss">
           <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
         </button>

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

@@ -0,0 +1,19 @@
+/* ---- Banner: a full-width line of news on a tint, its mark, its words and at most one act (and a close). Everything
+   sits on one 28 px band at the top (40 on touch): the mark, the first line of words and each act are centred on it, so
+   when the words wrap on a phone the mark and the acts stay with the first line instead of floating in the middle. ---- */
+.ws-banner { --ws-banner-band: var(--ws-control-h-sm); display: flex; align-items: flex-start; gap: var(--space-xs); width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--ws-radius-card); }
+.ws-banner__mark { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); margin-block: calc((var(--ws-banner-band) - var(--ws-icon)) / 2); }
+.ws-banner__words { flex: 1; min-width: 0; padding-block: calc((var(--ws-banner-band) - var(--space-md) - var(--space-xxs)) / 2); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); }
+.ws-banner > :is(.ws-btn--link, .ws-btn--text) { min-height: var(--space-lg); }
+.ws-banner > :is(.ws-btn--link, .ws-btn--text, .ws-icon-btn--xs) { margin-block: calc((var(--ws-banner-band) - var(--space-lg)) / 2); }
+.ws-banner__lead { font-weight: 500; color: var(--color-text-heading); }
+.ws-banner__rest { color: var(--color-text-body); }
+.ws-banner--neutral { background: var(--ws-surface-sunk); }
+.ws-banner--neutral .ws-banner__mark { color: var(--color-text-muted); }
+.ws-banner--needs { background: var(--ws-tint-needs); }
+.ws-banner--needs .ws-banner__mark, .ws-banner--needs .ws-banner__lead { color: var(--ws-word-needs); }
+.ws-banner--positive { background: var(--ws-tint-live); }
+.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); }
+@media (pointer: coarse) { .ws-banner { --ws-banner-band: var(--ws-touch); } }