# `lr-visually-hidden` - **Import** `import '@aceshooting/lyra-ui/components/lr-visually-hidden.js';` (stable tag alias; registers the tag) - **Class** `LyraVisuallyHidden`, also available unregistered from `@aceshooting/lyra-ui/components/utility/visually-hidden/visually-hidden.class.js` - **Family** `components/utility/` — see `llms/index.md` for its siblings - **Status** `stable` since `8.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** nothing component-specific — inherits only the shared surface - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-visually-hidden` Hides its slotted content from sight while leaving it in the accessibility tree, so a screen reader still announces it. Uses the clip-rect technique (`position: absolute` in a 1px box with `clip-path: inset(50%)`), never `display: none` or `visibility: hidden` — either of those would remove the content from the accessibility tree along with the viewport, which is the whole failure mode this element exists to avoid. `:host(:focus-within)` restores the element to normal flow, so anything focusable inside becomes visible the moment a keyboard user reaches it. That is what makes it usable for a skip link. **Properties:** none. **Events:** none. **Slots:** default (the content to hide). **CSS parts:** none — the host itself is the box. **Themeable custom properties:** none. ```html Skip to main content ``` Every declaration is `!important`, deliberately: the element's contract is that the content is hidden, and a consumer stylesheet that accidentally set `position: static` on it would silently expose the text. Use the `:focus-within` escape hatch rather than overriding the base rules. ---