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

# `lr-skeleton`

- **Import** `import '@aceshooting/lyra-ui/components/lr-skeleton.js';` (stable tag alias; registers the tag)
- **Class** `LyraSkeleton`, also available unregistered from `@aceshooting/lyra-ui/components/overlays/skeleton/skeleton.class.js`
- **Family** `components/overlays/` — 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** 2 parts, 9 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-skeleton`

Loading placeholder mirroring the Web Awesome/Shoelace skeleton surface under the `lr-` prefix,
with `text`/`circle`/`rect` geometry and opt-in `pulse`/`sheen` effects.

**Properties:**

- `shape: 'text'|'circle'|'rect' = 'text'` (reflected) — the canonical geometry vocabulary;
  exported as `LyraSkeletonShape`. The former `variant` property/attribute and `SkeletonVariant`
  type are removed in v9; use `shape` and `LyraSkeletonShape`.
- `effect: 'pulse'|'sheen'|'none' = 'none'` (not reflected; the live value is exposed as
  `data-effect` on `[part="base"]`) — animation is opt-in. **Changed in
  8.0.0:** the Lyra default was `pulse`; set `effect="pulse"` to preserve that motion explicitly.
- `width?: string`
- `height?: string`
- `label?: string` — accessible name used when `announce` is set (rendered as visually-hidden text
  inside `[part="base"]`). Only absence uses the localized loading default; every explicit caller
  value—including `label="Loading…"` and `label=""`—is preserved literally. Prefer a description
  of what's actually loading, e.g. `label="Loading chart"`.
- `announce: boolean = false` (reflected) — opt one meaningful placeholder into `role="status"`
  and localized hidden text. The false default preserves the decorative bare Web Awesome/Shoelace
  skeleton contract and prevents repeated placeholders from producing duplicate announcements.
  An author-supplied host role remains authoritative; the component adds and removes the status
  role only when it owns that opt-in role.

**Events:** none.

**Slots:** none.

**CSS parts:** `base` and `indicator` are aliases on the same placeholder/animation surface.

**Themeable custom properties:** `--lr-skeleton-w`, `--lr-skeleton-h` (set/cleared by the
`width`/`height` properties; defaults `100%` / `var(--lr-size-1em)`),
`--lr-skeleton-color` (default `var(--lr-color-border)`), `--lr-skeleton-sheen-color` (default
`var(--lr-color-surface)`), `--lr-skeleton-border-radius` (default `var(--lr-radius)` for text and
rectangle shapes); upstream `--color`, `--sheen-color`, and `--border-radius` feed those same
values. The shared `--lr-transition-ambient` (default `1.8s ease-in-out`) controls the pulse/sheen
timing.

**Optional peer deps:** none.

```html
<lr-skeleton
  shape="circle"
  effect="pulse"
  width="3rem"
  height="3rem"
></lr-skeleton>
<lr-skeleton
  announce
  shape="text"
  effect="sheen"
  label="Loading name"
></lr-skeleton>
```

**Known gotchas:**

- Bare skeletons are decorative. In a repeated layout, set `announce` only on one meaningful
  placeholder or provide one parent status; leave every other child unannounced.
- no `lines`/`count` shorthand for "N lines of skeleton text" — stamp out N elements
  yourself.
- Respects `prefers-reduced-motion` (both effects) — safe to leave as-is for that concern.

---