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

package/docs/navigation-menu.json

@@ -0,0 +1,529 @@
+{
+  "family": "navigation-menu",
+  "ui": "navigation-menu",
+  "binding": "angular",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Site sections that open panels of links."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ],
+    "columns": [
+      1,
+      2,
+      3
+    ],
+    "arrow": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "navigationMenu": {
+      "nativeElement": "nav",
+      "defaults": {
+        "size": "md",
+        "orientation": "horizontal",
+        "openDelay": 200,
+        "closeDelay": 300,
+        "closeOnSelect": true,
+        "arrow": false
+      },
+      "capabilities": [
+        "open",
+        "orientation",
+        "size",
+        "disabled",
+        "wiring",
+        "content"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "current",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "list",
+        "item",
+        "trigger",
+        "indicator",
+        "link",
+        "content",
+        "links",
+        "group",
+        "group-label",
+        "icon",
+        "label",
+        "description",
+        "footer",
+        "viewport",
+        "arrow"
+      ],
+      "defaultsReason": "Axis defaults and the hover delays. The uncontrolled start is defaultValue, in React alone: Angular ships one model() for value"
+    }
+  },
+  "docs": {
+    "navigationMenu": {
+      "imports": {
+        "source": "import { SlNavigationMenu, SlNavigationMenuContent, SlNavigationMenuDescription, SlNavigationMenuFooter, SlNavigationMenuGroup, SlNavigationMenuGroupLabel, SlNavigationMenuIcon, SlNavigationMenuItem, SlNavigationMenuLabel, SlNavigationMenuLink, SlNavigationMenuLinks, SlNavigationMenuList, SlNavigationMenuTrigger, provideNavigationMenuDefaults } from '@slotted/angular/navigation-menu';",
+        "selector": "[slNavigationMenu], ul[slNavigationMenuList], li[slNavigationMenuItem], button[slNavigationMenuTrigger], [slNavigationMenuContent], a[slNavigationMenuLink], ul[slNavigationMenuLinks], [slNavigationMenuGroup], [slNavigationMenuGroupLabel], [slNavigationMenuIcon], [slNavigationMenuLabel], [slNavigationMenuDescription], [slNavigationMenuFooter]",
+        "exportAs": "slNavigationMenu, slNavigationMenuItem, slNavigationMenuTrigger, slNavigationMenuContent, slNavigationMenuLink"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the nav carrying slNavigationMenu, or a div inside a panel",
+          "required": true,
+          "purpose": "The navigation landmark, named by messages.navigation unless the consumer wrote an aria-label. position: relative — the surface and every panel are placed against it — and the measured geometry is written on it."
+        },
+        {
+          "part": "list",
+          "element": "ul",
+          "required": true,
+          "purpose": "The sections and the top-level links, in a row or a column."
+        },
+        {
+          "part": "item",
+          "element": "li",
+          "required": true,
+          "purpose": "One section — a trigger followed by its panel — or one top-level link. data-value names it; data-open while its panel is shown; data-disabled when it refuses interaction."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": false,
+          "purpose": "The section’s button: aria-expanded, aria-controls pointing at its panel, data-open, and data-current while its panel holds the current page. Always a native button, because the family wires it."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The chevron-down Glyph element at the trigger’s end, a half turn while open; chevron-right in a directional box in a column."
+        },
+        {
+          "part": "link",
+          "element": "the a carrying slNavigationMenuLink",
+          "required": false,
+          "purpose": "A destination, at the top level beside the triggers or inside a panel. aria-current=\"page\" and data-current while current; aria-disabled with the press refused while disabled, the href kept."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": false,
+          "purpose": "One section’s panel, after its trigger in the same item: hidden while closed, data-open while shown, data-motion while it crosses another. A query container sized by its columns."
+        },
+        {
+          "part": "links",
+          "element": "ul",
+          "required": false,
+          "purpose": "The grid of links in a panel or a group. Its columns come from the panel’s columns and fall to one below 480 pixels of panel."
+        },
+        {
+          "part": "group",
+          "element": "div",
+          "required": false,
+          "purpose": "A column of a panel with a title: role=\"group\", named by its group-label."
+        },
+        {
+          "part": "group-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The group’s title, in the small type and the muted ink."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "A rich link’s mark, standing on the title’s first line and aligned to its letters."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": false,
+          "purpose": "A rich link’s title. It wraps rather than clips."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "A rich link’s description: two lines to the eye, the whole text in the DOM."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The panel’s last row, under a rule that runs the panel’s width: the consumer’s call to action, its words starting in the links’ column."
+        },
+        {
+          "part": "viewport",
+          "element": "div",
+          "required": true,
+          "purpose": "The one surface — ground, edge, shadow, radius — rendered after the list, sized and placed from the open panel and moving between sections. Not rendered by a nested root."
+        },
+        {
+          "part": "arrow",
+          "element": "span",
+          "required": false,
+          "purpose": "The mark on the surface’s edge that points at the open trigger, sliding with the surface. Rendered when arrow is true."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "model<string | null>",
+          "defaultValue": "null",
+          "appliesTo": "slNavigationMenu",
+          "description": "The open section’s value, two-way; null is none"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slNavigationMenu, provideNavigationMenuDefaults",
+          "description": "The control step of a trigger and of a top-level link"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "slNavigationMenu",
+          "description": "A row under which panels open, or a column beside which they open. A nested menu is vertical unless it says otherwise"
+        },
+        {
+          "name": "openDelay",
+          "type": "number",
+          "defaultValue": "200",
+          "appliesTo": "slNavigationMenu, provideNavigationMenuDefaults",
+          "description": "Milliseconds a pointer rests on a trigger before its section opens. With a section open, another one opens at once"
+        },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "defaultValue": "300",
+          "appliesTo": "slNavigationMenu, provideNavigationMenuDefaults",
+          "description": "Milliseconds a pointer leaving the root waits before the section closes; a return cancels it"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slNavigationMenu, provideNavigationMenuDefaults, slNavigationMenuLink",
+          "description": "Following a link inside a panel closes every level. A link’s own value wins"
+        },
+        {
+          "name": "arrow",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slNavigationMenu, provideNavigationMenuDefaults",
+          "description": "Draws the mark on the surface’s edge that points at the open trigger"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<NavigationMenuMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slNavigationMenu",
+          "description": "Words laid over the language in force: the landmark’s name when the consumer gives no aria-label (navigation)"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slNavigationMenuItem",
+          "description": "The item’s identity: what the root’s value names it by. Reaches the DOM as data-value"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slNavigationMenuItem, slNavigationMenuLink",
+          "description": "The section never opens and its trigger takes the native attribute; a link keeps its href and refuses the press"
+        },
+        {
+          "name": "columns",
+          "type": "1 | 2 | 3",
+          "defaultValue": "1",
+          "appliesTo": "slNavigationMenuContent",
+          "description": "How many columns of links or groups the panel lays out; the panel’s width follows"
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slNavigationMenuLink",
+          "description": "This link is the page the reader is on. Unstated, an aria-current=\"page\" that routerLinkActive wrote is read"
+        }
+      ],
+      "composition": [
+        {
+          "name": "the element",
+          "type": "nav, div, ul, li, button, a, span",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every directive goes on the consumer’s own element, so routerLink, routerLinkActive, native attributes and (click) live where they always do. The trigger projects the consumer’s words and adds the chevron"
+        },
+        {
+          "name": "exportAs",
+          "type": "slNavigationMenu, slNavigationMenuItem, slNavigationMenuTrigger, slNavigationMenuContent, slNavigationMenuLink",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "The root instance carries open(value), close(), focus(value?) and the value model; an item its value and open signal"
+        },
+        {
+          "name": "provideNavigationMenuDefaults()",
+          "type": "{ size, openDelay, closeDelay, closeOnSelect, arrow }",
+          "defaultValue": "—",
+          "appliesTo": "a component or route’s providers",
+          "description": "The decisions an application takes once, through the NAVIGATION_MENU_DEFAULTS token. A menu that states any of them itself still wins"
+        },
+        {
+          "name": "injectNavigationMenuDefaults()",
+          "type": "() => NavigationMenuDefaults",
+          "defaultValue": "—",
+          "appliesTo": "inside an injection context",
+          "description": "What a menu renders as here, before it states anything of its own"
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<string | null>: value, previous, reason (pointer | keyboard | escape | outsidePress | blur | select | programmatic), source and cancel()",
+          "when": "Before the open section moves: a press or a resting pointer on a trigger, a pointer leaving the root, Escape, a press outside, focus leaving the root, a panel link followed, or open()/close() on the instance. Cancelling keeps the section, and [(value)] stays where it was."
+        },
+        {
+          "name": "(click), (pointerenter) on a trigger; (click) on a link",
+          "payload": "the element’s own events",
+          "when": "Whenever the element fires them, on the consumer’s own element. preventDefault() in (click) refuses the family’s part."
+        }
+      ],
+      "accessibility": [
+        "The pattern is the WAI-ARIA APG’s Disclosure Navigation Menu (w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/), and no menu, menubar or menuitem role is written: the example’s own note refuses them for a site’s navigation. The DOM is nav > ul > li > (button + div) and (a), so a reader hears a navigation landmark, a list of so many items, a button that is collapsed or expanded, and links.",
+        "Each panel follows its trigger in the DOM and is hidden while closed, so Tab reaches its links straight after the trigger — the order the pattern assumes — with no sentinel elements and no tabindex written anywhere. The arrow keys, Home and End are the pattern’s optional shortcut over that order, not a replacement for it.",
+        "Escape closes the open section and returns focus to its trigger; focus leaving the root, a press outside it and a followed link close it too, each with its own reason so an application can tell them apart.",
+        "The current page is aria-current=\"page\" on its link and nowhere else; routerLinkActive with ariaCurrentWhenActive writes it and the family reads it. The trigger of the section holding it carries data-current for the stylesheet and no ARIA.",
+        "A disabled link is aria-disabled with its href kept: perceivable, focusable, and refused on press. A disabled section’s trigger takes the native attribute. The item carries data-disabled and never aria-disabled, which ARIA 1.2 deprecates on listitem.",
+        "Hover never decides anything a press cannot: a touch never opens by hover, and every section opens by its button. Identifiers come from an application-scoped factory, so a server response and the first client render agree."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--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-line-height",
+    "--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-current-edge",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-instant",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-navigation-menu-active-background",
+    "--slotted-navigation-menu-border-color",
+    "--slotted-navigation-menu-color",
+    "--slotted-navigation-menu-column-size",
+    "--slotted-navigation-menu-current-background",
+    "--slotted-navigation-menu-current-color",
+    "--slotted-navigation-menu-current-edge",
+    "--slotted-navigation-menu-hover-background",
+    "--slotted-navigation-menu-muted-color",
+    "--slotted-navigation-menu-nested-list-size",
+    "--slotted-navigation-menu-offset",
+    "--slotted-navigation-menu-radius",
+    "--slotted-navigation-menu-shadow",
+    "--slotted-navigation-menu-surface",
+    "--slotted-navigation-menu-viewport-radius",
+    "--slotted-radius-lg",
+    "--slotted-radius-xs",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-6",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Every axis from the controls. Rest the pointer on a section, press it, walk the row with the arrow keys, and widen or narrow the window: the surface follows the open trigger and moves to fit.",
+      "language": "html",
+      "source": "<nav slNavigationMenu aria-label=\"Main\">\n  <ul slNavigationMenuList>\n    <li slNavigationMenuItem value=\"products\">\n      <button slNavigationMenuTrigger>Products</button>\n      <div slNavigationMenuContent>…</div>\n    </li>\n    <li slNavigationMenuItem value=\"docs\">\n      <a slNavigationMenuLink routerLink=\"/docs\">Documentation</a>\n    </li>\n  </ul>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Anatomy",
+      "note": "Every part, each labelled by its own name: a trigger and its panel in one item, a top-level link beside it, a group with its label, a rich link with icon, label and description, the footer, and the surface with its arrow.",
+      "language": "html",
+      "source": "<nav slNavigationMenu arrow [value]=\"'section'\">\n  <ul slNavigationMenuList>\n    <li slNavigationMenuItem value=\"section\">\n      <button slNavigationMenuTrigger>trigger</button>\n      <div slNavigationMenuContent columns=\"2\">\n        <div slNavigationMenuGroup>\n          <div slNavigationMenuGroupLabel>group-label</div>\n          <ul slNavigationMenuLinks>\n            <li>\n              <a slNavigationMenuLink href=\"/a\"\n                ><span slNavigationMenuIcon>…</span><span slNavigationMenuLabel>label</span\n                ><span slNavigationMenuDescription>description</span></a\n              >\n            </li>\n          </ul>\n        </div>\n        <div slNavigationMenuFooter>footer</div>\n      </div>\n    </li>\n    <li slNavigationMenuItem value=\"link\"><a slNavigationMenuLink href=\"/link\">link</a></li>\n  </ul>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "links",
+      "title": "A panel of plain links",
+      "note": "The shortest panel: one column of words at the control’s height. Its first letter starts in the column the trigger’s label starts in, because the surface opens at the trigger and the insets add up to the control’s.",
+      "language": "html",
+      "source": "<li slNavigationMenuItem value=\"company\">\n  <button slNavigationMenuTrigger>Company</button>\n  <div slNavigationMenuContent>\n    <ul slNavigationMenuLinks>\n      <li><a slNavigationMenuLink routerLink=\"/about\">About us</a></li>\n      <li><a slNavigationMenuLink routerLink=\"/careers\">Careers</a></li>\n    </ul>\n  </div>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "rich",
+      "title": "Rich links in two columns",
+      "note": "A mark, a title and two lines of description per destination, in columns=\"2\". The mark sits on the title’s letters, not in the middle of its line; a description longer than two lines is cut to the eye and read whole.",
+      "language": "html",
+      "source": "<div slNavigationMenuContent columns=\"2\">\n  <ul slNavigationMenuLinks>\n    <li>\n      <a slNavigationMenuLink routerLink=\"/warehouse\">\n        <span slNavigationMenuIcon><ng-icon name=\"lucideWarehouse\" /></span>\n        <span slNavigationMenuLabel>Warehouse</span>\n        <span slNavigationMenuDescription>Receipts, issues and stock by location.</span>\n      </a>\n    </li>\n  </ul>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "groups",
+      "title": "Groups as columns",
+      "note": "Three titled groups in columns=\"3\", each named by its label for a screen reader. Below 480 pixels of panel the groups stack two and one, and the lists inside fall to one column.",
+      "language": "html",
+      "source": "<div slNavigationMenuContent columns=\"3\">\n  <div slNavigationMenuGroup>\n    <div slNavigationMenuGroupLabel>By industry</div>\n    <ul slNavigationMenuLinks>\n      <li><a slNavigationMenuLink routerLink=\"/retail\">Retail</a></li>\n    </ul>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "footer",
+      "title": "A footer with a call to action",
+      "note": "The panel’s last row under a rule that runs its full width; the words start in the links’ column and the action ends on their edge. The action is the consumer’s own Button.",
+      "language": "html",
+      "source": "<div slNavigationMenuFooter>\n  <span slText size=\"xs\" tone=\"muted\">New: demand forecast per warehouse.</span>\n  <a slButtonLink size=\"sm\" routerLink=\"/products\">See all</a>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "current",
+      "title": "Where the reader is",
+      "note": "current on a link — or the aria-current a router writes — is the page the reader is on, drawn on the accent ground. The section holding it takes the accent ink on its trigger, so it reads with every panel closed.",
+      "language": "html",
+      "source": "<a slNavigationMenuLink routerLink=\"/fleet\" routerLinkActive ariaCurrentWhenActive=\"page\">Fleet</a>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "vertical",
+      "title": "A column of sections",
+      "note": "orientation=\"vertical\": the panel opens at the column’s end, level with the trigger, and slides in along the line. In a column with no room at its end — a phone — it drops under the trigger and the chevron turns to point at it.",
+      "language": "html",
+      "source": "<nav slNavigationMenu orientation=\"vertical\" arrow>…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "nested",
+      "title": "A second level in the same panel",
+      "note": "A slNavigationMenu inside a panel is a second level: a div, vertical, with no surface of its own. Its open section stands beside its list behind a rule that runs the full height, and following a link there closes every level.",
+      "language": "html",
+      "source": "<div slNavigationMenuContent columns=\"3\">\n  <div slNavigationMenu [value]=\"'tools'\">\n    <ul slNavigationMenuList>\n      <li slNavigationMenuItem value=\"tools\">\n        <button slNavigationMenuTrigger>Tools</button>\n        <div slNavigationMenuContent columns=\"2\">…</div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Rest, an open section holding the pointer’s ground, a current section in the accent ink, a current link on the accent ground, a disabled section and a disabled link — readable, refused, and still in the tab order.",
+      "language": "html",
+      "source": "<li slNavigationMenuItem value=\"partners\" disabled>\n  <button slNavigationMenuTrigger>Partners</button>\n  <div slNavigationMenuContent></div>\n</li>\n<li slNavigationMenuItem value=\"blog\">\n  <a slNavigationMenuLink disabled href=\"/blog\">Blog</a>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "Sizes",
+      "note": "sm, md and lg read the control scale — 30, 34 and 38 pixels at comfortable — so the row stands at the height of the field and the button beside it in any density.",
+      "language": "html",
+      "source": "<nav slNavigationMenu size=\"sm\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A section named in eight words, a title that wraps to two lines, a description cut after two, a link with no mark and a reference with no spaces: the panel holds its columns and the surface holds the panel.",
+      "language": "html",
+      "source": "<span slNavigationMenuLabel>Replenishment planning between regional warehouses</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "controlled",
+      "title": "The open section, owned by the application",
+      "note": "[(value)] and valueChangeRequest: every request carries its reason — pointer, keyboard, escape, outsidePress, blur, select or programmatic — and the application decides. The log under the row prints each one.",
+      "language": "html",
+      "source": "<nav slNavigationMenu [(value)]=\"section\" (valueChangeRequest)=\"log($event.reason)\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Decided once for the application",
+      "note": "provideNavigationMenuDefaults() sets the hover delays, closeOnSelect, the size and the arrow for every menu under it; an instance that states any of them still wins. Here the menu opens fifty milliseconds after the pointer rests.",
+      "language": "html",
+      "source": "<!-- providers: [provideNavigationMenuDefaults({ arrow: true, openDelay: 50, size: 'sm' })] -->\n<nav slNavigationMenu>…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "In a site header, with a router",
+      "note": "The family in the context region of a slTopNavigation, beside the mark and the account; each link carries a routerLink with routerLinkActive, which writes aria-current, and the family reads it.",
+      "language": "html",
+      "source": "<a slNavigationMenuLink routerLink=\"/fleet\" routerLinkActive ariaCurrentWhenActive=\"page\">Fleet</a>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab reaches every top-level control and the links of an open panel after its trigger. Enter and Space toggle a section; ArrowLeft and ArrowRight walk the row; ArrowDown enters an open panel and ArrowUp from its first link returns to the trigger; Home and End reach the ends; Escape closes and lands on the trigger.",
+      "language": "html",
+      "source": "<nav slNavigationMenu #menu=\"slNavigationMenu\">…</nav>\n<button type=\"button\" (click)=\"menu.focus('products')\">Focus Products</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "A navigation landmark named Main, a list of four items, “Products, button, collapsed”, and on Enter the panel’s links after it in the reading order. No menu role is written anywhere.",
+      "language": "html",
+      "source": "<nav slNavigationMenu aria-label=\"Main\">…</nav>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}