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

package/docs/side-navigation.json

@@ -0,0 +1,632 @@
+{
+  "family": "side-navigation",
+  "ui": "side-navigation",
+  "binding": "angular",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Vertical navigation with groups and counts."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "mode": [
+      "auto",
+      "expanded",
+      "compact"
+    ],
+    "multiple": [
+      true,
+      false
+    ],
+    "autoExpand": [
+      true,
+      false
+    ],
+    "guides": [
+      true,
+      false
+    ],
+    "landmark": [
+      true,
+      false
+    ],
+    "compactAt": [
+      96
+    ],
+    "truncate": [
+      "end",
+      "middle",
+      "none"
+    ]
+  },
+  "members": {
+    "sideNavigation": {
+      "nativeElement": "nav",
+      "defaults": {
+        "size": "md",
+        "mode": "auto",
+        "multiple": true,
+        "autoExpand": true,
+        "guides": true,
+        "landmark": true,
+        "compactAt": 96,
+        "truncate": "end"
+      },
+      "capabilities": [
+        "open",
+        "current",
+        "size",
+        "appearance",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "current",
+        "expanded",
+        "open",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "section",
+        "section-label",
+        "list",
+        "item",
+        "link",
+        "trigger",
+        "icon",
+        "label",
+        "description",
+        "end",
+        "count",
+        "indicator",
+        "actions",
+        "group",
+        "divider",
+        "skeleton",
+        "flyout"
+      ],
+      "defaultsReason": "Axis defaults only. The uncontrolled starting values are the state models' own uncontrolled names and exist in React alone: Angular ships one model() for each of expanded, flyout and value, which is both sides. Listing them here would oblige the Angular reference page to document props it does not have"
+    }
+  },
+  "docs": {
+    "sideNavigation": {
+      "imports": {
+        "source": "import { SlSideNavigation, SlSideNavigationActions, SlSideNavigationCount, SlSideNavigationDescription, SlSideNavigationDivider, SlSideNavigationEnd, SlSideNavigationGroup, SlSideNavigationIcon, SlSideNavigationItem, SlSideNavigationLabel, SlSideNavigationLink, SlSideNavigationList, SlSideNavigationSection, SlSideNavigationSectionLabel, SlSideNavigationSkeleton, SlSideNavigationTrigger, provideSideNavigationDefaults } from '@slotted/angular/side-navigation';",
+        "selector": "[slSideNavigation], [slSideNavigationSection], [slSideNavigationSectionLabel], ul[slSideNavigationList], li[slSideNavigationItem], a[slSideNavigationLink], button[slSideNavigationLink], button[slSideNavigationTrigger], [slSideNavigationIcon], [slSideNavigationLabel], [slSideNavigationDescription], [slSideNavigationCount], [slSideNavigationEnd], [slSideNavigationActions], ul[slSideNavigationGroup], li[slSideNavigationDivider], li[slSideNavigationSkeleton]",
+        "exportAs": "slSideNavigation, slSideNavigationItem, slSideNavigationLink, slSideNavigationTrigger, slSideNavigationGroup"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the nav carrying slSideNavigation, or a div inside app-shell",
+          "required": true,
+          "purpose": "The column, and the query container it answers: data-ui=\"side-navigation\", the axes, data-compact once measured. A nav with an aria-label on its own; inside the shell’s nav region, which is already the landmark, a div."
+        },
+        {
+          "part": "section",
+          "element": "div",
+          "required": false,
+          "purpose": "A titled run of destinations. Several may stand under one root."
+        },
+        {
+          "part": "section-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The section’s title, on the marks’ own edge. It wraps rather than clips, and in the rail it becomes a rule."
+        },
+        {
+          "part": "list",
+          "element": "ul",
+          "required": true,
+          "purpose": "The items of one level: the top level, or a section’s. A real list, so a reader hears how many."
+        },
+        {
+          "part": "item",
+          "element": "li",
+          "required": true,
+          "purpose": "A row: a link, a trigger, or both, plus optional actions and a group. Carries data-value, data-current, data-expanded, data-open and data-disabled — the states the stylesheet reads."
+        },
+        {
+          "part": "link",
+          "element": "a[slSideNavigationLink] with an href, or button[slSideNavigationLink]",
+          "required": false,
+          "purpose": "The destination, with aria-current=\"page\" while current; or a command in the column as a button with the same row. aria-disabled and a refused press while disabled, the href kept."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": false,
+          "purpose": "The disclosure button of the group: aria-expanded, aria-controls. Alone it is the whole row; beside a link it is a mark-only button named by the row’s label. In the rail, a trigger without a link opens the flyout."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The box the mark stands in, the width the shell publishes for a row mark. What is left of a row in the rail."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The row’s text: one line, cut at the end or in the middle by truncate and carried whole by the tooltip when it is cut. In the rail it leaves the eye and not the DOM."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "The second line, in the muted ink; the page’s own ink on the current row. Hidden in the rail."
+        },
+        {
+          "part": "end",
+          "element": "span",
+          "required": false,
+          "purpose": "The suffix with a tone: a Badge, a Kbd. Hidden in the rail, where the mark carries a dot instead."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": false,
+          "purpose": "A quantity beside a destination, drawn by the family as tabular figures in the muted ink. Never cut. Hidden in the rail, where the mark carries a dot."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The trigger’s chevron, the chevron-right Glyph element in a directional icon box: along the reading direction while closed, down while open, mirrored in a right-to-left document."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Controls beside the row, outside its a or button. Hidden in the rail."
+        },
+        {
+          "part": "group",
+          "element": "ul",
+          "required": false,
+          "purpose": "An item’s children, named by the row’s label. Inline it is the second track of the item and opens with it; in the rail the same list is presented in the flyout."
+        },
+        {
+          "part": "divider",
+          "element": "li role=\"separator\"",
+          "required": false,
+          "purpose": "A rule between items that keeps the list a list."
+        },
+        {
+          "part": "skeleton",
+          "element": "li aria-hidden",
+          "required": false,
+          "purpose": "A row still arriving: an item’s geometry with Skeleton boxes for the mark and the label."
+        },
+        {
+          "part": "flyout",
+          "element": "div, in the portal container",
+          "required": false,
+          "purpose": "The layer beside the rail that presents one group. Composed from portal, positioner, presence and dismissable-layer; it carries its own data-ui because it stands outside the root."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "model<string | null>",
+          "defaultValue": "null",
+          "appliesTo": "slSideNavigation",
+          "description": "The current destination’s value, two-way. A link that states current itself, or carries an aria-current a router wrote, still wins"
+        },
+        {
+          "name": "expanded",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "slSideNavigation",
+          "description": "The set of open groups, two-way"
+        },
+        {
+          "name": "flyout",
+          "type": "model<string | null>",
+          "defaultValue": "null",
+          "appliesTo": "slSideNavigation",
+          "description": "The one group presented beside the rail, two-way. It never writes into expanded"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "The row height. md reads the geometry app-shell publishes, with the control scale as the fallback; sm and lg read their own steps"
+        },
+        {
+          "name": "mode",
+          "type": "'auto' | 'expanded' | 'compact'",
+          "defaultValue": "auto",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "auto is a rail below compactAt pixels of the root’s own width and a labelled column above; the other two force one"
+        },
+        {
+          "name": "truncate",
+          "type": "'end' | 'middle' | 'none'",
+          "defaultValue": "end",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "Where a label that does not fit is cut. end is the stylesheet’s ellipsis; middle keeps the start and the tail; none wraps. A cut label opens the tooltip with the whole text"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "Whether more than one group may be open at once. Off, opening one closes the rest"
+        },
+        {
+          "name": "autoExpand",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "Whether the ancestors of the current destination open by themselves, with the reason select"
+        },
+        {
+          "name": "guides",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "Whether a guide runs down each open group, under the parent’s mark or on its text edge"
+        },
+        {
+          "name": "landmark",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "Whether the family writes the landmark’s name. Unstated, it does on its own and not inside app-shell, whose nav region is already the landmark. The element is the consumer’s: a nav standing alone, a div inside the shell"
+        },
+        {
+          "name": "compactAt",
+          "type": "number",
+          "defaultValue": "96",
+          "appliesTo": "slSideNavigation, provideSideNavigationDefaults",
+          "description": "The width, in CSS pixels, under which mode=\"auto\" is compact. The stylesheet’s own breakpoint is the same number"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<SideNavigationMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slSideNavigation",
+          "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": "li[slSideNavigationItem]",
+          "description": "The item’s identity: what value, expanded and flyout name it by. Reaches the DOM as data-value"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "li[slSideNavigationItem]",
+          "description": "The row refuses the press and keeps its href, its name and its place in the tab order; the trigger takes the native attribute"
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "a[slSideNavigationLink]",
+          "description": "Stated on the row itself, it wins over the root’s value. Unstated, an aria-current the router wrote on the element (routerLinkActive with ariaCurrentWhenActive) is read instead"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "a[slSideNavigationLink]",
+          "description": "The destination, the element’s own; routerLink writes it. On button[slSideNavigationLink] the row is a command in the column, never current"
+        },
+        {
+          "name": "labelSize",
+          "type": "number | string",
+          "defaultValue": "60%",
+          "appliesTo": "li[slSideNavigationSkeleton]",
+          "description": "How wide the label’s bar is drawn"
+        }
+      ],
+      "composition": [
+        {
+          "name": "the element",
+          "type": "nav, div, ul, li, a, button, 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. A part with a template — link, trigger, skeleton — projects the consumer’s content"
+        },
+        {
+          "name": "exportAs",
+          "type": "slSideNavigation, slSideNavigationItem, slSideNavigationLink, slSideNavigationTrigger, slSideNavigationGroup",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "The root instance carries focus(), expand(value), collapse(value) and the three models; an item its value, expanded and current signals"
+        },
+        {
+          "name": "provideSideNavigationDefaults()",
+          "type": "{ size, mode, truncate, multiple, autoExpand, guides, landmark, compactAt }",
+          "defaultValue": "—",
+          "appliesTo": "a component or route’s providers",
+          "description": "The decisions an application takes once, through the SIDE_NAVIGATION_DEFAULTS token. A column that states any of them itself still wins"
+        },
+        {
+          "name": "injectSideNavigationDefaults()",
+          "type": "() => SideNavigationDefaults",
+          "defaultValue": "—",
+          "appliesTo": "inside an injection context",
+          "description": "What a column renders as here, before it states anything of its own"
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<string | null>: value, previous, reason (pointer | keyboard | programmatic), source and cancel()",
+          "when": "Before the current destination moves, on a press of an a with an href. Cancelling refuses; [(value)] then stays where it was."
+        },
+        {
+          "name": "expandedChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>: the whole set of open values, with reason (pointer | keyboard | select | escape | programmatic)",
+          "when": "Before a group opens or closes: a press on its trigger, Escape inside it, autoExpand reaching the current destination (select), or expand()/collapse() on the instance."
+        },
+        {
+          "name": "flyoutChangeRequest",
+          "payload": "ChangeRequest<string | null>: the group beside the rail or null, with reason (pointer | keyboard | select | escape | outsidePress | blur | resize | programmatic)",
+          "when": "Before the flyout opens or closes: a trigger pressed in the rail, a link pressed inside it, Escape, a press outside, focus leaving it, or the rail widening."
+        },
+        {
+          "name": "(click), (focus), (keydown) on every row",
+          "payload": "the element’s own events",
+          "when": "Whenever the a or button 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 with Top-Level Links (w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/), and no role is written: the DOM is nav > ul > li > (a | button) + ul, so a reader hears a navigation landmark, a list of so many items, a link or a button, and a nested list. The tree role is refused on the APG’s own advice — it demands functionality a site’s navigation does not need.",
+        "Every link and trigger is in the page tab sequence and nothing here writes tabindex. The arrow keys, Home and End — optional in the pattern and adopted — walk the visible rows, into the flyout when it is open; Escape closes the group holding focus and lands on its trigger, as the pattern lists. A closed group is visibility: hidden, so its rows leave the tab sequence and the accessibility tree together.",
+        "A trigger carries aria-expanded and aria-controls, and its group aria-labelledby pointing at the row’s label; a trigger beside a link is named by that same label through aria-labelledby, so the hybrid row is heard as “Reports, link” then “Reports, button, collapsed”. Identifiers come from an application-scoped factory, so a server response and the first client render agree.",
+        "The current destination is aria-current=\"page\" on the link and nowhere else. The parent of a destination the reader cannot see carries data-current for the stylesheet and no ARIA, because the destination is the thing that is current.",
+        "In the rail the label is clipped to a pixel rather than removed, so the link keeps its accessible name; a tooltip repeats it on hover, on visible focus and on press-and-hold. Under truncate a row whose label the binding measured as cut opens the same tooltip, and a middle cut writes the whole text as aria-label so the name is the name and not the cut.",
+        "A disabled destination is aria-disabled with its href kept: perceivable, focusable, and refused on press, so a reader can reach the row and hear why it is unavailable. A disabled trigger takes the native attribute. The item carries data-disabled and never aria-disabled, which ARIA 1.2 deprecates on listitem."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-app-shell-row-font-size",
+    "--slotted-app-shell-row-gap",
+    "--slotted-app-shell-row-height",
+    "--slotted-app-shell-row-inset",
+    "--slotted-app-shell-row-line-height",
+    "--slotted-app-shell-row-mark",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--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-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-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-radius-md",
+    "--slotted-shadow-md",
+    "--slotted-side-navigation-active-background",
+    "--slotted-side-navigation-color",
+    "--slotted-side-navigation-current-background",
+    "--slotted-side-navigation-current-color",
+    "--slotted-side-navigation-current-description-color",
+    "--slotted-side-navigation-current-edge",
+    "--slotted-side-navigation-description-color",
+    "--slotted-side-navigation-description-gap",
+    "--slotted-side-navigation-dot-color",
+    "--slotted-side-navigation-dot-size",
+    "--slotted-side-navigation-flyout-border-color",
+    "--slotted-side-navigation-flyout-measure",
+    "--slotted-side-navigation-flyout-min-measure",
+    "--slotted-side-navigation-flyout-radius",
+    "--slotted-side-navigation-flyout-shadow",
+    "--slotted-side-navigation-flyout-surface",
+    "--slotted-side-navigation-guide-color",
+    "--slotted-side-navigation-hover-background",
+    "--slotted-side-navigation-hover-color",
+    "--slotted-side-navigation-indent",
+    "--slotted-side-navigation-indent-step",
+    "--slotted-side-navigation-radius",
+    "--slotted-side-navigation-row-gap",
+    "--slotted-side-navigation-section-color",
+    "--slotted-side-navigation-section-gap",
+    "--slotted-side-navigation-section-label-gap",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-7",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--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": "One column with every axis on it, driven by the controls below the canvas. Tab reaches every row; the arrows walk them.",
+      "language": "html",
+      "source": "<nav slSideNavigation [(value)]=\"value\">\n  <ul slSideNavigationList>\n    <li slSideNavigationItem value=\"dashboard\">\n      <a slSideNavigationLink routerLink=\"/dashboard\">\n        <span slSideNavigationIcon><lucide-icon name=\"chart-no-axes-column\" /></span>\n        <span slSideNavigationLabel>Dashboard</span>\n      </a>\n    </li>\n    <li slSideNavigationItem value=\"loads\">\n      <a slSideNavigationLink routerLink=\"/loads\">\n        <span slSideNavigationIcon><lucide-icon name=\"package\" /></span>\n        <span slSideNavigationLabel>Loads</span>\n        <span slSideNavigationCount>12</span>\n      </a>\n    </li>\n  </ul>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, drawn as its own name",
+      "note": "The frame with no product in it: each part the contract declares, labelled, so the family’s box can be told from the product’s content.",
+      "language": "html",
+      "source": "<nav slSideNavigation>\n  <div slSideNavigationSection>\n    <div slSideNavigationSectionLabel>section-label</div>\n    <ul slSideNavigationList>\n      <li slSideNavigationItem value=\"row\">\n        <a slSideNavigationLink href=\"/row\">\n          <span slSideNavigationIcon>…</span>\n          <span slSideNavigationLabel>label</span>\n          <span slSideNavigationDescription>description</span>\n          <span slSideNavigationCount>12</span>\n        </a>\n        <div slSideNavigationActions>…</div>\n      </li>\n      <li slSideNavigationItem value=\"branch\">\n        <button slSideNavigationTrigger><span slSideNavigationLabel>trigger</span></button>\n        <ul slSideNavigationGroup>\n          …\n        </ul>\n      </li>\n      <li slSideNavigationDivider></li>\n      <li slSideNavigationSkeleton></li>\n    </ul>\n  </div>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "groups",
+      "title": "Groups that open and close",
+      "note": "A trigger is the whole row and its group opens on a track that grows to its own height; the chevron turns from along the line to down. Under multiple=false the sibling closes.",
+      "language": "html",
+      "source": "<li slSideNavigationItem value=\"deliveries\">\n  <button slSideNavigationTrigger>\n    <span slSideNavigationIcon><lucide-icon name=\"truck\" /></span>\n    <span slSideNavigationLabel>Deliveries</span>\n    <span slSideNavigationCount>38</span>\n  </button>\n  <ul slSideNavigationGroup>\n    <li slSideNavigationItem value=\"today\">\n      <a slSideNavigationLink routerLink=\"/deliveries/today\"\n        ><span slSideNavigationLabel>Today</span></a\n      >\n    </li>\n  </ul>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hybrid",
+      "title": "A destination that is also a parent",
+      "note": "The APG hybrid row: the link navigates and a mark-only trigger beside it opens the children, named by the row’s label. Five levels deep, the indent below the marked level is a constant step.",
+      "language": "html",
+      "source": "<li slSideNavigationItem value=\"reports\">\n  <a slSideNavigationLink routerLink=\"/reports\">\n    <span slSideNavigationIcon><lucide-icon name=\"chart-no-axes-column\" /></span>\n    <span slSideNavigationLabel>Reports</span>\n  </a>\n  <button slSideNavigationTrigger></button>\n  <ul slSideNavigationGroup>\n    …\n  </ul>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sections",
+      "title": "Sections, a divider and a command",
+      "note": "Two titled sections under one root, a divider between rows that keeps the list a list, and a row that is a button — a command in the column, never current.",
+      "language": "html",
+      "source": "<nav slSideNavigation>\n  <div slSideNavigationSection>\n    <div slSideNavigationSectionLabel>Operations</div>\n    <ul slSideNavigationList>\n      …\n    </ul>\n  </div>\n  <div slSideNavigationSection>\n    <div slSideNavigationSectionLabel>Administration</div>\n    <ul slSideNavigationList>\n      <li slSideNavigationDivider></li>\n      <li slSideNavigationItem value=\"new\">\n        <button slSideNavigationLink (click)=\"openDialog()\">\n          <span slSideNavigationIcon><lucide-icon name=\"plus\" /></span>\n          <span slSideNavigationLabel>New load</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "current",
+      "title": "Where the reader is",
+      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.",
+      "language": "html",
+      "source": "<nav slSideNavigation [value]=\"value()\" (valueChangeRequest)=\"value.set($event.value)\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "compact",
+      "title": "The rail",
+      "note": "Under mode=\"compact\" — or under 96 pixels of its own width — every part but the mark leaves the eye; the label stays in the DOM, a tooltip repeats it, and a row with a count carries a dot.",
+      "language": "html",
+      "source": "<nav slSideNavigation mode=\"compact\" value=\"loads\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "flyout",
+      "title": "A group beside the rail",
+      "note": "In the rail, pressing a trigger without a link presents its group in a layer beside it. ArrowDown walks into it, Escape returns to the trigger, and focus leaving it closes it.",
+      "language": "html",
+      "source": "<nav slSideNavigation mode=\"compact\" [(flyout)]=\"flyout\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "Three row heights",
+      "note": "md reads the row geometry app-shell publishes, so a column in the shell stands on the shell’s own edges; sm and lg read the control scale, and all three move with density.",
+      "language": "html",
+      "source": "<nav slSideNavigation size=\"sm\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "The states a row can be in",
+      "note": "Current, expanded, open, disabled, and the hover, press and focus every row answers. A disabled destination keeps its href and its name, and refuses the press.",
+      "language": "html",
+      "source": "<li slSideNavigationItem value=\"billing\" disabled>\n  <a slSideNavigationLink href=\"/billing\">\n    <span slSideNavigationIcon><lucide-icon name=\"credit-card\" /></span>\n    <span slSideNavigationLabel>Billing</span>\n    <span slSideNavigationDescription>Available on the Team plan</span>\n  </a>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A long label cut at the end with its whole text in the tooltip; the same column cut in the middle, where setembro and outubro stay apart; a URL; a title in another script; and wrapping, on request.",
+      "language": "html",
+      "source": "<nav slSideNavigation truncate=\"middle\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "A column still arriving",
+      "note": "Skeleton rows in the geometry of the rows they stand for, so nothing moves when the destinations land; the root carries aria-busy.",
+      "language": "html",
+      "source": "<nav slSideNavigation aria-busy=\"true\">\n  <ul slSideNavigationList>\n    <li slSideNavigationSkeleton labelSize=\"55%\"></li>\n    <li slSideNavigationSkeleton labelSize=\"70%\"></li>\n    <li slSideNavigationSkeleton labelSize=\"45%\"></li>\n  </ul>\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "shell",
+      "title": "Inside the shell",
+      "note": "The column in app-shell’s nav region: a div rather than a second landmark, rows on the shell’s published geometry, and the rail read from the region’s own width when the shell collapses.",
+      "language": "html",
+      "source": "<div slAppShell>\n  <header slAppShellBanner>…</header>\n  <nav slAppShellNav>\n    <div slAppShellNavBody>\n      <div slSideNavigation value=\"orders\">…</div>\n    </div>\n  </nav>\n  <main slAppShellMain>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Decided once for an application",
+      "note": "The provider carries the axes for every column under it — a product whose groups open one at a time, with no guides — and a column that states one itself still wins.",
+      "language": "ts",
+      "source": "@Component({\n  providers: [\n    provideSideNavigationDefaults({ guides: false, multiple: false, truncate: 'middle' }),\n  ],\n  template: '<nav slSideNavigation>…</nav>',\n})\nexport class Settings {}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composed with what sits beside it",
+      "note": "A Badge in end for a count that carries a tone, an Avatar in icon for a person, a Kbd for a shortcut, and a router’s own link through render, which is where aria-current comes from.",
+      "language": "html",
+      "source": "<a slSideNavigationLink routerLink=\"/loads\" routerLinkActive ariaCurrentWhenActive=\"page\">\n  <span slSideNavigationIcon><lucide-icon name=\"package\" /></span>\n  <span slSideNavigationLabel>Loads</span>\n  <span slSideNavigationEnd><span slBadge tone=\"danger\" size=\"sm\">3</span></span>\n</a>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Tab reaches every row. ArrowDown and ArrowUp walk the visible rows, Home and End jump, Escape closes the group holding focus and lands on its trigger. The reason each request carries is shown.",
+      "language": "html",
+      "source": "<nav\n  slSideNavigation\n  (expandedChangeRequest)=\"log($event.reason)\"\n  (valueChangeRequest)=\"log($event.reason)\"\n>\n  …\n</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "A navigation landmark holding a list; each branch a button with aria-expanded and aria-controls; each destination a link, one of them aria-current; a hybrid trigger named by its row.",
+      "language": "html",
+      "source": "<nav slSideNavigation aria-label=\"Main navigation\">…</nav>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport {\n  SlSideNavigation,\n  SlSideNavigationCount,\n  SlSideNavigationItem,\n  SlSideNavigationLabel,\n  SlSideNavigationLink,\n  SlSideNavigationList,\n} from '@slotted/angular/side-navigation';\n\n@Component({\n  selector: 'app-side-navigation-basic',\n  imports: [\n    SlSideNavigation,\n    SlSideNavigationCount,\n    SlSideNavigationItem,\n    SlSideNavigationLabel,\n    SlSideNavigationLink,\n    SlSideNavigationList,\n  ],\n  template: `\n    <nav slSideNavigation aria-label=\"Main navigation\" [(value)]=\"current\">\n      <ul slSideNavigationList>\n        <li slSideNavigationItem value=\"dashboard\">\n          <a slSideNavigationLink href=\"/dashboard\"><span slSideNavigationLabel>Dashboard</span></a>\n        </li>\n        <li slSideNavigationItem value=\"loads\">\n          <a slSideNavigationLink href=\"/loads\">\n            <span slSideNavigationLabel>Loads</span>\n            <span slSideNavigationCount>12</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\n  `,\n})\nexport class SideNavigationBasic {\n  readonly current = signal('loads');\n}\n",
+      "verdict": "example"
+    }
+  ]
+}