---

## DocsLayout
Standard documentation page layout with optional table of contents.
Provides a responsive two-column layout with a mobile ToC fallback.

When `breadcrumbs` is provided, the layout uses a collapsing-hero pattern:
a unified sticky bar shows breadcrumbs + code toggle initially, then
transitions to a compact bar with title + scrollspy when the header
scrolls out of view.

**Import:** `import { DocsLayout } from '@urbicon-ui/docs';`

### Examples
```svelte
<DocsLayout
  title="Badge"
  description="Status and labels"
  breadcrumbs={[
    { label: 'Blocks', href: '/blocks' },
    { label: 'Primitives', href: '/blocks/primitives' }
  ]}
  showToc
  navigation={nav}
>
  <Section id="examples">...</Section>
</DocsLayout>
```

### Variants
- centered: true (default: false)
- maxWidth: 2xl, 7xl, lg, md, sm, xl (default: lg)
- sidebar: true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...DocsLayoutVariantProps | `VariantProps` | no |  | Styling variants from DocsLayoutVariantProps |
| breadcrumbs | `BreadcrumbItem[]` | no |  | Structured breadcrumb trail (ancestors only, title is appended automatically). Enables the collapsing-hero sticky bar layout. |
| children | `Snippet` | no |  | Content to render inside the DocsLayout component |
| class | `string` | no |  | Extra classes merged onto the root container. |
| description | `string` | no |  | Short description rendered below the title. |
| navigation | `Array<{ id: string; title: string; order?: number }>` | no |  | Navigation items for the table of contents. |
| related | `RelatedLink[]` | no |  | Optional related-links list — passed through to the TableOfContents as a `// RELATED` block below the page sections. Each entry needs a pre-resolved `href`; the layout does not call `resolve()` on it. |
| showCodeToggle | `boolean` | no |  | Show the global code-visibility toggle for collapsing all code examples. Default: true. |
| showToc | `boolean` | no |  | Show a sticky table of contents sidebar on desktop and a collapsible one on mobile. |
| slotClasses | `Partial<Record<'container' | 'wrapper' | 'main' | 'header' | 'title' | 'subtitle' | 'content' | 'stickyBar' | 'pageToolbar', string>>` | no |  | Per-slot class overrides. |
| sourceHref | `string` | no |  | GitHub blob URL for the component's source file — rendered as a `source ↗` link next to the stability badge when present. |
| stability | `'experimental' | 'beta' | 'stable' | 'deprecated'` | no |  | Editorial stability badge — drives the `[STABLE]` / `[BETA]` / etc. stamp above the page title. When omitted, no badge renders; the default is applied upstream in docs-gen, so component pages receive `'stable'` automatically via `componentData?.stability`. |
| title | `string` | no |  | Page title rendered as an h1 in the header area. |
| unstyled | `boolean` | no |  | Remove all default tv styles. |
| centered | `'true'` | no | false | Controls the centered behavior and appearance of the DocsLayout component. Available options: true. |
| maxWidth | `'2xl' | '7xl' | 'lg' | 'md' | 'sm' | 'xl'` | no | lg | Controls the maxWidth behavior and appearance of the DocsLayout component. Available options: 2xl, 7xl, lg, and 3 more. |
| sidebar | `'true'` | no | false | Controls the sidebar behavior and appearance of the DocsLayout component. Available options: true. |

Inherited from:
- DocsLayoutVariantProps (external)

### Slots (slotClasses keys)
`container`, `wrapper`, `main`, `header`, `title`, `subtitle`, `content`, `stickyBar`, `pageToolbar`