@thewhatmatters/wmds 0.4.9 → 0.4.28

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — link
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — submit / async
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — outline mono
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — primary action
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — row (hug)
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — row
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — secondary action
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — suggestion pills
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — with count
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — with icon
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — vertical actions
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — skip in footer
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — headerless media
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — outlined layout
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — pinned height
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-card-card--terminal-frame.tsx

@@ -0,0 +1,48 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — terminal frame
+// Storybook: Components/Card/Card → Pattern — terminal frame (?path=/story/components-card-card--terminal-frame)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  cardTitleClasses,
+} from "@thewhatmatters/wmds";
+
+const terminalPreview =
+  '<!doctype html><html><body style="margin:0;background:#262626;color:#fafafa;font:14px ui-monospace,monospace;padding:16px">$ scan --target etheris<br>12 findings</body></html>';
+
+export function TerminalFrames() {
+  return (
+    <div className="grid w-full max-w-3xl gap-4">
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Session</h2>} />
+        <Card.Body
+          variant="terminal"
+          title="session.log"
+          srcDoc={terminalPreview}
+          height="sm"
+          readOnly
+        />
+      </Card>
+      </section>
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Loading</h2>} />
+        <Card.Body variant="terminal" title="session.log" height="sm" state="loading" />
+      </Card>
+      </section>
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Offline</h2>} />
+        <Card.Body
+          variant="terminal"
+          title="session.log"
+          height="sm"
+          state="disconnected"
+          message="Session disconnected"
+        />
+      </Card>
+      </section>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — selectable cards
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-carousel--image-carousel.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — image carousel
+// @thewhatmatters/wmds@0.4.28 · Pattern — image carousel
 // Storybook: Components/Carousel → Pattern — image carousel (?path=/story/components-carousel--image-carousel)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — matrix heatmap
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — Cartesian no-data gaps
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — occupancy history in Card
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — occupancy KPI in Card
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — distribution strip
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — ranked audience breakdown
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-chart--revenue-by-line.tsx

@@ -0,0 +1,68 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — revenue by line
+// Storybook: Components/Chart → Pattern — revenue by line (?path=/story/components-chart--revenue-by-line)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  Chart,
+  Stat,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardTitleClasses,
+  chartSeriesConfigFromTone,
+  type ChartCartesianPoint,
+} from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromTone("revenue", "Revenue", "primary");
+
+const data: ChartCartesianPoint[] = [
+  { date: new Date(2026, 0, 1), revenue: 18420 },
+  { date: new Date(2026, 1, 1), revenue: 22100 },
+  { date: new Date(2026, 2, 1), revenue: 19840 },
+  { date: new Date(2026, 3, 1), revenue: 24610 },
+  { date: new Date(2026, 4, 1), revenue: 27330 },
+  { date: new Date(2026, 5, 1), revenue: 26150 },
+];
+
+export function RevenueByLine() {
+  return (
+    <div className="flex w-full max-w-5xl flex-col gap-6">
+      <section>
+        <Card>
+        <Card.Header start={<h2 className={cardTitleClasses}>Revenue by line</h2>} />
+        <Card.Body>
+          <div
+            className={`grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_16rem] ${cardLayoutBodyOccupantPadYClasses} ${cardLayoutBodyOccupantWellClasses} ${cardLayoutBodyOccupantInsetXClasses}`}
+          >
+            <Chart.Cartesian
+              data={data}
+              config={config}
+              seriesKeys={["revenue"]}
+              periodKind="month"
+              minHeight={220}
+              animate="none"
+              aria-label="Revenue by month"
+            />
+            <div className="grid grid-cols-2 gap-4 lg:grid-cols-1">
+              <Stat label="Subscriptions" value="$42,180" trend={{ value: "+12%", direction: "up" }} />
+              <Stat label="Services" value="$18,640" trend={{ value: "-3%", direction: "down" }} />
+              <Stat label="Licenses" value="$9,210" trend={{ value: "0%", direction: "neutral" }} />
+            </div>
+          </div>
+        </Card.Body>
+        </Card>
+      </section>
+      <section>
+        <Card>
+        <Card.Header start={<h2 className={cardTitleClasses}>Revenue by line</h2>} />
+        <Card.Body>
+          <p className="type-body text-muted px-4 py-6" role="status">
+            Revenue by line is not wired
+          </p>
+        </Card.Body>
+        </Card>
+      </section>
+    </div>
+  );
+}

package/docs/patterns/components-chart--segmented-ring-pattern.tsx

@@ -0,0 +1,144 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — segmented ring
+// Storybook: Components/Chart → Pattern — segmented ring (?path=/story/components-chart--segmented-ring-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Card, Chart, cardLayoutBodyOccupantInsetXClasses, cardLayoutBodyOccupantPadYClasses, cardTitleClasses, chartSeriesColor, type ChartSeriesConfig } from "@thewhatmatters/wmds";
+
+const channelLegend: ChartSeriesConfig = {
+  widget: {
+    label: "Chat widget",
+    color: chartSeriesColor(0),
+    value: "1,569",
+    percent: "46%",
+    delta: { label: "+8%", direction: "up" },
+  },
+  email: {
+    label: "Email",
+    color: chartSeriesColor(1),
+    value: "921",
+    percent: "27%",
+    delta: { label: "-3%", direction: "down" },
+  },
+  whatsapp: {
+    label: "WhatsApp",
+    color: chartSeriesColor(2),
+    value: "580",
+    percent: "17%",
+    delta: { label: "+21%", direction: "up" },
+  },
+  slack: {
+    label: "Slack Connect",
+    color: chartSeriesColor(3),
+    value: "342",
+    percent: "10%",
+    delta: { label: "+2%", direction: "up" },
+  },
+};
+
+const ringWellClasses = [
+  "flex w-full flex-col items-center gap-6",
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantInsetXClasses,
+].join(" ");
+
+export function SegmentedRingExamples() {
+  return (
+    <div className="grid w-full gap-6 lg:grid-cols-2">
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Channels</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={2842}
+              max={3412}
+              tone="primary"
+              size="lg"
+              centerValue="3,412"
+              centerLabel="conversations"
+              label="3,412 conversations"
+              animate="none"
+            />
+            <Chart.Legend variant="tabular" config={channelLegend} className="w-full" />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Weekly goals</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={38}
+              max={100}
+              tone="primary"
+              size="md"
+              centerValue="38%"
+              centerLabel="of weekly goals"
+              label="Weekly goals 38%"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Over capacity</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={128}
+              max={100}
+              tone="primary"
+              size="md"
+              centerValue="128%"
+              centerLabel="of goal"
+              label="Goal 128%"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Empty</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={0}
+              max={3412}
+              tone="primary"
+              size="md"
+              centerValue="0"
+              centerLabel="conversations"
+              label="0 conversations"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Not connected</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={0}
+              max={100}
+              tone="primary"
+              size="md"
+              unavailable={{ reason: "Source is not connected" }}
+              label="Conversations"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+    </div>
+  );
+}

package/docs/patterns/components-chart--unit-grid-composition.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — 100-unit composition
+// @thewhatmatters/wmds@0.4.28 · Pattern — 100-unit composition
 // Storybook: Components/Chart → Pattern — 100-unit composition (?path=/story/components-chart--unit-grid-composition)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatdock--pattern-chat-dock.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — chat dock
+// @thewhatmatters/wmds@0.4.28 · Pattern — chat dock
 // Storybook: Components/ChatDock → Pattern — chat dock (?path=/story/components-chatdock--pattern-chat-dock)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — start a project gate
+// @thewhatmatters/wmds@0.4.28 · Pattern — start a project gate
 // Storybook: Components/ChatDock → Pattern — start a project gate (?path=/story/components-chatdock--pattern-start-project-gate)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — Q&A with reply
+// @thewhatmatters/wmds@0.4.28 · Pattern — Q&A with reply
 // Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — default
+// @thewhatmatters/wmds@0.4.28 · Pattern — default
 // Storybook: Components/Checkbox/Checkbox → Pattern — default (?path=/story/components-checkbox-checkbox--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — with count
+// @thewhatmatters/wmds@0.4.28 · Pattern — with count
 // Storybook: Components/Checkbox/Checkbox → Pattern — with count (?path=/story/components-checkbox-checkbox--with-count)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--with-description.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — with description
+// @thewhatmatters/wmds@0.4.28 · Pattern — with description
 // Storybook: Components/Checkbox/Checkbox → Pattern — with description (?path=/story/components-checkbox-checkbox--with-description)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkboxgroup--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — default
+// @thewhatmatters/wmds@0.4.28 · Pattern — default
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — default (?path=/story/components-checkbox-checkboxgroup--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — option counts
+// @thewhatmatters/wmds@0.4.28 · Pattern — option counts
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — option counts (?path=/story/components-checkbox-checkboxgroup--option-counts)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-copyfield--clipboard-blocked.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — clipboard blocked
+// Storybook: Components/CopyField → Pattern — clipboard blocked (?path=/story/components-copyfield--clipboard-blocked)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKeyBlocked({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} state="fallback" />;
+}

package/docs/patterns/components-copyfield--copied.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — copied
+// Storybook: Components/CopyField → Pattern — copied (?path=/story/components-copyfield--copied)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKeyCopied({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} state="copied" />;
+}

package/docs/patterns/components-copyfield--copy-key.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — copy key
+// Storybook: Components/CopyField → Pattern — copy key (?path=/story/components-copyfield--copy-key)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKey({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} />;
+}

package/docs/patterns/components-copyfield--on-navy.tsx

@@ -0,0 +1,29 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — on a navy field
+// Storybook: Components/CopyField → Pattern — on a navy field (?path=/story/components-copyfield--on-navy)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockOnBrand({
+  apiKey,
+  onContinue,
+  onSecondary,
+}: {
+  apiKey: string;
+  onContinue: () => void;
+  onSecondary: () => void;
+}) {
+  return (
+    <section className="flex w-full flex-col gap-4 bg-brand px-6 py-8 text-on-brand">
+      <CopyField label="API key" value={apiKey} />
+      <div className="flex flex-wrap gap-2">
+        <Button role="inverse" type="button" onClick={onContinue}>
+          Continue
+        </Button>
+        <Button role="inverse-outline" type="button" onClick={onSecondary}>
+          Back
+        </Button>
+      </div>
+    </section>
+  );
+}

package/docs/patterns/components-descriptionlist--details.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — details
+// @thewhatmatters/wmds@0.4.28 · Pattern — details
 // Storybook: Components/DescriptionList → Pattern — details (?path=/story/components-descriptionlist--details)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-descriptionlist--post-metadata.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — post metadata
+// @thewhatmatters/wmds@0.4.28 · Pattern — post metadata
 // Storybook: Components/DescriptionList → Pattern — post metadata (?path=/story/components-descriptionlist--post-metadata)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-dialog--alert-dialog-destructive.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — alert dialog (destructive)
+// @thewhatmatters/wmds@0.4.28 · Pattern — alert dialog (destructive)
 // Storybook: Components/Dialog → Pattern — alert dialog (destructive) (?path=/story/components-dialog--alert-dialog-destructive)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.