# Page

`Page` centers the application frame, supplies responsive margins and fills at least the viewport height. A direct `aside` becomes a sidebar beside the content.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { Page, Header, Main, Footer, SkipLink, Heading } from "@dg/ui";
</script>

<Page lang="en">
  <SkipLink />
  <Header />
  <Main><Heading title="Collection" /></Main>
  <Footer />
</Page>
```

Place an `aside` between `Header` and `Main` for a sidebar. `Page` lays it out beside the content without a wrapper; the aside draws its own rules.

```svelte
<script>
  import { Page, Header, Main, Footer, SkipLink, Heading } from "@dg/ui";
</script>

<Page lang="en">
  <SkipLink />
  <Header />
  <aside aria-label="Collection">
    <nav aria-label="Collection subjects">
      <a href="/paintings">Paintings</a>
      <a href="/drawings">Drawings</a>
    </nav>
  </aside>
  <Main><Heading title="Paintings" /></Main>
  <Footer />
</Page>

<style>
  /* The content's start rule closes the aside beside it. */
  aside {
    border-inline-start: var(--border-width) solid var(--border);
    border-top: var(--border-width) solid var(--border);
  }

  /* Stacked above the content, the aside also draws its end rule. */
  @media (--medium) {
    aside {
      border-inline-end: var(--border-width) solid var(--border);
    }
  }
</style>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the inner page div.
- `lang` is set on the page element and selects the built-in English or French text of `SkipLink`, `Header`, `ThemeToggle`, `Dialog`, `Tabs`, `Cards`, `ErrorPage` and the conversation components. Props that name content, such as `label` or `placeholder`, override single entries. A nested `Page` without `lang` inherits it.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Direct frames of `Page` and `Main` drop their bottom rule, so each [frame junction](../foundations/surfaces.md) is drawn once by the next frame's top rule. Crosses need no coordination across `Main`.
- The outermost `Page` adds a script to the document head that restores the saved theme before first paint, so `app.html` needs no theme code.
- Both width modes share responsive minimum margins: `--space-7`, and `--space-4` on narrow viewports (`--narrow`). Larger screen safe areas increase both margins equally.
- The viewport height is a minimum, not a cap: short content fills the viewport and longer content keeps its natural document scroll. `Footer` decorations do not add extra scroll below the frame.
- Use style="min-height: 0" for an embedded preview that should not fill the viewport. Content padding belongs to the child sections.
- Available width comes from the parent; content padding belongs to child sections. Without `Main`, the composition owns content growth. The internal page class is not a standalone foundation utility.
- A direct `aside` switches the frame to a grid: `Header` and `Footer` span its width, the aside takes a start column of 14 to 18rem and the remaining content element, usually `Main`, fills the rest and grows into the viewport height. Below `--medium`, the aside stacks between the header and the content; a sidebar that changes form on narrow screens switches at the same breakpoint. Without an aside, `Page` stays a single column.
- The aside draws its own rules, like any frame: top and start rules beside the content, whose start rule closes it, plus its end rule once stacked. It stretches over the content row, so a sticky child follows the scroll. Place one content element beside it; fixed children such as `SkipLink` and `Dialog` take no place in the layout.

## Parameters

| Name       | Type           | Default     | Description                                                                                                                                                    |
| ---------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `lang`     | `'en' \| 'fr'` | `undefined` | Language of the page content and of every built-in label in the toolkit components it contains. Omitted, labels are English and the document language applies. |
| `width`    | `string`       | `"100rem"`  | Maximum frame width. Use full to remove the maximum; the frame still respects its margins.                                                                     |
| `class`    | `string`       | `""`        | Additional classes on the frame; existing classes are retained.                                                                                                |
| `children` | `Snippet`      | `undefined` | `Page` content, usually `Header`, `Main` and `Footer`, with an optional sidebar `aside` before `Main`.                                                         |

## Accessibility

`Page` is a layout container. Compose one `Main` landmark and place `SkipLink` as the first child of `Page`; its fixed position keeps it visible above the frame. Set `lang` to the audience language so built-in accessible names match it. Name a sidebar `aside` with `aria-label`; it precedes `Main` in reading and focus order, and `SkipLink` lets keyboard users bypass it.