# Section

`Section` owns a framed content block, its corner crosses, outer padding and spacing between direct children.

## Usage

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

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

<Section id="collection">
  <SectionHead num="01" title="Collection" />
  <div class="formatted">
    <p>Related reading content.</p>
    <p>A second paragraph.</p>
  </div>
</Section>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the section element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- In `Page` and `Main`, the section drops its bottom rule; the next frame's top rule closes it. The section owns outer spacing; cell or control spacing stays inside its children.
- `Section` includes stack. Pass justify-* and items-* through class to align its direct children. Padding and gap come from their props, which override spacing classes: gap modifiers have no effect. For this vertical layout, justify-* is vertical and items-* is horizontal.
- Padding presets: layout retains all insets; none removes them; no-bottom removes only the bottom inset. Custom values are complete CSS padding expressions and need a concrete constraint.
- Gap presets: layout separates independent blocks; content separates related parts of one block; control separates the parts of a control group; none lets adjoining children own their spacing. Custom values are complete CSS gap expressions and need a concrete constraint.
- Group related paragraphs in a `.formatted` child so `Section` gap separates the heading from that group. Use padding="none" gap="none" when a jointive child owns its own insets.

## Parameters

| Name       | Type                                   | Default     | Description                                                                                                                                |
| ---------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `padding`  | `string`                               | `"layout"`  | Presets: layout, none, no-bottom. Retained sides use the block/inline layout padding tokens; custom CSS accepts a full padding expression. |
| `gap`      | `string`                               | `"layout"`  | Presets: layout, content, control, none. Named gaps use the matching block/inline gap tokens; custom CSS accepts a full gap expression.    |
| `crosses`  | `'both' \| 'top' \| 'bottom' \| false` | `"both"`    | Choose the decorated corners. False disables this section's crosses. Crosses requested by both neighbors at a junction coincide.           |
| `children` | `Snippet`                              | `undefined` | `Section` content, including an optional `SectionHead`.                                                                                    |

## Accessibility

Use a heading when the content forms a named section. Alignment classes change layout only; preserve meaningful reading order.