Separator

# Brok UI: Separator (`separator`)

Horizontal or vertical separator for grouping content.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add separator
```

## Usage

```blade
<div class="w-full max-w-sm text-start text-sm text-foreground">
    <p>{{ __('Profile') }}</p>
    <x-ui.separator class="my-3" />
    <div class="flex h-5 items-center gap-3">
        <span>{{ __('Docs') }}</span>
        <x-ui.separator orientation="vertical" />
        <span>{{ __('Source') }}</span>
    </div>
</div>
```

## Props

- `orientation` (string, default `horizontal`) — Direction of the rule: horizontal (full width, 1px tall) or vertical (full height, 1px wide).
- `decorative` (bool, default `true`) — When true, hides the separator from assistive tech (role="none"); when false, exposes role="separator" with aria-orientation for a structurally meaningful divider.

## Use when

- Use to structure hierarchy, spacing, and responsiveness so content is easier to scan and navigate.
- Drawing a thin visual rule between groups of content, such as menu sections or toolbar clusters.
- Needing a semantic role="separator" for a divider that carries real structural meaning, not just decoration.

## Avoid when

- Do not let layout primitives substitute for semantics, headings, or interaction rules users still need.
- The divide is purely a spacing choice; use margin or gap instead of an extra element.
- The boundary needs to carry a visible label, such as "OR"; compose a custom row instead of the bare separator.

## Anti-patterns

- Using visual layout as a substitute for semantic structure

## Rules

- Use the `<brok:separator>` tag (or `<x-ui.separator>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/separator
- Registry JSON (files, props, contract): https://brokui.dev/r/open/separator.json

@props([
    'orientation' => 'horizontal',
    'decorative' => true,
])

@php
    $orientations = [
        'horizontal' => 'h-px w-full',
        'vertical' => 'h-full w-px',
    ];

    $classes = trim('shrink-0 bg-border '.($orientations[$orientation] ?? $orientations['horizontal']));
@endphp

<div
    data-slot="separator"
    data-orientation="{{ $orientation }}"
    @if ($decorative)
        role="none"
    @else
        role="separator"
        aria-orientation="{{ $orientation }}"
    @endif
    {{ $attributes->merge(['class' => $classes]) }}
></div>