---

## Sidebar
Sidebar primitive — fixed-position panel that is permanent on
desktop (≥1024px) and slides in as a backdropped overlay on mobile. Use
this directly for right-side detail panels or custom shells. For the
standard "permanent left rail + mobile hamburger" application chrome,
prefer the higher-level `<SidebarLayout>` component, which handles main
content offset and the mobile header for you.

The component exposes `--sidebar-width` and `--sidebar-effective-width`
(0px when collapsed) as CSS variables on its `<aside>` element. CSS
custom properties only inherit to descendants, so these variables are
available **inside** the sidebar's subtree but not on its siblings — that
is precisely why `<SidebarLayout>` exists for app-shell layouts.

**Import:** `import { Sidebar } from '@urbicon-ui/blocks';`

### Examples
```svelte
<script>
import { Sidebar, Button, CloseIcon, Badge } from '@urbicon-ui/blocks';
let detailOpen = $state(false);
</script>

<Button onclick={() => (detailOpen = true)}>Show details</Button>

<Sidebar bind:open={detailOpen} side="right" width="20rem">
{#snippet header()}
<div class="flex items-center justify-between py-3">
<span class="font-semibold">Item details</span>
<Button variant="ghost" size="xs" onclick={() => (detailOpen = false)}>
<CloseIcon class="h-4 w-4" />
</Button>
</div>
{/snippet}
<div class="space-y-3 p-4">
<dt class="text-text-tertiary text-xs">Status</dt>
<dd><Badge intent="success" size="sm">Active</Badge></dd>
</div>
</Sidebar>
```

```svelte
<Sidebar bind:open={sidebarOpen} mode="collapsible" width="16rem">
{#snippet header()}<span class="font-semibold">App</span>{/snippet}
<nav class="p-3"><!-- links --></nav>
</Sidebar>
```

### Variants
- mode: collapsible, responsive (default: responsive)
- side: left, right (default: left)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| children | `Snippet` | no |  | Main scrollable content of the sidebar. |
| class | `string` | no |  | Additional CSS classes applied to the sidebar panel. |
| closeOnBackdropClick | `boolean` | no | true | Close the mobile overlay when clicking the backdrop. |
| closeOnEscape | `boolean` | no | true | Close the mobile overlay when pressing Escape. |
| footer | `Snippet` | no |  | Content rendered in the sidebar footer (below the scrollable area). |
| header | `Snippet` | no |  | Content rendered in the sidebar header (above the scrollable area). |
| mode | `SidebarVariants['mode']` | no | 'responsive' | Controls sidebar behavior across viewports. - `responsive` (default): permanently visible on desktop (≥1024px), slide-in overlay on mobile. - `collapsible`: toggleable via `open` at all viewports — width animation on desktop, overlay on mobile. |
| onOpenChange | `(open: boolean) => void` | no |  | Fires when the open state changes (mobile overlay dismissed, or collapsible toggled). |
| open | `boolean` | no |  | Controls sidebar visibility. In `responsive` mode (default) this only affects the mobile overlay — on desktop the sidebar is always visible. In `collapsible` mode this controls visibility at all viewports. Supports bind:open. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Sidebar: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| side | `SidebarVariants['side']` | no | 'left' | Which edge the sidebar attaches to. |
| slotClasses | `Partial<Record<SidebarSlots, string>>` | no |  | Per-slot class overrides merged with variant styles. |
| unstyled | `boolean` | no |  | Strip all default styles. Combine with slotClasses for custom appearance. |
| width | `string` | no | '16rem' | CSS width of the sidebar panel. Also exposed as `--sidebar-width` (constant) and `--sidebar-effective-width` (0px when collapsed) CSS variables on the `<aside>`. These inherit only inside the sidebar's own subtree — for the main content offset use `<SidebarLayout>`. |

Inherited from:
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)