atomicuilibrary 0.0.1

package/dist/collection/components/rating/rating.js

@@ -0,0 +1,1062 @@
+import { h } from "@stencil/core";
+export class Rating {
+    el;
+    /**
+     * Type of rating
+     */
+    type = 'star';
+    /**
+     * Current rating value
+     */
+    value = 0;
+    /**
+     * Maximum rating value (for star and smiley types)
+     */
+    max = 5;
+    /**
+     * Size of the rating icons
+     */
+    size = 'md';
+    /**
+     * Color of active rating
+     */
+    color = 'warning';
+    /**
+     * Custom active color (hex/css color)
+     */
+    activeColor;
+    /**
+     * Custom active fill color (hex/css color)
+     */
+    activeFillColor;
+    /**
+     * Read-only mode
+     */
+    readonly = false;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Allow half ratings (only for star type)
+     */
+    allowHalf = false;
+    /**
+     * Show rating value text
+     */
+    showValue = false;
+    /**
+     /** High-Fidelity: Tactical side/bottom description */
+    description;
+    descriptionPosition = 'bottom';
+    /** Custom labels for ratings
+     */
+    labels;
+    /** High-Fidelity: Atmospheric glow on active items */
+    glow = false;
+    /** High-Fidelity: Sensory vibration feedback */
+    haptic = false;
+    /** High-Fidelity: Victory pulse on max rating */
+    victoryGlow = false;
+    /** High-Fidelity: Visual variant */
+    variant = 'default';
+    /** High-Fidelity: Allow clearing the rating by clicking the same value */
+    clearable = false;
+    /** Custom Icon Name (Lucide) */
+    iconName = 'star';
+    /** Icon Library */
+    iconLibrary = 'lucide';
+    /** High-Fidelity: Image URL for the rating marker */
+    image;
+    /** High-Fidelity: Dynamic color mapping for individual items (JSON array) */
+    colorMap;
+    /** Validation: Error state */
+    invalid = false;
+    /** Validation: Error message */
+    errorMessage;
+    /** Show total review count */
+    showReviews = false;
+    /** Total review count value */
+    totalReviews = 0;
+    /** Validation: Helper text */
+    helperText;
+    /**
+     * Show a distribution histogram of total reviews
+     */
+    showHistogram = false;
+    /**
+     * Data for the rating summary histogram (JSON array of counts from 5 to 1 stars)
+     */
+    summaryData;
+    /**
+     * Use native emojis instead of icons for smiley rating
+     */
+    useEmoji = false;
+    /**
+     * Show a visual summary of the current rating (label and value)
+     */
+    showSummary = false;
+    /**
+     * Position of the summary
+     */
+    summaryPosition = 'side';
+    /**
+     * RTL support
+     */
+    rtl = false;
+    hoverValue = 0;
+    isVictory = false;
+    particles = [];
+    /**
+     * Emitted when rating changes
+     */
+    ratingChange;
+    getLabels() {
+        if (this.labels) {
+            try {
+                return typeof this.labels === 'string' ? JSON.parse(this.labels) : this.labels;
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    handleClick = (rating) => {
+        if (this.readonly || this.disabled)
+            return;
+        if (this.type === 'thumb') {
+            // Thumb: toggle between 1 (up), -1 (down), 0 (none)
+            if (this.value === rating) {
+                this.value = 0;
+            }
+            else {
+                this.value = rating;
+            }
+        }
+        else {
+            if (this.clearable && this.value === rating) {
+                this.value = 0;
+            }
+            else {
+                this.value = rating;
+            }
+        }
+        if (this.haptic && 'vibrate' in navigator) {
+            navigator.vibrate(this.value === this.max ? [15, 30, 15] : 10);
+        }
+        if (this.value === this.max) {
+            this.triggerVictory();
+        }
+        this.ratingChange.emit(this.value);
+    };
+    handleKeyDown = (event) => {
+        if (this.readonly || this.disabled)
+            return;
+        let newValue = this.value;
+        const step = this.allowHalf ? 0.5 : 1;
+        const isRtl = this.rtl || this.el.dir === 'rtl' || !!this.el.closest('[dir="rtl"]');
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newValue = isRtl
+                    ? Math.max(0, this.value - step)
+                    : Math.min(this.max, this.value + step);
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newValue = isRtl
+                    ? Math.min(this.max, this.value + step)
+                    : Math.max(0, this.value - step);
+                event.preventDefault();
+                break;
+            case 'Home':
+                newValue = 0;
+                event.preventDefault();
+                break;
+            case 'End':
+                newValue = this.max;
+                event.preventDefault();
+                break;
+            default:
+                return;
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.ratingChange.emit(this.value);
+            if (this.value === this.max)
+                this.triggerVictory();
+        }
+    };
+    triggerVictory = () => {
+        if (!this.victoryGlow)
+            return;
+        this.isVictory = true;
+        // Create euphoria particles
+        const newParticles = Array.from({ length: 24 }).map((_, i) => ({
+            id: Date.now() + i,
+            tx: (Math.random() - 0.5) * 500,
+            ty: -(Math.random() * 300 + 100),
+            rot: Math.random() * 720,
+            clr: ['#fbbf24', '#f59e0b', '#3bf673', '#10b981', '#ef4444', '#6366f1'][i % 6],
+            size: Math.random() * 8 + 4
+        }));
+        this.particles = newParticles;
+        setTimeout(() => {
+            this.isVictory = false;
+            this.particles = [];
+        }, 1500);
+    };
+    handleMouseEnter = (rating) => {
+        if (this.readonly || this.disabled)
+            return;
+        this.hoverValue = rating;
+    };
+    handleMouseLeave = () => {
+        if (this.readonly || this.disabled)
+            return;
+        this.hoverValue = 0;
+    };
+    renderStarRating() {
+        const items = [];
+        const currentValue = this.hoverValue || this.value;
+        const colorMapArray = this.colorMap ? JSON.parse(this.colorMap) : null;
+        for (let i = 1; i <= this.max; i++) {
+            const isActive = currentValue >= i;
+            const isHalf = this.allowHalf && currentValue >= i - 0.5 && currentValue < i;
+            const isHovered = this.hoverValue >= i;
+            const itemColor = colorMapArray && colorMapArray[i - 1] ? colorMapArray[i - 1] : (this.activeColor || this.color);
+            const activeFill = this.activeFillColor || 'currentColor';
+            items.push(h("button", { type: "button", class: {
+                    'rating-item': true,
+                    'rating-item-active': isActive || isHalf,
+                    'rating-item-half': isHalf,
+                    'rating-item-hover': isHovered,
+                    [`rating-color-${itemColor}`]: !!itemColor,
+                }, onClick: () => this.handleClick(i), onMouseEnter: () => this.handleMouseEnter(i), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": `Rate ${i} out of ${this.max}` }, h("div", { class: "rating-icon-container" }, this.image ? (h("img", { src: this.image, class: "rating-icon-bg", alt: "rating" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, class: "rating-icon-bg" })), h("div", { class: "rating-icon-fill", style: { width: isHalf ? '50%' : (isActive ? '100% ' : '0%') } }, this.image ? (h("img", { src: this.image, alt: "rating active" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, fill: activeFill }))))));
+        }
+        return items;
+    }
+    renderHistogram() {
+        if (!this.summaryData)
+            return null;
+        try {
+            const data = typeof this.summaryData === 'string' ? JSON.parse(this.summaryData) : this.summaryData;
+            if (!Array.isArray(data))
+                return null;
+            const total = data.reduce((a, b) => a + b, 0);
+            const activeColor = this.activeColor || `var(--rating-${this.color})`;
+            return (h("div", { class: "rating-histogram" }, data.map((count, index) => {
+                const stars = data.length - index;
+                const percentage = total > 0 ? (count / total) * 100 : 0;
+                return (h("div", { class: "histogram-row" }, h("span", { class: "histogram-label" }, stars, " ", h("ui-icon", { name: "star", library: "lucide", size: "10px" })), h("div", { class: "histogram-bar-container" }, h("div", { class: "histogram-bar-fill", style: { width: `${percentage}%`, backgroundColor: activeColor } })), h("span", { class: "histogram-count" }, count)));
+            })));
+        }
+        catch {
+            return null;
+        }
+    }
+    renderSmileyRating() {
+        const items = [];
+        const labels = this.getLabels();
+        const icons = ['frown', 'meh', 'smile', 'laugh', 'heart'];
+        const emojis = ['😢', '😕', '😐', '🙂', '😄'];
+        const currentValue = this.hoverValue || this.value;
+        for (let i = 1; i <= this.max; i++) {
+            const isHovered = this.hoverValue === i;
+            const isSelected = this.value === i;
+            const isActive = currentValue === i || (this.useEmoji && currentValue >= i);
+            const icon = icons[i - 1] || 'smile';
+            const emoji = emojis[i - 1] || '🙂';
+            items.push(h("div", { class: "smiley-item-wrapper" }, h("button", { type: "button", class: {
+                    'rating-item': true,
+                    'rating-item-smiley': true,
+                    'rating-item-active': isActive,
+                    'rating-item-selected': isSelected,
+                    'rating-item-hover': isHovered,
+                    'rating-item-emoji': this.useEmoji,
+                }, onClick: () => this.handleClick(i), onMouseEnter: () => this.handleMouseEnter(i), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": labels[i - 1] || `Rate ${i} out of ${this.max}` }, this.useEmoji ? (h("span", { class: "emoji-display" }, currentValue >= i || isSelected ? emoji : '⚪')) : (h("div", { class: "rating-icon-container" }, h("ui-icon", { name: icon, color: "currentColor", library: "lucide", size: this.size, class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: isActive ? '100%' : '0%' } }, h("ui-icon", { name: icon, color: "currentColor", library: "lucide", size: this.size }))))), labels[i - 1] && (h("span", { class: "smiley-label" }, labels[i - 1]))));
+        }
+        return items;
+    }
+    renderThumbRating() {
+        const thumbUpActive = this.value === 1 || this.hoverValue === 1;
+        const thumbDownActive = this.value === -1 || this.hoverValue === -1;
+        return [
+            h("button", { type: "button", class: {
+                    'rating-item': true,
+                    'rating-item-thumb': true,
+                    'rating-item-active': thumbUpActive,
+                    'rating-item-thumb-up': true,
+                }, onClick: () => this.handleClick(1), onMouseEnter: () => this.handleMouseEnter(1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs up" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbUpActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide" })))),
+            h("button", { type: "button", class: {
+                    'rating-item': true,
+                    'rating-item-thumb': true,
+                    'rating-item-active': thumbDownActive,
+                    'rating-item-thumb-down': true,
+                }, onClick: () => this.handleClick(-1), onMouseEnter: () => this.handleMouseEnter(-1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs down" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-down", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbDownActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-down", library: "lucide" })))),
+        ];
+    }
+    render() {
+        const isRtl = this.rtl || this.el.dir === 'rtl' || !!this.el.closest('[dir="rtl"]');
+        const classes = {
+            'rating-container': true,
+            'rating-rtl': isRtl,
+            [`rating-size-${this.size}`]: true,
+            [`rating-variant-${this.variant}`]: true,
+            'rating-readonly': this.readonly,
+            'rating-disabled': this.disabled,
+            'rating-glow': this.glow,
+            'rating-victory': this.isVictory,
+            'rating-invalid': this.invalid,
+        };
+        const labels = this.getLabels();
+        const currentLabel = this.type === 'thumb'
+            ? (this.value === 1 ? 'Liked' : this.value === -1 ? 'Disliked' : '')
+            : labels[(this.hoverValue || this.value) - 1];
+        const descriptionElement = this.description && (h("div", { key: 'ddad90f4a42a3c07145f31156cdc6495f33b0bee', class: `rating-description rating-description-${this.descriptionPosition}` }, this.description));
+        const helperElement = (this.invalid && this.errorMessage) ? (h("div", { class: "rating-helper rating-error" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "12px" }), h("span", null, this.errorMessage))) : this.helperText ? (h("div", { class: "rating-helper" }, this.helperText)) : null;
+        const dynamicStyle = {
+            '--rating-active-color': this.activeColor || `var(--rating-${this.color})`,
+            '--rating-fill-color': this.activeFillColor || 'currentColor',
+        };
+        const summaryElement = (this.showSummary && currentLabel) ? (h("div", { class: `rating-summary rating-summary-${this.summaryPosition}` }, h("div", { class: "summary-divider" }), h("div", { class: "summary-content" }, h("p", { class: "summary-label" }, currentLabel), h("p", { class: "summary-value" }, (this.hoverValue || this.value).toFixed(0), " / ", this.max)))) : null;
+        return (h("div", { key: '09946cb1ba974009053c5cdf39a92c904f485cc7', class: classes, style: dynamicStyle, tabindex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, role: "group", "aria-label": "Rating component" }, h("div", { key: '8c56d47b79ddd22a69fd58dee44f13182ebabc3f', class: "rating-items-container" }, h("div", { key: '6c9206ec1dc844689631a32799dd368bef1160b0', class: "rating-items" }, this.type === 'star' && this.renderStarRating(), this.type === 'smiley' && this.renderSmileyRating(), this.type === 'thumb' && this.renderThumbRating(), this.descriptionPosition === 'side' && descriptionElement), this.summaryPosition === 'side' && summaryElement), this.showValue && !this.showSummary && this.type !== 'thumb' && (h("div", { key: '2b733f67e6c01f31e789b79ea1f652a63edcde39', class: "rating-value" }, currentLabel && h("span", { key: 'd5ca42772c409783b2ef5dea7da47944df87eec9', class: "rating-label" }, currentLabel), h("span", { key: '860c841ed2d7b2e642ad132d91bcd731e1a974c2', class: "rating-number" }, (this.hoverValue || this.value).toFixed(this.allowHalf ? 1 : 0), " / ", this.max))), this.showReviews && this.totalReviews > 0 && (h("div", { key: 'd3f05521d7337580d120356ce44cc149211fe28f', class: "rating-total-reviews" }, h("span", { key: '4f3c9863f74bb3e2a5f2d46cb94bef7e053471a1', class: "review-dot" }, "\u2022"), h("span", { key: '9eb1794ad9f571667afd26857719bc38c68f5dbf', class: "review-count" }, "(", this.totalReviews, " reviews)"))), this.descriptionPosition === 'bottom' && descriptionElement, this.summaryPosition === 'bottom' && summaryElement, this.showHistogram && this.renderHistogram(), helperElement, this.particles.map(p => (h("div", { key: p.id, class: "rating-victory-particle", style: {
+                '--tx': `${p.tx}px`,
+                '--ty': `${p.ty}px`,
+                '--rot': `${p.rot}deg`,
+                '--clr': p.clr,
+                '--size': `${p.size}px`,
+                'left': '50%',
+                'top': '50%'
+            } })))));
+    }
+    static get is() { return "ui-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rating.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RatingType",
+                    "resolved": "\"smiley\" | \"star\" | \"thumb\"",
+                    "references": {
+                        "RatingType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/rating/types.ts::RatingType",
+                            "referenceLocation": "RatingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of rating"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'star'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current rating value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum rating value (for star and smiley types)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "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 rating icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'warning' | 'success' | 'danger'",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of active rating"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'warning'"
+            },
+            "activeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom active color (hex/css color)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-color"
+            },
+            "activeFillColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom active fill color (hex/css color)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-fill-color"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "allowHalf": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow half ratings (only for star type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-half",
+                "defaultValue": "false"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show rating value text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "/** High-Fidelity: Tactical side/bottom description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "descriptionPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'side' | 'bottom'",
+                    "resolved": "\"bottom\" | \"side\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-position",
+                "defaultValue": "'bottom'"
+            },
+            "labels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom labels for ratings"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "labels"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Atmospheric glow on active items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glow",
+                "defaultValue": "false"
+            },
+            "haptic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Sensory vibration feedback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "false"
+            },
+            "victoryGlow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Victory pulse on max rating"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "victory-glow",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'glass' | 'raised'",
+                    "resolved": "\"default\" | \"glass\" | \"raised\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Visual variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Allow clearing the rating by clicking the same value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom Icon Name (Lucide)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name",
+                "defaultValue": "'star'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon Library"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Image URL for the rating marker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "colorMap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Dynamic color mapping for individual items (JSON array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-map"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation: Error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation: Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "showReviews": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show total review count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-reviews",
+                "defaultValue": "false"
+            },
+            "totalReviews": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total review count value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-reviews",
+                "defaultValue": "0"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation: Helper text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "showHistogram": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a distribution histogram of total reviews"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-histogram",
+                "defaultValue": "false"
+            },
+            "summaryData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Data for the rating summary histogram (JSON array of counts from 5 to 1 stars)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "summary-data"
+            },
+            "useEmoji": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use native emojis instead of icons for smiley rating"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-emoji",
+                "defaultValue": "false"
+            },
+            "showSummary": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a visual summary of the current rating (label and value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-summary",
+                "defaultValue": "false"
+            },
+            "summaryPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'side' | 'bottom'",
+                    "resolved": "\"bottom\" | \"side\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the summary"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "summary-position",
+                "defaultValue": "'side'"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hoverValue": {},
+            "isVictory": {},
+            "particles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ratingChange",
+                "name": "ratingChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when rating changes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}