import { PropertyValues } from 'lit'; import { SpectrumElement } from '../../element/index.js'; import { SlotTextController } from '../../controllers/slot-text-controller/index.js'; import { CardDensity, CardVariant } from './Card.types.js'; declare const CardBase_base: typeof SpectrumElement & { new (...args: any[]): import('../../mixins/index.js').SizedElementInterface; prototype: import('../../mixins/index.js').SizedElementInterface; } & import('../../mixins/index.js').SizedElementConstructor; /** * Abstract base class for all card-family components. Owns the semantics * shared across every card type: sizing, visual variant, and density. * * @attribute {ElementSize} size - The size of the card. * * @fires swc-card-click - Dispatched when a `selectable` card is activated (click, Enter, or Space). * * @slot preview - Primary preview content * @slot title - Card title * @slot actions - Optional action controls * @slot description - Supporting description text * @slot footer - Optional footer content * @slot - Additional body content * * @cssprop --swc-card-base-max-inline-size - Maximum inline size of the card. Defaults to 280px, overridden per size. * @cssprop --swc-card-base-border-radius - Corner radius of the card. Defaults to the extra-large corner-radius token, overridden per size. * @cssprop --swc-card-base-box-shadow - Box shadow (elevation) of the card. Defaults to the emphasized drop-shadow token; overridden by the tertiary variant, selectable focus, and title-as-link/selectable hover. * @cssprop --swc-card-base-background-color - Background color of the card. Defaults to the layer-2 background token; overridden by the secondary, tertiary, and quiet variants. * @cssprop --swc-card-base-preview-aspect-ratio - Aspect ratio of the preview slot. Defaults to 3/2. * @cssprop --swc-card-base-title-font-size - Font size of the title slot. Defaults to the medium font-size token, overridden per size. * @cssprop --swc-card-base-title-line-height - Line height of the title slot. Defaults to the medium line-height token, overridden per size. * @cssprop --swc-card-base-description-font-size - Font size of the description slot and default slot content. Defaults to a smaller font-size token, overridden per size. * @cssprop --swc-card-base-action-component-height - Height used to vertically balance slotted actions content. Defaults to the smallest component-height token, overridden per size. * @cssprop --swc-card-base-content-header-gap - Column gap between the title and actions slots. Defaults to the medium base-gap token, overridden per size. * @cssprop --swc-card-base-content-padding - Padding of the content region. Defaults to the medium container-padding token; overridden by density. * @cssprop --swc-card-base-content-padding-regular - Content padding used at the default (regular) density, per size. * @cssprop --swc-card-base-content-padding-compact - Content padding used at compact density, per size. * @cssprop --swc-card-base-content-padding-spacious - Content padding used at spacious density, per size. */ export declare abstract class CardBase extends CardBase_base { /** * @internal */ static readonly VARIANTS: readonly CardVariant[]; /** * @internal */ static readonly DENSITIES: readonly CardDensity[]; /** * The visual variant of the card. * * @default primary */ variant: CardVariant; /** * The density of the card, controlling internal spacing and gaps. * * @default regular */ density: CardDensity; /** * Indicates the consumer has wrapped their `title` slot content in a real * link. Extends that link's hit area to cover the card surface while * leaving navigation entirely consumer-owned; Card accepts no `href`. */ titleAsLink: boolean; /** * Makes the card focusable and captures surface clicks (excluding nested * interactive targets) to dispatch a `swc-card-click` event, independent * of `titleAsLink`. * * @todo No ARIA role is set yet; deferred until a future `CardView` * selection model determines the appropriate role. */ selectable: boolean; /** * Keeps a slotted action control's `size` one step smaller than the * card's own `size`. */ private readonly _sizePropagation; /** * Observes whether the default slot has meaningful content. Each concrete * card's `render()` must bind `@slotchange=${this.slotText.handleSlotChange}` * on the default slot (via `renderCardTemplate`'s `onDefaultSlotChange`) for * changes after the first render to be tracked. * * @internal */ protected slotText: SlotTextController; /** * Whether the default slot has meaningful content. Consumed by each concrete * card's `render()` (through `renderCardTemplate`'s `hasDefaultSlotContent`) * to toggle the `--hasDefault` class. * * @internal */ protected get slotHasContent(): boolean; connectedCallback(): void; disconnectedCallback(): void; protected firstUpdated(changedProperties: PropertyValues): void; protected update(changedProperties: PropertyValues): void; protected updated(changedProperties: PropertyValues): void; /** * @internal * * The card's own `title` slot element. */ protected getTitleSlotElement(): HTMLSlotElement | null; /** * @internal * * The card's own `actions` slot element. */ protected getActionsSlotElement(): HTMLSlotElement | null; /** * Whether the `actions` slot is supported for this card's current state. * `xs` cards don't have room for it. Concrete classes may override this * to exclude the slot for other reasons, independent of size. */ protected get actionsSupported(): boolean; /** * @internal * * Warns in dev mode when the `actions` slot has content but isn't * supported for the current state. Visual suppression is handled in * CSS, not here. */ private checkActionsSupport; /** * @internal * * The `title` slot's link: either the assigned element itself * (``) or an anchor nested inside a wrapper * (``). Requires `href`. */ protected getTitleLinkElement(): HTMLAnchorElement | null; /** * @internal * * Whether `node` has its own interaction/focus semantics, via the * `tabIndex` IDL property rather than the `tabindex` attribute; this * also correctly excludes `tabindex="-1"` and disabled controls. */ private static isFocusable; /** * @internal * * The size one step below `size` in `CARD_VALID_SIZES`, clamped at the * smallest size. */ private static getSmallerSize; /** * Re-propagates the `actions` slot's `size` for elements assigned after * the initial render, wired to the slot's `slotchange` in * `firstUpdated()`. */ protected readonly handleActionsSlotChange: () => void; /** * Proxies a qualifying surface click to `titleAsLink`'s link and/or * dispatches `swc-card-click` for `selectable`, after filtering out * clicks that landed on a nested interactive target or followed a * text-selection drag. */ protected readonly handleSurfaceClick: (event: Event) => void; /** * Enter and Space both activate the card, even though a bare link * conventionally responds to Enter only; the card's own activation * contract takes precedence once `selectable` makes it the focused * target. */ protected readonly handleSelectableKeydown: (event: KeyboardEvent) => void; } export {};