import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import type{LyraAppearance}from'../../../internal/variants.js';export interface LyraCardEventMap{'lr-card-activate':CustomEvent;} /** * `` — 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. * * The header is allocation-responsive: long or translated header content can shrink and wrap, * and the actions group moves onto another line when both no longer fit side by side. * * **Overflow is clipped, deliberately, and the card never picks a scroll owner for you.** * `[part='base']` stretches to the host's allocated block-size and clips its overflow — that clip * is what keeps a full-bleed `media`/`image` child inside the rounded border. So a card given a * *definite* allocation (a fixed grid row, an explicit `block-size`) clips body content taller * than that allocation rather than growing or scrolling; in an auto-sized row it simply grows and * nothing is clipped. Neither upstream card exposes an overflow, block-size, or scroll hook, and * this one deliberately adds none either: the public `body` part already carries the whole * decision, and a `::part()` rule from the consumer's tree wins over the shadow stylesheet * regardless of specificity. A fixed-height tile whose body must hold more content therefore says * so itself — `lr-card::part(body) { overflow: auto; }` — which also leaves `max-block-size`, * `scrollbar-gutter`, and `overscroll-behavior` in the consumer's hands. * * @customElement lr-card * @slot - The card body. * @slot header - Header row content, rendered above the body. * @slot media - Media content, rendered above the header or at logical start when horizontal. * @slot image - Shoelace-compatible alias for `media`. * @slot footer - Footer content, rendered below the body. * @slot actions - Horizontal-card actions; retained as the legacy header-actions alias vertically. * @slot header-actions - Controls rendered alongside the vertical header. * @slot footer-actions - Controls rendered alongside the vertical footer. * @csspart base - The outer container (a `
`, or a stretched `` behind the consumer slots * when `href` is set). * @csspart activation-button - The native whole-card action, rendered while `actionable` * without `href`. It is a sibling of slotted controls, so actionable descendants are never * nested inside another actionable role. * @csspart media - Wrapper around the `media` and `image` slots. Hidden entirely when empty. * @csspart image - Shoelace-compatible alias on the same wrapper as `media`. * @csspart header - Wrapper around the `header` slot and `actions`. Hidden entirely when both are empty. * @csspart actions - Wrapper around the `actions` and `header-actions` slots. Hidden entirely * when both are empty. * @csspart body - Wrapper around the default slot. * @csspart footer - Wrapper around the `footer` and `footer-actions` slots. Hidden entirely when * both are empty. * @attr aria-pressed - Toggle state forwarded reactively onto the native `activation-button`: * `true`, `false` or `mixed`. Anything else is ignored rather than passed through, so a typo * never reaches the accessibility tree. A LINKED card does not receive it -- `link` has no * pressed state, and asserting one there is an ARIA conformance failure, not a nicety. * @attr aria-current - Current-item state forwarded reactively onto whichever control the card * renders, the activation button OR the stretched link (`aria-current` is global, and a * current-page link is its commonest use): `page`, `step`, `location`, `date`, `time`, `true` * or `false`. * @event lr-card-activate - The whole card was activated (click, or Enter/Space on the native * `activation-button`). No detail. Only fired while `actionable` is set **without** `href` * -- with `href` the stretched native `` is the activation. Never fired for an interaction that * originated in a slotted control (a button, link, input, or anything else focusable), so a card * can keep its own action buttons. * @cssprop [--spacing=var(--lr-space-m)] - Space around and between card sections. * @cssprop [--padding=var(--spacing,var(--lr-space-m))] - Shoelace-compatible section padding. * @cssprop [--border-color=var(--lr-color-border)] - Shoelace-compatible border color. * @cssprop [--border-radius=var(--lr-radius)] - Shoelace-compatible corner radius. * @cssprop [--border-width=var(--lr-border-width-thin)] - Shoelace-compatible border width. * @cssprop [--lr-card-outlined-bg=var(--lr-color-surface)] - Background of the DEFAULT * (`outlined`) appearance, and of `accent`, which adds a stripe without restating a surface. * The filled tiers below already had their own hook; this one closes the gap for the tier most * cards actually render, so retinting one themed card no longer needs a `::part(base)` rule or * an app-wide `--lr-color-surface` change. Mirrors ``'s `--lr-details-outlined-bg`. * @cssprop [--lr-card-filled-bg=var(--lr-color-brand-quiet)] - Filled appearance background. * @cssprop [--lr-card-filled-outlined-bg=var(--lr-color-brand-quiet)] - Filled-outlined background. * @cssprop [--lr-card-accent-border-color=var(--lr-color-brand)] - Accent stripe color. * @cssprop [--lr-card-interactive-hover-border-color=var(--lr-color-brand)] - Interactive hover border. * @cssprop [--lr-card-interactive-active-border-color=var(--lr-color-brand)] - Interactive pressed border. * @cssprop --lr-card-interactive-active-overlay - Interactive pressed overlay; defaults to the * former transparent active mix. * @cssprop --lr-card-shadow - Box shadow of the card surface. **Undeclared by default**, so * `box-shadow` falls back to `none` -- byte-identical to before this property existed. Set it * (e.g. a raised card in a flat layout) without a `::part(base)` rule. * @cssprop [--lr-card-interactive-hover-shadow=var(--lr-card-shadow, none)] - Box shadow of an * `actionable`/linked card's base while hovered. Falls back to `--lr-card-shadow` itself, so a * card given only a resting shadow keeps that exact shadow on hover; set this independently to * lift an actionable card a further step on hover. * @status stable * @since 4.0.0 */ export declare class LyraCard extends LyraElement{static styles:import("lit").CSSResultGroup[]; /** Visual treatment, mirroring `wa-card`'s `appearance` vocabulary. `'outlined'` (the default) * is a bordered surface -- the common "small bordered surface with padding" idiom. */ appearance:LyraAppearance; /** Section flow, using the shared `LyraOrientation` vocabulary. Horizontal cards arrange * media, body, and `actions` side by side. */ orientation:LyraOrientation; /** SSR presence hints. Hydrated cards also detect populated slots automatically. */ withHeader:boolean;withHeaderActions:boolean;withMedia:boolean;withFooter:boolean;withFooterActions:boolean; /** 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 -- * `[part='activation-button']` becomes the focusable native button, responds to Enter/Space, * and emits `lr-card-activate`. With `href` set the stretched native `` owns navigation and * `lr-card-activate` is never fired. `false` (the default) reproduces today's exact static * output: no button, no listeners, no events. */ actionable:boolean; /** Turns the card's OWN activation off: the native `activation-button` renders `disabled`, a * linked card's stretched `` loses its `href` (so it genuinely cannot navigate rather than * merely claiming `aria-disabled` on a live link, matching ``/``) * and leaves the tab order, `lr-card-activate` stops firing from every path including * `click()`, and the card paints at `--lr-opacity-disabled` with a `not-allowed` cursor. * * Scoped to the card's own action: a passive card (no `actionable`, no `href`) has nothing to * turn off, so `disabled` leaves it byte-identical rather than dimming inert content into a * claim the card cannot back with behavior. Slotted controls stay the consumer's own to * disable -- a card is a container, and silently disabling somebody else's buttons is not a * state this component can honestly own. * * Like ``, a card is deliberately NOT form-associated (it is a layout * container, not a form control, and enrolling every card in `form.elements` would be a far * larger change than the state it buys), so an ancestor `
` does not cascade * here -- disable each card explicitly. */ disabled:boolean; /** Accessible name forwarded to the native activation owner. The `aria-label` attribute/property * applies by presence to the interactive button or linked anchor, including an explicitly empty * value. */ accessibleLabel:string|null;private triggerPressed;private triggerCurrent; /** When set, a real stretched `` renders behind the card's consumer slots for a * whole-card link (e.g. a wide CTA tile). Slotted controls remain independent actions; clicks * in noninteractive card content still follow the link. Unset (the default) renders a plain * `
`. */ href?:string; /** Native anchor target, used only while `href` resolves to a link. Any target forces the * `noopener noreferrer` security floor while preserving safe author `rel` tokens. */ target?:string; /** Author-settable relationship tokens. `opener` is always stripped; whenever `target` is set, * the rendered link force-adds `noopener noreferrer` without discarding other tokens. */ rel?:string;private get resolvedRel();private hasHeaderSlot;private hasMediaSlot;private hasImageSlot;private hasFooterSlot;private hasActionsSlot;private hasHeaderActionsSlot;private hasFooterActionsSlot;private accessibleContentText;private contentObserver?;private contentObserverDocument?;private contentObserverGeneration;private semanticFocusOrigin?;private semanticOwner;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private onHeaderSlotChange;private onMediaSlotChange;private onImageSlotChange;private onFooterSlotChange;private onActionsSlotChange;private onHeaderActionsSlotChange;private onFooterActionsSlotChange; /** * A card is a *container*, so it cannot forbid focusable children the way ``'s * `toggleable` mode does -- which is exactly why `[part='base']` deliberately carries no * `role="button"` (axe-core's `nested-interactive` rule, which this library's own a11y gate * enforces, forbids a focusable descendant of a `role="button"` ancestor). The trade-off is that * "did the user aim at the card, or at a control inside it?" has to be answered at event time * instead: walk `composedPath()` from the original target up to the current card interaction * region and bail out if anything along the way is itself a control. `composedPath()` (rather * than `e.target`) 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 `