Added Dialog role prop for alertdialog

[ask-bonk]

No errors found. The warnings are pre-existing. Let me provide a summary of the changes made:

Summary

I've implemented support for the role prop on the Dialog component, allowing users to choose between role="dialog" (default) and role="alertdialog" for proper accessibility semantics.

Changes Made

1. Component Library (packages/kumo/src/components/dialog/dialog.tsx):

• Added import for AlertDialog from @base-ui/react/alert-dialog
• Added role variant to KUMO_DIALOG_VARIANTS with dialog and alertdialog options
• Created DialogRoleContext to propagate the role through the compound component tree
• Added role prop to DialogRootProps with comprehensive JSDoc documentation
• Updated all sub-components (DialogRoot, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose) to conditionally use either Base UI Dialog or AlertDialog primitives based on the context value

2. Documentation (packages/kumo-docs-astro/src/pages/components/dialog.astro):

• Added new "Dialog vs Alert Dialog" section with a comparison table explaining when to use each role
• Added explicit role prop documentation in the Dialog.Root API reference section
• Reordered examples to feature the alert dialog pattern prominently

3. Demo Component (packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx):

• Added DialogAlertDemo function demonstrating the role="alertdialog" usage pattern

4. Changeset (.changeset/dialog-role-alertdialog.md):

• Created minor version changeset documenting the new feature

Usage

// Standard dialog (default)
<Dialog.Root>
  <Dialog.Trigger render={(p) => <Button {...p}>Edit</Button>} />
  <Dialog>...</Dialog>
</Dialog.Root>

// Alert dialog for destructive actions
<Dialog.Root role="alertdialog">
  <Dialog.Trigger render={(p) => <Button variant="destructive" {...p}>Delete</Button>} />
  <Dialog>...</Dialog>
</Dialog.Root>

Closes #39

github run

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@154

commit: f55bd27

[github-actions]

Docs Preview

View docs preview

Commit: f55bd27

[github-actions]

Visual Regression Report

9 screenshot(s) with visual changes:

Button / Loading State

5 px (0%) changed

Before	After	Diff

Dialog / Basic Dialog

1,155,111 px (22.04%) changed

Before	After	Diff

Dialog / With Actions

1,155,111 px (22.04%) changed

Before	After	Diff

Dialog / With Select

1,155,043 px (22.04%) changed

Before	After	Diff

Dialog / With Combobox

1,155,111 px (22.04%) changed

Before	After	Diff

Dialog / With Dropdown

1,155,111 px (22.04%) changed

Before	After	Diff

Dialog (Open)

2,634,423 px (19.19%) changed

Before	After	Diff

Select / Loading

0 px (0%) changed

Before	After	Diff

Select (Open)

236 px (0%) changed

Before	After	Diff

13 screenshot(s) unchanged

• Button / Variants
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Select / Basic Usage
• Select / Basic Label and Value
• Select / Placeholder
• Select / Custom Rendering
• Select / Multiple Item
• Select / More Example
• Select / Select
• Select / Select.Option

---

Generated by Kumo Visual Regression