atomicuilibrary 0.0.1

package/dist/collection/components/button/button.js

@@ -0,0 +1,1380 @@
+import { h } from "@stencil/core";
+import { normalizeComponentSize } from "../../utils/component-size";
+import { sanitizeHTML } from "../../utils/security";
+export class Button {
+    el;
+    internals;
+    nativeButton;
+    async setFocus() {
+        this.nativeButton?.focus();
+    }
+    constructor() {
+        this.internals = this.el.attachInternals();
+    }
+    /** Image source for image button */
+    imgSrc;
+    /** Alt text for image button */
+    imgAlt;
+    /** Button type: 'button', 'submit', 'reset', 'image' */
+    type = 'button';
+    /** Avatar source for avatar button */
+    avatarSrc;
+    /** Alt text for avatar-btn */
+    avatarAlt;
+    /** Status dot for avatar: 'online', 'offline', 'busy', 'away' */
+    avatarStatus = '';
+    /** Values associated with the button (for use in groups) */
+    value;
+    /** Button label text */
+    label;
+    /** Optional subtitle text (shown above/below main label) */
+    subtitle;
+    /** Description text (alias for subtitle, common in toggle contexts) */
+    description;
+    /** Position of the description/subtitle: 'above' | 'below' | 'left' | 'right' */
+    descriptionPosition = 'below';
+    /** Optional icon content (can be name, SVG path, URL, or emoji) */
+    icon;
+    /** Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.) */
+    iconLibrary = 'lucide';
+    /** Render icon only (no label) */
+    iconOnly = false;
+    /** Icon position relative to label */
+    iconPosition = 'left';
+    /** Content alignment within button: 'start' | 'center' | 'end' */
+    align = 'center';
+    /** Content justification: 'start' | 'center' | 'end' | 'between' | 'around' */
+    justify = 'center';
+    /** Optional override for icon size */
+    iconSize;
+    /** Optional override for icon color */
+    iconColor = 'currentColor';
+    /** Visual variant */
+    variant = 'outline';
+    /** Button color */
+    color = 'none';
+    /** Size */
+    size = 'md';
+    /** Disabled state */
+    disabled = false;
+    /** Loading state (shows spinner) */
+    loading = false;
+    /** Loading spinner position */
+    loadingPosition = 'left';
+    /** Full width button (shorthand for width="100%") */
+    fullWidth = false;
+    /** Custom width (e.g., '100%', '200px', 'auto') */
+    width;
+    /** Custom min-width */
+    minWidth;
+    /** Button shape */
+    shape = 'rounded';
+    /** Rounded corner style (legacy override) */
+    rounded = true;
+    /** Pill-shaped (legacy override) */
+    pill = false;
+    /** Circle-shaped (shorthand for shape="circle") */
+    circle = false;
+    /** Link URL. If set, renders as an anchor tag. */
+    href;
+    /** Link target */
+    target;
+    /** Link relationships */
+    rel;
+    /** If true, the button will grow to fill available space in a flex container */
+    grow = false;
+    /** Badge content */
+    badge;
+    /** Badge color variant (primary, success, danger, etc.) */
+    badgeColor = 'danger';
+    /** Custom background color for the badge */
+    badgeCustomColor;
+    /** Custom text color for the badge */
+    badgeCustomTextColor;
+    /** Badge position */
+    badgePosition = 'top-right';
+    /** RTL support */
+    rtl = false;
+    /** Selected state (for toggle groups) */
+    selected = false;
+    /** Elevation level (0-5) */
+    elevation;
+    /** Reveal animation type */
+    reveal = 'none';
+    /** Reveal delay in ms */
+    revealDelay = 0;
+    /** Disable ripple effect */
+    noRipple = false;
+    /** Accessible label override (especially useful for icon-only buttons) */
+    ariaLabel;
+    /** Text to copy to clipboard when clicked. Shows feedback icon. */
+    copyValue;
+    /** Progress fill (0–100). Shows a background fill bar. */
+    progress;
+    copied = false;
+    /** Click event */
+    buttonClick;
+    handleClick = (event) => {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (!this.noRipple) {
+            this.createRipple(event);
+        }
+        if (this.copyValue) {
+            navigator.clipboard?.writeText(this.copyValue).then(() => {
+                this.copied = true;
+                setTimeout(() => (this.copied = false), 2000);
+            });
+        }
+        if (this.type === 'submit' && !this.disabled) {
+            this.internals.form?.requestSubmit();
+        }
+        else if (this.type === 'reset' && !this.disabled) {
+            this.internals.form?.reset();
+        }
+        this.buttonClick.emit(event);
+    };
+    createRipple(event) {
+        const btn = event.currentTarget;
+        const container = btn.querySelector('.btn-ripple-container');
+        if (!container)
+            return;
+        const circle = document.createElement("span");
+        const diameter = Math.max(btn.clientWidth, btn.clientHeight);
+        const radius = diameter / 2;
+        const rect = btn.getBoundingClientRect();
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${event.clientX - rect.left - radius}px`;
+        circle.style.top = `${event.clientY - rect.top - radius}px`;
+        circle.classList.add("ripple");
+        const ripple = container.getElementsByClassName("ripple")[0];
+        if (ripple) {
+            ripple.remove();
+        }
+        container.appendChild(circle);
+    }
+    /**
+     * Positions the icon relative to the label according to `iconPosition`.
+     *
+     * Layout model:
+     *
+     *   'left'   →  [icon] [badges + label]          — horizontal, icon before
+     *   'right'  →  [badges + label] [icon]          — horizontal, icon after
+     *   'top'    →  [icon]                           — vertical, icon above
+     *               [badges + label]
+     *   'bottom' →  [badges + label]                 — vertical, icon below
+     *               [icon]
+     *
+     * The btn-label-group wrapper handles inline badges and the text label.
+     * Top/bottom icons sit outside that wrapper so flex-direction changes
+     * are not needed — the DOM order itself drives the visual order.
+     */
+    renderButtonContent(iconElement, avatarElement, spinner) {
+        const trimmedLabel = this.label?.trim();
+        const trimmedDescription = (this.description || this.subtitle || '').trim();
+        const hasLabel = !!trimmedLabel;
+        const hasDescription = !!trimmedDescription;
+        // Show label block if we have a label prop, description prop, OR if it's not an icon-only button (fallback to slot)
+        const showLabel = (hasLabel || hasDescription || !this.iconOnly);
+        if (this.iconOnly) {
+            return this.loading ? spinner : (avatarElement || iconElement || h("slot", null));
+        }
+        const badgeInlineLeft = this.badge && (this.badgePosition === 'inline-left' ||
+            (this.rtl && this.badgePosition === 'inline-right')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
+        const badgeInlineRight = this.badge && (this.badgePosition === 'inline-right' ||
+            (this.rtl && this.badgePosition === 'inline-left')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
+        const showSpinnerAtStart = this.loading && (this.loadingPosition === 'left' || (this.loadingPosition === 'icon' && !iconElement && !avatarElement));
+        const showSpinnerAtEnd = this.loading && this.loadingPosition === 'right';
+        const showSpinnerCentered = this.loading && (this.loadingPosition === 'center' || this.loadingPosition === 'icon');
+        const iconBlock = (avatarElement || iconElement || showSpinnerCentered) ? (h("div", { class: "btn-icon-block", part: "icon-block" }, showSpinnerCentered ? spinner : (avatarElement || iconElement))) : null;
+        const labelBlock = showLabel ? (h("div", { class: "btn-label-block", part: "label-block" }, h("div", { class: "btn-title", part: "title" }, this.copied ? '✓ Copied!' : (hasLabel ? trimmedLabel : h("slot", null))), hasDescription && (h("div", { class: `btn-subtitle btn-subtitle-${this.descriptionPosition}`, part: "subtitle" }, trimmedDescription)))) : null;
+        return (h("div", { class: {
+                'btn-label-row': true,
+                [`icon-pos-${this.iconPosition}`]: true
+            } }, badgeInlineLeft, showSpinnerAtStart && spinner, iconBlock, labelBlock, showSpinnerAtEnd && spinner, badgeInlineRight));
+    }
+    render() {
+        const isImageButton = !!this.imgSrc;
+        const isAvatarButton = !!this.avatarSrc;
+        const showIcon = !!this.icon && !this.loading;
+        const Tag = (this.href ? 'a' : 'button');
+        const normalizedSize = normalizeComponentSize(this.size, 'md');
+        const spinner = this.loading ? (h("span", { class: `btn-spinner btn-spinner-${this.loadingPosition}` }, h("ui-loader", { size: "xs", color: "currentColor" }))) : null;
+        const sanitizedLabel = this.ariaLabel || (this.label || this.el.textContent || '').trim();
+        const finalAriaLabel = sanitizeHTML(sanitizedLabel);
+        const renderProps = this.href ? {
+            href: this.href,
+            target: this.target,
+            rel: this.rel,
+            role: 'button',
+            'aria-label': finalAriaLabel
+        } : {
+            type: this.type === 'image' ? 'button' : this.type,
+            disabled: this.disabled || this.loading,
+            'aria-label': finalAriaLabel
+        };
+        const iconElement = showIcon ? (h("span", { class: "btn-icon", part: "icon", "aria-hidden": "true" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: this.iconSize || normalizedSize, color: this.iconColor || 'currentColor' }))) : null;
+        const avatarElement = isAvatarButton ? (h("span", { class: "btn-avatar" }, h("img", { src: this.avatarSrc, alt: this.avatarAlt || '' }), this.avatarStatus && h("span", { class: `status-dot status-${this.avatarStatus}` }))) : null;
+        const styles = {
+            '--button-width': this.width ? this.width : (this.fullWidth ? '100%' : 'auto'),
+            '--button-min-width': this.minWidth ? this.minWidth : 'auto',
+            'animation-delay': this.reveal !== 'none' && this.revealDelay > 0 ? `${this.revealDelay}ms` : undefined
+        };
+        const sizeClass = normalizedSize;
+        const hostClass = [
+            'btn',
+            `btn-${typeof this.variant === 'string' ? this.variant : 'none'}`,
+            this.color && `btn-${this.color}`,
+            `btn-${sizeClass}`,
+            (this.disabled || this.loading) && 'btn-disabled',
+            this.iconOnly && !this.loading && 'btn-icon-only',
+            this.loading && 'btn-loading',
+            this.fullWidth && 'btn-full-width',
+            this.grow && 'btn-grow',
+            // Shape Cascading: Explicit 'shape' wins (with 'default' falling back to 'rounded'), then shorthand props.
+            (this.shape && this.shape !== 'default') ? `btn-shape-${this.shape}` :
+                this.circle ? 'btn-shape-circle' :
+                    this.pill ? 'btn-shape-pill' :
+                        isAvatarButton ? 'btn-shape-circle' :
+                            'btn-shape-rounded',
+            this.selected && 'btn-selected',
+            this.iconPosition === 'top' || this.iconPosition === 'bottom' ? 'btn-is-vertical' : '',
+            !!this.elevation && `btn-elevation-${this.elevation}`,
+            isImageButton && 'btn-type-image',
+            isAvatarButton && 'btn-type-avatar',
+            `btn-align-${this.align}`,
+            `btn-justify-${this.justify}`,
+            `icon-pos-${this.iconPosition}`,
+            this.loading && `btn-loading-${this.loadingPosition}`,
+            this.rtl && 'btn-rtl',
+            this.reveal !== 'none' && `reveal-${this.reveal}`,
+        ].filter(Boolean).join(' ');
+        return (h(Tag, { key: 'd8605634f3cc899257ed9d6960ca1cf4e0aaf031', ...renderProps, style: styles, class: hostClass, part: "button", dir: this.rtl ? 'rtl' : 'ltr', onClick: this.handleClick, ref: (el) => (this.nativeButton = el) }, !this.noRipple && h("span", { key: 'cba383c8098e685d8f2ade718daa452e0884a034', class: "btn-ripple-container" }), h("span", { key: '469dd3ab6fe97d66e8aa50434e9407da2806f7c9', class: "btn-content" }, isImageButton ? (h("fragment", null, this.loading && spinner, h("img", { src: this.imgSrc, alt: this.imgAlt || '', class: "btn-image" }))) : (this.renderButtonContent(iconElement, avatarElement, spinner))), this.badge && !this.badgePosition.startsWith('inline') && (h("ui-badge", { key: '7ee2666b4d24ebed0516b6a15cf7c4c194ea1116', class: `btn-badge is-absolute pos-${this.badgePosition}`, value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })), this.progress !== undefined && (h("span", { key: 'a132192aa0c0548de607fcd8f4c1b7d61bb04bfc', class: "btn-progress-fill", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } }))));
+    }
+    static get is() { return "ui-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imgSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source for image button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-src"
+            },
+            "imgAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for image button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-alt"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"image\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type: 'button', 'submit', 'reset', 'image'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "avatarSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar source for avatar button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-src"
+            },
+            "avatarAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for avatar-btn"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-alt"
+            },
+            "avatarStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusIndicator",
+                    "resolved": "\"\" | \"away\" | \"busy\" | \"dnd\" | \"offline\" | \"online\"",
+                    "references": {
+                        "StatusIndicator": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::StatusIndicator",
+                            "referenceLocation": "StatusIndicator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Status dot for avatar: 'online', 'offline', 'busy', 'away'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-status",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Values associated with the button (for use in groups)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional subtitle text (shown above/below main label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text (alias for subtitle, common in toggle contexts)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "descriptionPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'above' | 'below' | 'left' | 'right'",
+                    "resolved": "\"above\" | \"below\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the description/subtitle: 'above' | 'below' | 'left' | 'right'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-position",
+                "defaultValue": "'below'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon content (can be name, SVG path, URL, or emoji)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "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",
+                            "id": "src/types/index.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render icon only (no label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition| 'none'",
+                    "resolved": "\"bottom\" | \"left\" | \"none\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position relative to label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content alignment within button: 'start' | 'center' | 'end'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'between' | 'around'",
+                    "resolved": "\"around\" | \"between\" | \"center\" | \"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content justification: 'start' | 'center' | 'end' | 'between' | 'around'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "justify",
+                "defaultValue": "'center'"
+            },
+            "iconSize": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional override for icon size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional override for icon color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color",
+                "defaultValue": "'currentColor'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"accordion\" | \"ghost\" | \"glass\" | \"link\" | \"none\" | \"outline\" | \"primary\" | \"secondary\" | \"soft\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonVariant",
+                            "referenceLocation": "ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outline'"
+            },
+            "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",
+                            "id": "src/types/index.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'none'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state (shows spinner)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "loadingPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'none' | 'icon' | 'center'",
+                    "resolved": "\"bottom\" | \"center\" | \"icon\" | \"left\" | \"none\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading spinner position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-position",
+                "defaultValue": "'left'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button (shorthand for width=\"100%\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom width (e.g., '100%', '200px', 'auto')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom min-width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rounded corner style (legacy override)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "true"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pill-shaped (legacy override)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pill",
+                "defaultValue": "false"
+            },
+            "circle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Circle-shaped (shorthand for shape=\"circle\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circle",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL. If set, renders as an anchor tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link relationships"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "grow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the button will grow to fill available space in a flex container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "grow",
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
+            "badgeColor": {
+                "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",
+                            "id": "src/types/index.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge color variant (primary, success, danger, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-color",
+                "defaultValue": "'danger'"
+            },
+            "badgeCustomColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color for the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-custom-color"
+            },
+            "badgeCustomTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color for the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-custom-text-color"
+            },
+            "badgePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition | 'inline-left' | 'inline-right'",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"inline-left\" | \"inline-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-position",
+                "defaultValue": "'top-right'"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected state (for toggle groups)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level (0-5)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation"
+            },
+            "reveal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'fade-in' | 'slide-up' | 'zoom'",
+                    "resolved": "\"fade-in\" | \"none\" | \"slide-up\" | \"zoom\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reveal animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal",
+                "defaultValue": "'none'"
+            },
+            "revealDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reveal delay in ms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal-delay",
+                "defaultValue": "0"
+            },
+            "noRipple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable ripple effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-ripple",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label override (especially useful for icon-only buttons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "copyValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to copy to clipboard when clicked. Shows feedback icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-value"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress fill (0\u2013100). Shows a background fill bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click event"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}