atomicuilibrary 0.0.1

package/dist/collection/components/card/card.js

@@ -0,0 +1,1697 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Card {
+    element;
+    // --- Identity ---
+    /** Unique identifier for the card */
+    cardId = '';
+    /** Card title string */
+    cardTitle = '';
+    // --- Styling & Variants ---
+    /** Card variant */
+    variant = 'default';
+    /** Card size */
+    size = 'default';
+    /** Card layout orientation */
+    layout = 'vertical';
+    /** Card color theme */
+    color = 'default';
+    /** Card display mode */
+    displayMode = 'default';
+    /** Card shape */
+    shape = 'default';
+    /** Enable glassmorphism effect (premium visual) */
+    glass = false;
+    /** Whether to show standard border */
+    bordered = true;
+    /** Custom border string (e.g., '2px solid red') */
+    border = '';
+    /** Custom border radius */
+    borderRadius = '8px';
+    /** Card importance level */
+    importance = 'standard';
+    /** Card pattern/style preset */
+    pattern = 'default';
+    /** Custom head section style */
+    headStyle = {};
+    /** Custom body section style */
+    bodyStyle = {};
+    /** Type variant: 'inner' | 'default' */
+    type = 'default';
+    // --- Dimensions ---
+    /** Width of the card */
+    width = '100%';
+    /** Height of the card */
+    height = 'auto';
+    /** Aspect ratio for cover image container */
+    aspectRatio = '16/9';
+    // --- Interactions ---
+    /** Enable hover elevation/shadow effect */
+    hoverable = false;
+    /** Enable flip animation */
+    flippable = false;
+    /** Flip trigger mechanism: 'click' | 'hover' */
+    flipTrigger = 'click';
+    /** Initially flipped or controlled flipped state */
+    flipped = false;
+    /** Enable card expansion/collapse */
+    collapsible = false;
+    /** Initially collapsed or controlled collapsed state */
+    collapsed = false;
+    /** Show close button in header */
+    closable = false;
+    /** Enable selection mode */
+    selectable = false;
+    /** Selection state */
+    selected = false;
+    /** Make entire card clickable (if flippable is false) */
+    clickable = false;
+    /** URL to navigate to when clicked */
+    href = '';
+    /** Link target (e.g., '_blank') */
+    target = '';
+    /** Enable 3D tilt effect */
+    tilt = false;
+    /** Enable magnetic attraction effect */
+    magnetic = false;
+    // --- Content Props ---
+    /** Cover image URL */
+    cover = '';
+    /** Alt text for cover image */
+    coverAlt = 'Card cover';
+    /** Content to show in the extra section of the header */
+    extra = '';
+    /** Avatar image URL */
+    avatar = '';
+    /** Avatar icon class (e.g. 'fas fa-user') */
+    avatarIcon = '';
+    /** Ribbon text to display on a corner */
+    ribbon = '';
+    /** Ribbon position */
+    ribbonPosition = 'top-right';
+    /** Ribbon custom color */
+    ribbonColor = '';
+    /** Description text (pattern: shortcut) */
+    description = '';
+    /** Tag text (pattern: product/shortcut) */
+    tag = '';
+    /** Primary button text in footer */
+    buttonText = '';
+    /** Quick actions (comma-separated list for bottom footer) */
+    actions = '';
+    // --- Menus ---
+    /** Show menu button (3 dots) */
+    showMenu = false;
+    /** Menu items (as JSON string array of CardMenuItem) */
+    menuItems = '[]';
+    /** Menu actions (comma-separated list, alternative to menuItems) */
+    menuActions = '';
+    /** Icon library for menu items */
+    iconLibrary = 'default';
+    /** Show loading skeleton */
+    loading = false;
+    /** Automatically scroll the card into view when it is expanded if it's partially off-screen */
+    autoScroll = false;
+    /** Scrolling behavior when autoScroll is enabled */
+    scrollBehavior = 'smooth';
+    isFlipped = false;
+    isMenuOpen = false;
+    isCollapsed = false;
+    parsedMenuItems = [];
+    magneticTransform = '';
+    tiltTransform = '';
+    cardFlip;
+    menuItemClick;
+    expandToggle;
+    cardToggle; // Matches set-ui bool output
+    cardClick;
+    cardSelect; // Matches set-ui bool output
+    cardClose;
+    /** Emitted when a menu action is clicked (alias for menuItemClick matching ui-card) */
+    menuActionClick;
+    menuRef;
+    handleMenuPropsChange() {
+        this.parseMenuItems();
+    }
+    handleFlippedChange(newValue) {
+        this.isFlipped = newValue;
+    }
+    handleCollapsedChange(newValue) {
+        this.isCollapsed = newValue;
+    }
+    componentWillLoad() {
+        this.parseMenuItems();
+        this.isFlipped = this.flipped;
+        this.isCollapsed = this.collapsed;
+    }
+    handleClickOutside(event) {
+        if (this.isMenuOpen && this.menuRef && !this.menuRef.contains(event.target)) {
+            this.isMenuOpen = false;
+        }
+    }
+    parseMenuItems() {
+        let items = [];
+        // 1. Try JSON menuItems first
+        if (this.menuItems && this.menuItems !== '[]') {
+            try {
+                items = JSON.parse(this.menuItems);
+            }
+            catch (error) {
+                console.error('Invalid JSON for menu items:', error);
+            }
+        }
+        // 2. Append comma-separated menuActions
+        if (this.menuActions) {
+            const actions = this.menuActions.split(',').map(a => a.trim());
+            actions.forEach(a => {
+                if (a) {
+                    items.push({ id: a.toLowerCase().replace(/\s+/g, '-'), label: a });
+                }
+            });
+        }
+        this.parsedMenuItems = items;
+    }
+    toggleFlip = (e) => {
+        if (e)
+            e.stopPropagation();
+        if (!this.flippable)
+            return;
+        this.isFlipped = !this.isFlipped;
+        this.flipped = this.isFlipped;
+        this.cardFlip.emit(this.isFlipped);
+    };
+    toggleCollapse = (event) => {
+        if (event)
+            event.stopPropagation();
+        if (!this.collapsible)
+            return;
+        this.isCollapsed = !this.isCollapsed;
+        this.collapsed = this.isCollapsed;
+        this.cardToggle.emit(!this.isCollapsed);
+        this.expandToggle.emit({ expanded: !this.isCollapsed });
+        // Auto-scroll logic
+        if (this.autoScroll && !this.isCollapsed) {
+            setTimeout(() => {
+                this.element.scrollIntoView({ behavior: this.scrollBehavior, block: 'nearest' });
+            }, 300); // Wait for transition
+        }
+    };
+    /** Programmatically scroll this card into view */
+    async scrollToCard() {
+        this.element.scrollIntoView({ behavior: this.scrollBehavior, block: 'nearest' });
+    }
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        this.isMenuOpen = !this.isMenuOpen;
+    };
+    handleMenuItemClick = (itemId, event) => {
+        event.stopPropagation();
+        const menuItem = this.parsedMenuItems.find(item => item.id === itemId);
+        if (menuItem?.disabled)
+            return;
+        this.menuItemClick.emit({
+            itemId,
+            cardId: this.cardId
+        });
+        this.menuActionClick.emit(itemId);
+        this.isMenuOpen = false;
+    };
+    handleCardClick = (e) => {
+        const target = e.target;
+        const isInteractive = target.closest('button') || target.closest('.menu-dropdown') || target.closest('.card-actions') || target.closest('.card-action-btn');
+        if (isInteractive)
+            return;
+        if (this.flippable && this.flipTrigger === 'click') {
+            this.toggleFlip(e);
+            return;
+        }
+        if (this.selectable) {
+            this.selected = !this.selected;
+            this.cardSelect.emit(this.selected);
+            return;
+        }
+        if (this.href) {
+            if (this.target === '_blank') {
+                window.open(this.href, '_blank');
+            }
+            else {
+                window.location.href = this.href;
+            }
+            return;
+        }
+        if (this.clickable) {
+            this.cardClick.emit();
+        }
+    };
+    handleMouseEnter = (ev) => {
+        if (this.flippable && this.flipTrigger === 'hover') {
+            this.isFlipped = true;
+            this.flipped = true;
+            this.cardFlip.emit(true);
+        }
+        this.handleMouseMove(ev);
+    };
+    handleMouseLeave = () => {
+        if (this.flippable && this.flipTrigger === 'hover') {
+            this.isFlipped = false;
+            this.flipped = false;
+            this.cardFlip.emit(false);
+        }
+        this.tiltTransform = '';
+        this.magneticTransform = '';
+    };
+    handleMouseMove = (ev) => {
+        if ((!this.magnetic && !this.tilt) || this.loading)
+            return;
+        const rect = this.element.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const x = ev.clientX - centerX;
+        const y = ev.clientY - centerY;
+        if (this.magnetic) {
+            const stretch = 20;
+            this.magneticTransform = `translate(${x / stretch}px, ${y / stretch}px)`;
+        }
+        if (this.tilt) {
+            const rotateX = (y / (rect.height / 2)) * -15;
+            const rotateY = (x / (rect.width / 2)) * 15;
+            this.tiltTransform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        }
+    };
+    handleClose = (e) => {
+        e.stopPropagation();
+        this.cardClose.emit();
+    };
+    renderMenu() {
+        const showMenuDropdown = this.showMenu || this.parsedMenuItems.length > 0;
+        if (!showMenuDropdown)
+            return null;
+        return (h("div", { class: "menu-container", ref: (el) => (this.menuRef = el) }, h("ui-button", { variant: "ghost", onClick: this.toggleMenu, ariaLabel: "Card menu", icon: "more-vertical", iconLibrary: "lucide", iconOnly: true, size: "sm" }), this.isMenuOpen && (h("div", { class: "menu-dropdown", role: "menu" }, this.parsedMenuItems.map(item => {
+            if (item.separator) {
+                return h("div", { class: "menu-separator", role: "separator" });
+            }
+            return (h("ui-button", { variant: "ghost",
+                // class={[
+                //   'menu-item',
+                //   item.disabled && 'menu-item-disabled'
+                // ].filter(Boolean).join(' ')}
+                onClick: (event) => this.handleMenuItemClick(item.id, event), disabled: item.disabled, label: item.label, icon: item.icon, iconLibrary: item.iconLibrary || this.iconLibrary, fullWidth: true, align: "start", size: "sm" }));
+        })))));
+    }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-wrapper" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-avatar" }), h("div", { class: "skeleton-title-group" }, h("div", { class: "skeleton-text skeleton-title" }), h("div", { class: "skeleton-text skeleton-subtitle" }))), h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-text full" }), h("div", { class: "skeleton-text full" }), h("div", { class: "skeleton-text half" }))));
+    }
+    renderSelectionIndicator() {
+        if (!this.selectable)
+            return null;
+        return (h("div", { class: `selection-indicator ${this.selected ? 'selected' : ''}` }, this.selected && (h("ui-icon", { name: "check", library: "lucide", size: "1.2em", class: "check-icon" }))));
+    }
+    renderHeader() {
+        const hasHeaderContent = this.cardTitle || this.extra || this.avatar || this.avatarIcon || this.closable || this.collapsible || this.showMenu || this.parsedMenuItems.length > 0;
+        if (!hasHeaderContent)
+            return null;
+        return (h("div", { class: "card-header", style: this.headStyle }, h("div", { class: "card-header-main" }, (this.avatar || this.avatarIcon) && (h("div", { class: "card-avatar" }, this.avatar ? (h("img", { src: this.avatar, alt: "avatar", class: "card-avatar-img" })) : (h("ui-icon", { name: this.avatarIcon, library: this.iconLibrary, size: "1.2em" })))), h("div", { class: "card-title-group" }, this.cardTitle && h("div", { class: "card-title-text" }, this.cardTitle), h("slot", { name: "header" }), h("slot", { name: "title" }))), h("div", { class: "card-actions" }, (this.extra) && h("div", { class: "card-extra", innerHTML: sanitizeHTML(this.extra) }), h("slot", { name: "extra" }), h("slot", { name: "actions" }), this.collapsible && (h("ui-button", { variant: "ghost", onClick: this.toggleCollapse, ariaLabel: this.isCollapsed ? 'Expand' : 'Collapse', icon: this.isCollapsed ? 'chevron-down' : 'chevron-up', iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.renderMenu(), this.closable && (h("ui-button", { variant: "ghost", onClick: this.handleClose, ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))));
+    }
+    renderCover() {
+        if (!this.cover && !this.element.querySelector('[slot="cover"]'))
+            return null;
+        return (h("div", { class: "card-cover", style: { aspectRatio: this.aspectRatio } }, this.cover && h("img", { src: this.cover, alt: this.coverAlt }), h("slot", { name: "cover" })));
+    }
+    renderFooter() {
+        const commaActions = this.actions ? this.actions.split(',').map(a => a.trim()) : [];
+        const hasFooterContent = this.buttonText || commaActions.length > 0 || this.element.querySelector('[slot="footer"]');
+        if (!hasFooterContent)
+            return null;
+        return (h("div", { class: "card-footer" }, this.buttonText && h("ui-button", { variant: "primary", label: this.buttonText }), commaActions.length > 0 && (h("ul", { class: "card-quick-actions" }, commaActions.map(action => (h("li", null, h("span", { innerHTML: sanitizeHTML(action) })))))), h("slot", { name: "footer" })));
+    }
+    renderFrontCard() {
+        const cardClasses = {
+            'card-face-content': true,
+            'card-collapsed': this.isCollapsed,
+            'card-hoverable': this.hoverable,
+            'card-selectable': this.selectable,
+            'card-selected': this.selected,
+            'card-clickable': !!((this.href || this.clickable) && !this.flippable),
+            'card-glass': this.glass,
+            [`card-layout-${this.layout}`]: true,
+            [`card-importance-${this.importance}`]: true,
+            [`card-pattern-${this.pattern}`]: true,
+            [`card-type-${this.type}`]: true,
+        };
+        const faceStyle = {
+            borderRadius: this.borderRadius,
+            border: this.selected ? '2px solid var(--ui-card-selected-border, #3bf673)' : (this.bordered ? (this.border || undefined) : 'none')
+        };
+        return (h("div", { class: cardClasses, style: faceStyle }, this.renderCover(), h("div", { class: "card-details-wrapper" }, this.renderHeader(), h("slot", { name: "tabs" }), !this.isCollapsed && [
+            h("div", { class: "card-content", style: this.bodyStyle }, h("slot", null), h("slot", { name: "content" }), this.description && h("div", { class: "card-description" }, this.description), this.tag && h("div", { class: "card-tag" }, this.tag)),
+            this.renderFooter(),
+            h("slot", { name: "grid" })
+        ])));
+    }
+    renderBackCard() {
+        if (!this.flippable)
+            return null;
+        const cardStyle = {
+            borderRadius: this.borderRadius,
+            border: this.bordered ? (this.border || undefined) : 'none'
+        };
+        return (h("div", { class: "card-face-content card-back", style: cardStyle }, h("div", { class: "card-back-header" }, h("ui-button", { variant: "ghost", onClick: this.toggleFlip, ariaLabel: "Flip card back", icon: "arrow-left", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "card-content" }, h("slot", { name: "back" }, h("div", { class: "card-back-default" }, h("h3", null, "Back Side"), h("p", null, "Add content to the \"back\" slot to customize this side."))), h("slot", { name: "back-content" }))));
+    }
+    render() {
+        const hostClass = [
+            'ui-card',
+            `variant-${typeof this.variant === 'string' ? this.variant : 'default'}`,
+            `size-${typeof this.size === 'string' ? this.size : 'md'}`,
+            this.isFlipped && 'is-flipped',
+            this.loading && 'is-loading',
+            this.flippable && 'is-flippable',
+        ].filter(Boolean).join(' ');
+        const containerStyle = {
+            width: typeof this.width === 'string' ? this.width : undefined,
+            height: typeof this.height === 'string' ? this.height : undefined,
+        };
+        return (h(Host, { key: 'ef88aac3904761439d1c4d689cd89c4c47569894', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: 'a9866c010965c9259e2d566ca909965f63e0dbbb', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: '24ef228a94d1e6ffc61bc7fef52c4f34ca88daf2' }, this.ribbon))), this.loading ? (h("div", { class: "card-loading-container", style: { borderRadius: this.borderRadius } }, this.renderSkeleton())) : (h("div", { class: "card-container", onClick: this.handleCardClick, onMouseMove: this.handleMouseMove, style: {
+                transform: `${this.magneticTransform} ${this.tiltTransform}`,
+                transition: (!this.magneticTransform && !this.tiltTransform) ? 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)' : 'none'
+            } }, this.flippable ? (h("div", { class: "card-flipper" }, h("div", { class: "card-face face-front" }, this.renderFrontCard(), this.renderSelectionIndicator()), h("div", { class: "card-face face-back" }, this.renderBackCard()))) : ([this.renderFrontCard(), this.renderSelectionIndicator()])))));
+    }
+    static get is() { return "ui-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cardId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-id",
+                "defaultValue": "''"
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card title string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card layout orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card color theme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'default'"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardDisplayMode",
+                    "resolved": "\"compact\" | \"default\" | \"expanded\" | \"stack\"",
+                    "references": {
+                        "CardDisplayMode": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::CardDisplayMode",
+                            "referenceLocation": "CardDisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card display mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-mode",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable glassmorphism effect (premium visual)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show standard border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom border string (e.g., '2px solid red')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border",
+                "defaultValue": "''"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom border radius"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius",
+                "defaultValue": "'8px'"
+            },
+            "importance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standard' | 'emphasized'",
+                    "resolved": "\"emphasized\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card importance level"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "importance",
+                "defaultValue": "'standard'"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'product' | 'shortcut'",
+                    "resolved": "\"default\" | \"product\" | \"shortcut\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card pattern/style preset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern",
+                "defaultValue": "'default'"
+            },
+            "headStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom head section style"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "bodyStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom body section style"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inner' | 'default'",
+                    "resolved": "\"default\" | \"inner\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type variant: 'inner' | 'default'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'auto'"
+            },
+            "aspectRatio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aspect ratio for cover image container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "'16/9'"
+            },
+            "hoverable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable hover elevation/shadow effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hoverable",
+                "defaultValue": "false"
+            },
+            "flippable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable flip animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flippable",
+                "defaultValue": "false"
+            },
+            "flipTrigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flip trigger mechanism: 'click' | 'hover'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flip-trigger",
+                "defaultValue": "'click'"
+            },
+            "flipped": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially flipped or controlled flipped state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flipped",
+                "defaultValue": "false"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable card expansion/collapse"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially collapsed or controlled collapsed state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close button in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable selection mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make entire card clickable (if flippable is false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to navigate to when clicked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target (e.g., '_blank')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "''"
+            },
+            "tilt": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 3D tilt effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tilt",
+                "defaultValue": "false"
+            },
+            "magnetic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable magnetic attraction effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic",
+                "defaultValue": "false"
+            },
+            "cover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cover image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover",
+                "defaultValue": "''"
+            },
+            "coverAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for cover image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover-alt",
+                "defaultValue": "'Card cover'"
+            },
+            "extra": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content to show in the extra section of the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra",
+                "defaultValue": "''"
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar",
+                "defaultValue": "''"
+            },
+            "avatarIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar icon class (e.g. 'fas fa-user')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-icon",
+                "defaultValue": "''"
+            },
+            "ribbon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ribbon text to display on a corner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon",
+                "defaultValue": "''"
+            },
+            "ribbonPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ribbon position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon-position",
+                "defaultValue": "'top-right'"
+            },
+            "ribbonColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ribbon custom color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon-color",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text (pattern: shortcut)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag text (pattern: product/shortcut)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag",
+                "defaultValue": "''"
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button text in footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-text",
+                "defaultValue": "''"
+            },
+            "actions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quick actions (comma-separated list for bottom footer)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actions",
+                "defaultValue": "''"
+            },
+            "showMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show menu button (3 dots)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu",
+                "defaultValue": "false"
+            },
+            "menuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items (as JSON string array of CardMenuItem)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-items",
+                "defaultValue": "'[]'"
+            },
+            "menuActions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu actions (comma-separated list, alternative to menuItems)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-actions",
+                "defaultValue": "''"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library for menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "autoScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically scroll the card into view when it is expanded if it's partially off-screen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-scroll",
+                "defaultValue": "false"
+            },
+            "scrollBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrollBehavior",
+                    "resolved": "\"auto\" | \"instant\" | \"smooth\"",
+                    "references": {
+                        "ScrollBehavior": {
+                            "location": "global",
+                            "id": "global::ScrollBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scrolling behavior when autoScroll is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-behavior",
+                "defaultValue": "'smooth'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFlipped": {},
+            "isMenuOpen": {},
+            "isCollapsed": {},
+            "parsedMenuItems": {},
+            "magneticTransform": {},
+            "tiltTransform": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cardFlip",
+                "name": "cardFlip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "menuItemClick",
+                "name": "menuItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CardMenuEvent",
+                    "resolved": "CardMenuEvent",
+                    "references": {
+                        "CardMenuEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/card/types.ts::CardMenuEvent",
+                            "referenceLocation": "CardMenuEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "expandToggle",
+                "name": "expandToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ expanded: boolean }",
+                    "resolved": "{ expanded: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "cardToggle",
+                "name": "cardToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "cardClick",
+                "name": "cardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "cardSelect",
+                "name": "cardSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "cardClose",
+                "name": "cardClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuActionClick",
+                "name": "menuActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu action is clicked (alias for menuItemClick matching ui-card)"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "scrollToCard": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically scroll this card into view",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "menuItems",
+                "methodName": "handleMenuPropsChange"
+            }, {
+                "propName": "menuActions",
+                "methodName": "handleMenuPropsChange"
+            }, {
+                "propName": "flipped",
+                "methodName": "handleFlippedChange"
+            }, {
+                "propName": "collapsed",
+                "methodName": "handleCollapsedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}