@felloinnovations/brand-kit 0.5.1 → 0.5.3

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

@@ -16,7 +16,13 @@
    (never cut, never scrolled sideways); one line is 32 tall. */
 .ws-combobox__option { display: block; padding: calc((var(--ws-combobox-row, var(--ws-control-h)) - var(--space-md) - var(--space-xxs)) / 2) var(--space-sm); border-radius: var(--ws-radius-row); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); cursor: pointer; }
 @media (hover: hover) { .ws-combobox__option:hover { background: var(--ws-hover); } }
-.ws-combobox__option--active, .ws-combobox__option[aria-selected="true"] { background: var(--ws-surface-sunk); }
+/* Two marks that never look alike (#19): the keyboard's row is the sunk cream; the chosen row carries Menu's tick, 16 px
+   navy at its end, centred on its first line, so a list that opens on the current value and is then walked with the
+   arrows says which is which. A list of several choices (aria-multiselectable) ticks each one. The tick is a mask, so
+   the app's markup does not change. */
+.ws-combobox__option--active { background: var(--ws-surface-sunk); }
+.ws-combobox__option[aria-selected="true"] { --ws-combobox-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); position: relative; padding-inline-end: calc(var(--space-sm) + var(--ws-icon) + var(--space-xs)); }
+.ws-combobox__option[aria-selected="true"]::after { content: ""; position: absolute; top: calc((var(--ws-combobox-row, var(--ws-control-h)) - var(--ws-icon)) / 2); right: var(--space-sm); width: var(--ws-icon); height: var(--ws-icon); background: var(--color-text-heading); -webkit-mask: var(--ws-combobox-tick) center / contain no-repeat; mask: var(--ws-combobox-tick) center / contain no-repeat; }
 .ws-combobox__match { font-weight: 500; color: var(--color-text-heading); }
 /* pre-wrap keeps the rest's leading space (" Street") and still wraps a long one. */
 .ws-combobox__rest { color: var(--color-text-body); white-space: pre-wrap; }

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

@@ -0,0 +1,138 @@
+People commenting on a thing: remarks anchored to a piece of content, with replies, @mentions, an open or resolved
+state with a count, and a small composer.
+
+## Use it when
+
+- People review something together where it lives: a brief's section, a line of copy, a task, a design.
+- A remark points at a part of the thing (a quoted stretch) or at the whole of it (a task's comments).
+
+## Not for
+
+- Talking to an agent: `ChatTurn`, `ChatCard` and `Composer`.
+- A history of what happened to a thing: `Timeline`.
+- A change to text to accept or not: `TextDiff`.
+
+## Anatomy
+
+- **The list** (`ws-comments`, a `<section>` with its name): the head (`__head`) holds "Comments" (`ws-section`), the
+  open count in the meta words ("2 open") and, at the right, a text act for the resolved ones ("Show 1 resolved").
+  Then the threads (`__list`, an `<ol>`), open first, newest first; then the composer.
+- **A thread** (`ws-comment`, an `<li>`): divided from the next by the full-width hairline (`--ws-divider`), 12 above
+  and below.
+  - What it is on (`__anchor`, when it points at a stretch): the stretch's words quoted on the sunk plate, two lines
+    at most, 13 / 16; the whole quote a button that brings the content into view and marks it. A hidden "On: " names it.
+  - The first remark, then its replies (`__replies`, one level only), each a `__remark`.
+- **A remark** (`__remark`): a 28 px `Avatar` (`ws-avatar--sm`), 8 from everything else in the words' column:
+  - The head (`__head`, 28 tall, on the avatar's line): the name (`__name`, 13 / 18 medium navy, one line), when
+    (`ws-meta`: "2h ago", "Yesterday", "Nov 8"), "Edited" when it was; at the end, the remark's own more act (an extra
+    small `IconButton`: Edit and Delete in a `Menu`), on the person's own remarks only.
+  - The words (`__body`, `ws-body`), line breaks kept.
+  - The acts (`__acts`, the meta size, 12 apart): Reply, and Resolve on a thread's first remark. Quiet text buttons.
+- **A mention** (`ws-mention`): the person's name with its @, medium, in the link's mid blue. **A mention of you**
+  (`ws-mention--you`): the needs word on the needs tint, since it waits on you.
+- **The composer** (`__composer`): the house `TextArea` (its label hidden but present), then a foot (`__composer-foot`)
+  with a hint in the meta words and the acts at the end: "Comment" is the list's one navy button; a reply's composer
+  takes Cancel (ghost) and Reply (secondary), so a page never holds two navy acts.
+- **The mention picker**: typing @ opens a `Menu` as a listbox under the field, the people who can see the thing, each
+  a row with their avatar; the keyboard's row on the sunk ground (`ws-menu-item--current`). The field is its combobox
+  (`aria-expanded`, `aria-controls`, `aria-activedescendant`).
+- **On the content** (`ws-comment-mark`, a `<mark>`): the stretch a thread is on wears the blue card tint
+  (`--ws-card-tint-blue`); a step stronger while its thread is the open one (`aria-current="true"`).
+
+## States
+
+- **Open thread**: as above.
+- **Current** (`aria-current="true"` on the thread): the thread on the blue card tint, its mark on the content a step
+  stronger; the list scrolls it into view.
+- **Resolved** (`ws-comment--resolved`): hidden behind "Show 1 resolved" until asked for; shown, its words muted, a
+  meta line "Resolved by Dana Okafor, Nov 9" and Reopen in its acts; its mark leaves the content.
+- **Replying**: the reply's composer opens under that thread's last reply, focused, the person replied to already
+  mentioned when it is someone else.
+- **Saving**: the remark shows at once with "Sending" in its meta; a failed send keeps the words in the composer with
+  the error under it and a Retry act.
+- **Deleted**: a remark with replies keeps its place as "This comment was deleted." in the meta words; one without
+  replies goes.
+- **Empty**: "No comments yet. Mention someone with @ to ask them about this task." in the meta words, then the
+  composer.
+- **Read only**: no composer, no Reply, Resolve or more acts.
+- **Long name**: one line, cut with an ellipsis, the full name in `title`. Long words wrap anywhere.
+- **Dark**: the tints, the plate and the hairline take their dark values.
+
+## Behaviour
+
+- Keyboard: Tab moves through each thread's quote, acts and more act in order. In the composer, Enter is a new line
+  and Cmd or Ctrl Enter sends; in the picker, up and down move, Enter picks, Escape closes the list (a second Escape
+  leaves the field).
+- Pressing a quote brings the content into view and marks it current; pressing a mark on the content opens its
+  thread in the list. Each moves focus to the other's start.
+- Resolve and Reopen act at once with an Undo in the confirmation (Patterns: undo beats confirm). Delete asks first
+  (`ConfirmDialog`), since others may have answered.
+- Motion: a new remark rises in (`ws-arrive`); a resolved thread folds away (`ws-unfold`). Still under reduced motion.
+
+## Content
+
+- Times are relative under a day ("2h ago"), then the day ("Yesterday", "Nov 8").
+- The composer's placeholder says how to mention: "Add a comment. Type @ to mention someone."
+- No em dashes; the person's own words are shown as they wrote them.
+
+## Rules
+
+- One level of replies. A reply to a reply joins the same thread, mentioning who it answers.
+- Mentions are names in mid blue, never a navy pill; only a mention of you takes a ground, the needs tint.
+- One navy act in the list: the composer's Comment.
+- The mark on the content is a tint, never an underline: an underline at rest is not a kit look.
+
+## Source
+
+- **Derived from**: `Avatar`, `TextArea`, `Menu` (as a listbox), `Plate`'s sunk ground, the needs tint for what waits on
+  you, the blue card tint (`Chip`'s middle rating ground), Patterns' undo over confirm.
+- **Precedent**: Marketing OS (ContentOS): task comments, brief comments and the review comments panel, composer and
+  tip, each hand-built from tokens (issue #26, Madan, 10 Nov 2026).
+
+## Markup
+
+```html
+<section class="ws-comments" aria-labelledby="comments-title">
+  <div class="ws-comments__head">
+    <div class="ws-cluster"><h3 class="ws-section" id="comments-title">Comments</h3><span class="ws-meta">2 open</span></div>
+    <button type="button" class="ws-btn ws-btn--text">Show 1 resolved</button>
+  </div>
+  <ol class="ws-comments__list">
+    <li class="ws-comment" aria-current="true">
+      <button type="button" class="ws-comment__anchor"><span class="ws-sr">On: </span><span>Spring is still the busiest season</span></button>
+      <div class="ws-comment__remark">
+        <span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">DO</span>
+        <div class="ws-comment__head">
+          <span class="ws-comment__name">Dana Okafor</span>
+          <span class="ws-meta">2h ago</span>
+        </div>
+        <p class="ws-body ws-comment__body"><span class="ws-mention">@Sam Rivera</span> can we back "busiest" with last spring's numbers?</p>
+        <div class="ws-comment__acts">
+          <button type="button" class="ws-btn ws-btn--text">Reply</button>
+          <button type="button" class="ws-btn ws-btn--text">Resolve</button>
+        </div>
+        <ol class="ws-comment__replies">
+          <li class="ws-comment__remark">...</li>
+        </ol>
+      </div>
+    </li>
+  </ol>
+  <div class="ws-comments__composer">
+    <label class="ws-sr" for="new-comment">New comment</label>
+    <textarea class="ws-textarea" id="new-comment" placeholder="Add a comment. Type @ to mention someone."></textarea>
+    <div class="ws-comments__composer-foot">
+      <span class="ws-meta">Whoever you mention gets a message</span>
+      <button type="button" class="ws-btn ws-btn--primary">Comment</button>
+    </div>
+  </div>
+</section>
+
+<!-- On the content -->
+<p class="ws-body"><mark class="ws-comment-mark" aria-current="true">Spring is still the busiest season</mark> for listings.</p>
+```
+
+## Styles
+
+`design-system/components/CommentThread/style.css`: `ws-comments` (`__head`, `__list`, `__composer`,
+`__composer-foot`), `ws-comment` (`--resolved`, `__anchor`, `__remark`, `__head`, `__name`, `__body`, `__acts`,
+`__replies`), `ws-mention` (`--you`), `ws-comment-mark`.

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

@@ -0,0 +1,134 @@
+<!-- @dsCard group="People" height=760 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CommentThread</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage">
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">On the content: the stretch a thread is on, a step stronger while that thread is open</span>
+    <div class="ws-card ws-card--pad-md ws-stack">
+      <h3 class="ws-section">Headline</h3>
+      <p class="ws-body"><mark class="ws-comment-mark" aria-current="true">Spring is still the busiest season for listings in Ohio</mark>, and buyers who get pre-approved by February <mark class="ws-comment-mark">close first</mark>.</p>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 380px;">
+    <span class="ws-muted">The threads beside it: open first, a reply one level in, a mention of you on the needs tint, one resolved</span>
+    <div class="ws-card ws-card--pad-md">
+      <section class="ws-comments" aria-labelledby="ct-title">
+        <div class="ws-comments__head">
+          <div class="ws-cluster">
+            <h3 class="ws-section" id="ct-title">Comments</h3>
+            <span class="ws-meta">2 open</span>
+          </div>
+          <button type="button" class="ws-btn ws-btn--text">Show 1 resolved</button>
+        </div>
+        <ol class="ws-comments__list">
+          <li class="ws-comment" aria-current="true">
+            <button type="button" class="ws-comment__anchor"><span class="ws-sr">On: </span><span>Spring is still the busiest season for listings in Ohio</span></button>
+            <div class="ws-comment__remark">
+              <span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">DO</span>
+              <div class="ws-comment__head">
+                <span class="ws-comment__name">Dana Okafor</span>
+                <span class="ws-meta">2h ago</span>
+                <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="More for Dana's comment"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="3.6" r="0.9" fill="currentColor"/><circle cx="8" cy="8" r="0.9" fill="currentColor"/><circle cx="8" cy="12.4" r="0.9" fill="currentColor"/></svg></button>
+              </div>
+              <p class="ws-body ws-comment__body"><span class="ws-mention">@Sam Rivera</span> can we back "busiest" with last spring's numbers?</p>
+              <div class="ws-comment__acts">
+                <button type="button" class="ws-btn ws-btn--text">Reply</button>
+                <button type="button" class="ws-btn ws-btn--text">Resolve</button>
+              </div>
+              <ol class="ws-comment__replies">
+                <li class="ws-comment__remark">
+                  <span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">SR</span>
+                  <div class="ws-comment__head">
+                    <span class="ws-comment__name">Sam Rivera</span>
+                    <span class="ws-meta">1h ago</span>
+                    <span class="ws-meta">Edited</span>
+                  </div>
+                  <p class="ws-body ws-comment__body">Listings rose 18% from March to May. <span class="ws-mention ws-mention--you">@Amit Bhandary</span> fine to cite the MLS?</p>
+                  <div class="ws-comment__acts">
+                    <button type="button" class="ws-btn ws-btn--text">Reply</button>
+                  </div>
+                </li>
+              </ol>
+            </div>
+          </li>
+          <li class="ws-comment">
+            <button type="button" class="ws-comment__anchor"><span class="ws-sr">On: </span><span>close first</span></button>
+            <div class="ws-comment__remark">
+              <span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">PN</span>
+              <div class="ws-comment__head">
+                <span class="ws-comment__name">Priya Nair</span>
+                <span class="ws-meta">Yesterday</span>
+              </div>
+              <p class="ws-body ws-comment__body">Too strong for a headline. "Tend to close first"?</p>
+              <div class="ws-comment__acts">
+                <button type="button" class="ws-btn ws-btn--text">Reply</button>
+                <button type="button" class="ws-btn ws-btn--text">Resolve</button>
+              </div>
+            </div>
+          </li>
+          <li class="ws-comment ws-comment--resolved">
+            <div class="ws-comment__remark">
+              <span class="ws-avatar ws-avatar--plain ws-avatar--sm ws-avatar--dim" aria-hidden="true">TL</span>
+              <div class="ws-comment__head">
+                <span class="ws-comment__name">Theo Lang</span>
+                <span class="ws-meta">Nov 8</span>
+              </div>
+              <p class="ws-body ws-comment__body">Swap the stock photo for one of an Ohio street.</p>
+              <p class="ws-meta">Resolved by Dana Okafor, Nov 9</p>
+              <div class="ws-comment__acts">
+                <button type="button" class="ws-btn ws-btn--text">Reopen</button>
+              </div>
+            </div>
+          </li>
+        </ol>
+        <div class="ws-comments__composer">
+          <label class="ws-sr" for="ct-new">New comment</label>
+          <textarea class="ws-textarea" id="ct-new" placeholder="Add a comment. Type @ to mention someone."></textarea>
+          <div class="ws-comments__composer-foot">
+            <span class="ws-meta">Whoever you mention gets a message</span>
+            <button type="button" class="ws-btn ws-btn--primary">Comment</button>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">Mentioning: typing @ opens the people who can see it, the keyboard's row on the sunk ground</span>
+    <div class="ws-card ws-card--pad-md ws-comments__composer">
+      <label class="ws-sr" for="ct-reply">Reply to Dana</label>
+      <textarea class="ws-textarea ws-textarea--typing" id="ct-reply" role="combobox" aria-expanded="true" aria-controls="ct-people" aria-activedescendant="ct-p1">Thanks, @sa</textarea>
+      <div class="ws-menu" role="listbox" id="ct-people" aria-label="People">
+        <div class="ws-menu-item ws-menu-item--current" role="option" id="ct-p1" aria-selected="true"><span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">SR</span>Sam Rivera</div>
+        <div class="ws-menu-item" role="option" id="ct-p2"><span class="ws-avatar ws-avatar--plain ws-avatar--sm" aria-hidden="true">SK</span>Sara Kim</div>
+      </div>
+      <div class="ws-comments__composer-foot">
+        <span class="ws-meta">Enter picks, Escape closes the list</span>
+        <div class="ws-cluster">
+          <button type="button" class="ws-btn ws-btn--ghost">Cancel</button>
+          <button type="button" class="ws-btn ws-btn--secondary">Reply</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">No comments yet</span>
+    <div class="ws-card ws-card--pad-md">
+      <section class="ws-comments" aria-label="Comments">
+        <h3 class="ws-section">Comments</h3>
+        <p class="ws-meta">No comments yet. Mention someone with @ to ask them about this task.</p>
+      </section>
+    </div>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,41 @@
+/* ---- CommentThread: people commenting on a thing (a brief's section, a line of copy, a task). Threads in a list,
+   divided by the full-width hairline: the quote of what each is on, its first remark, its replies one level in under the
+   words' column, the acts (Reply, Resolve) in the meta size. A remark is a 28 px avatar beside its name, its time and
+   its words. A mention of someone is their name in the link's mid blue; a mention of you is on the needs tint, since it
+   waits on you. On the content, a commented stretch wears the blue card tint, a step stronger while its thread is the
+   one open. ---- */
+.ws-comments { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
+.ws-comments__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
+.ws-comments__list { display: flex; flex-direction: column; }
+.ws-comment { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) 0; border-top: var(--ws-divider); }
+.ws-comment:last-child { border-bottom: var(--ws-divider); }
+/* The thread open beside its content: the blue card tint, the rows' 12 px sides so its words do not touch the edge. */
+.ws-comment[aria-current="true"] { margin: 0 calc(var(--space-sm) * -1); padding: var(--space-sm); border-radius: var(--ws-radius-control); background: var(--ws-card-tint-blue); }
+/* What the thread is on: its words quoted on the sunk plate (as ChatCard quotes a message), two lines at most, the
+   whole quote a button that brings the content into view. */
+.ws-comment__anchor { display: block; width: 100%; padding: var(--space-xxs) var(--space-xs); border: 0; border-radius: var(--ws-radius-control); background: var(--ws-surface-sunk); color: var(--color-text-body); font: inherit; font-size: var(--ws-text-meta); line-height: var(--space-md); text-align: start; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-comment__anchor > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+@media (pointer: coarse) { .ws-comment__anchor { min-height: var(--ws-touch); } }
+@media (hover: hover) { .ws-comment__anchor:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
+/* A remark: the avatar, then everything else in the words' column. */
+.ws-comment__remark { display: grid; grid-template-columns: var(--ws-control-h-sm) minmax(0, 1fr); column-gap: var(--space-xs); row-gap: var(--space-xxs); }
+.ws-comment__remark > :not(.ws-avatar) { grid-column: 2; }
+.ws-comment__head { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--ws-control-h-sm); min-width: 0; }
+.ws-comment__name { overflow: hidden; color: var(--color-text-heading); font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); text-overflow: ellipsis; white-space: nowrap; }
+.ws-comment__head > .ws-icon-btn { margin-inline-start: auto; }
+.ws-comment__body { overflow-wrap: anywhere; white-space: pre-line; }
+.ws-comment__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--ws-text-meta); line-height: var(--space-md); }
+.ws-comment__replies { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-xs); }
+/* Resolved: the words step back to muted; a meta line says who resolved it and when, Reopen in the acts. */
+.ws-comment--resolved .ws-comment__body { color: var(--color-text-muted); }
+/* Mentions inside a remark's words or the composer's preview. */
+.ws-mention { color: var(--color-text-interactive); font-weight: 500; }
+.ws-mention--you { padding: 0 var(--space-3xs); border-radius: calc(var(--ws-radius-control) / 2); background: var(--ws-tint-needs); color: var(--ws-word-needs); }
+/* The composer: the house textarea, then a foot with the hint and its acts. */
+.ws-comments__composer { display: flex; flex-direction: column; gap: var(--space-xs); }
+.ws-comments__composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
+/* The acts keep to the end even when the hint wraps above them. */
+.ws-comments__composer-foot > :last-child { margin-inline-start: auto; }
+/* On the content: the stretch a thread is on. */
+.ws-comment-mark { border-radius: calc(var(--ws-radius-control) / 2); background: var(--ws-card-tint-blue); color: inherit; }
+.ws-comment-mark[aria-current="true"] { background: color-mix(in srgb, var(--ws-rating-middle) 20%, var(--color-surface)); }

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

@@ -1,14 +1,16 @@
-A date field that works on its own, with a popover month grid for picking a day by eye instead of typing it.
+A date field that works on its own, with a popover month grid for picking a day by eye instead of typing it; the same
+shell holds a time of day, and a date with a time.
 
 ## Use it when
 
 - A form needs a single date (when a call happened, when an offer was sent, a listing's close date).
 - The person may prefer to type the date (a native field, keyboard first) or pick it visually (a calendar).
 - A range between two dates needs a visible span (a report's window, a listing's active dates).
+- Something happens at a time of day (`type="time"`: when a follow-up goes out), or on a day at a time
+  (`type="datetime-local"`: when a post, an email or a blog is published).
 
 ## Not for
 
-- A time of day with no date: a dedicated time field is listed as later, alongside this one, until built.
 - A day within the last few weeks shown as a history, not a choice: use `StreakCalendar`.
 - A short, known set of dates shown as options: use `Select` or `Segmented`.
 
@@ -20,6 +22,14 @@ A date field that works on its own, with a popover month grid for picking a day
 - Picker: a `ws-menu` card (cream, `--ws-radius-card`, `--ws-shadow-lift`) holding a month grid.
   - Header: 32 px row (`--ws-control-h`), the month name 14 px medium navy, two `xs` ghost `IconButton`s (24 px) at the
     ends for the previous and next month.
+  - A far month or year (`__jump`, #20): where a date can be months or years away (bounds that run for decades), the
+    month name becomes two small selects (`Select --sm`, Seth's chip select, 28 tall, 12 / 16 medium navy), the month
+    and the year, 4 apart between the arrows. Native, so the list types ahead ("2045"), and on touch they are the
+    platform's own sheet, 40 tall. A picker for this month and the next few keeps the plain month name.
+  - Foot (`__foot`), under `Menu`'s line (`ws-menu-line`): "Today" at the start, which chooses today and closes, and
+    "Clear" at the end, only when the date may be left empty, which empties the field and closes. Both `Button ghost
+    small` (28 tall, navy words). A required date has no Clear; a picker that opens on this month has no need of
+    Today, but keeps it when the field is often far from today.
   - Day letters: 11 px (`--ws-text-micro`), muted, once above the grid, exactly as `StreakCalendar`'s own day-letter row.
   - Day cells: 32 px (`--ws-control-h`), `--ws-radius-control` (4 px) corners. This is a squarer cell than
     `StreakCalendar`'s pill-shaped day cells, because a picker is a month grid for choosing one day, not a strip
@@ -44,6 +54,9 @@ A date field that works on its own, with a popover month grid for picking a day
 | --- | --- | --- |
 | Single date | one chosen day, navy fill | when a call happened, an offer date |
 | Range | two chosen ends with `--ws-surface-sunk` between | a report's window, active listing dates |
+| Time | `type="time"`, a 16 px navy clock at the right; the platform's own picker | when a reminder or a send goes out |
+| Date and time | `type="datetime-local"`, the calendar mark; the platform's own picker | when a post, an email or a blog is published |
+| Jump and foot | the month and the year as selects (`__jump`), Today and Clear under a line (`__foot`) | a plan's dates years apart, an optional milestone date |
 
 There is one size; the field expands to 40 px on a touch screen, where the platform's native date sheet may also appear.
 
@@ -52,6 +65,8 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 - **Field alone:** the native input and its calendar icon, no picker open.
 - **Open picker:** the month grid, including today's ring, a muted out-of-month day and a past-disabled day.
 - **A range:** two navy ends with the sunk fill between them.
+- **Jump and foot:** the head's two selects say the shown month and year; choosing one redraws the grid there and keeps
+  the focus on the select. Today and Clear act at once and close the picker; focus returns to the field.
 - **Focus:** the kit's focus ring, 2 px navy, 2 px out, as `Input`'s (a field's edge darkens under the pointer).
 - **Error:** the salmon's AA step as a 1 px edge with a message below, exactly as `Input`'s error state.
 - **Hover (a mouse only):** a day takes the navy wash.
@@ -65,7 +80,8 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 - Keyboard: the native field works on its own (typing digits, native keyboard entry) with no picker at all, which is
   the "native first" half of this component; when the picker is open, arrow keys move between day cells, Enter chooses
   the active cell, Escape closes the picker and returns focus to the field, and the header's buttons (or Page Up/Down)
-  move months.
+  move months; with `__jump`, Tab reaches the month and the year selects after the previous arrow, then the next arrow,
+  the grid, Today and Clear.
 - Pointer / touch: clicking a day cell chooses it; the field's own calendar icon opens the picker.
 - Motion: the picker opens as `Menu` does, growing from its top left corner, under the field's left edge (D7).
 - Reduced motion: the picker appears without its rise.
@@ -89,6 +105,13 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 
 ## Rules
 
+- **A time, and a date with a time, are the native field in this shell** (#27): `Input`'s box, the kit's mark, the
+  platform's picker (a wheel or a list on a phone, typed segments on a desktop). No kit picker draws hours: a time is
+  typed or wheeled faster than it is picked by eye. A date with a time that needs the month grid (a date far off, a
+  range) is two fields side by side in one row, the date first: a `DateInput` and a time, each with its own label.
+- The time's value is the person's own time zone unless the field says otherwise: when it is not (a send in the
+  recipient's zone), the zone is named in the label or the hint ("Send at, Eastern"), never left to guess.
+
 - 08-choosing-components.md previously read: "Pick a date or a time | a native input until a picker is built | listed
   as later." This is that picker arriving (26 Oct 2026): the native field stays the whole story on its own, and the
   picker is an enhancement, never a replacement.
@@ -116,6 +139,11 @@ addition decided from the system, 26 Oct 2026 (filling the "listed as later" lin
   <div class="ws-date-input__head">
     <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Previous month">...</button>
     <span class="ws-date-input__month">October 2026</span>
+    <!-- or, to jump far: the month and the year as two small selects -->
+    <!-- <span class="ws-date-input__jump">
+      <span class="ws-select-wrap"><select class="ws-select ws-select--sm" aria-label="Month">...</select><svg>...</svg></span>
+      <span class="ws-select-wrap"><select class="ws-select ws-select--sm" aria-label="Year">...</select><svg>...</svg></span>
+    </span> -->
     <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Next month">...</button>
   </div>
   <div class="ws-date-input__grid">
@@ -128,6 +156,12 @@ addition decided from the system, 26 Oct 2026 (filling the "listed as later" lin
     <button type="button" class="ws-date-input__cell ws-date-input__cell--today" aria-current="date">26</button>
     <button type="button" class="ws-date-input__cell ws-date-input__cell--muted">1</button>
   </div>
+  <!-- the foot: Today, and Clear for a date that may be left empty -->
+  <div class="ws-menu-line" role="separator"></div>
+  <div class="ws-date-input__foot">
+    <button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Today</button>
+    <button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Clear</button>
+  </div>
 </div>
 
 <!-- a range: two navy ends, the sunk band between them -->
@@ -153,5 +187,5 @@ addition decided from the system, 26 Oct 2026 (filling the "listed as later" lin
 
 ## Styles
 
-`design-system/components/DateInput/style.css`: `ws-date-input`, `__icon`, `__picker`, `__head`, `__month`, `__grid`,
+`design-system/components/DateInput/style.css`: `ws-date-input`, `__icon`, `__picker`, `__head`, `__month`, `__jump`, `__foot`, `__grid`,
 `__letter`, `__cell` and its `--muted`, `--today`, `--chosen`, `--disabled`, `--range`, `--range-start`, `--range-end`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Fields" height=306 -->
+<!-- @dsCard group="Fields" height=360 -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
   <div class="ws-cluster ws-cluster--component ws-cluster--start">
 
     <div class="ws-stack">
-      <span class="ws-muted">Field alone: native, dressed as the system's field; then in error</span>
+      <span class="ws-muted">Fields: a date, in error, a time, a date with a time</span>
       <div class="ws-stack ws-stack--component">
       <label class="ws-field">
         <span class="ws-label">Call date</span>
@@ -36,6 +36,20 @@
           Pick a day after the offer was sent
         </p>
       </div>
+      <label class="ws-field">
+        <span class="ws-label">Send at</span>
+        <span class="ws-date-input">
+          <input class="ws-input" type="time" value="09:30">
+          <svg class="ws-date-input__icon" 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="8" r="5.5"/><path d="M8 5v3l2 1.5"/></svg>
+        </span>
+      </label>
+      <label class="ws-field">
+        <span class="ws-label">Publish on</span>
+        <span class="ws-date-input">
+          <input class="ws-input" type="datetime-local" value="2026-11-12T09:30">
+          <svg class="ws-date-input__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M2.5 6.5h11M5 2v3M11 2v3"/></svg>
+        </span>
+      </label>
       </div>
     </div>
 
@@ -65,6 +79,40 @@
       </div>
     </div>
 
+    <div class="ws-stack" style="min-width: min(100%, 320px);">
+      <span class="ws-muted">A far date: month and year selects; Today, Clear</span>
+      <div class="ws-menu ws-date-input__picker" role="dialog" aria-label="Choose a publish date">
+        <div class="ws-date-input__head">
+          <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Previous month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L6 8l4 5"/></svg></button>
+          <span class="ws-date-input__jump">
+            <span class="ws-select-wrap"><select class="ws-select ws-select--sm" aria-label="Month"><option>January</option><option>February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option selected>October</option><option>November</option><option>December</option></select><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></span>
+            <span class="ws-select-wrap"><select class="ws-select ws-select--sm" aria-label="Year"><option>2024</option><option>2025</option><option selected>2026</option><option>2027</option><option>2028</option></select><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></span>
+          </span>
+          <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Next month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l4 5-4 5"/></svg></button>
+        </div>
+        <div class="ws-date-input__grid">
+          <span class="ws-date-input__letter">M</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">W</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">F</span><span class="ws-date-input__letter">S</span><span class="ws-date-input__letter">S</span>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">28</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">29</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">30</button>
+          <button type="button" class="ws-date-input__cell">1</button><button type="button" class="ws-date-input__cell">2</button><button type="button" class="ws-date-input__cell">3</button><button type="button" class="ws-date-input__cell">4</button>
+          <button type="button" class="ws-date-input__cell">5</button><button type="button" class="ws-date-input__cell">6</button><button type="button" class="ws-date-input__cell">7</button><button type="button" class="ws-date-input__cell">8</button><button type="button" class="ws-date-input__cell">9</button><button type="button" class="ws-date-input__cell">10</button><button type="button" class="ws-date-input__cell">11</button>
+          <button type="button" class="ws-date-input__cell">12</button><button type="button" class="ws-date-input__cell">13</button><button type="button" class="ws-date-input__cell">14</button><button type="button" class="ws-date-input__cell">15</button><button type="button" class="ws-date-input__cell">16</button><button type="button" class="ws-date-input__cell">17</button><button type="button" class="ws-date-input__cell">18</button>
+          <button type="button" class="ws-date-input__cell">19</button><button type="button" class="ws-date-input__cell">20</button><button type="button" class="ws-date-input__cell">21</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--chosen" aria-pressed="true">22</button>
+          <button type="button" class="ws-date-input__cell">23</button><button type="button" class="ws-date-input__cell">24</button><button type="button" class="ws-date-input__cell">25</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--today" aria-current="date">26</button>
+          <button type="button" class="ws-date-input__cell">27</button><button type="button" class="ws-date-input__cell">28</button><button type="button" class="ws-date-input__cell">29</button><button type="button" class="ws-date-input__cell">30</button><button type="button" class="ws-date-input__cell">31</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted">1</button>
+        </div>
+        <div class="ws-menu-line" role="separator"></div>
+        <div class="ws-date-input__foot">
+          <button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Today</button>
+          <button type="button" class="ws-btn ws-btn--ghost ws-btn--sm">Clear</button>
+        </div>
+      </div>
+    </div>
+
     <div class="ws-stack">
       <span class="ws-muted">A range: Oct 12 to Oct 18, sunk fill between two navy ends</span>
       <div class="ws-menu ws-date-input__picker" role="dialog" aria-label="Choose a date range">

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

@@ -12,6 +12,12 @@
 .ws-menu.ws-date-input__picker { transform-origin: top left; }
 .ws-date-input__head { display: flex; align-items: center; justify-content: space-between; height: var(--ws-control-h); padding: 0 var(--space-xxs); }
 .ws-date-input__month { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+/* A far month or year (#20): the month words become two small selects between the arrows (Seth's chip select), so a
+   date years away is one choice, and the native list types ahead ("2045"). */
+.ws-date-input__jump { display: flex; align-items: center; gap: var(--space-xxs); min-width: 0; }
+.ws-date-input__jump > .ws-select-wrap { align-self: center; }
+/* The foot, under Menu's line: Today at the start, Clear at the end for a date that may be left empty. */
+.ws-date-input__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: 0 var(--space-xxs) var(--space-3xs); }
 .ws-date-input__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs) 0; padding: var(--space-xxs); }
 .ws-date-input__letter { text-align: center; font-size: var(--ws-text-micro); line-height: var(--space-md); color: var(--color-text-muted); }
 .ws-date-input__cell { position: relative; display: flex; align-items: center; justify-content: center; height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-heading); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }

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

@@ -41,10 +41,29 @@ A modal, built on the browser's own `<dialog>`: a short task in the centre of th
 | `ws-dialog` | In the centre: rises 14 px out of .98 as the scrim fades in |
 | `ws-dialog--drawer` | 440 wide (`--ws-thing-width`), floating 12 in from the window's top, right and bottom edges with 12 px corners; slides in from the right |
 | `ws-dialog--drawer ws-dialog--drawer-start` | The same from the left edge |
+| `ws-dialog--mounted` (with any of the above) | The pane an app mounts as a `div` (Radix Dialog, a portal): fixed over the window on `z-modal`, centred (a drawer keeps its edge), with the same entrance and exit as keyframes. Its scrim is `ws-dialog__scrim`, placed just before it |
+
+### Mounted by the app
+
+Use the native `<dialog>` where you can: it needs no script. When a library mounts the dialog instead (Radix, for its
+focus trap, or tests under jsdom, which has no `showModal()`), put `ws-dialog ws-dialog--mounted` on the pane and
+`ws-dialog__scrim` on the overlay rendered just before it. Drop the library's own centring (`fixed`, `top-1/2`,
+`-translate-*`): the kit places the pane, and the motion moves it.
+
+```tsx
+<Dialog.Portal>
+  <Dialog.Overlay className="ws-dialog__scrim" />
+  <Dialog.Content className="ws-dialog ws-dialog--mounted">{/* ws-head, ws-dialog__content, ws-band */}</Dialog.Content>
+</Dialog.Portal>
+```
+
+Radix marks both `data-state="closed"` as they close and waits for their animations before it unmounts them, so the exit
+plays with no code. Without Radix, set `data-leaving` on both and remove them once their animations end (Motion, "An
+element the app mounts"); under reduced motion there are none, so they go at once.
 
 ## States
 
-- **Closed**: not shown; the dialog element is not open.
+- **Closed**: not shown; the dialog element is not open (mounted: not in the page).
 - **Opening** (North's window, js@540954): the scrim fades in over `--ws-duration-hover` (.2 s); a centre dialog grows
   14 px up out of .98 (`--ws-open-scale-pane`) on the settle spring (`--ws-spring-settle`, .32 / .1); a drawer slides
   in from its edge over `--ws-duration-grow` (.55 s) on `--ws-ease-grow` (North's "Card grows open"). Then its details
@@ -72,9 +91,13 @@ A modal, built on the browser's own `<dialog>`: a short task in the centre of th
   element itself (the scrim).
 - Touch: the close and the acts are 40 tall.
 - Motion: the browser's own `[open]` change with `@starting-style`, `overlay` and `display` kept for the exit, so no
-  script is needed. North's numbers: rise 14, exit 8, scale .98.
+  script is needed. North's numbers: rise 14, exit 8, scale .98. A mounted pane plays the same moves as keyframes: on
+  mount, and on `data-state="closed"` or `data-leaving`; its scrim fades in over `--ws-duration-hover` and out over
+  `--ws-duration-exit`.
+- Focus, mounted: the library traps it and gives it back (Radix does both); a pane of the app's own takes `tabindex="-1"`,
+  takes focus on open, closes on Escape and on a click on the scrim, and returns focus to what opened it.
 - Reduced motion: it appears and goes at once; so does a browser without `@starting-style`.
-- The preview's last stack is live: open the dialog and the drawer.
+- The preview's last two stacks are live: open the dialog and the drawer, natively and mounted.
 - Menus inside it open in the top layer (see `Menu`), so the pane never cuts them.
 
 ## Content