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

package/docs/page.json

@@ -0,0 +1,332 @@
+{
+  "family": "page",
+  "ui": "page",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Page body with width, scroll and footer."
+  },
+  "axes": {
+    "width": [
+      "measure",
+      "content",
+      "wide",
+      "full",
+      "bleed"
+    ],
+    "inset": [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    "scroll": [
+      "ancestor",
+      "self"
+    ],
+    "fill": [
+      false,
+      true
+    ],
+    "ground": [
+      "sunken",
+      "surface"
+    ],
+    "landmark": [
+      "main",
+      "none"
+    ]
+  },
+  "members": {
+    "page": {
+      "nativeElement": "main",
+      "defaults": {
+        "width": "wide",
+        "inset": "6",
+        "scroll": "ancestor",
+        "fill": false,
+        "ground": "sunken",
+        "landmark": "main",
+        "loading": false
+      },
+      "capabilities": [
+        "appearance",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "scroll",
+        "body",
+        "footer",
+        "actions"
+      ]
+    }
+  },
+  "docs": {
+    "page": {
+      "imports": {
+        "source": "import { SlPage, SlPageBody, SlPageFooter, providePageDefaults } from '@slotted/angular/page';",
+        "selector": "[slPage], [slPageBody], [slPageFooter]",
+        "exportAs": "slPage, slPageBody, slPageFooter"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the main carrying slPage, or any element, which then gets role=\"main\" unless landmark=\"none\"",
+          "required": true,
+          "purpose": "The column of the screen, carrying data-ui=\"page\", data-scroll, data-ground, data-width, data-fill and data-loading. Under scroll=\"ancestor\" it is at least as tall as what scrolls it; under scroll=\"self\" it is exactly as tall as its parent lets it be. It writes the ground and the sticky offsets its children read."
+        },
+        {
+          "part": "scroll",
+          "element": "div",
+          "required": true,
+          "purpose": "The box the element carrying slPageHeader is projected into first, beside the body — under self, the scroller. It is the one element a page header may be a direct child of, which is why there is no header part."
+        },
+        {
+          "part": "body",
+          "element": "the element carrying slPageBody",
+          "required": true,
+          "purpose": "The padded column: one slContainer at the page’s width and inset, slHeadingLevel as a host directive so a section inside takes h2, and aria-busy while loading. Under fill, from 600 pixels of the page’s width up, it stretches to what is left."
+        },
+        {
+          "part": "footer",
+          "element": "the footer carrying slPageFooter",
+          "required": false,
+          "purpose": "The bar for the actions that finish the task, projected outside the scroll part. In the flow and stuck to the bottom of the root, never fixed; named by the footer message; open keeps it through its exit, with data-status for the stylesheet."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The row inside the footer’s container: the footer’s content, aligned to the end, wrapping when the width runs out."
+        }
+      ],
+      "api": [
+        {
+          "name": "width",
+          "type": "'measure' | 'content' | 'wide' | 'full' | 'bleed'",
+          "defaultValue": "wide",
+          "appliesTo": "slPage, providePageDefaults",
+          "description": "The measure of the content column: the slContainer’s own sizes, handed to the container the body renders and read by the header and the footer through injection"
+        },
+        {
+          "name": "inset",
+          "type": "0 to 12",
+          "defaultValue": "6",
+          "appliesTo": "slPage, providePageDefaults",
+          "description": "The inset of the column from the edge of the page, as a step on the space scale — the slContainer’s own. Held at 4 below 600 pixels of the page’s width"
+        },
+        {
+          "name": "scroll",
+          "type": "'ancestor' | 'self'",
+          "defaultValue": "ancestor",
+          "appliesTo": "slPage, providePageDefaults",
+          "description": "Who scrolls. ancestor makes the page at least as tall as what scrolls it and sticks the footer to the root’s bottom; self makes the scroll part the scroller and puts the footer below it"
+        },
+        {
+          "name": "fill",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slPage",
+          "description": "The body stops growing with its content and its child stretches to what is left, for a master–detail, a splitter or a canvas that scroll their own panes. The body’s principal scroller snaps the header’s area. From 600 pixels of the page’s width up; below it the page scrolls as without fill"
+        },
+        {
+          "name": "ground",
+          "type": "'sunken' | 'surface'",
+          "defaultValue": "sunken",
+          "appliesTo": "slPage, providePageDefaults",
+          "description": "The canvas of an application, or the plain surface of a document. Written as --slotted-page-ground for a sticky section header to paint"
+        },
+        {
+          "name": "landmark",
+          "type": "'main' | 'none'",
+          "defaultValue": "main",
+          "appliesTo": "slPage, providePageDefaults",
+          "description": "Whether the root is the document’s main. A main element is left alone; any other element gets role=\"main\" unless this says none, for a page inside a drawer, a dialog or a detail pane"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slPage",
+          "description": "The body carries aria-busy and the root data-loading. Each family inside draws its own placeholder"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slPageFooter",
+          "description": "Whether the bar is shown. false slides it out and hides it once it has left, with data-status for the stylesheet"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<PageMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slPage",
+          "description": "Words laid over the language in force: the accessible name of the footer (footer). An aria-label written on the footer itself still wins"
+        }
+      ],
+      "composition": [
+        {
+          "name": "slPage on any element",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "the consumer’s own element",
+          "description": "main keeps its native landmark; an article or a div gets role=\"main\" unless landmark=\"none\". The scroll part is the component’s, because it is the scroller"
+        },
+        {
+          "name": "exportAs slPage",
+          "type": "SlPage",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "The resolved width, inset, scroll and ground as signals, which the header and the footer inject"
+        },
+        {
+          "name": "providePageDefaults()",
+          "type": "{ width, inset, scroll, ground, landmark }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The five decisions an application takes once. A page that states any of them itself still wins"
+        },
+        {
+          "name": "--slotted-page-sticky-top, --slotted-page-sticky-bottom",
+          "type": "runtime properties on the scroller",
+          "defaultValue": "—",
+          "appliesTo": "every family under the page, and the consumer’s own sticky elements inside it",
+          "description": "The height of the chrome that stays at the top, written by the header, and of the footer, written by the page. A section’s sticky header reads the first; a table with stickyTo=\"page\" reads both through the bridge the page writes on its root. A consumer’s own position: sticky element reads the first as well: inset-block-start: calc(var(--slotted-page-sticky-top, 0px) + gap) stops it under the chrome instead of behind the stuck header, and max-block-size: calc(100dvh - var(--slotted-page-sticky-top, 0px) - gap) bounds one that may be taller than the viewport"
+        },
+        {
+          "name": "native attributes",
+          "type": "on every part",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every directive sits on the consumer’s own element, so id, class, role and every listener stay where they were written; role and aria-label are read with HostAttributeToken before anything is written over them"
+        }
+      ],
+      "events": [],
+      "accessibility": [
+        "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role=\"main\", unless landmark=\"none\" says the document already has one.",
+        "The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.",
+        "The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.",
+        "The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.",
+        "Scrolling is the platform’s. The page never writes a scroll position, and under scroll=\"self\" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-gap-md",
+    "--slotted-duration-medium",
+    "--slotted-easing-standard",
+    "--slotted-font-family-sans",
+    "--slotted-page-background-sunken",
+    "--slotted-page-background-surface",
+    "--slotted-page-footer-background",
+    "--slotted-page-footer-border",
+    "--slotted-page-footer-padding-block",
+    "--slotted-page-padding-block",
+    "--slotted-space-4",
+    "--slotted-space-8",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-text",
+    "--slotted-z-index-sticky"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One purchase order screen with every input on it, driven by the controls below the canvas. Scroll the box: the header snaps, the sections pass, the footer waits at the bottom.",
+      "language": "html",
+      "source": "<main slPage>\n  <header slPageHeader>…</header>\n  <div slPageBody>…</div>\n  <footer slPageFooter>…</footer>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "width",
+      "title": "The measure of the content",
+      "note": "The four sizes are the slContainer’s own — measure for prose, content for a form, wide for an application screen, full for a table that needs every pixel — and the header, the body and the footer align to the same column. Below 600 pixels of the page’s own width, the compact size class, an inset above step 4 is held at step 4.",
+      "language": "html",
+      "source": "<main slPage width=\"content\" [inset]=\"4\">…</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "scroll",
+      "title": "Who scrolls",
+      "note": "On the left the page is inside a box that scrolls, as inside a shell’s content column; on the right the page’s own scroll part scrolls and the footer sits below it, never over the last line. The header collapses the same way in both.",
+      "language": "html",
+      "source": "<main slPage scroll=\"self\">…</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fill",
+      "title": "A body that fills",
+      "note": "The body stops growing with its content and the two panes inside it take the rest of the height and scroll on their own, as a master–detail does. Nothing scrolls outside them, so a pane is what moves the header: scrolled down past 16 pixels it snaps the area shut, back at its top it opens it again, and the pill still folds it by hand. Only a principal scroller moves it — not a form control, and at least half the body’s height — so a textarea or a short scroll area in the body leaves the header alone. Below 600 pixels of the page’s width fill does not apply: the body grows with its content, the page scrolls, and the header scrolls away with it.",
+      "language": "html",
+      "source": "<main slPage fill scroll=\"self\">\n  <header slPageHeader>…</header>\n  <div slPageBody><div class=\"split\">…</div></div>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "ground",
+      "title": "The two grounds",
+      "note": "sunken is the canvas of an application, where a section on a surface separates from the page; surface is a document page, where the content is the page and a rule separates. The header paints the surface on both.",
+      "language": "html",
+      "source": "<main slPage ground=\"surface\">…</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "footer",
+      "title": "The footer comes and goes",
+      "note": "Press the buttons: open slides the bar out and hides it once it has left, held through its exit by presence. It is in the flow, so the last row scrolls up to it rather than under it, and a table’s sticky summary stops above it.",
+      "language": "html",
+      "source": "<footer slPageFooter [open]=\"dirty()\">\n  <button slButton variant=\"ghost\">Descartar</button>\n  <button slButton tone=\"accent\">Guardar</button>\n</footer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "While the record arrives",
+      "note": "The body says aria-busy and the cursor says progress; the header stands its skeleton text and the body its own placeholders, because each family draws its own. Press Chegou and nothing moves.",
+      "language": "html",
+      "source": "<main slPage [loading]=\"order() === undefined\">…</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "A whole screen, and a page that is not the document’s main",
+      "note": "The full order: header, sticky sections, a table whose column header stops under the chrome, the footer. Then the same family on a div with landmark=\"none\" inside a scrolling pane, because the document already has its main.",
+      "language": "html",
+      "source": "<div slPage landmark=\"none\" scroll=\"self\" width=\"content\">\n  <header slPageHeader level=\"2\" size=\"sm\">…</header>\n  <div slPageBody>…</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Setting it once, and reaching past it",
+      "note": "providePageDefaults carries width, inset, scroll, ground and landmark for every page under it; the directive sits on the consumer’s own element, so an article is an article; the instance is reachable through exportAs.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [providePageDefaults({ ground: 'surface', width: 'content' })],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "The landmarks a reader walks",
+      "note": "One main per document — the page — with the header inside it and the footer named; a section with a heading is a region named by it; the outline goes h1, h2, h3 without a skip. Walk the landmark list and the heading list of this screen.",
+      "language": "html",
+      "source": "<main slPage>\n  <header slPageHeader><h1 slPageHeaderHeading>…</h1></header>\n  <div slPageBody>\n    <section slSection><h2 slSectionHeading>…</h2></section>\n  </div>\n</main>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/page.md

@@ -0,0 +1,184 @@
+<!-- index: ./index.md -->
+# page
+
+`data-ui="page"` · Page body with width, scroll and footer.
+
+## Import
+
+```ts
+import { SlPage, SlPageBody, SlPageFooter, providePageDefaults } from '@slotted/angular/page';
+```
+
+Selector: `[slPage], [slPageBody], [slPageFooter]` · exportAs: `slPage, slPageBody, slPageFooter`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<main slPage>
+  <header slPageHeader>…</header>
+  <div slPageBody>…</div>
+  <footer slPageFooter>…</footer>
+</main>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the main carrying slPage, or any element, which then gets role="main" unless landmark="none" | yes |
+| `scroll` | div | yes |
+| `body` | the element carrying slPageBody | yes |
+| `footer` | the footer carrying slPageFooter | no |
+| `actions` | div | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `width` | `'measure' \| 'content' \| 'wide' \| 'full' \| 'bleed'` | wide | slPage, providePageDefaults | The measure of the content column: the slContainer’s own sizes, handed to the container the body renders and read by the header and the footer through injection |
+| `inset` | `0 to 12` | 6 | slPage, providePageDefaults | The inset of the column from the edge of the page, as a step on the space scale — the slContainer’s own. Held at 4 below 600 pixels of the page’s width |
+| `scroll` | `'ancestor' \| 'self'` | ancestor | slPage, providePageDefaults | Who scrolls. ancestor makes the page at least as tall as what scrolls it and sticks the footer to the root’s bottom; self makes the scroll part the scroller and puts the footer below it |
+| `fill` | `boolean` | false | slPage | The body stops growing with its content and its child stretches to what is left, for a master–detail, a splitter or a canvas that scroll their own panes. The body’s principal scroller snaps the header’s area. From 600 pixels of the page’s width up; below it the page scrolls as without fill |
+| `ground` | `'sunken' \| 'surface'` | sunken | slPage, providePageDefaults | The canvas of an application, or the plain surface of a document. Written as --slotted-page-ground for a sticky section header to paint |
+| `landmark` | `'main' \| 'none'` | main | slPage, providePageDefaults | Whether the root is the document’s main. A main element is left alone; any other element gets role="main" unless this says none, for a page inside a drawer, a dialog or a detail pane |
+| `loading` | `boolean` | false | slPage | The body carries aria-busy and the root data-loading. Each family inside draws its own placeholder |
+| `open` | `boolean` | true | slPageFooter | Whether the bar is shown. false slides it out and hides it once it has left, with data-status for the stylesheet |
+| `messages` | `Partial<PageMessages>` | — | slPage | Words laid over the language in force: the accessible name of the footer (footer). An aria-label written on the footer itself still wins |
+| `slPage on any element` | `directive` | — | the consumer’s own element | main keeps its native landmark; an article or a div gets role="main" unless landmark="none". The scroll part is the component’s, because it is the scroller |
+| `exportAs slPage` | `SlPage` | — | a template reference | The resolved width, inset, scroll and ground as signals, which the header and the footer inject |
+| `providePageDefaults()` | `{ width, inset, scroll, ground, landmark }` | — | an injector | The five decisions an application takes once. A page that states any of them itself still wins |
+| `--slotted-page-sticky-top, --slotted-page-sticky-bottom` | `runtime properties on the scroller` | — | every family under the page, and the consumer’s own sticky elements inside it | The height of the chrome that stays at the top, written by the header, and of the footer, written by the page. A section’s sticky header reads the first; a table with stickyTo="page" reads both through the bridge the page writes on its root. A consumer’s own position: sticky element reads the first as well: inset-block-start: calc(var(--slotted-page-sticky-top, 0px) + gap) stops it under the chrome instead of behind the stuck header, and max-block-size: calc(100dvh - var(--slotted-page-sticky-top, 0px) - gap) bounds one that may be taller than the viewport |
+| `native attributes` | `on every part` | — | every part | Every directive sits on the consumer’s own element, so id, class, role and every listener stay where they were written; role and aria-label are read with HostAttributeToken before anything is written over them |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `width` | `measure`, `content`, `wide`, `full`, `bleed` | `wide` |
+| `inset` | `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12` | `6` |
+| `scroll` | `ancestor`, `self` | `ancestor` |
+| `fill` | `false`, `true` | `false` |
+| `ground` | `sunken`, `surface` | `sunken` |
+| `landmark` | `main`, `none` | `main` |
+
+## Rules
+
+- The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role="main", unless landmark="none" says the document already has one.
+- The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.
+- The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.
+- The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.
+- Scrolling is the platform’s. The page never writes a scroll position, and under scroll="self" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus.
+
+## Tokens
+
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-font-family-sans`, `--slotted-page-background-sunken`, `--slotted-page-background-surface`, `--slotted-page-footer-background`, `--slotted-page-footer-border`, `--slotted-page-footer-padding-block`, `--slotted-page-padding-block`, `--slotted-space-4`, `--slotted-space-8`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-z-index-sticky`
+
+## Examples
+
+### The measure of the content
+
+The four sizes are the slContainer’s own — measure for prose, content for a form, wide for an application screen, full for a table that needs every pixel — and the header, the body and the footer align to the same column. Below 600 pixels of the page’s own width, the compact size class, an inset above step 4 is held at step 4.
+
+Excerpt — not a complete module
+
+```html
+<main slPage width="content" [inset]="4">…</main>
+```
+
+### Who scrolls
+
+On the left the page is inside a box that scrolls, as inside a shell’s content column; on the right the page’s own scroll part scrolls and the footer sits below it, never over the last line. The header collapses the same way in both.
+
+Excerpt — not a complete module
+
+```html
+<main slPage scroll="self">…</main>
+```
+
+### A body that fills
+
+The body stops growing with its content and the two panes inside it take the rest of the height and scroll on their own, as a master–detail does. Nothing scrolls outside them, so a pane is what moves the header: scrolled down past 16 pixels it snaps the area shut, back at its top it opens it again, and the pill still folds it by hand. Only a principal scroller moves it — not a form control, and at least half the body’s height — so a textarea or a short scroll area in the body leaves the header alone. Below 600 pixels of the page’s width fill does not apply: the body grows with its content, the page scrolls, and the header scrolls away with it.
+
+Excerpt — not a complete module
+
+```html
+<main slPage fill scroll="self">
+  <header slPageHeader>…</header>
+  <div slPageBody><div class="split">…</div></div>
+</main>
+```
+
+### The two grounds
+
+sunken is the canvas of an application, where a section on a surface separates from the page; surface is a document page, where the content is the page and a rule separates. The header paints the surface on both.
+
+Excerpt — not a complete module
+
+```html
+<main slPage ground="surface">…</main>
+```
+
+### The footer comes and goes
+
+Press the buttons: open slides the bar out and hides it once it has left, held through its exit by presence. It is in the flow, so the last row scrolls up to it rather than under it, and a table’s sticky summary stops above it.
+
+Excerpt — not a complete module
+
+```html
+<footer slPageFooter [open]="dirty()">
+  <button slButton variant="ghost">Descartar</button>
+  <button slButton tone="accent">Guardar</button>
+</footer>
+```
+
+### While the record arrives
+
+The body says aria-busy and the cursor says progress; the header stands its skeleton text and the body its own placeholders, because each family draws its own. Press Chegou and nothing moves.
+
+Excerpt — not a complete module
+
+```html
+<main slPage [loading]="order() === undefined">…</main>
+```
+
+### A whole screen, and a page that is not the document’s main
+
+The full order: header, sticky sections, a table whose column header stops under the chrome, the footer. Then the same family on a div with landmark="none" inside a scrolling pane, because the document already has its main.
+
+Excerpt — not a complete module
+
+```html
+<div slPage landmark="none" scroll="self" width="content">
+  <header slPageHeader level="2" size="sm">…</header>
+  <div slPageBody>…</div>
+</div>
+```
+
+### Setting it once, and reaching past it
+
+providePageDefaults carries width, inset, scroll, ground and landmark for every page under it; the directive sits on the consumer’s own element, so an article is an article; the instance is reachable through exportAs.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [providePageDefaults({ ground: 'surface', width: 'content' })],
+});
+```
+
+### The landmarks a reader walks
+
+One main per document — the page — with the header inside it and the footer named; a section with a heading is a region named by it; the outline goes h1, h2, h3 without a skip. Walk the landmark list and the heading list of this screen.
+
+Excerpt — not a complete module
+
+```html
+<main slPage>
+  <header slPageHeader><h1 slPageHeaderHeading>…</h1></header>
+  <div slPageBody>
+    <section slSection><h2 slSectionHeading>…</h2></section>
+  </div>
+</main>
+```