import { LitElement, PropertyValues } from 'lit';
import '../Icon/Icon';
import '../Tag/Tag';
declare global {
interface HTMLElementTagNameMap {
'ctt-card': CttCard;
}
}
/**
* CTT Card Component
*
* A slot-based card component with optional selectable states and customizable content areas.
* Selection functionality is opt-in via the `selectable` attribute.
*
* @fires card-select - Dispatched when the card selection state changes (only when selectable)
* @fires card-before-select - Dispatched before selection change (cancelable, only when selectable)
*
* @slot description - Subtitle content in the header
* @slot content - Main body content
* @slot tag - Top-right tag component for status/category/price display (auto-sized based on card size)
* @slot actions - Footer action buttons
*
* @cssprop --ctt-card-* - CSS custom properties for theming
*
* @attr {string} size - Size variant: 'default' | 'small' (default: 'default'). Auto-sizes nested tags: small→s, default→m
* @attr {string} variant - Style variant: 'primary' | 'secondary' (default: 'primary')
* @attr {boolean} error - Whether the card is in error state with error styling (default: false)
* @attr {string} max-width - Optional maximum width (e.g., '400px', '20rem', '50%')
*
* @example
* ```html
*
*
* This card is for display only
*
*
*
*
* This card can be selected
*
*
*
*
* Premium
* Card with status tag in header
*
*
*
*
* New
* This is a compact card - tag automatically becomes size="s"
*
*
*
*
* New
* This card has a different background color and no border
*
*
*
*
*
* Fills container up to 400px max-width, then stops growing
*
*
*
* Fills full container width (300px) - no constraints
*
*
Short content = short card height
*
*
*
*
*
More content makes the card taller.
*
Height adapts to fit the content naturally.
*
*
*
*
* ```
*
* @example
* ```typescript
* // Enable selection functionality
* card.setSelectable(true);
*
* // Toggle selection programmatically
* card.toggleSelected();
*
* // Set selection state
* card.setSelected(true);
*
* // Get current selection state
* const isSelected = card.getSelected();
*
* // Listen for selection changes
* card.addEventListener('card-select', (e) => {
* console.log('Selection changed:', e.detail.selected);
* });
* ```
*/
export declare class CttCard extends LitElement {
static styles: import("lit").CSSResult[];
title: string;
selected: boolean;
disabled: boolean;
selectable: boolean;
error: boolean;
size: 'default' | 'small';
variant: 'primary' | 'secondary' | 'highlighted';
maxWidth: string;
ariaLabel: string;
iconName: string;
onClick?: (cardData: Record, e: Event) => void;
fullHeight: boolean;
constructor();
/**
* Toggles the selection state of the card
* @returns {boolean} The new selection state
* @fires card-before-select - Cancelable event before state change
* @fires card-select - Event after state change
*
* @example
* ```typescript
* const newState = card.toggleSelected();
* console.log('Card is now:', newState ? 'selected' : 'unselected');
* ```
*/
toggleSelected(): boolean;
/**
* Sets the selection state of the card
* @param {boolean} value - The desired selection state
* @returns {boolean} The actual selection state (may differ if event was cancelled)
* @fires card-before-select - Cancelable event before state change
* @fires card-select - Event after state change
*
* @example
* ```typescript
* // Select the card
* card.setSelected(true);
*
* // Unselect the card
* card.setSelected(false);
* ```
*/
setSelected(value: boolean): boolean;
/**
* Gets the current selection state of the card
* @returns {boolean} The current selection state
*
* @example
* ```typescript
* if (card.getSelected()) {
* console.log('Card is selected');
* }
* ```
*/
getSelected(): boolean;
/**
* Sets the disabled state of the card
* @param {boolean} value - Whether the card should be disabled
*
* @example
* ```typescript
* // Disable the card
* card.setDisabled(true);
*
* // Enable the card
* card.setDisabled(false);
* ```
*/
setDisabled(value: boolean): void;
/**
* Gets the current disabled state of the card
* @returns {boolean} Whether the card is disabled
*
* @example
* ```typescript
* if (card.getDisabled()) {
* console.log('Card is disabled');
* }
* ```
*/
getDisabled(): boolean;
/**
* Enables the card (shorthand for setDisabled(false))
*
* @example
* ```typescript
* card.enable();
* ```
*/
enable(): void;
/**
* Disables the card (shorthand for setDisabled(true))
*
* @example
* ```typescript
* card.disable();
* ```
*/
disable(): void;
/**
* Sets the selectable state of the card
* @param {boolean} value - Whether the card should be selectable
*
* @example
* ```typescript
* // Make card selectable
* card.setSelectable(true);
*
* // Make card non-selectable
* card.setSelectable(false);
* ```
*/
setSelectable(value: boolean): void;
/**
* Gets the current selectable state of the card
* @returns {boolean} Whether the card is selectable
*
* @example
* ```typescript
* if (card.getSelectable()) {
* console.log('Card can be selected');
* }
* ```
*/
getSelectable(): boolean;
/**
* Makes the card selectable (shorthand for setSelectable(true))
*
* @example
* ```typescript
* card.makeSelectable();
* ```
*/
makeSelectable(): void;
/**
* Makes the card non-selectable (shorthand for setSelectable(false))
*
* @example
* ```typescript
* card.makeNonSelectable();
* ```
*/
makeNonSelectable(): void;
private _handleInteraction;
private _onKeydown;
private hasTagSlot;
private hasDescriptionSlot;
private hasContentSlot;
private hasActionsSlot;
protected firstUpdated(): void;
protected updated(changedProperties: PropertyValues): void;
private _hasVisibleContent;
private _updateSlotVisibility;
private _onSlotChange;
/**
* Synchronizes the size of all ctt-tag components in the tag slot
* with the card's size property
* @private
*/
private _syncTagSizes;
render(): import("lit-html").TemplateResult<1>;
}