atomicuilibrary 0.0.1 → 0.1.0

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

@@ -1,1001 +0,0 @@
-import { h } from "@stencil/core";
-export class CheckboxGroup {
-    /**
-     * Ensures value is always a string array
-     */
-    normalizeValue(val) {
-        if (Array.isArray(val))
-            return val;
-        if (typeof val === 'string')
-            return val ? val.split(',') : [];
-        return [];
-    }
-    el;
-    internals;
-    value = [];
-    name = '';
-    label = '';
-    helperText = '';
-    errorMessage = '';
-    required = false;
-    disabled = false;
-    readonly = false;
-    invalid = false;
-    orientation = 'vertical';
-    gap = '12px';
-    showSelectAll = false;
-    selectAllLabel = 'Select All';
-    buttonGroup = false;
-    min = 0;
-    max = Infinity;
-    validateOnChange = true;
-    size = 'md';
-    color = 'primary';
-    showSelectionCount = false;
-    /** Entrance animation */
-    reveal = 'none';
-    /** Delay for entry animation (ms) */
-    revealDelay = 0;
-    /** Stagger delay between items */
-    revealStagger = 60;
-    /** High-Fidelity: Victory glow pulse when all selected */
-    victoryGlow = false;
-    /** High-Fidelity: RTL support */
-    rtl = false;
-    selectAllState = 'none';
-    isVictory = false;
-    groupChange;
-    groupValidation;
-    componentWillLoad() {
-        this.internals = this.el.attachInternals();
-        this.updateFormValue();
-        this.discoverCheckboxes();
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-    }
-    /**
-     * Stencil form-association callback
-     */
-    formResetCallback() {
-        this.value = [];
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-        this.updateFormValue();
-    }
-    handleValueChange() {
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-    }
-    handleCheckboxChange(event) {
-        const { checked, value: checkboxValue } = event.detail;
-        if (this.disabled || this.readonly)
-            return;
-        let valueArr = this.normalizeValue(this.value);
-        if (checked) {
-            if (!valueArr.includes(checkboxValue)) {
-                if (this.max === Infinity || valueArr.length < this.max) {
-                    valueArr = [...valueArr, checkboxValue];
-                }
-            }
-        }
-        else {
-            valueArr = valueArr.filter(v => v !== checkboxValue);
-        }
-        this.value = valueArr;
-        this.groupChange.emit({ value: this.value });
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-        this.updateFormValue();
-    }
-    updateFormValue() {
-        if (this.name) {
-            const data = new FormData();
-            this.value.forEach(val => data.append(this.name, val));
-            this.internals.setFormValue(data);
-        }
-        else {
-            this.internals.setFormValue(this.value.join(','));
-        }
-    }
-    discoverCheckboxes() {
-        // This is no longer needed as we use getAllCheckboxes in real-time
-    }
-    updateCheckboxStates() {
-        const allCbs = this.getAllCheckboxes();
-        const valueArr = this.normalizeValue(this.value);
-        const isMaxReached = this.max !== Infinity && valueArr.length >= this.max;
-        allCbs.forEach((checkbox, index) => {
-            checkbox.checked = valueArr.includes(checkbox.value);
-            checkbox.disabled = this.disabled || (isMaxReached && !checkbox.checked) || checkbox.disabled;
-            checkbox.readonly = this.readonly;
-            checkbox.size = this.size;
-            checkbox.color = this.color;
-            checkbox.reveal = this.reveal;
-            checkbox.revealDelay = this.revealDelay + (index * this.revealStagger);
-            checkbox.rtl = this.rtl;
-            checkbox.isButton = this.buttonGroup;
-            if (this.name) {
-                checkbox.name = this.name;
-            }
-        });
-    }
-    getAllCheckboxes() {
-        const slotted = Array.from(this.el.querySelectorAll('ui-checkbox'));
-        // If we have options prop, we need to consider them too, but they are rendered as components
-        // Stencil's shadow DOM might make this tricky if they are inside. 
-        // Actually, we can just get them from the shadow root if they are rendered in renderDataOptions
-        const shadowCbs = Array.from(this.el.shadowRoot.querySelectorAll('ui-checkbox'));
-        return [...slotted, ...shadowCbs];
-    }
-    updateSelectAllState() {
-        const allCbs = this.getAllCheckboxes();
-        const valueArr = this.normalizeValue(this.value);
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        if (enabledCheckboxes.length === 0)
-            return;
-        const checkedCount = enabledCheckboxes.filter((cb) => valueArr.includes(cb.value)).length;
-        if (checkedCount === 0) {
-            this.selectAllState = 'none';
-            this.isVictory = false;
-        }
-        else if (checkedCount === enabledCheckboxes.length) {
-            this.selectAllState = 'all';
-            if (this.victoryGlow)
-                this.isVictory = true;
-        }
-        else {
-            this.selectAllState = 'some';
-            this.isVictory = false;
-        }
-    }
-    handleSelectAllChange = (event) => {
-        if (this.disabled || this.readonly)
-            return;
-        const target = event.target;
-        const allCbs = this.getAllCheckboxes();
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        if (target.checked) {
-            // Select all enabled checkboxes
-            const allValues = enabledCheckboxes.map((cb) => cb.value);
-            const uniqueValues = Array.from(new Set([...this.value, ...allValues]));
-            // Respect max limit
-            if (this.max !== Infinity) {
-                this.value = uniqueValues.slice(0, this.max);
-            }
-            else {
-                this.value = uniqueValues;
-            }
-        }
-        else {
-            // Deselect all
-            const enabledValues = enabledCheckboxes.map((cb) => cb.value);
-            this.value = this.value.filter(v => !enabledValues.includes(v));
-        }
-        this.groupChange.emit({ value: this.value });
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-    };
-    validate() {
-        const errors = [];
-        if (this.required && this.value.length === 0) {
-            errors.push('At least one option must be selected');
-        }
-        if (this.min > 0 && this.value.length < this.min) {
-            errors.push(`At least ${this.min} option${this.min > 1 ? 's' : ''} must be selected`);
-        }
-        if (this.max !== Infinity && this.value.length > this.max) {
-            errors.push(`No more than ${this.max} option${this.max > 1 ? 's' : ''} can be selected`);
-        }
-        const valid = errors.length === 0;
-        this.groupValidation.emit({ valid, errors });
-        return valid;
-    }
-    selectAll() {
-        const allCbs = this.getAllCheckboxes();
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        const allValues = enabledCheckboxes.map((cb) => cb.value);
-        if (this.max !== Infinity) {
-            this.value = allValues.slice(0, this.max);
-        }
-        else {
-            this.value = allValues;
-        }
-        this.groupChange.emit({ value: this.value });
-    }
-    deselectAll() {
-        this.value = [];
-        this.groupChange.emit({ value: this.value });
-    }
-    toggleAll() {
-        if (this.selectAllState === 'all') {
-            this.deselectAll();
-        }
-        else {
-            this.selectAll();
-        }
-    }
-    renderSelectAll() {
-        if (!this.showSelectAll)
-            return null;
-        return (h("div", { class: "select-all-container" }, h("ui-checkbox", { checked: this.selectAllState === 'all', indeterminate: this.selectAllState === 'some', label: this.selectAllLabel, disabled: this.disabled, readonly: this.readonly, size: this.size, color: this.color, rtl: this.rtl, onCheckboxChange: this.handleSelectAllChange })));
-    }
-    renderLabel() {
-        if (!this.label)
-            return null;
-        return (h("div", { class: "group-label" }, h("span", { class: "label-text" }, this.label, this.required && h("span", { class: "required-indicator" }, "*")), this.showSelectionCount && (h("span", { class: "selection-count" }, "(", this.value.length, this.max !== Infinity ? ` / ${this.max}` : '', " selected)"))));
-    }
-    renderHelperText() {
-        if (this.invalid && this.errorMessage) {
-            return (h("div", { class: "helper-text error" }, h("ui-icon", { name: "fa-exclamation-circle" }), this.errorMessage));
-        }
-        if (this.helperText) {
-            return h("div", { class: "helper-text" }, this.helperText);
-        }
-        if (this.min > 0 || this.max !== Infinity) {
-            const count = this.value.length;
-            let text = '';
-            if (this.min > 0 && this.max !== Infinity) {
-                text = `Select ${this.min}-${this.max} options (${count} selected)`;
-            }
-            else if (this.min > 0) {
-                text = `Select at least ${this.min} option${this.min > 1 ? 's' : ''} (${count} selected)`;
-            }
-            else if (this.max !== Infinity) {
-                text = `Select up to ${this.max} option${this.max > 1 ? 's' : ''} (${count} selected)`;
-            }
-            return h("div", { class: "helper-text" }, text);
-        }
-        return null;
-    }
-    options = [];
-    searchable = false;
-    searchPlaceholder = 'Search options...';
-    layout = 'list';
-    columns = 2; // For grid layout
-    searchQuery = '';
-    handleSearch = (e) => {
-        this.searchQuery = e.target.value.toLowerCase();
-    };
-    getFilteredOptions() {
-        if (!this.options || this.options.length === 0)
-            return [];
-        // Normalize options
-        const normalizedOptions = this.options.map(opt => typeof opt === 'string' ? { label: opt, value: opt, disabled: false } : opt);
-        if (!this.searchQuery)
-            return normalizedOptions;
-        return normalizedOptions.filter(opt => opt.label.toLowerCase().includes(this.searchQuery));
-    }
-    renderSearch() {
-        if (!this.searchable)
-            return null;
-        return (h("div", { class: {
-                'checkbox-search': true,
-                'search-active': this.searchQuery.length > 0
-            } }, h("div", { class: "search-input-wrapper" }, h("ui-icon", { name: "search", library: "lucide", class: "search-icon" }), h("input", { type: "text", placeholder: this.searchPlaceholder, onInput: this.handleSearch, value: this.searchQuery, class: "search-input" }), this.searchQuery.length > 0 && (h("ui-button", { variant: "ghost", class: "clear-search", onClick: () => { this.searchQuery = ''; }, icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))));
-    }
-    renderDataOptions() {
-        const visibleOptions = this.getFilteredOptions();
-        if (visibleOptions.length === 0 && this.searchQuery) {
-            return h("div", { class: "no-results" }, "No options found");
-        }
-        const valueArr = this.normalizeValue(this.value);
-        return visibleOptions.map((opt, index) => (h("ui-checkbox", { value: opt.value, label: opt.label, disabled: this.disabled || opt.disabled, readonly: this.readonly, size: this.size, color: this.color, variant: opt.variant || 'default', name: this.name, checked: valueArr.includes(opt.value), reveal: this.reveal, revealDelay: this.revealDelay + (index * this.revealStagger), rtl: this.rtl, isButton: this.buttonGroup, onCheckboxChange: this.handleCheckboxChange })));
-    }
-    render() {
-        const containerClasses = {
-            'checkbox-group': true,
-            [`checkbox-group-${this.orientation}`]: this.layout === 'list',
-            [`checkbox-group-grid`]: this.layout === 'grid',
-            [`checkbox-group-cols-${this.columns}`]: this.layout === 'grid',
-            [`checkbox-group-${this.size}`]: true,
-            'checkbox-group-disabled': this.disabled,
-            'checkbox-group-readonly': this.readonly,
-            'checkbox-group-invalid': this.invalid,
-            'checkbox-group-button': this.buttonGroup,
-            'is-victory': this.isVictory
-        };
-        const hasDataOptions = this.options && this.options.length > 0;
-        return (h("div", { key: '05a2da58c9dd7f3438076d3beb725f3596545cb6', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.renderLabel(), this.renderSearch(), this.renderSelectAll(), h("div", { key: '0a64f5ff1b6474c771059e6d856b42a48641d5a1', class: "checkbox-group-items", style: this.layout === 'grid' ? {
-                display: 'grid',
-                gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
-                gap: this.gap
-            } : { gap: this.gap }, role: "group", "aria-labelledby": this.label ? 'group-label' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.invalid ? 'true' : 'false' }, hasDataOptions ? this.renderDataOptions() : h("slot", null)), this.renderHelperText()));
-    }
-    static get is() { return "ui-checkbox-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["checkbox-group.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["checkbox-group.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "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": "''"
-            },
-            "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": "''"
-            },
-            "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"
-            },
-            "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"
-            },
-            "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"
-            },
-            "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": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "orientation",
-                "defaultValue": "'vertical'"
-            },
-            "gap": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "gap",
-                "defaultValue": "'12px'"
-            },
-            "showSelectAll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-select-all",
-                "defaultValue": "false"
-            },
-            "selectAllLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "select-all-label",
-                "defaultValue": "'Select All'"
-            },
-            "buttonGroup": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-group",
-                "defaultValue": "false"
-            },
-            "min": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min",
-                "defaultValue": "0"
-            },
-            "max": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max",
-                "defaultValue": "Infinity"
-            },
-            "validateOnChange": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "validate-on-change",
-                "defaultValue": "true"
-            },
-            "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": "'primary'"
-            },
-            "showSelectionCount": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-selection-count",
-                "defaultValue": "false"
-            },
-            "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": "Entrance animation"
-                },
-                "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"
-            },
-            "revealStagger": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Stagger delay between items"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "reveal-stagger",
-                "defaultValue": "60"
-            },
-            "victoryGlow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "High-Fidelity: Victory glow pulse when all selected"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "victory-glow",
-                "defaultValue": "false"
-            },
-            "rtl": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "High-Fidelity: RTL support"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rtl",
-                "defaultValue": "false"
-            },
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ label: string; value: string; disabled?: boolean }[] | string[]",
-                    "resolved": "string[] | { label: string; value: string; disabled?: boolean; }[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "searchable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchable",
-                "defaultValue": "false"
-            },
-            "searchPlaceholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "search-placeholder",
-                "defaultValue": "'Search options...'"
-            },
-            "layout": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'list' | 'grid'",
-                    "resolved": "\"grid\" | \"list\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "layout",
-                "defaultValue": "'list'"
-            },
-            "columns": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "columns",
-                "defaultValue": "2"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectAllState": {},
-            "isVictory": {},
-            "searchQuery": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "groupChange",
-                "name": "groupChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ value: string[]; }",
-                    "resolved": "{ value: string[]; }",
-                    "references": {}
-                }
-            }, {
-                "method": "groupValidation",
-                "name": "groupValidation",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ valid: boolean; errors: string[]; }",
-                    "resolved": "{ valid: boolean; errors: string[]; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "checkboxChange",
-                "method": "handleCheckboxChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}