@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -0,0 +1,35 @@
+/* ---- TopBar: a product's 56 px top strip, the wordmark, up to five links, search, one quiet act and the person. Under
+   60rem of window (North's step, where five links and the search stop fitting) it is the phone form: the wordmark and the
+   menu button only; --phone draws that form at any width. ---- */
+.ws-top-bar { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; height: var(--ws-header-h); padding: 0 var(--space-lg); }
+.ws-top-bar__wordmark { flex-shrink: 0; font-size: var(--ws-text-value); line-height: var(--space-lg); font-weight: 600; color: var(--color-text-heading); }
+/* The links keep their words (they never shrink under them or run into the search); the search gives way, down to 96. */
+.ws-top-bar__links { display: flex; flex: 1 0 auto; align-items: center; gap: var(--space-lg); }
+.ws-top-bar__link { position: relative; display: inline-flex; align-items: center; height: var(--ws-header-h); margin-inline: calc(var(--space-xs) * -1); padding-inline: var(--space-xs); font-size: var(--ws-text-body); font-weight: 500; color: var(--color-text-body); text-decoration: none; white-space: nowrap; }
+@media (hover: hover) { .ws-top-bar__link:hover { color: var(--color-text-heading); } }
+.ws-top-bar__link:is(.ws-top-bar__link--current, [aria-current="page"]) { color: var(--color-text-heading); }
+/* A link is the bar's full height, so its ring goes inside it, on the control corners, never over the bar's edge; the
+   link's box bleeds 8 past its words (Seth's A3) so the ring clears them and the words keep their place. */
+.ws-top-bar__link:focus-visible { border-radius: var(--ws-radius-control); outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-top-bar__link:is(.ws-top-bar__link--current, [aria-current="page"])::after { content: ""; position: absolute; inset-inline: var(--space-xs); bottom: 0; height: var(--ws-ring); background: var(--color-text-heading); border-radius: var(--ws-radius-bar); }
+.ws-top-bar__search { display: flex; flex-shrink: 1; align-items: center; gap: var(--space-xxs); width: var(--space-9xl); min-width: var(--space-6xl); 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-top-bar__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-top-bar__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-top-bar__search > input::placeholder { color: var(--color-text-muted); opacity: 1; }
+.ws-top-bar__search > input:focus-visible { outline: none; }
+.ws-top-bar__search:focus-within { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+@media (pointer: coarse) { .ws-top-bar__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-top-bar__end { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-xs); }
+.ws-top-bar__menu { display: none; }
+/* The phone form: the wordmark at the left, the menu button at the right; the links, the search and the quiet act move
+   into the menu it opens. */
+.ws-top-bar--phone { justify-content: space-between; gap: var(--space-md); padding: 0 var(--space-md); }
+.ws-top-bar--phone :is(.ws-top-bar__links, .ws-top-bar__search, .ws-top-bar__end) { display: none; }
+.ws-top-bar--phone .ws-top-bar__menu { display: inline-flex; }
+@media (max-width: 60rem) {
+  .ws-top-bar { justify-content: space-between; gap: var(--space-md); padding: 0 var(--space-md); }
+  .ws-top-bar :is(.ws-top-bar__links, .ws-top-bar__search, .ws-top-bar__end) { display: none; }
+  .ws-top-bar .ws-top-bar__menu { display: inline-flex; }
+}
+@media (prefers-reduced-motion: no-preference) { .ws-top-bar__link { transition: color var(--ws-duration-hover) var(--ws-ease-soft); } }

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

@@ -0,0 +1,108 @@
+One continuous chat marked by topic: a quiet topic head in the thread where the subject changes, and a rail of small
+squares at the thread's edge that opens the list of topics.
+
+## Use it when
+
+- One long chat with an agent covers several subjects over days, and a person needs to see where one starts and to
+  jump back to it.
+- A topic gets news while the person is elsewhere (the current topic is marked).
+
+## Not for
+
+- Separate conversations with separate people: use a list of threads.
+- Sections of a page: use `Section`.
+- Steps of a flow: use `Stepper`.
+
+## Anatomy
+
+- The topic head (`ws-topic`, a `li` in the thread): a 0.5 px navy rule above it (navy at 10 %; none on the first),
+  14 px under the rule; the topic (`ws-topic__name`) 12 / 16 semibold navy, the one you are in (`aria-current`) in the
+  needs-you salmon's AA step (`--ws-word-needs`); its count (`ws-topic__count`) 11 / 13 muted; 8 px apart on the
+  baseline. It sits 28 px under the item before it and 20 px above the next.
+- Its act (`ws-topic__act`, a summary): at the end, 24 px tall, 8 px sides, 6 px corners, 12 / 16 semibold navy, on
+  the topic's baseline (its first line, when the name wraps).
+- The rail (`ws-topic-rail`): 20 px wide, the thread's gutter (`--ws-card-inset`), so neither it nor its focus ring
+  (drawn inside it) reaches the words; on touch it takes a 40 px hit area (12 px out into the stage's inset, 8 px over the words' edge); under a pointer its squares darken; in a chat shell it sits in that gutter, 64 px from the top and 96 px from the
+  bottom. Its marks (`ws-topic-rail__marks`, one button): 4 px squares, 4 px apart, navy at 20 %, 4 px
+  in; the topic you are in is a 10 x 4 navy dash.
+- The list (`ws-topic-rail__panel`): 264 px wide, 4 px beside the rail, centred on it, 8 px inside, 10 px corners, the
+  raised ground with the 0.5 px card edge and the menu's shadow. A head ("Topics", 12 / 16 medium muted), then a row
+  per topic (`ws-topic-rail__item`: 8 px inside, 6 px corners, 2 px between its lines): the name 13 / 18 medium navy
+  (the current one in the AA salmon), the count 11 / 13 muted, its first question 12 / 16 in the body grey, cut with a
+  title.
+
+## Variants and sizes
+
+| Part | Size |
+| --- | --- |
+| Topic head | 24 px tall at least |
+| Rail | 20 px wide (the thread's gutter), as tall as its marks |
+| List | 264 px wide, at most the rail's height, scrolling inside |
+
+## States
+
+- **Default**: the heads in the thread, the rail at rest.
+- **Current**: the topic you are in, its head and its row in salmon, its mark the navy dash.
+- **Head hover or focus** (a pointer that hovers): the summary act shows; on keyboard focus too. A touch screen always
+  shows it.
+- **Rail open**: the list shows beside the rail (`aria-expanded="true"` on the marks). It opens after a short hover
+  intent and closes 160 ms after the pointer leaves (`--ws-hover-intent`, `--ws-close-delay`), or on a click and
+  Escape.
+- **Row hover**: the navy 5 % wash; a press takes `--ws-surface-press` at once; focus draws the ring inside the row.
+- **Long words**: a topic name wraps in the list; its first question is cut with a title.
+- **Dark**: every rule, mark and ground is a theme token.
+
+## Behaviour
+
+- Keyboard: the marks are one button that opens the list; each row is a button that scrolls the thread to its topic
+  head and moves focus there. Escape closes the list and returns focus to the marks.
+- Screen reader: the marks say where you are ("Topics, 2 of 3"); the list is a labelled group; the current row
+  carries `aria-current`.
+- Motion: the list slides in from 8 px left out of a 3 px blur over `--ws-duration-settle`. Reduced motion: it is
+  simply there.
+
+## Content
+
+- A topic is named in two to five words, sentence case ("Friday's open house on Elm Street"), never a date alone.
+- The count says how many messages, not how old.
+
+## Rules
+
+- One chat, many topics: a topic head never starts a new thread.
+- What shows on hover also shows on keyboard focus, and always on touch.
+
+## Source
+
+**Derived from**: North's topic heads and topics rail (style1.css:606-640, :1365-1366, :1393-1397, :1737-1742: the
+0.5 rule at navy 10 %, 14 under it, the current topic coral, 4 px squares 4 apart with a 10 x 4 dash, the 264 panel).
+The 11.5 px words are 12 and 11 here (D3), and the coral word takes its AA step (D2).
+
+## Markup
+
+```html
+<li class="ws-topic" aria-current="true">
+  <span class="ws-topic__name">Friday's open house</span>
+  <span class="ws-topic__count">2 messages</span>
+  <button type="button" class="ws-topic__act">Summary</button>
+</li>
+
+<div class="ws-topic-rail">
+  <button type="button" class="ws-topic-rail__marks" aria-label="Topics, 2 of 3" aria-expanded="false" aria-controls="topics">
+    <i></i><i aria-current="true"></i><i></i>
+  </button>
+  <div class="ws-topic-rail__panel" id="topics" role="group" aria-label="Topics" hidden>
+    <span class="ws-topic-rail__head">Topics</span>
+    <button type="button" class="ws-topic-rail__item" aria-current="true">
+      <span class="ws-topic-rail__title">Friday's open house</span>
+      <span class="ws-topic-rail__sub">2 messages</span>
+      <span class="ws-topic-rail__quote" title="Who is coming on Friday?">Who is coming on Friday?</span>
+    </button>
+  </div>
+</div>
+```
+
+## Styles
+
+`TopicRail/style.css` (its keyframe `ws-topic-in` lives there). Tokens: `--ws-ink`, `--ws-word-needs`,
+`--ws-text-dense`, `--ws-text-micro`, `--ws-leading-micro`, `--ws-raised`, `--ws-edge-card`, `--ws-shadow-menu`,
+`--ws-hover`, `--ws-hover-strong`, `--ws-radius-row`, `--ws-radius-menu` (the list's 10 px corners).

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

@@ -0,0 +1,58 @@
+<!-- @dsCard group="Chat" height=592 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>TopicRail</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage" style="background: var(--ws-frame);">
+  <div class="ws-stack" style="width: 440px;">
+    <span class="ws-muted">Topic heads in one thread: a rule above each but the first; the one you are in, in salmon</span>
+    <div class="ws-chat-shell" style="height: 520px;">
+      <ol class="ws-chat-shell__thread" aria-label="Chat">
+        <li class="ws-topic">
+          <span class="ws-topic__name">Sam&rsquo;s calls</span>
+          <span class="ws-topic__count">4 messages</span>
+          <button type="button" class="ws-topic__act">Summary</button>
+        </li>
+        <li class="ws-chat-turn ws-chat-turn--person"><p class="ws-chat-turn__bubble">Why is Sam so far behind?</p></li>
+        <li class="ws-chat-turn ws-chat-turn--agent"><p class="ws-chat-turn__words">He lost two days to the Elm Street closing. His calls the other three days were on pace.</p></li>
+        <li class="ws-topic" aria-current="true">
+          <span class="ws-topic__name">Friday&rsquo;s open house on Elm Street</span>
+          <span class="ws-topic__count">2 messages</span>
+          <button type="button" class="ws-topic__act">Summary</button>
+        </li>
+        <li class="ws-chat-turn ws-chat-turn--person"><p class="ws-chat-turn__bubble">Who is coming on Friday?</p></li>
+        <li class="ws-chat-turn ws-chat-turn--agent"><p class="ws-chat-turn__words">Eleven so far, three of them buyers Dana has met before.</p></li>
+      </ol>
+      <div class="ws-topic-rail">
+        <button type="button" class="ws-topic-rail__marks" aria-label="Topics, 2 of 3" aria-expanded="true" aria-controls="topics-panel">
+          <i></i><i aria-current="true"></i><i></i>
+        </button>
+        <div class="ws-topic-rail__panel" id="topics-panel" role="group" aria-label="Topics">
+          <span class="ws-topic-rail__head">Topics</span>
+          <button type="button" class="ws-topic-rail__item">
+            <span class="ws-topic-rail__title">Sam&rsquo;s calls</span>
+            <span class="ws-topic-rail__sub">4 messages</span>
+            <span class="ws-topic-rail__quote" title="Why is Sam so far behind?">Why is Sam so far behind?</span>
+          </button>
+          <button type="button" class="ws-topic-rail__item" aria-current="true">
+            <span class="ws-topic-rail__title">Friday&rsquo;s open house on Elm Street</span>
+            <span class="ws-topic-rail__sub">2 messages</span>
+            <span class="ws-topic-rail__quote" title="Who is coming on Friday?">Who is coming on Friday?</span>
+          </button>
+          <button type="button" class="ws-topic-rail__item">
+            <span class="ws-topic-rail__title">October goal</span>
+            <span class="ws-topic-rail__sub">6 messages</span>
+            <span class="ws-topic-rail__quote" title="Are we going to make 40 calls by the end of the month, or should we move the goal?">Are we going to make 40 calls by the end of the month, or should we move the goal?</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,48 @@
+/* ---- TopicRail: one continuous chat marked by topic (North's): a topic head in the thread, and a rail of 4 px squares that opens the list of topics ---- */
+/* The topic head: a 0.5 px navy rule above it (none on the first), 14 under the rule; the topic 12 / 16 semibold navy
+   (the one you are in, the needs-you AA salmon), its count 11 / 13 muted, 8 apart on the baseline. It sits 28 under
+   the turn before it and 20 above the next. Its act (a summary) shows on hover and on keyboard focus; always on touch. */
+.ws-topic { display: flex; align-items: baseline; gap: var(--space-xs); min-height: var(--space-lg); padding-top: var(--space-sm-plus); border-top: var(--ws-hairline) solid color-mix(in srgb, var(--ws-ink) 10%, transparent); }
+* + .ws-topic { margin-top: calc(var(--space-lg) + var(--space-xxs)); }
+.ws-topic:first-child { padding-top: 0; border-top: 0; }
+.ws-topic + * { margin-top: calc(var(--space-md) + var(--space-xxs)); }
+.ws-topic__name { min-width: 0; font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 600; color: var(--color-text-heading); }
+.ws-topic[aria-current] .ws-topic__name { color: var(--ws-word-needs); }
+.ws-topic__count { flex-shrink: 0; font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); color: var(--color-text-muted); }
+.ws-topic__act { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-xxs-plus); min-height: var(--space-lg); margin-left: auto; padding: 0 var(--space-xs); border: 0; border-radius: var(--ws-radius-row); background: none; font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 600; color: var(--color-text-heading); cursor: pointer; transition: opacity var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-topic__act > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+@media (hover: hover) {
+  .ws-topic__act { opacity: 0; }
+  .ws-topic:hover .ws-topic__act, .ws-topic__act:focus-visible, .ws-topic__act[aria-expanded="true"] { opacity: 1; }
+  .ws-topic__act:hover { background-color: var(--ws-hover-strong); }
+}
+/* The rail: a column of 4 px squares 4 apart, the topic you are in a 10 x 4 navy dash; the whole column is one button
+   that opens the list. In a chat shell it sits in the thread's left gutter, between the head and the composer. */
+/* The rail is as wide as the thread's gutter (20, North's 18 rail in a 20 gutter): at 24 its button and its focus ring
+   reached 4 px into the words. The ring is drawn inside it for the same reason. */
+.ws-topic-rail { position: relative; display: flex; align-items: center; width: var(--ws-card-inset); }
+.ws-chat-shell > .ws-topic-rail { position: absolute; z-index: 1; top: var(--space-4xl); bottom: var(--space-6xl); left: 0; }
+.ws-topic-rail__marks { display: flex; flex-direction: column; gap: var(--space-xxs); width: 100%; padding: var(--space-xs-plus) 0 var(--space-xs-plus) var(--space-xxs); border: 0; border-radius: var(--ws-radius-control); background: none; cursor: pointer; }
+.ws-topic-rail__marks:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* Touch: the 20 px rail keeps its look and takes the 40 px hit area of a control with no words (the house's touch
+   floor): 12 out into the stage's inset on the left, 8 over the words' edge on the right. */
+@media (pointer: coarse) { .ws-topic-rail__marks { position: relative; } .ws-topic-rail__marks::after { content: ""; position: absolute; inset: 0 calc(var(--space-xs) * -1) 0 calc(var(--space-sm) * -1); } }
+/* Under the pointer the squares darken, so the rail shows it opens something. */
+@media (hover: hover) { .ws-topic-rail__marks:hover > i:not([aria-current]) { background: color-mix(in srgb, var(--ws-ink) 40%, transparent); } }
+.ws-topic-rail__marks > i { display: block; width: var(--space-xxs); height: var(--space-xxs); border-radius: var(--ws-radius-bar); background: color-mix(in srgb, var(--ws-ink) 20%, transparent); transition: width var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-topic-rail__marks > i[aria-current] { width: var(--space-xs-plus); background: var(--color-text-heading); }
+/* The list of topics: 264 wide, 8 inside, 10 px corners, the raised ground with the menu's shadow; a row per topic
+   (its name 13 / 18 medium navy, the current one in the AA salmon; a count 11 / 13 muted; its first question 12 / 16,
+   cut with a title), 8 inside, 6 px corners, the navy wash under the pointer. */
+.ws-topic-rail__panel { position: absolute; z-index: var(--z-dropdown); top: 50%; left: calc(100% + var(--space-xxs)); translate: 0 -50%; width: calc(var(--space-9xl) + var(--space-4xl)); max-height: 100%; overflow-y: auto; padding: var(--space-xs); border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: var(--ws-radius-menu); background: var(--ws-raised); box-shadow: var(--ws-shadow-menu); }
+.ws-topic-rail__head { display: block; padding: var(--space-xxs) var(--space-xs) var(--space-xxs-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; color: var(--color-text-muted); }
+.ws-topic-rail__item { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-xs); border: 0; border-radius: var(--ws-radius-row); background: none; text-align: left; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-topic-rail__item:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-topic-rail__item:hover { background-color: var(--ws-hover); } }
+.ws-topic-rail__item:active { background-color: var(--ws-surface-press); transition-duration: var(--ws-duration-instant); }
+.ws-topic-rail__title { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-heading); }
+.ws-topic-rail__item[aria-current] .ws-topic-rail__title { color: var(--ws-word-needs); }
+.ws-topic-rail__sub { font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); color: var(--color-text-muted); }
+.ws-topic-rail__quote { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-body); }
+@keyframes ws-topic-in { from { opacity: 0; transform: translateX(calc(var(--space-xs) * -1)); filter: blur(var(--ws-blur-arrive)); } }
+@media (prefers-reduced-motion: no-preference) { .ws-topic-rail__panel { animation: ws-topic-in var(--ws-duration-settle) var(--ws-ease-settle); } }

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

@@ -10,8 +10,8 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 ## Not for
 
 - A share of categories or a comparison with no time axis: use `GoalBars`.
-- A line chart: this system never draws one; a trend is always thin bars (`09-charts.md`, "Do not use: a line chart,
-  make it thin bars").
+- A bill or a rate that steps over quarters against a reference line: use `StepLine` (Seth's Tally). A value over
+  months or weeks read on an axis: use `TrendLine`. A daily trend is always thin bars, never a line.
 - A sparkline inside a row: use a `ChangeChip` instead; this component is a card's own chart, not a row decoration.
 
 ## Anatomy
@@ -20,13 +20,20 @@ A trend over days as thin rising bars, with one day called out as the moment tha
   plain words.
 - The big number: 72 px (`ws-display`, `--ws-text-display`), regular weight, tabular numerals, at the left, with its
   `ChangeChip` beside it on the baseline ("↗ 38% since Sep 20").
-- The bars: 2 px wide (`--ws-radius-bar` corners), 4 px apart, each a vertical gradient from `--ws-chart-purple-fade` at
+- The bars (`.ws-trend-bars__chart`, one `.ws-trend-bars__bar` a day): 2 px wide (`--ws-radius-bar` corners), spread
+  across the whole plot (at least 4 px apart, so the run never stops short of the card's edge), each a vertical gradient from `--ws-chart-purple-fade` at
   its base to `--ws-chart-past-half` (purple) at its value, so taller bars read more saturated without a second colour
   being introduced.
-- The moment: one bar in the salmon tones instead of purple, with a label chip above it in `--ws-tint-needs` fill and
-  `--ws-word-needs` words ("Sep 20 · 88 Pine sold"), and a faint salmon guide line from the chip down to the bar.
-- Axis: 11 px letters (`--ws-text-micro`, the system's floor) under the bars, sparse (a weekday initial every so often),
-  never a full date under every bar.
+- The moment (`.ws-trend-bars__moment` holding `__moment-line`, `__moment-chip` and a `__bar--moment`): one bar in the
+  salmon tone (`--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it)) instead of purple, with a label chip above it in `--ws-tint-needs` fill and `--ws-word-needs` words
+  ("Sep 20 · 88 Pine sold"), and a faint salmon guide line from the chip down to the bar. Put the moment's `--i` (its
+  day in the run) on `.ws-trend-bars__moment` and `--n` on the chart: the chip slides along its bar by that place, its
+  left end on a first-day bar, centred mid-run, its right end on the last day, so it never runs off the plot on a
+  phone. Without `--i` it centres on the bar.
+- Axis (`.ws-trend-bars__axis`): one span a day, on the bars' spacing; a week's first day carries its date ("Sep 7",
+  "Sep 14") in 11 px muted words (`--ws-text-micro`, the system's floor), starting on its bar. Never a date under
+  every bar: at a phone's width they run into each other.
+- The figure row (`.ws-trend-bars__figure`): the big number and its chip, 12 apart, 24 above the chart.
 - A footer band with one act, following from the trend (drafting a follow-up post while the moment is still recent).
 
 ## Variants and sizes
@@ -34,7 +41,7 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 | Part | Value |
 | --- | --- |
 | Bar width | 2 px |
-| Bar gap | 4 px |
+| Bar gap | the run spans the plot, at least 4 px |
 | Chart height | about 92 px, with 28 px of head room above the tallest bar for the moment's label |
 | Big number | 72 px, one per card |
 
@@ -44,8 +51,9 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 - **No moment this period**: the sentence and band describe the trend alone; the salmon bar and its chip simply do not
   appear rather than being forced onto an arbitrary day.
 - **Falling trend**: the change chip switches to mid blue with the down-right mark, never red, same as any `ChangeChip`.
-- **Narrow (480 px or the panel)**: bars thin their gap first, never their own 2 px width, so the shape stays readable;
-  past a minimum the chart shows fewer days rather than compressing further.
+- **Narrow (a phone or the panel)**: the bars keep their 2 px width and close up toward 4 px, so four weeks (28 bars,
+  166 px) fit any column; a longer run shows fewer days rather than compressing. A moment near either end keeps its
+  chip inside the plot (its `--i`).
 - **Empty** (no data yet): the card is left out entirely, per the system's rule that a card whose data does not exist is
   never drawn empty.
 - **Reduced motion**: bars shown at their final heights, no rise.
@@ -54,8 +62,9 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 
 - Keyboard: the chart is read, not operated; the band's one button is the card's only interactive control besides any
   link the figure itself might carry.
-- Motion: bars rise from the bottom over `--ws-sweep`, staggered left to right; the figure counts up over `--duration-calm`
-  on arrival; reduced motion shows the final state at once.
+- Motion: the bars draw as one 900 ms progress (`--ws-duration-draw`): bar i starts at its share of the first 55% and
+  rises from its foot on `--ws-ease-settle` (set `--n` on the chart and `--i` on each bar), as North draws a chart. The figure is static text and
+  does not count up (North). Reduced motion shows the final state at once.
 
 ## Content
 
@@ -75,8 +84,9 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 
 ## Rules
 
-- **Never a line chart**: every trend in this system is thin bars, decided once for the whole chart library
-  (`09-charts.md`, "Do not use"), not re-opened per component.
+- **Thin bars for a trend over days**: a daily count's trend is thin bars, never a line. A bill or a rate that steps
+  over quarters against a reference is Seth's `StepLine` (Tally); a value over months or weeks on an axis is a
+  `TrendLine` (North's revenue chart).
 - **One moment, one colour**: salmon marks the one day that explains the shape; every other bar stays in the purple
   family, so salmon keeps its meaning as "the thing to notice" rather than becoming a second decorative tone.
 - **A falling number is mid blue, never red** (`03-colour.md`), carried straight from `ChangeChip`.
@@ -92,3 +102,31 @@ A trend over days as thin rising bars, with one day called out as the moment tha
 radius decided once for every trend chart. **Precedent**: an intentional addition decided from the system, 26 Oct
 2026; no product app yet supplies real day-by-day profile-view data, so this was built directly from the designer's
 reference.
+
+## Markup
+
+```html
+<div class="ws-trend-bars__body">
+  <div class="ws-trend-bars__figure">
+    <span class="ws-display">412</span>
+    <span class="ws-change ws-change--up"><svg viewBox="0 0 16 16" aria-hidden="true">...</svg>38% since Sep 20</span>
+  </div>
+  <div class="ws-trend-bars__chart ws-dots" role="img" aria-label="Daily profile views over four weeks" style="--n: 28;">
+    <div class="ws-trend-bars__bar ws-grow-up" style="--i: 0; height: 22%;"></div>
+    <!-- one bar a day, --i counting up; the day that moved it carries its --i on the moment: -->
+    <div class="ws-trend-bars__moment" style="--i: 13;">
+      <span class="ws-trend-bars__moment-line" aria-hidden="true"></span>
+      <span class="ws-trend-bars__moment-chip">Sep 20 &middot; 88 Pine sold</span>
+      <div class="ws-trend-bars__bar ws-trend-bars__bar--moment ws-grow-up" style="height: 46%;"></div>
+    </div>
+    <!-- ... to --i: 27 -->
+  </div>
+  <div class="ws-trend-bars__axis" aria-hidden="true">
+    <span>Sep 7</span><span></span><span></span><span></span><span></span><span></span><span></span>
+    <span>Sep 14</span><!-- six empty spans, then each week's first day: Sep 21, Sep 28 -->
+  </div>
+</div>
+```
+
+**Styles**: `TrendBars/style.css`, in `bundle.css` and `fello.css` as `.ws-trend-bars`. Every value is a token. `.ws-trend-bars` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.

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

@@ -28,44 +28,45 @@
         </span>
       </div>
 
-      <div class="ws-trend-bars__chart ws-dots" role="img" aria-label="Daily profile views over four weeks, rising sharply after 88 Pine sold on September 20">
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 22%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 30%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 18%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 26%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 34%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 20%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 28%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 24%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 32%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 19%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 36%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 29%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 40%;"></div>
-        <div class="ws-trend-bars__moment">
+      <div class="ws-trend-bars__chart ws-dots" role="img" aria-label="Daily profile views over four weeks, rising sharply after 88 Pine sold on September 20" style="--n: 28;">
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 0; height: 22%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 1; height: 30%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 2; height: 18%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 3; height: 26%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 4; height: 34%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 5; height: 20%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 6; height: 28%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 7; height: 24%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 8; height: 32%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 9; height: 19%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 10; height: 36%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 11; height: 29%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 12; height: 40%;"></div>
+        <div class="ws-trend-bars__moment" style="--i: 13;">
           <span class="ws-trend-bars__moment-line" aria-hidden="true"></span>
           <span class="ws-trend-bars__moment-chip">Sep 20 &middot; 88 Pine sold</span>
           <div class="ws-trend-bars__bar ws-trend-bars__bar--moment ws-grow-up" style="height: 46%;"></div>
         </div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 58%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 66%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 54%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 72%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 62%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 78%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 68%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 84%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 74%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 90%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 80%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 96%;"></div>
-        <div class="ws-trend-bars__bar ws-grow-up" style="height: 86%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 14; height: 58%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 15; height: 66%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 16; height: 54%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 17; height: 72%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 18; height: 62%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 19; height: 78%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 20; height: 68%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 21; height: 84%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 22; height: 74%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 23; height: 90%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 24; height: 80%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 25; height: 96%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 26; height: 86%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 27; height: 92%;"></div>
       </div>
       <div class="ws-trend-bars__axis" aria-hidden="true">
-        <span>M</span><span></span><span>W</span><span></span><span>F</span><span></span><span></span>
-        <span>M</span><span></span><span>W</span><span></span><span>F</span><span></span><span></span>
-        <span>M</span><span></span><span>W</span><span></span><span>F</span><span></span><span></span>
-        <span>M</span><span></span><span>W</span><span></span><span>F</span><span></span><span></span>
+        <span>Sep 7</span><span></span><span></span><span></span><span></span><span></span><span></span>
+        <span>Sep 14</span><span></span><span></span><span></span><span></span><span></span><span></span>
+        <span>Sep 21</span><span></span><span></span><span></span><span></span><span></span><span></span>
+        <span>Sep 28</span><span></span><span></span><span></span><span></span><span></span><span></span>
       </div>
     </div>
 
@@ -79,6 +80,38 @@
   </section>
   </div>
 
+  <div class="ws-stack" style="width: 288px; max-width: 100%;">
+    <span class="ws-muted">A phone's card (288 px), the moment on the second day: its chip starts on its bar and stays inside the plot</span>
+  <section class="ws-card ws-trend-bars" aria-label="Profile views, two weeks">
+    <div class="ws-trend-bars__body">
+      <div class="ws-trend-bars__chart ws-dots" role="img" aria-label="Daily profile views over two weeks, a peak on October 6, the open house" style="--n: 14;">
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 0; height: 30%;"></div>
+        <div class="ws-trend-bars__moment" style="--i: 1;">
+          <span class="ws-trend-bars__moment-line" aria-hidden="true"></span>
+          <span class="ws-trend-bars__moment-chip">Oct 6 &middot; open house</span>
+          <div class="ws-trend-bars__bar ws-trend-bars__bar--moment ws-grow-up" style="height: 44%;"></div>
+        </div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 2; height: 26%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 3; height: 22%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 4; height: 28%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 5; height: 34%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 6; height: 24%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 7; height: 30%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 8; height: 26%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 9; height: 36%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 10; height: 32%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 11; height: 28%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 12; height: 40%;"></div>
+        <div class="ws-trend-bars__bar ws-grow-up" style="--i: 13; height: 34%;"></div>
+      </div>
+      <div class="ws-trend-bars__axis" aria-hidden="true">
+        <span>Oct 5</span><span></span><span></span><span></span><span></span><span></span><span></span>
+        <span>Oct 12</span><span></span><span></span><span></span><span></span><span></span><span></span>
+      </div>
+    </div>
+  </section>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,25 @@
+/* ---- TrendBars: a day a thin bar over weeks, the moment that moved it marked in salmon ---- */
+.ws-trend-bars__body { padding: var(--space-md) var(--ws-card-inset) 0; }
+.ws-trend-bars__figure { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-lg); }
+/* The run spans the plot: the bars keep 2 px and spread (at least 4 apart), the axis below on the same spacing, so
+   each date sits on its day's bar. */
+.ws-trend-bars__chart { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xxs); height: calc(var(--space-5xl) + var(--space-sm)); padding-top: calc(var(--space-lg) + var(--space-xxs)); }
+/* "in srgb": a palette's stops are derived (color-mix), and a gradient blends those in Oklab unless told; sRGB is how the kit's own stops have always blended (D15). */
+.ws-trend-bars__bar { flex-shrink: 0; width: calc(var(--space-xxs) / 2); border-radius: var(--ws-radius-bar); background: linear-gradient(to top in srgb, var(--ws-chart-purple-fade), var(--ws-chart-past-half)); transform-origin: bottom; }
+.ws-trend-bars__bar--moment { background: linear-gradient(to top, var(--ws-chart-under-half) 40%, var(--ws-chart-under-half)); }
+/* The moment's wrapper takes the chart's height (a bar's percent needs one), so its chip sits in the head room above
+   the tallest bar and its line runs from the chip down to the bar. The chip slides along its bar by the moment's place
+   in the run (--i on the moment, --n on the chart): its left end on a first-day bar, centred mid-run, its right end on
+   the last day, so it never leaves the plot. Without --i it centres. */
+.ws-trend-bars__moment { position: relative; display: flex; flex-shrink: 0; align-self: stretch; align-items: flex-end; }
+.ws-trend-bars__moment-chip { position: absolute; bottom: calc(100% + var(--space-xxs) * 1.5); left: 50%; transform: translateX(calc(var(--i, (var(--n, 3) - 1) / 2) / max(var(--n, 3) - 1, 1) * -100%)); padding: var(--space-3xs) var(--space-xxs-plus); border-radius: var(--ws-radius-chip); background: var(--ws-tint-needs); color: var(--ws-word-needs); font-size: var(--ws-text-micro); font-weight: 500; white-space: nowrap; }
+.ws-trend-bars__moment-line { position: absolute; top: calc((var(--space-lg) - var(--space-xxs) / 2) * -1); bottom: 0; left: 50%; width: var(--ws-line); background: var(--ws-chart-under-half); opacity: 0.5; }
+/* One span a day: a zero-width anchor on its bar's left edge (the axis stops a bar's width short, so the anchors land
+   where the bars start); a week's first day carries its date, which starts on its bar. */
+.ws-trend-bars__axis { display: flex; justify-content: space-between; margin-top: var(--space-xxs); padding: 0 calc(var(--space-xxs) / 2) var(--space-md) 0; }
+.ws-trend-bars__axis > span { flex-shrink: 0; width: 0; overflow: visible; font-size: var(--ws-text-micro); line-height: var(--space-md); color: var(--color-text-muted); white-space: nowrap; }
+/* The draw (North): one 900 ms progress; bar i starts at its share of the first 55% and rises on the settle curve.
+   Set --n (the bar count) on the chart and --i on each bar. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-trend-bars__bar.ws-grow-up { animation-duration: calc(var(--ws-duration-draw) * 0.45); animation-timing-function: var(--ws-ease-settle); animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i, 0) / max(var(--n, 2) - 1, 1)); }
+}