import { FASTElement } from "@microsoft/fast-element"; import { CardFocusMode, CardAppearance, CardOrientation } from "./card.options.js"; /** * Card * @summary A versatile surface that can display rich content, optional header/footer regions, and interactive behaviors. * * @example * ```html * *
Card main content
* * ``` * * @attr {CardFocusMode} focus-mode - Controls keyboard focus behavior inside the card (including focus trapping and Tab/Escape behavior). * @attr {CardAppearance | undefined} appearance - Sets the visual style of the card (for example `filled` or `outline`). * @attr {CardOrientation | undefined} orientation - Sets the card layout direction (horizontal or vertical). * @attr {string} role - Sets the ARIA role; automatically switches to `button` when `interactive` is true. * @attr {string | undefined} value - Optional value associated with the card; emitted with click events. * @attr {string | undefined} href - Optional link value that is surfaced in the emitted click event. * @attr {boolean} disabled - Disables interactive behaviors and keyboard handling when set. * @attr {boolean} interactive - Enables interactive behaviors (for example Enter triggers click) and updates the role. * @attr {string | undefined} aria-describedby - Sets `aria-describedby` on the internal root for assistive descriptions. * @attr {string | undefined} aria-labelledby - Sets `aria-labelledby` on the internal root for assistive labeling. * * @prop {CardFocusMode} focusMode - Reflects the `focus-mode` attribute and governs keyboard focus handling. * @prop {CardAppearance | undefined} appearance - Reflects the chosen visual style of the card. * @prop {CardOrientation | undefined} orientation - Reflects whether content is arranged horizontally or vertically. * @prop {string} role - Current ARIA role applied to the card surface. * @prop {string | undefined} value - Value included in emitted click events for identification. * @prop {string | undefined} href - Link value included in emitted click events. * @prop {boolean} disabled - Indicates whether the card is inert to pointer and keyboard interaction. * @prop {boolean} interactive - Toggles interactive keyboard/mouse behaviors and role switching. * @prop {string | undefined} ariaDescribedby - Programmatic backing property for `aria-describedby`. * @prop {string | undefined} ariaLabelledby - Programmatic backing property for `aria-labelledby`. * @prop {HTMLElement} card - Reference to the primary card element within the template. * @prop {HTMLElement} root - Reference to the root container wrapping the card content. * * @slot default - Default slot for the card's content. * * @csspart card - Styles the main card surface element. * @csspart root - Styles the outermost root container element. * @csspart header - Styles the header region of the card. * @csspart content - Styles the content container region of the card. * * @cssprop --card-width - Controls the card width (any valid CSS length). * @cssprop --card-height - Controls the card height (defaults to fit-content). * @cssprop --card-elevation - Controls the card elevation level for visual stacking. * @cssprop --card-padding - Controls the padding applied to the card content. * * @method focusFirstElement - Moves focus to the first tabbable element (or the card if none exist). * @method focusLastElement - Moves focus to the last tabbable element within the card. * @method clickHandler - Handles pointer clicks and emits the card click event when eligible. * @method keydownHandler - Handles keyboard interaction including Enter activation and focus management. * * @fires click - Fired when an interactive, enabled card is activated; detail includes `interactive`, `value`, and `href`. * @fires interactive-changed - Fired when the `interactive` state changes; detail includes the new value. * * @extends FASTElement * @tagname fabric-card * @public */ export declare class Card extends FASTElement { /** * Called when the element is added to the document. * @public */ connectedCallback(): void; /** * Called when the element is removed from the document. * @public */ disconnectedCallback(): void; /** * Focus behavior within the card, set via `focus-mode` attribute. * @public * @attr focus-mode */ focusMode: CardFocusMode; /** * Visual style of the card. * @public * @attr */ appearance?: CardAppearance; /** * The role of the card. * @public * @attr */ role: string; /** * The value of the card. * @public * @attr */ value?: string; /** * The href of the card. * @public * @attr */ href?: string; /** * Layout direction of the card. * @public * @attr */ orientation?: CardOrientation; /** * Indicates if the card is disabled. * @public * @attr disabled */ disabled: boolean; /** * Determines whether the card is interactive. * @public * @observable * @attr interactive */ interactive: boolean; /** * Provides descriptive text for assistive technologies via `aria-describedby`. * @public * @attr aria-describedby */ ariaDescribedby?: string; /** * Provides a label for assistive technologies via `aria-labelledby`. * @public * @attr aria-labelledby */ ariaLabelledby?: string; /** * The main card element. * @public */ card: HTMLElement; /** * The root element of the card. * @public */ root: HTMLElement; /** * Reacts to focus mode changes. */ focusModeChanged(): void; /** * Reacts to disabled changes. */ disabledChanged(): void; /** * Focuses the element at the specified index. * @private * @param index - The index of the element to focus. */ private focusElementAtIndex; /** * Focuses the first element in the card. * @public */ focusFirstElement: () => void; /** * Focuses the last element in the card. * @public */ focusLastElement: () => void; /** * Handles click events on the card. * @public * @param e - The mouse event. * @returns {boolean | void} Returns true if the event was handled. */ clickHandler(e: MouseEvent): boolean | void; /** * Handles keydown events on the card. * @public * @param e - The keyboard event. * @returns {boolean | void | null} Returns true if the event was handled. */ keydownHandler(e: KeyboardEvent): boolean | void | null; /** * Determines if the card is focusable. * @public * @returns {boolean} True if the card is focusable. */ get isFocusable(): boolean; /** * Gets the tabbable bounds within the card. * @public * @returns {(HTMLElement | SVGElement)[]} The tabbable elements. */ get bounds(): (HTMLElement | SVGElement)[]; /** * Checks if the first element in the bounds is focused. * @public * @returns {boolean | void} True if the first element is focused. */ get isBoundsZeroIndexFocused(): boolean | void; /** * Checks if the last element in the bounds is focused. * @public * @returns {boolean | void} True if the last element is focused. */ get isBoundsLastIndexFocused(): boolean | void; /** * Determines if focus should be trapped within the card. * @public * @returns {boolean} True if focus should be trapped. */ get shouldTrapFocus(): boolean; private emitClickEvent; private emitInteractiveChangedEvent; /** * Emits an event when the interactive state changes. * @protected */ protected interactiveChanged: () => void; /** * Sets the component state based on focus mode and disabled state. * @private */ private updateInertState; private requestInertUpdate; /** * Gets the tabbable elements within the given context. * @private * @param context - The context in which to find tabbable elements. * @returns {(HTMLElement | SVGElement)[]} The tabbable elements. */ private getTabQueueBounds; /** * Reduces elements to only tabbable ones. * @private * @param elements - The elements to filter. * @param element - The element to check. * @returns {HTMLElement[]} The tabbable elements. */ private static reduceTabbableItems; /** * Checks if a FASTElement is focusable. * @private * @param element - The FASTElement to check. * @returns {boolean} True if the element is focusable. */ private static isFocusableFastElement; /** * Checks if a FASTElement has tabbable shadow elements. * @private * @param element - The FASTElement to check. * @returns {boolean} True if the shadow contains tabbable elements. */ private static hasTabbableShadow; } //# sourceMappingURL=card.d.ts.map