@charcuterie/ui 4.5.0 → 4.6.0

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`

package/src/Stepper/Stepper.mdx

@@ -12,7 +12,7 @@ Docket asked for this. Its phases — *"these 3 cards have to be done in order"*
 hand-rolled numbered rail with a connector drawn in a `::before`, and a `ProgressBar` per
 phase for the count. Neither says which things go together.
 
-<Canvas of={StepperStories.Default} />
+<Canvas of={StepperStories.Playground} />
 
 ## Props
 

package/src/Stepper/Stepper.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"
 import { Button } from "../Button/Button.tsx"
@@ -54,7 +55,9 @@ type Story = StoryObj<typeof meta>
  * as an empty box in the one position where an empty box reads as
  * an error.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 export const AllVariants: Story = {
   render: (stepperProps) => (

package/src/Stepper/Stepper.test.tsx

@@ -9,13 +9,13 @@ import * as stories from "./Stepper.stories.tsx"
 const {
   AllStates,
   CompactCard,
-  Default,
+  Playground,
   Interactive,
   Responsive,
 } = composeStories(stories)
 
 test("the sequence is an ordered list with a name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // A `<ol>`, not a stack of divs: the ORDER is the meaning, and a
   // screen reader announcing "list, 3 items" is what carries it.
@@ -28,7 +28,7 @@ test("the sequence is an ordered list with a name", async () => {
 })
 
 test("each step is a heading at the level the caller asked for", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   await expect(
     canvas.getByRole("heading", { level: 3, name: /Rip/ }),
@@ -60,7 +60,7 @@ test("every status is a word, not only a colour", async () => {
 })
 
 test("the marker is the ordinal, so it renders in a font with no tick glyph", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // Not `✓`. `docs/decisions/2026-07-29-ship-no-icons-and-no-symbol-
   // glyphs.md` — a glyph the font lacks paints as an empty box, and
@@ -75,7 +75,7 @@ test("the marker is the ordinal, so it renders in a font with no tick glyph", as
  * all — a pseudo-element has nothing to count.
  */
 test("the last step draws no connector", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const connectors = canvas
     .getAllByRole("listitem")
@@ -88,7 +88,7 @@ test("the last step draws no connector", async () => {
 })
 
 test("each step carries its key into the DOM, so a re-order can animate", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // React's `key` never reaches the markup. Without this attribute
   // a caller who re-orders `steps` has no way to say which `<li>`
@@ -124,7 +124,7 @@ test("advancing moves which step is current", async () => {
 })
 
 test("no axe violations, in either orientation", async () => {
-  const vertical = await mountStory(Default)
+  const vertical = await mountStory(Playground)
 
   await expectNoAxeViolations(vertical.canvasElement)
 

package/src/Swatch/Swatch.mdx

@@ -10,7 +10,7 @@ A colour presented **as content**, with a name attached. It is the one colour th
 system does not own: the red sticker on a game controller, the accent castkit pulls off an
 album, a user's tag colour. Not a token — a value from data.
 
-<Canvas of={SwatchStories.Default} />
+<Canvas of={SwatchStories.Playground} />
 
 ## Props
 

package/src/Swatch/Swatch.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -44,7 +45,9 @@ type Story = StoryObj<typeof meta>
  * because a colour a screen reader cannot see needs a name it can
  * read.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * `solid` fills; `outline` keeps the hue and drops the fill. The

package/src/Swatch/Swatch.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Swatch.stories.tsx"
 
-const { Default, InAList } = composeStories(stories)
+const { Playground, InAList } = composeStories(stories)
 
 test("a colour is findable by the name a screen reader can read", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // The whole contract: a `background-color` is nothing to an agent
   // or a screen reader, so the swatch is an `img` with a name.
@@ -44,7 +44,7 @@ test("the name survives with no visible label", async () => {
 })
 
 test("solid rings its fill; the ring is what keeps white visible", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const dot = canvas.getByRole("img", {
     name: "Red",

package/src/Switch/Switch.mdx

@@ -15,7 +15,7 @@ immediately — "automatic imports on". ARIA gives the second its own role, and
 reader announces "on/off" for a `switch` where it announces "checked/unchecked" for a
 checkbox.
 
-<Canvas of={SwitchStories.Default} />
+<Canvas of={SwitchStories.Playground} />
 
 ## Props
 

package/src/Switch/Switch.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"
@@ -28,7 +29,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Automatic imports" },
 }
 

package/src/Switch/Switch.test.tsx

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

package/src/Tabs/Tabs.mdx

@@ -13,7 +13,7 @@ fifteen more components.
 
 It did not come out ugly. The composition is two hooks and one decision.
 
-<Canvas of={TabsStories.Default} />
+<Canvas of={TabsStories.Playground} />
 
 ## Props
 

package/src/Tabs/Tabs.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"
@@ -67,7 +68,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Bay 3", tabs: BAY_TABS },
 }