@charcuterie/ui 4.4.0 → 4.5.1

package/src/QueryBuilder/QueryBuilder.mdx

@@ -14,7 +14,7 @@ mail rules (leaf = field/operator/value, combinators AND/OR) and mux-magic's job
 combinator** are fully opaque here — `Combinator` and `Leaf` only ever pass through to the
 consumer's `renderLeaf` and `combinatorOptions`.
 
-<Canvas of={QueryBuilderStories.Default} />
+<Canvas of={QueryBuilderStories.Playground} />
 
 ## Props
 

package/src/QueryBuilder/QueryBuilder.stories.tsx

@@ -1,5 +1,6 @@
 import type { SerializedTree } from "@charcuterie/logic"
 import { createTree, useTree } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -194,7 +195,8 @@ type Story = StoryObj<typeof meta>
  * A flat group of two conditions joined by ALL. Change the combinator,
  * edit a condition, or add another with "+ Add condition".
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <QueryBuilderHarness initialTree={FLAT_TREE} />
   ),

package/src/QueryBuilder/QueryBuilder.test.tsx

@@ -10,13 +10,13 @@ import * as stories from "./QueryBuilder.stories.tsx"
 const {
   AllStates,
   CustomCombinator,
-  Default,
+  Playground,
   Interactive,
 } = composeStories(stories)
 
 test("the root group exposes its combinator as a named 'Match' control", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // One root group, so exactly one combinator picker. It is a
   // `Listbox` trigger, so the control is a button that opens a

package/src/RadioGroup/RadioGroup.mdx

@@ -16,7 +16,7 @@ each option carries a real sentence and an in-line strip would wrap. Choosing be
 is layout, not behaviour, which is why the keyboard model is identical and lives in the same
 two hooks.
 
-<Canvas of={RadioGroupStories.Default} />
+<Canvas of={RadioGroupStories.Playground} />
 
 ## Props
 

package/src/RadioGroup/RadioGroup.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"
@@ -98,7 +99,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { items: NAMING_ITEMS, label: "Naming scheme" },
 }
 

package/src/RadioGroup/RadioGroup.test.tsx

@@ -9,7 +9,7 @@ import * as stories from "./RadioGroup.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   Interactive,
   Responsive,
   Tiles,
@@ -30,7 +30,7 @@ const getOptions = (group: HTMLElement) =>
 
 test("it is a radio group with exactly one option checked", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const group = expectAgentDrivable(canvas, {
     name: "Naming scheme",

package/src/Rail/Rail.mdx

@@ -9,7 +9,7 @@ import * as RailStories from "./Rail.stories";
 A side column — the app's sections, a filter panel, the selected job's detail. `side` places
 it, `landmark` decides what it is, and `label` is required.
 
-<Canvas of={RailStories.Default} />
+<Canvas of={RailStories.Playground} />
 
 ## Props
 

package/src/Rail/Rail.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"
@@ -40,7 +41,8 @@ type Story = StoryObj<typeof meta>
  * name: "Sections" })` is what distinguishes its "Settings" link
  * from the header's "Settings" button.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     label: "Sections",
     landmark: "navigation",

package/src/Rail/Rail.test.tsx

@@ -12,7 +12,7 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./Rail.stories.tsx"
 
-const { AllVariants, Default, Interactive, Responsive } =
+const { AllVariants, Playground, Interactive, Responsive } =
   composeStories(stories)
 
 afterAll(async () => {
@@ -144,7 +144,7 @@ test("the rail scopes its own links away from the header's", async () => {
 })
 
 test("a single start rail is clean under axe", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expectNoAxeViolations(canvasElement)
 })

package/src/RangeSlider/RangeSlider.mdx

@@ -14,7 +14,7 @@ they typed into a `TimecodeInput` beside it. So the shape this is built for is a
 timeline — a bar spanning the whole runtime, two thumbs, and the chosen span painted
 between them.
 
-<Canvas of={RangeSliderStories.Default} />
+<Canvas of={RangeSliderStories.Playground} />
 
 ## Props
 

package/src/RangeSlider/RangeSlider.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -98,7 +99,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     label: "Clip",
     max: 2_700,

package/src/RangeSlider/RangeSlider.test.tsx

@@ -7,8 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./RangeSlider.stories.tsx"
 
-const { AllStates, BesideTheSlider, Default, Interactive } =
-  composeStories(stories)
+const {
+  AllStates,
+  BesideTheSlider,
+  Playground,
+  Interactive,
+} = composeStories(stories)
 
 /** A fraction along the bar, as viewport coordinates. */
 const pointerAt =
@@ -39,7 +43,7 @@ const readThumbStyles = (thumb: Element) => {
 
 test("it is two named sliders inside one named group", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const start = expectAgentDrivable(canvas, {
     name: "Clip start",

package/src/ReorderList/ReorderList.mdx

@@ -8,7 +8,7 @@ import * as ReorderListStories from "./ReorderList.stories";
 
 A vertical list put in a different order — by two buttons, or by dragging a handle.
 
-<Canvas of={ReorderListStories.Default} />
+<Canvas of={ReorderListStories.Playground} />
 
 ## Props
 

package/src/ReorderList/ReorderList.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -133,7 +134,8 @@ type Story = StoryObj<typeof meta>
  * A checklist in the order it will be worked through. Press ↑ or ↓,
  * or press and hold the position and drag it somewhere else.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => <StoryList />,
 }
 

package/src/ReorderList/ReorderList.test.tsx

@@ -10,7 +10,7 @@ import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import * as stories from "./ReorderList.stories.tsx"
 
-const { Default, SingleItem } = composeStories(stories)
+const { Playground, SingleItem } = composeStories(stories)
 
 /**
  * The rows come back in the DOM order the list draws them, which is
@@ -25,7 +25,7 @@ const getRowLabels = (canvas: ReturnType<typeof within>) =>
     .filter((text: string) => text !== "")
 
 test("moves a row later with the button, and says where it went", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   await userEvent.click(
     canvas.getByRole("button", {
@@ -56,7 +56,7 @@ test("moves a row later with the button, and says where it went", async () => {
 })
 
 test("moves a row earlier, and the ends stay disabled", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expect(
     canvas.getByRole("button", {
@@ -93,7 +93,7 @@ test("a one-row list offers no drag handle", async () => {
 })
 
 test("the handle takes the gesture away from the browser's scroll", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const grip = canvas.getAllByTitle("Drag to reorder")[0]
 
@@ -118,7 +118,7 @@ test("the handle takes the gesture away from the browser's scroll", async () =>
  * passes or fails for a reason the component does not have.
  */
 test("drags a row past the one below it", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const grip = canvas.getAllByTitle("Drag to reorder")[0]
 
@@ -159,7 +159,7 @@ test("drags a row past the one below it", async () => {
  * and every stray tap on a row reorders the list.
  */
 test("a press with no movement reorders nothing", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const grip = canvas.getAllByTitle("Drag to reorder")[0]
 
@@ -184,7 +184,7 @@ test("a press with no movement reorders nothing", async () => {
 })
 
 test("has no axe violations", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expectNoAxeViolations(canvasElement)
 })

package/src/RouterLink/UnstyledLink.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"
 
@@ -28,7 +29,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 export const Routed: Story = {
   decorators: [

package/src/RouterLink/UnstyledLink.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./UnstyledLink.stories.tsx"
 
-const { Default, Routed } = composeStories(stories)
+const { Playground, Routed } = composeStories(stories)
 
 test("keeps the caller's paint and works without a router", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
   const link = expectAgentDrivable(canvas, {
     name: "Jobs",
     role: "link",

package/src/SearchInput/SearchInput.mdx

@@ -15,4 +15,4 @@ because the clear button is a primary pointer target rather than a compact toolb
 Use `Field` for a visible label, or pass `aria-label` when the surrounding layout already
 names the search.
 
-<Canvas of={Stories.Default} />
+<Canvas of={Stories.Playground} />

package/src/SearchInput/SearchInput.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -61,7 +62,8 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => <ControlledSearch />,
 }
 

package/src/SegmentedControl/SegmentedControl.mdx

@@ -15,7 +15,7 @@ something without revealing anything had nothing to reuse and hand-rolled its ow
 rip-deck's `ColumnPicker` is that hand-roll
 ([decision](../../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md)).
 
-<Canvas of={SegmentedControlStories.Default} />
+<Canvas of={SegmentedControlStories.Playground} />
 
 ## Props
 

package/src/SegmentedControl/SegmentedControl.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"
@@ -38,7 +39,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { items: COLUMN_ITEMS, label: "Columns" },
 }
 

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./SegmentedControl.stories.tsx"
 
-const { AllStates, Default, FullWidth, Interactive } =
+const { AllStates, Playground, FullWidth, Interactive } =
   composeStories(stories)
 
 /**
@@ -25,7 +25,7 @@ const getOptions = (group: HTMLElement) =>
 
 test("it is a radio group with exactly one option checked", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const group = expectAgentDrivable(canvas, {
     name: "Columns",

package/src/Select/Select.mdx

@@ -37,7 +37,7 @@ that differ only in their Tailwind classes, and **six hand-rolled `role="listbox
 controls**. This component is the first twelve. The other six are a different pattern —
 see below.
 
-<Canvas of={SelectStories.Default} />
+<Canvas of={SelectStories.Playground} />
 
 ## Props
 

package/src/Select/Select.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"
@@ -72,7 +73,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Rip profile", options: PROFILES },
 }
 

package/src/Select/Select.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Select.stories.tsx"
 
-const { AllStates, AllVariants, Default, Sized } =
+const { AllStates, AllVariants, Playground, Sized } =
   composeStories(stories)
 
 test("a select is named, and therefore findable", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // Twelve of the fleet's fourteen native selects have neither a
   // `<label for>` nor an `aria-label`, so this query returns nothing
@@ -26,7 +26,7 @@ test("a select is named, and therefore findable", async () => {
 })
 
 test("choosing reports the value outward", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const select = expectAgentDrivable(canvas, {
     name: "Rip profile",
@@ -64,7 +64,7 @@ test("the initial value seeds the DOM and nothing more", async () => {
 })
 
 test("a disabled option stays announced", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const select = expectAgentDrivable(canvas, {
     name: "Rip profile",

package/src/Shell/Shell.mdx

@@ -23,7 +23,7 @@ The owner's ask, verbatim:
 > "We need a header component. Apps are all doing it differently, and there's no
 > standardized way to do a sticky header + narrow view... A Unified App Shell basically."
 
-<Canvas of={ShellStories.Default} />
+<Canvas of={ShellStories.Playground} />
 
 ## Props
 

package/src/Shell/Shell.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"
@@ -53,7 +54,8 @@ type Story = StoryObj<typeof meta>
  * need. Copy it verbatim; only the contents of `actions` and
  * `Main` differ per app.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (shellProps) => (
     <Shell {...shellProps}>
       <Header

package/src/Shell/Shell.test.tsx

@@ -13,7 +13,7 @@ import {
 import * as stories from "./Shell.stories.tsx"
 
 const {
-  Default,
+  Playground,
   Interactive,
   Responsive,
   Scrollable,
@@ -270,7 +270,7 @@ test("header and main are capped at the same width", async () => {
   await setViewport(DESKTOP)
 
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // The inner rows, not the landmarks: the `<header>` and
   // `<main>` are both full-bleed on purpose, and it is the row

package/src/Skeleton/Skeleton.mdx

@@ -23,7 +23,7 @@ means a screen reader reading three empty bars, and an agent finding a "loading"
 cannot act on.
 
 **The load has to be announced by the region that owns it** — a `Spinner`, or `aria-busy`
-on the container. The `Default` story asserts the skeleton is hidden from assistive
+on the container. The `Playground` story asserts the skeleton is hidden from assistive
 technology, and `Interactive` asserts it contributes no roles at all. Both are assertions
 axe cannot make for you: there is nothing invalid about a visible placeholder.
 

package/src/Skeleton/Skeleton.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -26,7 +27,8 @@ type Story = StoryObj<typeof meta>
  * is hidden from AT entirely — otherwise a screen reader reads three
  * empty bars.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { blockSize: "1.5rem", inlineSize: "12rem" },
 }
 

package/src/Skeleton/Skeleton.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectHiddenFromAgents } from "../testing/index.ts"
 import * as stories from "./Skeleton.stories.tsx"
 
-const { Default, Interactive } = composeStories(stories)
+const { Playground, Interactive } = composeStories(stories)
 
 test("a skeleton is hidden from assistive technology", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const skeleton = canvasElement.querySelector(
     "div[aria-hidden]",

package/src/Slider/Slider.mdx

@@ -13,7 +13,7 @@ could not have a scrubber and the choice was a native range input or a hand-roll
 a single app. `ProgressBar` looks like the answer and is not — it is **output**, it takes
 no input, and `role="progressbar"` tells assistive technology exactly that.
 
-<Canvas of={SliderStories.Default} />
+<Canvas of={SliderStories.Playground} />
 
 ## Props
 

package/src/Slider/Slider.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -76,7 +77,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Volume", value: 40 },
 }
 

package/src/Slider/Slider.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Slider.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, Playground, Interactive } =
   composeStories(stories)
 
 test("it is a slider a screen reader can name and read", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const slider = expectAgentDrivable(canvas, {
     name: "Volume",

package/src/SortableTableHeader/SortableTableHeader.mdx

@@ -11,7 +11,7 @@ explicit about that, and the reason is that sorting *data* is app logic that dif
 column type, while announcing *that* a column is sorted is markup every table gets wrong the
 same way.
 
-<Canvas of={SortableTableHeaderStories.Default} />
+<Canvas of={SortableTableHeaderStories.Playground} />
 
 ## Props
 

package/src/SortableTableHeader/SortableTableHeader.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -40,7 +41,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "Title", direction: "ascending" },
   render: (args) => (
     <table className={TABLE_CLASS}>

package/src/SortableTableHeader/SortableTableHeader.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./SortableTableHeader.stories.tsx"
 
-const { AllVariants, Default, Interactive } =
+const { AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 /**
@@ -19,7 +19,7 @@ const { AllVariants, Default, Interactive } =
  */
 test("the cell announces the sort, not the glyph", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const title = expectAgentDrivable(canvas, {
     name: "Title",
@@ -68,7 +68,7 @@ test("an unsorted sortable column says `none`", async () => {
  * to anything reading the table's structure.
  */
 test("the header is a columnheader containing a button", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const header = expectAgentDrivable(canvas, {
     name: "Title",

package/src/Spinner/Spinner.mdx

@@ -9,7 +9,7 @@ import * as SpinnerStories from "./Spinner.stories";
 **Zero of these exist anywhere in the fleet.** Not one repo has a spinner; every app
 renders bare `"loading…"` text. Best effort-to-payoff component in M3.
 
-<Canvas of={SpinnerStories.Default} />
+<Canvas of={SpinnerStories.Playground} />
 
 ## Props
 

package/src/Spinner/Spinner.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"
@@ -31,7 +32,8 @@ type Story = StoryObj<typeof meta>
  * this beats a rotating `<div>`: the state is announced even though
  * nothing is printed.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {},
 }
 

package/src/Spinner/Spinner.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Spinner.stories.tsx"
 
-const { Default, Interactive } = composeStories(stories)
+const { Playground, Interactive } = composeStories(stories)
 
 test("the hidden label is the accessible name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // A live region takes **no** accessible name from its content, so
   // `Spinner` sets both — text for the announcement, `aria-label`