@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/menu.json

@@ -0,0 +1,985 @@
+{
+  "family": "menu",
+  "ui": "menu",
+  "binding": "react",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "List of actions opened from a trigger."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "side": [
+      "bottom",
+      "top",
+      "inline-start",
+      "inline-end",
+      "left",
+      "right"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "strategy": [
+      "absolute",
+      "fixed"
+    ],
+    "closeOnSelect": [
+      true,
+      false
+    ],
+    "loop": [
+      true,
+      false
+    ],
+    "typeahead": [
+      true,
+      false
+    ],
+    "openOnHover": [
+      true,
+      false
+    ],
+    "closeOnEscape": [
+      true,
+      false
+    ],
+    "closeOnOutsidePress": [
+      true,
+      false
+    ],
+    "flip": [
+      true,
+      false
+    ],
+    "shift": [
+      true,
+      false
+    ],
+    "hideWhenDetached": [
+      true,
+      false
+    ],
+    "portal": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "menu": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "side": "bottom",
+        "align": "start",
+        "mount": "active",
+        "strategy": "absolute",
+        "closeOnSelect": true,
+        "loop": true,
+        "typeahead": true,
+        "openOnHover": true,
+        "closeOnEscape": true,
+        "closeOnOutsidePress": true,
+        "flip": true,
+        "shift": true,
+        "hideWhenDetached": true,
+        "portal": true,
+        "disabled": false,
+        "loading": false,
+        "sideOffset": 0,
+        "alignOffset": 0,
+        "collisionPadding": 8,
+        "submenuOpenDelay": 150,
+        "submenuCloseDelay": 300,
+        "typeaheadTimeout": 500
+      },
+      "capabilities": [
+        "open",
+        "checked",
+        "selection",
+        "placement",
+        "size",
+        "appearance",
+        "disabled",
+        "loading",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "disabled",
+        "checked",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "content",
+        "header",
+        "group",
+        "group-label",
+        "item",
+        "indicator",
+        "icon",
+        "label",
+        "description",
+        "meta",
+        "shortcut",
+        "separator",
+        "empty"
+      ]
+    }
+  },
+  "docs": {
+    "menu": {
+      "imports": {
+        "source": "import { Menu, MenuCheckboxItem, MenuContent, MenuEmpty, MenuGroup, MenuHeader, MenuItem, MenuItemDescription, MenuItemLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The layer the menu is positioned on. It carries data-ui=\"menu\", the resolved size, side and align, and data-open while the menu is open. The gap between the trigger and the surface is the layer's own padding, so the pointer never crosses the page on its way into a submenu."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The painted surface, carrying role=\"menu\". It lays out the columns every item uses, is never taller than the room left in the window, and scrolls inside that height."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "Who the menu belongs to: an avatar or a mark, a name in MenuItemLabel and a line under it in MenuItemDescription. It is not an item and never takes focus; the surface references it with aria-describedby, so a screen reader announces it once as the menu opens."
+        },
+        {
+          "part": "group",
+          "element": "div",
+          "required": false,
+          "purpose": "A run of items with role=\"group\", named by its label. Its items keep the menu's columns, so their labels line up with the items outside the group."
+        },
+        {
+          "part": "group-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The name of a group, which the group references with aria-labelledby."
+        },
+        {
+          "part": "item",
+          "element": "button, or a when the item is a link",
+          "required": true,
+          "purpose": "One command, option or choice, with role menuitem, menuitemcheckbox or menuitemradio. A disabled item keeps its place among the items the arrow keys reach and carries aria-disabled, because the WAI-ARIA pattern keeps disabled items focusable."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The check of a checkbox item or the dot of a radio item. Its box is present whether or not the item is checked, so the labels do not move when an option changes."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The icon in the first column: a Glyph inside an Icon, or any element you pass. The column sizes it and does not paint it. It shares the column with the indicator."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The item's text, and the only column that wraps when the surface is narrow."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "The line under the label, which the item references with aria-describedby, so a screen reader announces the command as the name and this line as its description."
+        },
+        {
+          "part": "meta",
+          "element": "span",
+          "required": false,
+          "purpose": "A count, a status or the value a submenu holds, end-aligned in its own column before the shortcut, so the values of every item line up. It is part of the accessible name; typeahead matches the label alone."
+        },
+        {
+          "part": "shortcut",
+          "element": "span",
+          "required": false,
+          "purpose": "The shortcut printed for the platform: ⌘K on macOS, Ctrl+K elsewhere. It is aria-hidden, because the item announces the shortcut with aria-keyshortcuts."
+        },
+        {
+          "part": "separator",
+          "element": "hr",
+          "required": false,
+          "purpose": "A line between two runs of items. It is never focused and does nothing when pressed."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The message the surface shows while it is loading or when it holds no items. The surface keeps its width instead of collapsing around it."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean | undefined",
+          "defaultValue": "—",
+          "appliesTo": "Menu",
+          "description": "Whether the menu is open. Passing it makes the menu controlled for its lifetime; update it from onOpenChange."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Menu",
+          "description": "Whether an uncontrolled menu starts open. Read once."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "Menu",
+          "description": "Called before the menu opens or closes, with the reason and the event. The request can be cancelled."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Menu, MenuRadioGroup, MenuRadioItem",
+          "description": "On a Menu inside a Menubar, the name the bar knows it by; a menu on its own needs none. On a MenuRadioGroup, the chosen value, which makes the group controlled. On a MenuRadioItem, the value the item stands for."
+        },
+        {
+          "name": "checked",
+          "type": "boolean | undefined",
+          "defaultValue": "—",
+          "appliesTo": "MenuCheckboxItem",
+          "description": "Whether the option is on. Passing it makes the item controlled."
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MenuCheckboxItem",
+          "description": "Whether an uncontrolled option starts on."
+        },
+        {
+          "name": "onCheckedChange",
+          "type": "(checked, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "MenuCheckboxItem",
+          "description": "Called before the option changes, with pointer or keyboard as the reason."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MenuRadioGroup",
+          "description": "The value an uncontrolled group starts with."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "MenuRadioGroup",
+          "description": "Called before the chosen value changes, with pointer or keyboard as the reason."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Menu",
+          "description": "The width of the surface and the height of its items."
+        },
+        {
+          "name": "side",
+          "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "bottom",
+          "appliesTo": "Menu",
+          "description": "The edge of the trigger the surface opens from. inline-start and inline-end follow the reading direction."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "Menu",
+          "description": "Where the surface sits along that edge."
+        },
+        {
+          "name": "anchor",
+          "type": "PositionerAnchor | null",
+          "defaultValue": "—",
+          "appliesTo": "Menu",
+          "description": "What the surface is positioned against instead of the trigger, such as a table row or a point. Focus still returns to the trigger."
+        },
+        {
+          "name": "finalFocus",
+          "type": "Element | RefObject | string",
+          "defaultValue": "the trigger",
+          "appliesTo": "Menu",
+          "description": "Where focus goes when the menu closes, for a trigger that is gone by then, such as the actions button of a deleted row."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Menu",
+          "description": "When the surface is in the document: only while open, from the first open on, or from the start."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "Menu",
+          "description": "The CSS position the layer is placed with."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu, MenuItem",
+          "description": "Whether running an item closes the menu. Checkbox and radio items keep it open unless they set it themselves."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether the arrow keys wrap from the last item to the first."
+        },
+        {
+          "name": "typeahead",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether typing moves focus to the item whose label starts with the typed text."
+        },
+        {
+          "name": "openOnHover",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether a submenu opens when the pointer rests on its item."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether Escape closes the menu that holds focus."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether a press outside the menu closes every open menu."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether the surface moves to the opposite side when it would leave the window."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether the surface slides along its edge to stay in the window."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether the surface hides once its trigger has scrolled out of view."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Menu",
+          "description": "Whether the layer is rendered at the end of the document."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Menu, MenuItem",
+          "description": "A disabled menu never opens, and its trigger keeps aria-expanded=\"false\". A disabled item stays focusable and runs nothing."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MenuContent",
+          "description": "Whether the items are on their way. The surface keeps its width, sets aria-busy and shows the MenuEmpty message."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Menu",
+          "description": "Extra distance from the trigger, in pixels, beyond the layer's own gap."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Menu",
+          "description": "Distance along the alignment edge, in pixels."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "Menu",
+          "description": "The distance, in pixels, the surface keeps from the edge of the window."
+        },
+        {
+          "name": "submenuOpenDelay",
+          "type": "number",
+          "defaultValue": "150",
+          "appliesTo": "Menu",
+          "description": "How long, in milliseconds, the pointer rests on an item before its submenu opens."
+        },
+        {
+          "name": "submenuCloseDelay",
+          "type": "number",
+          "defaultValue": "300",
+          "appliesTo": "Menu",
+          "description": "How long, in milliseconds, a submenu stays open while the pointer travels toward it without reaching it."
+        },
+        {
+          "name": "typeaheadTimeout",
+          "type": "number",
+          "defaultValue": "500",
+          "appliesTo": "Menu",
+          "description": "How long, in milliseconds, typed letters keep adding to one search."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem, MenuTrigger",
+          "description": "The icon in the first column of the item."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem",
+          "description": "The line under the label, referenced with aria-describedby."
+        },
+        {
+          "name": "meta",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem, MenuTrigger",
+          "description": "A count, a status or the value a submenu holds, in its own column before the shortcut or the chevron."
+        },
+        {
+          "name": "shortcut",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem",
+          "description": "A shortcut written as Mod+K, printed for the platform and announced with aria-keyshortcuts. The menu does not bind the key."
+        },
+        {
+          "name": "textValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem",
+          "description": "The text typeahead matches, when the label does not start with the word a reader would type."
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem",
+          "description": "The theme tone of the label, the icon and the highlight. A destructive command takes danger."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MenuGroup",
+          "description": "The name of the group, rendered as its group-label part."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MenuTrigger, MenuContent, MenuItem",
+          "description": "Renders your own element with the wiring, the state attributes and the handlers spread on it. On MenuItem, return an a for a link item."
+        }
+      ],
+      "composition": [
+        {
+          "name": "MenuDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once for every menu under it, and container sets where the layers are rendered. A value set on one menu still wins."
+        },
+        {
+          "name": "render",
+          "type": "prop",
+          "defaultValue": "—",
+          "appliesTo": "MenuTrigger, MenuContent, MenuItem",
+          "description": "Replaces the rendered element with your own, keeping the wiring, the state attributes and the handlers."
+        },
+        {
+          "name": "MenuHeader",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "MenuContent",
+          "description": "The block above the commands. Its children are the media, a MenuItemLabel and a MenuItemDescription, and the surface is described by it."
+        },
+        {
+          "name": "MenuItemMeta, MenuItemIcon, MenuItemLabel, MenuItemDescription, MenuItemShortcut",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "MenuItem children",
+          "description": "The parts of an item, for an item written from its parts instead of from props."
+        },
+        {
+          "name": "MenuGroupLabel",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "MenuGroup",
+          "description": "The group-label part, for a label written as a child instead of with label."
+        },
+        {
+          "name": "MenuEmpty",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "MenuContent",
+          "description": "The message shown while loading is set or when the menu holds no items."
+        },
+        {
+          "name": "useMenu",
+          "type": "hook",
+          "defaultValue": "—",
+          "appliesTo": "Inside a Menu",
+          "description": "Reads the menu around a part: whether it is open, its resolved axes and toggle()."
+        },
+        {
+          "name": "ref",
+          "type": "prop",
+          "defaultValue": "—",
+          "appliesTo": "Menu",
+          "description": "A handle with open(), close() and focus(), for a shortcut your application binds outside the menu."
+        },
+        {
+          "name": "native props",
+          "type": "attributes",
+          "defaultValue": "—",
+          "appliesTo": "Every part",
+          "description": "Any attribute the underlying element takes reaches it. Your own onClick, onKeyDown or onPointerEnter runs before the menu's handler, and preventDefault() in it skips the menu's."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: MenuChangeRequest)",
+          "when": "Before the menu opens or closes. request.reason is pointer, keyboard, escape, outsidePress, select, dismiss or programmatic, request.source is the event, and request.cancel() refuses the change."
+        },
+        {
+          "name": "onCheckedChange",
+          "payload": "(checked: boolean, request: MenuCheckedChangeRequest)",
+          "when": "Before a checkbox item changes. request.reason is pointer or keyboard."
+        },
+        {
+          "name": "onValueChange",
+          "payload": "(value: string, request: MenuValueChangeRequest)",
+          "when": "Before a radio group changes its value. request.reason is pointer or keyboard."
+        },
+        {
+          "name": "onSelect",
+          "payload": "(event: MenuSelectEvent)",
+          "when": "When an item runs. event.reason is pointer or keyboard, and event.preventDefault() keeps the menu open for this press only."
+        }
+      ],
+      "accessibility": [
+        "An item is a native button, so Enter and Space run it and the pointer behaves as the browser's own. role=\"menuitem\" replaces role=\"button\", so a screen reader announces a menu item. A link item is an a that keeps its href and takes the same role.",
+        "Menu supplies the keyboard of the WAI-ARIA menu pattern: the arrow keys move and wrap, Home and End reach the ends, letters move by typeahead, the inline-end arrow opens a submenu and the inline-start arrow closes it, Escape closes the menu that holds focus, and Tab closes every menu and moves focus past the trigger.",
+        "A disabled item stays focusable and carries aria-disabled instead of the native disabled attribute, so a keyboard user can still find a command that is unavailable. A natively disabled button cannot take focus.",
+        "A header is not an item and never takes focus, because role=\"menu\" owns only items, groups and separators. The surface references it with aria-describedby, joined to any description you give, so a screen reader announces who the menu belongs to once, as it opens.",
+        "The surface is named by its trigger, or by its own aria-label. A checkbox or radio item announces its state through aria-checked, a group is named by its label, and a shortcut is announced through aria-keyshortcuts while the printed keys are hidden, so the item's name stays the command."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-menu-border-color",
+    "--slotted-menu-gap",
+    "--slotted-menu-highlight",
+    "--slotted-menu-highlight-active",
+    "--slotted-menu-item-radius",
+    "--slotted-menu-measure",
+    "--slotted-menu-measure-lg",
+    "--slotted-menu-measure-sm",
+    "--slotted-menu-min-measure",
+    "--slotted-menu-padding-block",
+    "--slotted-menu-padding-inline",
+    "--slotted-menu-radius",
+    "--slotted-menu-separator-color",
+    "--slotted-menu-shadow",
+    "--slotted-menu-surface",
+    "--slotted-menu-text",
+    "--slotted-menu-text-muted",
+    "--slotted-radius-lg",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-subtle-active",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-subtle-active",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-subtle-active",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One menu with every axis on it, driven by the controls under the canvas. Change side and align and watch the surface move around the control that opened it.",
+      "language": "tsx",
+      "source": "<Menu>\n  <MenuTrigger render={(props) => <Button {...props} variant=\"outline\" />}>Document</MenuTrigger>\n  <MenuContent>\n    <MenuItem shortcut=\"Mod+D\">Duplicate</MenuItem>\n    <MenuItem disabled>Publish</MenuItem>\n    <MenuSeparator />\n    <MenuItem tone=\"danger\">Delete…</MenuItem>\n  </MenuContent>\n</Menu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "commands",
+      "title": "Commands",
+      "note": "The default: an item runs and the menu closes. The second item asks to stay open, which is what a command a reader repeats needs.",
+      "language": "tsx",
+      "source": "<>\n  <MenuItem onSelect={(event) => duplicate(event.reason)}>Duplicate</MenuItem>\n  <MenuItem closeOnSelect={false} onSelect={zoomIn}>\n    Zoom in\n  </MenuItem>\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "icons",
+      "title": "Icons",
+      "note": "Two items carry a mark and two do not, and every label still starts on the same line: the column exists for the menu rather than for the item.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nconst mark = (name: GlyphName) => (\n  <Icon>\n    <Glyph name={name} />\n  </Icon>\n);\n\nexport default function MenuIcons() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Invoice INV-2041\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem icon={mark('copy')} shortcut=\"Mod+D\">\n          Duplicate\n        </MenuItem>\n        <MenuItem icon={mark('external')} shortcut=\"Mod+Enter\">\n          Open in new tab\n        </MenuItem>\n        <MenuItem icon={mark('file-text')} shortcut=\"Mod+P\">\n          Print\n        </MenuItem>\n        <MenuItem icon={mark('pin')}>Pin to dashboard</MenuItem>\n        <MenuItem shortcut=\"Shift+Mod+R\">Rename…</MenuItem>\n        <MenuSeparator />\n        <MenuItem icon={mark('trash')} shortcut=\"Mod+Backspace\" tone=\"danger\">\n          Delete draft\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "shortcuts",
+      "title": "Shortcuts",
+      "note": "Written once as Mod+S and printed as ⌘S on a Mac and Ctrl+S elsewhere. The legend is hidden from a screen reader, which hears aria-keyshortcuts instead.",
+      "language": "tsx",
+      "source": "<>\n  <MenuItem shortcut=\"Mod+S\">Save</MenuItem>\n  <MenuItem shortcut=\"Shift+Mod+S\">Save as…</MenuItem>\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "checkbox-items",
+      "title": "Checkbox items",
+      "note": "Each item holds a state of its own and the menu stays open, so a reader can turn three things on without opening it three times. Space toggles without closing.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuCheckboxItem, MenuContent, MenuTrigger } from '@slotted/react/menu';\nimport { Text } from '@slotted/react/typography';\n\nexport default function MenuCheckboxItems() {\n  const [archived, setArchived] = useState(false);\n  const [test, setTest] = useState(false);\n  const [cancelled, setCancelled] = useState(true);\n  const shown = [archived && 'archived', test && 'test', cancelled && 'cancelled'].filter(Boolean);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Menu>\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n              Show\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuCheckboxItem checked={archived} onCheckedChange={setArchived}>\n            Archived orders\n          </MenuCheckboxItem>\n          <MenuCheckboxItem checked={test} onCheckedChange={setTest}>\n            Test orders\n          </MenuCheckboxItem>\n          <MenuCheckboxItem checked={cancelled} onCheckedChange={setCancelled}>\n            Cancelled orders\n          </MenuCheckboxItem>\n        </MenuContent>\n      </Menu>\n      <Text size=\"sm\" tone=\"muted\">\n        {shown.length === 0 ? 'Open orders only' : `Including ${shown.join(', ')}`}\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "radio-items",
+      "title": "Radio items",
+      "note": "One value across the group, chosen among the items inside it. The mark sits in the same column an icon would, so the labels stay in line.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger } from '@slotted/react/menu';\n\nconst GROUPINGS = [\n  { value: 'none', label: 'No grouping' },\n  { value: 'status', label: 'Status' },\n  { value: 'customer', label: 'Customer' },\n  { value: 'warehouse', label: 'Warehouse' },\n];\n\nexport default function MenuRadioItems() {\n  const [grouping, setGrouping] = useState('status');\n  const current = GROUPINGS.find((option) => option.value === grouping)?.label;\n\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Group by: {current}\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuRadioGroup aria-label=\"Group orders by\" onValueChange={setGrouping} value={grouping}>\n          {GROUPINGS.map((option) => (\n            <MenuRadioItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuRadioItem>\n          ))}\n        </MenuRadioGroup>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "groups",
+      "title": "Groups",
+      "note": "A label names the run under it and the group points at it, so a reader hears \"Sort by\" before the options rather than a heading belonging to nothing.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport {\n  Menu,\n  MenuContent,\n  MenuGroup,\n  MenuItem,\n  MenuSeparator,\n  MenuTrigger,\n} from '@slotted/react/menu';\n\nexport default function MenuGroups() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            SO-10482\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuGroup label=\"Fulfilment\">\n          <MenuItem>Mark as packed</MenuItem>\n          <MenuItem>Mark as shipped</MenuItem>\n          <MenuItem>Print packing slip</MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup label=\"Billing\">\n          <MenuItem>Send invoice</MenuItem>\n          <MenuItem>Record payment…</MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup label=\"Customer\">\n          <MenuItem>Open Northwind Traders</MenuItem>\n          <MenuItem>Email the buyer</MenuItem>\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "submenu",
+      "title": "Submenus",
+      "note": "A menu nested in a menu. Hover opens it after a pause, the inline-end arrow opens it from the keyboard, and the pointer may cut diagonally across the items between.",
+      "language": "tsx",
+      "source": "<MenuContent>\n  <MenuItem>Copy link</MenuItem>\n  <Menu>\n    <MenuTrigger>Send to</MenuTrigger>\n    <MenuContent>\n      <MenuItem>Slack</MenuItem>\n    </MenuContent>\n  </Menu>\n</MenuContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "submenu-open",
+      "title": "Submenu open",
+      "note": "The submenu as it lands: its panel one gap out from the parent surface, not against the item, and its first item level with the item that opened it. Every other scene keeps its submenu closed until it is hovered or the inline-end arrow asks for it.",
+      "language": "tsx",
+      "source": "<Menu defaultOpen>\n  <MenuTrigger>Send to</MenuTrigger>\n  <MenuContent>\n    <MenuItem>Slack</MenuItem>\n  </MenuContent>\n</Menu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "header",
+      "title": "Header",
+      "note": "An account menu opens with who it belongs to. The avatar starts at the icons' edge, the arrows begin at the first command, and a reader hears the name and the address as the surface's description.",
+      "language": "tsx",
+      "source": "<MenuContent>\n  <MenuHeader>\n    <Avatar name=\"Ada Lovelace\" size=\"md\" />\n    <MenuItemLabel>Ada Lovelace</MenuItemLabel>\n    <MenuItemDescription>ada@analytical.engine</MenuItemDescription>\n  </MenuHeader>\n  <MenuSeparator />\n  <MenuItem\n    icon={\n      <Icon>\n        <Glyph name=\"person\" />\n      </Icon>\n    }\n  >\n    Profile\n  </MenuItem>\n  <MenuItem tone=\"danger\">Sign out</MenuItem>\n</MenuContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "meta",
+      "title": "Meta",
+      "note": "Counts and the value a submenu holds, in a column of their own: the numbers end on one edge, the shortcuts keep theirs, and a submenu trigger shows its current value before the chevron.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nconst VIEWS = [\n  { label: 'Awaiting payment', count: '18' },\n  { label: 'Ready to ship', count: '42' },\n  { label: 'On hold', count: '3' },\n  { label: 'Returns', count: '7' },\n];\n\nexport default function MenuMeta() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            All orders\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem meta=\"1,284\">All orders</MenuItem>\n        <MenuSeparator />\n        {VIEWS.map((view) => (\n          <MenuItem key={view.label} meta={view.count}>\n            {view.label}\n          </MenuItem>\n        ))}\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "tone",
+      "title": "Tone",
+      "note": "A destructive command reads as destructive before it is read at all: the tone paints the label, the mark and the highlight together, in all three schemes.",
+      "language": "tsx",
+      "source": "<MenuItem tone=\"danger\" onSelect={remove}>\n  Delete document\n</MenuItem>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "placement",
+      "title": "Placement",
+      "note": "The surface hangs from the start edge of its control by default, and flips or slides rather than leaving the screen. Both inline values mirror in a right-to-left document.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuAlign, MenuContent, MenuItem, MenuSide, MenuTrigger } from '@slotted/react/menu';\n\nconst PLACEMENTS: { label: string; side: MenuSide; align: MenuAlign }[] = [\n  { label: 'Bottom, start', side: 'bottom', align: 'start' },\n  { label: 'Bottom, end', side: 'bottom', align: 'end' },\n  { label: 'Top, start', side: 'top', align: 'start' },\n  { label: 'Inline end', side: 'inline-end', align: 'start' },\n];\n\nexport default function MenuPlacement() {\n  return (\n    <Inline align=\"center\" gap={3} wrap=\"wrap\">\n      {PLACEMENTS.map((placement) => (\n        <Menu align={placement.align} key={placement.label} side={placement.side}>\n          <MenuTrigger\n            render={(props) => (\n              <Button {...props} variant=\"outline\">\n                {placement.label}\n              </Button>\n            )}\n          />\n          <MenuContent>\n            <MenuItem>Rename…</MenuItem>\n            <MenuItem>Duplicate</MenuItem>\n            <MenuItem>Archive</MenuItem>\n          </MenuContent>\n        </Menu>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scrolling",
+      "title": "A menu taller than the screen",
+      "note": "The surface is bounded by the room the positioner reports and scrolls inside it, so thirty commands never run off the bottom of the window.",
+      "language": "tsx",
+      "source": "<MenuContent aria-label=\"Move to\">\n  {folders.map((folder) => (\n    <MenuItem key={folder}>{folder}</MenuItem>\n  ))}\n</MenuContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Disabled, checked, the parent item while its submenu is open, and the surface waiting for its items. A disabled item still takes focus and still runs nothing.",
+      "language": "tsx",
+      "source": "<MenuContent loading={pending}>\n  <MenuItem disabled>Publish</MenuItem>\n  <MenuCheckboxItem checked>Show comments</MenuCheckboxItem>\n  <MenuEmpty>Loading labels…</MenuEmpty>\n</MenuContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Arrows move and wrap, Home and End reach the ends, typing jumps to a command by name, Escape closes one surface and Tab closes them all and moves on down the page.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuSelectEvent,\n  MenuSeparator,\n  MenuTrigger,\n} from '@slotted/react/menu';\nimport { Text } from '@slotted/react/typography';\n\nconst FORMATS = ['CSV', 'PDF', 'Excel'];\n\nexport default function MenuKeyboard() {\n  const [last, setLast] = useState('Focus Order, then press ArrowDown.');\n  const ran = (command: string) => (event: MenuSelectEvent) =>\n    setLast(`${command}, by ${event.reason}`);\n\n  return (\n    <Inline align=\"center\" gap={3} wrap=\"wrap\">\n      <Menu>\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n              Order\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuItem onSelect={ran('Edit order')} shortcut=\"Mod+E\">\n            Edit order\n          </MenuItem>\n          <MenuItem onSelect={ran('Duplicate')} shortcut=\"Mod+D\">\n            Duplicate\n          </MenuItem>\n          <Menu>\n            <MenuTrigger>Export as</MenuTrigger>\n            <MenuContent>\n              {FORMATS.map((format) => (\n                <MenuItem key={format} onSelect={ran(`Export as ${format}`)}>\n                  {format}\n                </MenuItem>\n              ))}\n            </MenuContent>\n          </Menu>\n          <MenuSeparator />\n          <MenuItem onSelect={ran('Archive')}>Archive</MenuItem>\n        </MenuContent>\n      </Menu>\n      <Text size=\"sm\" tone=\"muted\">\n        {last}\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "In context",
+      "note": "A row of actions in a table: the trigger is the consumer's own icon button, the menu holds the row's commands, and the defaults provider sets the side once.",
+      "language": "tsx",
+      "source": "<MenuDefaultsProvider side=\"bottom\" align=\"end\">\n  <Menu>\n    <MenuTrigger render={(props) => <Button {...props} variant=\"ghost\" aria-label=\"Row actions\" />}>\n      ⋯\n    </MenuTrigger>\n    <MenuContent>\n      <MenuItem>Open</MenuItem>\n    </MenuContent>\n  </Menu>\n</MenuDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "account-menu",
+      "title": "account-menu.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Avatar } from '@slotted/react/avatar';\nimport { Button } from '@slotted/react/button';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\nimport {\n  Menu,\n  MenuContent,\n  MenuHeader,\n  MenuItem,\n  MenuItemDescription,\n  MenuItemLabel,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuTrigger,\n} from '@slotted/react/menu';\n\nconst WORKSPACES = ['Northwind Operations', 'Northwind Europe', 'Northwind Wholesale'];\n\nconst mark = (name: GlyphName) => (\n  <Icon>\n    <Glyph name={name} />\n  </Icon>\n);\n\nexport default function MenuAccountMenu() {\n  const [workspace, setWorkspace] = useState('Northwind Operations');\n\n  return (\n    <Menu align=\"end\">\n      <MenuTrigger\n        render={(props) => (\n          <Button\n            {...props}\n            start={<Avatar decorative name=\"Maria Chen\" size=\"sm\" />}\n            variant=\"ghost\"\n          >\n            Maria Chen\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuHeader>\n          <Avatar decorative name=\"Maria Chen\" size=\"md\" />\n          <MenuItemLabel>Maria Chen</MenuItemLabel>\n          <MenuItemDescription>maria.chen@northwind.example</MenuItemDescription>\n        </MenuHeader>\n        <MenuSeparator />\n        <MenuItem icon={mark('person')}>Profile</MenuItem>\n        <MenuItem icon={mark('bell')}>Notifications</MenuItem>\n        <Menu>\n          <MenuTrigger meta={workspace.replace('Northwind ', '')}>Workspace</MenuTrigger>\n          <MenuContent>\n            <MenuRadioGroup onValueChange={setWorkspace} value={workspace}>\n              {WORKSPACES.map((name) => (\n                <MenuRadioItem key={name} value={name}>\n                  {name}\n                </MenuRadioItem>\n              ))}\n            </MenuRadioGroup>\n          </MenuContent>\n        </Menu>\n        <MenuSeparator />\n        <MenuItem icon={mark('arrow-left')} tone=\"danger\">\n          Sign out\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nexport default function MenuBasic() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Order actions\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem>View order</MenuItem>\n        <MenuItem shortcut=\"Mod+E\">Edit order</MenuItem>\n        <MenuItem shortcut=\"Mod+D\">Duplicate</MenuItem>\n        <MenuItem shortcut=\"Mod+P\">Print packing slip</MenuItem>\n        <MenuSeparator />\n        <MenuItem tone=\"danger\">Cancel order…</MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "column-visibility",
+      "title": "column-visibility.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuTrigger } from '@slotted/react/menu';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\n\ntype Column = 'customer' | 'status' | 'warehouse' | 'total';\n\nconst COLUMNS: { key: Column; label: string; numeric?: boolean }[] = [\n  { key: 'customer', label: 'Customer' },\n  { key: 'status', label: 'Status' },\n  { key: 'warehouse', label: 'Warehouse' },\n  { key: 'total', label: 'Total', numeric: true },\n];\n\nconst ORDERS: (Record<Column, string> & { id: string })[] = [\n  {\n    id: 'SO-10482',\n    customer: 'Northwind Traders',\n    status: 'Packed',\n    warehouse: 'Rotterdam',\n    total: '$1,240.00',\n  },\n  {\n    id: 'SO-10483',\n    customer: 'Contoso Foods',\n    status: 'Awaiting payment',\n    warehouse: 'Leipzig',\n    total: '$860.50',\n  },\n  {\n    id: 'SO-10484',\n    customer: 'Fabrikam Supply',\n    status: 'Shipped',\n    warehouse: 'Lyon',\n    total: '$2,315.75',\n  },\n];\n\nexport default function MenuColumnVisibility() {\n  const [visible, setVisible] = useState<Record<Column, boolean>>({\n    customer: true,\n    status: true,\n    warehouse: false,\n    total: true,\n  });\n  const shown = COLUMNS.filter((column) => visible[column.key]);\n\n  return (\n    <Stack align=\"end\" gap={3}>\n      <Menu align=\"end\">\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} size=\"sm\" variant=\"outline\">\n              Columns\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuGroup label=\"Show columns\">\n            {COLUMNS.map((column) => (\n              <MenuCheckboxItem\n                checked={visible[column.key]}\n                key={column.key}\n                onCheckedChange={(checked) =>\n                  setVisible((current) => ({ ...current, [column.key]: checked }))\n                }\n              >\n                {column.label}\n              </MenuCheckboxItem>\n            ))}\n          </MenuGroup>\n        </MenuContent>\n      </Menu>\n      <Table columns={shown.length + 1}>\n        <TableContent>\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              {shown.map((column) => (\n                <TableColumnHeader key={column.key} numeric={column.numeric}>\n                  {column.label}\n                </TableColumnHeader>\n              ))}\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {ORDERS.map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader>{order.id}</TableRowHeader>\n                {shown.map((column) => (\n                  <TableCell key={column.key} numeric={column.numeric}>\n                    {order[column.key]}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';\nimport { Text } from '@slotted/react/typography';\n\nexport default function MenuControlled() {\n  const [open, setOpen] = useState(false);\n  const [last, setLast] = useState('Closed');\n\n  return (\n    <Inline align=\"center\" gap={3} wrap=\"wrap\">\n      <Menu\n        onOpenChange={(next, request) => {\n          setOpen(next);\n          setLast(`${next ? 'Opened' : 'Closed'} by ${request.reason}`);\n        }}\n        open={open}\n      >\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n              Bulk actions\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuItem>Mark 12 orders as packed</MenuItem>\n          <MenuItem>Print 12 packing slips</MenuItem>\n          <MenuItem>Export selection</MenuItem>\n        </MenuContent>\n      </Menu>\n      <Button onClick={() => setOpen(true)} variant=\"ghost\">\n        Open from code\n      </Button>\n      <Text size=\"sm\" tone=\"muted\">\n        {last}\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';\n\nexport default function MenuDescriptions() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Refund\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem description=\"Returns $1,240.00 to the card used at checkout.\">\n          Full refund\n        </MenuItem>\n        <MenuItem description=\"Choose the lines and the amount to return.\">\n          Partial refund…\n        </MenuItem>\n        <MenuItem description=\"Adds $1,240.00 to the customer's account balance.\">\n          Store credit\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "destructive",
+      "title": "destructive.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nexport default function MenuDestructive() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Supplier\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem>Edit details</MenuItem>\n        <MenuItem tone=\"success\">Approve for purchasing</MenuItem>\n        <MenuItem tone=\"warning\">Put payments on hold</MenuItem>\n        <MenuSeparator />\n        <MenuItem\n          description=\"Removes Northwind Traders and its 18 open purchase orders.\"\n          tone=\"danger\"\n        >\n          Delete supplier…\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled",
+      "title": "disabled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nexport default function MenuDisabled() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            SO-10477 · Shipped\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem>Track shipment</MenuItem>\n        <MenuItem>Create return…</MenuItem>\n        <MenuItem description=\"A shipped order can no longer be edited.\" disabled>\n          Edit order\n        </MenuItem>\n        <MenuSeparator />\n        <MenuItem description=\"Create a return instead.\" disabled tone=\"danger\">\n          Cancel order\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "keep-open",
+      "title": "keep-open.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\nimport { Text } from '@slotted/react/typography';\n\nexport default function MenuKeepOpen() {\n  const [cartons, setCartons] = useState(24);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Menu>\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n              Adjust quantity\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuItem closeOnSelect={false} onSelect={() => setCartons((count) => count + 1)}>\n            Add 1 carton\n          </MenuItem>\n          <MenuItem closeOnSelect={false} onSelect={() => setCartons((count) => count + 10)}>\n            Add 10 cartons\n          </MenuItem>\n          <MenuItem\n            closeOnSelect={false}\n            onSelect={() => setCartons((count) => Math.max(0, count - 1))}\n          >\n            Remove 1 carton\n          </MenuItem>\n          <MenuSeparator />\n          <MenuItem onSelect={() => setCartons(24)}>Reset to ordered quantity</MenuItem>\n        </MenuContent>\n      </Menu>\n      <Text size=\"sm\" tone=\"muted\">\n        {cartons} cartons\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "links",
+      "title": "links.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph, Icon } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\n\nexport default function MenuLinks() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Open\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem render={(props) => <a {...props} href=\"#order-SO-10482\" />}>Order page</MenuItem>\n        <MenuItem render={(props) => <a {...props} href=\"#customer-northwind\" />}>\n          Customer profile\n        </MenuItem>\n        <MenuSeparator />\n        <MenuItem\n          icon={\n            <Icon>\n              <Glyph name=\"external\" />\n            </Icon>\n          }\n          render={(props) => (\n            <a\n              {...props}\n              href=\"https://example.com/carriers/track/1Z999AA10123456784\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n            />\n          )}\n        >\n          Carrier tracking\n        </MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuCheckboxItem, MenuContent, MenuEmpty, MenuTrigger } from '@slotted/react/menu';\n\nconst LABELS = ['Fragile', 'Gift wrap', 'Priority', 'Wholesale'];\n\nexport default function MenuLoading() {\n  const [labels, setLabels] = useState<string[] | null>(null);\n  const requested = useRef(false);\n\n  const load = (open: boolean) => {\n    if (!open || requested.current) return;\n    requested.current = true;\n    setTimeout(() => setLabels(LABELS), 1200);\n  };\n\n  return (\n    <Menu onOpenChange={load}>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Labels\n          </Button>\n        )}\n      />\n      <MenuContent loading={labels === null}>\n        {labels === null ? (\n          <MenuEmpty>Loading labels…</MenuEmpty>\n        ) : (\n          labels.map((label) => <MenuCheckboxItem key={label}>{label}</MenuCheckboxItem>)\n        )}\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-list",
+      "title": "long-list.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';\n\nconst LOCATIONS = [\n  'Amsterdam',\n  'Antwerp',\n  'Barcelona',\n  'Berlin',\n  'Bologna',\n  'Bordeaux',\n  'Bratislava',\n  'Brno',\n  'Brussels',\n  'Budapest',\n  'Copenhagen',\n  'Dublin',\n  'Gdańsk',\n  'Geneva',\n  'Hamburg',\n  'Helsinki',\n  'Kraków',\n  'Leipzig',\n  'Lisbon',\n  'Ljubljana',\n  'Lyon',\n  'Madrid',\n  'Milan',\n  'Munich',\n  'Oslo',\n  'Porto',\n  'Prague',\n  'Rotterdam',\n  'Stockholm',\n  'Tallinn',\n  'Valencia',\n  'Vienna',\n  'Vilnius',\n  'Warsaw',\n  'Zagreb',\n  'Zürich',\n];\n\nexport default function MenuLongList() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Move to warehouse\n          </Button>\n        )}\n      />\n      <MenuContent>\n        {LOCATIONS.map((location) => (\n          <MenuItem key={location}>{location}</MenuItem>\n        ))}\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "row-actions",
+      "title": "row-actions.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button, IconButton } from '@slotted/react/button';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogIcon,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@slotted/react/dialog';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\n\ninterface Order {\n  id: string;\n  customer: string;\n  total: string;\n}\n\nconst ORDERS: Order[] = [\n  { id: 'SO-10482', customer: 'Northwind Traders', total: '$1,240.00' },\n  { id: 'SO-10483', customer: 'Contoso Foods', total: '$860.50' },\n  { id: 'SO-10484', customer: 'Fabrikam Supply', total: '$2,315.75' },\n];\n\nexport default function MenuRowActions() {\n  const [orders, setOrders] = useState(ORDERS);\n  const [pending, setPending] = useState<Order | null>(null);\n  const [confirming, setConfirming] = useState(false);\n\n  return (\n    <>\n      <Table columns={4}>\n        <TableContent>\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader numeric>Total</TableColumnHeader>\n              <TableColumnHeader align=\"end\">Actions</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {orders.map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader>{order.id}</TableRowHeader>\n                <TableCell>{order.customer}</TableCell>\n                <TableCell numeric>{order.total}</TableCell>\n                <TableCell align=\"end\">\n                  <Menu align=\"end\">\n                    <MenuTrigger\n                      render={(props) => (\n                        <IconButton {...props} aria-label={`Actions for ${order.id}`} size=\"sm\">\n                          <Glyph name=\"ellipsis\" />\n                        </IconButton>\n                      )}\n                    />\n                    <MenuContent>\n                      <MenuItem>View order</MenuItem>\n                      <MenuItem shortcut=\"Mod+D\">Duplicate</MenuItem>\n                      <MenuSeparator />\n                      <MenuItem\n                        onSelect={() => {\n                          setPending(order);\n                          setConfirming(true);\n                        }}\n                        tone=\"danger\"\n                      >\n                        Delete order…\n                      </MenuItem>\n                    </MenuContent>\n                  </Menu>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n      <AlertDialog onOpenChange={setConfirming} open={confirming}>\n        <DialogContent>\n          <DialogHeader>\n            <AlertDialogIcon />\n            <DialogTitle>Delete {pending?.id}?</DialogTitle>\n            <DialogDescription>\n              The order for {pending?.customer} and its invoice are removed. This cannot be undone.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialogCancel\n              render={(props) => (\n                <Button {...props} tone=\"secondary\" variant=\"outline\">\n                  Keep order\n                </Button>\n              )}\n            />\n            <AlertDialogAction\n              onClick={() => setOrders((rows) => rows.filter((row) => row.id !== pending?.id))}\n              render={(props) => (\n                <Button {...props} tone=\"danger\">\n                  Delete order\n                </Button>\n              )}\n            />\n          </DialogFooter>\n        </DialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "sizes.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuContent, MenuItem, MenuSize, MenuTrigger } from '@slotted/react/menu';\n\nconst SIZES: MenuSize[] = ['sm', 'md', 'lg'];\n\nexport default function MenuSizes() {\n  return (\n    <Inline align=\"center\" gap={3}>\n      {SIZES.map((size) => (\n        <Menu key={size} size={size}>\n          <MenuTrigger\n            render={(props) => (\n              <Button {...props} size={size} variant=\"outline\">\n                Actions, {size}\n              </Button>\n            )}\n          />\n          <MenuContent>\n            <MenuItem shortcut=\"Mod+E\">Edit order</MenuItem>\n            <MenuItem shortcut=\"Mod+D\">Duplicate</MenuItem>\n            <MenuItem>Print packing slip</MenuItem>\n          </MenuContent>\n        </Menu>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sort-menu",
+      "title": "sort-menu.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger } from '@slotted/react/menu';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\n\ninterface Order {\n  id: string;\n  customer: string;\n  placed: string;\n  total: number;\n}\n\nconst ORDERS: Order[] = [\n  { id: 'SO-10482', customer: 'Northwind Traders', placed: '2026-10-02', total: 1240 },\n  { id: 'SO-10483', customer: 'Contoso Foods', placed: '2026-10-03', total: 860.5 },\n  { id: 'SO-10484', customer: 'Fabrikam Supply', placed: '2026-10-01', total: 2315.75 },\n  { id: 'SO-10485', customer: 'Adventure Works', placed: '2026-10-04', total: 412 },\n];\n\nconst SORTS: { value: string; label: string; compare: (a: Order, b: Order) => number }[] = [\n  { value: 'newest', label: 'Newest first', compare: (a, b) => b.placed.localeCompare(a.placed) },\n  { value: 'oldest', label: 'Oldest first', compare: (a, b) => a.placed.localeCompare(b.placed) },\n  { value: 'total-desc', label: 'Highest total', compare: (a, b) => b.total - a.total },\n  { value: 'total-asc', label: 'Lowest total', compare: (a, b) => a.total - b.total },\n  {\n    value: 'customer',\n    label: 'Customer, A to Z',\n    compare: (a, b) => a.customer.localeCompare(b.customer),\n  },\n];\n\nconst money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });\n\nexport default function MenuSortMenu() {\n  const [sort, setSort] = useState('newest');\n  const current = SORTS.find((option) => option.value === sort) ?? SORTS[0]!;\n  const rows = [...ORDERS].sort(current.compare);\n\n  return (\n    <Stack align=\"end\" gap={3}>\n      <Menu align=\"end\">\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} size=\"sm\" variant=\"outline\">\n              Sort: {current.label}\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuRadioGroup aria-label=\"Sort orders\" onValueChange={setSort} value={sort}>\n            {SORTS.map((option) => (\n              <MenuRadioItem key={option.value} value={option.value}>\n                {option.label}\n              </MenuRadioItem>\n            ))}\n          </MenuRadioGroup>\n        </MenuContent>\n      </Menu>\n      <Table columns={4}>\n        <TableContent>\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader>Placed</TableColumnHeader>\n              <TableColumnHeader numeric>Total</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {rows.map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader>{order.id}</TableRowHeader>\n                <TableCell>{order.customer}</TableCell>\n                <TableCell>{order.placed}</TableCell>\n                <TableCell numeric>{money.format(order.total)}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "submenus",
+      "title": "submenus.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport {\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuTrigger,\n} from '@slotted/react/menu';\n\nconst PEOPLE = ['Maria Chen', 'Tomás Ortega', 'Aiko Tanaka', 'Unassigned'];\nconst WAREHOUSES = ['Rotterdam', 'Leipzig', 'Lyon', 'Gdańsk'];\n\nexport default function MenuSubmenus() {\n  const [assignee, setAssignee] = useState('Maria Chen');\n\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            SO-10482\n          </Button>\n        )}\n      />\n      <MenuContent>\n        <MenuItem>View order</MenuItem>\n        <Menu>\n          <MenuTrigger meta={assignee}>Assign to</MenuTrigger>\n          <MenuContent>\n            <MenuRadioGroup onValueChange={setAssignee} value={assignee}>\n              {PEOPLE.map((person) => (\n                <MenuRadioItem key={person} value={person}>\n                  {person}\n                </MenuRadioItem>\n              ))}\n            </MenuRadioGroup>\n          </MenuContent>\n        </Menu>\n        <Menu>\n          <MenuTrigger>Move to warehouse</MenuTrigger>\n          <MenuContent>\n            {WAREHOUSES.map((warehouse) => (\n              <MenuItem key={warehouse}>{warehouse}</MenuItem>\n            ))}\n          </MenuContent>\n        </Menu>\n        <MenuSeparator />\n        <MenuItem tone=\"danger\">Cancel order…</MenuItem>\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "triggers",
+      "title": "triggers.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button, IconButton } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';\nimport {\n  SplitButton,\n  SplitButtonMenu,\n  SplitButtonMenuTrigger,\n  SplitButtonPrimary,\n} from '@slotted/react/split-button';\n\nexport default function MenuTriggers() {\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Menu>\n        <MenuTrigger\n          render={(props) => (\n            <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n              Export\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuItem>CSV for spreadsheets</MenuItem>\n          <MenuItem>PDF summary</MenuItem>\n          <MenuItem>Accounting journal</MenuItem>\n        </MenuContent>\n      </Menu>\n\n      <Menu align=\"end\">\n        <MenuTrigger\n          render={(props) => (\n            <IconButton {...props} aria-label=\"More actions for SO-10482\">\n              <Glyph name=\"ellipsis\" />\n            </IconButton>\n          )}\n        />\n        <MenuContent>\n          <MenuItem>Copy order number</MenuItem>\n          <MenuItem>Add internal note</MenuItem>\n          <MenuItem>Open customer</MenuItem>\n        </MenuContent>\n      </Menu>\n\n      <SplitButton>\n        <SplitButtonPrimary>Ship order</SplitButtonPrimary>\n        <SplitButtonMenu>\n          <SplitButtonMenuTrigger aria-label=\"More ways to ship\" />\n          <MenuContent>\n            <MenuItem>Ship and print label</MenuItem>\n            <MenuItem>Ship part of the order…</MenuItem>\n            <MenuItem>Schedule for tomorrow</MenuItem>\n          </MenuContent>\n        </SplitButtonMenu>\n      </SplitButton>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typeahead",
+      "title": "typeahead.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';\n\nconst CARRIERS = [\n  { name: 'DHL Express', transit: '1 day' },\n  { name: 'DPD', transit: '2 days' },\n  { name: 'FedEx', transit: '1 day' },\n  { name: 'GLS', transit: '3 days' },\n  { name: 'PostNL', transit: '2 days' },\n  { name: 'Royal Mail', transit: '3 days' },\n  { name: 'UPS', transit: '2 days' },\n  { name: 'USPS', transit: '5 days' },\n];\n\nexport default function MenuTypeahead() {\n  return (\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} end={<Glyph name=\"chevron-down\" />} variant=\"outline\">\n            Ship with\n          </Button>\n        )}\n      />\n      <MenuContent>\n        {CARRIERS.map((carrier) => (\n          <MenuItem key={carrier.name} meta={carrier.transit}>\n            {carrier.name}\n          </MenuItem>\n        ))}\n      </MenuContent>\n    </Menu>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}