@felloinnovations/brand-kit 0.5.1 → 0.5.3

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

@@ -109,6 +109,29 @@
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 420px;">
+    <div class="ws-stack">
+      <span class="ws-muted">Selected in a grid of image tiles (--ring): a flush 2 px navy ring and a tick on the picture, nothing under the card; the picture rounds its own corners, so the card is never clipped</span>
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-xs);" role="group" aria-label="Choose the listing photo">
+        <button type="button" class="ws-card ws-card--ring" aria-pressed="false">
+          <span class="ws-card__media" role="img" aria-label="Front of 12 Elm Street"></span>
+          <span class="ws-card__tick" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+          <span class="ws-card__body ws-meta">2400 × 1600</span>
+        </button>
+        <button type="button" class="ws-card ws-card--ring ws-card--selected" aria-pressed="true">
+          <span class="ws-card__media" role="img" aria-label="Kitchen of 12 Elm Street"></span>
+          <span class="ws-card__tick" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+          <span class="ws-card__body ws-meta">2400 × 1600</span>
+        </button>
+        <button type="button" class="ws-card ws-card--ring" aria-pressed="false">
+          <span class="ws-card__media" role="img" aria-label="Garden of 12 Elm Street"></span>
+          <span class="ws-card__tick" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+          <span class="ws-card__body ws-meta">1200 × 800</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
   <div class="ws-stack" style="width: 340px;">
     <span class="ws-muted">Snug: a card in a chat column, every part 12 in, the band 16 above and under</span>
     <section class="ws-card ws-card--compound ws-card--snug">

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

@@ -38,6 +38,25 @@ a.ws-card[aria-busy="true"]::before { content: ""; position: absolute; inset: ca
 /* Selected, in a row of cards (North): the rim darkens and a 2 px navy tab sits 8 under the card, 16 in from each side. */
 .ws-card--selected { position: relative; border-color: var(--ws-well-hover); box-shadow: none; }
 .ws-card--selected::after { content: ""; position: absolute; left: var(--space-md); right: var(--space-md); top: calc(100% + var(--ws-rim) + var(--space-xs)); height: var(--ws-ring); border-radius: var(--ws-radius-chip); background: var(--color-text-heading); }
+/* A picture in a card (ws-card__media, its first part: an image tile, a template or asset choice): edge to edge, its top
+   corners rounded to the cream's own (7), so the card is never clipped (K9) and a menu, a tip or the selected tab still
+   shows. The sunk cream behind it while it loads; a logo on a checker is the app's own ground. */
+:where(button).ws-card { padding: 0; } /* the browser's button padding is not the card's: a picture runs edge to edge; the padding steps below still win */
+.ws-card__media ~ .ws-card__body { display: block; padding: var(--space-xs) var(--space-sm) var(--space-sm); } /* a caption under a picture: 8 above, 12 round */
+.ws-card__media { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ws-radius-card-inner) var(--ws-radius-card-inner) 0 0; background: var(--ws-surface-sunk); }
+/* Selected in a grid, or on a card that clips its content (--ring): the tab under the card would fall in the gap above
+   the next row, so the choice is drawn on the card itself. The rim turns navy with a hairline more outside it, a 2 px
+   ring, flush (the focus ring stands 2 off, so the two never look alike), and a tick (ws-card__tick, in the markup at
+   rest and shown only when selected) sits on the top right corner, on a cream ring so it reads over a photo. */
+.ws-card--ring { position: relative; }
+.ws-card--ring.ws-card--selected, .ws-card--ring.ws-card--selected:hover { border-color: var(--color-text-heading); box-shadow: 0 0 0 calc(var(--ws-ring) - var(--ws-rim)) var(--color-text-heading); }
+.ws-card--ring.ws-card--selected::after { content: none; }
+.ws-card__tick { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1; display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full); background: var(--color-text-heading); color: var(--ws-on-act); box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); opacity: 0; transform: scale(var(--ws-pop-scale)); pointer-events: none; }
+.ws-card__tick svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-card--selected > .ws-card__tick { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-card__tick { transition: opacity var(--ws-duration-instant) var(--ws-ease-soft), transform var(--ws-duration-settle) var(--ws-ease-pop); }
+}
 /* The card's own padding steps. */
 .ws-card--pad-sm { padding: var(--ws-card-padding); }
 .ws-card--pad-md { padding: var(--ws-card-padding-lg); }

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

@@ -6,6 +6,9 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
 - An agent brings something to act on: a suggestion, a task, a question, a plan offer, a receipt of what it did.
 - A reminder or a nudge is due and needs the person's attention now (a needs-you card, with a timer and a cross).
 - The chat needs to show a lead, a draft, a call or a number as a named kind, not as plain words.
+- An email, a call or a text belongs in the thread because the person should read it or answer it now (an account's
+  thread, an agent's morning briefing).
+- An account needs a decision: its standing, its few numbers and one act, in the chat about it.
 
 ## Not for
 
@@ -15,6 +18,8 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
   anything wider opens in the card's own full screen or the side panel, with "Open" left in the chat.
 - A list of past suggestions: a card is for the one thing in front of the person now; Today's own list lives
   beside the chat, not repeated here.
+- Every email or call on an account: the agent names the rest in its words, with the source ("From the 9 Nov call");
+  the full history is the account's `Timeline`.
 
 ## Anatomy
 
@@ -42,6 +47,16 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
   medium tabular navy on the sunk cream, 2 px corners) and a cross (`ws-icon-btn ws-icon-btn--sm ws-chat-card__close`,
   a 40 px hit area on touch) in the top right corner, 8 px in, for "not now"; the head keeps 32 px clear of it, so the
   timer ends 16 px short of the cross.
+- An email, a call or a text (the message kinds): the head's end says when (`ws-meta ws-chat-card__when`, one line,
+  tabular: "Nov 9, 4:12 PM", "Nov 9 · 24 min"); the title is the subject, what came of the call, or who texted;
+  the one sentence says who wrote to whom, in words ("Jordan Lee wrote to you"), and why it is here. The message's own
+  words are quoted on a sunk plate (`blockquote.ws-plate.ws-chat-card__quote` holding a `p.ws-body`), never adopted:
+  at most three lines, the rest behind the door. A call has no quote; its sentence says who was on it and what was
+  agreed. One that waits on a reply from the team wears the salmon-tinted disc.
+- An account: the head's end holds its standing as a rating `Chip` (healthy `ws-chip--live`, watch `ws-chip--middle`,
+  at risk `ws-chip--needs-work`: Colour's rating tones, never salmon); the title says what matters about it now, not
+  its name alone; its few numbers sit on a stats plate (`ws-plate` holding `ws-plate__stats`: sentiment, its yearly
+  value, when it renews), a change written in words ("32, up from 29"); the door opens the account.
 - 0.4 markup's act group, `ws-chat-card__acts`, still lays its buttons out at the band's end; new markup uses
   `ws-band__acts`.
 
@@ -54,11 +69,19 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
 | Question | "Question" | Answered in place, no button | No |
 | Reminder, nudge | "Reminder" | Done, or its one act | Yes, with a timer |
 | Receipt | "Receipt" | Undo, while it still can | No |
+| Email | "Email" | Reply; a draft the agent wrote is a Suggestion with a draft `Plate`, its act Send | No |
+| Call | "Call" | Listen | No |
+| Text | "Text" | Reply | No |
+| Account | "Account" | The one decision it needs (Escalate, Book a call), Draft a reply secondary | No |
+
+A message kind's head says what it is, never its direction ("Email", not "Inbound email"); the sentence says who wrote
+to whom.
 
 ## States
 
 - **Default**: the card as drawn above.
-- **Waits on you**: the head's disc is salmon-tinted (`ws-chat-card__disc--needs`).
+- **Waits on you**: the head's disc is salmon-tinted (`ws-chat-card__disc--needs`); an email or a text that the team
+  has not answered.
 - **Pending**: the pressed button keeps its colour and shows a working dot; the other buttons step out of the way
   while the tap is in flight.
 - **Done**: the band's primary becomes a quiet Undo for as long as the act can still be taken back.
@@ -66,6 +89,7 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
 - **Empty**: a card whose data does not exist is never drawn, not even as a placeholder shell.
 - **Long title**: a question's title is never clamped (the yes it leads to is in it); other kinds clamp to two
   lines.
+- **Long message**: a quote stops at three lines with an ellipsis; the door opens the whole message where it lives.
 - **Loading**: a `StatusLine` on top says what the agent is doing, the drawing is a `Skeleton` ghost, the tray holds a
   `LoadBar`; the card is `aria-busy`.
 - **Narrow**: under 470 px the tray goes to 64 px with its acts beside the title; nothing truncates.
@@ -100,6 +124,8 @@ chart, one title, one sentence, its facts on a plate or a breakdown, and the tra
   job).
 - The band's left side never repeats a fact the button already states; a door is left out when it would only
   repeat where the primary button goes.
+- A message is the sender's words, quoted as they wrote them; the agent's own reading of it goes in the sentence, never
+  in the quote. The agent's sentence names people, never their email address or number (AI experiences, Trust).
 - No em dashes; sentence case throughout.
 
 ## Props
@@ -132,7 +158,8 @@ view.
 
 **Derived from**: North's chat chart card (Figma 733:325166 "card 556 · inset 20 · tray 80"; style1.css:688-733,
 :1154-1190, :2001-2004), the system's footer band for a door plus buttons, and the needs-you timer-and-cross pattern.
-**Precedent**: the first product built on the system.
+**Precedent**: the first product built on the system. The message kinds (Email, Call, Text) and the Account kind:
+Calvin's account threads in Customer Value (Hemanth, 10 Nov 2026), built from the kit's own head, plate, chip and band.
 
 ## Markup
 
@@ -188,10 +215,54 @@ view.
     <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button></div>
   </div>
 </div>
+
+<!-- An email that waits on a reply: when at the head's end, its words quoted (a call and a text are the same shape) -->
+<div class="ws-card ws-chat-card">
+  <div class="ws-chat-card__head">
+    <span class="ws-chat-card__kind">
+      <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><!-- an envelope --></svg></span>
+      <span class="ws-eyebrow">Email</span>
+    </span>
+    <span class="ws-meta ws-chat-card__when">Nov 9, 4:12 PM</span>
+  </div>
+  <p class="ws-section">Re: Next onboarding step</p>
+  <p class="ws-body">Jordan Lee wrote to you. It has waited two days for a reply.</p>
+  <blockquote class="ws-plate ws-chat-card__quote"><p class="ws-body">Before the follow-ups go out, can you confirm the hours they will send?</p></blockquote>
+  <div class="ws-band ws-chat-card__band">
+    <a class="ws-chat-card__door" href="/mail/thread/123">Open in Mail</a>
+    <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Reply</button></div>
+  </div>
+</div>
+
+<!-- An account: its standing as a rating chip, its numbers on a stats plate -->
+<div class="ws-card ws-chat-card">
+  <div class="ws-chat-card__head">
+    <span class="ws-chat-card__kind">
+      <span class="ws-disc ws-chat-card__disc" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><!-- a building --></svg></span>
+      <span class="ws-eyebrow">Account</span>
+    </span>
+    <span class="ws-chip ws-chip--needs-work">Risk</span>
+  </div>
+  <p class="ws-section">Harbor Point Realty asked to cancel</p>
+  <p class="ws-body">The ask is four days old and nobody owns it yet.</p>
+  <div class="ws-plate">
+    <div class="ws-plate__stats">
+      <div class="ws-plate__stat"><span class="ws-plate__label">Sentiment</span><span class="ws-plate__value">32, up from 29</span></div>
+      <div class="ws-plate__stat"><span class="ws-plate__label">Renews</span><span class="ws-plate__value">In 110 days</span></div>
+    </div>
+  </div>
+  <div class="ws-band ws-chat-card__band">
+    <a class="ws-chat-card__door" href="/accounts/harbor-point">Open the account</a>
+    <div class="ws-band__acts">
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Draft a reply</button>
+      <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Escalate</button>
+    </div>
+  </div>
+</div>
 ```
 
 ## Styles
 
-`ChatCard/style.css`; the band and its acts are `Card`'s, the plate `Plate`'s. Tokens: `--ws-chart-card-w`,
+`ChatCard/style.css`; the band and its acts are `Card`'s, the plate `Plate`'s, the standing `Chip`'s. Tokens: `--ws-chart-card-w`,
 `--ws-card-inset`, `--ws-edge-card`, `--ws-edge-card-1x`, `--ws-edge-slot`, `--ws-radius-card-inner`, `--ws-tint-needs`,
 `--ws-surface-sunk`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Chat" height=1217 -->
+<!-- @dsCard group="Chat" height=2240 -->
 <!doctype html>
 <html>
 <head>
@@ -88,34 +88,135 @@
         </div>
       </div>
     </div>
+
+    <div class="ws-stack">
+      <span class="ws-muted">An email that waits on a reply: when in the head, its words quoted on a plate, Reply</span>
+      <div class="ws-card ws-chat-card">
+        <div class="ws-chat-card__head">
+          <span class="ws-chat-card__kind">
+            <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M3 4.8l5 3.7 5-3.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </span>
+            <span class="ws-eyebrow">Email</span>
+          </span>
+          <span class="ws-meta ws-chat-card__when">Nov 9, 4:12 PM</span>
+        </div>
+        <p class="ws-section">Re: Next onboarding step</p>
+        <p class="ws-body">Jordan Lee wrote to you. It has waited two days for a reply.</p>
+        <blockquote class="ws-plate ws-chat-card__quote">
+          <p class="ws-body">Thanks for the call on Friday. Before the follow-ups go out, can you confirm the hours they will send? Our broker wants nothing on Sundays, and two of our agents are part time, so weekday evenings matter too.</p>
+        </blockquote>
+        <div class="ws-band ws-chat-card__band">
+          <a class="ws-chat-card__door" href="#" onclick="return false;">
+            Open in Mail
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 12l8-8M7 4h5v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </a>
+          <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Reply</button></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ws-stack">
+      <span class="ws-muted">A call: what came of it as the title, who and how long under it, Listen</span>
+      <div class="ws-card ws-chat-card">
+        <div class="ws-chat-card__head">
+          <span class="ws-chat-card__kind">
+            <span class="ws-disc ws-chat-card__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M4.4 2.8l2 .2 1 2.6-1.3 1a7.5 7.5 0 0 0 3.3 3.3l1-1.3 2.6 1 .2 2c0 .7-.6 1.2-1.3 1.2A10.4 10.4 0 0 1 3.2 4.1c0-.7.5-1.3 1.2-1.3z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </span>
+            <span class="ws-eyebrow">Call</span>
+          </span>
+          <span class="ws-meta ws-chat-card__when">Nov 9 &middot; 24 min</span>
+        </div>
+        <p class="ws-section">Jordan asked to pause for six months</p>
+        <p class="ws-body">You and Jordan Lee. A pause and a lower price were turned down; training by Friday was promised instead.</p>
+        <div class="ws-band ws-chat-card__band">
+          <a class="ws-chat-card__door" href="#" onclick="return false;">Read the notes</a>
+          <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Listen</button></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ws-stack">
+      <span class="ws-muted">An account: its standing as a tag in the head, its numbers on a plate, one navy act</span>
+      <div class="ws-card ws-chat-card">
+        <div class="ws-chat-card__head">
+          <span class="ws-chat-card__kind">
+            <span class="ws-disc ws-chat-card__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M3.5 13.5v-10h6v10M9.5 6.5h3v7M2.5 13.5h11M5.5 6h1.5M5.5 8.5h1.5M5.5 11h1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </span>
+            <span class="ws-eyebrow">Account</span>
+          </span>
+          <span class="ws-chip ws-chip--needs-work">Risk</span>
+        </div>
+        <p class="ws-section">Harbor Point Realty asked to cancel</p>
+        <p class="ws-body">The ask is four days old and nobody owns it yet. Sentiment is up a little since Friday&rsquo;s call.</p>
+        <div class="ws-plate">
+          <div class="ws-plate__stats">
+            <div class="ws-plate__stat"><span class="ws-plate__label">Sentiment</span><span class="ws-plate__value">32, up from 29</span></div>
+            <div class="ws-plate__stat"><span class="ws-plate__label">Yearly value</span><span class="ws-plate__value">$36K</span></div>
+            <div class="ws-plate__stat"><span class="ws-plate__label">Renews</span><span class="ws-plate__value">In 110 days</span></div>
+          </div>
+        </div>
+        <div class="ws-band ws-chat-card__band">
+          <a class="ws-chat-card__door" href="#" onclick="return false;">Open the account</a>
+          <div class="ws-band__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Draft a reply</button>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Escalate</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
-  <div class="ws-stack" style="width: 400px;">
-    <span class="ws-muted">Needs-you reminder in a narrow chat: a timer, a cross for not now; the tray goes to 64</span>
-    <div class="ws-card ws-chat-card">
-      <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-chat-card__close" aria-label="Not now: Call Priya back before her offer expires" title="Not now">
-        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-      </button>
-      <div class="ws-chat-card__head">
-        <span class="ws-chat-card__kind">
-          <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
-            <svg viewBox="0 0 16 16" fill="none"><path d="M4.5 11.5V7.8a3.5 3.5 0 0 1 7 0v3.7l1 1.2h-9z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 14a1.2 1.2 0 0 0 2 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+  <div class="ws-stack ws-stack--group" style="width: 400px;">
+    <div class="ws-stack">
+      <span class="ws-muted">Needs-you reminder in a narrow chat: a timer, a cross for not now; the tray goes to 64</span>
+      <div class="ws-card ws-chat-card">
+        <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-chat-card__close" aria-label="Not now: Call Priya back before her offer expires" title="Not now">
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+        </button>
+        <div class="ws-chat-card__head">
+          <span class="ws-chat-card__kind">
+            <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M4.5 11.5V7.8a3.5 3.5 0 0 1 7 0v3.7l1 1.2h-9z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 14a1.2 1.2 0 0 0 2 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+            </span>
+            <span class="ws-eyebrow">Reminder</span>
           </span>
-          <span class="ws-eyebrow">Reminder</span>
-        </span>
-        <span class="ws-chat-card__timer" title="2 hours left">
-          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          2h left
-        </span>
+          <span class="ws-chat-card__timer" title="2 hours left">
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            2h left
+          </span>
+        </div>
+        <p class="ws-section">Call Priya back before her offer expires</p>
+        <p class="ws-body">She asked for a decision by end of day. The last note on her file is three days old.</p>
+        <div class="ws-band ws-chat-card__band">
+          <div class="ws-band__words">
+            <p class="ws-band__title">Call her now</p>
+            <p class="ws-band__how">Her number is on file</p>
+          </div>
+          <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button></div>
+        </div>
       </div>
-      <p class="ws-section">Call Priya back before her offer expires</p>
-      <p class="ws-body">She asked for a decision by end of day. The last note on her file is three days old.</p>
-      <div class="ws-band ws-chat-card__band">
-        <div class="ws-band__words">
-          <p class="ws-band__title">Call her now</p>
-          <p class="ws-band__how">Her number is on file</p>
-        </div>
-        <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button></div>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">A text in a narrow chat: who sent it as the title, the text quoted whole, Reply</span>
+      <div class="ws-card ws-chat-card">
+        <div class="ws-chat-card__head">
+          <span class="ws-chat-card__kind">
+            <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M2.8 4.3c0-.8.7-1.5 1.5-1.5h7.4c.8 0 1.5.7 1.5 1.5v5.2c0 .8-.7 1.5-1.5 1.5H7.2L4.5 13v-2h-.2c-.8 0-1.5-.7-1.5-1.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
+            </span>
+            <span class="ws-eyebrow">Text</span>
+          </span>
+          <span class="ws-meta ws-chat-card__when">8:05 AM</span>
+        </div>
+        <p class="ws-section">Jordan Lee texted you</p>
+        <blockquote class="ws-plate ws-chat-card__quote"><p class="ws-body">Running ten minutes late for our 9. Still on?</p></blockquote>
+        <div class="ws-band ws-chat-card__band">
+          <a class="ws-chat-card__door" href="#" onclick="return false;">Open the thread</a>
+          <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Reply</button></div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -15,6 +15,12 @@
 .ws-chat-card:has(> .ws-chat-card__close) > .ws-chat-card__head { padding-right: var(--space-xl); }
 .ws-chat-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-md); font-size: var(--ws-text-dense); color: var(--color-text-body); }
 .ws-chat-card__facts b { font-weight: 600; color: var(--color-text-heading); }
+/* An email, a call or a text: when it happened sits at the head's end, one line, in the meta words. */
+.ws-chat-card__when { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Its own words (an email's opening lines, a text) quoted on a sunk plate, never adopted: at most three lines, the door
+   opens the rest. The clamp sits on the words, not the plate, so a fourth line never shows in the plate's padding. */
+.ws-chat-card__quote { margin: 0; }
+.ws-chat-card__quote > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
 /* A chart answer's drawing: the dotted field runs to the card's edges and sits only behind the drawing, 24 under it. */
 .ws-chat-card__graph { margin: var(--space-xs) calc(var(--ws-card-inset) * -1) 0; padding: var(--space-md) var(--ws-card-inset) var(--space-lg); }
 /* A breakdown under the answer: rows edge to edge, 44 tall, 0.5 px rules, the label left and the figure right. */

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

@@ -1,4 +1,4 @@
-A small fact in a 24 px tag, in one of six tones, a rating tone or the Example mark; its sibling `ChangeChip` says a
+A small fact in a 24 px tag, in one of seven tones, a rating tone or the Example mark; its sibling `ChangeChip` says a
 number went up, down or stayed.
 
 ## Use it when
@@ -23,6 +23,9 @@ number went up, down or stayed.
 - Edge: the 0.5 px chip edge (`--ws-edge-chip`), drawn inside, on the plain tone only; tinted tones have none.
 - Words: 13 / 18 medium (Seth's control words), one line.
 - Optional icon: 12 px (`--ws-icon-sm`), 4 before the words.
+- Small (`--sm`, #30): 20 tall, 12 / 16 medium words, 6 px sides, the same icon and corners, for several tags in one
+  place (a board card, a table cell, a list row). A fact only: a chip that acts (a filter, a remove) keeps 24, so its
+  target holds.
 - Never wider than its column: a long fact ends in an ellipsis inside `ws-chip__label` (and the chip carries a `title`).
 
 ### Example
@@ -45,14 +48,18 @@ number went up, down or stayed.
 | --- | --- | --- | --- |
 | `neutral` | `--color-bg-page` (cream), chip edge | `--color-text-body` | a plain fact ("Version 1") |
 | `sunk` | `--ws-surface-sunk` | `--color-text-body` | a fact on a lighter card |
-| `accent` | `--ws-surface-sunk` | `--color-text-interactive` (mid blue) | a quiet link-coloured note |
-| `live` | `--ws-tint-live` (teal 12%) | `--ws-word-positive` | done, ready, gone well; the rating "Strong" |
+| `accent` | `--ws-surface-sunk` | `--color-text-interactive` (mid blue) | a quiet link-coloured note; an info status |
+| `live` | `--ws-tint-live` (teal 12%) | `--ws-word-positive` | done, ready, gone well; the rating "Strong"; a success status |
 | `navy` | `--ws-surface-sunk` | `--color-text-heading`, semibold | a count or a highlighted fact ("New") |
-| `needs` | `--ws-tint-needs` (salmon 10%) | `--ws-word-needs` | something needs you ("2 behind") |
+| `needs` | `--ws-tint-needs` (salmon 10%) | `--ws-word-needs` | something needs you ("2 behind"); a warning status |
+| `alert` | `--ws-tint-alert` (the alert red 8%) | `--ws-word-alert` | something is wrong now ("Failed", "Rejected"); an error status |
 | `middle` | `--ws-card-tint-blue` | `--color-text-interactive` | the rating's middle band ("Getting there") |
 | `needs-work` | `--ws-tint-needs-work` (Seth's pink at 20%) | `--ws-word-needs-work` (#B42D68) | the rating "Needs work" |
 | `example` | none, dashed muted edge | `--color-text-muted`, 11 px semibold | made-up numbers |
 
+Sizes: the default 24 (13 / 18 words), and `--sm` 20 (12 / 16 words) where several sit together. Any tone takes either.
+One size per row: a card's tags are all small or all default.
+
 ### ChangeChip marks
 
 | Mark | Colour | Meaning |
@@ -92,7 +99,7 @@ number went up, down or stayed.
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `tone` | `'neutral' \| 'sunk' \| 'accent' \| 'live' \| 'navy' \| 'needs' \| 'middle' \| 'needs-work' \| 'example'` | the look, default `neutral` |
+| `tone` | `'neutral' \| 'sunk' \| 'accent' \| 'live' \| 'navy' \| 'needs' \| 'alert' \| 'middle' \| 'needs-work' \| 'example'` | the look, default `neutral` |
 | `icon` | `IconName` | an optional 12 px icon before the words |
 | `children` | `ReactNode` | the words |
 
@@ -106,7 +113,7 @@ number went up, down or stayed.
 
 ## Rules
 
-- Six fact tones, the three rating tones and Example; a further look is a sign the screen needs another component.
+- Seven fact tones, the three rating tones and Example; a further look is a sign the screen needs another component.
 - Ratings (D10): strong is teal (`live`), the middle band mid blue (`middle`), needs work Seth's pink (`needs-work`, its
   words the AA step #B42D68). Salmon stays "needs you" (`needs`).
 - Made-up numbers are always chipped `Example` (issue #8, Seth's v7 first open); real numbers never are.
@@ -124,6 +131,8 @@ tones and the field's fix for a long chip (Ignite controls.tsx: a label that tru
 ```html
 <span class="ws-chip ws-chip--needs-work">Needs work</span>
 <span class="ws-chip ws-chip--example">Example</span>
+<!-- small: several tags together, a fact only -->
+<span class="ws-chip ws-chip--sm ws-chip--sunk">Blog</span>
 <span class="ws-chip ws-chip--sunk" title="Referred by Dana Alvarez at the open house">
   <span class="ws-chip__label">Referred by Dana Alvarez at the open house</span>
 </span>
@@ -136,6 +145,6 @@ tones and the field's fix for a long chip (Ignite controls.tsx: a label that tru
 ## Styles
 
 `design-system/components/Chip/style.css`: `ws-chip` with its tones (`ws-chip--sunk`, `ws-chip--accent`,
-`ws-chip--live`, `ws-chip--navy`, `ws-chip--needs`, `ws-chip--middle`, `ws-chip--needs-work`, `ws-chip--example`) and
+`ws-chip--live`, `ws-chip--navy`, `ws-chip--needs`, `ws-chip--alert`, `ws-chip--middle`, `ws-chip--needs-work`, `ws-chip--example`), its small size (`ws-chip--sm`) and
 `ws-chip__label`. `ws-change` (ChangeChip)
 is the house's (`_house.css`, Chips).

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

@@ -11,7 +11,7 @@
 <div class="ws-stage ws-stage--column">
 
   <div class="ws-stack">
-    <span class="ws-muted">Chip: the six tones (24 px, 4 px corners, 13 px medium)</span>
+    <span class="ws-muted">Chip: the fact tones (24 px, 4 px corners, 13 px medium)</span>
     <div class="ws-cluster">
       <span class="ws-chip">Version 1</span>
       <span class="ws-chip ws-chip--sunk">Cold call</span>
@@ -22,6 +22,16 @@
     </div>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">Status sets: error (alert), warning (needs), success (live), info (accent)</span>
+    <div class="ws-cluster">
+      <span class="ws-chip ws-chip--alert">Failed</span>
+      <span class="ws-chip ws-chip--needs">Ends Friday</span>
+      <span class="ws-chip ws-chip--live">Published</span>
+      <span class="ws-chip ws-chip--accent">Queued</span>
+    </div>
+  </div>
+
   <div class="ws-stack">
     <span class="ws-muted">Rating tones: strong (teal), getting there (mid blue), needs work (Seth's pink tag)</span>
     <div class="ws-cluster">
@@ -39,6 +49,20 @@
     </div>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">Small (20 px, 12 px words): several tags on a board card or in a table cell</span>
+    <div class="ws-cluster ws-cluster--tight">
+      <span class="ws-chip ws-chip--sm ws-chip--sunk">Blog</span>
+      <span class="ws-chip ws-chip--sm ws-chip--live">Approved</span>
+      <span class="ws-chip ws-chip--sm ws-chip--needs">Due Nov 12</span>
+      <span class="ws-chip ws-chip--sm ws-chip--middle">In review</span>
+      <span class="ws-chip ws-chip--sm">
+        <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>
+        <span class="ws-chip__label">Madan</span>
+      </span>
+    </div>
+  </div>
+
   <div class="ws-stack" style="max-width: 240px;">
     <span class="ws-muted">A long fact in a narrow column: cut with an ellipsis, whole in its title</span>
     <span class="ws-chip ws-chip--sunk" title="Referred by Dana Alvarez at the open house">

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

@@ -9,9 +9,14 @@
 .ws-chip--live { background: var(--ws-tint-live); color: var(--ws-word-positive); box-shadow: none; }
 .ws-chip--navy { background: var(--ws-surface-sunk); color: var(--color-text-heading); font-weight: 600; box-shadow: none; }
 .ws-chip--needs { background: var(--ws-tint-needs); color: var(--ws-word-needs); box-shadow: none; }
+.ws-chip--alert { background: var(--ws-tint-alert); color: var(--ws-word-alert); box-shadow: none; } /* an error status (#15) */
 /* Rating tones (D10): strong is --live; the middle band ("Getting there") is mid blue; needs work is Seth's pink as a
    20% tint, its words the AA step (#B42D68, 301:2018). */
 .ws-chip--middle { background: var(--ws-card-tint-blue); color: var(--ws-rating-middle); box-shadow: none; }
 .ws-chip--needs-work { background: var(--ws-tint-needs-work); color: var(--ws-word-needs-work); box-shadow: none; }
+/* Small (#30): the dense step for several tags in one place (a board card, a table cell, a list row): 20 tall, 12 / 16
+   medium words, 6 px sides, the 12 px icon 4 before them. A fact only, never a control: a chip that acts keeps 24. Any
+   tone. */
+.ws-chip--sm { height: calc(var(--space-md) + var(--space-xxs)); padding: 0 var(--space-xxs-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); }
 /* Example (issue #8, Seth's v7 first open): made-up numbers are chipped. A 1 px dashed edge, 11 px semibold, a round tag. */
 .ws-chip--example { border-radius: var(--ws-radius-bubble); background: transparent; color: var(--color-text-muted); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 600; box-shadow: none; outline: var(--ws-line) dashed var(--color-text-muted); outline-offset: calc(var(--ws-line) * -1); }

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

@@ -27,6 +27,9 @@ A searchable field for choosing from a long list, matching as you type and offer
   a glance. This two-weight split is specific to `Combobox`'s rows; `Menu`'s own rows stay uniformly navy-medium.
 - Highlighted row (the keyboard's, `aria-activedescendant`): `--ws-surface-sunk`; under the pointer, the navy wash
   (`--ws-hover`); rows have 6 px corners.
+- Chosen row (`aria-selected="true"`): `Menu`'s tick, 16 px navy at the row's end, centred on its first line (a mask the
+  kit draws, so the markup does not change). Never the sunk cream: that is the keyboard's, and a list that opens on the
+  current value and is then walked with the arrows must say which row is chosen and which the keyboard is on (#19).
 - "No matches" row: muted words (`--color-text-muted`), not a real option, not focusable.
 - "Create" row: a text act (`ws-act`-style navy medium, underlined on hover) with a small leading plus icon, since
   creating a new value is an act, not a choice among existing ones (08-choosing-components.md: "Words that act inside a
@@ -41,13 +44,15 @@ A searchable field for choosing from a long list, matching as you type and offer
 | --- | --- | --- |
 | Single choice | the chosen value as plain text in the field | one address, one source |
 | Multi-select (`TagInput`) | chosen values as chips in the field, wrapping past 32 px as needed | several tags, several assigned people |
+| Multi-select, ticked rows | `aria-multiselectable="true"` on the list: each chosen row keeps its tick; the field says how many ("2 chosen") | a filter's list, where the choices are seen in the list rather than as tags |
 
 There is one size; both variants expand to 40 px (or taller, for wrapped chips) on a touch screen.
 
 ## States
 
 - **Closed, with a value:** the field shows the chosen text (or chips) and the chevron, no panel.
-- **Open, with matches:** the panel shows rows with the two-weight highlight; the active row is sunk.
+- **Open, with matches:** the panel shows rows with the two-weight highlight; the active row is sunk; the chosen row,
+  if there is one, is ticked (the two can be the same row: sunk and ticked).
 - **No matches:** the panel shows the muted "No matches" row, and the "Create" row if creating is allowed.
 - **Multi-select:** chips sit in the field; the panel still opens below for further choices.
 - **Focus:** the kit's focus ring, 2 px navy, 2 px out, as `Input`'s (a field's edge darkens under the pointer).
@@ -116,12 +121,13 @@ inside edge and hover.
 <div class="ws-combobox">
   <label class="ws-label" for="cb-address">Street address</label>
   <span class="ws-combobox__field">
-    <input id="cb-address" type="text" role="combobox" aria-expanded="true" aria-controls="cb-list" aria-activedescendant="cb-opt-1" value="pine">
+    <input id="cb-address" type="text" role="combobox" aria-expanded="true" aria-controls="cb-list" aria-activedescendant="cb-opt-0" value="pine">
     <svg class="ws-combobox__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
   </span>
   <div class="ws-menu ws-combobox__panel" role="listbox" id="cb-list">
-    <div class="ws-combobox__option" role="option" id="cb-opt-0"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest">wood Drive</span></div>
-    <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-opt-1" aria-selected="true"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Street</span></div>
+    <!-- the keyboard's row: --active (sunk); the chosen row: aria-selected (ticked) -->
+    <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-opt-0"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest">wood Drive</span></div>
+    <div class="ws-combobox__option" role="option" id="cb-opt-1" aria-selected="true"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Street</span></div>
   </div>
 </div>
 ```

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

@@ -21,16 +21,16 @@
     </div>
 
     <div class="ws-combobox">
-      <span class="ws-muted">Open, with matches (typed part navy medium, rest body grey)</span>
+      <span class="ws-muted">Open on the chosen value (ticked), the keyboard two rows on (sunk)</span>
       <label class="ws-label" for="cb-open">Street address</label>
       <span class="ws-combobox__field ws-combobox__field--focus">
-        <input id="cb-open" type="text" value="pine" role="combobox" aria-expanded="true" aria-controls="cb-list" aria-activedescendant="cb-opt-1">
+        <input id="cb-open" type="text" value="pine" role="combobox" aria-expanded="true" aria-controls="cb-list" aria-activedescendant="cb-opt-2">
         <svg class="ws-combobox__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
       </span>
       <div class="ws-menu ws-combobox__panel" role="listbox" id="cb-list">
         <div class="ws-combobox__option" role="option" id="cb-opt-0"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest">wood Drive</span></div>
-        <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-opt-1" aria-selected="true"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Street</span></div>
-        <div class="ws-combobox__option" role="option" id="cb-opt-2"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Hollow Court</span></div>
+        <div class="ws-combobox__option" role="option" id="cb-opt-1" aria-selected="true"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Street</span></div>
+        <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-opt-2"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Hollow Court</span></div>
         <div class="ws-combobox__option" role="option" id="cb-opt-3"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Hollow Court, Building 4, Unit 1207, Lakeview Estates North</span></div>
       </div>
     </div>
@@ -62,6 +62,21 @@
       </span>
     </div>
 
+    <div class="ws-combobox">
+      <span class="ws-muted">Several chosen, kept as ticked rows in the list (a filter's list)</span>
+      <label class="ws-label" for="cb-many">Channels</label>
+      <span class="ws-combobox__field ws-combobox__field--focus">
+        <input id="cb-many" type="text" value="" placeholder="2 chosen" role="combobox" aria-expanded="true" aria-controls="cb-list-many" aria-activedescendant="cb-many-2">
+        <svg class="ws-combobox__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+      </span>
+      <div class="ws-menu ws-combobox__panel" role="listbox" id="cb-list-many" aria-multiselectable="true">
+        <div class="ws-combobox__option" role="option" id="cb-many-0" aria-selected="true"><span class="ws-combobox__rest">Email</span></div>
+        <div class="ws-combobox__option" role="option" id="cb-many-1" aria-selected="true"><span class="ws-combobox__rest">Social</span></div>
+        <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-many-2" aria-selected="false"><span class="ws-combobox__rest">Blog</span></div>
+        <div class="ws-combobox__option" role="option" id="cb-many-3" aria-selected="false"><span class="ws-combobox__rest">Paid ads</span></div>
+      </div>
+    </div>
+
     <div class="ws-combobox">
       <span class="ws-muted">Error: nothing chosen, with what to do</span>
       <label class="ws-label" for="cb-error">Listing</label>