Section

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

<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>

• 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.

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