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

package/docs/app-shell.json

@@ -0,0 +1,835 @@
+{
+  "family": "app-shell",
+  "ui": "app-shell",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Application frame with header, nav, main and aside."
+  },
+  "axes": {
+    "primary": [
+      "banner",
+      "nav",
+      "main"
+    ],
+    "canvas": [
+      "inset",
+      "flush",
+      "floating",
+      "panel"
+    ],
+    "navMode": [
+      "inline",
+      "overlay",
+      "auto"
+    ],
+    "navSide": [
+      "start",
+      "end"
+    ],
+    "navSize": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "collapsedTo": [
+      "rail",
+      "hidden"
+    ],
+    "asideMode": [
+      "inline",
+      "overlay",
+      "auto"
+    ],
+    "asideSize": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "scroll": [
+      "content",
+      "document"
+    ],
+    "separation": [
+      "rule",
+      "tone"
+    ],
+    "modal": [
+      true,
+      false
+    ],
+    "escape": [
+      "close",
+      "none"
+    ],
+    "outsidePress": [
+      "close",
+      "none"
+    ],
+    "back": [
+      "close",
+      "none"
+    ],
+    "closeOnNavigate": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "appShell": {
+      "nativeElement": "div",
+      "defaults": {
+        "primary": "banner",
+        "canvas": "inset",
+        "navMode": "auto",
+        "navSide": "start",
+        "navSize": "md",
+        "collapsedTo": "rail",
+        "asideMode": "auto",
+        "asideSize": "md",
+        "scroll": "content",
+        "separation": "rule",
+        "modal": true,
+        "escape": "close",
+        "outsidePress": "close",
+        "back": "close",
+        "closeOnNavigate": true,
+        "minAsideExtent": 0.16,
+        "maxAsideExtent": 0.6
+      },
+      "capabilities": [
+        "open",
+        "extent",
+        "arrangement",
+        "size",
+        "appearance",
+        "wiring",
+        "loading"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "dragging"
+      ],
+      "parts": [
+        "root",
+        "skip",
+        "banner",
+        "brand",
+        "centre",
+        "actions",
+        "nav-toggle",
+        "nav",
+        "nav-rail",
+        "nav-header",
+        "nav-body",
+        "nav-footer",
+        "scrim",
+        "main",
+        "progress",
+        "aside",
+        "aside-resizer",
+        "aside-header",
+        "aside-body",
+        "aside-footer",
+        "aside-toggle",
+        "footer",
+        "layer"
+      ],
+      "defaultsReason": "Axis defaults only. The uncontrolled starting values are the state models own `uncontrolled` names, and they exist in one binding and not in the other: React ships navOpen and defaultNavOpen, asideOpen and defaultAsideOpen; Angular ships one model() for each that is both. Listing them here would oblige the Angular reference page to document props it does not have, which is levelling the two bindings down to the smaller shape — the thing references/frameworks.md says to record instead of doing"
+    }
+  },
+  "docs": {
+    "appShell": {
+      "imports": {
+        "source": "import {\n  SlAppShell,\n  SlAppShellActions,\n  SlAppShellAside,\n  SlAppShellAsideBody,\n  SlAppShellAsideFooter,\n  SlAppShellAsideHeader,\n  SlAppShellAsideResizer,\n  SlAppShellAsideToggle,\n  SlAppShellBanner,\n  SlAppShellBrand,\n  SlAppShellCentre,\n  SlAppShellFooter,\n  SlAppShellMain,\n  SlAppShellNav,\n  SlAppShellNavBody,\n  SlAppShellNavFooter,\n  SlAppShellNavHeader,\n  SlAppShellNavRail,\n  SlAppShellNavToggle,\n  SlAppShellProgress,\n  provideAppShellDefaults,\n} from '@slotted/angular/app-shell';",
+        "selector": "[slAppShell] on the frame; header[slAppShellBanner], nav[slAppShellNav], main[slAppShellMain], aside[slAppShellAside], footer[slAppShellFooter] on the regions; [slAppShellBrand], [slAppShellCentre], [slAppShellActions], [slAppShellNavRail], [slAppShellNavHeader], [slAppShellNavBody], [slAppShellNavFooter], [slAppShellAsideHeader], [slAppShellAsideBody], [slAppShellAsideFooter] on their parts; button[slAppShellNavToggle] and button[slAppShellAsideToggle] on the controls; [slAppShellProgress] on any element inside the frame, for the wait",
+        "exportAs": "slAppShell, slAppShellBanner, slAppShellBrand, slAppShellCentre, slAppShellActions, slAppShellNav, slAppShellNavRail, slAppShellNavHeader, slAppShellNavBody, slAppShellNavFooter, slAppShellMain, slAppShellAside, slAppShellAsideHeader, slAppShellAsideBody, slAppShellAsideFooter, slAppShellFooter, slAppShellNavToggle, slAppShellAsideToggle, slAppShellProgress"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The frame: a grid of four rows and three columns, and the query container the whole family answers. Deliberately not a sectioning element — a main inside an article stops being a landmark, and the root has to be placeable anywhere without changing what the five regions mean. Carries data-ui=\"app-shell\", every axis as a data-* attribute, and data-open for the navigation region."
+        },
+        {
+          "part": "skip",
+          "element": "div holding one a per region",
+          "required": false,
+          "purpose": "The links that jump past the chrome, written from the regions that rendered and are open: a link to a region nobody rendered, or to a pane the reader closed, is a dead destination. First focusable thing in the document, out of the flow until it is focused. Not a landmark."
+        },
+        {
+          "part": "banner",
+          "element": "header",
+          "required": false,
+          "purpose": "The banner landmark, earned from the element rather than from a role. Three clusters: what starts the line, what grows, what ends it."
+        },
+        {
+          "part": "brand",
+          "element": "div",
+          "required": false,
+          "purpose": "The start cluster: the toggle, the mark, the name of the application or of the workspace. Shortened to one line by default, so a name never pushes the frame wider than the space there is."
+        },
+        {
+          "part": "centre",
+          "element": "div",
+          "required": false,
+          "purpose": "The middle of the bar, and the one cluster that grows: a search field, a breadcrumb trail, the route title, tabs. Without it a bar is two clusters and a void — which is what the first version of this page photographed."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The end cluster: notifications, help, account. A control in it keeps its width; what runs out of room is the middle."
+        },
+        {
+          "part": "nav-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "The disclosure control for the navigation region: aria-expanded, aria-controls and the family’s own label, all taken from the shell’s context rather than from where it stands. Draws the panel-open or panel-close Glyph element by state, mirrored by navSide and by direction."
+        },
+        {
+          "part": "nav",
+          "element": "nav",
+          "required": false,
+          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
+        },
+        {
+          "part": "nav-rail",
+          "element": "div, or any element the directive is placed on",
+          "required": false,
+          "purpose": "A strip of marks before the column: the first level of a two-level navigation, inside the one navigation landmark and under its one open state. With it the region is two columns; closed to rail it keeps the strip and lets the column go. Recognised by :has(), so no attribute is written and a server render has the grid on its first paint."
+        },
+        {
+          "part": "nav-header",
+          "element": "div",
+          "required": false,
+          "purpose": "The pinned top of the column: the workspace switcher, the mark. Under primary=\"nav\" it takes the banner’s height, so the workspace and the bar sit on one line."
+        },
+        {
+          "part": "nav-body",
+          "element": "div",
+          "required": false,
+          "purpose": "The middle, and the only part of the column that scrolls. Ant and Mantine let the list overflow the region, which takes the account control off the screen the moment an application has more destinations than height."
+        },
+        {
+          "part": "nav-footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The pinned bottom: the account, the collapse control."
+        },
+        {
+          "part": "scrim",
+          "element": "div",
+          "required": false,
+          "purpose": "The veil under an overlaid region, mounted only while a layer is modal. It stops where the layer stops — under the banner — so the reader keeps their bearings."
+        },
+        {
+          "part": "main",
+          "element": "main with tabindex=\"-1\"",
+          "required": true,
+          "purpose": "The main landmark and the skip link’s destination. Without the tabindex the link moves the scroll and leaves the focus behind, in Safari and in Firefox."
+        },
+        {
+          "part": "progress",
+          "element": "the consumer’s element, holding one [slProgressBar] at placement=\"edge-start\"",
+          "required": false,
+          "purpose": "The wait for the next page. A transparent frame the stylesheet lays over main in every arrangement — its grid area, its margins, its corners — so the bar covers the line between the chrome and the content and the card’s corners clip it. Placed anywhere inside the frame; main is aria-busy while the bar is painted."
+        },
+        {
+          "part": "aside",
+          "element": "aside",
+          "required": false,
+          "purpose": "The complementary landmark, carrying the family’s own label. It opens and closes the way the navigation does — a column beside the content or a layer over it, by asideMode — and carries its own data-open, because the root’s is the navigation’s. Closed, it leaves the layout: a pane has no rail."
+        },
+        {
+          "part": "aside-resizer",
+          "element": "any element carrying slAppShellAsideResizer",
+          "required": false,
+          "purpose": "The pane’s inner edge, from the WAI-ARIA Window Splitter pattern: focusable, role=\"separator\", aria-controls the pane, its three values the extent as whole percentages of the shell. Placed inside the aside; rendering it is the capability. Drawn on the column alone — under asideMode=\"overlay\" or a closed pane it is hidden, and a row under the content hides it."
+        },
+        {
+          "part": "aside-header",
+          "element": "div",
+          "required": false,
+          "purpose": "The pinned top of the pane: its title, which takes the room, and the control that closes it."
+        },
+        {
+          "part": "aside-body",
+          "element": "div",
+          "required": false,
+          "purpose": "The middle, and the only part of the pane that scrolls. It stands on the inset the head and the foot stand on, so its content lines up with the title; inset=\"none\" drops it for content that brings its own — a page, a detail panel, a list to the edges."
+        },
+        {
+          "part": "aside-footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The pinned bottom: the actions that close the task the pane holds, aligned to the end."
+        },
+        {
+          "part": "aside-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "The disclosure control for the pane, with the navigation control’s wiring: in the pane’s own header, in the banner’s actions, or anywhere else, and there is still exactly one control carrying the pane’s state. The same pair of marks, turned the other way."
+        },
+        {
+          "part": "footer",
+          "element": "footer",
+          "required": false,
+          "purpose": "The contentinfo landmark: the application’s footer, not the page’s action bar — that one is footer[slPageFooter], inside main."
+        },
+        {
+          "part": "layer",
+          "element": "div with display: contents",
+          "required": true,
+          "purpose": "The application’s portal root, named once through setPortalContainer so every slDialog, slDrawer, slMenu and toast under this shell lands here instead of on the body."
+        }
+      ],
+      "api": [
+        {
+          "name": "navOpen",
+          "type": "model<boolean>",
+          "defaultValue": "true",
+          "appliesTo": "slAppShell",
+          "description": "Whether the navigation region is showing its full panel. A model signal, so [navOpen] alone reports, (navOpenChange) alone listens, and [(navOpen)] is the two-way binding the ecosystem expects. React ships navOpen and defaultNavOpen as two props; this binding has one, and the asymmetry is the ecosystem’s rather than the family’s"
+        },
+        {
+          "name": "asideOpen",
+          "type": "model<boolean>",
+          "defaultValue": "true",
+          "appliesTo": "slAppShell",
+          "description": "Whether the secondary pane is showing, under the same rule. A product that opens the pane on a selection binds the selection to this"
+        },
+        {
+          "name": "asideExtent",
+          "type": "model<number | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slAppShell",
+          "description": "The measure of the pane as a column, as a fraction of the shell’s inline size. Unset, asideSize decides. The pane writes it as --slotted-app-shell-aside-extent in cqi, which the stylesheet reads in the column alone: a layer keeps its step"
+        },
+        {
+          "name": "minAsideExtent",
+          "type": "number",
+          "defaultValue": "0.16",
+          "appliesTo": "slAppShell",
+          "description": "The smallest fraction of the shell the reader may give the pane, and Home’s target. aria-valuemin is this times a hundred"
+        },
+        {
+          "name": "maxAsideExtent",
+          "type": "number",
+          "defaultValue": "0.6",
+          "appliesTo": "slAppShell",
+          "description": "The largest fraction, and End’s target. aria-valuemax is this times a hundred"
+        },
+        {
+          "name": "inset",
+          "type": "'none' | undefined",
+          "defaultValue": "—",
+          "appliesTo": "slAppShellAsideBody",
+          "description": "none drops the body’s own padding, for content that brings its own inset. Written as data-inset"
+        },
+        {
+          "name": "primary",
+          "type": "'banner' | 'nav' | 'main'",
+          "defaultValue": "banner",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Which region reaches the corner. Under nav the navigation spans every row and its head takes the banner’s height so the two marks sit on one line; under main it does too, and the banner stands inside the card that holds the content"
+        },
+        {
+          "name": "canvas",
+          "type": "'inset' | 'flush' | 'floating' | 'panel'",
+          "defaultValue": "inset",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "The plane of every region at once. inset: content and pane as cards over a sunken frame. flush: every region edge to edge, seams drawn. floating: the column a card as well. panel: column, content and pane in one card, the bar and the footer on the frame"
+        },
+        {
+          "name": "navMode",
+          "type": "'inline' | 'overlay' | 'auto'",
+          "defaultValue": "auto",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "How the region occupies space. auto is inline at or above 600 pixels of the shell’s own inline size and overlay below it, answered in CSS for the layout and in script for the keyboard"
+        },
+        {
+          "name": "asideMode",
+          "type": "'inline' | 'overlay' | 'auto'",
+          "defaultValue": "auto",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "How the pane occupies space: the navigation’s pair, resolved on the same width. inline is a column beside the content, or a row under it when there is no room; overlay is a layer from the end the navigation is not on"
+        },
+        {
+          "name": "navSide",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Which end of the line the region sits at. Logical, so a right-to-left document mirrors the whole frame; the pane sits at the other end, and both controls turn their marks"
+        },
+        {
+          "name": "navSize",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "The width of the open region, as a step on the family’s own scale. A theme retunes the step; nothing retunes a pixel string"
+        },
+        {
+          "name": "asideSize",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "The width of the secondary pane, on the same kind of scale"
+        },
+        {
+          "name": "collapsedTo",
+          "type": "'rail' | 'hidden'",
+          "defaultValue": "rail",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "What a closed inline navigation leaves behind. rail keeps a strip the width of a target and keeps the tab order; hidden takes the region out of both. A closed pane always leaves nothing: it has no marks to keep"
+        },
+        {
+          "name": "scroll",
+          "type": "'content' | 'document'",
+          "defaultValue": "content",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "content makes the shell the height it was given, capped at 100dvh, and only the content column and the pane’s body scroll; document lets the shell grow and the banner travel with it"
+        },
+        {
+          "name": "separation",
+          "type": "'rule' | 'tone'",
+          "defaultValue": "rule",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "What draws a seam where two regions touch without a gutter. rule is a line; tone is a ground of its own on the chrome regions, with the subtle tones inside them recomputed from it. Where a gutter separates, it draws nothing either way"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Whether an overlaid region contains focus and makes every other region inert. Only the overlaid modes read it, and it applies to whichever layer is open"
+        },
+        {
+          "name": "escape",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Whether Escape closes an overlaid region. Registered in the capture phase by @slotted/core/dismissable-layer, so a handler inside the panel runs after the layer has already asked"
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Whether a press outside an overlaid panel closes it"
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "The platform's way back — a phone's gesture, a browser's button — closes the layer instead of leaving the page, while it is modal: @slotted/core/dismissable-layer holds one history entry per modal layer and answers the popstate that leaves it with the reason back"
+        },
+        {
+          "name": "closeOnNavigate",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slAppShell, provideAppShellDefaults",
+          "description": "Whether a click on an a[href] inside the overlaid navigation closes it, with the reason select — a router’s preventDefault included, an aria-disabled link excluded. Without it a phone costs two taps per destination"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<AppShellMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slAppShell",
+          "description": "Words laid over the language in force, key by key — aside, close, closeAside, nav, open, openAside, progress, resizeAside, skipToAside, skipToMain, skipToNav: the two regions’ accessible names, the two controls’ labels in each state, the wait’s name, the pane edge’s name, and the three skip links. An aria-label written on the element itself still wins"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slAppShellProgress",
+          "description": "Whether the next page is on its way. The bar appears once it has lasted delay (200 ms), stays at least minDuration (400 ms), and main carries aria-busy for exactly that long; an aria-busy written on main wins. value, min, max, buffer, valueText, label, tone, size (sm by default), delay and minDuration reach the bar, (withdraw) reports the moment it goes, and provideProgressIndicatorDefaults() wins over the shell’s timing"
+        }
+      ],
+      "composition": [
+        {
+          "name": "content projection",
+          "type": "anything",
+          "defaultValue": "—",
+          "appliesTo": "every region",
+          "description": "The family owns where a region is drawn, its landmark, its width and its state, and nothing about what is in it. The bar’s three clusters, the column’s three ends, the content, the pane’s three parts and the footer each take whatever an application puts there — its own search, its own account, another family, its own markup"
+        },
+        {
+          "name": "published geometry",
+          "type": "--slotted-app-shell-row-*",
+          "defaultValue": "—",
+          "appliesTo": "anything inside a region",
+          "description": "Six numbers the shell publishes for the rows a product brings: row-inset, row-mark, row-gap, row-height, row-font-size and row-line-height. Every row on this page reads them and states nothing of its own, which is what keeps a destination’s mark under the control in the bar"
+        },
+        {
+          "name": "custom properties",
+          "type": "--slotted-app-shell-*",
+          "defaultValue": "—",
+          "appliesTo": "the frame or any region",
+          "description": "A ground and an ink per region, plus every measure the frame stands on. Each region reads the public name and falls back to the plane’s default, so a property written on the region resolves in the region’s own scope. The full list is under Theme-owned decisions below"
+        },
+        {
+          "name": "data-part selectors",
+          "type": "[data-ui=\"app-shell\"] [data-part=\"…\"]",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Anything the properties do not reach is one selector away. [data-ui=\"app-shell\"][data-open] is the navigation; [data-part=\"aside\"][data-open] is the pane"
+        },
+        {
+          "name": "the element is the consumer’s",
+          "type": "a directive, not a wrapper",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "slAppShellBanner goes on the consumer’s own header, slAppShellMain on their main, and so on. There is no render prop because there is nothing to substitute: the element was already theirs"
+        },
+        {
+          "name": "exportAs",
+          "type": "'slAppShell' and one per part",
+          "defaultValue": "—",
+          "appliesTo": "a template",
+          "description": "Reaches the instance: #shell=\"slAppShell\" then shell.navOpen(), shell.asideOpen(), shell.openNav(), shell.closeNav(), shell.openAside(), shell.closeAside(), shell.focusMain(), shell.resolvedMode() and shell.resolvedAsideMode()"
+        },
+        {
+          "name": "provideAppShellDefaults()",
+          "type": "{ …fourteen axes }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "What an application decides once for every route, through APP_SHELL_DEFAULTS. A shell that states any of them itself still wins"
+        },
+        {
+          "name": "ng-content",
+          "type": "projected, in the consumer’s own order",
+          "defaultValue": "—",
+          "appliesTo": "slAppShell",
+          "description": "The regions are projected rather than slotted by name, so their DOM order is the consumer’s — which is what keeps the focus order theirs too. The skip links, the veil and the portal root are the component’s own"
+        },
+        {
+          "name": "button[slAppShellNavToggle] and button[slAppShellAsideToggle] anywhere",
+          "type": "take their wiring from the shell",
+          "defaultValue": "—",
+          "appliesTo": "inside slAppShell",
+          "description": "id, aria-expanded, aria-controls, the label and the handler come from the shell, so each control can stand in the banner, in its region’s own head or foot, or anywhere else — and there is still exactly one control carrying each state. Where it goes is written on this page under Rail"
+        },
+        {
+          "name": "HostAttributeToken",
+          "type": "a written attribute survives",
+          "defaultValue": "—",
+          "appliesTo": "slAppShellNav, slAppShellMain, slAppShellAside, slAppShellNavToggle, slAppShellAsideToggle",
+          "description": "An aria-label, an id or an aria-controls the consumer wrote is read before the family writes its own, so a host binding never erases what the template said"
+        },
+        {
+          "name": "setPortalContainer",
+          "type": "the layer part, named once",
+          "defaultValue": "—",
+          "appliesTo": "every overlay under the shell",
+          "description": "slDialog, slDrawer, slMenu, slPopover, slTooltip and toasts land in the shell’s own layer instead of on the body, which is what keeps an application’s overlays inside the application’s stacking context"
+        },
+        {
+          "name": "zoneless and OnPush",
+          "type": "signals throughout",
+          "defaultValue": "—",
+          "appliesTo": "slAppShell",
+          "description": "Every resolved axis is a computed, the width gate and the two layers are effects torn down by DestroyRef, and there is no markForCheck anywhere"
+        }
+      ],
+      "events": [
+        {
+          "name": "navOpenChangeRequest",
+          "payload": "AppShellOpenRequest",
+          "when": "Before the navigation region moves, and never for a value equal to the current one. The request carries value, previous, reason, the originating event as source, and cancel() — call it and nothing commits. (navOpenChange) fires afterwards with the committed boolean, as every model does."
+        },
+        {
+          "name": "asideOpenChangeRequest",
+          "payload": "AppShellOpenRequest",
+          "when": "Before the secondary pane moves, with the same shape. The reasons a pane can carry are pointer, keyboard, escape, outsidePress, resize and programmatic — no select, because a pane has no destinations. (asideOpenChange) fires afterwards."
+        },
+        {
+          "name": "asideExtentChangeRequest",
+          "payload": "AppShellAsideExtentRequest",
+          "when": "Before the pane’s extent moves, already held inside minAsideExtent and maxAsideExtent, with the reason pointer for a drag on the aside-resizer, keyboard for an arrow, Home or End, and programmatic otherwise. undefined is the pane back on its asideSize step. (asideExtentChange) fires afterwards."
+        }
+      ],
+      "accessibility": [
+        "The structure is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), and every one of the five is earned from the element rather than written as a role: header in the context of the body is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div for exactly that reason — a main inside a sectioning element stops being a landmark, and the shell has to be placeable anywhere.",
+        "Both controls are the APG’s Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): real buttons, so Enter and Space activate them natively, carrying aria-expanded and aria-controls pointing at their region. One departure is written and costed: under collapsedTo=\"rail\" the navigation does not disappear, it narrows — aria-expanded is still true or false about the region’s full form, and the region stays in the tab order because a rail whose destinations cannot be reached is not a rail. The pane has no such departure: closed, it leaves the layout and the tab order.",
+        "A document with more than one navigation or complementary landmark needs a unique label on each, so both regions carry the family’s strings and a consumer may replace either per instance. Each control’s own name changes with the state — “Open navigation” and “Close navigation”, “Open side panel” and “Close side panel” — because a control whose name never changes leaves the reader to infer the state from aria-expanded alone.",
+        "The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and main carries tabindex=\"-1\": without it the browser moves the scroll and leaves the focus behind in Safari and Firefox, which is a link that appears to work and moves nothing a screen reader follows.",
+        "While an overlaid region is modal, @slotted/core/focus contains the keyboard inside it and returns it to the control that opened it on close, and every region beside it — the banner included — takes inert, so Tab cannot reach them and a screen reader does not read them. The ways out are Escape, the veil, a destination, and whatever control the product put in the panel. Two layers can be open together only with both modes forced, and @slotted/core/dismissable-layer keeps one stack, so Escape reaches the topmost.",
+        "The pane’s edge is the APG’s Window Splitter (w3.org/WAI/ARIA/apg/patterns/windowsplitter/): a focusable separator with aria-orientation=\"vertical\", aria-controls pointing at the pane and aria-valuemin, aria-valuemax and aria-valuenow as whole percentages of the shell, named “Resize panel”. ArrowLeft and ArrowRight move it sixteen pixels, sixty-four with Shift, by the direction on the screen — so ArrowLeft grows an end pane and shrinks a start one, mirrored in right-to-left — and Home and End go to the limits.",
+        "Nothing important depends on hover, the frame answers its own inline size rather than the window’s — which is what makes a 400% zoom behave like a narrow window — and every transition comes from the motion scale, so prefers-reduced-motion collapses all of them at once."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-app-shell-aside-color",
+    "--slotted-app-shell-aside-extent",
+    "--slotted-app-shell-aside-size-lg",
+    "--slotted-app-shell-aside-size-md",
+    "--slotted-app-shell-aside-size-sm",
+    "--slotted-app-shell-aside-surface",
+    "--slotted-app-shell-banner-block-size",
+    "--slotted-app-shell-banner-color",
+    "--slotted-app-shell-banner-surface",
+    "--slotted-app-shell-border-color",
+    "--slotted-app-shell-brand-overflow",
+    "--slotted-app-shell-brand-wrap",
+    "--slotted-app-shell-canvas",
+    "--slotted-app-shell-color",
+    "--slotted-app-shell-elevation",
+    "--slotted-app-shell-footer-color",
+    "--slotted-app-shell-footer-surface",
+    "--slotted-app-shell-frame",
+    "--slotted-app-shell-frame-image",
+    "--slotted-app-shell-gutter",
+    "--slotted-app-shell-main-color",
+    "--slotted-app-shell-main-surface",
+    "--slotted-app-shell-nav-color",
+    "--slotted-app-shell-nav-overlay-size",
+    "--slotted-app-shell-nav-size-lg",
+    "--slotted-app-shell-nav-size-md",
+    "--slotted-app-shell-nav-size-sm",
+    "--slotted-app-shell-nav-surface",
+    "--slotted-app-shell-radius",
+    "--slotted-app-shell-rail-size",
+    "--slotted-app-shell-resizer-color",
+    "--slotted-app-shell-row-inset-size",
+    "--slotted-app-shell-row-mark-size",
+    "--slotted-app-shell-row-text-line-height",
+    "--slotted-app-shell-row-text-size",
+    "--slotted-app-shell-scrim",
+    "--slotted-app-shell-scrollbar-thumb-color",
+    "--slotted-app-shell-scrollbar-track-color",
+    "--slotted-app-shell-tone-surface",
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--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-icon-size-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-duration-medium",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-sm",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-sm",
+    "--slotted-radius-lg",
+    "--slotted-scrim",
+    "--slotted-shadow-lg",
+    "--slotted-shadow-md",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-overlay",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Aurora Logística, a freight operator’s back office, whole: the search a coordinator reaches for first, the destinations with their counts, the order table with the consignment that has no price yet, and the detail pane with its own head, body and foot. Every axis is on the controls below — change navSide and the pane moves to the other side with it; close the pane and the content takes the room.",
+      "language": "html",
+      "source": "<div slAppShell>\n  <header slAppShellBanner>…</header>\n  <nav slAppShellNav>…</nav>\n  <main slAppShellMain>…</main>\n  <aside slAppShellAside>…</aside>\n  <footer slAppShellFooter>…</footer>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "The frame with nothing in it",
+      "note": "Every part the contract declares, drawn as its own name. Everything else on this page is a product standing in these boxes; this is the family on its own — four rows, three columns, one gutter, the card the content stands on, three clusters in the bar, and a pane with a head, a body and a foot.",
+      "language": "html",
+      "source": "<div slAppShell>\n  <header slAppShellBanner>\n    <div slAppShellBrand>\n      <button slAppShellNavToggle></button>\n    </div>\n    <div slAppShellCentre>…</div>\n    <div slAppShellActions>…</div>\n  </header>\n  <nav slAppShellNav>\n    <div slAppShellNavHeader>…</div>\n    <div slAppShellNavBody>…</div>\n    <div slAppShellNavFooter>…</div>\n  </nav>\n  <main slAppShellMain>…</main>\n  <aside slAppShellAside>\n    <div slAppShellAsideHeader>\n      …\n      <button slAppShellAsideToggle></button>\n    </div>\n    <div slAppShellAsideBody>…</div>\n    <div slAppShellAsideFooter>…</div>\n  </aside>\n  <footer slAppShellFooter>…</footer>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "regions",
+      "title": "Five regions, five landmarks",
+      "note": "Each region is the HTML element that already means what it is, so none of them writes a role: header is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div precisely so that stays true — a main inside an article is not a landmark. Cadence has no pane and no footer, and the landmark list is then exactly three.",
+      "language": "html",
+      "source": "<div slAppShell canvas=\"flush\" primary=\"nav\">\n  <nav slAppShellNav>…</nav>\n  <header slAppShellBanner>…</header>\n  <main slAppShellMain>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "banner",
+      "title": "Three clusters, and the one that grows",
+      "note": "brand starts the line, centre takes whatever room is left, actions ends it. Aurora puts a search field with its shortcut in the middle; Cadence puts the route’s trail there and the route’s actions at the end; Átrio puts a title. What each holds is the product’s — slTextField, slBreadcrumb, slAvatar — and where it goes is the shell’s. Narrow the frame: the middle gives way first, and a control in actions keeps its width rather than breaking its label one letter per line.",
+      "language": "html",
+      "source": "<header slAppShellBanner>\n  <div slAppShellBrand>\n    <button slAppShellNavToggle></button>\n    <span>Aurora</span>\n  </div>\n  <div slAppShellCentre>\n    <div slTextField size=\"sm\" variant=\"subtle\">\n      <span slTextFieldStart><ng-icon name=\"lucideSearch\" /></span>\n      <input slTextFieldInput type=\"search\" placeholder=\"Search…\" />\n    </div>\n  </div>\n  <div slAppShellActions>\n    <button slIconButton aria-label=\"Notifications\">…</button>\n    <span slAvatar><span slAvatarFallback>AB</span></span>\n  </div>\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "canvas",
+      "title": "The plane every region sits on",
+      "note": "One input decides the plane of every region at once, and each of its four values is drawn and tested in every primary and both separations. inset lifts the content and the pane onto cards over a sunken frame; flush runs every region edge to edge and draws its seams; floating lifts the column onto a card of its own as well; panel holds the column, the content and the pane in one card with the bar on the frame above it. The same product on all four.",
+      "language": "html",
+      "source": "<div slAppShell canvas=\"inset\">…</div>\n<div slAppShell canvas=\"flush\">…</div>\n<div slAppShell canvas=\"floating\">…</div>\n<div slAppShell canvas=\"panel\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "separation",
+      "title": "A rule, or a tone",
+      "note": "Where two regions touch without a gutter — every seam of flush, the seams inside the panel card, the bar over the content under primary=\"main\" — separation decides what is drawn. rule is a line. tone is no line: the chrome regions take a ground 0.036 OKLab L from the surface, and the subtle tones inside them are recomputed from that ground so a hover still answers. Under forced colours a tone separates nothing, and the rule is drawn whatever the input says.",
+      "language": "html",
+      "source": "<div slAppShell canvas=\"flush\" separation=\"rule\">…</div>\n<div slAppShell canvas=\"flush\" separation=\"tone\">…</div>\n<div slAppShell canvas=\"panel\" primary=\"main\" separation=\"tone\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "theming",
+      "title": "Every region repaintable, one at a time",
+      "note": "Cadence paints its column dark on a light frame with two declarations: data-slotted-scheme on the region, and one custom property for the ground. Written on the region rather than on the frame, the property resolves in the region’s scope, so the destinations, the counts and the focus ring are calibrated against the ground they are actually on. Switch the page to dark: the column stays the column, and the frame joins it.",
+      "language": "html",
+      "source": "<div slAppShell canvas=\"flush\" primary=\"nav\">\n  <nav slAppShellNav class=\"cadence-nav\" data-slotted-scheme=\"dark\">…</nav>\n</div>\n\n<!-- .cadence-nav { --slotted-app-shell-nav-surface: var(--slotted-surface-sunken); } -->\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navModes",
+      "title": "Inline, overlaid, and the width that decides",
+      "note": "inline makes the region a column; overlay takes it out of the grid and over the content with a veil, a focus scope and inert on everything behind it; auto answers the shell’s own inline size at 600 pixels — not the window’s, which is why the narrow frame here behaves like a phone inside a wide page. Press the toggle in the overlaid frame: Escape and a press outside both close it.",
+      "language": "html",
+      "source": "<div slAppShell navMode=\"inline\">…</div>\n<div slAppShell navMode=\"overlay\">…</div>\n<div slAppShell navMode=\"auto\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "rail",
+      "title": "What a closed region leaves behind",
+      "note": "rail keeps a strip one mark column wide with a row’s inset on each side: every destination stays reachable by its mark, the region stays in the tab order, and the column’s own query container is what tells the rows to drop their labels. hidden takes the region out of the layout and the tab order entirely. Under primary=\"nav\" the control stands in the column’s own foot, over the column it moves, and survives the rail.",
+      "language": "html",
+      "source": "<div slAppShell collapsedTo=\"rail\" [navOpen]=\"false\">…</div>\n<div slAppShell collapsedTo=\"hidden\" [navOpen]=\"false\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navRail",
+      "title": "Two levels, one region",
+      "note": "slAppShellNavRail puts a strip of marks before the column: the modules in the strip, the destinations of the chosen module in the column. It is one nav landmark and one open state, where the field ships two sidebars with a state each. Closed to rail, the strip stays and the column goes — cut while the width moves, then out of the tab order. The control that moves the region stands at the foot of the strip, the part that survives. The module is the product’s state, held here in a signal.",
+      "language": "html",
+      "source": "<div slAppShell primary=\"main\">\n  <header slAppShellBanner>…</header>\n  <nav slAppShellNav>\n    <div slAppShellNavRail aria-label=\"Modules\">\n      @for (module of modules; track module.id) {\n        <button\n          slIconButton\n          type=\"button\"\n          tone=\"secondary\"\n          [variant]=\"module.id === moduleId() ? 'solid' : 'ghost'\"\n          [attr.aria-current]=\"module.id === moduleId() ? 'true' : null\"\n          [attr.aria-label]=\"module.label\"\n          (click)=\"moduleId.set(module.id)\"\n        >\n          <ng-icon [name]=\"module.icon\" />\n        </button>\n      }\n      <button slAppShellNavToggle></button>\n    </div>\n    <div slAppShellNavHeader>{{ module().label }}</div>\n    <div slAppShellNavBody>\n      <div slSideNavigation [value]=\"module().current\">…</div>\n    </div>\n  </nav>\n  <main slAppShellMain>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "aside",
+      "title": "The pane opens on a selection, and closes from its own head",
+      "note": "The pane holds the second open state, under the same shape as the navigation’s: a two-way asideOpen model and asideOpenChangeRequest with a reason. Select a row and the product opens the pane; press the control in the pane’s head, or Escape when it is a layer, and it closes — the content takes the room, because a closed pane leaves no rail. The skip link to the pane exists only while it is open. Drag the pane’s inner edge, or focus it and press the arrows, Home and End: the two-way asideExtent is a fraction of the shell between minAsideExtent and maxAsideExtent, and asideExtentChangeRequest says which hand moved it.",
+      "language": "html",
+      "source": "<div\n  slAppShell\n  [asideOpen]=\"selected() !== undefined\"\n  (asideOpenChangeRequest)=\"$event.value ? null : selected.set(undefined)\"\n>\n  <main slAppShellMain>\n    <div slTable selectionMode=\"single\" [value]=\"selectedKeys()\" (valueChange)=\"select($event)\">\n      …\n    </div>\n  </main>\n  <aside slAppShellAside>\n    <div slAppShellAsideResizer></div>\n    <div slAppShellAsideHeader>\n      <span>{{ selected() }}</span>\n      <button slAppShellAsideToggle></button>\n    </div>\n    <div slAppShellAsideBody>…</div>\n    <div slAppShellAsideFooter>…</div>\n  </aside>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "overlay",
+      "title": "The layer, and what it does to the rest",
+      "note": "Átrio overlays its navigation at every width. While the layer is modal, the rest of the shell is inert — the banner and its toggle included, exactly as a dialog’s trigger is — and the ways out are Escape, the veil, a destination, and whatever control the product put in the panel. The pane is a layer of its own under the same policies: escape=\"none\" keeps it open on Escape, outsidePress=\"none\" keeps it open on a press outside, modal={false} draws no veil and inerts nothing.",
+      "language": "html",
+      "source": "<div slAppShell navMode=\"overlay\" escape=\"close\" outsidePress=\"close\" modal>…</div>\n<div slAppShell asideMode=\"overlay\" escape=\"none\" outsidePress=\"none\" [modal]=\"false\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "primary",
+      "title": "Which region reaches the corner",
+      "note": "banner spans the full width and the navigation starts below it, which is Aurora. nav spans the full height and the banner starts beside it, which is Cadence: the workspace and the bar sit on one line, and the control that moves the column stands in the column’s own head. main spans the column the full height as well and puts the bar in the plane of the content, inside the card that holds the page. The grid changes where a region is drawn and never where it is written, so the focus order is the same under all three.",
+      "language": "html",
+      "source": "<div slAppShell primary=\"banner\">…</div>\n<div slAppShell primary=\"nav\">…</div>\n<div slAppShell primary=\"main\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sides",
+      "title": "Sides, sizes and the mirror",
+      "note": "Átrio puts the navigation at the end of the line and the pane at the start; the controls turn their marks with them. Switch the direction to right-to-left and the whole frame mirrors, because every distance is logical. navSize and asideSize are steps on the family’s own scale — a theme retunes a step, and nothing retunes a pixel string.",
+      "language": "html",
+      "source": "<div slAppShell navSide=\"end\" navSize=\"sm\" asideSize=\"sm\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "scroll",
+      "title": "Who scrolls",
+      "note": "content, the default, makes the shell the height it was given — capped at 100dvh, which is the space a mobile browser actually has — and lets only the content column and the pane’s body scroll, so the banner, the column and the pane’s head and foot stay put. document lets the shell grow and the whole document scroll, and the banner travels with it; a page-header inside then owns the sticky offset on its own.",
+      "language": "html",
+      "source": "<div slAppShell scroll=\"content\">…</div>\n<div slAppShell scroll=\"document\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "The wait for the next page",
+      "note": "slAppShellProgress draws an indeterminate bar on the line between the chrome and the content — wherever the canvas draws that line — after 200 ms, holds it for at least 400 ms, and marks main aria-busy for exactly as long as it is painted. A page header inside a busy content region draws no bar of its own. Pass loading from the router; nothing in the family knows one.",
+      "language": "html",
+      "source": "<div slAppShell>\n  <header slAppShellBanner>…</header>\n  <main slAppShellMain>…</main>\n  <div slAppShellProgress [loading]=\"navigating()\"></div>\n</div>\n\n<!-- navigating = toSignal(router.events.pipe(filter(isStartOrEnd), map((e) => e instanceof NavigationStart))) -->\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "skipLinks",
+      "title": "The first thing a keyboard meets",
+      "note": "Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex=\"-1\", so the link moves the focus as well as the scroll.",
+      "language": "html",
+      "source": "<div slAppShell [messages]=\"{ skipToMain: 'Skip to the order' }\">\n  <main slAppShellMain>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "persistence",
+      "title": "Telling the reader’s choice from the layout’s",
+      "note": "Every request carries a reason. pointer and keyboard are the reader’s own choice; resize is the layout closing the region because the shell became narrow; select is a destination; escape and outsidePress are the layer. A product that persists the reader’s preference writes one line on the request — if the reason is not resize, persist — and keeps the wide preference through every narrow window the reader ever opens. Narrow the frame and read the log.",
+      "language": "html",
+      "source": "<div\n  slAppShell\n  [(navOpen)]=\"open\"\n  (navOpenChangeRequest)=\"$event.reason === 'resize' || persist($event.value)\"\n>\n  …\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Setting it once, and reaching past it",
+      "note": "provideAppShellDefaults carries every axis and the strings for every shell under the injector, and a shell that states any of them itself still wins. exportAs reaches the instance from the template: openNav, closeNav, openAside, closeAside and focusMain are the actions an input cannot express. The element the directive sits on was always the consumer’s, so there is nothing to substitute.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [provideAppShellDefaults({ canvas: 'flush', navSize: 'lg', primary: 'nav' })],\n});\n\n// In a template: <div slAppShell #shell=\"slAppShell\">…</div>\n// and a button that calls shell.closeAside().\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "The families that live inside it",
+      "note": "The shell owns where a region is drawn and nothing about what is in it. slPage with landmark=\"none\" and scroll=\"ancestor\" lives in the content region, so its header sticks at the top of the column the shell scrolls; an sl-drawer opened from the page lands in the shell’s own layer, over the content and under nothing; slDialog, slMenu and toasts do the same. Long translated labels truncate in the column rather than pushing the frame wider.",
+      "language": "html",
+      "source": "<main slAppShellMain>\n  <main slPage landmark=\"none\" scroll=\"ancestor\" width=\"full\">\n    <header slPageHeader>…</header>\n    <div slPageBody>…</div>\n  </main>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "The landmarks and the keyboard",
+      "note": "Walk the landmark list of this frame: banner, navigation, main, complementary, contentinfo, one of each and none of them written as a role. Then Tab through it: skip link, banner, toggle, navigation, content, pane, the pane’s control, footer — the DOM order, and it does not move when primary does. Enter and Space work both controls, which is the whole of the Disclosure pattern’s keyboard; the control takes its wiring from the shell, so it stands wherever the product wants it.",
+      "language": "html",
+      "source": "<nav slAppShellNav aria-label=\"Main navigation\">…</nav>\n<aside slAppShellAside aria-label=\"Order details\">…</aside>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlAppShell,\n  SlAppShellBanner,\n  SlAppShellBrand,\n  SlAppShellMain,\n  SlAppShellNav,\n  SlAppShellNavToggle,\n} from '@slotted/angular/app-shell';\nimport {\n  SlSideNavigation,\n  SlSideNavigationItem,\n  SlSideNavigationLabel,\n  SlSideNavigationLink,\n  SlSideNavigationList,\n} from '@slotted/angular/side-navigation';\n\n@Component({\n  selector: 'app-app-shell-basic',\n  imports: [\n    SlAppShell,\n    SlAppShellBanner,\n    SlAppShellBrand,\n    SlAppShellMain,\n    SlAppShellNav,\n    SlAppShellNavToggle,\n    SlSideNavigation,\n    SlSideNavigationItem,\n    SlSideNavigationLabel,\n    SlSideNavigationLink,\n    SlSideNavigationList,\n  ],\n  template: `\n    <div slAppShell>\n      <header slAppShellBanner>\n        <button slAppShellNavToggle></button>\n        <span slAppShellBrand>Northwind</span>\n      </header>\n      <nav slAppShellNav>\n        <div slSideNavigation aria-label=\"Main navigation\" value=\"orders\">\n          <ul slSideNavigationList>\n            <li slSideNavigationItem value=\"orders\">\n              <a slSideNavigationLink href=\"/orders\"><span slSideNavigationLabel>Orders</span></a>\n            </li>\n            <li slSideNavigationItem value=\"customers\">\n              <a slSideNavigationLink href=\"/customers\"\n                ><span slSideNavigationLabel>Customers</span></a\n              >\n            </li>\n          </ul>\n        </div>\n      </nav>\n      <main slAppShellMain>\n        <h1>Orders</h1>\n      </main>\n    </div>\n  `,\n})\nexport class AppShellBasic {}\n",
+      "verdict": "example"
+    }
+  ]
+}