# SectionHead

`SectionHead` supplies a compact numbered heading with optional metadata and a trailing action.

## Usage

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

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

<Section>
  <SectionHead num="01" title="Collection" count="12 works" more="Explore" href="/artworks" />
  <p>Collection introduction.</p>
</Section>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the root element; `onclick` handles the more button.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- By default the head takes its inset from its `Section`. In a `Section padding="none" gap="none"` whose content reaches the frame, pass `padding="layout"` so the head keeps the shared inset while staying inside the section it names.

## Parameters

| Name      | Type                          | Default     | Description                                                                                                                 |
| --------- | ----------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| `level`   | `2 \| 3 \| 4 \| 5 \| 6`       | `2`         | Semantic heading level; the compact visual style stays the same.                                                            |
| `num`     | `string`                      | `""`        | Optional section number, including a compound value such as 01 · 2.                                                         |
| `title`   | `string`                      | `""`        | Section heading text.                                                                                                       |
| `count`   | `string`                      | `""`        | Optional metadata beside the title, such as an item count or a list of features.                                            |
| `more`    | `string`                      | `""`        | Optional action label. Empty means no action is rendered.                                                                   |
| `href`    | `string`                      | `""`        | When more is present, a nonempty href renders the action as a native link.                                                  |
| `onclick` | `(event: MouseEvent) => void` | `undefined` | Handles the more button when no href is supplied. Not used for the link variant.                                            |
| `padding` | `string`                      | `"none"`    | Presets: none, layout. layout applies the block/inline layout padding tokens; custom CSS accepts a full padding expression. |

## Overrides

| Name                           | Type          | Default                 | Description                     |
| ------------------------------ | ------------- | ----------------------- | ------------------------------- |
| `--section-name-color`         | `CSS color`   | `var(--text-muted)`     | Color of the compact title.     |
| `--section-number-font-weight` | `font weight` | `var(--ui-font-weight)` | Weight of the displayed number. |

## Accessibility

Choose level from the document hierarchy. Give the action a meaningful more label. Links use native navigation; action buttons support Enter and Space.