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

package/dist/docs/app-shell.json

@@ -0,0 +1,847 @@
+{
+  "family": "app-shell",
+  "ui": "app-shell",
+  "binding": "react",
+  "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  AppShell,\n  AppShellActions,\n  AppShellAside,\n  AppShellAsideBody,\n  AppShellAsideFooter,\n  AppShellAsideHeader,\n  AppShellAsideResizer,\n  AppShellAsideToggle,\n  AppShellBanner,\n  AppShellBrand,\n  AppShellCentre,\n  AppShellDefaultsProvider,\n  AppShellFooter,\n  AppShellMain,\n  AppShellNav,\n  AppShellNavBody,\n  AppShellNavFooter,\n  AppShellNavHeader,\n  AppShellNavRail,\n  AppShellNavToggle,\n  AppShellProgress,\n} from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "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, or the element render returns",
+          "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, or the element render returns",
+          "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, or the element render returns",
+          "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 the element render returns",
+          "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\", or the element render returns",
+          "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": "div, holding one ProgressBar 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. Written anywhere inside AppShell; main is aria-busy while the bar is painted."
+        },
+        {
+          "part": "aside",
+          "element": "aside, or the element render returns",
+          "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": "div with role=\"separator\", or the element render returns",
+          "required": false,
+          "purpose": "The pane’s inner edge, from the WAI-ARIA Window Splitter pattern: focusable, aria-controls the pane, its three values the extent as whole percentages of the shell. Placed inside AppShellAside; rendering it is the capability. Drawn on the column alone — under asideMode=\"overlay\" or a closed pane it renders nothing, 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, or the element render returns",
+          "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, or the element render returns",
+          "required": false,
+          "purpose": "The contentinfo landmark: the application’s footer, not the page’s action bar — that one is PageFooter, inside main."
+        },
+        {
+          "part": "layer",
+          "element": "div with display: contents",
+          "required": true,
+          "purpose": "The application’s portal root, named once through setPortalContainer so every Dialog, Drawer, Menu and Toast under this shell lands here instead of on the body."
+        }
+      ],
+      "api": [
+        {
+          "name": "navOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "AppShell",
+          "description": "The controlled value of the navigation region. Passing anything but undefined puts the shell in controlled mode for its lifetime, and it then reports and waits rather than moving itself"
+        },
+        {
+          "name": "defaultNavOpen",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "AppShell",
+          "description": "The uncontrolled starting value, read once. A later change to it does not silently become new state"
+        },
+        {
+          "name": "asideOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "AppShell",
+          "description": "The controlled value of the secondary pane, under the same rule. A product that opens the pane on a selection passes the selection down as this"
+        },
+        {
+          "name": "defaultAsideOpen",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "AppShell",
+          "description": "The uncontrolled starting value of the pane. A product that projects a pane wants to see it, so the default is open"
+        },
+        {
+          "name": "asideExtent",
+          "type": "number | undefined",
+          "defaultValue": "—",
+          "appliesTo": "AppShell",
+          "description": "The controlled 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": "defaultAsideExtent",
+          "type": "number | undefined",
+          "defaultValue": "—",
+          "appliesTo": "AppShell",
+          "description": "The uncontrolled starting measure, read once. Unset, the pane starts on its asideSize step"
+        },
+        {
+          "name": "minAsideExtent",
+          "type": "number",
+          "defaultValue": "0.16",
+          "appliesTo": "AppShell",
+          "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": "AppShell",
+          "description": "The largest fraction, and End’s target. aria-valuemax is this times a hundred"
+        },
+        {
+          "name": "inset",
+          "type": "'none' | undefined",
+          "defaultValue": "—",
+          "appliesTo": "AppShellAsideBody",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "description": "The width of the secondary pane, on the same kind of scale"
+        },
+        {
+          "name": "collapsedTo",
+          "type": "'rail' | 'hidden'",
+          "defaultValue": "rail",
+          "appliesTo": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "description": "Whether a press outside an overlaid panel closes it"
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell, AppShellDefaultsProvider",
+          "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": "AppShell",
+          "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 part itself still wins"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "AppShellProgress",
+          "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. Every other ProgressBar prop but placement passes through — value for a wait that reports its fraction, tone, label, size (sm by default) — and a value set through ProgressIndicatorDefaultsProvider wins over the shell’s timing"
+        }
+      ],
+      "composition": [
+        {
+          "name": "children",
+          "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": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Substitutes the rendered element and hands it every attribute, listener and data-* the part had. The skip links, the veil and the portal root are the shell’s own and are not substitutable"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<AppShellHandle> on AppShell, Ref<HTMLElement> on every part",
+          "defaultValue": "—",
+          "appliesTo": "AppShell and its parts",
+          "description": "The root exposes a handle — openNav(), closeNav(), openAside(), closeAside(), focusMain() and root — because those are the actions a consumer cannot express declaratively; every part exposes its own element"
+        },
+        {
+          "name": "useAppShell()",
+          "type": "() => AppShellContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside AppShell",
+          "description": "What a part reads: open, asideOpen, the resolved modes, every axis, the ids, the translator t, setOpen(next, reason) and setAsideOpen(next, reason). Throws outside a shell rather than rendering a div that navigates nothing"
+        },
+        {
+          "name": "AppShellDefaultsProvider",
+          "type": "{ …fourteen axes }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "What an application decides once for every route. A shell that states any of them itself still wins"
+        },
+        {
+          "name": "AppShellNavToggle and AppShellAsideToggle anywhere",
+          "type": "take their wiring from context",
+          "defaultValue": "—",
+          "appliesTo": "inside AppShell",
+          "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": "setPortalContainer",
+          "type": "the layer part, named once",
+          "defaultValue": "—",
+          "appliesTo": "every overlay under the shell",
+          "description": "Dialog, Drawer, Menu, Popover, Tooltip and Toast 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": "onClick, onKeyDown, …",
+          "type": "composed, never replaced",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "A consumer’s own handler runs first; the family acts afterwards and only if the event was not prevented"
+        }
+      ],
+      "events": [
+        {
+          "name": "onNavOpenChange",
+          "payload": "(open: boolean, request: 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, in either mode."
+        },
+        {
+          "name": "onAsideOpenChange",
+          "payload": "(open: boolean, request: AppShellAsideOpenRequest)",
+          "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."
+        },
+        {
+          "name": "onAsideExtentChange",
+          "payload": "(extent: number | undefined, request: 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."
+        }
+      ],
+      "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": "tsx",
+      "source": "<AppShell>\n  <AppShellBanner>…</AppShellBanner>\n  <AppShellNav>…</AppShellNav>\n  <AppShellMain>…</AppShellMain>\n  <AppShellAside>…</AppShellAside>\n  <AppShellFooter>…</AppShellFooter>\n</AppShell>;\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": "tsx",
+      "source": "<AppShell>\n  <AppShellBanner>\n    <AppShellBrand>\n      <AppShellNavToggle />\n    </AppShellBrand>\n    <AppShellCentre>…</AppShellCentre>\n    <AppShellActions>…</AppShellActions>\n  </AppShellBanner>\n  <AppShellNav>\n    <AppShellNavHeader>…</AppShellNavHeader>\n    <AppShellNavBody>…</AppShellNavBody>\n    <AppShellNavFooter>…</AppShellNavFooter>\n  </AppShellNav>\n  <AppShellMain>…</AppShellMain>\n  <AppShellAside>\n    <AppShellAsideHeader>\n      …\n      <AppShellAsideToggle />\n    </AppShellAsideHeader>\n    <AppShellAsideBody>…</AppShellAsideBody>\n    <AppShellAsideFooter>…</AppShellAsideFooter>\n  </AppShellAside>\n  <AppShellFooter>…</AppShellFooter>\n</AppShell>;\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": "tsx",
+      "source": "<AppShell canvas=\"flush\" primary=\"nav\">\n  <AppShellNav>…</AppShellNav>\n  <AppShellBanner>…</AppShellBanner>\n  <AppShellMain>…</AppShellMain>\n</AppShell>;\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 — a TextField, a Breadcrumb, an Avatar — 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": "tsx",
+      "source": "<AppShellBanner>\n  <AppShellBrand>\n    <AppShellNavToggle />\n    <span>Aurora</span>\n  </AppShellBrand>\n  <AppShellCentre>\n    <TextField\n      placeholder=\"Search…\"\n      start={\n        <Icon>\n          <Search />\n        </Icon>\n      }\n      type=\"search\"\n    />\n  </AppShellCentre>\n  <AppShellActions>\n    <IconButton aria-label=\"Notifications\">…</IconButton>\n    <Avatar>AB</Avatar>\n  </AppShellActions>\n</AppShellBanner>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "canvas",
+      "title": "The plane every region sits on",
+      "note": "One axis 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": "tsx",
+      "source": "<AppShell canvas=\"inset\">…</AppShell>;\n<AppShell canvas=\"flush\">…</AppShell>;\n<AppShell canvas=\"floating\">…</AppShell>;\n<AppShell canvas=\"panel\">…</AppShell>;\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 axis says.",
+      "language": "tsx",
+      "source": "<AppShell canvas=\"flush\" separation=\"rule\">\n  …\n</AppShell>;\n<AppShell canvas=\"flush\" separation=\"tone\">\n  …\n</AppShell>;\n<AppShell canvas=\"panel\" primary=\"main\" separation=\"tone\">\n  …\n</AppShell>;\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": "tsx",
+      "source": "<AppShell canvas=\"flush\" primary=\"nav\">\n  <AppShellNav className=\"cadence-nav\" data-slotted-scheme=\"dark\">\n    …\n  </AppShellNav>\n</AppShell>;\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": "tsx",
+      "source": "<AppShell navMode=\"inline\">…</AppShell>;\n<AppShell navMode=\"overlay\">…</AppShell>;\n<AppShell navMode=\"auto\">…</AppShell>;\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": "tsx",
+      "source": "<AppShell collapsedTo=\"rail\" defaultNavOpen={false}>\n  …\n</AppShell>;\n<AppShell collapsedTo=\"hidden\" defaultNavOpen={false}>\n  …\n</AppShell>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navRail",
+      "title": "Two levels, one region",
+      "note": "AppShellNavRail 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.",
+      "language": "tsx",
+      "source": "<AppShell primary=\"main\">\n  <AppShellBanner>…</AppShellBanner>\n  <AppShellNav>\n    <AppShellNavRail aria-label=\"Modules\">\n      {modules.map((module) => (\n        <IconButton\n          aria-current={module.id === current ? 'true' : undefined}\n          aria-label={module.label}\n          key={module.id}\n          onClick={() => setCurrent(module.id)}\n          tone=\"secondary\"\n          variant={module.id === current ? 'solid' : 'ghost'}\n        >\n          <module.icon aria-hidden />\n        </IconButton>\n      ))}\n      <AppShellNavToggle />\n    </AppShellNavRail>\n    <AppShellNavHeader>{active.label}</AppShellNavHeader>\n    <AppShellNavBody>\n      <SideNavigation value={destination}>…</SideNavigation>\n    </AppShellNavBody>\n  </AppShellNav>\n  <AppShellMain>…</AppShellMain>\n</AppShell>;\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: asideOpen, defaultAsideOpen, onAsideOpenChange 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: asideExtent is a fraction of the shell between minAsideExtent and maxAsideExtent, and onAsideExtentChange says which hand moved it.",
+      "language": "tsx",
+      "source": "const [selected, setSelected] = useState<string | undefined>();\n\n<AppShell\n  asideOpen={selected !== undefined}\n  onAsideOpenChange={(open) => {\n    if (!open) setSelected(undefined);\n  }}\n>\n  <AppShellMain>\n    <Shipments onSelect={setSelected} selected={selected} />\n  </AppShellMain>\n  <AppShellAside>\n    <AppShellAsideResizer />\n    <AppShellAsideHeader>\n      <span>{selected}</span>\n      <AppShellAsideToggle />\n    </AppShellAsideHeader>\n    <AppShellAsideBody>…</AppShellAsideBody>\n    <AppShellAsideFooter>…</AppShellAsideFooter>\n  </AppShellAside>\n</AppShell>;\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": "tsx",
+      "source": "<AppShell navMode=\"overlay\" escape=\"close\" outsidePress=\"close\" modal>\n  …\n</AppShell>;\n<AppShell asideMode=\"overlay\" escape=\"none\" outsidePress=\"none\" modal={false}>\n  …\n</AppShell>;\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": "tsx",
+      "source": "<AppShell primary=\"banner\">…</AppShell>;\n<AppShell primary=\"nav\">…</AppShell>;\n<AppShell primary=\"main\">…</AppShell>;\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": "tsx",
+      "source": "<AppShell navSide=\"end\" navSize=\"sm\" asideSize=\"sm\">\n  …\n</AppShell>;\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": "tsx",
+      "source": "<AppShell scroll=\"content\">…</AppShell>;\n<AppShell scroll=\"document\">…</AppShell>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "The wait for the next page",
+      "note": "AppShellProgress 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": "tsx",
+      "source": "const navigation = useNavigation();\n\n<AppShell>\n  <AppShellBanner>…</AppShellBanner>\n  <AppShellMain>…</AppShellMain>\n  <AppShellProgress loading={navigation.state !== 'idle'} />\n</AppShell>;\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": "tsx",
+      "source": "<AppShell messages={{ skipToMain: 'Skip to the order' }}>\n  <AppShellMain>…</AppShellMain>\n</AppShell>;\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 — 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": "tsx",
+      "source": "<AppShell\n  navOpen={open}\n  onNavOpenChange={(next, request) => {\n    setOpen(next);\n    if (request.reason !== 'resize') localStorage.setItem('nav', String(next));\n  }}\n>\n  …\n</AppShell>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Setting it once, and reaching past it",
+      "note": "AppShellDefaultsProvider takes every axis and the strings, so an application decides once how its routes are framed and a shell that states any of them itself still wins. ref gives an AppShellHandle rather than a DOM node: openNav, closeNav, openAside, closeAside and focusMain are the actions a prop cannot express. render makes the root the consumer’s own element and keeps every attribute on it.",
+      "language": "tsx",
+      "source": "<AppShellDefaultsProvider canvas=\"flush\" navSize=\"lg\" primary=\"nav\">\n  <AppShell>…</AppShell>\n</AppShellDefaultsProvider>;\n\nconst shell = useRef<AppShellHandle>(null);\nshell.current?.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. Page with landmark=\"none\" and scroll=\"ancestor\" lives in the content region, so its header sticks at the top of the column the shell scrolls; a Drawer opened from the page lands in the shell’s own layer, over the content and under nothing; Dialog, Menu and Toast do the same. Long translated labels truncate in the column rather than pushing the frame wider.",
+      "language": "tsx",
+      "source": "<AppShellMain>\n  <Page landmark=\"none\" scroll=\"ancestor\" width=\"full\">\n    <PageHeader>…</PageHeader>\n    <PageBody>…</PageBody>\n  </Page>\n</AppShellMain>;\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": "tsx",
+      "source": "<AppShellNav aria-label=\"Main navigation\">…</AppShellNav>;\n<AppShellAside aria-label=\"Order details\">…</AppShellAside>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  AppShell,\n  AppShellBanner,\n  AppShellBrand,\n  AppShellMain,\n  AppShellNav,\n  AppShellNavToggle,\n} from '@slotted/react/app-shell';\nimport {\n  SideNavigation,\n  SideNavigationItem,\n  SideNavigationLabel,\n  SideNavigationLink,\n  SideNavigationList,\n} from '@slotted/react/side-navigation';\n\nexport default function AppShellBasic() {\n  return (\n    <AppShell>\n      <AppShellBanner>\n        <AppShellNavToggle />\n        <AppShellBrand>Northwind</AppShellBrand>\n      </AppShellBanner>\n      <AppShellNav>\n        <SideNavigation aria-label=\"Main navigation\" defaultValue=\"orders\">\n          <SideNavigationList>\n            <SideNavigationItem value=\"orders\">\n              <SideNavigationLink href=\"/orders\">\n                <SideNavigationLabel>Orders</SideNavigationLabel>\n              </SideNavigationLink>\n            </SideNavigationItem>\n            <SideNavigationItem value=\"customers\">\n              <SideNavigationLink href=\"/customers\">\n                <SideNavigationLabel>Customers</SideNavigationLabel>\n              </SideNavigationLink>\n            </SideNavigationItem>\n          </SideNavigationList>\n        </SideNavigation>\n      </AppShellNav>\n      <AppShellMain>\n        <h1>Orders</h1>\n      </AppShellMain>\n    </AppShell>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}