@charcuterie/ui 4.5.0 → 4.5.1

package/src/Card/Card.mdx

@@ -11,7 +11,7 @@ a **landmark**, so `getByRole("region", { name: "Bay 3" })` scopes every query i
 Without that, an agent driving a 16-bay tower sees sixteen identical "Start" buttons and no
 way to say which one it means. The `Interactive` story asserts exactly that.
 
-<Canvas of={CardStories.Default} />
+<Canvas of={CardStories.Playground} />
 
 ## Props
 
@@ -35,6 +35,26 @@ all, deliberately — it has nothing to be named.
 `raised` means *more separated from base*, not *lighter*, which is why light mode's base is
 `#F5F7FA` and its raised is white.
 
+### A card the app names itself
+
+Pass `aria-labelledby` and no `heading` when the app draws its own title row — a name beside
+a count is one line that `heading` cannot express, so mail-sifter's tiles render it and point
+at it. The card keeps that pointer.
+
+> **It has to be a fallback, not a default.** The attribute is written after the caller's
+> props are spread, so the obvious `heading ? headingId : undefined` **overwrites** the call
+> site's pointer rather than leaving it alone. React then drops the attribute, the card's name
+> falls back to its entire subtree, and nothing reports it: the markup is valid, the types are
+> satisfied, and axe is content with a name made of everything. Both of mail-sifter's
+> `role="button"` tiles announced their whole contents — "Recent Mail 6 40 arrived in the last
+> 24 hours, 34 done" for a tile called "Recent Mail".
+
+`heading` still wins where both are given, because the heading is text the reader can see and
+this component renders it. `aria-label` needs no fallback at all — `Card` never writes one, so
+the spread carries the caller's through.
+
+<Canvas of={CardStories.CallerNamed} />
+
 <Canvas of={CardStories.AllVariants} />
 
 ## Container queries, not media queries

package/src/Card/Card.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { toStoryChoice } from "../argTypes.storyHelpers.ts"
@@ -43,7 +44,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     children: (
       <p className="text-content-secondary text-sm">
@@ -296,3 +298,91 @@ export const AccentEdge: Story = {
     </StorySection>
   ),
 }
+
+/**
+ * Ids for the two cells that point at their own text. Written out
+ * rather than generated, because a story is a static demo and the
+ * docs page mounts every cell at once — two cells sharing a
+ * generated id would be a duplicate-id violation nobody could see.
+ */
+const CALLER_HEADING_ID = "card-caller-heading"
+const SHADOWED_HEADING_ID = "card-shadowed-heading"
+
+/**
+ * The card is named by a heading the **app** draws, not by
+ * `heading`.
+ *
+ * mail-sifter's tiles put the name and its count on one row, so they
+ * render the title themselves and pass `aria-labelledby` at the call
+ * site. `Card` writes that attribute after the caller's spread, so
+ * it has to fall back to the caller's pointer: without the fallback
+ * the attribute is overwritten with `undefined`, React drops it, and
+ * the tile's name becomes its whole subtree — "Recent Mail 6 40
+ * arrived in the last 24 hours, 34 done" instead of "Recent Mail".
+ * Nothing reports that: it renders, it typechecks, and axe is happy
+ * with a name made of everything.
+ *
+ * `heading` still wins where it is given, and `aria-label` needs no
+ * fallback at all — the component never writes one, so the spread
+ * carries it through.
+ */
+export const CallerNamed: Story = {
+  args: { children: "Content" },
+  render: () => (
+    <StoryGrid columns={3}>
+      <StoryCell
+        align="stretch"
+        label="the call site's own pointer"
+      >
+        <Card aria-labelledby={CALLER_HEADING_ID}>
+          <div className="flex items-baseline justify-between gap-2">
+            <h2
+              className="font-semibold text-md leading-tight"
+              id={CALLER_HEADING_ID}
+            >
+              Recent Mail
+            </h2>
+
+            <Badge intent="info" size="sm">
+              6
+            </Badge>
+          </div>
+
+          <p className="text-content-secondary text-sm">
+            40 arrived in the last 24 hours, 34 done.
+          </p>
+        </Card>
+      </StoryCell>
+
+      <StoryCell
+        align="stretch"
+        label="a heading beats the pointer"
+      >
+        <Card
+          aria-labelledby={SHADOWED_HEADING_ID}
+          heading="Bay 5"
+        >
+          <p
+            className="text-content-secondary text-sm"
+            id={SHADOWED_HEADING_ID}
+          >
+            Pointed at, and deliberately not the name — the
+            heading is the text the reader can see.
+          </p>
+        </Card>
+      </StoryCell>
+
+      <StoryCell
+        align="stretch"
+        label="an aria-label passes through"
+      >
+        <Card aria-label="Unread mail">
+          <p className="text-content-secondary text-sm">
+            No heading and no pointer, so the card is named
+            by the label the call site set.
+          </p>
+        </Card>
+      </StoryCell>
+    </StoryGrid>
+  ),
+}

package/src/Card/Card.test.tsx

@@ -6,11 +6,16 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Card.stories.tsx"
 
-const { AccentEdge, AllStates, Default, Interactive } =
-  composeStories(stories)
+const {
+  AccentEdge,
+  AllStates,
+  CallerNamed,
+  Playground,
+  Interactive,
+} = composeStories(stories)
 
 test("a heading turns the card into a named landmark", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Bay 3",
@@ -29,6 +34,58 @@ test("a card with no heading is not a landmark", async () => {
   )
 })
 
+/**
+ * The name the call site set is the fallback, and it is the half the
+ * component used to throw away.
+ *
+ * `aria-labelledby` is written after the caller's spread, so the old
+ * `heading ? headingId : undefined` overwrote the caller's pointer
+ * instead of deferring to it. A tile naming itself from a heading it
+ * draws lost its name and picked up its whole subtree — and this is
+ * the only gate that can see it, because the markup is valid, the
+ * types are satisfied, and a card named by everything is still a
+ * card with a name.
+ */
+test("a card with no heading keeps the caller's own name", async () => {
+  const { canvas } = await mountStory(CallerNamed)
+
+  // Exactly "Recent Mail". Were the subtree naming it, this would be
+  // "Recent Mail 6 40 arrived in the last 24 hours, 34 done" and the
+  // query would match nothing.
+  expectAgentDrivable(canvas, {
+    name: "Recent Mail",
+    role: "region",
+  })
+})
+
+/**
+ * The fallback is a fallback, not a swap: a `heading` is text the
+ * reader can see and the component renders it, so it still wins.
+ */
+test("a heading still names the card over the caller's pointer", async () => {
+  const { canvas } = await mountStory(CallerNamed)
+
+  expectAgentDrivable(canvas, {
+    name: "Bay 5",
+    role: "region",
+  })
+})
+
+/**
+ * `aria-label` needs no fallback — the component never writes one,
+ * so the spread carries the caller's through. Asserted anyway, so
+ * that a future "fix" which starts writing `aria-label` here cannot
+ * take the caller's with it the way this one took `aria-labelledby`.
+ */
+test("a caller's aria-label reaches the card untouched", async () => {
+  const { canvas } = await mountStory(CallerNamed)
+
+  expectAgentDrivable(canvas, {
+    name: "Unread mail",
+    role: "region",
+  })
+})
+
 /**
  * Two identical "Start rip" buttons on one page, disambiguated only
  * by the region each sits in.

package/src/Card/Card.tsx

@@ -83,7 +83,10 @@ const PADDING_CLASS: Record<CardPadding, string> = {
  *
  * `aria-labelledby` rather than `aria-label`, because the heading is
  * on screen already and stating the name twice is how the two drift
- * apart.
+ * apart. A card with **no** `heading` keeps the `aria-labelledby`
+ * the call site passed, for the app that draws its own title row
+ * inside the card — the name still points at text on screen, which
+ * is the same rule one level out.
  *
  * **Density is not a prop here.** mux-magic's inventory turned up a
  * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
@@ -94,6 +97,7 @@ const PADDING_CLASS: Record<CardPadding, string> = {
  * a layout fact rather than a density one.
  */
 export const Card = ({
+  "aria-labelledby": ariaLabelledBy,
   accentEdge,
   actions,
   children,
@@ -122,12 +126,30 @@ export const Card = ({
       ? style
       : { ...accentEdgeStyle, ...style }
 
+  // The caller's own pointer is the FALLBACK, not the loser. This
+  // attribute is written *after* the spread, so `undefined` here
+  // does not mean "leave whatever the call site passed": it
+  // overwrites it, React then drops the attribute entirely, and the
+  // card's accessible name falls back to its whole subtree with
+  // nothing failing — not typecheck, not axe, not a render. A
+  // `role="button"` tile in mail-sifter naming itself
+  // `aria-labelledby="recent-tile-heading"` announced as "Recent
+  // Mail 6 40 arrived in the last 24 hours, 34 done".
+  //
+  // `heading` still wins when it is given, because that is the name
+  // the reader can see and this component renders it. Do not
+  // "simplify" this back to a ternary ending in `undefined`.
+  //
+  // `aria-label` needs no equivalent: the component never writes
+  // one, so the spread carries the caller's through untouched.
+  const labelledById = heading ? headingId : ariaLabelledBy
+
   const Heading = `h${headingLevel}` as const
 
   return (
     <section
       {...sectionProps}
-      aria-labelledby={heading ? headingId : undefined}
+      aria-labelledby={labelledById}
       className={toClassName(
         // `@container` here, not on a wrapper, is what lets the
         // header stack at narrow widths *inside a wide viewport* —

package/src/Checkbox/Checkbox.mdx

@@ -16,7 +16,7 @@ Here the box is `bg-surface-sunken`, its border `border-border-strong`, and the
 the kiosk with no per-app override. `BooleanField` becomes a thin wrapper that binds this
 to a `CommandField`.
 
-<Canvas of={CheckboxStories.Default} />
+<Canvas of={CheckboxStories.Playground} />
 
 ## Props
 

package/src/Checkbox/Checkbox.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
@@ -29,7 +30,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Delete originals after import" },
 }
 

package/src/Checkbox/Checkbox.test.tsx

@@ -9,7 +9,7 @@ import * as stories from "./Checkbox.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   Interactive,
   WithDescriptions,
   WithValues,
@@ -17,7 +17,7 @@ const {
 
 test("it is a checkbox a screen reader can name", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const checkbox = expectAgentDrivable(canvas, {
     name: "Delete originals after import",
@@ -151,7 +151,7 @@ test("value names the member, and a group reads back the ticked ones", async ()
 })
 
 test("a box with no value stays out of the way", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // `value` is optional and a lone boolean should omit it. React drops
   // an `undefined` attribute entirely rather than writing an empty
@@ -252,7 +252,7 @@ test("each box owns its own description, and the group owns the group's", async
 })
 
 test("a box with no description writes no aria-describedby", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // The slot is opt-in. React drops an `undefined` attribute rather
   // than writing an empty string, so a box without a hint points at

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx

@@ -12,7 +12,7 @@ the [`useColorScheme`](/) hook to the three defaults from `@charcuterie/logic/br
 [`ColorSchemeToggle`](?path=/docs/components-colorschemetoggle--docs). Drop it in and the app
 follows the OS, remembers the user's choice, and re-themes with zero React re-render.
 
-<Canvas of={ColorSchemeSwitcherStories.Default} />
+<Canvas of={ColorSchemeSwitcherStories.Playground} />
 
 ## Props
 

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.stories.tsx

@@ -3,6 +3,7 @@ import type {
   ColorSchemeResolver,
   ResolvedColorScheme,
 } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useRef, useState } from "react"
 import type { ColorSchemeIcons } from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
@@ -113,6 +114,7 @@ type Story = StoryObj<typeof meta>
  * scoped to the demo panel, which is exactly how a non-browser host
  * (Electron `nativeTheme`) wires it — by replacing those seams.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => <ScopedSwitcherDemo />,
 }

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./ColorSchemeSwitcher.stories.tsx"
 
-const { Default } = composeStories(stories)
+const { Playground } = composeStories(stories)
 
 /**
  * The connected switcher is agent-drivable and cycles like the
@@ -15,7 +15,7 @@ const { Default } = composeStories(stories)
  * reaches the applier: the demo panel's `data-scheme` tracks it.
  */
 test("it renders a named, drivable button", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme/i,
@@ -24,7 +24,7 @@ test("it renders a named, drivable button", async () => {
 })
 
 test("system resolves through the injected resolver to the panel", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const panel = canvasElement.querySelector("[data-scheme]")
 
@@ -33,7 +33,7 @@ test("system resolves through the injected resolver to the panel", async () => {
 })
 
 test("cycling to a concrete mode re-applies the scheme", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const canvas = within(canvasElement)
 
@@ -53,7 +53,7 @@ test("cycling to a concrete mode re-applies the scheme", async () => {
 })
 
 test("the connected switcher forwards the neutral intent by default", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const button = canvasElement.querySelector("button")
 

package/src/ColorSchemeToggle/ColorSchemeToggle.mdx

@@ -16,7 +16,7 @@ That split is deliberate. The browser dependency lives one layer up in
 runs unchanged in any runtime — a plain React app wires `onCycle` to `useState`, an Electron
 or React-Native host wires it to `useColorScheme` with its own resolver.
 
-<Canvas of={ColorSchemeToggleStories.Default} />
+<Canvas of={ColorSchemeToggleStories.Playground} />
 
 ## Props
 

package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx

@@ -1,4 +1,5 @@
 import type { ColorSchemeMode } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -71,7 +72,8 @@ type Story = StoryObj<typeof meta>
  * The accessible name states the current mode and the next one, so
  * it changes as the button cycles — that is what the test asserts.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (toggleProps) => {
     const [mode, setMode] =
       useState<ColorSchemeMode>("system")

package/src/ColorSchemeToggle/ColorSchemeToggle.test.tsx

@@ -10,7 +10,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./ColorSchemeToggle.stories.tsx"
 
-const { AllModes, Default } = composeStories(stories)
+const { AllModes, Playground } = composeStories(stories)
 
 /**
  * The name states the current mode — a screen reader that lands on
@@ -18,7 +18,7 @@ const { AllModes, Default } = composeStories(stories)
  * and an agent can find it.
  */
 test("the toggle is named for its current mode", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme: system/i,
@@ -27,7 +27,7 @@ test("the toggle is named for its current mode", async () => {
 })
 
 test("a press cycles the mode and updates the name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const button = expectAgentDrivable(canvas, {
     name: /colour scheme: system/i,
@@ -53,7 +53,7 @@ test("a press cycles the mode and updates the name", async () => {
 
 test("the icon is hidden from assistive tech; the name carries it", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme/i,
@@ -90,7 +90,7 @@ test("each mode renders its own control", async () => {
  * action on real app chrome.
  */
 test("defaults to the neutral intent, not accent", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const button = canvasElement.querySelector("button")
 

package/src/Combobox/Combobox.mdx

@@ -13,7 +13,7 @@ Use it when the list is long enough to search or filter; reach for
 [`Listbox`](?path=/docs/components-listbox--docs) for a short rich-option list, and the
 native [`Select`](?path=/docs/components-select--docs) for a plain one.
 
-<Canvas of={ComboboxStories.Default} />
+<Canvas of={ComboboxStories.Playground} />
 
 ## Props
 

package/src/Combobox/Combobox.stories.tsx

@@ -1,4 +1,5 @@
 import { useVisibility } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { ControlSize } from "@charcuterie/tokens"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
@@ -150,7 +151,8 @@ const ComboboxHarness = ({
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     isVisible: false,
     onDismiss: () => {},

package/src/Combobox/Combobox.test.tsx

@@ -11,7 +11,7 @@ const {
   AllVariants,
   AttachedInputDrillDown,
   ChosenValueOnOpen,
-  Default,
+  Playground,
   DisabledFirstOption,
   Interactive,
   LongFooter,
@@ -42,7 +42,7 @@ const openMulti = async () => {
 }
 
 const openDefault = async () => {
-  const mounted = await mountStory(Default)
+  const mounted = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(mounted.canvas, {

package/src/CopyButton/CopyButton.mdx

@@ -9,7 +9,7 @@ import * as CopyButtonStories from "./CopyButton.stories";
 **A button that puts a string on the clipboard and says so.** Press it, the label turns to
 `Copied`, and the caller is told whether that is true.
 
-<Canvas of={CopyButtonStories.Default} />
+<Canvas of={CopyButtonStories.Playground} />
 
 ## Props
 

package/src/CopyButton/CopyButton.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { userEvent, within } from "storybook/test"
 
@@ -29,7 +30,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The confirmation, held open. `confirmDuration` is enormous here so

package/src/CopyButton/CopyButton.test.tsx

@@ -16,11 +16,11 @@ import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./CopyButton.stories.tsx"
 import { copyText } from "./copyText.ts"
 
-const { Confirmed, Default, Refused } =
+const { Confirmed, Playground, Refused } =
   composeStories(stories)
 
 test("is a button an agent can find by role and name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const button = expectAgentDrivable(canvas, {
     name: "Copy",
@@ -170,7 +170,7 @@ test("a prevented click copies nothing", async () => {
 })
 
 test("has no axe violations", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expectNoAxeViolations(canvasElement)
 })

package/src/DataTable/DataTable.mdx

@@ -10,7 +10,7 @@ import * as DataTableStories from "./DataTable.stories";
 optional selection column, and the sort *announcement* — the data itself stays the
 consumer's.
 
-<Canvas of={DataTableStories.Default} />
+<Canvas of={DataTableStories.Playground} />
 
 ## Props
 

package/src/DataTable/DataTable.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -266,7 +267,8 @@ type Story = StoryObj<typeof meta>
  * of the split: the component says *which* column is sorted, the
  * consumer says what that means for a priority enum.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <TaskTable
       initialSort={{

package/src/DataTable/DataTable.test.tsx

@@ -11,7 +11,7 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./DataTable.stories.tsx"
 
-const { AllVariants, Default, Interactive, Responsive } =
+const { AllVariants, Playground, Interactive, Responsive } =
   composeStories(stories)
 
 /**
@@ -23,7 +23,7 @@ const { AllVariants, Default, Interactive, Responsive } =
  */
 test("the table is drivable by role and name", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const table = expectAgentDrivable(canvas, {
     name: "Tasks",
@@ -43,7 +43,7 @@ test("the table is drivable by role and name", async () => {
  * cannot be sorted", where `"none"` would say the opposite.
  */
 test("sortable columns announce, unsortable ones stay silent", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const updated = expectAgentDrivable(canvas, {
     name: "Updated",

package/src/DatePicker/DatePicker.mdx

@@ -11,7 +11,7 @@ it. The consumer that shaped it is **Docket** — due dates, scheduled dates, ph
 ranges, and a staleness threshold counted in days
 ([decision](../../../docs/decisions/2026-08-19-a-date-is-a-calendar-date-not-an-instant.md)).
 
-<Canvas of={DatePickerStories.Default} />
+<Canvas of={DatePickerStories.Playground} />
 
 ## Props
 

package/src/DatePicker/DatePicker.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -99,7 +100,8 @@ const DatePickerHarness = ({
  * `19 aug`, `2026-08-19` and a bare `19` all resolve, and the line
  * underneath shows what they resolved to before anything commits.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Due date" },
   render: () => <DatePickerHarness label="Due date" />,
 }