# Main

`Main` groups route sections in a growing column and coordinates adjoining frame rules and crosses.

## Usage

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

```svelte
<script>
  import { Main, Section } from "@dg/ui";
</script>

<Main>
  <Section><h1>Collection</h1></Section>
  <Section><p>Collection content.</p></Section>
</Main>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the main or div element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Place framed sections directly in `Main`; they drop their bottom rule so each junction is drawn once. The last `section` element grows into available height, even when a dialog or another element follows it. `Header` and `Footer` retain their content height. The sections class is internal, not a utility.

## Parameters

| Name       | Type              | Default                 | Description                                                                                          |
| ---------- | ----------------- | ----------------------- | ---------------------------------------------------------------------------------------------------- |
| `as`       | `'main' \| 'div'` | `"main"`                | Use main once per page. Use div for an embedded group without another main landmark.                 |
| `id`       | `string`          | `"main" when as="main"` | Target for `SkipLink`. No default ID when as is div; keep a custom ID consistent with the skip link. |
| `class`    | `string`          | `""`                    | Additional classes on the content group.                                                             |
| `children` | `Snippet`         | `undefined`             | Framed sections. The final section grows into the remaining viewport height.                         |

## Accessibility

Use one main landmark in the root layout. Routes inside that layout must not add another `Main`. Embedded groups use as="div"; keep any custom content ID consistent with `SkipLink`.