@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/menu.md

@@ -0,0 +1,934 @@
+# Menu
+
+Opens a list of actions from a button.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Menu.tsx)
+
+Figma: [Navigation/Account Menu](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3061) (`Menu.Popup`)
+
+## Overview
+
+Menu renders a button that opens a list of actions and commands. Arrow keys move through the items, and Escape closes the list.
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button, Menu, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  // The gallery canvas stretches its children, so the wrapper keeps the trigger at its own width.
+  return (
+    <div {...styles.row()}>
+      <Menu.Root>
+        <Menu.Trigger render={<Button variant="secondary" />}>Options</Menu.Trigger>
+        <Menu.Popup align="start">
+          <Menu.Item>
+            Edit
+            <Menu.Shortcut>⌘E</Menu.Shortcut>
+          </Menu.Item>
+          <Menu.Item>Duplicate</Menu.Item>
+          <Menu.Separator />
+          <Menu.Item>Archive</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Menu/Basic.tsx)
+
+### Size
+
+Set `size` on `Menu.Popup` to `small`, `medium` (default), or `large`.
+
+```tsx
+import { Button, Menu, style } from '@tempoxyz/ds'
+import { useState } from 'react'
+
+export function Demo() {
+  const [density, setDensity] = useState('comfortable')
+
+  // The gallery canvas stretches its children, so the wrapper keeps each trigger at its own width.
+  return (
+    <div {...styles.row()}>
+      {(['small', 'medium', 'large'] as const).map((size) => (
+        <Menu.Root key={size}>
+          <Menu.Trigger render={<Button size={size} variant="secondary" />}>
+            Options ({size})
+          </Menu.Trigger>
+          <Menu.Popup align="start" size={size}>
+            <Menu.Item>
+              Edit
+              <Menu.Shortcut>⌘E</Menu.Shortcut>
+            </Menu.Item>
+            <Menu.Item disabled>Duplicate</Menu.Item>
+            <Menu.LinkItem href="https://tempo.xyz">Documentation</Menu.LinkItem>
+            <Menu.Separator />
+            <Menu.CheckboxItem defaultChecked>Show archived</Menu.CheckboxItem>
+            <Menu.Group>
+              <Menu.GroupLabel>Density</Menu.GroupLabel>
+              <Menu.RadioGroup onValueChange={(value) => setDensity(String(value))} value={density}>
+                <Menu.RadioItem value="comfortable">Comfortable</Menu.RadioItem>
+                <Menu.RadioItem value="compact">Compact</Menu.RadioItem>
+              </Menu.RadioGroup>
+            </Menu.Group>
+            <Menu.Separator />
+            <Menu.SubmenuRoot>
+              <Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
+              <Menu.Popup size={size}>
+                <Menu.Item>Copy link</Menu.Item>
+                <Menu.Item>Email</Menu.Item>
+              </Menu.Popup>
+            </Menu.SubmenuRoot>
+            <Menu.Item intent="negative">Delete</Menu.Item>
+          </Menu.Popup>
+        </Menu.Root>
+      ))}
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Menu/Size.tsx)
+
+### Intent
+
+Set `intent="negative"` on a `Menu.Item` for destructive actions. The default is `default`.
+
+```tsx
+import { Button, Menu, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  // The gallery canvas stretches its children, so the wrapper keeps the trigger at its own width.
+  return (
+    <div {...styles.row()}>
+      <Menu.Root>
+        <Menu.Trigger render={<Button variant="secondary" />}>Options</Menu.Trigger>
+        <Menu.Popup align="start">
+          <Menu.Item>Edit</Menu.Item>
+          <Menu.Separator />
+          <Menu.Item intent="negative">Delete</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Menu/Intent.tsx)
+
+### Disabled
+
+Set `disabled` on a `Menu.Item` to make it unavailable.
+
+```tsx
+import { Button, Menu, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  // The gallery canvas stretches its children, so the wrapper keeps the trigger at its own width.
+  return (
+    <div {...styles.row()}>
+      <Menu.Root>
+        <Menu.Trigger render={<Button variant="secondary" />}>Options</Menu.Trigger>
+        <Menu.Popup align="start">
+          <Menu.Item>Edit</Menu.Item>
+          <Menu.Item disabled>Duplicate</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Menu/Disabled.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { Menu } from '@tempoxyz/ds'
+
+<Menu.Root>
+  <Menu.Trigger />
+  <Menu.Popup>
+    <Menu.Item>
+      <Menu.Shortcut />
+    </Menu.Item>
+    <Menu.LinkItem />
+    <Menu.CheckboxItem />
+    <Menu.Separator />
+    <Menu.Group>
+      <Menu.GroupLabel />
+      <Menu.RadioGroup>
+        <Menu.RadioItem />
+      </Menu.RadioGroup>
+    </Menu.Group>
+    <Menu.SubmenuRoot>
+      <Menu.SubmenuTrigger />
+      <Menu.Popup />
+    </Menu.SubmenuRoot>
+  </Menu.Popup>
+</Menu.Root>
+```
+
+## Guidelines
+
+### When to Use
+
+* Offer actions on one object, such as Send to address, Copy address, Rename, and Remove address.
+* If a toolbar, card header, or table row has more than three secondary actions, put them behind an icon button.
+* Change view options in place with `Menu.CheckboxItem` (Show archived) or `Menu.RadioItem` (density). These items keep the menu open on click.
+
+### When Not to Use
+
+* Use [Select](select.md) or [Combobox](combobox.md) to choose a form value, such as a token or network.
+* Use [Tabs](tabs.md) or [ChoiceGroup](choice-group.md) to switch views with every option visible.
+* Use a [Button](button.md) for one or two actions.
+* Use [SplitButton](split-button.md) when one action is the clear default.
+* Use [SidebarMenu](sidebar-menu.md) or links for navigation. `Menu.LinkItem` suits an occasional link among actions, such as View on explorer.
+* Use [Popover](popover.md) for text or form controls. A menu holds only items.
+
+### Order Items by Frequency
+
+Put the most frequent action at the top. Keep the same items in the same order wherever the menu appears, such as on every table row.
+
+**Do:** Put the most frequent action at the top.
+
+```tsx
+/** Do example for "Order Items by Frequency" on the Menu page: put the most frequent action at the top. @module */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Rename</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+}
+```
+
+**Don't:** Lead with a rare action, such as Rename.
+
+```tsx
+/**
+ * Don't example for "Order Items by Frequency" on the Menu page.
+ * Don't lead with a rare action, such as Rename.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Rename</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Send to address</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+}
+```
+
+### Group Related Items
+
+Wrap related items in `Menu.Group` and divide groups with `Menu.Separator`. If the items alone do not explain the group, add a `Menu.GroupLabel`, such as Density.
+
+Keep a menu to about seven items. A `Menu.SubmenuRoot` hides its items, so keep frequent actions at the top level and nest only one level deep.
+
+**Do:** Divide groups with a separator, and label a group whose items need it.
+
+```tsx
+/**
+ * Do example for "Group Related Items" on the Menu page.
+ * Divide groups with a separator, and label a group whose items need it.
+ * @module
+ */
+import { Check } from '@tempoxyz/ds/icons'
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.separator()} />
+      <div {...styles.groupLabel()}>Density</div>
+      <div {...styles.item()}>
+        Comfortable
+        <Check {...styles.check()} />
+      </div>
+      <div {...styles.item()}>Compact</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const check = style({ fontSize: '16', marginInlineStart: 'auto !custom' })
+
+  export const groupLabel = style({
+    color: 'content.secondary',
+    paddingBlock: '8',
+    paddingInline: '12',
+    typography: 'body.b3',
+  })
+
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const separator = style({
+    backgroundColor: 'container.strong',
+    height: '1px !custom',
+    marginBlock: '8',
+    marginInline: '12',
+  })
+}
+```
+
+**Don't:** Mix actions and view options in one flat list.
+
+```tsx
+/**
+ * Don't example for "Group Related Items" on the Menu page.
+ * Don't mix actions and view options in one flat list.
+ * @module
+ */
+import { Check } from '@tempoxyz/ds/icons'
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>
+        Comfortable
+        <Check {...styles.check()} />
+      </div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Compact</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const check = style({ fontSize: '16', marginInlineStart: 'auto !custom' })
+
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+}
+```
+
+### Put Destructive Items Last
+
+A keyboard open focuses the first item, so a destructive item at the top is one Enter press away. Place it last, after a `Menu.Separator`, with `intent="negative"`.
+
+**Do:** Put destructive items at the end, after a separator.
+
+```tsx
+/**
+ * Do example for "Put Destructive Items Last" on the Menu page.
+ * Put destructive items at the end, after a separator.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Rename</div>
+      <div {...styles.separator()} />
+      <div {...styles.item({ intent: 'negative' })}>Remove address</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { intent: 'default' },
+    variants: {
+      intent: {
+        default: {},
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const separator = style({
+    backgroundColor: 'container.strong',
+    height: '1px !custom',
+    marginBlock: '8',
+    marginInline: '12',
+  })
+}
+```
+
+**Don't:** Lead with a destructive item, or mix it in with routine actions.
+
+```tsx
+/**
+ * Don't example for "Put Destructive Items Last" on the Menu page.
+ * Don't lead with a destructive item, or mix it in with routine actions.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item({ intent: 'negative' })}>Remove address</div>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Rename</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { intent: 'default' },
+    variants: {
+      intent: {
+        default: {},
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+}
+```
+
+If the action cannot be undone, open an [AlertDialog](alert-dialog.md) from the item and repeat the item's verb on its confirm button:
+
+* **Placement:** Render the dialog outside `Menu.Popup`, which unmounts when the menu closes.
+* **State:** Open it from the item's `onClick` with `open` and `onOpenChange`.
+
+See [Destructive Actions](../patterns/destructive-actions.md).
+
+### Disable Unavailable Items
+
+Set `disabled` on an item that is unavailable now, such as Send to address with no funds. The menu keeps its shape. Leave out items that are never available, such as admin actions without the permission.
+
+**Do:** Disable an item that is unavailable for now.
+
+```tsx
+/**
+ * Do example for "Disable Unavailable Items" on the Menu page.
+ * Disable an item that is unavailable for now.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item({ state: 'disabled' })}>Send to address</div>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Rename</div>
+      <div {...styles.separator()} />
+      <div {...styles.item({ state: 'negative' })}>Remove address</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const separator = style({
+    backgroundColor: 'container.strong',
+    height: '1px !custom',
+    marginBlock: '8',
+    marginInline: '12',
+  })
+}
+```
+
+**Don't:** Remove an item that returns later. The menu changes shape.
+
+```tsx
+/**
+ * Don't example for "Disable Unavailable Items" on the Menu page.
+ * Don't remove an item that returns later. The menu changes shape.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Copy address</div>
+      <div {...styles.item()}>Rename</div>
+      <div {...styles.separator()} />
+      <div {...styles.item({ state: 'negative' })}>Remove address</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const separator = style({
+    backgroundColor: 'container.strong',
+    height: '1px !custom',
+    marginBlock: '8',
+    marginInline: '12',
+  })
+}
+```
+
+### Show Only Shortcuts You Bind
+
+`Menu.Shortcut` displays keys and binds nothing. Add one only if the shortcut also works with the menu closed, and register the key handler yourself.
+
+**Do:** Show a shortcut only on an item whose key you bind.
+
+```tsx
+/**
+ * Do example for "Show Only Shortcuts You Bind" on the Menu page.
+ * Show a shortcut only on an item whose key you bind.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>Send to address</div>
+      <div {...styles.item()}>
+        Copy address
+        <kbd {...styles.shortcut()}>⌘C</kbd>
+      </div>
+      <div {...styles.item()}>Rename</div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const shortcut = style({
+    color: 'content.secondary',
+    marginInlineStart: 'auto !custom',
+    paddingInlineStart: '16',
+    typography: 'body.b3',
+  })
+}
+```
+
+**Don't:** Decorate every item with a shortcut that does nothing.
+
+```tsx
+/**
+ * Don't example for "Show Only Shortcuts You Bind" on the Menu page.
+ * Don't decorate every item with a shortcut that does nothing.
+ * @module
+ */
+import { style, variants } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.item()}>
+        Send to address
+        <kbd {...styles.shortcut()}>⌘S</kbd>
+      </div>
+      <div {...styles.item()}>
+        Copy address
+        <kbd {...styles.shortcut()}>⌘C</kbd>
+      </div>
+      <div {...styles.item()}>
+        Rename
+        <kbd {...styles.shortcut()}>⌘R</kbd>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const item = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'xs',
+      color: 'content.primary',
+      columnGap: '8',
+      display: 'flex',
+      minHeight: '40',
+      paddingInline: '12',
+      typography: 'body.b2Strong',
+    },
+    defaultVariants: { state: 'default' },
+    variants: {
+      state: {
+        default: {},
+        disabled: { opacity: 'disabled' },
+        negative: { color: 'content.negative' },
+      },
+    },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    minWidth: '14rem !custom',
+    padding: '12',
+  })
+
+  export const shortcut = style({
+    color: 'content.secondary',
+    marginInlineStart: 'auto !custom',
+    paddingInlineStart: '16',
+    typography: 'body.b3',
+  })
+}
+```
+
+## Content
+
+### Start Items With a Verb
+
+Write a verb, plus an object when the verb is ambiguous: Copy address, Rename, Remove address.
+
+### Lead With the Distinctive Word
+
+Typing jumps to the item whose label starts with the typed characters. Start labels with different words. If an item's text starts with something else, such as a token symbol, pass `label`.
+
+### Name Destructive Items Plainly
+
+`intent="negative"` only changes the color. Write a verb that states the loss, such as Remove address or Revoke key.
+
+## Accessibility
+
+Menu follows the [WAI-ARIA Authoring Practices menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).
+
+### Semantics
+
+* **Menu.Trigger (button):** Announces a menu popup and its expanded state.
+* **Menu.Popup (menu):** Named by its trigger.
+* **Menu.Item and Menu.LinkItem (menuitem):** Menu items, and link items render real links.
+* **Menu.CheckboxItem and Menu.RadioItem (aria-checked):** Checkable items that report their checked state.
+* **Menu.Group (group):** Named by its group label.
+* **Menu.Separator (separator):** Announced as a divider between groups of items.
+* **Disabled Items (aria-disabled):** Reachable with arrow keys, but never activates.
+* **Menu.Shortcut (kbd):** Displays the keys as text.
+
+### Keyboard
+
+* **Open the Menu (Enter, Space, or Down Arrow):** Opens the menu from the trigger and focuses the first item.
+* **Move to the Next Item (Down Arrow):** Moves focus to the next item, wrapping from the last item to the first.
+* **Move to the Previous Item (Up Arrow):** Moves focus to the previous item, wrapping from the first item to the last.
+* **Move to the First Item (Home):** Moves focus to the first item.
+* **Move to the Last Item (End):** Moves focus to the last item.
+* **Type to Jump (Any character):** Moves focus to the next item whose label starts with the typed characters.
+* **Activate an Item (Enter):** Activates the focused item. Plain items close the menu. Checkbox and radio items keep it open.
+* **Open a Submenu (Right Arrow):** On a submenu trigger, opens the submenu and focuses its first item.
+* **Close a Submenu (Left Arrow):** In a submenu, closes it and returns focus to its trigger.
+* **Close the Menu (Escape):** Closes the menu and returns focus to the trigger.
+* **Leave the Menu (Tab):** Closes the menu and moves focus onward from it.
+
+### Focus
+
+* **Opening:** A keyboard open focuses the first item. A click focuses the menu, and arrow keys then move to an item.
+* **Highlight:** One item at a time holds focus and renders highlighted.
+* **Modal (modal):** The default. A press outside closes the menu.
+* **Closing (Escape):** Activating an item, pressing Escape, or pressing outside returns focus to the trigger.
+
+### Your Responsibilities
+
+* **Name Icon-Only Triggers (aria-label):** Name the object, such as "Actions for Main wallet". The menu inherits the trigger's name.
+* **Keep Links as Links (a):** Use `Menu.LinkItem` for navigation. It keeps link semantics.
+
+## Related
+
+[SplitButton](split-button.md)
+
+Use for a main action with alternatives.
+
+[Select](select.md)
+
+Use for choosing a form value.
+
+[AlertDialog](alert-dialog.md)
+
+Use for confirming a destructive item.
+
+[Popover](popover.md)
+
+Use for anchored content other than actions.
+
+[Destructive Actions](../patterns/destructive-actions.md)
+
+Covers deleting and revoking.
+
+[Tables and Lists](../patterns/tables-and-lists.md)
+
+Covers row actions.