# `lr-card` - **Import** `import '@aceshooting/lyra-ui/components/lr-card.js';` (stable tag alias; registers the tag) - **Class** `LyraCard`, also available unregistered from `@aceshooting/lyra-ui/components/layout/card/card.class.js` - **Family** `components/layout/` — 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** 8 parts, 14 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-card` A generic, styled bordered content container — the "small bordered surface with padding" idiom common to hero highlights, clickable grid tiles, and management-list items. A direct `` counterpart to ``'s contract, staying slot-compatible with `lr-result-card` where they overlap. **Properties:** - `appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined'` (reflected) — `'outlined'` (the default) is a plain bordered surface; `'filled'` swaps the border for a quiet brand-tinted background; `'filled-outlined'` keeps the border and adds that same tinted background; `'accent'` drops the border for a single colored accent stripe on the leading edge; `'plain'` has no border or background at all. - `orientation: LyraOrientation = 'vertical'` (reflected; the shared `'horizontal' | 'vertical'` layout axis) — vertical renders media, header/actions, body, and footer/footer-actions as sections. Horizontal arranges media/image, body, and `actions` in logical order and stacks them when the card's own container drops below 30rem. - `withHeader`, `withHeaderActions`, `withMedia`, `withFooter`, and `withFooterActions` (boolean, reflected as `with-header`, `with-header-actions`, `with-media`, `with-footer`, and `with-footer-actions`) — SSR presence hints. They expose an otherwise-empty section wrapper before slot assignment can be measured; populated slots are still detected automatically after hydration. - `actionable: boolean = false` (reflected) — opt-in no-link whole-card action behavior: the hover/focus-visible treatment (border-color shift, `cursor: pointer`) plus, when `href` is **not** also set, real activation semantics. Those come from a real native ` ``` **Known gotchas:** - every `appearance` renders on the _same_ `[part="base"]` element — there's no separate element per variant, so a `::part(base)` override applies uniformly regardless of `appearance`. - **a card clips, it does not scroll — and it never picks a scroll owner for you.** `[part='base']` stretches to the host's allocated block-size and clips its overflow, which is what keeps a full-bleed `media`/`image` child inside the rounded border. In an auto-sized row the card simply grows and nothing is clipped; give it a _definite_ allocation (a fixed grid row, an explicit `block-size`) and body content taller than that allocation is clipped silently, with no scrollbar. Neither upstream card exposes an overflow, block-size, or scroll hook and neither does this one: the public `body` part already carries the whole decision, and a `::part()` rule from your tree wins over the shadow stylesheet regardless of specificity. A fixed-height tile that must hold more content says so itself: ```css .tile-grid { display: grid; grid-template-rows: 12rem; } .tile-grid lr-card::part(body) { overflow: auto; overscroll-behavior: contain; } ``` `overflow` other than `visible` also zeroes the body's automatic minimum size, so that one declaration is enough — the body shrinks into the tile and scrolls, and `max-block-size` / `scrollbar-gutter` stay available on the same rule. The linked (`href`) card behaves identically. - slot-presence (`header`/`media`/`image`/`footer`/`actions`/`header-actions`/`footer-actions`) is tracked in JS, not via CSS `:empty` (a `[part]` wrapper always contains a literal `` child, so `:empty` never matches) — the same pattern `lr-empty`/`lr-widget` use. - The `with-*` hints force section presence; do not set one for a section that should stay absent. They are safe to leave in server-rendered markup once hydrated, because actual slot detection is combined with—not substituted for—the hints. - Horizontal orientation intentionally omits the vertical header/footer presentation and uses the `actions` slot beside the body. Its 30rem breakpoint is a container query on the card allocation, not a viewport media query, so the same card can be horizontal in a wide region and stacked in a narrow sidebar on one page. - **`[part='base']` itself deliberately carries no `role="button"` and is not focusable.** A card is a _container_ — it routinely holds slotted buttons and links — and `role="button"` around focusable descendants is the `nested-interactive` accessibility violation this library's own a11y gate enforces. (`lr-chip`'s `toggleable` mode _can_ carry `role="button"` because it forbids focusable children outright.) The whole-card action is therefore a _sibling_ of the slotted content — `[part='activation-button']` — so the actionable roles are never nested inside one another, and the card still announces as a real button rather than as an unnamed focusable region. - because the base element carries no `role="button"` to disambiguate, "did the user aim at the card or at a control inside it?" is answered at event time: the composed path from the original target up to `[part='base']` is walked, and `lr-card-activate` is suppressed if anything along the way is itself a control (a link, `button`, `input`, `select`, `textarea`, `label`, `summary`, `contenteditable`, anything carrying a `tabindex` other than `-1`, or an ARIA widget role such as `button`/`link`/`checkbox`/`switch`/`radio`/`menuitem`/`option`/`tab`/`textbox`/`slider`/ `spinbutton`). Using the _composed_ path is what makes this work through a slotted component's own shadow root — a click on `` retargets to the host, but its composed path still contains the internal native `