atomicuilibrary 0.0.1

package/dist/collection/components/tag/tag.js

@@ -0,0 +1,1119 @@
+import { h } from "@stencil/core";
+export class Tag {
+    element;
+    /**
+     * Tag label text
+     */
+    label;
+    /**
+     * Underlying value for the tag (useful for IDs)
+     */
+    value;
+    /**
+     * Color variant
+     */
+    color = 'default';
+    /**
+     * Size of the tag
+     */
+    size = 'md';
+    /**
+     * High-Fidelity: RTL support
+     */
+    rtl = false;
+    /**
+     * Tag variant
+     */
+    variant = 'filled';
+    /**
+     * Whether tag is removable
+     */
+    removable = false;
+    /**
+     * Icon to display
+     */
+    icon;
+    /**
+     * Orientation of the tag: Orientation | 'vertical-text' | 'vertical-rotated'
+     */
+    orientation = 'horizontal';
+    /**
+     * Shape of the tag: Shape | 'ribbon' | 'ticket' | 'coupon'
+     */
+    shape = 'rounded';
+    /**
+     * Whether to make the icon spin (useful for loading/syncing)
+     */
+    iconSpin = false;
+    /**
+     * Custom close icon (replacing the default Ionicon 'close')
+     */
+    closeIcon;
+    /**
+     * Custom background color hex string
+     */
+    customColor;
+    /**
+     * Custom text color hex string
+     */
+    customTextColor;
+    /**
+     * Tooltip text override for hover
+     */
+    tooltip;
+    /**
+     * Whether the tag is disabled
+     */
+    disabled = false;
+    /**
+     * Explicit icon position (unifying names)
+     */
+    iconPosition = 'left';
+    /**
+     * Icon library (unifying with other components)
+     */
+    iconLibrary = 'default';
+    /**
+     * Image source URL to display at the start
+     */
+    image;
+    /**
+     * User avatar URL
+     */
+    userAvatar;
+    /**
+     * Whether the tag is checkable (selectable)
+     */
+    checkable = false;
+    /**
+     * Whether the tag is checked (for checkable tags)
+     */
+    checked = false;
+    /**
+     * Animation type for opening/closing
+     */
+    animation = 'scale';
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration = 300;
+    /**
+     * Whether the tag is clickable (shows pointer and hover effect)
+     */
+    clickable = false;
+    /**
+     * Elevation level (0-3)
+     */
+    elevation = 0;
+    /**
+     * Whether the tag is in a loading state
+     */
+    loading = false;
+    /**
+     * Whether to show a pulse animation (for attention)
+     */
+    pulse = false;
+    /**
+     * Whether to generate color automatically based on label hash
+     */
+    autoColor = false;
+    /**
+     * Gradient variant (e.g., 'blue-purple', 'green-teal')
+     */
+    gradient;
+    /**
+     * Maximum width with text truncation
+     */
+    maxWidth;
+    /**
+     * Size of the icon (e.g., '14px', '1em')
+     */
+    iconSize = '1.14em';
+    /**
+     * Whether to show as a skeleton (placeholder)
+     */
+    skeleton = false;
+    /**
+     * Show tooltip on hover (useful with maxWidth)
+     */
+    showTooltip = false;
+    /**
+     * Badge content to display
+     */
+    badge;
+    /**
+     * Badge color variant
+     */
+    badgeColor = 'default';
+    /**
+     * Counter value to display at the end of the tag
+     */
+    counter;
+    isClosing = false;
+    isOpening = true;
+    visible = true;
+    /**
+     * Event emitted when tag is removed
+     */
+    tagRemove;
+    /**
+     * Event emitted when checked state changes
+     */
+    tagCheck;
+    getColorFromHash(str) {
+        const colors = [
+            { bg: '#3bf673', rgb: '59, 130, 246' },
+            { bg: '#10b981', rgb: '16, 185, 129' },
+            { bg: '#ef4444', rgb: '239, 68, 68' },
+            { bg: '#f59e0b', rgb: '245, 158, 11' },
+            { bg: '#8b5cf6', rgb: '139, 92, 246' },
+            { bg: '#ec4899', rgb: '236, 72, 153' },
+            { bg: '#06b6d4', rgb: '6, 182, 212' }
+        ];
+        if (!str)
+            return colors[0];
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleRemove = (e) => {
+        e.stopPropagation();
+        if (this.disabled || this.isClosing)
+            return;
+        this.isClosing = true;
+        this.tagRemove.emit();
+        setTimeout(() => {
+            this.visible = false;
+        }, this.animationDuration);
+    };
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.checkable) {
+            this.checked = !this.checked;
+            this.tagCheck.emit(this.checked);
+        }
+    };
+    componentDidLoad() {
+        setTimeout(() => {
+            this.isOpening = false;
+        }, 50);
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const autoColorData = this.autoColor ? this.getColorFromHash(this.label ?? '') : null;
+        const classes = {
+            'tag': true,
+            [`tag-${this.color}`]: !this.autoColor && !this.gradient,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            [`tag-shape-${this.shape}`]: true,
+            'tag-rounded': this.shape === 'rounded', // Legacy compatibility
+            'tag-checkable': this.checkable,
+            'tag-clickable': this.clickable,
+            'tag-checked': this.checked,
+            'tag-loading': this.loading,
+            'tag-disabled': this.disabled,
+            'tag-pulse': this.pulse,
+            'tag-skeleton': this.skeleton,
+            [`tag-${this.orientation}`]: this.orientation !== 'horizontal',
+            [`tag-elevated-${this.elevation}`]: this.elevation > 0,
+            [`tag-closing-${this.animation}`]: this.isClosing,
+            [`tag-opening-${this.animation}`]: this.isOpening,
+            [`tag-gradient-${this.gradient}`]: !!this.gradient && !this.gradient.includes('gradient'),
+            'tag-custom-gradient': !!this.gradient && this.gradient.includes('gradient'),
+            'tag-truncate': !!this.maxWidth,
+        };
+        const style = {
+            '--animation-duration': `${this.animationDuration}ms`,
+        };
+        if (this.gradient && this.gradient.includes('gradient')) {
+            style['background'] = this.gradient;
+            style['border'] = 'none';
+            style['color'] = '#fff'; // Default to white for gradients
+        }
+        if (this.maxWidth) {
+            style['max-width'] = this.maxWidth;
+        }
+        if (this.customColor) {
+            style['background-color'] = this.customColor;
+            style['border-color'] = 'transparent';
+        }
+        if (this.customTextColor) {
+            style['color'] = this.customTextColor;
+        }
+        if (autoColorData) {
+            style['background-color'] = autoColorData.bg;
+            style['color'] = 'white';
+            style['border-color'] = 'transparent';
+            style['--tag-glow-color'] = autoColorData.rgb;
+        }
+        const titleText = this.tooltip || (this.showTooltip ? this.label : undefined);
+        const isInteractive = this.clickable || this.checkable || this.removable;
+        return (h("span", { class: classes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, style: style, title: titleText, dir: this.rtl ? 'rtl' : 'ltr', tabIndex: isInteractive && !this.disabled ? 0 : -1, role: isInteractive ? 'button' : undefined, "aria-pressed": this.checkable ? this.checked : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, this.skeleton ? (h("span", { class: "tag-skeleton-content" })) : [
+            this.variant === 'dot' && h("span", { class: "tag-dot-indicator" }),
+            this.iconPosition === 'left' && this.renderMedia(),
+            h("span", { class: "tag-label" }, this.loading && !this.label ? 'Loading...' : this.label),
+            (this.shape === 'ticket' || this.shape === 'coupon') && h("span", { class: "tag-ticket-hole tag-hole-right" }),
+            this.shape === 'coupon' && h("span", { class: "tag-ticket-hole tag-hole-left" }),
+            this.iconPosition === 'right' && this.renderMedia(),
+            this.badge && (h("span", { class: `tag-badge tag-badge-${this.badgeColor}` }, this.badge)),
+            this.counter && (h("span", { class: "tag-counter" }, this.counter)),
+            this.removable && !this.disabled && (h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "tag-remove", onClick: this.handleRemove, ariaLabel: "Remove tag", tabIndex: -1, icon: this.closeIcon || "x", iconLibrary: "lucide", iconSize: "14px" }))
+        ]));
+    }
+    renderMedia() {
+        if (this.loading && this.variant !== 'dot') {
+            return h("ui-loader", { type: "spinner", size: "0.8em", color: "inherit" });
+        }
+        if (this.userAvatar)
+            return h("img", { src: this.userAvatar, alt: "", class: "tag-avatar" });
+        if (this.image)
+            return h("img", { src: this.image, alt: "", class: "tag-image" });
+        if (this.icon)
+            return (h("span", { class: { 'tag-icon': true, 'tag-icon-spin': this.iconSpin } }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: this.iconSize })));
+        return null;
+    }
+    static get is() { return "ui-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Underlying value for the tag (useful for IDs)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "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": "Color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'default'"
+            },
+            "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/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'light' | 'dot'",
+                    "resolved": "\"dot\" | \"filled\" | \"light\" | \"outlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'filled'"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether tag is removable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation | 'vertical-text' | 'vertical-rotated'",
+                    "resolved": "\"horizontal\" | \"vertical\" | \"vertical-rotated\" | \"vertical-text\"",
+                    "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": "Orientation of the tag: Orientation | 'vertical-text' | 'vertical-rotated'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape | 'ribbon' | 'ticket' | 'coupon'",
+                    "resolved": "\"circle\" | \"coupon\" | \"default\" | \"pill\" | \"ribbon\" | \"rounded\" | \"square\" | \"ticket\"",
+                    "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": "Shape of the tag: Shape | 'ribbon' | 'ticket' | 'coupon'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "iconSpin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to make the icon spin (useful for loading/syncing)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-spin",
+                "defaultValue": "false"
+            },
+            "closeIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom close icon (replacing the default Ionicon 'close')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-icon"
+            },
+            "customColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color hex string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-color"
+            },
+            "customTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color hex string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-text-color"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text override for hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Explicit icon position (unifying names)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "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": "Icon library (unifying with other components)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL to display at the start"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "userAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-avatar"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is checkable (selectable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is checked (for checkable tags)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fade' | 'scale' | 'slide' | 'rotate' | 'none'",
+                    "resolved": "\"fade\" | \"none\" | \"rotate\" | \"scale\" | \"slide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type for opening/closing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'scale'"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "300"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is clickable (shows pointer and hover effect)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1 | 2 | 3",
+                    "resolved": "0 | 1 | 2 | 3",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level (0-3)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "0"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is in a loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "pulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a pulse animation (for attention)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pulse",
+                "defaultValue": "false"
+            },
+            "autoColor": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to generate color automatically based on label hash"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-color",
+                "defaultValue": "false"
+            },
+            "gradient": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gradient variant (e.g., 'blue-purple', 'green-teal')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width with text truncation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon (e.g., '14px', '1em')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "'1.14em'"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show as a skeleton (placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip on hover (useful with maxWidth)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge content to display"
+                },
+                "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/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-color",
+                "defaultValue": "'default'"
+            },
+            "counter": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Counter value to display at the end of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isClosing": {},
+            "isOpening": {},
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tagRemove",
+                "name": "tagRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when tag is removed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tagCheck",
+                "name": "tagCheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checked state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+}