@thewhatmatters/wmds 0.2.0

package/docs/patterns/components-avatar--dropdown-row.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — dropdown row
+// Storybook: Components/Avatar → Pattern — dropdown row (?path=/story/components-avatar--dropdown-row)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Avatar, Dropdown } from "@thewhatmatters/wmds";
+
+export function AssigneeMenu() {
+  return (
+    <Dropdown.Menu role="listbox" aria-label="Assignee">
+      <li role="presentation">
+        <Dropdown.Item
+          role="option"
+          start={<Avatar name="Drew Young" size="sm" presence={{ tone: "success", label: "Online" }} />}
+        >
+          Drew Young
+        </Dropdown.Item>
+      </li>
+    </Dropdown.Menu>
+  );
+}

package/docs/patterns/components-badge--with-avatar.tsx

@@ -0,0 +1,28 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — with avatar
+// Storybook: Components/Badge → Pattern — with avatar (?path=/story/components-badge--with-avatar)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Badge } from "@thewhatmatters/wmds";
+
+export function BadgeWithAvatar() {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge
+        variant="info"
+        size="sm"
+        emphasis="muted"
+        avatar={{ src: "/hero-badges/globe.svg", alt: "Illustrated globe" }}
+      >
+        online
+      </Badge>
+      <Badge
+        variant="info"
+        size="md"
+        emphasis="muted"
+        avatar={{ src: "/hero-badges/eye.svg", alt: "Illustrated eye" }}
+      >
+        impossible to ignore
+      </Badge>
+    </div>
+  );
+}

package/docs/patterns/components-button-button--destructive-action.tsx

@@ -0,0 +1,7 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — destructive action
+// Storybook: Components/Button/Button → Pattern — destructive action (?path=/story/components-button-button--destructive-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="destructive">Delete account</Button>

package/docs/patterns/components-button-button--ghost-action.tsx

@@ -0,0 +1,7 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — ghost action
+// Storybook: Components/Button/Button → Pattern — ghost action (?path=/story/components-button-button--ghost-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="ghost">Learn more</Button>

package/docs/patterns/components-button-button--inverse-action.tsx

@@ -0,0 +1,7 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — inverse action
+// Storybook: Components/Button/Button → Pattern — inverse action (?path=/story/components-button-button--inverse-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="inverse" size="lg">Start a project</Button>

package/docs/patterns/components-button-button--link-render.tsx

@@ -0,0 +1,14 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — link
+// Storybook: Components/Button/Button → Pattern — link (?path=/story/components-button-button--link-render)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+export function HeaderLinks() {
+  return (
+    <>
+      <Button role="ghost" size="sm" render={<a href="/docs" />}>Docs</Button>
+      <Button size="sm" render={<a href="/signup" />}>Get started</Button>
+    </>
+  );
+}

package/docs/patterns/components-button-button--multi-state-badge.tsx

@@ -0,0 +1,16 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — submit / async
+// Storybook: Components/Button/Button → Pattern — submit / async (?path=/story/components-button-button--multi-state-badge)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, getNextButtonStatus, type ButtonStatus } from "@thewhatmatters/wmds";
+
+export function SubmitForm() {
+  const [status, setStatus] = useState<ButtonStatus>("idle");
+
+  return (
+    <Button status={status} onClick={() => setStatus(getNextButtonStatus(status))}>
+      Submit
+    </Button>
+  );
+}

package/docs/patterns/components-button-button--outline-mono.tsx

@@ -0,0 +1,10 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — outline mono
+// Storybook: Components/Button/Button → Pattern — outline mono (?path=/story/components-button-button--outline-mono)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { ArrowRight } from "lucide-react";
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="outline" size="sm" mono endIcon={<ArrowRight />}>
+  See our work
+</Button>

package/docs/patterns/components-button-button--primary-action.tsx

@@ -0,0 +1,7 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — primary action
+// Storybook: Components/Button/Button → Pattern — primary action (?path=/story/components-button-button--primary-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="primary">Save changes</Button>

package/docs/patterns/components-button-button--row-hug.tsx

@@ -0,0 +1,15 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — row (hug)
+// Storybook: Components/Button/Button → Pattern — row (hug) (?path=/story/components-button-button--row-hug)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { ChevronDown } from "lucide-react";
+import { Button } from "@thewhatmatters/wmds";
+
+export function ThoughtToggle({ open, onToggle }: { open: boolean; onToggle: () => void }) {
+  return (
+    <Button role="ghost" layout="row" width="hug" type="button" aria-expanded={open} onClick={onToggle}>
+      <span>Thought for 4s</span>
+      <ChevronDown className="size-4 stroke-current" strokeWidth={2} aria-hidden />
+    </Button>
+  );
+}

package/docs/patterns/components-button-button--row-layout.tsx

@@ -0,0 +1,14 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — row
+// Storybook: Components/Button/Button → Pattern — row (?path=/story/components-button-button--row-layout)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+export function DueDateRow({ onOpenDatePicker }: { onOpenDatePicker: () => void }) {
+  return (
+    <Button role="ghost" layout="row" type="button" onClick={onOpenDatePicker}>
+      <span>Due date</span>
+      <span>Sep 12</span>
+    </Button>
+  );
+}

package/docs/patterns/components-button-button--secondary-action.tsx

@@ -0,0 +1,7 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — secondary action
+// Storybook: Components/Button/Button → Pattern — secondary action (?path=/story/components-button-button--secondary-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="secondary">Cancel</Button>

package/docs/patterns/components-button-button--suggestion-pills.tsx

@@ -0,0 +1,17 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — suggestion pills
+// Storybook: Components/Button/Button → Pattern — suggestion pills (?path=/story/components-button-button--suggestion-pills)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+export function FollowUps({ items, onPick }: { items: string[]; onPick: (item: string) => void }) {
+  return (
+    <div className="flex flex-col gap-2">
+      {items.map((item) => (
+        <Button key={item} role="outline" emphasis="quiet" align="start" size="md" type="button" className="w-full" onClick={() => onPick(item)}>
+          {item}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/docs/patterns/components-button-button--with-count.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — with count
+// Storybook: Components/Button/Button → Pattern — with count (?path=/story/components-button-button--with-count)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button } from "@thewhatmatters/wmds";
+
+<Button role="primary" count={3}>
+  Inbox
+</Button>

package/docs/patterns/components-button-button--with-icon.tsx

@@ -0,0 +1,22 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — with icon
+// Storybook: Components/Button/Button → Pattern — with icon (?path=/story/components-button-button--with-icon)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { Button } from "@thewhatmatters/wmds";
+
+export function ItemActions() {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button role="primary" icon={<Plus strokeWidth={2} />}>
+        New item
+      </Button>
+      <Button role="secondary" icon={<Pencil strokeWidth={2} />}>
+        Edit
+      </Button>
+      <Button role="destructive" icon={<Trash2 strokeWidth={2} />}>
+        Delete
+      </Button>
+    </div>
+  );
+}

package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx

@@ -0,0 +1,22 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — vertical actions
+// Storybook: Components/Button/FloatingActionButton → Pattern — vertical actions (?path=/story/components-button-floatingactionbutton--vertical-actions)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Camera, FileText, ImageIcon, Pencil } from "lucide-react";
+import { FloatingActionButton } from "@thewhatmatters/wmds";
+
+export function QuickActions({ onAction }: { onAction: (id: string) => void }) {
+  return (
+    <FloatingActionButton
+      className="fixed bottom-4 right-4"
+      backdrop
+      items={[
+        { id: "camera", label: "Camera", icon: <Camera /> },
+        { id: "image", label: "Image", icon: <ImageIcon /> },
+        { id: "file", label: "File", icon: <FileText /> },
+        { id: "edit", label: "Edit", icon: <Pencil /> },
+      ]}
+      onAction={onAction}
+    />
+  );
+}

package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx

@@ -0,0 +1,25 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — skip in footer
+// Storybook: Components/CalEmbed → Pattern — skip in footer (?path=/story/components-calembed--pattern-skip-in-footer)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, CalEmbed, Card } from "@thewhatmatters/wmds";
+
+export function BookACall() {
+  return (
+    <Card padding="none" variant="surface">
+      <Card.Body>
+        <CalEmbed skip={false}>
+          <Button role="primary" type="button">
+            Confirm this time
+          </Button>
+        </CalEmbed>
+      </Card.Body>
+      <Card.Footer>
+        <CalEmbed.Skip onSkip={() => undefined} />
+        <Button role="secondary" type="button">
+          Cancel
+        </Button>
+      </Card.Footer>
+    </Card>
+  );
+}

package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx

@@ -0,0 +1,44 @@
+// @thewhatmatters/wmds@0.2.0 · Example — body slot (occupancy history)
+// Storybook: Components/Card/Card → Example — body slot (occupancy history) (?path=/story/components-card-card--body-slot-occupancy-history)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  Chart,
+  Select,
+  chartSeriesConfigFromKeys,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardTitleClasses,
+  type ChartCartesianPoint,
+  type SelectOption,
+} from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromKeys([
+  { key: "occupied", label: "Occupied units" },
+  { key: "available", label: "Available units" },
+]);
+
+export function OccupancyHistoryCard({
+  data,
+  periodOptions,
+}: {
+  data: ChartCartesianPoint[];
+  periodOptions: SelectOption[];
+}) {
+  return (
+    <Card shape="rounded" className="max-w-lg">
+      <Card.Header
+        start={<h2 className={cardTitleClasses}>Occupancy history</h2>}
+        end={<Select aria-label="Reporting period" size="sm" options={periodOptions} defaultValue="month" className="w-36" />}
+      />
+      <Card.Body>
+        <div className={`flex flex-col gap-3 ${cardLayoutBodyOccupantPadYClasses} ${cardLayoutBodyOccupantWellClasses} ${cardLayoutBodyOccupantInsetXClasses}`}>
+          <Chart.Cartesian data={data} config={config} periodKind="month" minHeight={220} />
+          <Chart.Legend config={config} />
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}

package/docs/patterns/components-card-card--headerless-media.tsx

@@ -0,0 +1,23 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — headerless media
+// Storybook: Components/Card/Card → Pattern — headerless media (?path=/story/components-card-card--headerless-media)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  cardBodyTextClasses,
+  cardLayoutBodyOccupantRadiusClasses,
+} from "@thewhatmatters/wmds";
+
+<Card variant="outlined" shape="rounded">
+  <Card.Body>
+    <img
+      className={`aspect-[4/3] w-full object-cover ${cardLayoutBodyOccupantRadiusClasses}`}
+      src="https://images.unsplash.com/photo-1556911220-bff31c812dba?auto=format&fit=crop&w=900&q=80"
+      alt="Bright kitchen with a coastal dining table"
+    />
+  </Card.Body>
+  <Card.Footer>
+    <span className={cardBodyTextClasses}>3.9K likes</span>
+    <span className={`${cardBodyTextClasses} text-muted`}>182 comments</span>
+  </Card.Footer>
+</Card>

package/docs/patterns/components-card-card--outlined-layout.tsx

@@ -0,0 +1,16 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — outlined layout
+// Storybook: Components/Card/Card → Pattern — outlined layout (?path=/story/components-card-card--outlined-layout)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Card, cardTitleClasses } from "@thewhatmatters/wmds";
+
+<Card variant="outlined" shape="rounded" className="max-w-lg">
+  <Card.Header
+    start={<h2 className={cardTitleClasses}>Audience fit</h2>}
+  />
+  <Card.Body>
+    <div className="min-h-32 px-3.5 py-4">
+      Card body occupant
+    </div>
+  </Card.Body>
+</Card>

package/docs/patterns/components-card-card--pinned-height.tsx

@@ -0,0 +1,39 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — pinned height
+// Storybook: Components/Card/Card → Pattern — pinned height (?path=/story/components-card-card--pinned-height)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Button,
+  Card,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardSubtitleClasses,
+  cardTitleClasses,
+} from "@thewhatmatters/wmds";
+
+<Card shape="rounded" padding="none" variant="surface" className="h-[280px] max-w-lg">
+  <Card.Header
+    start={
+      <>
+        <h2 className={cardTitleClasses}>About you</h2>
+        <p className={cardSubtitleClasses}>A few sentences is enough.</p>
+      </>
+    }
+  />
+  <Card.Body>
+    <div className={cardLayoutBodyOccupantWellClasses + " " + cardLayoutBodyOccupantInsetXClasses + " flex flex-col gap-3 py-3"}>
+      <p>Name</p>
+      <p>Email</p>
+      <p>Company</p>
+      <p>Project details that run longer than the pinned shell.</p>
+      <p>Extra lines stay in the body scrollport.</p>
+      <p>Header and footer do not move.</p>
+    </div>
+  </Card.Body>
+  <Card.Footer>
+    <div className="ml-auto flex items-center gap-2">
+      <Button role="secondary" size="md" type="button">Cancel</Button>
+      <Button role="primary" size="md" type="button">Next</Button>
+    </div>
+  </Card.Footer>
+</Card>

package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx

@@ -0,0 +1,48 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — selectable cards
+// Storybook: Components/Card/SelectableCard → Pattern — selectable cards (?path=/story/components-card-selectablecard--selectable-cards-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { SegmentedControl, SelectableCard } from "@thewhatmatters/wmds";
+
+const options = [
+  { value: "brand", title: "Brand identity", description: "Name, mark, and a system you can actually use." },
+  { value: "website", title: "Website", description: "A site that explains the work and earns the next conversation." },
+  { value: "product", title: "Product design", description: "Flows, screens, and the details in between." },
+  { value: "marketing", title: "Marketing site", description: "A campaign page with one clear ask." },
+  { value: "system", title: "Design system", description: "Components, tokens, and the rules that keep them honest." },
+  { value: "other", title: "Other", description: "Something that does not fit the list yet." },
+];
+
+export function WhatYouNeed() {
+  const [mode, setMode] = useState("fresh");
+  const [values, setValues] = useState(["brand"]);
+
+  return (
+    <SelectableCard.Group
+      label="What do you need?"
+      values={values}
+      onValuesChange={setValues}
+      toggle={
+        <SegmentedControl
+          aria-label="Project starting point"
+          layout="hug"
+          value={mode}
+          onValueChange={setMode}
+        >
+          <SegmentedControl.Item value="fresh">Starting fresh</SegmentedControl.Item>
+          <SegmentedControl.Item value="refresh">Refreshing what I have</SegmentedControl.Item>
+        </SegmentedControl>
+      }
+    >
+      {options.map((option) => (
+        <SelectableCard
+          key={option.value}
+          value={option.value}
+          title={option.title}
+          description={option.description}
+        />
+      ))}
+    </SelectableCard.Group>
+  );
+}

package/docs/patterns/components-chart--audience-activity-heatmap.tsx

@@ -0,0 +1,26 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — matrix heatmap
+// Storybook: Components/Chart → Pattern — matrix heatmap (?path=/story/components-chart--audience-activity-heatmap)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chart, type ChartHeatmapAxisItem, type ChartHeatmapCell } from "@thewhatmatters/wmds";
+
+export function AudienceActivityHeatmap({
+  rows,
+  columns,
+  cells,
+}: {
+  rows: ChartHeatmapAxisItem[];
+  columns: ChartHeatmapAxisItem[];
+  cells: ChartHeatmapCell[];
+}) {
+  return (
+    <Chart.Heatmap
+      aria-label="Illustrative audience activity by day and time"
+      rows={rows}
+      columns={columns}
+      cells={cells}
+      metricLabel="Activity"
+      minHeight={240}
+    />
+  );
+}

package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx

@@ -0,0 +1,25 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — Cartesian no-data gaps
+// Storybook: Components/Chart → Pattern — Cartesian no-data gaps (?path=/story/components-chart--cartesian-no-data-gaps)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chart, chartSeriesConfigFromTone } from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromTone("reach", "Reach", "primary");
+
+const start = new Date(2026, 5, 1);
+const data = Array.from({ length: 30 }, (_, index) => {
+  const date = new Date(start);
+  date.setDate(start.getDate() + index);
+  const offset = index - 10;
+  const reach = index < 10 ? null : Math.round(4150 + Math.sin(offset / 4) * 80 + offset * 6);
+  return { date, reach };
+});
+
+<Chart.Cartesian
+  data={data}
+  config={config}
+  seriesKeys={["reach"]}
+  periodKind="month"
+  noData={{ label: "No data" }}
+  aria-label="Reach over 30 days. Early dates have no data."
+/>

package/docs/patterns/components-chart--occupancy-history-in-card.tsx

@@ -0,0 +1,44 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — occupancy history in Card
+// Storybook: Components/Chart → Pattern — occupancy history in Card (?path=/story/components-chart--occupancy-history-in-card)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  Chart,
+  Select,
+  chartSeriesConfigFromKeys,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardTitleClasses,
+  type ChartCartesianPoint,
+  type SelectOption,
+} from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromKeys([
+  { key: "occupied", label: "Occupied units" },
+  { key: "available", label: "Available units" },
+]);
+
+export function OccupancyHistoryCard({
+  data,
+  periodOptions,
+}: {
+  data: ChartCartesianPoint[];
+  periodOptions: SelectOption[];
+}) {
+  return (
+    <Card shape="rounded" bodyTerminal className="max-w-lg">
+      <Card.Header
+        start={<h2 className={cardTitleClasses}>Occupancy history</h2>}
+        end={<Select aria-label="Reporting period" size="sm" options={periodOptions} defaultValue="month" className="w-36" />}
+      />
+      <Card.Body>
+        <div className={`flex flex-col gap-3 ${cardLayoutBodyOccupantPadYClasses} ${cardLayoutBodyOccupantWellClasses} ${cardLayoutBodyOccupantInsetXClasses}`}>
+          <Chart.Cartesian data={data} config={config} periodKind="month" minHeight={220} animate="initial" />
+          <Chart.Legend config={config} />
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}

package/docs/patterns/components-chart--occupancy-in-card.tsx

@@ -0,0 +1,49 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — occupancy KPI in Card
+// Storybook: Components/Chart → Pattern — occupancy KPI in Card (?path=/story/components-chart--occupancy-in-card)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Card, Chart, Select, chartFormatPercent, chartKpiHeroRowClasses, chartKpiHeroValueClasses, chartKpiTrendLabelClasses, chartKpiTrendRowClasses, chartKpiTrendValueClasses, cardLayoutBodyOccupantInsetXClasses, cardLayoutBodyOccupantPadYClasses, cardLayoutBodyOccupantWellClasses, cardTitleClasses } from "@thewhatmatters/wmds";
+
+const occupied = 144;
+const total = 200;
+const periodOptions = [
+  { value: "week", label: "This week" },
+  { value: "month", label: "This month" },
+  { value: "quarter", label: "This quarter" },
+  { value: "year", label: "This year" },
+];
+
+<Card shape="rounded" className="max-w-lg">
+  <Card.Header
+    start={<h2 className={cardTitleClasses}>Occupancy score</h2>}
+    end={
+      <Select
+        aria-label="Reporting period"
+        size="sm"
+        options={periodOptions}
+        defaultValue="month"
+        className="w-36"
+      />
+    }
+  />
+  <Card.Body>
+    <div className={`flex flex-col gap-2 ${cardLayoutBodyOccupantPadYClasses} ${cardLayoutBodyOccupantWellClasses} ${cardLayoutBodyOccupantInsetXClasses}`}>
+      <div className={chartKpiHeroRowClasses}>
+        <span className={chartKpiHeroValueClasses}>{chartFormatPercent(occupied, total)}</span>
+        <div className={chartKpiTrendRowClasses}>
+          <span className={`${chartKpiTrendValueClasses} text-success`}>+4.2%</span>
+          <span className={chartKpiTrendLabelClasses}>From last month</span>
+        </div>
+      </div>
+      <Chart.Frame>
+        <Chart.SegmentedBar value={occupied} max={total} tone="primary" fill="velocity" animate="initial" />
+      </Chart.Frame>
+    </div>
+  </Card.Body>
+  <Card.Footer>
+    <span className="type-supporting text-muted">Occupied units: {occupied}/{total}</span>
+    <Button role="secondary" size="sm">
+      View breakdown
+    </Button>
+  </Card.Footer>
+</Card>

package/docs/patterns/components-chart--post-reach-distribution.tsx

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — distribution strip
+// Storybook: Components/Chart → Pattern — distribution strip (?path=/story/components-chart--post-reach-distribution)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chart } from "@thewhatmatters/wmds";
+
+export function PostReachDistribution({ posts }: { posts: { id: string; reach: number }[] }) {
+  return (
+    <Chart.DistributionStrip
+      aria-label="Reach distribution for six recent posts"
+      items={posts.map((post, index) => ({
+        id: post.id,
+        label: `#${index + 1}`,
+        value: post.reach,
+      }))}
+      metricLabel="Reach"
+      reference={{ value: 9300, label: "Typical 9.3K" }}
+      minHeight={240}
+    />
+  );
+}

package/docs/patterns/components-chart--ranked-audience-breakdown.tsx

@@ -0,0 +1,16 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — ranked audience breakdown
+// Storybook: Components/Chart → Pattern — ranked audience breakdown (?path=/story/components-chart--ranked-audience-breakdown)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chart } from "@thewhatmatters/wmds";
+
+<Chart.RankedBars
+  aria-label="Top audience countries"
+  items={[
+    { label: "United States", value: 42 },
+    { label: "United Kingdom", value: 18 },
+    { label: "Canada", value: 11 },
+    { label: "Australia", value: 8 },
+  ]}
+  animate="initial"
+/>