atomicuilibrary 0.0.1

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,1201 @@
+// ...existing code...
+import { h } from "@stencil/core";
+import { normalizeComponentSize } from "../../utils/component-size";
+export class Checkbox {
+    analyticsEvent;
+    customClass;
+    badge;
+    tooltip;
+    tooltipPosition = 'top';
+    el;
+    internals;
+    inputElement;
+    async setFocus() {
+        this.inputElement?.focus();
+    }
+    checked = false;
+    indeterminate = false;
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    label = '';
+    helperText = '';
+    errorMessage = '';
+    value = '';
+    name = '';
+    size = 'md';
+    color = 'success';
+    variant = 'default';
+    skeleton = false;
+    labelPosition = 'right';
+    customCheckIcon = '';
+    customIndeterminateIcon = '';
+    /** High-Fidelity: Custom Image instead of check */
+    customImage = '';
+    /** High-Fidelity: Library for custom icons */
+    customIconLibrary = 'lucide';
+    checkboxTabIndex = 0;
+    ariaLabel = '';
+    ariaDescribedBy = '';
+    enableAnimation = true;
+    rippleEffect = true;
+    labelClickable = true;
+    rtl = false;
+    /** High-Fidelity: Secondary description text */
+    description = '';
+    /** Position of the descriptive text relative to the label */
+    descriptionPosition = 'below';
+    /** High-Fidelity: Trigger confetti burst on check */
+    confetti = false;
+    /** High-Fidelity: Glow effect when checked */
+    glow = false;
+    /** High-Fidelity: Enable haptic feedback */
+    haptic = false;
+    /** High-Fidelity: Haptic intensity */
+    hapticIntensity = 'light';
+    /** Entry animation when mounting */
+    reveal = 'none';
+    /** Delay for entry animation (ms) */
+    revealDelay = 0;
+    isButton = false;
+    isFocused = false;
+    isHovered = false;
+    particles = [];
+    checkboxChange;
+    checkboxFocus;
+    checkboxBlur;
+    componentWillLoad() {
+        this.internals = this.el.attachInternals();
+        this.updateFormValue();
+        this.updateIndeterminateState();
+    }
+    /**
+     * Stencil form-association callback
+     */
+    formResetCallback() {
+        this.checked = false;
+        this.indeterminate = false;
+        this.updateFormValue();
+    }
+    updateIndeterminateState() {
+        if (this.inputElement) {
+            this.inputElement.indeterminate = this.indeterminate;
+        }
+    }
+    handleChange = (event) => {
+        if (this.disabled || this.readonly) {
+            event.preventDefault();
+            return;
+        }
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = false;
+        // Elite: Haptic
+        if (this.haptic) {
+            this.triggerHaptic(this.hapticIntensity);
+        }
+        // Elite: Confetti
+        if (this.confetti && this.checked) {
+            this.triggerConfetti();
+        }
+        this.updateFormValue();
+        this.checkboxChange.emit({
+            checked: this.checked,
+            value: this.value,
+            indeterminate: this.indeterminate,
+        });
+        this.analyticsEvent.emit({ checked: this.checked, value: this.value, indeterminate: this.indeterminate });
+    };
+    updateFormValue() {
+        this.internals.setFormValue(this.checked ? this.value || 'on' : null);
+    }
+    triggerHaptic(type = 'light') {
+        if (!window.navigator.vibrate)
+            return;
+        const pattern = type === 'heavy' ? [50, 20, 50] : (type === 'md' ? [30] : [10]);
+        window.navigator.vibrate(pattern);
+    }
+    triggerConfetti() {
+        const count = 15;
+        const newParticles = Array.from({ length: count }).map((_, i) => ({
+            id: Date.now() + i,
+            x: 50,
+            y: 50,
+            vx: (Math.random() - 0.5) * 8,
+            vy: (Math.random() - 0.5) * 8,
+            r: Math.random() * 360,
+            color: ['#3DCD58', '#4ade80', '#ffffff'][Math.floor(Math.random() * 3)],
+            size: Math.random() * 6 + 4
+        }));
+        this.particles = [...newParticles];
+        setTimeout(() => (this.particles = []), 800);
+    }
+    handleFocus = () => {
+        if (this.disabled)
+            return;
+        this.isFocused = true;
+        this.checkboxFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.checkboxBlur.emit();
+    };
+    handleMouseEnter = () => {
+        if (this.disabled)
+            return;
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled || this.readonly)
+            return;
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.checked = !this.checked;
+            this.indeterminate = false;
+            this.checkboxChange.emit({
+                checked: this.checked,
+                value: this.value,
+                indeterminate: this.indeterminate,
+            });
+        }
+    };
+    renderCheckmark() {
+        // Only show icon if checked or indeterminate
+        if (!this.checked && !this.indeterminate)
+            return null;
+        if (this.customImage) {
+            return h("img", { src: this.customImage, class: "custom-image-mark" });
+        }
+        if (this.indeterminate && this.customIndeterminateIcon) {
+            return h("ui-icon", { name: this.customIndeterminateIcon, library: this.customIconLibrary, class: "custom-icon-mark" });
+        }
+        if (!this.indeterminate && this.customCheckIcon) {
+            return h("ui-icon", { name: this.customCheckIcon, library: this.customIconLibrary, class: "custom-icon-mark" });
+        }
+        return (h("svg", { class: "checkmark-svg", viewBox: "0 0 24 24" }, this.indeterminate ? (h("path", { class: "indeterminate-path", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", d: "M5 12h14" })) : (h("path", { class: "checkmark-path", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M5 13l4 4L19 7" }))));
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("div", { class: `label-section is-${this.descriptionPosition}` }, h("span", { class: { 'checkbox-label-text': true, 'non-clickable': !this.labelClickable }, onClick: (e) => {
+                if (!this.labelClickable) {
+                    e.preventDefault();
+                }
+            } }, this.label, this.required && h("span", { class: "required-indicator" }, "*")), this.description && h("span", { class: "checkbox-description" }, this.description)));
+    }
+    renderHelperText() {
+        if (this.invalid && this.errorMessage) {
+            return (h("div", { class: "helper-text error" }, h("ui-icon", { name: "exclamation-circle", library: "fontawesome", size: "14px" }), this.errorMessage));
+        }
+        if (this.helperText) {
+            return h("div", { class: "helper-text" }, this.helperText);
+        }
+        return null;
+    }
+    render() {
+        const normalizedSize = normalizeComponentSize(this.size, 'md');
+        const containerClasses = {
+            'checkbox-container': true,
+            [`checkbox-${normalizedSize}`]: true,
+            [`checkbox-${this.color}`]: true,
+            [`checkbox-${this.variant}`]: true,
+            'checkbox-disabled': this.disabled,
+            'checkbox-readonly': this.readonly,
+            'checkbox-invalid': this.invalid,
+            'checkbox-focused': this.isFocused,
+            'checkbox-hovered': this.isHovered,
+            [`checkbox-label-${this.labelPosition}`]: true,
+            'checkbox-animate': this.enableAnimation,
+            'checkbox-skeleton': this.skeleton,
+            'checkbox-checked': this.checked,
+            'checkbox-indeterminate': this.indeterminate,
+            'checkbox-rtl': this.rtl,
+            'checkbox-glow': this.glow,
+            'checkbox-is-button': this.isButton,
+            [`checkbox-reveal-${this.reveal}`]: this.reveal !== 'none',
+            ...(this.customClass ? { [this.customClass]: true } : {}),
+        };
+        const checkboxClasses = {
+            'checkbox-input-wrapper': true,
+            'checkbox-checked': this.checked,
+            'checkbox-indeterminate': this.indeterminate,
+            'checkbox-ripple': this.rippleEffect && !this.disabled,
+        };
+        return (h("div", { key: '98ae46b3ba03456e81610b5c1558d2f62b2c697e', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: '8d7a330bb7f92b454076bef8e22cee9daa8f9fb4', class: "checkbox-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: 'fd9728537e2c16a564f9b363012802ba8fa1235e', class: checkboxClasses }, h("input", { key: '1074f40300a98aaef23eb2c03466cc972b1b3090', ref: el => this.inputElement = el, type: "checkbox", class: "checkbox-input", checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, name: this.name, tabindex: this.checkboxTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("div", { key: 'c769aaf4fe33649562de2848871114f15c88b742', class: "checkbox-box" }, h("div", { key: '7de0b8700ecaad754fe7bc0e44da00852c4bb014', class: "glow-layer" }), this.renderCheckmark(), this.particles.map(p => (h("span", { class: "btn-confetti", key: p.id, style: {
+                left: `${p.x}%`,
+                top: `${p.y}%`,
+                '--vx': `${p.vx}px`,
+                '--vy': `${p.vy}px`,
+                '--vr': `${p.r}deg`,
+                backgroundColor: p.color,
+                width: `${p.size}px`,
+                height: `${p.size}px`
+            } })))), this.badge && h("span", { key: '99ad8db8cebfa106f5865c0a96470cb481ef9e91', class: "checkbox-badge" }, this.badge), this.tooltip && (h("div", { key: 'a2c46d9e27e9d404d543c31a1449b0ae945965c2', class: `checkbox-tooltip checkbox-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel()), this.renderHelperText()));
+    }
+    static get is() { return "ui-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-position",
+                "defaultValue": "'top'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'success'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxVariant",
+                    "resolved": "\"button\" | \"chip\" | \"default\" | \"filled\" | \"round-color\" | \"rounded\" | \"square\" | \"tick\"",
+                    "references": {
+                        "CheckboxVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::CheckboxVariant",
+                            "referenceLocation": "CheckboxVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "customCheckIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-check-icon",
+                "defaultValue": "''"
+            },
+            "customIndeterminateIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-indeterminate-icon",
+                "defaultValue": "''"
+            },
+            "customImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Custom Image instead of check"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-image",
+                "defaultValue": "''"
+            },
+            "customIconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Library for custom icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "checkboxTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkbox-tab-index",
+                "defaultValue": "0"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "ariaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-described-by",
+                "defaultValue": "''"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "rippleEffect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ripple-effect",
+                "defaultValue": "true"
+            },
+            "labelClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-clickable",
+                "defaultValue": "true"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Secondary description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "descriptionPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionPosition",
+                    "resolved": "\"below\" | \"right\"",
+                    "references": {
+                        "DescriptionPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::DescriptionPosition",
+                            "referenceLocation": "DescriptionPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the descriptive text relative to the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-position",
+                "defaultValue": "'below'"
+            },
+            "confetti": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Trigger confetti burst on check"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confetti",
+                "defaultValue": "false"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Glow effect when checked"
+                },
+                "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: Enable haptic feedback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "false"
+            },
+            "hapticIntensity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HapticIntensity",
+                    "resolved": "\"heavy\" | \"light\" | \"md\"",
+                    "references": {
+                        "HapticIntensity": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::HapticIntensity",
+                            "referenceLocation": "HapticIntensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Haptic intensity"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic-intensity",
+                "defaultValue": "'light'"
+            },
+            "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": "Entry animation when mounting"
+                },
+                "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": "Delay for entry animation (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal-delay",
+                "defaultValue": "0"
+            },
+            "isButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-button",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isHovered": {},
+            "particles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "analyticsEvent",
+                "name": "analyticsEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value: string; indeterminate: boolean }",
+                    "resolved": "{ checked: boolean; value: string; indeterminate: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "checkboxChange",
+                "name": "checkboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value: string; indeterminate: boolean; }",
+                    "resolved": "{ checked: boolean; value: string; indeterminate: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "checkboxFocus",
+                "name": "checkboxFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "checkboxBlur",
+                "name": "checkboxBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    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"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "updateIndeterminateState"
+            }];
+    }
+}