atomicuilibrary 0.0.1

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

@@ -0,0 +1,1572 @@
+import { h } from "@stencil/core";
+export class ButtonToggleGroup {
+    el;
+    internals;
+    focusFrameId = null;
+    constructor() {
+        this.internals = this.el.attachInternals();
+    }
+    // Core props
+    value = '';
+    name = '';
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    label = '';
+    helperText = '';
+    errorMessage = '';
+    orientation = 'horizontal';
+    /** Size category (xxxs to xxxl) */
+    size = 'md';
+    /** Visual color (string or {from: string, to: string}) */
+    color = 'primary';
+    /** Visual variant (glass, raised, etc) */
+    variant = 'soft';
+    options = [];
+    fullWidth = false;
+    iconPosition = 'left';
+    iconLibrary = 'default';
+    library;
+    iconOnly = false;
+    mode = 'segmented';
+    buttonAction;
+    buttonActionLabel = 'Action';
+    keepButtonLabel = false;
+    customContent = false;
+    loading = false;
+    /** Button shape (rounded, pill, chip, etc) */
+    shape = 'rounded';
+    // Premium features
+    multiSelect = false;
+    batchActions = false;
+    searchEnabled = false;
+    exportEnabled = false;
+    importEnabled = false;
+    analyticsEnabled = false;
+    advancedTheme = '';
+    /** Entrance animation */
+    reveal = 'none';
+    /** Base delay for group reveal */
+    revealDelay = 0;
+    /** Stagger delay between items */
+    revealStagger = 50;
+    /** High-Fidelity: Indicator follows cursor slightly when near selection */
+    magneticIndicator = false;
+    /** RTL support */
+    rtl = false;
+    /** Allow buttons to wrap to new lines */
+    wrap = false;
+    width = '';
+    /** localStorage key for persisting selected value across reloads. Empty string disables persistence. */
+    persistKey = '';
+    // Internal state
+    buttons = [];
+    isDropdownOpen = false;
+    searchQuery = '';
+    selectedValues = [];
+    analytics = {};
+    focusIndex = -1;
+    ariaLive = '';
+    selectionIndicatorRef;
+    resizeObserver;
+    mutationObserver;
+    // Events
+    buttonToggleGroupChange;
+    buttonToggleGroupAction;
+    buttonToggleGroupBatch;
+    buttonToggleGroupSearch;
+    buttonToggleGroupExport;
+    buttonToggleGroupImport;
+    buttonToggleGroupAnalytics;
+    componentWillLoad() {
+        this.normalizeProps();
+        this.updateOptions();
+        this.syncButtons();
+        this.updateOptionsFromChildren();
+        if (this.persistKey) {
+            try {
+                const stored = localStorage.getItem(this.persistKey);
+                if (stored !== null)
+                    this.value = JSON.parse(stored);
+            }
+            catch { /* ignore */ }
+        }
+    }
+    componentDidLoad() {
+        if (this.mode === 'dropdown') {
+            document.addEventListener('click', this.handleClickOutside);
+        }
+        this.el.addEventListener('keydown', this.handleKeyDown);
+        // Gliding Indicator Setup
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+            this.resizeObserver.observe(this.el);
+        }
+        // Mutation Observer for light DOM children sync
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updateOptionsFromChildren());
+            this.mutationObserver.observe(this.el, { childList: true, subtree: true, attributes: true });
+        }
+        // Initial position
+        setTimeout(() => this.updateIndicator(), 100);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+        if (this.focusFrameId !== null) {
+            cancelAnimationFrame(this.focusFrameId);
+            this.focusFrameId = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    handleMouseMove = (ev) => {
+        if (!this.magneticIndicator || !this.selectionIndicatorRef || this.mode === 'dropdown' || this.multiSelect)
+            return;
+        const buttons = Array.from(this.el.shadowRoot?.querySelectorAll('ui-button') ?? []);
+        const selectedBtn = buttons.find((btn) => btn.value === this.value);
+        if (!selectedBtn)
+            return;
+        const rect = selectedBtn.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Calculate distance from center of selected button
+        const dist = Math.hypot(ev.clientX - centerX, ev.clientY - centerY);
+        if (dist < 150) {
+            const x = (ev.clientX - centerX) / 8;
+            const y = (ev.clientY - centerY) / 8;
+            const left = selectedBtn.offsetLeft;
+            const top = selectedBtn.offsetTop;
+            const inset = 4;
+            this.selectionIndicatorRef.style.transform = `translate(${left + x + inset}px, ${top + y + inset}px) scale(1.02)`;
+        }
+        else {
+            const left = selectedBtn.offsetLeft;
+            const top = selectedBtn.offsetTop;
+            const inset = 4;
+            this.selectionIndicatorRef.style.transform = `translate(${left + inset}px, ${top + inset}px) scale(1)`;
+        }
+    };
+    updateIndicator() {
+        if (!this.selectionIndicatorRef || this.mode === 'dropdown' || this.multiSelect)
+            return;
+        requestAnimationFrame(() => {
+            const buttons = Array.from(this.el.shadowRoot?.querySelectorAll('ui-button') ?? []);
+            const selectedBtn = buttons.find((btn) => btn.value === this.value);
+            if (selectedBtn) {
+                // Use offset-based positioning for better stability
+                const left = selectedBtn.offsetLeft;
+                const top = selectedBtn.offsetTop;
+                const width = selectedBtn.offsetWidth;
+                const height = selectedBtn.offsetHeight;
+                // Add a small inset for the 'floating' effect
+                const inset = 4;
+                this.selectionIndicatorRef.style.width = `${width - (inset * 2)}px`;
+                this.selectionIndicatorRef.style.height = `${height - (inset * 2)}px`;
+                this.selectionIndicatorRef.style.transform = `translate(${left + inset}px, ${top + inset}px)`;
+                this.selectionIndicatorRef.style.opacity = '1';
+                // Notify buttons to hide their own selection backgrounds
+                buttons.forEach((btn) => {
+                    btn.style.setProperty('--hide-button-selection', '1');
+                });
+            }
+            else {
+                this.selectionIndicatorRef.style.opacity = '0';
+                buttons.forEach((btn) => {
+                    btn.style.setProperty('--hide-button-selection', '0');
+                });
+            }
+        });
+    }
+    handleClickOutside = (event) => {
+        if (!this.el.contains(event.target)) {
+            this.isDropdownOpen = false;
+        }
+    };
+    componentDidUpdate() {
+        this.syncButtons();
+        this.updateIndicator();
+    }
+    watchValue() {
+        this.syncButtons();
+        if (this.analyticsEnabled)
+            this.trackAnalytics('change', this.value);
+        this.ariaLive = `Selection changed: ${Array.isArray(this.value) ? this.value.join(', ') : this.value}`;
+        this.internals.setFormValue(Array.isArray(this.value) ? this.value.join(',') : (this.value || ''));
+    }
+    handleColorChange() {
+        this.normalizeProps();
+    }
+    handleOptionsChange() {
+        this.updateOptions();
+    }
+    normalizeProps() {
+        try {
+            if (typeof this.color === 'string' && this.color.startsWith('{')) {
+                this.color = JSON.parse(this.color);
+            }
+            if (typeof this.options === 'string') {
+                this.buttons = JSON.parse(this.options);
+            }
+        }
+        catch (e) {
+            console.warn('Failed to parse complex button-toggle-group prop', e);
+        }
+    }
+    updateOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                this.buttons = JSON.parse(this.options);
+            }
+            catch {
+                console.error('Invalid options JSON');
+                this.buttons = [];
+            }
+        }
+        else if (Array.isArray(this.options) && this.options.length > 0) {
+            this.buttons = [...this.options];
+        }
+        else {
+            this.updateOptionsFromChildren();
+        }
+    }
+    updateOptionsFromChildren() {
+        const childNodes = Array.from(this.el.children);
+        if (childNodes.length === 0)
+            return;
+        const newButtons = childNodes
+            .filter(child => child.tagName.toLowerCase() === 'ui-button-toggle' || child.tagName.toLowerCase() === 'ui-button')
+            .map((child, idx) => {
+            const c = child;
+            return {
+                value: c.value || child.getAttribute('value') || `opt-${idx}`,
+                label: c.label || child.getAttribute('label') || child.textContent?.trim(),
+                icon: c.icon || child.getAttribute('icon'),
+                disabled: c.disabled || child.hasAttribute('disabled'),
+                description: c.description || child.getAttribute('description'),
+                descriptionPosition: c.descriptionPosition || child.getAttribute('description-position'),
+                iconLibrary: c.library || c.iconLibrary || child.getAttribute('icon-library') || child.getAttribute('library')
+            };
+        });
+        // Deep compare to avoid infinite updates
+        if (JSON.stringify(this.buttons) !== JSON.stringify(newButtons)) {
+            this.buttons = newButtons;
+        }
+    }
+    handleButtonToggleChange(event) {
+        const newValue = event.detail.value;
+        if (this.multiSelect) {
+            if (this.selectedValues.includes(newValue)) {
+                this.selectedValues = this.selectedValues.filter(v => v !== newValue);
+            }
+            else {
+                this.selectedValues = [...this.selectedValues, newValue];
+            }
+            this.value = [...this.selectedValues];
+            this.buttonToggleGroupChange.emit({ value: this.value });
+            this._persistValue();
+            if (this.analyticsEnabled)
+                this.trackAnalytics('multiSelect', this.value);
+            this.ariaLive = `Selection changed: ${this.selectedValues.join(', ')}`;
+        }
+        else {
+            if (this.value !== newValue) {
+                this.value = newValue;
+                this.syncButtons();
+                this.buttonToggleGroupChange.emit({ value: this.value });
+                this._persistValue();
+                if (this.analyticsEnabled)
+                    this.trackAnalytics('change', this.value);
+                this.ariaLive = `Selection changed: ${this.value}`;
+            }
+            else if (!this.required) {
+                this.value = '';
+                this.syncButtons();
+                this.buttonToggleGroupChange.emit({ value: this.value });
+                this._persistValue();
+                if (this.analyticsEnabled)
+                    this.trackAnalytics('deselect', this.value);
+                this.ariaLive = `Selection cleared`;
+            }
+        }
+    }
+    handleDropdownToggle = (event) => {
+        event.stopPropagation();
+        if (this.disabled || this.readonly)
+            return;
+        this.isDropdownOpen = !this.isDropdownOpen;
+    };
+    handleButtonAction = (event) => {
+        event.stopPropagation();
+        if (this.disabled || this.readonly)
+            return;
+        if (this.buttonAction) {
+            this.buttonAction();
+        }
+        this.buttonToggleGroupAction.emit({ value: this.value });
+    };
+    handleOptionSelect = (optionValue, event) => {
+        event.stopPropagation();
+        if (this.disabled || this.readonly)
+            return;
+        this.value = optionValue;
+        this.isDropdownOpen = false;
+        this.syncButtons();
+        this.buttonToggleGroupChange.emit({ value: this.value });
+        this._persistValue();
+    };
+    _persistValue() {
+        if (this.persistKey) {
+            try {
+                localStorage.setItem(this.persistKey, JSON.stringify(this.value));
+            }
+            catch { /* ignore */ }
+        }
+    }
+    syncButtons() {
+        const buttons = this.el.shadowRoot?.querySelectorAll('ui-button') ?? [];
+        if (this.multiSelect && Array.isArray(this.value)) {
+            buttons.forEach((button) => {
+                button.selected = this.value.includes(button.value);
+            });
+        }
+        else {
+            buttons.forEach((button) => {
+                button.selected = button.value === this.value;
+            });
+        }
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("div", { class: "button-group-label" }, this.label, this.required && h("span", { class: "required-indicator" }, "*"), this.searchEnabled && (h("ui-input", { class: "button-group-search", placeholder: "Search...", value: this.searchQuery, prefixIcon: "search", iconLibrary: this.iconLibrary, showClear: true, size: "sm", onInputChange: (e) => this.handleSearch(e.detail), onInputClear: () => this.handleSearch(''), "aria-label": "Search toggles" }))));
+    }
+    renderHelperText() {
+        if (this.invalid && this.errorMessage) {
+            return (h("div", { class: "helper-text error" }, h("ui-icon", { name: "exclamation-circle", library: "fontawesome", size: "14px" }), this.errorMessage));
+        }
+        if (this.helperText) {
+            return h("div", { class: "helper-text" }, this.helperText);
+        }
+        if (this.ariaLive) {
+            return h("div", { class: "sr-only", "aria-live": "polite" }, this.ariaLive);
+        }
+        return null;
+    }
+    getFilteredButtons() {
+        return this.searchEnabled && this.searchQuery
+            ? this.buttons.filter(opt => (opt.label || opt.value).toLowerCase().includes(this.searchQuery.toLowerCase()))
+            : this.buttons;
+    }
+    renderDropdownButton() {
+        const filteredButtons = this.getFilteredButtons();
+        const selectedOption = this.buttons.find(opt => opt.value === this.value);
+        // Use fixed label if keepButtonLabel is true, otherwise show selected option label
+        const displayLabel = this.keepButtonLabel ? this.buttonActionLabel : (selectedOption?.label || this.buttonActionLabel);
+        const displayIcon = this.keepButtonLabel ? null : selectedOption?.icon;
+        const buttonClasses = {
+            'dropdown-button': true,
+            'dropdown-button-open': this.isDropdownOpen,
+            'dropdown-button-disabled': this.disabled,
+            'dropdown-button-readonly': this.readonly,
+            [`dropdown-button-${this.size}`]: true,
+            [`dropdown-button-${this.color}`]: true,
+            [`dropdown-button-${this.variant}`]: true,
+            [`dropdown-button-${this.shape}`]: true,
+        };
+        const dropdownClasses = {
+            'dropdown-menu': true,
+            'dropdown-menu-open': this.isDropdownOpen,
+        };
+        return (h("div", { class: "dropdown-container" }, h("div", { class: buttonClasses }, h("ui-button", { variant: "ghost", class: "dropdown-action-button", onClick: this.handleButtonAction, disabled: this.disabled || this.loading, loading: this.loading, icon: displayIcon, iconLibrary: this.iconLibrary, label: displayLabel, size: this.size, color: this.color, justify: "center" }), h("ui-button", { variant: "ghost", class: "dropdown-toggle-button", onClick: this.handleDropdownToggle, disabled: this.disabled || this.loading, ariaLabel: this.isDropdownOpen ? 'Close dropdown' : 'Open dropdown', icon: this.isDropdownOpen ? 'chevron-up' : 'chevron-down', iconLibrary: "lucide", iconOnly: true, size: this.size, color: this.color })), h("div", { class: dropdownClasses }, this.searchEnabled && (h("div", { class: "dropdown-search" }, h("input", { type: "text", value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value, placeholder: "Search..." }))), this.customContent ? (h("div", { class: "dropdown-custom-content" }, h("slot", { name: "dropdown-content" }))) : (filteredButtons.map((option, idx) => {
+            const isSelected = this.value === option.value;
+            const optionClasses = {
+                'dropdown-option': true,
+                'dropdown-option-selected': isSelected,
+                'dropdown-option-disabled': option.disabled,
+            };
+            return (h("div", { class: optionClasses, onClick: (e) => !option.disabled && this.handleOptionSelect(option.value, e), role: "option", "aria-selected": isSelected.toString(), style: { '--index': idx.toString() } }, option.icon && (h("div", { class: "option-icon" }, h("ui-icon", { name: option.icon, library: option.iconLibrary || this.iconLibrary, size: "16px" }))), option.avatarSrc && (h("div", { class: "option-avatar" }, h("img", { src: option.avatarSrc, alt: option.avatarAlt || option.label }), option.status && h("span", { class: `status-dot status-${option.status}` }))), h("span", { class: "option-label" }, option.label || option.value), isSelected && (h("div", { class: "option-check" }, h("ui-icon", { name: "check", library: "lucide", size: "14px" })))));
+        })))));
+    }
+    render() {
+        const containerClasses = {
+            'ui-button-toggle-group': true,
+            [`group-${this.orientation}`]: true,
+            'group-disabled': this.disabled,
+            'group-invalid': this.invalid,
+            'group-full-width': this.fullWidth,
+            'group-rtl': this.rtl,
+            'group-multi-select': this.multiSelect,
+            'group-single-select': !this.multiSelect,
+            'group-dropdown-mode': this.mode === 'dropdown',
+            [`group-${this.color}`]: true,
+            [`group-variant-${this.variant}`]: true,
+            [`group-size-${this.size}`]: true,
+            [`group-shape-${this.shape}`]: true,
+            [`theme-${this.advancedTheme}`]: !!this.advancedTheme,
+            [`group-reveal-${this.reveal}`]: this.reveal !== 'none',
+        };
+        const buttonListClasses = {
+            'button-list': true,
+            [`button-list-${this.orientation}`]: true,
+        };
+        // Filter buttons by search
+        const filteredButtons = this.getFilteredButtons();
+        // Calculate dynamic theme colors based on the 'color' prop
+        let indicatorBg = 'var(--color-primary, #10b981)';
+        let indicatorColor = 'var(--color-primary-contrast, #ffffff)';
+        if (typeof this.color === 'string') {
+            if (this.color.startsWith('#') || this.color.startsWith('rgb')) {
+                indicatorBg = this.color;
+                // Simple contrast calculation for custom HEX
+                if (this.color.startsWith('#') && this.color.length === 7) {
+                    const r = parseInt(this.color.slice(1, 3), 16);
+                    const g = parseInt(this.color.slice(3, 5), 16);
+                    const b = parseInt(this.color.slice(5, 7), 16);
+                    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+                    indicatorColor = (yiq >= 128) ? '#1a1a1a' : '#ffffff';
+                }
+            }
+            else {
+                indicatorBg = `var(--color-${this.color})`;
+                indicatorColor = `var(--color-${this.color}-contrast, #ffffff)`;
+            }
+        }
+        else if (this.color && typeof this.color === 'object') {
+            const from = this.color.from || '#10b981';
+            const to = this.color.to || from;
+            indicatorBg = `linear-gradient(135deg, ${from}, ${to})`;
+            // For gradients, we default to white as it usually looks premium on vibrant colors
+            indicatorColor = '#ffffff';
+        }
+        const hostStyles = {
+            width: this.width,
+            '--indicator-bg': indicatorBg,
+            '--indicator-text-color': indicatorColor
+        };
+        return (h("div", { key: '2a8531e523b28208a24139e5424eaa90be9c7073', class: containerClasses, role: this.multiSelect ? 'group' : 'radiogroup', "aria-label": this.label, tabIndex: 0, style: hostStyles, onMouseMove: (e) => this.handleMouseMove(e), onMouseLeave: () => this.updateIndicator() }, this.renderLabel(), this.batchActions && (h("div", { key: 'e30632897c55499283fe0e6886bd7a3e7f590bad', class: "batch-actions" }, h("ui-button", { key: '407de40948622de1cc9e14fcdae9d9ce06d8ec8c', variant: "ghost", onClick: this.selectAll, disabled: this.disabled, label: "Select All", size: "sm" }), h("ui-button", { key: '19699cfd346bb5d7fa4bab0f56f0b8b55333d148', variant: "ghost", onClick: this.clearAll, disabled: this.disabled, label: "Clear All", size: "sm" }), this.exportEnabled && h("ui-button", { key: 'a3e66305b6edca7fc19394bd7413af5f5801fc5f', variant: "ghost", onClick: this.exportSelection, label: "Export", size: "sm" }), this.importEnabled && h("ui-button", { key: 'de9512a60ee5bfdef71b409f17be20f0c1d575a8', variant: "ghost", onClick: this.importSelection, label: "Import", size: "sm" }))), this.mode === 'dropdown' ? (this.renderDropdownButton()) : (h("div", { class: buttonListClasses }, !this.multiSelect && h("div", { class: "selection-indicator", ref: el => this.selectionIndicatorRef = el }), filteredButtons.map((option, idx) => (h("ui-button", { key: option.value, value: option.value, label: option.label, icon: option.icon, iconPosition: option.icon ? this.iconPosition : 'none', iconOnly: this.iconOnly, name: this.name, selected: this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, disabled: this.disabled || option.disabled, readonly: this.readonly, loading: this.loading, size: this.size, variant: this.variant, description: option.description, "description-position": option.descriptionPosition, "full-width": this.fullWidth, reveal: this.reveal, "reveal-delay": this.revealDelay + (idx * this.revealStagger), tabIndex: this.focusIndex === idx ? 0 : -1, "aria-checked": this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, "aria-label": option.label || option.value, onFocus: () => this.handleFocus(idx), onBlur: this.handleBlur, onClick: (e) => {
+                e.stopPropagation();
+                if (!this.disabled && !option.disabled) {
+                    this.handleButtonToggleChange({ detail: { value: option.value } });
+                }
+            }, shape: this.shape, iconLibrary: option.iconLibrary || this.library || this.iconLibrary }))))), this.renderHelperText(), this.analyticsEnabled && (h("div", { key: 'cefc7fae744e3cc636c5b014a53fbb3ac07051f2', class: "analytics-info" }, h("pre", { key: '00a1e53ab91350e9a5c7cc753e782f64a48e4f99' }, JSON.stringify(this.analytics, null, 2))))));
+    }
+    // Premium and accessibility methods
+    handleKeyDown = (e) => {
+        if (this.disabled || this.readonly)
+            return;
+        const filteredButtons = this.searchEnabled && this.searchQuery
+            ? this.buttons.filter(opt => (opt.label || opt.value).toLowerCase().includes(this.searchQuery.toLowerCase()))
+            : this.buttons;
+        if (filteredButtons.length === 0)
+            return;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            this.focusIndex = (this.focusIndex + 1) % filteredButtons.length;
+            this.focusButton(this.focusIndex);
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            this.focusIndex = (this.focusIndex - 1 + filteredButtons.length) % filteredButtons.length;
+            this.focusButton(this.focusIndex);
+            e.preventDefault();
+        }
+        else if (e.key === ' ' || e.key === 'Enter') {
+            const option = filteredButtons[this.focusIndex];
+            if (option && !option.disabled) {
+                this.handleButtonToggleChange({ detail: { value: option.value } });
+            }
+            e.preventDefault();
+        }
+    };
+    focusButton(idx) {
+        const buttonList = this.el.shadowRoot?.querySelectorAll('ui-button') ?? [];
+        if (buttonList[idx]) {
+            buttonList[idx].focus();
+        }
+    }
+    scheduleFocusIndexUpdate(nextIndex, shouldVerifyActiveElement = false) {
+        if (this.focusFrameId !== null) {
+            cancelAnimationFrame(this.focusFrameId);
+        }
+        this.focusFrameId = requestAnimationFrame(() => {
+            this.focusFrameId = null;
+            if (shouldVerifyActiveElement) {
+                const activeElement = this.el.shadowRoot?.activeElement || document.activeElement;
+                if (activeElement && this.el.contains(activeElement)) {
+                    return;
+                }
+            }
+            if (this.focusIndex !== nextIndex) {
+                this.focusIndex = nextIndex;
+            }
+        });
+    }
+    handleFocus(idx) {
+        this.scheduleFocusIndexUpdate(idx);
+    }
+    handleBlur = () => {
+        this.scheduleFocusIndexUpdate(-1, true);
+    };
+    handleSearch(query) {
+        this.searchQuery = query;
+        this.buttonToggleGroupSearch.emit({ query });
+    }
+    selectAll = () => {
+        if (!this.multiSelect)
+            return;
+        this.selectedValues = this.buttons.map(opt => opt.value);
+        this.value = [...this.selectedValues];
+        this.buttonToggleGroupBatch.emit({ values: this.selectedValues });
+        this.ariaLive = `All selected: ${this.selectedValues.join(', ')}`;
+    };
+    clearAll = () => {
+        if (!this.multiSelect)
+            return;
+        this.selectedValues = [];
+        this.value = [];
+        this.buttonToggleGroupBatch.emit({ values: [] });
+        this.ariaLive = `Selection cleared`;
+    };
+    exportSelection = () => {
+        if (!this.exportEnabled)
+            return;
+        let values;
+        if (this.multiSelect) {
+            values = Array.isArray(this.selectedValues) ? this.selectedValues : [];
+        }
+        else {
+            values = typeof this.value === 'string' ? [this.value] : [];
+        }
+        this.buttonToggleGroupExport.emit({ values });
+        this.ariaLive = `Exported: ${values.join(', ')}`;
+    };
+    importSelection = () => {
+        if (!this.importEnabled)
+            return;
+        // For demo, just select first two
+        this.selectedValues = this.buttons.slice(0, 2).map(opt => opt.value);
+        this.value = [...this.selectedValues];
+        this.buttonToggleGroupImport.emit({ values: this.selectedValues });
+        this.ariaLive = `Imported: ${this.selectedValues.join(', ')}`;
+    };
+    trackAnalytics(event, value) {
+        if (!this.analyticsEnabled)
+            return;
+        if (!this.analytics[event])
+            this.analytics[event] = [];
+        this.analytics[event].push({ value, timestamp: Date.now() });
+        this.buttonToggleGroupAnalytics.emit({ event, value });
+    }
+    static get is() { return "ui-button-toggle-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button-toggle-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button-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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size category (xxxs to xxxl)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | { from?: string; to?: string }",
+                    "resolved": "string | { from?: string; to?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual color (string or {from: string, to: string})"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant (glass, raised, etc)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'soft'"
+            },
+            "options": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<{ \r\n    value: string; \r\n    label?: string; \r\n    icon?: string; \r\n    iconLeft?: string; \r\n    iconRight?: string; \r\n    disabled?: boolean;\r\n    description?: string;\r\n    descriptionPosition?: any;\r\n    avatarSrc?: string;\r\n    avatarAlt?: string;\r\n    avatarStatus?: any;\r\n    status?: any;\r\n    iconLibrary?: any;\r\n  }> | string",
+                    "resolved": "string | { value: string; label?: string; icon?: string; iconLeft?: string; iconRight?: string; disabled?: boolean; description?: string; descriptionPosition?: any; avatarSrc?: string; avatarAlt?: string; avatarStatus?: any; status?: any; iconLibrary?: any; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "library": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "library"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'segmented' | 'dropdown'",
+                    "resolved": "\"dropdown\" | \"segmented\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'segmented'"
+            },
+            "buttonAction": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "buttonActionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-action-label",
+                "defaultValue": "'Action'"
+            },
+            "keepButtonLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keep-button-label",
+                "defaultValue": "false"
+            },
+            "customContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-content",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button shape (rounded, pill, chip, etc)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "batchActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "batch-actions",
+                "defaultValue": "false"
+            },
+            "searchEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-enabled",
+                "defaultValue": "false"
+            },
+            "exportEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "export-enabled",
+                "defaultValue": "false"
+            },
+            "importEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "import-enabled",
+                "defaultValue": "false"
+            },
+            "analyticsEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "analytics-enabled",
+                "defaultValue": "false"
+            },
+            "advancedTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "advanced-theme",
+                "defaultValue": "''"
+            },
+            "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": "Base delay for group reveal"
+                },
+                "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": "50"
+            },
+            "magneticIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Indicator follows cursor slightly when near selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic-indicator",
+                "defaultValue": "false"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow buttons to wrap to new lines"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "persistKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "localStorage key for persisting selected value across reloads. Empty string disables persistence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-key",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "buttons": {},
+            "isDropdownOpen": {},
+            "searchQuery": {},
+            "selectedValues": {},
+            "analytics": {},
+            "focusIndex": {},
+            "ariaLive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonToggleGroupChange",
+                "name": "buttonToggleGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string | string[]; }",
+                    "resolved": "{ value: string | string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupAction",
+                "name": "buttonToggleGroupAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string | string[]; }",
+                    "resolved": "{ value: string | string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupBatch",
+                "name": "buttonToggleGroupBatch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ values: string[] }",
+                    "resolved": "{ values: string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupSearch",
+                "name": "buttonToggleGroupSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string }",
+                    "resolved": "{ query: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupExport",
+                "name": "buttonToggleGroupExport",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ values: string[] }",
+                    "resolved": "{ values: string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupImport",
+                "name": "buttonToggleGroupImport",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ values: string[] }",
+                    "resolved": "{ values: string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonToggleGroupAnalytics",
+                "name": "buttonToggleGroupAnalytics",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "color",
+                "methodName": "handleColorChange"
+            }, {
+                "propName": "options",
+                "methodName": "handleOptionsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "buttonToggleChange",
+                "method": "handleButtonToggleChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}