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

package/dist/docs/page.json

@@ -0,0 +1,330 @@
+{
+  "family": "page",
+  "ui": "page",
+  "binding": "react",
+  "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 { Page, PageBody, PageFooter, PageDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "main, or div with landmark=\"none\", or the element render returns",
+          "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 PageHeader and the body live in — under self, the scroller. It is the one element a page header may be a direct child of: a sticky element never leaves the box that contains it, which is why there is no header part."
+        },
+        {
+          "part": "body",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The padded column: one Container at the page’s width and inset, one HeadingLevel deeper than the header, and aria-busy while loading. Under fill, from 600 pixels of the page’s width up, it stretches to what is left and the child inside it takes that height."
+        },
+        {
+          "part": "footer",
+          "element": "footer, or the element render returns",
+          "required": false,
+          "purpose": "The bar for the actions that finish the task, passed through the footer prop so it sits outside the scroll part. In the flow and stuck to the bottom of the root, never fixed; named by the footer message; held through its exit by presence, with data-status for the stylesheet."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The row inside the footer’s container: the footer’s children, aligned to the end, wrapping when the width runs out."
+        }
+      ],
+      "api": [
+        {
+          "name": "width",
+          "type": "'measure' | 'content' | 'wide' | 'full' | 'bleed'",
+          "defaultValue": "wide",
+          "appliesTo": "Page, PageDefaultsProvider",
+          "description": "The measure of the content column: the Container’s own sizes, handed to the container the body renders and read by the header and the footer through usePage()"
+        },
+        {
+          "name": "inset",
+          "type": "0 to 12",
+          "defaultValue": "6",
+          "appliesTo": "Page, PageDefaultsProvider",
+          "description": "The inset of the column from the edge of the page, as a step on the space scale — the Container’s own. Held at 4 below 600 pixels of the page’s width"
+        },
+        {
+          "name": "scroll",
+          "type": "'ancestor' | 'self'",
+          "defaultValue": "ancestor",
+          "appliesTo": "Page, PageDefaultsProvider",
+          "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": "Page",
+          "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": "Page, PageDefaultsProvider",
+          "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": "Page, PageDefaultsProvider",
+          "description": "Whether the root is the document’s main. none renders a div, for a page inside a drawer, a dialog or a detail pane where the document already has one"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Page",
+          "description": "The body carries aria-busy and the root data-loading. Each family inside draws its own placeholder"
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Page",
+          "description": "A PageFooter, passed as a prop so it sits outside the scroll part. Mounted while it is passed and held through its exit"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<PageMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Page",
+          "description": "Words laid over the language in force: the accessible name of the footer (footer). An aria-label written on PageFooter itself still wins"
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Page, PageBody, PageFooter",
+          "description": "Substitutes the root, the body or the footer and hands it every attribute. The scroll part is fixed, because it is the scroller and trading it would trade the overflow"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "Page, PageBody, PageFooter",
+          "description": "Reaches the element itself. Under scroll=\"self\" the scroller is the scroll part inside it: root.querySelector(\"[data-part=scroll]\")"
+        },
+        {
+          "name": "usePage()",
+          "type": "() => PageContextValue | undefined",
+          "defaultValue": "—",
+          "appliesTo": "inside Page",
+          "description": "What the header and the footer read: width, inset, scroll, ground, loading and the translator t. Undefined outside a page, so a header standing alone is complete"
+        },
+        {
+          "name": "PageDefaultsProvider",
+          "type": "{ width, inset, scroll, ground, landmark }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "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"
+        }
+      ],
+      "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. landmark=\"none\" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.",
+        "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. A reader walking the page’s controls finds “Page actions” before the buttons in it.",
+        "The outline is typography’s. The body is one HeadingLevel deeper than the header, 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 axis 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": "tsx",
+      "source": "<Page footer={<PageFooter>…</PageFooter>}>\n  <PageHeader>…</PageHeader>\n  <PageBody>…</PageBody>\n</Page>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "width",
+      "title": "The measure of the content",
+      "note": "The four sizes are the Container’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": "tsx",
+      "source": "<Page inset={4} width=\"content\">\n  …\n</Page>;\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": "tsx",
+      "source": "<Page scroll=\"self\">…</Page>;\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": "tsx",
+      "source": "<Page fill scroll=\"self\">\n  <PageHeader>…</PageHeader>\n  <PageBody>\n    <SplitView>…</SplitView>\n  </PageBody>\n</Page>;\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": "tsx",
+      "source": "<Page ground=\"surface\">…</Page>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "footer",
+      "title": "The footer comes and goes",
+      "note": "Toggle the switch: the bar slides in from below and out again, 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": "tsx",
+      "source": "<Page\n  footer={\n    dirty ? (\n      <PageFooter>\n        <Button variant=\"ghost\">Descartar</Button>\n        <Button tone=\"accent\">Guardar</Button>\n      </PageFooter>\n    ) : undefined\n  }\n>\n  …\n</Page>;\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": "tsx",
+      "source": "<Page loading={order === undefined}>…</Page>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "A whole screen, and a page in a drawer",
+      "note": "The full order: header, sticky sections, a table whose column header stops under the chrome, the footer. Then the same family inside a drawer, with landmark=\"none\" because the document already has its main, scrolling inside the drawer’s own box.",
+      "language": "tsx",
+      "source": "<Page landmark=\"none\" scroll=\"self\" width=\"content\">\n  <PageHeader level=\"2\" size=\"sm\">\n    …\n  </PageHeader>\n  <PageBody>…</PageBody>\n</Page>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Setting it once, and reaching past it",
+      "note": "The provider carries width, inset, scroll, ground and landmark for every page under it; render makes the root an article; ref reaches the element.",
+      "language": "tsx",
+      "source": "<PageDefaultsProvider ground=\"surface\" width=\"content\">\n  <Page>…</Page>\n</PageDefaultsProvider>;\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": "tsx",
+      "source": "<Page>\n  <PageHeader>\n    <PageHeaderHeading>…</PageHeaderHeading>\n  </PageHeader>\n  <PageBody>\n    <Section>\n      <SectionHeading>…</SectionHeading>\n    </Section>\n  </PageBody>\n</Page>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/dist/docs/page.md

@@ -0,0 +1,199 @@
+<!-- index: ./index.md -->
+# page
+
+`data-ui="page"` · Page body with width, scroll and footer.
+
+## Import
+
+```tsx
+import { Page, PageBody, PageFooter, PageDefaultsProvider } from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<Page footer={<PageFooter>…</PageFooter>}>
+  <PageHeader>…</PageHeader>
+  <PageBody>…</PageBody>
+</Page>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | main, or div with landmark="none", or the element render returns | yes |
+| `scroll` | div | yes |
+| `body` | div, or the element render returns | yes |
+| `footer` | footer, or the element render returns | no |
+| `actions` | div | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `width` | `'measure' \| 'content' \| 'wide' \| 'full' \| 'bleed'` | wide | Page, PageDefaultsProvider | The measure of the content column: the Container’s own sizes, handed to the container the body renders and read by the header and the footer through usePage() |
+| `inset` | `0 to 12` | 6 | Page, PageDefaultsProvider | The inset of the column from the edge of the page, as a step on the space scale — the Container’s own. Held at 4 below 600 pixels of the page’s width |
+| `scroll` | `'ancestor' \| 'self'` | ancestor | Page, PageDefaultsProvider | 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 | Page | 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 | Page, PageDefaultsProvider | 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 | Page, PageDefaultsProvider | Whether the root is the document’s main. none renders a div, for a page inside a drawer, a dialog or a detail pane where the document already has one |
+| `loading` | `boolean` | false | Page | The body carries aria-busy and the root data-loading. Each family inside draws its own placeholder |
+| `footer` | `ReactNode` | — | Page | A PageFooter, passed as a prop so it sits outside the scroll part. Mounted while it is passed and held through its exit |
+| `messages` | `Partial<PageMessages>` | — | Page | Words laid over the language in force: the accessible name of the footer (footer). An aria-label written on PageFooter itself still wins |
+| `render` | `(props) => ReactNode` | — | Page, PageBody, PageFooter | Substitutes the root, the body or the footer and hands it every attribute. The scroll part is fixed, because it is the scroller and trading it would trade the overflow |
+| `ref` | `Ref<HTMLElement>` | — | Page, PageBody, PageFooter | Reaches the element itself. Under scroll="self" the scroller is the scroll part inside it: root.querySelector("[data-part=scroll]") |
+| `usePage()` | `() => PageContextValue \| undefined` | — | inside Page | What the header and the footer read: width, inset, scroll, ground, loading and the translator t. Undefined outside a page, so a header standing alone is complete |
+| `PageDefaultsProvider` | `{ width, inset, scroll, ground, landmark }` | — | a subtree | 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 |
+
+## 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. landmark="none" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.
+- 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. A reader walking the page’s controls finds “Page actions” before the buttons in it.
+- The outline is typography’s. The body is one HeadingLevel deeper than the header, 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 Container’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
+
+```tsx
+<Page inset={4} width="content">
+  …
+</Page>;
+```
+
+### 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
+
+```tsx
+<Page scroll="self">…</Page>;
+```
+
+### 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
+
+```tsx
+<Page fill scroll="self">
+  <PageHeader>…</PageHeader>
+  <PageBody>
+    <SplitView>…</SplitView>
+  </PageBody>
+</Page>;
+```
+
+### 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
+
+```tsx
+<Page ground="surface">…</Page>;
+```
+
+### The footer comes and goes
+
+Toggle the switch: the bar slides in from below and out again, 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
+
+```tsx
+<Page
+  footer={
+    dirty ? (
+      <PageFooter>
+        <Button variant="ghost">Descartar</Button>
+        <Button tone="accent">Guardar</Button>
+      </PageFooter>
+    ) : undefined
+  }
+>
+  …
+</Page>;
+```
+
+### 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
+
+```tsx
+<Page loading={order === undefined}>…</Page>;
+```
+
+### A whole screen, and a page in a drawer
+
+The full order: header, sticky sections, a table whose column header stops under the chrome, the footer. Then the same family inside a drawer, with landmark="none" because the document already has its main, scrolling inside the drawer’s own box.
+
+Excerpt — not a complete module
+
+```tsx
+<Page landmark="none" scroll="self" width="content">
+  <PageHeader level="2" size="sm">
+    …
+  </PageHeader>
+  <PageBody>…</PageBody>
+</Page>;
+```
+
+### Setting it once, and reaching past it
+
+The provider carries width, inset, scroll, ground and landmark for every page under it; render makes the root an article; ref reaches the element.
+
+Excerpt — not a complete module
+
+```tsx
+<PageDefaultsProvider ground="surface" width="content">
+  <Page>…</Page>
+</PageDefaultsProvider>;
+```
+
+### 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
+
+```tsx
+<Page>
+  <PageHeader>
+    <PageHeaderHeading>…</PageHeaderHeading>
+  </PageHeader>
+  <PageBody>
+    <Section>
+      <SectionHeading>…</SectionHeading>
+    </Section>
+  </PageBody>
+</Page>;
+```