---

## Separator
Visual divider for separating content sections. Supports horizontal and
vertical orientations with proper ARIA semantics.

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

### Examples
```svelte
<Separator />
```

```svelte
<div class="flex items-center gap-4">
  <span>Item A</span>
  <Separator orientation="vertical" size="sm" />
  <span>Item B</span>
</div>
```

### Variants
- size: lg, md, sm (default: md)
- orientation: horizontal, vertical (default: horizontal)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| ...SeparatorVariants | `VariantProps` | no |  | Styling variants from SeparatorVariants |
| class | `string` | no |  | Additional CSS class merged onto the root element. |
| decorative | `boolean` | no |  | When true, the separator is purely visual (role="none"); when false, it uses role="separator" with aria-orientation. |
| orientation | `'horizontal' | 'vertical'` | no |  | Horizontal renders a full-width line; vertical renders a full-height line (e.g. inside flex rows). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Separator: {...} }}>`. 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. |
| size | `'sm' | 'md' | 'lg'` | no |  | Controls margin around the line — sm (0.5 rem), md (1 rem), lg (1.5 rem). |
| slotClasses | `Partial<Record<'base', string>>` | no |  | Per-slot class overrides. |
| unstyled | `boolean` | no |  | Strip all default styles; combine with slotClasses to rebuild from scratch. |

Inherited from:
- SeparatorVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)

### Slots (slotClasses keys)
`base`