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

package/docs/menu.json

@@ -0,0 +1,922 @@
+{
+  "family": "menu",
+  "ui": "menu",
+  "binding": "angular",
+  "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 { SlMenu, SlMenuEmpty, SlMenuGroup, SlMenuHeader, SlMenuItem, SlMenuItemDescription, SlMenuItemIcon, SlMenuItemMeta, SlMenuRadioGroup, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';",
+        "selector": "sl-menu, [slMenuTriggerFor], button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem], sl-menu-group, sl-menu-radio-group, hr[slMenuSeparator], [slMenuHeader], [slMenuItemIcon], [slMenuItemDescription], [slMenuItemMeta], [slMenuEmpty]",
+        "exportAs": "slMenu, slMenuTrigger, slMenuItem, slMenuGroup, slMenuRadioGroup"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, built into the portal when the menu opens",
+          "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. A layer kept in the document by mount=\"lazy\" or \"eager\" carries inert while it is closed."
+        },
+        {
+          "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[slMenuHeader]",
+          "required": false,
+          "purpose": "Who the menu belongs to: an avatar or a mark, a name in an element with data-part=\"label\" and a line under it in slMenuItemDescription. 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": "sl-menu-group, or sl-menu-radio-group",
+          "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[slMenuItem], or a[slMenuItem] for a link",
+          "required": true,
+          "purpose": "One command, option or choice. slMenuItem gives role=\"menuitem\", slMenuCheckboxItem menuitemcheckbox and slMenuRadioItem 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, drawn by the item",
+          "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[slMenuItemIcon]",
+          "required": false,
+          "purpose": "The icon in the first column: an slGlyph inside an slIcon, 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, drawn by the item around its content",
+          "required": true,
+          "purpose": "The item's text, and the only column that wraps when the surface is narrow."
+        },
+        {
+          "part": "description",
+          "element": "span[slMenuItemDescription]",
+          "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[slMenuItemMeta]",
+          "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, drawn by the item",
+          "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[slMenuSeparator]",
+          "required": false,
+          "purpose": "A line between two runs of items. It is never focused and does nothing when pressed."
+        },
+        {
+          "part": "empty",
+          "element": "[slMenuEmpty]",
+          "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": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "sl-menu",
+          "description": "Whether the menu is open. Bind [(open)] to read and write it; on a menubar the bar holds it instead."
+        },
+        {
+          "name": "value",
+          "type": "string | undefined",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu, sl-menu-radio-group, button[slMenuRadioItem]",
+          "description": "On an sl-menu inside sl-menubar, the name the bar knows it by; a menu on its own needs none. On sl-menu-radio-group, the chosen value, bound with [(value)]. On a radio item, the value the item stands for."
+        },
+        {
+          "name": "checked",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "button[slMenuCheckboxItem]",
+          "description": "Whether the option is on. Bind [(checked)] to read and write it."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "sl-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": "sl-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": "sl-menu",
+          "description": "Where the surface sits along that edge."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "sl-menu",
+          "description": "When the surface is in the document: only while open, from the first open on, or from the start. A surface kept while closed carries inert."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "sl-menu",
+          "description": "The CSS position the layer is placed with."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu, button[slMenuItem]",
+          "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": "sl-menu",
+          "description": "Whether the arrow keys wrap from the last item to the first."
+        },
+        {
+          "name": "typeahead",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether typing moves focus to the item whose label starts with the typed text."
+        },
+        {
+          "name": "openOnHover",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether a submenu opens when the pointer rests on its item."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether Escape closes the menu that holds focus."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether a press outside the menu closes every open menu."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether the surface moves to the opposite side when it would leave the window."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether the surface slides along its edge to stay in the window."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether the surface hides once its trigger has scrolled out of view."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-menu",
+          "description": "Whether the layer is built at the end of the document."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-menu, button[slMenuItem]",
+          "description": "A disabled menu never opens. A disabled item stays focusable and runs nothing."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-menu",
+          "description": "Whether the items are on their way. The surface keeps its width, sets aria-busy and shows the slMenuEmpty message."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "sl-menu",
+          "description": "Extra distance from the trigger, in pixels, beyond the layer's own gap."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "sl-menu",
+          "description": "Distance along the alignment edge, in pixels."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "sl-menu",
+          "description": "The distance, in pixels, the surface keeps from the edge of the window."
+        },
+        {
+          "name": "submenuOpenDelay",
+          "type": "number",
+          "defaultValue": "150",
+          "appliesTo": "sl-menu",
+          "description": "How long, in milliseconds, the pointer rests on an item before its submenu opens."
+        },
+        {
+          "name": "submenuCloseDelay",
+          "type": "number",
+          "defaultValue": "300",
+          "appliesTo": "sl-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": "sl-menu",
+          "description": "How long, in milliseconds, typed letters keep adding to one search."
+        },
+        {
+          "name": "shortcut",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "button[slMenuItem]",
+          "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": "button[slMenuItem]",
+          "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": "button[slMenuItem]",
+          "description": "The theme tone of the label, the icon and the highlight. A destructive command takes danger."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu-group",
+          "description": "The name of the group, rendered as its group-label part."
+        },
+        {
+          "name": "slMenuTriggerFor",
+          "type": "SlMenu",
+          "defaultValue": "—",
+          "appliesTo": "[slMenuTriggerFor]",
+          "description": "The menu a control opens. It goes on your own button; on an slMenuItem it opens a submenu."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu",
+          "description": "Names the surface itself, instead of the name it takes from its trigger."
+        },
+        {
+          "name": "aria-describedby",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu",
+          "description": "The ids of the elements that describe the menu, written on the element with role=\"menu\"."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideMenuDefaults",
+          "type": "provider",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once, in the application config or on a route. A value set on one menu still wins."
+        },
+        {
+          "name": "slMenuTriggerFor",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "Any control",
+          "description": "Goes on your own element instead of replacing it: the wiring, the state attributes and the keyboard arrive on the button you already have, which keeps its own part and styles."
+        },
+        {
+          "name": "slMenuHeader",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu",
+          "description": "The block above the commands. Its children are the media, an element with data-part=\"label\" and an slMenuItemDescription, and the surface is described by it."
+        },
+        {
+          "name": "slMenuItemIcon, slMenuItemDescription, slMenuItemMeta",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "Item content",
+          "description": "Project an element into the icon, description or meta column of the item."
+        },
+        {
+          "name": "slMenuEmpty",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu",
+          "description": "The message shown while loading is set or when the menu holds no items."
+        },
+        {
+          "name": "exportAs",
+          "type": "template reference",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu, [slMenuTriggerFor]",
+          "description": "A template reference such as #menu=\"slMenu\" reaches the instance, for toggle(), closeAll() and the resolved axes."
+        },
+        {
+          "name": "ng-content",
+          "type": "projection",
+          "defaultValue": "—",
+          "appliesTo": "sl-menu, sl-menu-group",
+          "description": "The items are your own elements, projected into the surface the menu builds when it opens."
+        },
+        {
+          "name": "slMenuItem, slMenuCheckboxItem, slMenuRadioItem",
+          "type": "attribute",
+          "defaultValue": "—",
+          "appliesTo": "button, a",
+          "description": "The attribute you write decides the role of the item. slMenuItem also goes on an a for a link item."
+        }
+      ],
+      "events": [
+        {
+          "name": "openChange",
+          "payload": "boolean",
+          "when": "After the menu opens or closes, as the write-back of [(open)]."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "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": "checkedChange, checkedChangeRequest",
+          "payload": "boolean, ChangeRequest<boolean>",
+          "when": "After and before a checkbox item changes. The request's reason is pointer or keyboard."
+        },
+        {
+          "name": "valueChange, valueChangeRequest",
+          "payload": "string, ChangeRequest<string>",
+          "when": "After and before a radio group changes its value. The request's reason is pointer or keyboard."
+        },
+        {
+          "name": "select",
+          "payload": "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 input 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": "html",
+      "source": "<button slButton variant=\"outline\" [slMenuTriggerFor]=\"document\">Document</button>\n<sl-menu #document>\n  <button slMenuItem shortcut=\"Mod+D\">Duplicate</button>\n  <button slMenuItem [disabled]=\"true\">Publish</button>\n  <hr slMenuSeparator />\n  <button slMenuItem tone=\"danger\">Delete…</button>\n</sl-menu>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "commands",
+      "title": "Commands",
+      "note": "The default: an item runs and the menu closes. The second asks to stay open, which is what a command a reader repeats needs.",
+      "language": "html",
+      "source": "<button slMenuItem (select)=\"duplicate($event.reason)\">Duplicate</button>\n<button slMenuItem [closeOnSelect]=\"false\" (select)=\"zoomIn()\">Zoom in</button>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemIcon,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-icons',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlIcon,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemIcon,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"invoice\">\n      Invoice INV-2041\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #invoice>\n      <button slMenuItem shortcut=\"Mod+D\">\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"copy\"></svg></span\n        ></span>\n        Duplicate\n      </button>\n      <button slMenuItem shortcut=\"Mod+Enter\">\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"external\"></svg></span\n        ></span>\n        Open in new tab\n      </button>\n      <button slMenuItem shortcut=\"Mod+P\">\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"file-text\"></svg></span\n        ></span>\n        Print\n      </button>\n      <button slMenuItem>\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"pin\"></svg></span\n        ></span>\n        Pin to dashboard\n      </button>\n      <button slMenuItem shortcut=\"Shift+Mod+R\">Rename…</button>\n      <hr slMenuSeparator />\n      <button slMenuItem shortcut=\"Mod+Backspace\" tone=\"danger\">\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"trash\"></svg></span\n        ></span>\n        Delete draft\n      </button>\n    </sl-menu>\n  `,\n})\nexport class MenuIcons {}\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": "html",
+      "source": "<button slMenuItem shortcut=\"Mod+S\">Save</button>\n<button slMenuItem shortcut=\"Shift+Mod+S\">Save as…</button>\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": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-menu-checkbox-items',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlInline, SlMenu, SlMenuItem, SlMenuTrigger, SlText],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton variant=\"outline\" [slMenuTriggerFor]=\"show\">\n        Show\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #show>\n        <button slMenuCheckboxItem [(checked)]=\"archived\">Archived orders</button>\n        <button slMenuCheckboxItem [(checked)]=\"test\">Test orders</button>\n        <button slMenuCheckboxItem [(checked)]=\"cancelled\">Cancelled orders</button>\n      </sl-menu>\n      <span slText size=\"sm\" tone=\"muted\">{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class MenuCheckboxItems {\n  protected readonly archived = signal(false);\n  protected readonly test = signal(false);\n  protected readonly cancelled = signal(true);\n  protected readonly summary = computed(() => {\n    const shown = [\n      this.archived() && 'archived',\n      this.test() && 'test',\n      this.cancelled() && 'cancelled',\n    ].filter(Boolean);\n    return shown.length === 0 ? 'Open orders only' : `Including ${shown.join(', ')}`;\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": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-radio-items',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"group\">\n      Group by: {{ current() }}\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #group>\n      <sl-menu-radio-group aria-label=\"Group orders by\" [(value)]=\"grouping\">\n        @for (option of groupings; track option.value) {\n          <button slMenuRadioItem [value]=\"option.value\">{{ option.label }}</button>\n        }\n      </sl-menu-radio-group>\n    </sl-menu>\n  `,\n})\nexport class MenuRadioItems {\n  protected readonly groupings = GROUPINGS;\n  protected readonly grouping = signal<string | undefined>('status');\n  protected readonly current = computed(\n    () => GROUPINGS.find((option) => option.value === this.grouping())?.label,\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuGroup,\n  SlMenuItem,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-groups',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuGroup,\n    SlMenuItem,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"order\">\n      SO-10482\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #order>\n      <sl-menu-group label=\"Fulfilment\">\n        <button slMenuItem>Mark as packed</button>\n        <button slMenuItem>Mark as shipped</button>\n        <button slMenuItem>Print packing slip</button>\n      </sl-menu-group>\n      <hr slMenuSeparator />\n      <sl-menu-group label=\"Billing\">\n        <button slMenuItem>Send invoice</button>\n        <button slMenuItem>Record payment…</button>\n      </sl-menu-group>\n      <hr slMenuSeparator />\n      <sl-menu-group label=\"Customer\">\n        <button slMenuItem>Open Northwind Traders</button>\n        <button slMenuItem>Email the buyer</button>\n      </sl-menu-group>\n    </sl-menu>\n  `,\n})\nexport class MenuGroups {}\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": "html",
+      "source": "<sl-menu #share>\n  <button slMenuItem>Copy link</button>\n  <button slMenuItem [slMenuTriggerFor]=\"sendTo\">Send to</button>\n  <sl-menu #sendTo>\n    <button slMenuItem>Slack</button>\n  </sl-menu>\n</sl-menu>\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": "html",
+      "source": "<sl-menu #sendTo [open]=\"true\">\n  <button slMenuItem>Slack</button>\n</sl-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": "html",
+      "source": "<sl-menu #account>\n  <div slMenuHeader>\n    <span slAvatar name=\"Ada Lovelace\" size=\"md\" decorative></span>\n    <span data-part=\"label\">Ada Lovelace</span>\n    <span slMenuItemDescription>ada@analytical.engine</span>\n  </div>\n  <hr slMenuSeparator />\n  <button slMenuItem>Profile</button>\n  <button slMenuItem tone=\"danger\">Sign out</button>\n</sl-menu>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemMeta,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-meta',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemMeta,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"viewMenu\">\n      All orders\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #viewMenu>\n      <button slMenuItem>All orders <span slMenuItemMeta>1,284</span></button>\n      <hr slMenuSeparator />\n      @for (view of views; track view.label) {\n        <button slMenuItem>\n          {{ view.label }} <span slMenuItemMeta>{{ view.count }}</span>\n        </button>\n      }\n    </sl-menu>\n  `,\n})\nexport class MenuMeta {\n  protected readonly views = VIEWS;\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": "html",
+      "source": "<button slMenuItem tone=\"danger\" (select)=\"remove()\">\n  Delete document\n  <span slMenuItemDescription>This cannot be undone.</span>\n</button>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuTrigger,\n  type MenuAlign,\n  type MenuSide,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-placement',\n  imports: [SlButton, SlInline, SlMenu, SlMenuItem, SlMenuTrigger],\n  template: `\n    <div slInline align=\"center\" wrap=\"wrap\" [gap]=\"3\">\n      @for (placement of placements; track placement.label) {\n        <button slButton variant=\"outline\" [slMenuTriggerFor]=\"menu\">{{ placement.label }}</button>\n        <sl-menu #menu [align]=\"placement.align\" [side]=\"placement.side\">\n          <button slMenuItem>Rename…</button>\n          <button slMenuItem>Duplicate</button>\n          <button slMenuItem>Archive</button>\n        </sl-menu>\n      }\n    </div>\n  `,\n})\nexport class MenuPlacement {\n  protected readonly placements = PLACEMENTS;\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": "html",
+      "source": "<sl-menu #moveTo aria-label=\"Move to\">\n  @for (folder of folders; track folder) {\n    <button slMenuItem>{{ folder }}</button>\n  }\n</sl-menu>\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": "html",
+      "source": "<sl-menu #labels [loading]=\"pending()\">\n  <button slMenuItem [disabled]=\"true\">Publish</button>\n  <button slMenuCheckboxItem [checked]=\"true\">Show comments</button>\n  <div slMenuEmpty>Loading labels…</div>\n</sl-menu>\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuSeparator,\n  SlMenuTrigger,\n  type MenuSelectEvent,\n} from '@slotted/angular/menu';\nimport { SlText } from '@slotted/angular/typography';\n\nconst FORMATS = ['CSV', 'PDF', 'Excel'];\n\n@Component({\n  selector: 'app-menu-keyboard',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlInline,\n    SlMenu,\n    SlMenuItem,\n    SlMenuSeparator,\n    SlMenuTrigger,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" wrap=\"wrap\" [gap]=\"3\">\n      <button slButton variant=\"outline\" [slMenuTriggerFor]=\"order\">\n        Order\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #order>\n        <button slMenuItem shortcut=\"Mod+E\" (select)=\"ran('Edit order', $event)\">Edit order</button>\n        <button slMenuItem shortcut=\"Mod+D\" (select)=\"ran('Duplicate', $event)\">Duplicate</button>\n        <button slMenuItem [slMenuTriggerFor]=\"exportAs\">Export as</button>\n        <sl-menu #exportAs>\n          @for (format of formats; track format) {\n            <button slMenuItem (select)=\"ran('Export as ' + format, $event)\">{{ format }}</button>\n          }\n        </sl-menu>\n        <hr slMenuSeparator />\n        <button slMenuItem (select)=\"ran('Archive', $event)\">Archive</button>\n      </sl-menu>\n      <span slText size=\"sm\" tone=\"muted\">{{ last() }}</span>\n    </div>\n  `,\n})\nexport class MenuKeyboard {\n  protected readonly formats = FORMATS;\n  protected readonly last = signal('Focus Order, then press ArrowDown.');\n\n  protected ran(command: string, event: MenuSelectEvent): void {\n    this.last.set(`${command}, by ${event.reason}`);\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 provideMenuDefaults sets the side once.",
+      "language": "html",
+      "source": "<button slButton variant=\"ghost\" aria-label=\"Row actions\" [slMenuTriggerFor]=\"rowActions\">⋯</button>\n<sl-menu #rowActions>\n  <button slMenuItem>Open</button>\n</sl-menu>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "account-menu",
+      "title": "account-menu.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlAvatar } from '@slotted/angular/avatar';\nimport { SlButton, SlButtonStart } from '@slotted/angular/button';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuHeader,\n  SlMenuItem,\n  SlMenuItemDescription,\n  SlMenuItemIcon,\n  SlMenuItemMeta,\n  SlMenuRadioGroup,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\nconst WORKSPACES = ['Northwind Operations', 'Northwind Europe', 'Northwind Wholesale'];\n\n@Component({\n  selector: 'app-menu-account-menu',\n  imports: [\n    SlAvatar,\n    SlButton,\n    SlButtonStart,\n    SlGlyph,\n    SlIcon,\n    SlMenu,\n    SlMenuHeader,\n    SlMenuItem,\n    SlMenuItemDescription,\n    SlMenuItemIcon,\n    SlMenuItemMeta,\n    SlMenuRadioGroup,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"ghost\" [slMenuTriggerFor]=\"account\">\n      <span slButtonStart><span slAvatar decorative name=\"Maria Chen\" size=\"sm\"></span></span>\n      Maria Chen\n    </button>\n    <sl-menu #account align=\"end\">\n      <div slMenuHeader>\n        <span slAvatar decorative name=\"Maria Chen\" size=\"md\"></span>\n        <span data-part=\"label\">Maria Chen</span>\n        <span slMenuItemDescription>maria.chen&#64;northwind.example</span>\n      </div>\n      <hr slMenuSeparator />\n      <button slMenuItem>\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"person\"></svg></span\n        ></span>\n        Profile\n      </button>\n      <button slMenuItem>\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"bell\"></svg></span\n        ></span>\n        Notifications\n      </button>\n      <button slMenuItem [slMenuTriggerFor]=\"workspaces\">\n        Workspace <span slMenuItemMeta>{{ short() }}</span>\n      </button>\n      <sl-menu #workspaces>\n        <sl-menu-radio-group [(value)]=\"workspace\">\n          @for (name of names; track name) {\n            <button slMenuRadioItem [value]=\"name\">{{ name }}</button>\n          }\n        </sl-menu-radio-group>\n      </sl-menu>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\">\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"arrow-left\"></svg></span\n        ></span>\n        Sign out\n      </button>\n    </sl-menu>\n  `,\n})\nexport class MenuAccountMenu {\n  protected readonly names = WORKSPACES;\n  protected readonly workspace = signal<string | undefined>('Northwind Operations');\n  protected readonly short = computed(() => this.workspace()?.replace('Northwind ', ''));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-basic',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"actions\">\n      Order actions\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #actions>\n      <button slMenuItem>View order</button>\n      <button slMenuItem shortcut=\"Mod+E\">Edit order</button>\n      <button slMenuItem shortcut=\"Mod+D\">Duplicate</button>\n      <button slMenuItem shortcut=\"Mod+P\">Print packing slip</button>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\">Cancel order…</button>\n    </sl-menu>\n  `,\n})\nexport class MenuBasic {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "column-visibility",
+      "title": "column-visibility.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuGroup, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-column-visibility',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuGroup,\n    SlMenuItem,\n    SlMenuTrigger,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slStack align=\"end\" [gap]=\"3\">\n      <button slButton size=\"sm\" variant=\"outline\" [slMenuTriggerFor]=\"columnMenu\">\n        Columns\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #columnMenu align=\"end\">\n        <sl-menu-group label=\"Show columns\">\n          @for (column of columns; track column.key) {\n            <button\n              slMenuCheckboxItem\n              [checked]=\"visible()[column.key]\"\n              (checkedChange)=\"toggle(column.key, $event)\"\n            >\n              {{ column.label }}\n            </button>\n          }\n        </sl-menu-group>\n      </sl-menu>\n      <div slTable [columns]=\"shown().length + 1\">\n        <div slTableContent>\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableColumnHeader>Order</th>\n              @for (column of shown(); track column.key) {\n                <th slTableColumnHeader [numeric]=\"column.numeric ?? false\">{{ column.label }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of orders; track order.id) {\n              <tr slTableRow [value]=\"order.id\">\n                <th slTableRowHeader>{{ order.id }}</th>\n                @for (column of shown(); track column.key) {\n                  <td slTableCell [numeric]=\"column.numeric ?? false\">{{ order[column.key] }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class MenuColumnVisibility {\n  protected readonly columns = COLUMNS;\n  protected readonly orders = ORDERS;\n  protected readonly visible = signal<Record<Column, boolean>>({\n    customer: true,\n    status: true,\n    warehouse: false,\n    total: true,\n  });\n  protected readonly shown = computed(() => COLUMNS.filter((column) => this.visible()[column.key]));\n\n  protected toggle(key: Column, checked: boolean): void {\n    this.visible.update((current) => ({ ...current, [key]: checked }));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-menu-controlled',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlInline, SlMenu, SlMenuItem, SlMenuTrigger, SlText],\n  template: `\n    <div slInline align=\"center\" wrap=\"wrap\" [gap]=\"3\">\n      <button slButton variant=\"outline\" [slMenuTriggerFor]=\"bulk\">\n        Bulk actions\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #bulk [(open)]=\"open\" (openChangeRequest)=\"record($event)\">\n        <button slMenuItem>Mark 12 orders as packed</button>\n        <button slMenuItem>Print 12 packing slips</button>\n        <button slMenuItem>Export selection</button>\n      </sl-menu>\n      <button slButton variant=\"ghost\" (click)=\"open.set(true)\">Open from code</button>\n      <span slText size=\"sm\" tone=\"muted\">{{ last() }}</span>\n    </div>\n  `,\n})\nexport class MenuControlled {\n  protected readonly open = signal(false);\n  protected readonly last = signal('Closed');\n\n  protected record(request: ChangeRequest<boolean>): void {\n    this.last.set(`${request.value ? 'Opened' : 'Closed'} by ${request.reason}`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuItemDescription, SlMenuTrigger } from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-descriptions',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemDescription,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"refund\">\n      Refund\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #refund>\n      <button slMenuItem>\n        Full refund\n        <span slMenuItemDescription>Returns $1,240.00 to the card used at checkout.</span>\n      </button>\n      <button slMenuItem>\n        Partial refund…\n        <span slMenuItemDescription>Choose the lines and the amount to return.</span>\n      </button>\n      <button slMenuItem>\n        Store credit\n        <span slMenuItemDescription>Adds $1,240.00 to the customer's account balance.</span>\n      </button>\n    </sl-menu>\n  `,\n})\nexport class MenuDescriptions {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "destructive",
+      "title": "destructive.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemDescription,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-destructive',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemDescription,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"supplier\">\n      Supplier\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #supplier>\n      <button slMenuItem>Edit details</button>\n      <button slMenuItem tone=\"success\">Approve for purchasing</button>\n      <button slMenuItem tone=\"warning\">Put payments on hold</button>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\">\n        Delete supplier…\n        <span slMenuItemDescription\n          >Removes Northwind Traders and its 18 open purchase orders.</span\n        >\n      </button>\n    </sl-menu>\n  `,\n})\nexport class MenuDestructive {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled",
+      "title": "disabled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemDescription,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-disabled',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemDescription,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"shipped\">\n      SO-10477 · Shipped\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #shipped>\n      <button slMenuItem>Track shipment</button>\n      <button slMenuItem>Create return…</button>\n      <button slMenuItem [disabled]=\"true\">\n        Edit order\n        <span slMenuItemDescription>A shipped order can no longer be edited.</span>\n      </button>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\" [disabled]=\"true\">\n        Cancel order\n        <span slMenuItemDescription>Create a return instead.</span>\n      </button>\n    </sl-menu>\n  `,\n})\nexport class MenuDisabled {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "keep-open",
+      "title": "keep-open.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-menu-keep-open',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlInline,\n    SlMenu,\n    SlMenuItem,\n    SlMenuSeparator,\n    SlMenuTrigger,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton variant=\"outline\" [slMenuTriggerFor]=\"quantity\">\n        Adjust quantity\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #quantity>\n        <button slMenuItem [closeOnSelect]=\"false\" (select)=\"add(1)\">Add 1 carton</button>\n        <button slMenuItem [closeOnSelect]=\"false\" (select)=\"add(10)\">Add 10 cartons</button>\n        <button slMenuItem [closeOnSelect]=\"false\" (select)=\"add(-1)\">Remove 1 carton</button>\n        <hr slMenuSeparator />\n        <button slMenuItem (select)=\"cartons.set(24)\">Reset to ordered quantity</button>\n      </sl-menu>\n      <span slText size=\"sm\" tone=\"muted\">{{ cartons() }} cartons</span>\n    </div>\n  `,\n})\nexport class MenuKeepOpen {\n  protected readonly cartons = signal(24);\n\n  protected add(count: number): void {\n    this.cartons.update((current) => Math.max(0, current + count));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "links",
+      "title": "links.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemIcon,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\n@Component({\n  selector: 'app-menu-links',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlIcon,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemIcon,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"open\">\n      Open\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #open>\n      <a slMenuItem href=\"#order-SO-10482\">Order page</a>\n      <a slMenuItem href=\"#customer-northwind\">Customer profile</a>\n      <hr slMenuSeparator />\n      <a\n        slMenuItem\n        href=\"https://example.com/carriers/track/1Z999AA10123456784\"\n        rel=\"noreferrer\"\n        target=\"_blank\"\n      >\n        <span slMenuItemIcon\n          ><span slIcon><svg slGlyph name=\"external\"></svg></span\n        ></span>\n        Carrier tracking\n      </a>\n    </sl-menu>\n  `,\n})\nexport class MenuLinks {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuEmpty, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';\n\nconst LABELS = ['Fragile', 'Gift wrap', 'Priority', 'Wholesale'];\n\n@Component({\n  selector: 'app-menu-loading',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuEmpty, SlMenuItem, SlMenuTrigger],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"labelMenu\">\n      Labels\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #labelMenu [loading]=\"labels() === null\" (openChange)=\"load($event)\">\n      @if (labels(); as loaded) {\n        @for (label of loaded; track label) {\n          <button slMenuCheckboxItem>{{ label }}</button>\n        }\n      } @else {\n        <div slMenuEmpty>Loading labels…</div>\n      }\n    </sl-menu>\n  `,\n})\nexport class MenuLoading {\n  protected readonly labels = signal<string[] | null>(null);\n  private requested = false;\n\n  protected load(open: boolean): void {\n    if (!open || this.requested) return;\n    this.requested = true;\n    setTimeout(() => this.labels.set(LABELS), 1200);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-list",
+      "title": "long-list.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-long-list',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuTrigger],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"warehouses\">\n      Move to warehouse\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #warehouses>\n      @for (location of locations; track location) {\n        <button slMenuItem>{{ location }}</button>\n      }\n    </sl-menu>\n  `,\n})\nexport class MenuLongList {\n  protected readonly locations = LOCATIONS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "row-actions",
+      "title": "row-actions.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlIconButton } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n} from '@slotted/angular/dialog';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-row-actions',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlButton,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlGlyph,\n    SlIconButton,\n    SlMenu,\n    SlMenuItem,\n    SlMenuSeparator,\n    SlMenuTrigger,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent>\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Total</th>\n            <th slTableColumnHeader align=\"end\">Actions</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders(); track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader>{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell numeric>{{ order.total }}</td>\n              <td slTableCell align=\"end\">\n                <button\n                  slIconButton\n                  size=\"sm\"\n                  [attr.aria-label]=\"'Actions for ' + order.id\"\n                  [slMenuTriggerFor]=\"actions\"\n                >\n                  <svg slGlyph name=\"ellipsis\"></svg>\n                </button>\n                <sl-menu #actions align=\"end\">\n                  <button slMenuItem>View order</button>\n                  <button slMenuItem shortcut=\"Mod+D\">Duplicate</button>\n                  <hr slMenuSeparator />\n                  <button slMenuItem tone=\"danger\" (select)=\"confirm(order)\">Delete order…</button>\n                </sl-menu>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n    <sl-alert-dialog [(open)]=\"confirming\">\n      <header slDialogHeader>\n        <span slAlertDialogIcon></span>\n        <h2 slDialogTitle>Delete {{ pending()?.id }}?</h2>\n        <p slDialogDescription>\n          The order for {{ pending()?.customer }} and its invoice are removed. This cannot be\n          undone.\n        </p>\n      </header>\n      <footer slDialogFooter>\n        <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">Keep order</button>\n        <button slButton slAlertDialogAction tone=\"danger\" (click)=\"remove()\">Delete order</button>\n      </footer>\n    </sl-alert-dialog>\n  `,\n})\nexport class MenuRowActions {\n  protected readonly orders = signal(ORDERS);\n  protected readonly pending = signal<Order | null>(null);\n  protected readonly confirming = signal(false);\n\n  protected confirm(order: Order): void {\n    this.pending.set(order);\n    this.confirming.set(true);\n  }\n\n  protected remove(): void {\n    const id = this.pending()?.id;\n    this.orders.update((rows) => rows.filter((row) => row.id !== id));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "sizes.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlMenu, SlMenuItem, SlMenuTrigger, type MenuSize } from '@slotted/angular/menu';\n\nconst SIZES: MenuSize[] = ['sm', 'md', 'lg'];\n\n@Component({\n  selector: 'app-menu-sizes',\n  imports: [SlButton, SlInline, SlMenu, SlMenuItem, SlMenuTrigger],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      @for (size of sizes; track size) {\n        <button slButton variant=\"outline\" [size]=\"size\" [slMenuTriggerFor]=\"menu\">\n          Actions, {{ size }}\n        </button>\n        <sl-menu #menu [size]=\"size\">\n          <button slMenuItem shortcut=\"Mod+E\">Edit order</button>\n          <button slMenuItem shortcut=\"Mod+D\">Duplicate</button>\n          <button slMenuItem>Print packing slip</button>\n        </sl-menu>\n      }\n    </div>\n  `,\n})\nexport class MenuSizes {\n  protected readonly sizes = SIZES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sort-menu",
+      "title": "sort-menu.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-sort-menu',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuRadioGroup,\n    SlMenuTrigger,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slStack align=\"end\" [gap]=\"3\">\n      <button slButton size=\"sm\" variant=\"outline\" [slMenuTriggerFor]=\"sortMenu\">\n        Sort: {{ current().label }}\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #sortMenu align=\"end\">\n        <sl-menu-radio-group aria-label=\"Sort orders\" [(value)]=\"sort\">\n          @for (option of sorts; track option.value) {\n            <button slMenuRadioItem [value]=\"option.value\">{{ option.label }}</button>\n          }\n        </sl-menu-radio-group>\n      </sl-menu>\n      <div slTable [columns]=\"4\">\n        <div slTableContent>\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableColumnHeader>Order</th>\n              <th slTableColumnHeader>Customer</th>\n              <th slTableColumnHeader>Placed</th>\n              <th slTableColumnHeader numeric>Total</th>\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of rows(); track order.id) {\n              <tr slTableRow [value]=\"order.id\">\n                <th slTableRowHeader>{{ order.id }}</th>\n                <td slTableCell>{{ order.customer }}</td>\n                <td slTableCell>{{ order.placed }}</td>\n                <td slTableCell numeric>{{ format(order.total) }}</td>\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class MenuSortMenu {\n  protected readonly sorts = SORTS;\n  protected readonly sort = signal<string | undefined>('newest');\n  protected readonly current = computed(\n    () => SORTS.find((option) => option.value === this.sort()) ?? SORTS[0]!,\n  );\n  protected readonly rows = computed(() => [...ORDERS].sort(this.current().compare));\n\n  protected format(total: number): string {\n    return money.format(total);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "submenus",
+      "title": "submenus.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport {\n  SlMenu,\n  SlMenuItem,\n  SlMenuItemMeta,\n  SlMenuRadioGroup,\n  SlMenuSeparator,\n  SlMenuTrigger,\n} from '@slotted/angular/menu';\n\nconst PEOPLE = ['Maria Chen', 'Tomás Ortega', 'Aiko Tanaka', 'Unassigned'];\nconst WAREHOUSES = ['Rotterdam', 'Leipzig', 'Lyon', 'Gdańsk'];\n\n@Component({\n  selector: 'app-menu-submenus',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlMenu,\n    SlMenuItem,\n    SlMenuItemMeta,\n    SlMenuRadioGroup,\n    SlMenuSeparator,\n    SlMenuTrigger,\n  ],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"order\">\n      SO-10482\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #order>\n      <button slMenuItem>View order</button>\n      <button slMenuItem [slMenuTriggerFor]=\"assign\">\n        Assign to <span slMenuItemMeta>{{ assignee() }}</span>\n      </button>\n      <sl-menu #assign>\n        <sl-menu-radio-group [(value)]=\"assignee\">\n          @for (person of people; track person) {\n            <button slMenuRadioItem [value]=\"person\">{{ person }}</button>\n          }\n        </sl-menu-radio-group>\n      </sl-menu>\n      <button slMenuItem [slMenuTriggerFor]=\"move\">Move to warehouse</button>\n      <sl-menu #move>\n        @for (warehouse of warehouses; track warehouse) {\n          <button slMenuItem>{{ warehouse }}</button>\n        }\n      </sl-menu>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\">Cancel order…</button>\n    </sl-menu>\n  `,\n})\nexport class MenuSubmenus {\n  protected readonly people = PEOPLE;\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly assignee = signal<string | undefined>('Maria Chen');\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "triggers",
+      "title": "triggers.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd, SlIconButton } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';\nimport {\n  SlSplitButton,\n  SlSplitButtonMenuTrigger,\n  SlSplitButtonPrimary,\n} from '@slotted/angular/split-button';\n\n@Component({\n  selector: 'app-menu-triggers',\n  imports: [\n    SlButton,\n    SlButtonEnd,\n    SlGlyph,\n    SlIconButton,\n    SlInline,\n    SlMenu,\n    SlMenuItem,\n    SlMenuTrigger,\n    SlSplitButton,\n    SlSplitButtonMenuTrigger,\n    SlSplitButtonPrimary,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton variant=\"outline\" [slMenuTriggerFor]=\"exportMenu\">\n        Export\n        <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n      <sl-menu #exportMenu>\n        <button slMenuItem>CSV for spreadsheets</button>\n        <button slMenuItem>PDF summary</button>\n        <button slMenuItem>Accounting journal</button>\n      </sl-menu>\n\n      <button slIconButton aria-label=\"More actions for SO-10482\" [slMenuTriggerFor]=\"more\">\n        <svg slGlyph name=\"ellipsis\"></svg>\n      </button>\n      <sl-menu #more align=\"end\">\n        <button slMenuItem>Copy order number</button>\n        <button slMenuItem>Add internal note</button>\n        <button slMenuItem>Open customer</button>\n      </sl-menu>\n\n      <div slSplitButton>\n        <button slSplitButtonPrimary>Ship order</button>\n        <button\n          slSplitButtonMenuTrigger\n          aria-label=\"More ways to ship\"\n          [slMenuTriggerFor]=\"ship\"\n        ></button>\n        <sl-menu #ship>\n          <button slMenuItem>Ship and print label</button>\n          <button slMenuItem>Ship part of the order…</button>\n          <button slMenuItem>Schedule for tomorrow</button>\n        </sl-menu>\n      </div>\n    </div>\n  `,\n})\nexport class MenuTriggers {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typeahead",
+      "title": "typeahead.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlMenu, SlMenuItem, SlMenuItemMeta, SlMenuTrigger } from '@slotted/angular/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\n@Component({\n  selector: 'app-menu-typeahead',\n  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuItemMeta, SlMenuTrigger],\n  template: `\n    <button slButton variant=\"outline\" [slMenuTriggerFor]=\"carrierMenu\">\n      Ship with\n      <span slButtonEnd><svg slGlyph name=\"chevron-down\"></svg></span>\n    </button>\n    <sl-menu #carrierMenu>\n      @for (carrier of carriers; track carrier.name) {\n        <button slMenuItem>\n          {{ carrier.name }} <span slMenuItemMeta>{{ carrier.transit }}</span>\n        </button>\n      }\n    </sl-menu>\n  `,\n})\nexport class MenuTypeahead {\n  protected readonly carriers = CARRIERS;\n}\n",
+      "verdict": "example"
+    }
+  ]
+}