# `PhiaUi.Components.Separator`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/separator.ex#L1)

Thin divider line for separating content regions.

Renders a horizontal or vertical separator using `bg-border` — the
semantic Tailwind token that adapts to light and dark mode automatically.
Zero JavaScript — purely CSS.

## Decorative vs structural separators

The `:decorative` attribute controls ARIA semantics:

| `decorative` | `role`        | Screen reader behaviour                  |
|-------------|---------------|------------------------------------------|
| `true` (default) | `"none"` | Hidden from assistive technologies       |
| `false`     | `"separator"` | Announced as a structural boundary + orientation |

Use `decorative: false` when the separator meaningfully divides distinct
content regions (e.g. between a nav and main content area). Use the
default `decorative: true` for purely visual spacing.

## Horizontal separator (default)

The standard use case — divides stacked content sections:

    <.separator />

    <%!-- With vertical breathing room --%>
    <.separator class="my-4" />

## Vertical separator

Must be inside a flex container with a defined height to be visible:

    <div class="flex h-8 items-center gap-4">
      <span>Cut</span>
      <.separator orientation="vertical" />
      <span>Copy</span>
      <.separator orientation="vertical" />
      <span>Paste</span>
    </div>

## In a card header

    <.card>
      <.card_header>
        <.card_title>Account Settings</.card_title>
      </.card_header>
      <.separator />
      <.card_content>
        ...
      </.card_content>
    </.card>

## Structural separator (accessible)

When the separator represents a meaningful boundary between landmark
regions, disable decorative mode so screen readers announce it:

    <.separator decorative={false} />

## In a command/shortcut list

    <.separator class="my-1" />

# `separator`

Renders a visual or structural separator line.

The separator is a single-pixel `<div>` coloured with the `bg-border`
semantic token. On horizontal orientation it spans full width (`w-full`).
On vertical orientation it spans full height (`h-full`), requiring the
parent to have a fixed or flex-constrained height.

## Attributes

* `orientation` (`:string`) - Direction of the separator: `"horizontal"` (default, full width, 1px tall) or `"vertical"` (full height, 1px wide). Vertical separators must be inside a flex container with a defined height. Defaults to `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `decorative` (`:boolean`) - Controls ARIA visibility.
  - `true` (default): purely visual (`role="none"`, hidden from screen readers).
  - `false`: structural boundary (`role="separator"` with `aria-orientation`).

  Defaults to `true`.
* `class` (`:string`) - Additional CSS classes. Use `my-N` for horizontal spacing, or pass custom width/height overrides. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*