import ShoelaceElement from '../../internal/shoelace-element.js'; import type { CSSResultGroup } from 'lit'; /** * @summary Cards can be used to group related subjects in a container. * @documentation https://shoelace.style/components/card * @status stable * @since 2.0 * @pattern stable * @figma ready * * @slot - The card's main content. * @slot header - An optional header for the card. * @slot footer - An optional footer for the card. * @slot image - An optional image to render at the start of the card. * * @csspart base - The component's base wrapper. * @csspart image - The container that wraps the card's image. * @csspart header - The container that wraps the card's header. * @csspart body - The container that wraps the card's main content. * @csspart footer - The container that wraps the card's footer. * * @cssproperty --border-color - The card's border color, including borders that occur inside the card. * @cssproperty --border-radius - The border radius for the card's edges. * @cssproperty --border-width - The width of the card's borders. * @cssproperty --padding - The padding to use for the card's sections. */ export default class SlCard extends ShoelaceElement { static styles: CSSResultGroup; private readonly hasSlotController; /** Option to remove the card's default box shadow. */ noShadow: boolean; /** Option to apply a flex/space-between layout for header elements. Useful for displaying a header with a title on the left and action buttons on the right. */ actionHeader: boolean; /** Option to apply a flex/flex-end layout to footer elements. Useful for displaying a card footer with one or more buttons. */ buttonFooter: boolean; /** Option to reduce spacing and remove the borders between the header, body, and footer. */ compact: boolean; /** Option to show the card in a loading state. */ loading: boolean; /** Option to style the card for an empty state. */ emptyState: boolean; render(): import("lit-html").TemplateResult<1>; }