@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,6 +1,6 @@
 The kit's marketing piece: for a public page, never a product screen.
 
-Three features in a row, each a `KitCard` with an icon, a title, a sentence and a link.
+Three features in a row, each a `KitCard`-style card with an icon, a title, a sentence and a link.
 
 ## Use it when
 
@@ -11,43 +11,45 @@ Three features in a row, each a `KitCard` with an icon, a title, a sentence and
 
 - More than three or four things of unequal importance: a longer list reads better as rows, not a grid of cards.
 - A single deep feature that needs its own section and screenshot: give it its own full-width block instead.
-- Any product screen: the product has no feature-grid idea; a page inside the main workspace shows state, not
-  a pitch for the product itself.
+- Any product screen: a page inside the workspace shows state, not a pitch for the product itself.
 
 ## Anatomy
 
-- Row: three `KitCard`s (`surface="white"`), `--layout-col-gap` (24px) apart, wrapping to one column under the
-  content width.
-- Each card: `--space-lg` (24px) padding (via `CardHeader`/`CardContent`), a 40px `ws-disc` icon at the top, a
-  title `--space-md` (16px) below it, a body paragraph `--space-xs` (8px) under the title, a link
-  `--space-md` below that.
-- Icon: the product's own `ws-disc` (a 40px round disc, `--ws-surface-sunk` fill, `--color-text-heading` icon
-  colour), holding a 20px hand-drawn line icon.
-- Title: `--font-size-lg2` (20px) semibold, `--color-brand-navy`.
-- Body: `--font-size-md` (16px), `--color-text-primary`.
-- Link: `--font-size-sm` (14px) medium, `--color-text-interactive` (mid blue), with a trailing arrow icon,
-  underlining on hover.
+- Band: `--color-surface`, `--space-xl` (32px) top and bottom, `--layout-margin` (48px) sides (16px under 40rem).
+- Row (`__grid`): a grid of columns at least 260px wide, `--layout-col-gap` (24px) apart, capped at
+  `--layout-content-max`; the cards are equal height in each row.
+- Card (`__card`): 4px corners, a 1px `--color-border-default` edge, `--color-surface`, `--space-lg` (24px) padding;
+  a column whose link sits at the foot, so cards of uneven copy line their links up.
+- Icon (`__icon`): the house `ws-disc`, 40px, `--ws-surface-sunk` fill, a 20px line icon in `--color-text-heading`.
+- Title (`__title`): `--space-md` (16px) under the icon, 20/28 semibold `--color-text-heading`.
+- Body (`__body`): `--space-xs` (8px) under the title, 16/24 `--color-text-primary`, at least `--space-md` above the link.
+- Link (`__link`): 14/20 medium `--color-text-interactive` (mid blue), a 12px trailing arrow `--space-xxs` from the
+  words, underlining on hover.
 
 ## Variants and sizes
 
-One layout: three columns, one gap size. A fourth card wraps to a second row at the same gap rather than
-shrinking the columns further.
+One layout: as many 260px-or-wider columns as the row holds, one gap. Three fit a screen from 924px wide; on a
+tablet two sit in a row and the third takes the first column of the next, the same width as the others; on a phone,
+one column. A fourth card joins the row where there is room for it and otherwise starts the next row, in the same
+columns.
 
 ## States
 
 - **Default:** as above.
-- **Hover:** only the link reacts (underline); the card itself is not `interactive`, since the click target is
-  the link, not the whole card.
-- **Selected / pending / disabled / error:** not applicable.
-- **Empty:** not applicable; a feature section is never shown with fewer than its real features.
-- **Long label:** a longer title wraps to a second line; the body and link below it shift down with it, keeping
-  the three cards' internal rhythm even if their total heights differ.
-- **Narrow:** below the content width the three cards stack to one column, full width, in the same order.
+- **Hover:** only the link reacts (underline); the card is not interactive, since the click target is the link.
+  Only on a pointer that hovers (`@media (hover: hover)`), so a tap on a phone leaves nothing behind.
+- **Focus:** the link takes the house ring, 2px navy, 2px out.
+- **Selected / pending / disabled / error / empty:** not applicable.
+- **Long label:** a longer title wraps; the body follows it, and the link stays on the card's foot, level with its
+  neighbours.
+- **Narrow:** two to a row on a tablet, then one column on a phone, in the same order; a card that wraps never
+  stretches wider than its column.
+- **Touch:** the link keeps its look and takes a 44px hit area above and below its words.
 
 ## Behaviour
 
-- Keyboard: each card's link is a real `<a>`, focusable in document order; the card itself takes no focus.
-- Pointer / touch: the link is the only interactive target.
+- Keyboard: each card's link is a real `<a>`, focusable in document order; the card takes no focus.
+- Pointer / touch: the link is the only target; 44px tall on touch.
 - Motion: none of its own.
 
 ## Content
@@ -58,7 +60,7 @@ shrinking the columns further.
 
 ## Props
 
-Not a kit export; composed from `KitCard` and `ws-disc`. A reusable version would take:
+Not a kit export. A reusable version would take:
 
 | Prop | Type | Meaning |
 | --- | --- | --- |
@@ -66,19 +68,39 @@ Not a kit export; composed from `KitCard` and `ws-disc`. A reusable version woul
 
 ## Rules
 
-- **Intentional addition, decided from the system (26 Oct 2026):** the kit ships `Card` but no grid pattern for
-  it; a landing page needs exactly this arrangement for its "what you get" section, built from `KitCard` and the
-  kit's own layout gap token.
-- The gap between the cards is `--layout-col-gap` (24px), named in `tokens/tokens.md` as the kit's own column gap,
-  the same value the brief calls out directly: "the 24 px column gap (`--layout-col-gap`)."
-- The title size, `--font-size-lg2` (20px), is `$P/tokens.json`'s own label for this exact job: "font-size-lg2:
-  marketing small heading."
-- The icon reuses the product's `ws-disc` rather than inventing a second disc shape, since the brief and the
-  system agree a 40px disc already exists and a landing page is still built from the one system (`08-choosing-components.md`'s
-  method: find the existing piece before adding one).
+- **44px for every act on a public page** (`14-accessibility.md`): the link was 20px tall on touch. Its hit area grows,
+  its words do not move.
+- **A wrapped card keeps its column** (4 Nov 2026): the row was a wrapping flex row, so at 768px the third card ran the
+  full width under the other two. It is a grid now.
+- **Links on one line across the row** (4 Nov 2026): the link sits on each card's foot, so a two-line title in one card
+  no longer drops its link below its neighbours'.
+- The gap between the cards is `--layout-col-gap` (24px), the kit's own column gap.
+- The title size, `--font-size-lg2` (20px), is the kit's "marketing small heading".
+- The icon reuses the house `ws-disc` rather than a second disc shape.
 
 ## Source
 
-**Derived from**: `KitCard`, the system's own `ws-disc`, and the kit's layout gap and type-scale tokens
-(`layout-col-gap`, `font-size-lg2`, `font-size-md`). **Precedent**: an intentional addition decided from the
-system, 26 Oct 2026 (no product source and no kit component built this pattern before).
+**Derived from**: `KitCard`, the house `ws-disc`, the kit's layout gap and type-scale tokens (`layout-col-gap`,
+`font-size-lg2`, `font-size-md`), the touch floors and the geometry check at 390. **Precedent**: an intentional addition
+decided from the system, 26 Oct 2026.
+
+## Markup
+
+```html
+<section class="ws-feature-grid">
+  <div class="ws-feature-grid__grid">
+    <div class="ws-feature-grid__card">
+      <span class="ws-disc ws-feature-grid__icon" aria-hidden="true">
+        <svg viewBox="0 0 16 16" fill="none"><path d="M3 12V8M8 12V4M13 12V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </span>
+      <h3 class="ws-feature-grid__title">Live call insights</h3>
+      <p class="ws-feature-grid__body">Every outreach call logged as it happens.</p>
+      <a class="ws-feature-grid__link" href="/insights">See how it works
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M5 11 11 5M5.5 5h5.5v5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </a>
+    </div>
+  </div>
+</section>
+```
+
+Styles: the `FeatureGrid` block (`components/FeatureGrid/style.css`); `ws-disc` is in `fello-core.css`.

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

@@ -1,6 +1,6 @@
-<!-- @dsCard group="Marketing" height=334 -->
+<!-- @dsCard group="Marketing" height=306 -->
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>FeatureGrid</title>

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

@@ -0,0 +1,20 @@
+/* ---- FeatureGrid: the kit's three feature cards in a row, wrapping to one column ---- */
+.ws-feature-grid { background: var(--color-surface); width: 100%; padding: var(--space-xl) var(--layout-margin); }
+/* A grid of columns at least 260 px wide: a card that wraps keeps its column's width instead of stretching across the row. */
+.ws-feature-grid__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-9xl) + var(--space-3xl) + var(--space-sm))), 1fr)); gap: var(--layout-col-gap); max-width: var(--layout-content-max); margin: 0 auto; }
+.ws-feature-grid__card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; border-radius: var(--ws-radius-control); border: var(--ws-line) solid var(--color-border-default); background: var(--color-surface); padding: var(--space-lg); }
+.ws-feature-grid__icon { width: var(--space-2xl); height: var(--space-2xl); }
+.ws-feature-grid__icon svg { width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+.ws-feature-grid__title { margin-top: var(--space-md); font-size: var(--font-size-lg2); font-weight: 600; line-height: var(--ws-leading-title); color: var(--color-text-heading); text-wrap: balance; overflow-wrap: break-word; }
+.ws-feature-grid__body { margin-top: var(--space-xs); margin-bottom: var(--space-md); font-size: var(--font-size-md); line-height: var(--space-lg); color: var(--color-text-primary); }
+/* The link sits at the card's foot, so cards of uneven copy still line their links up. */
+.ws-feature-grid__link { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-xxs); font-size: var(--font-size-sm); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-interactive); text-decoration: none; }
+@media (hover: hover) { .ws-feature-grid__link:hover { text-decoration: underline; } }
+.ws-feature-grid__link svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+/* Touch: the public page's 44 px target, as a hit area round the words so the card keeps its rhythm. */
+@media (pointer: coarse) {
+  .ws-feature-grid__link::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--ws-touch-public)) / 2)) 0; }
+}
+@media (max-width: 40rem) {
+  .ws-feature-grid { padding-inline: var(--space-md); }
+}

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

@@ -42,9 +42,11 @@ There is one size for the zone; it spans the width of its container.
 ## States
 
 - **Empty:** the dotted zone, its icon, words and the "Choose a file" button.
-- **Dragging over:** the zone's hairline edge turns `--color-brand-mid-blue`, the same colour `Input` uses for its own
-  focus edge, since a drag-over is an active, not an error, state.
-- **Uploading:** a file row shows its `Meter` bar growing to the latest share.
+- **Focus:** the "Choose a file" act takes the kit's ring when its file input is focused.
+- **Dragging over:** the zone's edge turns a 1 px mid blue (`--color-text-interactive`), the kit's working colour, since
+  a drag-over is an active, not an error, state (the navy ring stays the focus mark).
+- **Uploading:** a file row shows its `Meter` bar growing to the latest share; the bar is a `role="progressbar"` with
+  `aria-valuenow` and a label naming the file, so its share is heard, not only seen.
 - **Done:** the bar is replaced by a `--ws-word-positive` tick.
 - **Rejected:** the row shows its reason in `--ws-word-needs` words instead of a bar.
 
@@ -85,3 +87,31 @@ There is one size for the zone; it spans the width of its container.
 
 **Derived from**: the `.ws-dots` dotted field, `.ws-disc`, `Meter`'s progress bar, and `Button`'s secondary 32 px
 size. **Precedent**: an intentional addition decided from the system, 26 Oct 2026 (no file upload control existed).
+
+## Markup
+
+```html
+<div class="ws-file-upload ws-dots">
+  <span class="ws-disc ws-file-upload__disc">...</span>
+  <p class="ws-body">Drop a file here, or</p>
+  <label class="ws-btn ws-btn--secondary">Choose a file <input type="file" accept=".png,.jpg,.jpeg,.pdf"></label>
+  <p class="ws-muted">PNG, JPG or PDF, up to 10 MB</p>
+</div>
+<div class="ws-file-upload__file">
+  <span class="ws-disc ws-file-upload__file-disc">...</span>
+  <div class="ws-file-upload__file-body">
+    <span class="ws-file-upload__file-name">lead-photo.jpg</span>
+    <span class="ws-file-upload__file-meta">
+      <span class="ws-file-upload__bar" role="progressbar" aria-label="Uploading lead-photo.jpg" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><span class="ws-file-upload__bar-fill" style="width: 64%;"></span></span>
+      <span class="ws-file-upload__file-size">2.1 MB</span>
+    </span>
+  </div>
+  <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Remove lead-photo.jpg">...</button>
+</div>
+```
+
+## Styles
+
+`design-system/components/FileUpload/style.css`: `ws-file-upload` and `--drag`, `__disc`, `__file`, `__file-disc`,
+`__file-body`, `__file-name`, `__file-meta`, `__file-size`, `__bar`, `__bar-fill`, `__done`, `__error`. The file input is
+laid over its act, unseen, so the act takes its focus ring.

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

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="ws-stage">
-  <div style="display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: var(--ws-gap-component); width: 100%;">
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ws-gap-component); width: 100%;">
 
     <div class="ws-stack">
       <span class="ws-muted">Empty</span>
@@ -20,7 +20,7 @@
         <p class="ws-body">Drop a file here, or</p>
         <label class="ws-btn ws-btn--secondary">
           Choose a file
-          <input type="file" class="ws-sr">
+          <input type="file" accept=".png,.jpg,.jpeg,.pdf">
         </label>
         <p class="ws-muted">PNG, JPG or PDF, up to 10 MB</p>
       </div>
@@ -35,7 +35,7 @@
         <p class="ws-body">Drop a file here, or</p>
         <label class="ws-btn ws-btn--secondary">
           Choose a file
-          <input type="file" class="ws-sr">
+          <input type="file" accept=".png,.jpg,.jpeg,.pdf">
         </label>
         <p class="ws-muted">PNG, JPG or PDF, up to 10 MB</p>
       </div>
@@ -48,7 +48,7 @@
         <div class="ws-file-upload__file-body">
           <span class="ws-file-upload__file-name">lead-photo.jpg</span>
           <span class="ws-file-upload__file-meta">
-            <span class="ws-file-upload__bar" aria-hidden="true"><span class="ws-file-upload__bar-fill" style="width: 64%;"></span></span>
+            <span class="ws-file-upload__bar" role="progressbar" aria-label="Uploading lead-photo.jpg" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><span class="ws-file-upload__bar-fill" style="width: 64%;"></span></span>
             <span class="ws-file-upload__file-size">2.1 MB</span>
           </span>
         </div>
@@ -85,6 +85,20 @@
       </div>
     </div>
 
+    <div class="ws-stack">
+      <span class="ws-muted">A long file name wraps beside its act</span>
+      <div class="ws-file-upload__file">
+        <span class="ws-disc ws-file-upload__file-disc"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="2" width="10" height="12" rx="1"/><path d="M6 6h4M6 9h4"/></svg></span>
+        <div class="ws-file-upload__file-body">
+          <span class="ws-file-upload__file-name">2026-10-buyer-consultation-notes-priya-nair-lakeview-estates.pdf</span>
+          <span class="ws-file-upload__done"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg>1.4 MB, done</span>
+        </div>
+        <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Remove 2026-10-buyer-consultation-notes-priya-nair-lakeview-estates.pdf">
+          <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>
+    </div>
+
   </div>
 </div>
 </body>

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

@@ -0,0 +1,23 @@
+/* ---- FileUpload: a drop zone on the dotted field with one act, then a row a file with its progress, done or error.
+   The zone's edge is drawn inside; dragging over turns it mid blue at 1 px. The act is a label holding the file input
+   (laid over it, unseen), so it takes the focus ring when the input does. A long file name wraps, never pushes the
+   remove act out. ---- */
+.ws-file-upload { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--ws-radius-card); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); text-align: center; transition: box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-file-upload--drag { box-shadow: inset 0 0 0 var(--ws-line) var(--color-text-interactive); }
+.ws-file-upload .ws-btn > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.ws-file-upload .ws-btn:has(> input:focus-visible) { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+.ws-file-upload__disc { width: var(--space-2xl); height: var(--space-2xl); }
+.ws-file-upload__disc svg { width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+.ws-file-upload__file { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; }
+.ws-file-upload__file-disc { width: var(--ws-control-h-sm); height: var(--ws-control-h-sm); flex-shrink: 0; }
+.ws-file-upload__file-disc svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-file-upload__file-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--space-3xs); }
+.ws-file-upload__file-name { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 600; color: var(--color-text-heading); overflow-wrap: anywhere; }
+.ws-file-upload__file-meta { display: flex; align-items: center; gap: var(--space-xs); }
+.ws-file-upload__file-size { flex-shrink: 0; font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+.ws-file-upload__bar { flex: 1; height: var(--space-xxs); overflow: hidden; border-radius: var(--ws-radius-chip); background: var(--ws-track); }
+.ws-file-upload__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--color-text-heading); transition: width var(--ws-duration-gentle) var(--ws-ease-soft); }
+.ws-file-upload__done, .ws-file-upload__error { display: flex; align-items: center; gap: var(--space-xxs); font-size: var(--ws-text-dense); line-height: var(--space-md); }
+.ws-file-upload__done { color: var(--ws-word-positive); }
+.ws-file-upload__error { color: var(--ws-word-needs); }
+.ws-file-upload__done svg, .ws-file-upload__error svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); flex-shrink: 0; }

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

@@ -0,0 +1,114 @@
+A page's filters in one row: a period switch at the start and the pickers that scope the page at the end (North's
+filter bar).
+
+## Use it when
+
+- A dashboard or a report page is read for a period and a scope (this month, one team, one source), and every card on
+  the page answers to the same choice.
+- The filters belong to the whole page, not to one chart or one list.
+
+## Not for
+
+- A filter that belongs to one chart or one list: put it in that card's head (`Segmented --sm`, `Select --sm`).
+- A search: use the search box (`Input`'s `ws-search`).
+- A form's choices: use the fields.
+
+## Anatomy
+
+- Bar: a row at least 28 px tall, two groups at the two ends (12 apart, 10 between lines when they wrap); a group that
+  wraps starts its own line at the left. It sizes from its own width, not the window's.
+- Start group: the period, a `Segmented --sm` (a 28 px track, 24 px items, 12 / 16 words).
+- End group: the pickers (`ws-filter-pick`), 8 apart: 28 px tall, 4 px corners, the surface with the 0.5 px card edge
+  drawn inside, 10 / 8 inside, 12 / 16 words: the label in the muted words, 6 px, then the value in navy medium, then a
+  12 px navy chevron.
+- Narrower than 76rem the pickers tighten (8 / 6 inside, 4 apart); narrower than 48rem their labels go and only the
+  values show (each picker's `aria-label` carries its label and value). Both steps read the bar's own width (a named
+  container), so a picker used outside a bar, in a list head or a detail, keeps North's 10 / 8 wherever it sits.
+
+## Variants and sizes
+
+One size. The bar holds one period switch and up to four pickers; more than that is a sign the page asks too much.
+
+## States
+
+- **Default:** each picker shows its label and its current value.
+- **Hover (a mouse only):** a picker's edge darkens (#AAA49D), no fill.
+- **Focus:** the kit's ring, 2 px navy, 2 px out, round the picker or the period item.
+- **Pressed:** a picker gives to 0.97.
+- **Open:** the picker's `aria-expanded="true"`, its `Menu` under it (8 below, from its corner), the chosen row showing
+  its tick (`ws-menu-item__tick` in every row; only the `aria-checked="true"` one shows).
+- **Long value:** cut with an ellipsis, whole in the picker's `title`.
+- **Narrow:** the groups wrap, each from the left; the labels go under 48rem.
+- **Touch:** pickers and period items 40 tall.
+- **Dark:** the surface, the edge and the words take their dark values.
+- **Empty / loading / error:** not applicable; a filter always holds a value ("All teams" is a value).
+
+## Behaviour
+
+- A picker is a `<button aria-haspopup="menu" aria-expanded>` opening a `Menu` of `menuitemradio`s; choosing one closes
+  it and updates the page.
+- The period is a `Segmented` (buttons with `aria-pressed`, or links when the period lives in the URL).
+- The bar is `role="group"` with an `aria-label` ("Filters").
+- In North the bar docks into the top bar when the page scrolls under it; that belongs to the shell (`AppShell`).
+- Motion: colours over the hover beat; the menu opens as `Menu`'s.
+
+## Content
+
+- A picker's label is the dimension ("Team", "Source"), its value the choice ("All teams", "Zillow, Realtor.com").
+- "All" values say what they cover ("All teams", not "All").
+- No em dashes.
+
+## Props
+
+| Name | Type | Meaning |
+| --- | --- | --- |
+| `period` | `SegmentedItem[]` | the period switch |
+| `picks` | `{ key, label, value, options, onSelect }[]` | the pickers, at the end |
+| `label` | `string` | the bar's name, default "Filters" |
+
+## Rules
+
+- Page-wide filters live in one `FilterBar` at the top of the page, under its title (North; overturns 10-patterns.md's
+  "nothing page-wide looks like a filter").
+- One period switch, at the start; pickers at the end.
+- A picker never hides its label without an `aria-label` that carries it.
+
+## Source
+
+**Derived from**: Seth's North (style1.css:417, :802-812, :1056-1060, :1081-1084): the 28 px filter bar, the filter
+segmented, the label-and-value picker with its darker edge on hover, the 10 / 12 gaps, the tighter step and the hidden
+label on a narrow page. North's 820 and 1120 px page steps snap to the kit's 48rem and 76rem container steps; its
+#8A8A8A label (3.35:1) takes the muted words' AA step.
+
+## Markup
+
+```html
+<div class="ws-filter-bar" role="group" aria-label="Filters">
+  <div class="ws-filter-bar__group">
+    <div class="ws-segmented ws-segmented--sm" role="group" aria-label="Period">
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
+    </div>
+  </div>
+  <div class="ws-filter-bar__group">
+    <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Team: All teams" popovertarget="team-menu">
+      <span class="ws-filter-pick__label">Team</span><span class="ws-filter-pick__value">All teams</span>
+      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+    </button>
+  </div>
+</div>
+<!-- the picker's list: Menu's choice rows, the tick on the chosen one -->
+<div id="team-menu" class="ws-menu" role="menu" aria-label="Team" popover>
+  <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="true">All teams
+    <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  </button>
+  <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">North region
+    <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  </button>
+</div>
+```
+
+## Styles
+
+`design-system/components/FilterBar/style.css`: `ws-filter-bar`, `__group`, `ws-filter-pick`, `__label`, `__value`. The
+period is `Segmented`'s `--sm`; the open picker's list is `Menu`.

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

@@ -0,0 +1,82 @@
+<!-- @dsCard group="Navigation" height=380 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>FilterBar</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column">
+
+  <div class="ws-stack">
+    <span class="ws-muted">A page's filters: the period at the start, the pickers at the end (28 px)</span>
+    <div class="ws-filter-bar" role="group" aria-label="Filters">
+      <div class="ws-filter-bar__group">
+        <div class="ws-segmented ws-segmented--sm" role="group" aria-label="Period">
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Quarter</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Year</button>
+        </div>
+      </div>
+      <div class="ws-filter-bar__group">
+        <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Team: All teams">
+          <span class="ws-filter-pick__label">Team</span><span class="ws-filter-pick__value">All teams</span>
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+        </button>
+        <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Source: Zillow, Realtor.com">
+          <span class="ws-filter-pick__label">Source</span><span class="ws-filter-pick__value">Zillow, Realtor.com</span>
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+        </button>
+        <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Agent: Anyone">
+          <span class="ws-filter-pick__label">Agent</span><span class="ws-filter-pick__value">Anyone</span>
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- The open menu hangs 8 under its picker, left edges flush (it starts its line, so it flips to the side with room);
+       the stack keeps the room it covers, since a menu floats over what is below it. -->
+  <div class="ws-stack" style="width: 620px; max-width: 100%; padding-bottom: var(--space-8xl);">
+    <span class="ws-muted">In a narrower region: the groups wrap, each from the left, and the pickers show their values only; Team is open</span>
+    <div class="ws-filter-bar" role="group" aria-label="Filters, narrow">
+      <div class="ws-filter-bar__group">
+        <div class="ws-segmented ws-segmented--sm" role="group" aria-label="Period">
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Quarter</button>
+          <button type="button" class="ws-segmented__item" aria-pressed="false">Year</button>
+        </div>
+      </div>
+      <div class="ws-filter-bar__group">
+        <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Source: Zillow, Realtor.com and three more lead sources" title="Zillow, Realtor.com and three more lead sources">
+          <span class="ws-filter-pick__label">Source</span><span class="ws-filter-pick__value">Zillow, Realtor.com and three more lead sources</span>
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+        </button>
+        <span style="position: relative; display: inline-flex;">
+          <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="true" aria-controls="fb-team" aria-label="Team: All teams">
+            <span class="ws-filter-pick__label">Team</span><span class="ws-filter-pick__value">All teams</span>
+            <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
+          </button>
+          <div class="ws-menu" role="menu" id="fb-team" aria-label="Team" style="position: absolute; top: calc(100% + var(--space-xs)); left: 0;">
+            <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="true">All teams
+              <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">North region
+              <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">South region
+              <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,22 @@
+/* ---- FilterBar: North's page filters (0.5.0, D1; style1.css:417, :802-812): a period switch (Segmented --sm) and the
+   pickers that scope the page (FilterPick), 28 tall, the two groups at the two ends, 12 apart and 10 between lines
+   when they wrap; a wrapped group starts its own line at the left. It sizes from its own width: under 76rem the
+   pickers tighten, under 48rem their labels go and only the values show (each pick's aria-label carries its label and value). ---- */
+.ws-filter-bar { container: ws-filter-bar / inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs-plus) var(--space-sm); min-height: var(--ws-control-h-sm); }
+.ws-filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-width: 0; max-width: 100%; }
+/* A picker: the label in the muted words, then the value in navy medium and a 12 px chevron; it opens a Menu. */
+.ws-filter-pick { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-xxs-plus); max-width: 100%; height: var(--ws-control-h-sm); padding: 0 var(--space-xs) 0 var(--space-xs-plus); border: 0; border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-shadow-hairline-in); color: var(--color-text-heading); font-size: var(--ws-text-dense); line-height: var(--space-md); white-space: nowrap; cursor: pointer; transition: box-shadow var(--ws-duration-hover) var(--ws-ease-soft), transform var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-filter-pick__label { color: var(--color-text-muted); }
+.ws-filter-pick__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
+.ws-filter-pick svg { flex-shrink: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+@media (hover: hover) { .ws-filter-pick:hover { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); } }
+@media (prefers-reduced-motion: no-preference) { .ws-filter-pick:active { transform: scale(var(--ws-press-scale)); transition-duration: var(--ws-duration-instant); } }
+/* The bar's own width (a named container: a picker outside a bar, in a list head or a detail, keeps North's 10 / 8 whatever
+   region it sits in). */
+@container ws-filter-bar (max-width: 76rem) {
+  .ws-filter-bar__group { gap: var(--space-xxs-plus); }
+  .ws-filter-pick { gap: var(--space-xxs); padding: 0 var(--space-xxs-plus) 0 var(--space-xs); }
+  .ws-filter-bar .ws-segmented--sm .ws-segmented__item { padding: 0 var(--space-xs); }
+}
+@container ws-filter-bar (max-width: 48rem) { .ws-filter-pick__label { display: none; } }
+@media (pointer: coarse) { .ws-filter-pick { min-height: var(--ws-touch); } }