@felloinnovations/brand-kit 0.5.1 → 0.5.3

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

@@ -47,6 +47,13 @@ A split pair (`ws-btn-split`): two acts in equal halves across the width, the pr
 half would be under 160 px, or narrower than either label on its one line, they stack, the primary at the bottom, under
 the thumb.
 
+An act with a menu of its other forms (`ws-btn-join`, #22): the act and a caret joined into one shape, the caret
+opening a `Menu` of the same act done another way ("Approve", and behind the caret "Approve and post now", "Approve and
+schedule"). The inner corners are square; a hairline in the words' colour at 35 % parts the halves, 6 in from the top
+and bottom (two `secondary` halves share one edge instead); the caret is a square of the button's height with a 16 px
+chevron (28 at small and medium, 40 large and on touch). Any look, any size; both halves wear the same classes. The
+pair gives to a press as one. Not `ws-btn-split`, which is two different acts side by side.
+
 `--wrap`: a label that may be wider than its column wraps in balanced lines (a button's words never wrap otherwise).
 
 ## States
@@ -75,7 +82,10 @@ the thumb.
 - **Pending under the pointer:** keeps its resting look (no brighter navy, no light, no wash): it refuses the press a
   hover would invite.
 - **Long label:** one line; with `ws-btn--wrap`, wider than its column, it wraps in balanced lines.
-- **Narrow:** the split pair stacks; a lone large button may take the width.
+- **Narrow:** the split pair stacks; a lone large button may take the width; a joined act never splits, its act's
+  words cut before the caret goes.
+- **Joined, open:** the caret has `aria-expanded="true"` and its menu hangs under it, right edges flush (`Menu`'s
+  placement); Escape closes it and returns focus to the caret.
 - **Touch:** boxed sizes at least 40; `link` and `text` 24 tall.
 - **Dark:** the act is the light ink with dark words; its hover eases a step toward its words and draws no light
   (derived: North has no dark values).
@@ -112,6 +122,11 @@ the thumb.
 
 ## Rules
 
+- **A joined act holds the act's other forms, never other acts.** "Approve" with "Approve and post now" behind its
+  caret; not "Approve" with "Delete" (that is a `Menu` from a three-dots `IconButton`). The plain act is the one most
+  people press. A navy joined act is the surface's one navy act. The caret is named for what it holds ("Other ways to
+  approve"), never "More".
+
 - Every button is `Button` or `ButtonLink` (`SubmitButton` in a form), never a styled `<button>` (24 Oct 2026, "One way to
   use buttons").
 - One navy (`primary`) button per card, and one for the page; everything else is secondary, well, ghost or words.
@@ -150,6 +165,18 @@ North's 34 px height is not taken: the Fia frames' 32 / 40 sit on the control la
   <button type="button" class="ws-btn ws-btn--lg ws-btn--primary">Review Grow's rewrite</button>
 </div>
 
+<!-- an act with a menu of its other forms: the caret opens a Menu -->
+<div class="ws-btn-join">
+  <button type="button" class="ws-btn ws-btn--primary">Approve</button>
+  <button type="button" class="ws-btn ws-btn--primary" aria-label="Other ways to approve" aria-haspopup="menu" aria-expanded="false" aria-controls="approve-menu">
+    <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>
+  </button>
+</div>
+<div class="ws-menu" role="menu" id="approve-menu" popover>
+  <button type="button" class="ws-menu-item" role="menuitem">Approve and post now</button>
+  <button type="button" class="ws-menu-item" role="menuitem">Approve and schedule</button>
+</div>
+
 <a href="/leads/priya" class="ws-card ws-card--inset" aria-busy="true" style="position: relative; display: block;">
   Priya Nair <span class="ws-link-pending" aria-hidden="true"></span>
 </a>
@@ -159,6 +186,6 @@ North's 34 px height is not taken: the Fia frames' 32 / 40 sit on the control la
 
 `design-system/components/Button/style.css` (in `bundle.css` and `fello.css`): `ws-btn` with `--sm`, `--lg`, `--primary`,
 `--secondary`, `--well`, `--ghost`, `--link`, `--text`, `--wrap`, and the pictured states `is-hover`, `is-pressed`,
-`is-focus`; `ws-btn-split`; `ws-link-pending`. It also scopes the shared hover values `--ws-edge-hover`,
+`is-focus`; `ws-btn-split`; `ws-btn-join`; `ws-link-pending`. It also scopes the shared hover values `--ws-edge-hover`,
 `--ws-act-hover` and `--ws-act-light` for every outlined or navy control (the switch's track too). Touch sizes come from
 the house's touch block; the working dot is the house's `ws-dot`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Actions" height=1060 -->
+<!-- @dsCard group="Actions" height=1200 -->
 <!doctype html>
 <html>
 <head>
@@ -56,6 +56,38 @@
     </div>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">An act with a menu of its other forms: the act and its caret joined, then the menu open</span>
+    <div class="ws-cluster ws-cluster--start">
+      <div class="ws-btn-join">
+        <button type="button" class="ws-btn ws-btn--primary">Approve</button>
+        <button type="button" class="ws-btn ws-btn--primary" aria-label="Other ways to approve" aria-haspopup="menu" aria-expanded="false"><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></button>
+      </div>
+      <div class="ws-btn-join">
+        <button type="button" class="ws-btn ws-btn--well">Save draft</button>
+        <button type="button" class="ws-btn ws-btn--well" aria-label="Other ways to save" aria-haspopup="menu" aria-expanded="false"><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></button>
+      </div>
+      <div class="ws-btn-join">
+        <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Export</button>
+        <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm" aria-label="Other ways to export" aria-haspopup="menu" aria-expanded="false"><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></button>
+      </div>
+      <div class="ws-btn-join">
+        <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Publish</button>
+        <button type="button" class="ws-btn ws-btn--primary ws-btn--lg" aria-label="Other ways to publish" aria-haspopup="menu" aria-expanded="false"><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></button>
+      </div>
+    </div>
+    <div class="ws-stack" style="align-items: flex-start;">
+      <div class="ws-btn-join">
+        <button type="button" class="ws-btn ws-btn--primary">Approve</button>
+        <button type="button" class="ws-btn ws-btn--primary" aria-label="Other ways to approve" aria-haspopup="menu" aria-expanded="true" aria-controls="join-menu"><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></button>
+      </div>
+      <div class="ws-menu" role="menu" id="join-menu" aria-label="Other ways to approve">
+        <button type="button" class="ws-menu-item" role="menuitem">Approve and post now</button>
+        <button type="button" class="ws-menu-item" role="menuitem">Approve and schedule</button>
+      </div>
+    </div>
+  </div>
+
   <div class="ws-stack">
     <span class="ws-muted">Words that act: link (goes somewhere) and text (acts in place), 24 px targets on touch</span>
     <p class="ws-body">Two leads came in overnight. <button type="button" class="ws-btn ws-btn--link">See them on the board</button></p>

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

@@ -76,6 +76,27 @@
 .ws-btn-split { display: flex; flex-wrap: wrap; gap: var(--space-xs); width: 100%; }
 .ws-btn-split > .ws-btn { flex: 1 1 var(--space-8xl); min-width: fit-content; }
 
+/* An act with a menu of its other forms (#22): the act and a caret joined into one shape, the caret opening a Menu of
+   the same act done another way ("Approve and post now", "Approve and schedule"). Not ws-btn-split (two different acts
+   side by side). The inner corners go square; a hairline in the words' colour at 35 % parts the halves, inset 6 from the
+   top and bottom (on navy, the white words' line; two outlined halves share one edge instead); the caret is a square of
+   its height with a 16 px chevron (28 at small and medium, 40 large). The pair gives to a press as one: neither half
+   moves alone, so the join never opens. Each half takes its own focus ring. */
+.ws-btn-join { display: inline-flex; flex-shrink: 0; max-width: 100%; }
+.ws-btn-join > .ws-btn { --ws-press: 1; }
+.ws-btn-join > .ws-btn:first-child { min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
+.ws-btn-join > .ws-btn:last-child { --ws-btn-pad: var(--space-xxs-plus); border-start-start-radius: 0; border-end-start-radius: 0; }
+.ws-btn-join > .ws-btn--lg:last-child { --ws-btn-pad: var(--space-sm); }
+@media (pointer: coarse) { .ws-btn-join > .ws-btn:last-child { --ws-btn-pad: var(--space-sm); } }
+.ws-btn-join > .ws-btn:last-child > svg { width: var(--ws-icon); height: var(--ws-icon); }
+.ws-btn-join > .ws-btn + .ws-btn::after { content: ""; position: absolute; inset-block: var(--space-xxs-plus); inset-inline-start: 0; width: var(--ws-hairline); background: currentColor; opacity: 0.35; pointer-events: none; }
+.ws-btn-join > .ws-btn--secondary + .ws-btn--secondary { margin-inline-start: calc(var(--ws-hairline) * -1); }
+.ws-btn-join > .ws-btn--secondary + .ws-btn--secondary::after { content: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-btn-join { transition: scale var(--ws-spring-press-duration) var(--ws-spring-press); }
+  .ws-btn-join:active { scale: var(--ws-press-scale); }
+}
+
 /* LinkPending: a link card or a ButtonLink whose page is on its way. Its 1 px navy edge arrives after a beat (a quick
    answer shows nothing) and breathes until the page answers; it leaves at once. The link holds it (position: relative). */
 .ws-link-pending { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }

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

@@ -0,0 +1,148 @@
+Things on dates: a month (or a week) of days, Monday first, each day holding its items as rows that open, the steps and
+the view switch over it, today ringed; in a narrow column the same markup reads as an agenda.
+
+## Use it when
+
+- Work is laid out by day and the day is the point: scheduled posts, campaign tasks, touches, sends, events.
+- A person moves through time (this month, the next, back to today) and opens an item from the day it falls on.
+
+## Not for
+
+- Choosing one day or a range: use `DateInput`.
+- Whether a day happened (a streak of logged activity): use `StreakCalendar`.
+- A plan's phases and tasks with their start and end: use `PlanTimeline`.
+- One thing's dated milestones: use `Stepper --milestones`. What happened, in order: use `Timeline`.
+
+## Anatomy
+
+- The bar (`__bar`): the period's name (`ws-section`, "November 2026", "Nov 9 to 15, 2026") on the left; at the right
+  the steps (`__steps`: a 28 px previous `IconButton`, a small secondary `Button` "Today", a 28 px next) and the view
+  switch (`Segmented`, "Month" and "Week"). It wraps on a narrow column, the switch under the title.
+- The key (`__key`, optional): what each tone means, a mark (`__item-mark` with the item's tone class) and its words in
+  the meta words, on fixed 160 px columns so a wrapped key keeps shared edges; the lit period's swatch is `__key-lit`.
+- The weekday names (`__weekdays`): once over the grid, 11 / 13 medium muted, centred over their days, `aria-hidden`.
+- The days (`__days`, an `ol`): seven equal columns, the days abutting on 0.5 px lines (`--ws-edge-card`), 4 px corners
+  outside. A day (`__day`): at least 120 tall, 4 inside; its head (`__day-head`) centres the number (`__date`, a
+  `time`): 24 px round, 12 / 16 medium navy, figures tabular. A day outside the month (`--outside`): its number muted.
+- Today: `aria-current="date"` on its `time`, a 1 px ring and the number in the salmon's AA step (`--ws-word-needs`,
+  semibold), as `DateInput`'s today is.
+- A lit day (`--lit`): a day inside the period the view is about (the launch week, the phase in hand), one quiet tint
+  (`--ws-tint-accent`), named in the key.
+- The items (`__items`, a `ul`): rows 2 apart. An item (`__item`, a link or a button with a `title`): 24 tall, 6 inside,
+  4 px corners, on the sunk cream; a 6 px dot in its tone, 6 before its words, 12 / 16 navy, one line, whole in its
+  `title`. A milestone (`--milestone`): the dot a diamond, the words medium.
+- More (`__more`, a `ws-btn ws-btn--text`): "2 more" under the third item, opening the day (a popover or the week).
+- An empty day in the week view: `__empty`, "Nothing due" in the meta words.
+
+## Variants and sizes
+
+| Variant | Class | What changes |
+| --- | --- | --- |
+| Month | `ws-calendar` | Six weeks of seven days; three items a day, then "N more" |
+| Week | `ws-calendar--week` | One row of seven days at least 200 tall; every item shown |
+| Agenda | (automatic, under 40rem of its own width) | A row a day that holds something (and today): the weekday and number in a 40 px column, the items beside; outside days and empty days hidden, the weekday names and the tint gone |
+
+| Tone | Class | Mark |
+| --- | --- | --- |
+| First (default) | `__item` | navy (`--color-text-heading`) |
+| Second | `__item--2` | teal (`--ws-chart-finished`) |
+| Third | `__item--3` | purple (`--ws-chart-past-half`) |
+| Waits on the person | `__item--needs` | salmon (`--ws-chart-under-half`) |
+| A milestone | `__item--milestone` | a diamond in the item's tone |
+
+A tone token passed as `--tone` on an item wins over its class (a fourth category, a palette's own). The tones follow
+the palette: never a hex.
+
+## States
+
+- **Today**: ringed in every view; in the agenda it stays even with nothing on it.
+- **Hover** (an item that opens): North's wash over the sunk cream, stronger on press; never a lift.
+- **Focus**: the house ring, drawn inside the item so a day's edge never cuts it.
+- **Loading**: the grid drawn, a `ws-skeleton ws-skeleton--line` or two in each day where items will land.
+- **Empty**: a month with nothing in it is still a grid; say why in one line under the bar ("Nothing scheduled in
+  November"). A view with no data at all is an `EmptyState` in the card instead.
+- **Touch**: an item is 40 tall (a boxed control, K10); the steps' icon buttons keep a 40 px hit area.
+- **Dark and the navy ground**: from the tokens; the lines, the sunk cream and the tint all turn.
+
+## Behaviour
+
+- No script in the kit: the app renders the days and items and wires the steps, "Today", the switch and "N more".
+- Keyboard: items are links or buttons in document order, day after day; the steps and the switch are buttons. The
+  title carries `aria-live="polite"`, so a step reads the new period aloud.
+- Screen reader: the days are an ordered list named for the period (`aria-label="November 2026"`); each day's number
+  carries its full date in a `ws-sr` span ("Tuesday, November 10"), the weekday names are `aria-hidden`.
+- The agenda is a container query on the calendar's own width (`container: ws-calendar / inline-size`), so a calendar
+  in a side panel on a wide screen becomes an agenda too.
+
+## Content
+
+- The period in the title: "November 2026", "Nov 9 to 15, 2026". Weekday names short ("Mon").
+- An item's words are what happens, in the app's own words ("Email 2: the how-to", "Webinar: the new portal"), never
+  its id or a status code; a gate or a launch is a milestone.
+- "N more", never "+N" or "...".
+- No em dashes.
+
+## Props
+
+| Name | Type | Meaning |
+| --- | --- | --- |
+| `view` | `"month" \| "week"` | Which grid |
+| `days` | `{ date, outside?, lit?, items: { id, label, tone?, milestone?, href? }[] }[]` | The days in order, Monday first; 42 for a month, 7 for a week |
+| `today` | `string` | `YYYY-MM-DD`, ringed |
+| `perDay` | `number` | Items shown in a month day before "N more" (3) |
+| `onStep` | `(direction: -1 \| 1 \| 0) => void` | Previous, next, or back to today |
+| `onView` | `(view) => void` | The switch |
+
+## Rules
+
+- **Monday first**, seven equal columns, every week the same height in a month.
+- **Today is the one salmon mark**: its ring and number in the needs step. An item that waits on the person may take the
+  needs tone; nothing else is salmon.
+- **Items are words**: never a block of colour with no label, never a hue on the day itself beyond the one lit period.
+- **A month shows three items a day**, then "N more"; the week shows them all.
+- **Hover is a tint**; nothing lifts, nothing grows.
+
+## Source
+
+- **Derived from**: `DateInput`'s month grid (Monday first, today's ring in the needs step), `StreakCalendar`'s
+  weekday letters, the house item and wash rules, Seth's 0.5 px lines.
+- **Precedent**: 0.5.3 (Nov 2026), from the field: three Marketing OS screens (campaign tasks, the content calendar and
+  the touch calendar) laid out work on a hand-built month and week grid for want of one (issue #23).
+
+## Markup
+
+```html
+<section class="ws-card ws-card--inset ws-calendar" aria-labelledby="cal-title">
+  <div class="ws-calendar__bar">
+    <h3 class="ws-section ws-calendar__title" id="cal-title" aria-live="polite">November 2026</h3>
+    <div class="ws-calendar__steps">
+      <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Previous month"><svg>...</svg></button>
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Today</button>
+      <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Next month"><svg>...</svg></button>
+    </div>
+    <div class="ws-segmented" role="group" aria-label="Calendar view">
+      <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
+      <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
+    </div>
+  </div>
+  <div class="ws-calendar__weekdays" aria-hidden="true"><span>Mon</span><!-- Tue to Sun --></div>
+  <ol class="ws-calendar__days" aria-label="November 2026">
+    <li class="ws-calendar__day ws-calendar__day--outside">
+      <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-10-26"><span class="ws-sr">Monday, October </span>26</time></div>
+    </li>
+    <li class="ws-calendar__day">
+      <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-10" aria-current="date"><span class="ws-sr">Tuesday, November </span>10</time></div>
+      <ul class="ws-calendar__items">
+        <li><a class="ws-calendar__item ws-calendar__item--needs" href="#" title="Walk Stephen through the demo"><span>Walk Stephen through the demo</span></a></li>
+        <li><a class="ws-calendar__item ws-calendar__item--milestone" href="#" title="Gate 2: copy signed off"><span>Gate 2: copy signed off</span></a></li>
+      </ul>
+      <button type="button" class="ws-btn ws-btn--text ws-calendar__more">2 more</button>
+    </li>
+  </ol>
+</section>
+```
+
+## Styles
+
+`design-system/components/Calendar/style.css`, in `bundle.css` and `fello.css` as `.ws-calendar`. Every value is a
+token; the tones follow the palette. The agenda is a container query (`ws-calendar`, under 40rem).