atomicuilibrary 0.0.1

package/dist/collection/components/switch/switch.js

@@ -0,0 +1,1578 @@
+import { h, Host } from "@stencil/core";
+export class UISwitch {
+    el;
+    /** Checked state */
+    checked = false;
+    /** Disabled state */
+    disabled = false;
+    /** Readonly state */
+    readonly = false;
+    /** Invalid state */
+    invalid = false;
+    /** Loading state (shows spinner) */
+    loading = false;
+    /** Size variant */
+    size = 'md';
+    /** Semantic color variant */
+    color = 'primary';
+    /** Material archetype variant */
+    variant = 'solid';
+    /** Shape style */
+    shape = 'default';
+    /** Custom width for the switch track (e.g., '100px', 'auto') */
+    width;
+    /**
+     * Label for the switch
+     */
+    label = '';
+    /** Label position */
+    labelPosition = 'right';
+    /** Elevation level (0-5) */
+    elevation = 0;
+    /** Shape of the thumb */
+    thumbShape = 'circle';
+    /** Icon when unchecked */
+    iconOff;
+    /** Icon when checked */
+    iconOn;
+    /** Show icons */
+    showIcons = false;
+    /** Performance/Animation toggle */
+    enableAnimation = true;
+    /** Orientation */
+    orientation = 'horizontal';
+    /** Helper text below switch */
+    helperText = '';
+    /** Error message when invalid */
+    errorMessage = '';
+    /** Custom text on track when checked */
+    checkedText = '';
+    /** Custom text on track when unchecked */
+    uncheckedText = '';
+    /** Show text symbols on track */
+    showTrackText = false;
+    /** RTL support */
+    rtl = false;
+    /** Associated form ID */
+    formId = '';
+    /** Form field name */
+    name = '';
+    /** Form field value */
+    value = 'on';
+    /** Animation physics preset */
+    physics = 'liquid';
+    /** Glow effect when active */
+    glow = false;
+    /** Require confirmation before toggle */
+    requireConfirmation = false;
+    /** Confirmation message */
+    confirmationMessage = 'Are you sure you want to change this?';
+    /** Indeterminate state */
+    indeterminate = false;
+    /** Show success feedback after change */
+    showSuccessFeedback = false;
+    /** Tab index */
+    switchTabIndex = 0;
+    /** Aria label override */
+    ariaLabel = '';
+    /** Use gradient colors */
+    gradient = false;
+    /** Gradient colors (JSON array of strings) */
+    gradientColors = '';
+    /** Auto-submit nearest form on change */
+    autoSubmit = false;
+    /** Show check/cross icons by default */
+    showDefaultIcons = false;
+    /** Required field indicator */
+    required = false;
+    /** Sensory vibration feedback */
+    haptic = false;
+    /** Tactical side/bottom description */
+    description;
+    descriptionPosition = 'bottom';
+    /** High-Fidelity: Image URL for checked state */
+    checkedImage;
+    /** High-Fidelity: Image URL for unchecked state */
+    uncheckedImage;
+    /** Enable async toggle mode (waits for external confirmation) */
+    async = false;
+    /** Internal processing state for async operations */
+    internalLoading = false;
+    /** Visual shake feedback for validation failures or vetoed changes */
+    isShaking = false;
+    /**
+     * Triggers a visual 'Shake' effect and haptic vibration pattern
+     * to indicate a rejected action or validation failure.
+     */
+    async shake() {
+        this.isShaking = true;
+        if (this.haptic && 'vibrate' in navigator) {
+            navigator.vibrate([10, 50, 10, 50, 10]); // Multi-pulse rejection pattern
+        }
+        setTimeout(() => {
+            this.isShaking = false;
+        }, 600);
+    }
+    /** Show tooltip on hover */
+    showTooltip = false;
+    /** Tooltip text */
+    tooltipText = '';
+    /** Icon library to use */
+    iconLibrary = 'ionicons';
+    isFocused = false;
+    isHovered = false;
+    showingSuccess = false;
+    showConfirmDialog = false;
+    pendingValue = false;
+    showRipple = false;
+    /** Change event */
+    switchChange;
+    /** Focus event */
+    switchFocus;
+    /** Blur event */
+    switchBlur;
+    /** Confirmation event */
+    switchConfirm;
+    /** Success feedback event */
+    switchSuccess;
+    handleCheckedChange(newValue) {
+        if (this.autoSubmit) {
+            this.triggerFormSubmit();
+        }
+        if (this.showSuccessFeedback && newValue) {
+            this.triggerSuccessFeedback();
+        }
+    }
+    triggerFormSubmit() {
+        let form = null;
+        if (this.formId) {
+            form = document.getElementById(this.formId);
+        }
+        else {
+            // Find the parent form
+            form = this.el.closest('form');
+        }
+        if (form) {
+            const event = new window.Event('submit', { cancelable: true, bubbles: true });
+            form.dispatchEvent(event);
+            if (!event.defaultPrevented) {
+                form.submit();
+            }
+        }
+    }
+    handleChange = (event) => {
+        if (this.disabled || this.readonly || this.loading) {
+            event.preventDefault();
+            return;
+        }
+        const input = event.target;
+        const nextChecked = input.checked;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            input.indeterminate = false;
+        }
+        if (this.requireConfirmation) {
+            this.pendingValue = nextChecked;
+            this.showConfirmDialog = true;
+            input.checked = this.checked; // Revert visually until confirmed
+            return;
+        }
+        if (this.haptic && 'vibrate' in navigator) {
+            navigator.vibrate(this.checked ? 10 : 15);
+        }
+        if (this.async) {
+            // In async mode, we emit the event but do not toggle the internal state.
+            // The parent must manually update 'checked' once the operation succeeds.
+            this.switchChange.emit({ checked: nextChecked, value: this.value });
+            input.checked = this.checked; // Revert visually
+            this.internalLoading = true;
+            return;
+        }
+        this.applyToggle(nextChecked);
+    };
+    /**
+     * Public method to clear the internal loading state
+     * (Used after an async operation completes)
+     */
+    async stopAsyncLoading() {
+        this.internalLoading = false;
+    }
+    applyToggle(newChecked) {
+        if (this.checked !== newChecked) {
+            this.checked = newChecked;
+            if (this.checked)
+                this.triggerRipple();
+            this.switchChange.emit({ checked: this.checked, value: this.value });
+        }
+    }
+    triggerRipple() {
+        this.showRipple = true;
+        setTimeout(() => {
+            this.showRipple = false;
+        }, 600);
+    }
+    triggerSuccessFeedback() {
+        this.showingSuccess = true;
+        this.switchSuccess.emit();
+        setTimeout(() => {
+            this.showingSuccess = false;
+        }, 2000);
+    }
+    handleConfirm = () => {
+        this.showConfirmDialog = false;
+        this.switchConfirm.emit({ confirmed: true, value: this.pendingValue });
+        this.applyToggle(this.pendingValue);
+    };
+    handleCancel = () => {
+        this.showConfirmDialog = false;
+        this.switchConfirm.emit({ confirmed: false, value: this.pendingValue });
+    };
+    handleFocus = () => {
+        if (!this.disabled && !this.loading) {
+            this.isFocused = true;
+            this.switchFocus.emit();
+        }
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.switchBlur.emit();
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled || this.readonly || this.loading)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.triggerRipple();
+            this.applyToggle(!this.checked);
+        }
+    };
+    getIcon() {
+        if (this.loading) {
+            return (h("span", { class: "switch-spinner" }, h("ui-icon", { name: "refresh", library: this.iconLibrary, spin: true, size: "14px" })));
+        }
+        const currentImage = this.checked ? this.checkedImage : this.uncheckedImage;
+        if (currentImage) {
+            return (h("div", { class: "switch-image-container" }, h("img", { src: currentImage, class: "switch-thumb-image", alt: "status" })));
+        }
+        if (this.checked) {
+            if (this.iconOn)
+                return h("span", { class: "switch-icon" }, h("ui-icon", { name: this.iconOn, library: this.iconLibrary, size: "calc(var(--switch-thumb-size, 20px) * 0.6)" }));
+            if (this.showIcons || this.showDefaultIcons)
+                return h("span", { class: "switch-icon" }, h("ui-icon", { name: "checkmark", library: this.iconLibrary, size: "calc(var(--switch-thumb-size, 20px) * 0.6)" }));
+        }
+        else {
+            if (this.iconOff)
+                return h("span", { class: "switch-icon" }, h("ui-icon", { name: this.iconOff, library: this.iconLibrary, size: "calc(var(--switch-thumb-size, 20px) * 0.6)" }));
+            if (this.showIcons || this.showDefaultIcons)
+                return h("span", { class: "switch-icon" }, h("ui-icon", { name: "close", library: this.iconLibrary, size: "calc(var(--switch-thumb-size, 20px) * 0.6)" }));
+        }
+        return null;
+    }
+    renderTrackText() {
+        if (!this.showTrackText)
+            return null;
+        const text = this.checked ? (this.checkedText || 'ON') : (this.uncheckedText || 'OFF');
+        return h("span", { class: "switch-track-text" }, text);
+    }
+    renderHelperText() {
+        if (this.invalid && this.errorMessage) {
+            return (h("div", { class: "switch-helper-text switch-error-text" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "12px" }), h("span", null, this.errorMessage)));
+        }
+        if (this.helperText) {
+            return h("div", { class: "switch-helper-text" }, this.helperText);
+        }
+        return null;
+    }
+    renderTooltip() {
+        if (!this.showTooltip || !this.tooltipText || !this.isHovered)
+            return null;
+        return (h("div", { class: "switch-tooltip" }, this.tooltipText));
+    }
+    renderSuccessFeedback() {
+        if (!this.showingSuccess)
+            return null;
+        return (h("div", { class: "switch-success-feedback" }, h("ui-icon", { name: "check-circle", library: "lucide", size: "16px" })));
+    }
+    renderConfirmDialog() {
+        if (!this.showConfirmDialog)
+            return null;
+        return (h("div", { class: "switch-confirm-overlay", onClick: this.handleCancel }, h("div", { class: "switch-confirm-dialog", onClick: e => e.stopPropagation() }, h("div", { class: "confirm-message" }, this.confirmationMessage), h("div", { class: "confirm-actions" }, h("ui-button", { variant: "ghost", size: "sm", onClick: this.handleCancel, label: "Cancel" }), h("ui-button", { variant: "primary", size: "sm", onClick: this.handleConfirm, label: "Confirm" })))));
+    }
+    render() {
+        const labelElement = this.label && (h("span", { key: 'aaea5d41fe17902800129034edee86b1ba98d9e9', class: "switch-label" }, this.label, this.required && h("span", { key: '93e398287cfb42f1d43052d6f0492dc1cc1b7133', class: "switch-required" }, "*"), this.description && this.descriptionPosition === 'bottom' && (h("span", { key: '91cc70cec284734e944886bbf28deeafb161eec0', class: "switch-description-bottom" }, this.description))));
+        const sideDescription = this.description && this.descriptionPosition === 'side' && (h("span", { key: '5c6b858c2d9e135407a82a394f1472475bca1222', class: "switch-description-side" }, this.description));
+        const trackStyle = {};
+        if (this.gradient && this.gradientColors) {
+            try {
+                const colors = JSON.parse(this.gradientColors);
+                if (Array.isArray(colors) && colors.length >= 2) {
+                    trackStyle.background = `linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%)`;
+                }
+            }
+            catch (e) { }
+        }
+        const hostStyle = {};
+        if (this.width) {
+            hostStyle['--switch-track-width'] = this.width;
+        }
+        return (h(Host, { key: '41e4d34b8c2aa2ee57e25823ffc67ac5316ec3e6', style: hostStyle, class: {
+                'switch-host': true,
+                'switch-disabled': this.disabled || this.loading,
+                'switch-readonly': this.readonly,
+                'switch-checked': this.checked,
+                'switch-invalid': this.invalid,
+                'switch-focused': this.isFocused,
+                'switch-hovered': this.isHovered,
+                'switch-vertical': this.orientation === 'vertical',
+                'switch-animate': this.enableAnimation,
+                'switch-indeterminate': this.indeterminate,
+                'switch-glow': this.glow,
+                'switch-rtl': this.rtl,
+                [`switch-physics-${this.physics}`]: true,
+                [`switch-elevation-${this.elevation}`]: this.elevation > 0,
+                [`switch-color-${this.color}`]: true,
+                [`switch-${this.variant}`]: true,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '6684aba1b0aa8ebb37558a0c7aee00c0be7cb1e9', part: "container", class: {
+                'switch-container-outer': true,
+                [`switch-${this.size}`]: true,
+                [`switch-color-${this.color}`]: true,
+                [`switch-physics-${this.physics}`]: true,
+                [`switch-variant-${this.variant}`]: true,
+                [`switch-${this.shape}`]: true,
+                [`thumb-${this.thumbShape}`]: true,
+                'switch-checked': this.checked,
+                'switch-disabled': this.disabled,
+                'switch-readonly': this.readonly,
+                'switch-loading': this.loading || this.internalLoading,
+                'switch-error': this.invalid,
+                'switch-glow': this.glow && this.checked,
+                'switch-haptic': this.haptic,
+                'switch-rtl': this.rtl,
+                'switch-shaking': this.isShaking,
+                'switch-animate': this.enableAnimation,
+                'switch-indeterminate': this.indeterminate,
+            } }, h("label", { key: 'd8092db9b999f61d13ed28de07b51f0756b90203', part: "label", class: {
+                'switch-container': true,
+                [`switch-${this.size}`]: true,
+                [`switch-color-${this.color}`]: true,
+                [`switch-${this.variant}`]: true,
+                [`switch-${this.shape}`]: true,
+                [`thumb-${this.thumbShape}`]: true,
+                'switch-label-left': this.labelPosition === 'left',
+                'switch-label-right': this.labelPosition === 'right' || !this.labelPosition,
+            } }, this.labelPosition === 'left' && labelElement, h("div", { key: '45e4aebf40ca6590d98871188c95fc0cb7167820', part: "wrapper", class: "switch-wrapper" }, h("input", { key: '2f4f3b4641e4f2f8e53debbabc06ddedb57118a7', type: "checkbox", class: "switch-input", checked: this.checked, disabled: this.disabled || this.loading, readonly: this.readonly, name: this.name, value: this.value, required: this.required, tabindex: this.switchTabIndex, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-label": this.ariaLabel || this.label, "aria-checked": this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false'), "aria-disabled": (this.disabled || this.loading).toString(), "aria-invalid": this.invalid.toString(), ref: el => {
+                if (el && this.indeterminate)
+                    el.indeterminate = true;
+            } }), h("div", { key: 'affc51e292c88c6eca57e14ea23ef57c88ef1719', part: "track", class: {
+                'switch-track': true,
+                'switch-track-checked': this.checked,
+                'switch-track-disabled': this.disabled || this.loading,
+                'switch-gradient': this.gradient,
+            }, style: trackStyle }, this.renderTrackText(), h("div", { key: 'be816a97508c3ec53b08a9436079e7475017c503', part: "thumb", class: {
+                'switch-thumb': true,
+                'switch-thumb-checked': this.checked,
+                'switch-thumb-loading': this.loading,
+            } }, this.getIcon()), this.showRipple && h("div", { key: 'abc8476dd3e164ac6397443dfe46f89c244a8bdb', class: "switch-ripple" }), this.loading && h("div", { key: '049d77febd86e72fb513f4c8ba9012c31b0c55a9', class: "switch-loading-overlay" }))), this.labelPosition === 'right' && labelElement, sideDescription, this.renderSuccessFeedback()), this.renderHelperText(), this.renderTooltip()), this.renderConfirmDialog()));
+    }
+    static get is() { return "ui-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Readonly state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Invalid state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state (shows spinner)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "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 variant"
+                },
+                "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": "Semantic color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Material archetype variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom width for the switch track (e.g., '100px', 'auto')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the switch"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "labelPosition": {
+                "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": "Label position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level (0-5)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "0"
+            },
+            "thumbShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square'",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of the thumb"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thumb-shape",
+                "defaultValue": "'circle'"
+            },
+            "iconOff": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon when unchecked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-off"
+            },
+            "iconOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon when checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-on"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icons",
+                "defaultValue": "false"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Performance/Animation toggle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text below switch"
+                },
+                "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": "Error message when invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "checkedText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text on track when checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked-text",
+                "defaultValue": "''"
+            },
+            "uncheckedText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text on track when unchecked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unchecked-text",
+                "defaultValue": "''"
+            },
+            "showTrackText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show text symbols on track"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-track-text",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "formId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Associated form ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-id",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "physics": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'liquid' | 'stiff' | 'bouncy' | 'linear'",
+                    "resolved": "\"bouncy\" | \"linear\" | \"liquid\" | \"stiff\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation physics preset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "physics",
+                "defaultValue": "'liquid'"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Glow effect when active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glow",
+                "defaultValue": "false"
+            },
+            "requireConfirmation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Require confirmation before toggle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "require-confirmation",
+                "defaultValue": "false"
+            },
+            "confirmationMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Confirmation message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirmation-message",
+                "defaultValue": "'Are you sure you want to change this?'"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "showSuccessFeedback": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show success feedback after change"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-success-feedback",
+                "defaultValue": "false"
+            },
+            "switchTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "switch-tab-index",
+                "defaultValue": "0"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "gradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use gradient colors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient",
+                "defaultValue": "false"
+            },
+            "gradientColors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gradient colors (JSON array of strings)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient-colors",
+                "defaultValue": "''"
+            },
+            "autoSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-submit nearest form on change"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-submit",
+                "defaultValue": "false"
+            },
+            "showDefaultIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show check/cross icons by default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-default-icons",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required field indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "haptic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sensory vibration feedback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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'"
+            },
+            "checkedImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Image URL for checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked-image"
+            },
+            "uncheckedImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Image URL for unchecked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unchecked-image"
+            },
+            "async": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable async toggle mode (waits for external confirmation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "async",
+                "defaultValue": "false"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "false"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text",
+                "defaultValue": "''"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library to use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'ionicons'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalLoading": {},
+            "isShaking": {},
+            "isFocused": {},
+            "isHovered": {},
+            "showingSuccess": {},
+            "showConfirmDialog": {},
+            "pendingValue": {},
+            "showRipple": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "switchChange",
+                "name": "switchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value?: string }",
+                    "resolved": "{ checked: boolean; value?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "switchFocus",
+                "name": "switchFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "switchBlur",
+                "name": "switchBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "switchConfirm",
+                "name": "switchConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Confirmation event"
+                },
+                "complexType": {
+                    "original": "{ confirmed: boolean; value: boolean }",
+                    "resolved": "{ confirmed: boolean; value: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "switchSuccess",
+                "name": "switchSuccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Success feedback event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "shake": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Triggers a visual 'Shake' effect and haptic vibration pattern\r\nto indicate a rejected action or validation failure.",
+                    "tags": []
+                }
+            },
+            "stopAsyncLoading": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to clear the internal loading state\r\n(Used after an async operation completes)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }];
+    }
+}