feat(layer-dialog): add body separator

.changeset/layer-dialog-separator.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Add a full-width `LayerDialog.Separator` for dividing sections of dialog body content.

packages/kumo-docs-astro/src/components/demos/LayerDialogDemo.tsx

@@ -180,6 +180,34 @@ export function LayerDialogSearchDemo() {
   );
 }
 
+export function LayerDialogSeparatorDemo() {
+  return (
+    <LayerDialog.Root>
+      <LayerDialog.Trigger
+        render={(props) => <Button {...props}>Review deployment</Button>}
+      />
+      <LayerDialog.Content>
+        <LayerDialog.Title>Deployment summary</LayerDialog.Title>
+        <LayerDialog.Description>
+          Review the configuration before deploying.
+        </LayerDialog.Description>
+        <LayerDialog.Body>
+          <Text variant="secondary">
+            production-api will deploy to the global network.
+          </Text>
+          <LayerDialog.Separator />
+          <Text variant="secondary">
+            The deployment uses compatibility date 2026-10-26.
+          </Text>
+        </LayerDialog.Body>
+        <LayerDialog.Actions>
+          <LayerDialog.Action>Deploy</LayerDialog.Action>
+        </LayerDialog.Actions>
+      </LayerDialog.Content>
+    </LayerDialog.Root>
+  );
+}
+
 export function LayerDialogSplitActionDemo() {
   return (
     <div className="flex flex-wrap justify-center gap-3">

packages/kumo-docs-astro/src/pages/components/layer-dialog.mdx

@@ -20,6 +20,7 @@ import {
   LayerDialogNestedDemo,
   LayerDialogPendingDemo,
   LayerDialogSearchDemo,
+  LayerDialogSeparatorDemo,
   LayerDialogSizeDemo,
   LayerDialogSplitActionDemo,
   LayerDialogTopAlignDemo,
@@ -127,6 +128,14 @@ A control can be the first element in `Body`. Here an unlabeled search input sit
 <ComponentExample demo="LayerDialogSearchDemo"><LayerDialogSearchDemo client:load /></ComponentExample>
 </ComponentSection>
 
+<ComponentSection>
+## Dividing body content
+
+Use `LayerDialog.Separator` between sections in `LayerDialog.Body`. The divider extends through the body's horizontal padding to span the full content surface.
+
+<ComponentExample demo="LayerDialogSeparatorDemo"><LayerDialogSeparatorDemo client:load /></ComponentExample>
+</ComponentSection>
+
 <ComponentSection>
 ## Multiple primary actions
 
@@ -278,6 +287,11 @@ Height is derived from content and capped by the viewport. Following Base UI's i
 <p>The scrollable content region.</p>
 <PropsTable component="LayerDialog.Body" />
 
+### LayerDialog.Separator
+
+<p>A full-width divider between sections of body content.</p>
+<PropsTable component="LayerDialog.Separator" />
+
 ### LayerDialog.Actions
 
 <p>

packages/kumo/src/components/layer-dialog/layer-dialog.test.tsx

@@ -29,10 +29,31 @@ describe("LayerDialog", () => {
     expect(LayerDialog.Title).toBeDefined();
     expect(LayerDialog.Description).toBeDefined();
     expect(LayerDialog.Body).toBeDefined();
+    expect(LayerDialog.Separator).toBeDefined();
     expect(LayerDialog.Action).toBeDefined();
     expect(LayerDialog.Actions).toBeDefined();
   });
 
+  it("renders a full-width body separator", () => {
+    const { getByRole } = render(
+      <LayerDialog.Root open>
+        <LayerDialog.Content>
+          <LayerDialog.Title>Sections</LayerDialog.Title>
+          <LayerDialog.Body>
+            <span>First</span>
+            <LayerDialog.Separator />
+            <span>Second</span>
+          </LayerDialog.Body>
+        </LayerDialog.Content>
+      </LayerDialog.Root>,
+    );
+
+    const separator = getByRole("separator");
+    expect(separator.className).toContain("-mx-4");
+    expect(separator.className).toContain("sm:-mx-4.5");
+    expect(separator.className).toContain("bg-kumo-hairline");
+  });
+
   it("uses a larger constrained desktop width by default", () => {
     expect(KUMO_LAYER_DIALOG_DEFAULT_VARIANTS.size).toBe("base");
     expect(KUMO_LAYER_DIALOG_VARIANTS.size.base.classes).toBe("sm:max-w-xl");

packages/kumo/src/components/layer-dialog/layer-dialog.tsx

@@ -1,6 +1,7 @@
 import {
   Children,
   createContext,
+  forwardRef,
   isValidElement,
   useContext,
   useRef,
@@ -490,6 +491,25 @@ function LayerDialogBody({ children }: LayerDialogBodyProps) {
 
 LayerDialogBody.displayName = "LayerDialog.Body";
 
+export type LayerDialogSeparatorProps = ComponentPropsWithoutRef<"hr">;
+
+/** A full-width divider between sections of `LayerDialog.Body`. */
+const LayerDialogSeparator = forwardRef<
+  HTMLHRElement,
+  LayerDialogSeparatorProps
+>(({ className, ...props }, ref) => (
+  <hr
+    ref={ref}
+    className={cn(
+      "-mx-4 my-4 h-px border-0 bg-kumo-hairline sm:-mx-4.5",
+      className,
+    )}
+    {...props}
+  />
+));
+
+LayerDialogSeparator.displayName = "LayerDialog.Separator";
+
 function LayerDialogIconClose({
   disabled,
   label,
@@ -671,6 +691,7 @@ const LayerDialog = Object.assign(LayerDialogRoot, {
   Title: LayerDialogTitle,
   Description: LayerDialogDescription,
   Body: LayerDialogBody,
+  Separator: LayerDialogSeparator,
   Action: LayerDialogAction,
   Actions: LayerDialogActions,
 });
@@ -684,6 +705,7 @@ export {
   LayerDialogTitle,
   LayerDialogDescription,
   LayerDialogBody,
+  LayerDialogSeparator,
   LayerDialogAction,
   LayerDialogActions,
 };