@multiplatform.one/forms 7.6.3 → 7.7.1

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Checkbox } from "../fields/Checkbox";
 import { Input } from "../fields/Input";
@@ -254,6 +255,56 @@ describe("ContextualSaveBar", () => {
     expect(discard.getAttribute("aria-disabled")).toBeNull();
     expect(discard.getAttribute("data-mp-cancel-disabled-ignored")).toBe("true");
   });
+
+  it("CONTAINER-CAP on the top pair only; bottom pair pinned 0 (bottom-docked sheet)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <Form formOptions={{ defaultValues: { name: "x" } }}>
+          <Input name="name" label="Name" />
+          <ContextualSaveBar forceVisible />
+        </Form>
+      </Preset>,
+    );
+    const bar = savebar(result.container);
+    expect(bar).toBeTruthy();
+    expect(bar?.getAttribute("data-mp-savebar-radius-class")).toBe("CONTAINER-CAP");
+    expect(bar?.getAttribute("data-mp-savebar-dock")).toBe("bottom");
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("18");
+    expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
+    const cls = String(bar?.className ?? "");
+    expect(cls).not.toMatch(/t-radius-12/);
+    const cs = bar ? getComputedStyle(bar) : null;
+    expect(cs?.borderBottomLeftRadius === "0px" || cs?.borderBottomLeftRadius === "0").toBe(true);
+    expect(cs?.borderBottomRightRadius === "0px" || cs?.borderBottomRightRadius === "0").toBe(true);
+  });
+
+  it("large under space=small caps the top pair at pad 13; bottoms stay 0", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "large", space: "small" }}>
+        <Form formOptions={{ defaultValues: { name: "x" } }}>
+          <Input name="name" label="Name" />
+          <ContextualSaveBar forceVisible />
+        </Form>
+      </Preset>,
+    );
+    const bar = savebar(result.container);
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("13");
+    expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
+  });
+
+  it("none squares the top pair; bottoms stay 0", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Form formOptions={{ defaultValues: { name: "x" } }}>
+          <Input name="name" label="Name" />
+          <ContextualSaveBar forceVisible />
+        </Form>
+      </Preset>,
+    );
+    const bar = savebar(result.container);
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("$0");
+    expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
+  });
 });
 
 describe("clientKnownIdentity (LC-64)", () => {

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -8,15 +8,32 @@ import { Switch } from "../fields/Switch";
 import { Form } from "../Form";
 import { ContextualSaveBar } from "./index";
 
+const fields = (
+  <YStack gap="$4" width="100%" maxWidth={640} padding="$4" minHeight={360}>
+    <Input name="name" label="Service name" />
+    <Checkbox name="agree" label="Notify on deploy" />
+    <RadioGroup
+      name="env"
+      label="Environment"
+      options={[
+        { label: "Prod", value: "prod" },
+        { label: "Stage", value: "stage" },
+      ]}
+    />
+    <Switch name="live" label="Live" />
+  </YStack>
+);
+
 const meta: Meta<typeof ContextualSaveBar> = {
   title: "Forms/ContextualSaveBar",
   component: ContextualSaveBar,
   parameters: {
-    status: { type: "beta" },
+    layout: "fullscreen",
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Declarative dirty-state Save/Discard bar (DG-ACT-06). Text, checkbox, and radio stage; Switch auto-commits and never raises the bar. Discard is never disabled (LC-30).",
+          "Declarative dirty-state Save/Discard bar (DG-ACT-06). Text, checkbox, and radio stage; Switch auto-commits and never raises the bar. Discard is never disabled (LC-30). Frame is CONTAINER-CAP on the top pair only; bottom pair stays 0 (bottom-docked sheet).",
       },
     },
   },
@@ -29,7 +46,11 @@ export const Main: Story = {
   name: "Main",
   render: () => (
     <Form
-      saveBar={{ onSaved: action("onSaved"), onAutoCommit: action("onAutoCommit") }}
+      saveBar={{
+        forceVisible: true,
+        onSaved: action("onSaved"),
+        onAutoCommit: action("onAutoCommit"),
+      }}
       formOptions={{
         defaultValues: {
           name: "svc",
@@ -42,31 +63,29 @@ export const Main: Story = {
         action("onSubmit")(values);
       }}
     >
-      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
-        <Input name="name" label="Service name" />
-        <Checkbox name="agree" label="Notify on deploy" />
-        <RadioGroup
-          name="env"
-          label="Environment"
-          options={[
-            { label: "Prod", value: "prod" },
-            { label: "Stage", value: "stage" },
-          ]}
-        />
-        <Switch name="live" label="Live" />
-      </YStack>
+      {fields}
     </Form>
   ),
 };
 
-export const ForceVisible: Story = {
-  name: "Force visible",
+export const Dirty: Story = {
+  name: "Dirty",
   render: () => (
-    <Form formOptions={{ defaultValues: { name: "svc" } }}>
-      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
-        <Input name="name" label="Service name" />
-        <ContextualSaveBar forceVisible />
-      </YStack>
+    <Form
+      saveBar={{ onSaved: action("onSaved"), onAutoCommit: action("onAutoCommit") }}
+      formOptions={{
+        defaultValues: {
+          name: "svc",
+          agree: false,
+          env: "prod",
+          live: false,
+        },
+      }}
+      onSubmit={async (values) => {
+        action("onSubmit")(values);
+      }}
+    >
+      {fields}
     </Form>
   ),
 };

package/src/ContextualSaveBar/UnsavedChangesDialog.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * UnsavedChangesDialog — the route-leave confirm (DG-OVL-02), MPO-143.
+ *
+ * ContextualSaveBar.spec.tsx reaches this dialog through the save bar, which
+ * proves the wiring but never exercises the dialog's own contract: the two
+ * copy branches, which button calls which callback, and the guard that stops an
+ * outside click from dismissing a destructive confirm. Those are the parts a
+ * refactor of the save bar would carry away without noticing.
+ */
+import { cleanup, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+
+afterEach(cleanup);
+
+function dialog(): HTMLElement | null {
+  return document.body.querySelector('[role="alertdialog"]');
+}
+
+function button(marker: string): HTMLElement {
+  const node = document.body.querySelector(`[${marker}]`);
+  if (!node) throw new Error(`No button carrying ${marker}`);
+  return node as HTMLElement;
+}
+
+function noop() {}
+
+/** Tamagui paints through atomic classes; read the inline channel first. */
+function cssOf(node: HTMLElement, prop: string): string {
+  const inline = node.style.getPropertyValue(prop);
+  if (inline) return inline;
+  return getComputedStyle(node).getPropertyValue(prop) || "";
+}
+
+describe("UnsavedChangesDialog", () => {
+  it("renders nothing while closed", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open={false} fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()).toBeNull();
+  });
+
+  it("announces as an alertdialog, not a plain dialog, because the choice is destructive", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()).toBeTruthy();
+    expect(document.body.querySelector('[role="dialog"][data-mp-savebar-guard]')).toBeNull();
+  });
+
+  it("leads with the question, so the title carries the decision", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.textContent).toContain("Discard unsaved changes?");
+  });
+
+  it("uses the singular sentence for exactly one edited field", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={1} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const text = dialog()?.textContent ?? "";
+    expect(text).toContain("1 field on this page has edits");
+    expect(text).not.toContain("fields on this page have");
+  });
+
+  it("uses the plural sentence, with the count interpolated, for more than one", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={4} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const text = dialog()?.textContent ?? "";
+    expect(text).toContain("4 fields on this page have edits");
+    expect(text).not.toContain("1 field on this page has");
+  });
+
+  it("says plainly that leaving discards the edits", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.textContent).toContain("Leaving discards them");
+  });
+
+  it("offers both a way back and a way out", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(button("data-mp-savebar-keep").textContent).toContain("Keep editing");
+    expect(button("data-mp-savebar-discard-confirm").textContent).toContain("Discard changes");
+  });
+
+  it("calls onKeepEditing, and only that, when the safe button is pressed", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.click(button("data-mp-savebar-keep"));
+    expect(onKeepEditing).toHaveBeenCalledTimes(1);
+    expect(onDiscard).not.toHaveBeenCalled();
+  });
+
+  it("calls onDiscard, and only that, when the destructive button is pressed", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.click(button("data-mp-savebar-discard-confirm"));
+    expect(onDiscard).toHaveBeenCalledTimes(1);
+    expect(onKeepEditing).not.toHaveBeenCalled();
+  });
+
+  it("treats any dismissal as keep-editing, never as a silent discard", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.keyDown(dialog() as HTMLElement, { key: "Escape", code: "Escape" });
+    expect(onDiscard).not.toHaveBeenCalled();
+  });
+
+  it("marks the content so the save bar's outside-click guard can find it", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.hasAttribute("data-mp-savebar-guard")).toBe(true);
+  });
+
+  it("takes focus itself rather than leaving it behind the overlay", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("paints no focus outline on the sheet itself, so the ring stays on the buttons", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const outline = cssOf(dialog() as HTMLElement, "outline-width");
+    expect(outline === "" || outline === "0px").toBe(true);
+  });
+
+  it("caps its width so the sentence never runs the width of a desk monitor", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(cssOf(dialog() as HTMLElement, "max-width")).toBe("440px");
+  });
+});

package/src/ContextualSaveBar/UnsavedChangesDialog.stories.tsx

@@ -0,0 +1,118 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { Button } from "../Button";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+
+const meta: Meta<typeof UnsavedChangesDialog> = {
+  title: "Forms/ContextualSaveBar/UnsavedChangesDialog",
+  component: UnsavedChangesDialog,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The route-leave confirm ContextualSaveBar raises (DG-OVL-02) when a navigation would throw away edits. It is an `alertdialog`, it cannot be dismissed by clicking the scrim, and the destructive choice is the one on the right — so nobody discards work by reflex. It lives in forms rather than components because ConfirmDialog would import the forms Button and cycle.",
+      },
+    },
+  },
+  argTypes: {
+    open: { control: "boolean" },
+    fieldCount: { control: { type: "number", min: 0, step: 1 } },
+  },
+  args: {
+    open: true,
+    fieldCount: 3,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UnsavedChangesDialog>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <UnsavedChangesDialog
+      {...args}
+      onKeepEditing={action("onKeepEditing")}
+      onDiscard={action("onDiscard")}
+    />
+  ),
+};
+
+/**
+ * The body pluralises: one field reads "1 field ... has edits", more than one
+ * reads "N fields ... have edits". Getting this wrong is the tell that a count
+ * was interpolated into a fixed string.
+ */
+export const SingleField: Story = {
+  render: () => (
+    <UnsavedChangesDialog
+      open
+      fieldCount={1}
+      onKeepEditing={action("onKeepEditing")}
+      onDiscard={action("onDiscard")}
+    />
+  ),
+};
+
+export const ManyFields: Story = {
+  render: () => (
+    <UnsavedChangesDialog
+      open
+      fieldCount={14}
+      onKeepEditing={action("onKeepEditing")}
+      onDiscard={action("onDiscard")}
+    />
+  ),
+};
+
+/** Closed is a real state: it renders no scrim and nothing takes focus. */
+export const Closed: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={420}>
+      <Paragraph size="$3">Nothing should paint below this line.</Paragraph>
+      <UnsavedChangesDialog
+        open={false}
+        fieldCount={3}
+        onKeepEditing={action("onKeepEditing")}
+        onDiscard={action("onDiscard")}
+      />
+    </YStack>
+  ),
+};
+
+/**
+ * The live loop. "Keep editing" is the safe path and is also what Escape and
+ * `onOpenChange(false)` resolve to; "Discard changes" is the only way to lose
+ * the edits, and it is the destructive-styled button.
+ */
+export const Interactive: Story = {
+  render: () => {
+    const Example = () => {
+      const [open, setOpen] = useState(false);
+      const [outcome, setOutcome] = useState<string>("nothing yet");
+      return (
+        <YStack gap="$4" maxWidth={420} alignItems="flex-start">
+          <Button onPress={() => setOpen(true)}>Leave the page</Button>
+          <Paragraph size="$3">last outcome: {outcome}</Paragraph>
+          <UnsavedChangesDialog
+            open={open}
+            fieldCount={3}
+            onKeepEditing={() => {
+              setOpen(false);
+              setOutcome("kept editing");
+              action("onKeepEditing")();
+            }}
+            onDiscard={() => {
+              setOpen(false);
+              setOutcome("discarded");
+              action("onDiscard")();
+            }}
+          />
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};

package/src/ContextualSaveBar/index.tsx

@@ -120,6 +120,14 @@ function barRadius(knobProps: KnobProps) {
   };
 }
 
+function containerRadiusRest(knobProps: KnobProps) {
+  const fragment = knobProps.containerRadius as KnobProps["containerRadius"] & {
+    className?: string;
+  };
+  const { className, borderRadius: _topPair, ...rest } = fragment;
+  return { className, rest };
+}
+
 export function ContextualSaveBar({
   forceVisible = false,
   discardDisabled = false,
@@ -211,10 +219,8 @@ export function ContextualSaveBar({
   const padX = knobProps.panelPadding.padding;
   const borderWidth = knobProps.borderRadius.borderWidth;
   const elevationProps = getElevationWrapperProps(knobProps, elevation);
-  const { className: smoothClass, ...smoothRest } =
-    knobProps.containerRadius as KnobProps["containerRadius"] & {
-      className?: string;
-    };
+  const { className: smoothClass, rest: smoothRest } = containerRadiusRest(knobProps);
+  const topRadius = knobProps.containerRadius.borderRadius;
   const transition = knobProps.transition;
 
   return (
@@ -225,6 +231,9 @@ export function ContextualSaveBar({
             key="contextual-savebar"
             data-mp-contextual-savebar=""
             data-mp-savebar-dock="bottom"
+            data-mp-savebar-radius-class="CONTAINER-CAP"
+            data-mp-savebar-top-radius={String(topRadius)}
+            data-mp-savebar-bottom-radius="0"
             role="region"
             aria-label={t("Unsaved changes")}
             position="sticky"
@@ -243,13 +252,13 @@ export function ContextualSaveBar({
             borderRightWidth={0}
             borderBottomWidth={0}
             {...smoothRest}
-            {...barRadius(knobProps)}
             className={smoothClass}
             {...knobProps.gap}
             transition={transition}
             enterStyle={transition ? { y: 12, opacity: 0 } : undefined}
             exitStyle={transition ? { y: 12, opacity: 0 } : undefined}
             {...elevationProps}
+            {...barRadius(knobProps)}
             style={{
               ...(isWeb
                 ? { paddingBottom: "calc(10px + env(safe-area-inset-bottom, 0px))" }

package/src/ContextualSaveBar/unsavedChangesDialogStories.spec.tsx

@@ -0,0 +1,79 @@
+/**
+ * Mounts every Forms/ContextualSaveBar/UnsavedChangesDialog story and asserts
+ * what it exists to show — chiefly the copy pluralisation and that the safe
+ * choice, not the destructive one, is what a dismissal resolves to.
+ *
+ * Only one open dialog per test: Dialog.Portal mounts to the document body, so
+ * two open at once make every text query ambiguous.
+ */
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import * as storiesModule from "./UnsavedChangesDialog.stories";
+
+afterEach(cleanup);
+
+const meta = storiesModule.default;
+const { Basic, SingleField, ManyFields, Closed, Interactive } = storiesModule;
+
+type StoryLike = { render?: (args: Record<string, unknown>) => ReactElement };
+
+function mount(story: StoryLike) {
+  if (!story.render) throw new Error("story has no render");
+  return renderWithProviders(story.render({ ...(meta.args as Record<string, unknown>) }));
+}
+
+describe("Forms/ContextualSaveBar/UnsavedChangesDialog stories", () => {
+  it("nests under ContextualSaveBar so the gallery keeps it with the bar that raises it", () => {
+    expect(meta.title).toBe("Forms/ContextualSaveBar/UnsavedChangesDialog");
+  });
+
+  it("Basic opens an alertdialog with both choices", () => {
+    mount(Basic as StoryLike);
+    expect(screen.getByText("Discard unsaved changes?")).toBeTruthy();
+    expect(screen.getByText("Keep editing")).toBeTruthy();
+    expect(screen.getByText("Discard changes")).toBeTruthy();
+    expect(document.querySelector("[role='alertdialog']")).toBeTruthy();
+  });
+
+  it("SingleField uses the singular sentence", () => {
+    mount(SingleField as StoryLike);
+    expect(
+      screen.getByText("1 field on this page has edits that aren't saved. Leaving discards them."),
+    ).toBeTruthy();
+  });
+
+  it("ManyFields uses the plural sentence with the count interpolated", () => {
+    mount(ManyFields as StoryLike);
+    expect(
+      screen.getByText(
+        "14 fields on this page have edits that aren't saved. Leaving discards them.",
+      ),
+    ).toBeTruthy();
+  });
+
+  it("Closed paints no dialog at all", () => {
+    const { getByText } = mount(Closed as StoryLike);
+    expect(getByText("Nothing should paint below this line.")).toBeTruthy();
+    expect(document.querySelector("[role='alertdialog']")).toBeNull();
+    expect(screen.queryByText("Discard unsaved changes?")).toBeNull();
+  });
+
+  it("Interactive opens on the trigger and closes on Keep editing", () => {
+    const { getByText } = mount(Interactive as StoryLike);
+    expect(screen.queryByText("Discard unsaved changes?")).toBeNull();
+    fireEvent.click(getByText("Leave the page"));
+    expect(screen.getByText("Discard unsaved changes?")).toBeTruthy();
+    fireEvent.click(screen.getByText("Keep editing"));
+    expect(getByText("last outcome: kept editing")).toBeTruthy();
+  });
+
+  it("Interactive records a discard as a distinct outcome from keeping", () => {
+    const { getByText } = mount(Interactive as StoryLike);
+    fireEvent.click(getByText("Leave the page"));
+    fireEvent.click(screen.getByText("Discard changes"));
+    expect(getByText("last outcome: discarded")).toBeTruthy();
+  });
+});

package/src/DescriptionList/DescriptionList.spec.tsx

@@ -138,7 +138,9 @@ describe("DescriptionList", () => {
     });
     const root = list(result.container);
     expect(root?.getAttribute("data-stacked")).toBe("false");
-    expect(root?.style.gridTemplateColumns).toContain("min(max-content, 24ch)");
+    expect(root?.getAttribute("data-label-column-width")).toBe("min(max-content, 24ch)");
+    expect(root?.style.gridTemplateColumns).toContain("fit-content(24ch)");
+    expect(root?.style.gridTemplateColumns).toContain("minmax(0, 1fr)");
   });
 
   it("the optional Change action is a keyboard-reachable button", () => {
@@ -251,4 +253,20 @@ describe("DescriptionList", () => {
     );
     expect(list(result.container)?.getAttribute("data-compact")).toBe("true");
   });
+
+  it("side rows share the list stacked flag (native host measures via onLayout)", () => {
+    stubContainerWidth(280);
+    let result!: ReturnType<typeof renderWithProviders>;
+    act(() => {
+      result = renderWithProviders(
+        <DescriptionList
+          placement="side"
+          items={[{ term: "Hostname", field: "input", value: "compose01" }]}
+        />,
+      );
+    });
+    const root = list(result.container);
+    expect(root?.getAttribute("data-stacked")).toBe("true");
+    expect(root?.querySelectorAll("[data-mpo-description-list-row]").length).toBe(1);
+  });
 });

package/src/DescriptionList/DescriptionList.stories.tsx

@@ -7,7 +7,7 @@ import { DescriptionList, type DescriptionListItem } from "./index";
 const meta: Meta<typeof DescriptionList> = {
   title: "Forms/DescriptionList",
   component: DescriptionList,
-  parameters: { status: { type: "beta" } },
+  parameters: { status: { type: "stable" } },
   argTypes: {
     placement: { control: "radio", options: ["side", "top"] },
     compact: { control: "boolean" },
@@ -67,6 +67,10 @@ const HOST: DescriptionListItem[] = [
   { term: "Decommissioned", field: "input", value: null },
 ];
 
+export const Default: Story = {
+  render: (args) => <DescriptionList {...args} items={HOST} />,
+};
+
 export const Anatomy: Story = {
   name: "Anatomy — term · value · Change",
   render: (args) => <DescriptionList {...args} items={HOST} />,