<!-- GENERATED by scripts/build-llms.mjs from llms/utility.md — do not edit this file. -->

# `lr-divider`

- **Import** `import '@aceshooting/lyra-ui/components/lr-divider.js';` (stable tag alias; registers the tag)
- **Class** `LyraDivider`, also available unregistered from `@aceshooting/lyra-ui/components/utility/divider/divider.class.js`
- **Family** `components/utility/` — see `llms/index.md` for its siblings
- **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
- **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
- **Deprecations** none
- **Optional peers** none
- **Themeable via** 1 part, 3 custom properties — see this component's own `@csspart`/`@cssprop` list below
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`

---

## `lr-divider`

A semantic separator: renders `<hr part="base" role="separator" aria-orientation="…">`. A host
`aria-label` is forwarded to that inner semantic owner.

**Properties:** `orientation: 'horizontal' | 'vertical' = 'horizontal'` (reflected) and
`vertical: boolean = false` (reflected Shoelace-compatible shorthand).

**Events:** none. **Slots:** none. **CSS parts:** `base`.

**Themeable custom properties:** `--color` (falls back to `--lr-color-border`), `--width` (falls
back to `--lr-border-width-thin`), and `--spacing` (default `0`, applied on the cross axis).

The host is `display: block` when horizontal and `display: inline-block; block-size: 100%` when
vertical, so a vertical divider fills its flex/grid row's height with no extra CSS — but it needs a
parent that actually has a resolved height.

---