atomicuilibrary 0.0.1

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

@@ -0,0 +1,1212 @@
+import { h, Host } from "@stencil/core";
+export class UIToggleGroup {
+    el;
+    /** Current selected value or array of values */
+    value = [];
+    /** Group name for forms */
+    name = '';
+    /** Disabled state for the entire group */
+    disabled = false;
+    /** Readonly state */
+    readonly = false;
+    /** Required field indicator */
+    required = false;
+    /** Invalid state */
+    invalid = false;
+    /** Group label */
+    label = '';
+    /** Helper text below group */
+    helperText = '';
+    /** Error message when invalid */
+    errorMessage = '';
+    /** Layout orientation */
+    layout = 'horizontal';
+    /** Grid columns count */
+    columns = 3;
+    /** Selection mode */
+    selectionMode = 'single';
+    /** Size passed to children */
+    size = 'md';
+    /** Semantic color passed to children */
+    color = 'primary';
+    /** Material archetype passed to children */
+    variant = 'solid';
+    /** Shape passed to children */
+    shape = 'default';
+    /** Options array (label, value, icon, disabled) */
+    options = [];
+    /** Label position for children */
+    labelPosition = 'right';
+    /** Show icons in children */
+    showIcons = false;
+    /** Enable animations */
+    enableAnimation = true;
+    /** Enable keyboard navigation */
+    keyboardNavigation = true;
+    /** Show select all/none controls (multiple mode only) */
+    showSelectAll = false;
+    /** Enable search/filter */
+    searchable = false;
+    /** Search placeholder text */
+    searchPlaceholder = 'Search toggles...';
+    /** Enable drag to reorder */
+    isDraggable = false;
+    /** Enable expand/collapse */
+    collapsible = false;
+    /** Initially collapsed */
+    collapsed = false;
+    /** Loading state */
+    loading = false;
+    /** Loading text */
+    loadingText = 'Loading options...';
+    /** Maximum selections (multiple mode) */
+    maxSelections = 0;
+    /** Show skeleton loading state */
+    showSkeleton = false;
+    /** Number of skeletons to show */
+    skeletonCount = 3;
+    /** Compact mode for tighter spacing */
+    compact = false;
+    items = [];
+    searchQuery = '';
+    focusedIndex = -1;
+    isCollapsed = false;
+    draggedIndex = -1;
+    dragOverIndex = -1;
+    /** Position and dimensions of the sliding indicator (segmented mode only) */
+    indicatorRect = { left: 0, top: 0, width: 0, height: 0, opacity: 0 };
+    listEl;
+    resizeObserver;
+    internals;
+    toggleGroupChange;
+    toggleGroupSearch;
+    toggleGroupReorder;
+    toggleGroupCollapse;
+    handleOptionsChange() {
+        this.parseOptions();
+    }
+    handleValueChange() {
+        this.syncToggles();
+        this.updateIndicator();
+    }
+    componentWillLoad() {
+        if (typeof this.el.attachInternals === 'function') {
+            this.internals = this.el.attachInternals();
+        }
+        this.parseOptions();
+        this.isCollapsed = this.collapsed;
+        // Ensure value is array for multiple mode if not already
+        if (this.selectionMode === 'multiple' && !Array.isArray(this.value)) {
+            this.value = this.value ? [this.value] : [];
+        }
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.internals) {
+            const val = Array.isArray(this.value) ? this.value.join(',') : this.value;
+            this.internals.setFormValue(val);
+        }
+    }
+    componentDidRender() {
+        this.updateIndicator();
+        if (!this.resizeObserver && this.el && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+            this.resizeObserver.observe(this.el);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    /**
+     * Recalculates the position of the sliding background indicator.
+     * Only active in 'segmented' variant for single-selection groups.
+     */
+    async updateIndicator() {
+        if (this.variant !== 'segmented' || !this.listEl || this.selectionMode === 'multiple') {
+            if (this.indicatorRect.opacity !== 0) {
+                this.indicatorRect = { ...this.indicatorRect, opacity: 0 };
+            }
+            return;
+        }
+        // Give the DOM a tiny moment to stabilize if called during layout changes
+        requestAnimationFrame(() => {
+            const selectedValue = this.value;
+            if (!selectedValue) {
+                this.indicatorRect = { ...this.indicatorRect, opacity: 0 };
+                return;
+            }
+            // Find the wrapper for the selected switch
+            const activeItem = this.listEl?.querySelector(`.toggle-item-wrapper[data-value="${selectedValue}"]`);
+            if (activeItem) {
+                this.indicatorRect = {
+                    left: activeItem.offsetLeft,
+                    top: activeItem.offsetTop,
+                    width: activeItem.offsetWidth,
+                    height: activeItem.offsetHeight,
+                    opacity: 1
+                };
+            }
+            else {
+                this.indicatorRect = { ...this.indicatorRect, opacity: 0 };
+            }
+        });
+    }
+    parseOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                this.items = JSON.parse(this.options);
+            }
+            catch (e) {
+                console.error('Invalid options JSON in ui-toggle-group');
+                this.items = [];
+            }
+        }
+        else {
+            this.items = [...(this.options || [])];
+        }
+    }
+    handleSwitchChange(event) {
+        event.stopPropagation();
+        const newValue = event.detail.value;
+        const isChecked = event.detail.checked;
+        if (this.selectionMode === 'single') {
+            if (isChecked) {
+                this.value = newValue;
+            }
+            else if (!this.required) {
+                this.value = '';
+            }
+        }
+        else {
+            let values = Array.isArray(this.value) ? [...this.value] : [];
+            if (isChecked) {
+                if (this.maxSelections > 0 && values.length >= this.maxSelections) {
+                    // Prevent selection if max reached
+                    event.target.checked = false;
+                    return;
+                }
+                if (!values.includes(newValue))
+                    values.push(newValue);
+            }
+            else {
+                values = values.filter(v => v !== newValue);
+            }
+            this.value = values;
+        }
+        this.toggleGroupChange.emit({ value: this.value });
+        this.syncToggles();
+        this.updateFormValue();
+    }
+    syncToggles() {
+        const switches = this.el.shadowRoot?.querySelectorAll('ui-switch');
+        switches?.forEach((sw) => {
+            if (this.selectionMode === 'single') {
+                sw.checked = sw.value === this.value;
+            }
+            else {
+                const vals = Array.isArray(this.value) ? this.value : [];
+                sw.checked = vals.includes(sw.value);
+            }
+        });
+    }
+    handleSearch = (e) => {
+        this.searchQuery = e.detail.toLowerCase();
+        const results = this.getFilteredItems();
+        this.toggleGroupSearch.emit({ query: this.searchQuery, results });
+    };
+    getFilteredItems() {
+        if (!this.searchQuery)
+            return this.items;
+        return this.items.filter(item => item.label?.toLowerCase().includes(this.searchQuery) ||
+            item.value?.toLowerCase().includes(this.searchQuery));
+    }
+    handleSelectAll = (select) => {
+        if (this.selectionMode !== 'multiple')
+            return;
+        if (select) {
+            const allValues = this.items.map(i => i.value);
+            this.value = this.maxSelections > 0 ? allValues.slice(0, this.maxSelections) : allValues;
+        }
+        else {
+            this.value = [];
+        }
+        this.toggleGroupChange.emit({ value: this.value });
+        this.syncToggles();
+        this.updateFormValue();
+    };
+    toggleCollapse = () => {
+        this.isCollapsed = !this.isCollapsed;
+        this.toggleGroupCollapse.emit({ collapsed: this.isCollapsed });
+    };
+    // --- Drag & Drop ---
+    onDragStart = (idx) => {
+        if (!this.isDraggable)
+            return;
+        this.draggedIndex = idx;
+    };
+    onDragOver = (e, idx) => {
+        if (!this.isDraggable)
+            return;
+        e.preventDefault();
+        this.dragOverIndex = idx;
+    };
+    onDrop = (idx) => {
+        if (!this.isDraggable || this.draggedIndex === -1)
+            return;
+        const newItems = [...this.items];
+        const item = newItems.splice(this.draggedIndex, 1)[0];
+        newItems.splice(idx, 0, item);
+        this.items = newItems;
+        this.toggleGroupReorder.emit({ oldIndex: this.draggedIndex, newIndex: idx, items: newItems });
+        this.draggedIndex = -1;
+        this.dragOverIndex = -1;
+    };
+    handleKeyDown = (e) => {
+        if (!this.keyboardNavigation)
+            return;
+        const filtered = this.getFilteredItems();
+        if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            this.focusedIndex = (this.focusedIndex + 1) % filtered.length;
+        }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this.focusedIndex = (this.focusedIndex - 1 + filtered.length) % filtered.length;
+        }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (this.focusedIndex !== -1) {
+                const item = filtered[this.focusedIndex];
+                this.toggleItemValue(item.value);
+            }
+        }
+    };
+    toggleItemValue(itemValue) {
+        if (this.selectionMode === 'single') {
+            this.value = itemValue;
+        }
+        else {
+            let vals = Array.isArray(this.value) ? [...this.value] : [];
+            if (vals.includes(itemValue)) {
+                vals = vals.filter(v => v !== itemValue);
+            }
+            else {
+                if (this.maxSelections === 0 || vals.length < this.maxSelections) {
+                    vals.push(itemValue);
+                }
+            }
+            this.value = vals;
+        }
+        this.toggleGroupChange.emit({ value: this.value });
+        this.syncToggles();
+        this.updateFormValue();
+    }
+    // --- Render Helpers ---
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("div", { class: "toggle-group-header" }, h("label", { class: "toggle-group-label" }, this.label, this.required && h("span", { class: "required" }, "*")), this.collapsible && (h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, icon: this.isCollapsed ? 'chevron-down' : 'chevron-up', iconLibrary: "lucide", iconSize: "16px", onClick: this.toggleCollapse, ariaLabel: this.isCollapsed ? 'Expand' : 'Collapse' }))));
+    }
+    renderSearch() {
+        if (!this.searchable)
+            return null;
+        return (h("div", { class: "search-container" }, h("ui-icon", { name: "search", library: "lucide", size: "14px", class: "search-icon" }), h("ui-input", { type: "text", placeholder: this.searchPlaceholder, onInputChange: this.handleSearch, value: this.searchQuery, size: "sm", fullWidth: true })));
+    }
+    renderControls() {
+        if (!this.showSelectAll || this.selectionMode !== 'multiple')
+            return null;
+        return (h("div", { class: "group-controls" }, h("ui-button", { variant: "ghost", size: "sm", onClick: () => this.handleSelectAll(true), icon: "check-circle", iconLibrary: "lucide", iconSize: "14px", label: "Select All", ariaLabel: "Select All" }), h("ui-button", { variant: "ghost", size: "sm", onClick: () => this.handleSelectAll(false), icon: "x-circle", iconLibrary: "lucide", iconSize: "14px", label: "Deselect All", ariaLabel: "Deselect All" }), this.maxSelections > 0 && h("span", { class: "max-badge" }, "Max: ", this.maxSelections)));
+    }
+    renderLoading() {
+        if (this.showSkeleton) {
+            return (h("div", { class: "skeleton-container" }, Array.from({ length: this.skeletonCount }).map(() => (h("div", { class: "skeleton-item" }, h("div", { class: "skeleton-switch" }), h("div", { class: "skeleton-text" }))))));
+        }
+        if (this.loading) {
+            return h("div", { class: "loading-container" }, h("ui-icon", { name: "refresh", spin: true }), " ", this.loadingText);
+        }
+        return null;
+    }
+    render() {
+        const isChecked = (val) => {
+            if (this.selectionMode === 'single')
+                return this.value === val;
+            return Array.isArray(this.value) && this.value.includes(val);
+        };
+        const filtered = this.getFilteredItems();
+        return (h(Host, { class: {
+                'toggle-group-host': true,
+                'group-disabled': this.disabled,
+                'group-invalid': this.invalid,
+                'group-collapsed': this.isCollapsed,
+                'group-compact': this.compact,
+            }, onKeyDown: this.handleKeyDown }, this.renderLabel(), this.renderSearch(), this.renderControls(), (this.loading || this.showSkeleton) ? this.renderLoading() : (!this.isCollapsed && (h("div", { class: {
+                'toggle-list': true,
+                [`layout-${this.layout}`]: true,
+                'is-segmented': this.variant === 'segmented'
+            }, style: this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}, ref: (el) => this.listEl = el }, this.variant === 'segmented' && (h("div", { class: "segmented-indicator", style: {
+                transform: `translate3d(${this.indicatorRect.left}px, ${this.indicatorRect.top}px, 0)`,
+                width: `${this.indicatorRect.width}px`,
+                height: `${this.indicatorRect.height}px`,
+                opacity: `${this.indicatorRect.opacity}`,
+                backgroundColor: `var(--toggle-group-${this.color})`
+            } })), filtered.map((opt, idx) => (h("div", { class: {
+                'toggle-item-wrapper': true,
+                'is-dragging': this.draggedIndex === idx,
+                'is-drag-over': this.dragOverIndex === idx,
+                'is-focused': this.focusedIndex === idx,
+                'is-active': isChecked(opt.value) && this.variant === 'segmented'
+            }, "data-value": opt.value, onClick: () => this.toggleItemValue(opt.value), draggable: this.isDraggable, onDragStart: () => this.onDragStart(idx), onDragOver: (e) => this.onDragOver(e, idx), onDrop: () => this.onDrop(idx) }, this.isDraggable && h("ui-icon", { name: "menu", class: "drag-handle" }), h("ui-switch", { value: opt.value, label: opt.label, "icon-on": opt.icon, disabled: this.disabled || opt.disabled, checked: isChecked(opt.value), size: this.size, color: this.color, variant: this.variant, shape: this.shape, "label-position": this.labelPosition, "show-icons": this.showIcons, "enable-animation": this.enableAnimation, readonly: this.readonly }))))))), this.invalid && this.errorMessage && (h("div", { class: "error-message" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "14px" }), this.errorMessage)), this.helperText && !this.invalid && h("div", { class: "helper-text" }, this.helperText)));
+    }
+    static get is() { return "ui-toggle-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected value or array of values"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "[]"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group name for forms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state for the entire group"
+                },
+                "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"
+            },
+            "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"
+            },
+            "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"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group label"
+                },
+                "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": "Helper text below group"
+                },
+                "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": "''"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation | 'grid'",
+                    "resolved": "\"grid\" | \"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": "Layout orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid columns count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "3"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectionMode",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
+                    "references": {
+                        "SelectionMode": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::SelectionMode",
+                            "referenceLocation": "SelectionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
+            },
+            "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 passed to children"
+                },
+                "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 passed to children"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToggleVariant",
+                    "resolved": "\"glass\" | \"outlined\" | \"raised\" | \"segmented\" | \"solid\"",
+                    "references": {
+                        "ToggleVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ToggleVariant",
+                            "referenceLocation": "ToggleVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Material archetype passed to children"
+                },
+                "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 passed to children"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ value: string; label: string; icon?: string; disabled?: boolean; }> | string",
+                    "resolved": "string | { value: string; label: string; icon?: string; disabled?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array (label, value, icon, disabled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "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 for children"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show icons in children"
+                },
+                "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": "Enable animations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "keyboardNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-navigation",
+                "defaultValue": "true"
+            },
+            "showSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show select all/none controls (multiple mode only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-select-all",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable search/filter"
+                },
+                "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": "Search placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search toggles...'"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable drag to reorder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable expand/collapse"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "loadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-text",
+                "defaultValue": "'Loading options...'"
+            },
+            "maxSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selections (multiple mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-selections",
+                "defaultValue": "0"
+            },
+            "showSkeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-skeleton",
+                "defaultValue": "false"
+            },
+            "skeletonCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of skeletons to show"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton-count",
+                "defaultValue": "3"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact mode for tighter spacing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {},
+            "searchQuery": {},
+            "focusedIndex": {},
+            "isCollapsed": {},
+            "draggedIndex": {},
+            "dragOverIndex": {},
+            "indicatorRect": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleGroupChange",
+                "name": "toggleGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string | string[]; }",
+                    "resolved": "{ value: string | string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "toggleGroupSearch",
+                "name": "toggleGroupSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; results: any[] }",
+                    "resolved": "{ query: string; results: any[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "toggleGroupReorder",
+                "name": "toggleGroupReorder",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ oldIndex: number; newIndex: number; items: any[] }",
+                    "resolved": "{ oldIndex: number; newIndex: number; items: any[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "toggleGroupCollapse",
+                "name": "toggleGroupCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ collapsed: boolean }",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "updateIndicator": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Recalculates the position of the sliding background indicator.\r\nOnly active in 'segmented' variant for single-selection groups.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "switchChange",
+                "method": "handleSwitchChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}