atomicuilibrary 0.0.1

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

@@ -0,0 +1,1001 @@
+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
+            }];
+    }
+}