@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/DropdownMenu/README.md

@@ -0,0 +1,678 @@
+A menu of actions hanging off a trigger — reach for `Select` when the reader is choosing a value for a form, since a menu runs commands rather than holding an answer. Leave the primary action visible as a `Button` and put only the secondary ones in here; past roughly ten items, group them or move them somewhere with room.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean \| undefined` | no | — |  |
+| `default-open` | `boolean \| undefined` | no | — |  |
+| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — |  |
+| `modal` | `boolean \| undefined` | no | — |  |
+| `anchor-point` | `{ x: number; y: number; } \| undefined` | no | — | Virtual anchor point for positioning without a trigger element |
+| `positioning` | `PositioningOptions \| undefined` | no | — | Override default positioning config |
+| `highlighted-value` | `string \| null \| undefined` | no | — | Programmatically control which item is highlighted |
+| `on-highlight-change` | `((details: HighlightChangeDetails) => void) \| undefined` | no | — | Callback when the highlighted item changes (e.g. on mouse hover) |
+| `close-on-select` | `boolean \| undefined` | no | — | Whether selecting an item closes the menu (default true) |
+| `on-request-dismiss` | `((event: LayerDismissEvent) => void) \| undefined` | no | — | Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is removed. Call `event.preventDefault()` to keep the menu open. |
+| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.DropdownMenuCheckboxItem` — `DropdownMenuCheckboxItemProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuContextTrigger` — `DropdownMenuContextTriggerProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuItem` — `DropdownMenuItemProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuRadioGroup` — `DropdownMenuRadioGroupProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuRadioItem` — `DropdownMenuRadioItemProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuTrigger` — `DropdownMenuTriggerProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuTriggerItem` — `DropdownMenuTriggerItemProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuContent` — `DropdownMenuContentProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuFooter` — `DropdownMenuFooterProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuGroup` — `DropdownMenuGroupProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuInput` — `DropdownMenuInputProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuItemContent` — `DropdownMenuItemContentProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuItemDescription` — `DropdownMenuItemDescriptionProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuItemIcon` — `DropdownMenuItemIconProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuItemText` — `DropdownMenuItemTextProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuLabel` — `DropdownMenuLabelProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuSeparator` — `DropdownMenuSeparatorProps` in the declaration bundle.
+- `WallarmDS.DropdownMenuShortcut` — `DropdownMenuShortcutProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The smallest composition — `DropdownMenuTrigger` with `asChild`, so your own `Button`
+becomes the trigger rather than being wrapped in one.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#Basic
+
+### Context
+
+`DropdownMenuContextTrigger` opens the same menu on right-click, and
+`DropdownMenuTriggerItem` nests a submenu inside it. Always leave a left-click route to the same
+actions — a right-click-only affordance is undiscoverable.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#Context
+
+### WithDescriptions
+
+`DropdownMenuItemContent` pairs `DropdownMenuItemText` with
+`DropdownMenuItemDescription` for a second line. Descriptions make a menu tall quickly, which is
+when separators start doing real work.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithDescriptions
+
+### WithIcons
+
+`DropdownMenuItemIcon` sits before the label. Icon every item in a group or none of
+them — a half-iconned list reads as though some items are missing theirs.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithIcons
+
+### WithFooter
+
+`DropdownMenuFooter` bleeds to the panel edge under a divider and renders at secondary
+emphasis, so it suits a persistent link or count rather than an action competing with the items.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithFooter
+
+### WithDescriptionAndIcons
+
+Icons and descriptions together, which is the widest an item gets. Past this the
+menu is doing a panel's job — reach for a `Popover`.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithDescriptionAndIcons
+
+### WithCheckboxItems
+
+`DropdownMenuCheckboxItem` for options that aren't mutually exclusive. Selecting one
+leaves the menu open, so several can be toggled in a single visit.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithCheckboxItems
+
+### WithRadioGroup
+
+`DropdownMenuRadioGroup` for one-of-many. It also stays open on select, so the reader
+sees the indicator move before dismissing it themselves.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithRadioGroup
+
+### WithMixedSelectionItems
+
+Commands, checkboxes and a radio group in one menu. `DropdownMenuLabel` and
+`DropdownMenuSeparator` are what keep the three kinds from reading as one flat list.
+
+Source: DropdownMenu/DropdownMenu.stories.tsx#WithMixedSelectionItems
+
+## Story sources
+
+### DropdownMenu/DropdownMenu.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CirclePlus, Earth, LayoutTemplate, Maximize, Plus } from '../../icons';
+import { Button } from '../Button';
+import { Kbd, KbdGroup } from '../Kbd';
+import { DropdownMenu } from './DropdownMenu';
+import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem';
+import { DropdownMenuContent } from './DropdownMenuContent';
+import { DropdownMenuContextTrigger } from './DropdownMenuContextTrigger';
+import { DropdownMenuFooter } from './DropdownMenuFooter';
+import { DropdownMenuGroup } from './DropdownMenuGroup';
+import { DropdownMenuItem } from './DropdownMenuItem';
+import { DropdownMenuItemContent } from './DropdownMenuItemContent';
+import { DropdownMenuItemDescription } from './DropdownMenuItemDescription';
+import { DropdownMenuItemIcon } from './DropdownMenuItemIcon';
+import { DropdownMenuItemText } from './DropdownMenuItemText';
+import { DropdownMenuLabel } from './DropdownMenuLabel';
+import { DropdownMenuRadioGroup } from './DropdownMenuRadioGroup';
+import { DropdownMenuRadioItem } from './DropdownMenuRadioItem';
+import { DropdownMenuSeparator } from './DropdownMenuSeparator';
+import { DropdownMenuShortcut } from './DropdownMenuShortcut';
+import { DropdownMenuTrigger } from './DropdownMenuTrigger';
+import { DropdownMenuTriggerItem } from './DropdownMenuTriggerItem';
+
+const DESCRIPTION = [
+  'A menu of actions hanging off a trigger — reach for `Select` when the reader is choosing a value for a form, since a menu runs commands rather than holding an answer.',
+  'Leave the primary action visible as a `Button` and put only the secondary ones in here; past roughly ten items, group them or move them somewhere with room.',
+].join(' ');
+
+const meta = {
+  title: 'Actions/DropdownMenu',
+  component: DropdownMenu,
+  subcomponents: {
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuItemContent,
+    DropdownMenuItemDescription,
+    DropdownMenuItemIcon,
+    DropdownMenuItemText,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+    DropdownMenuTriggerItem,
+    DropdownMenuContextTrigger,
+    DropdownMenuFooter,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+/**
+ * The smallest composition — `DropdownMenuTrigger` with `asChild`, so your own `Button`
+ * becomes the trigger rather than being wrapped in one.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <DropdownMenu data-testid='dropdown-menu'>
+    <DropdownMenuTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          Profile
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>P</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Billing
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>B</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Settings
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Keyboard shortcuts super
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem>Team</DropdownMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Message</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>More...</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenuItem>
+          New Team
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>T</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem>GitHub</DropdownMenuItem>
+      <DropdownMenuItem>Support</DropdownMenuItem>
+      <DropdownMenuItem disabled>API</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem variant='destructive'>
+        Log out
+        <DropdownMenuShortcut>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>Q</Kbd>
+          </KbdGroup>
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * `DropdownMenuContextTrigger` opens the same menu on right-click, and
+ * `DropdownMenuTriggerItem` nests a submenu inside it. Always leave a left-click route to the same
+ * actions — a right-click-only affordance is undiscoverable.
+ */
+export const Context: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <DropdownMenuContextTrigger asChild>
+      <div className='flex items-center justify-center w-300 h-192 border border-border-primary border-dashed rounded-8'>
+        Right click here
+      </div>
+    </DropdownMenuContextTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          Profile
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>P</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Billing
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>B</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Settings
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Keyboard shortcuts super
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem>Team</DropdownMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Message</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>More...</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenuItem>
+          New Team
+          <DropdownMenuShortcut>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>T</Kbd>
+            </KbdGroup>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem>GitHub</DropdownMenuItem>
+      <DropdownMenuItem>Support</DropdownMenuItem>
+      <DropdownMenuItem disabled>API</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem variant='destructive'>
+        Log out
+        <DropdownMenuShortcut>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>Q</Kbd>
+          </KbdGroup>
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * `DropdownMenuItemContent` pairs `DropdownMenuItemText` with
+ * `DropdownMenuItemDescription` for a second line. Descriptions make a menu tall quickly, which is
+ * when separators start doing real work.
+ */
+export const WithDescriptions: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <Plus />
+        Add Widget
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+        <DropdownMenuShortcut>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>Q</Kbd>
+          </KbdGroup>
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem variant='brand'>
+        <CirclePlus />
+        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * `DropdownMenuItemIcon` sits before the label. Icon every item in a group or none of
+ * them — a half-iconned list reads as though some items are missing theirs.
+ */
+export const WithIcons: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <Plus />
+        Add Widget
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <LayoutTemplate />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <Maximize />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <Earth />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
+        <DropdownMenuShortcut>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>Q</Kbd>
+          </KbdGroup>
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem variant='brand'>
+        <CirclePlus />
+        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * `DropdownMenuFooter` bleeds to the panel edge under a divider and renders at secondary
+ * emphasis, so it suits a persistent link or count rather than an action competing with the items.
+ */
+export const WithFooter: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem>Profile</DropdownMenuItem>
+      <DropdownMenuItem>Billing</DropdownMenuItem>
+      <DropdownMenuItem>Settings</DropdownMenuItem>
+      <DropdownMenuItem>Notifications</DropdownMenuItem>
+      <DropdownMenuItem>Integrations</DropdownMenuItem>
+      <DropdownMenuItem>Security</DropdownMenuItem>
+      <DropdownMenuItem>API Keys</DropdownMenuItem>
+      <DropdownMenuItem>Webhooks</DropdownMenuItem>
+      <DropdownMenuItem>Audit Log</DropdownMenuItem>
+      <DropdownMenuItem>Team Members</DropdownMenuItem>
+      <DropdownMenuItem>Permissions</DropdownMenuItem>
+      <DropdownMenuItem>Usage</DropdownMenuItem>
+      <DropdownMenuFooter>
+        <span className='flex items-center gap-4'>
+          <KbdGroup>
+            <Kbd>↑</Kbd>
+            <Kbd>↓</Kbd>
+          </KbdGroup>
+          to navigate
+        </span>
+        <span className='flex items-center gap-4'>
+          <KbdGroup>
+            <Kbd>↵</Kbd>
+          </KbdGroup>
+          to select
+        </span>
+      </DropdownMenuFooter>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * Icons and descriptions together, which is the widest an item gets. Past this the
+ * menu is doing a panel's job — reach for a `Popover`.
+ */
+export const WithDescriptionAndIcons: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <Plus />
+        Add Widget
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <LayoutTemplate />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <Maximize />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <DropdownMenuItemIcon>
+          <Earth />
+        </DropdownMenuItemIcon>
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
+          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
+        </DropdownMenuItemContent>
+        <DropdownMenuShortcut>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>Q</Kbd>
+          </KbdGroup>
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem variant='brand'>
+        <CirclePlus />
+        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+/**
+ * `DropdownMenuCheckboxItem` for options that aren't mutually exclusive. Selecting one
+ * leaves the menu open, so several can be toggled in a single visit.
+ */
+export const WithCheckboxItems: StoryFn<typeof meta> = () => {
+  const [bold, setBold] = useState(true);
+  const [italic, setItalic] = useState(false);
+  const [underline, setUnderline] = useState(true);
+
+  return (
+    <DropdownMenu data-testid='dropdown-menu'>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline' color='neutral'>
+          Text style
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Text style</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem checked={bold} onCheckedChange={setBold}>
+          Bold
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={italic} onCheckedChange={setItalic}>
+          Italic
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={underline} onCheckedChange={setUnderline}>
+          Underline
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={false} disabled>
+          Strikethrough
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+/**
+ * `DropdownMenuRadioGroup` for one-of-many. It also stays open on select, so the reader
+ * sees the indicator move before dismissing it themselves.
+ */
+export const WithRadioGroup: StoryFn<typeof meta> = () => {
+  const [view, setView] = useState('list');
+
+  const handleViewChange = (details: { value: string }) => {
+    setView(details.value);
+  };
+
+  return (
+    <DropdownMenu data-testid='dropdown-menu'>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline' color='neutral'>
+          View mode
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>View mode</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={view} onValueChange={handleViewChange}>
+          <DropdownMenuRadioItem value='list'>List</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='grid'>Grid</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='compact' disabled>
+            Compact
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+/**
+ * Commands, checkboxes and a radio group in one menu. `DropdownMenuLabel` and
+ * `DropdownMenuSeparator` are what keep the three kinds from reading as one flat list.
+ */
+export const WithMixedSelectionItems: StoryFn<typeof meta> = () => {
+  const [bold, setBold] = useState(true);
+  const [italic, setItalic] = useState(false);
+  const [view, setView] = useState('list');
+
+  const handleViewChange = (details: { value: string }) => {
+    setView(details.value);
+  };
+
+  return (
+    <DropdownMenu data-testid='dropdown-menu'>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline' color='neutral'>
+          Editor settings
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Text style</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem checked={bold} onCheckedChange={setBold}>
+          Bold
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={italic} onCheckedChange={setItalic}>
+          Italic
+        </DropdownMenuCheckboxItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel>View mode</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={view} onValueChange={handleViewChange}>
+          <DropdownMenuRadioItem value='list'>List</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='grid'>Grid</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem variant='destructive'>Reset to defaults</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+```

package/dist/project/components/DropdownMenu/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Actions" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>