atomicuilibrary 0.0.1

package/dist/collection/components/toolbar/toolbar.js

@@ -0,0 +1,1635 @@
+import { h, Host, } from "@stencil/core";
+export class Toolbar {
+    el;
+    // ─── Configuration ─────────────────────────────────────────────────────────
+    /**
+     * JSON string or object describing the full toolbar layout.
+     * Schema: { left?: ToolbarItem[], center?: ToolbarItem[], right?: ToolbarItem[] }
+     */
+    schema = null;
+    /** Flat list of items (all rendered in the main content zone). */
+    items = [];
+    /** Visual variant of the toolbar. */
+    variant = 'default';
+    /** Size of toolbar items. */
+    size = 'md';
+    /** Orientation: horizontal or vertical. */
+    orientation = 'horizontal';
+    /** Positioning strategy. */
+    position = 'static';
+    /** Which edge to stick to when position is sticky or fixed. */
+    stickyEdge = 'top';
+    /** Alignment of items along the main axis. */
+    alignment = 'start';
+    /** Gap between items (CSS value). */
+    gap = '4px';
+    /** Padding inside the toolbar (CSS value). */
+    padding = '8px 12px';
+    /** Maximum height (horizontal) or width (vertical) (CSS value). */
+    maxSize;
+    /** Overflow handling strategy. */
+    overflowStrategy = 'dropdown';
+    /** Label for the overflow "More" button. */
+    overflowLabel = 'More';
+    /** Icon for the overflow more button. */
+    overflowIcon = 'more-horizontal';
+    /** Default icon library for items that don't specify one. */
+    iconLibrary = 'lucide';
+    /** Whether the toolbar is in a disabled state. */
+    disabled = false;
+    /** Whether the toolbar is in a loading state. */
+    loading = false;
+    /** Show dividers between zones (left/center/right). */
+    zoneDividers = false;
+    /** Rounded corners for the whole bar. */
+    rounded = false;
+    /** Elevation shadow level (0–4). */
+    elevation = 1;
+    /** Enable drag-and-drop reordering of toolbar items. */
+    reorderable = false;
+    /** Enable keyboard navigation across items. */
+    keyboardNav = true;
+    /** Accessible label for the toolbar element. */
+    toolbarAriaLabel = 'Toolbar';
+    /** Show a border around the toolbar. */
+    bordered = false;
+    /** Make label hidden (icon-only) for button items by default. */
+    iconOnly = false;
+    /** Debounce time in ms for input/search items. */
+    inputDebounce = 300;
+    // ─── State ─────────────────────────────────────────────────────────────────
+    overflowedIds = new Set();
+    isOverflowOpen = false;
+    itemStates = new Map();
+    dragSourceId = null;
+    parsedSchema = null;
+    parsedItems = [];
+    isMobile = false;
+    isCollapsed = false;
+    openChildDropdowns = 0;
+    // ─── Events ────────────────────────────────────────────────────────────────
+    /** Fired when a button or clickable item is activated. */
+    toolbarItemClick;
+    /** Fired when an input, dropdown, toggle, or switch value changes. */
+    toolbarItemChange;
+    /** Fired when the visible/overflowed item set changes. */
+    toolbarOverflowChange;
+    /** Fired after a drag-and-drop reorder. */
+    toolbarReorder;
+    // ─── Internals ─────────────────────────────────────────────────────────────
+    resizeObserver;
+    toolbarBodyRef;
+    inputDebounceTimers = new Map();
+    undoStack = [];
+    redoStack = [];
+    focusableRefs = new Map();
+    mobileBreakpoint = 640;
+    // ─── Lifecycle ─────────────────────────────────────────────────────────────
+    componentWillLoad() {
+        this.parseItems();
+        this.parseSchema();
+        this.initItemStates();
+        this.isMobile = window.innerWidth <= this.mobileBreakpoint;
+    }
+    componentDidLoad() {
+        if (this.overflowStrategy === 'dropdown' && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.recalcOverflow());
+            this.resizeObserver.observe(this.el);
+        }
+        requestAnimationFrame(() => this.recalcOverflow());
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.inputDebounceTimers.forEach(t => clearTimeout(t));
+    }
+    // ─── Watchers ──────────────────────────────────────────────────────────────
+    onItemsChange() { this.parseItems(); this.initItemStates(); requestAnimationFrame(() => this.recalcOverflow()); }
+    onSchemaChange() { this.parseSchema(); this.initItemStates(); requestAnimationFrame(() => this.recalcOverflow()); }
+    // ─── Listeners ─────────────────────────────────────────────────────────────
+    onDocumentClick(e) {
+        if (this.isOverflowOpen && e.target instanceof Node && !this.el.contains(e.target)) {
+            this.isOverflowOpen = false;
+        }
+    }
+    onKeyDown(e) {
+        if (!this.keyboardNav)
+            return;
+        const focusable = Array.from(this.focusableRefs.values()).filter(el => el && !el.hasAttribute('disabled'));
+        const idx = focusable.indexOf(document.activeElement);
+        if (this.orientation === 'horizontal') {
+            if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                focusable[(idx + 1) % focusable.length]?.focus();
+            }
+            else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                focusable[(idx - 1 + focusable.length) % focusable.length]?.focus();
+            }
+        }
+        else {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                focusable[(idx + 1) % focusable.length]?.focus();
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                focusable[(idx - 1 + focusable.length) % focusable.length]?.focus();
+            }
+        }
+        if (e.key === 'Escape')
+            this.isOverflowOpen = false;
+    }
+    onChildDropdownOpen(e) {
+        const target = e.target;
+        if (!target || target.tagName?.toLowerCase() !== 'ui-dropdown' || !this.el.contains(target))
+            return;
+        this.openChildDropdowns += 1;
+    }
+    onChildDropdownClose(e) {
+        const target = e.target;
+        if (!target || target.tagName?.toLowerCase() !== 'ui-dropdown' || !this.el.contains(target))
+            return;
+        this.openChildDropdowns = Math.max(0, this.openChildDropdowns - 1);
+    }
+    // ─── Public Methods ────────────────────────────────────────────────────────
+    /** Programmatically set the value of any item by id. */
+    async setItemValue(id, value) {
+        const prev = this.itemStates.get(id)?.value;
+        this.itemStates = new Map(this.itemStates.set(id, { ...this.itemStates.get(id), id, value }));
+        const item = this.findItem(id);
+        if (item)
+            this.toolbarItemChange.emit({ item, value, previousValue: prev });
+    }
+    /** Get the current value of an item by id. */
+    async getItemValue(id) {
+        return this.itemStates.get(id)?.value;
+    }
+    /** Disable or enable an item by id. */
+    async setItemDisabled(id, disabled) {
+        this.itemStates = new Map(this.itemStates.set(id, { ...this.itemStates.get(id), id, disabled }));
+    }
+    /** Toggle visibility of an item. */
+    async setItemHidden(id, hidden) {
+        this.itemStates = new Map(this.itemStates.set(id, { ...this.itemStates.get(id), id, hidden }));
+        requestAnimationFrame(() => this.recalcOverflow());
+    }
+    /** Set loading state on a specific button item. */
+    async setItemLoading(id, loading) {
+        this.itemStates = new Map(this.itemStates.set(id, { ...this.itemStates.get(id), id, loading }));
+    }
+    /** Toggle active state of a toggleable button. */
+    async toggleItem(id) {
+        const current = this.itemStates.get(id) ?? { id };
+        this.itemStates = new Map(this.itemStates.set(id, { ...current, active: !current.active }));
+    }
+    /** Collapse / expand the toolbar (mobile). */
+    async setCollapsed(collapsed) {
+        this.isCollapsed = collapsed;
+    }
+    /** Open or close the overflow menu. */
+    async setOverflowOpen(open) {
+        this.isOverflowOpen = open;
+    }
+    /** Get a snapshot of current toolbar state. */
+    async getStateSnapshot() {
+        const snapshot = {
+            activeItems: Array.from(this.itemStates.entries()).filter(([, s]) => s.active).map(([id]) => id),
+            itemStates: Object.fromEntries(this.itemStates),
+            timestamp: Date.now(),
+        };
+        return snapshot;
+    }
+    async restoreStateSnapshot(snapshot) {
+        this.itemStates = new Map(Object.entries(snapshot.itemStates));
+        requestAnimationFrame(() => this.recalcOverflow());
+    }
+    /** Undo last value change. */
+    async undo() {
+        const prev = this.undoStack.pop();
+        if (!prev)
+            return;
+        const current = await this.getStateSnapshot();
+        this.redoStack.push(current);
+        await this.restoreStateSnapshot(prev);
+    }
+    /** Redo last undone change. */
+    async redo() {
+        const next = this.redoStack.pop();
+        if (!next)
+            return;
+        const current = await this.getStateSnapshot();
+        this.undoStack.push(current);
+        await this.restoreStateSnapshot(next);
+    }
+    /** Focus a specific toolbar item by id. */
+    async focusItem(id) {
+        this.focusableRefs.get(id)?.focus();
+    }
+    // ─── Private helpers ───────────────────────────────────────────────────────
+    parseItems() {
+        if (!this.items) {
+            this.parsedItems = [];
+            return;
+        }
+        if (typeof this.items === 'string') {
+            try {
+                this.parsedItems = JSON.parse(this.items);
+            }
+            catch {
+                this.parsedItems = [];
+            }
+        }
+        else {
+            this.parsedItems = this.items;
+        }
+    }
+    parseSchema() {
+        if (!this.schema) {
+            this.parsedSchema = null;
+            return;
+        }
+        if (typeof this.schema === 'string') {
+            try {
+                this.parsedSchema = JSON.parse(this.schema);
+            }
+            catch {
+                this.parsedSchema = null;
+            }
+        }
+        else {
+            this.parsedSchema = this.schema;
+        }
+    }
+    initItemStates() {
+        const allItems = this.getAllItems();
+        allItems.forEach(item => {
+            if (!this.itemStates.has(item.id)) {
+                const state = { id: item.id, disabled: item.disabled };
+                if ('value' in item)
+                    state.value = item.value;
+                if ('checked' in item)
+                    state.value = item.checked;
+                if ('active' in item)
+                    state.active = item.active;
+                this.itemStates.set(item.id, state);
+            }
+        });
+    }
+    getAllItems() {
+        const flat = [];
+        const collect = (items) => {
+            items?.forEach(item => {
+                flat.push(item);
+                if (item.type === 'group')
+                    collect(item.items);
+            });
+        };
+        if (this.parsedSchema) {
+            collect(this.parsedSchema.left ?? []);
+            collect(this.parsedSchema.center ?? []);
+            collect(this.parsedSchema.right ?? []);
+            collect(this.parsedSchema.overflow ?? []);
+        }
+        else {
+            collect(this.parsedItems);
+        }
+        return flat;
+    }
+    findItem(id) {
+        return this.getAllItems().find(i => i.id === id) ?? null;
+    }
+    recalcOverflow() {
+        if (this.overflowStrategy !== 'dropdown')
+            return;
+        const toolbar = this.toolbarBodyRef;
+        if (!toolbar)
+            return;
+        const newOverflowed = new Set();
+        this.isMobile = window.innerWidth <= this.mobileBreakpoint;
+        if (this.isMobile && this.isCollapsed) {
+            // In collapsed mobile mode, everything overflows
+            this.getAllItems().forEach(i => {
+                if (i.type !== 'separator' && i.type !== 'spacer')
+                    newOverflowed.add(i.id);
+            });
+        }
+        else {
+            const isHorizontal = this.orientation === 'horizontal';
+            const containerSize = isHorizontal ? toolbar.clientWidth : toolbar.clientHeight;
+            const overflowBtnSize = 48; // reserve space for the "More" button
+            let usedSize = 0;
+            // Sort by priority descending so high-priority items get space first
+            const sortedItems = [...this.getAllItems()]
+                .filter(i => i.type !== 'separator' && i.type !== 'spacer')
+                .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+            sortedItems.forEach(item => {
+                if (this.itemStates.get(item.id)?.hidden)
+                    return;
+                const el = this.el.shadowRoot?.querySelector(`[data-item-id="${item.id}"]`);
+                if (!el)
+                    return;
+                const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
+                usedSize += size + 4; // +4 for gap
+                if (usedSize > containerSize - overflowBtnSize && !item.pinToOverflow) {
+                    newOverflowed.add(item.id);
+                }
+            });
+        }
+        const prevOverflowed = this.overflowedIds;
+        if (JSON.stringify([...newOverflowed].sort()) !== JSON.stringify([...prevOverflowed].sort())) {
+            this.overflowedIds = newOverflowed;
+            this.toolbarOverflowChange.emit({
+                overflowIds: [...newOverflowed],
+                visibleIds: this.getAllItems().filter(i => !newOverflowed.has(i.id)).map(i => i.id),
+            });
+        }
+    }
+    pushUndoSnapshot() {
+        this.getStateSnapshot().then(snap => {
+            this.undoStack.push(snap);
+            if (this.undoStack.length > 50)
+                this.undoStack.shift();
+            this.redoStack = [];
+        });
+    }
+    handleItemClick(item, e) {
+        if (this.disabled || this.itemStates.get(item.id)?.disabled || item.disabled)
+            return;
+        this.pushUndoSnapshot();
+        if (item.type === 'button' || item.type === 'icon-button') {
+            const btn = item;
+            if (btn.toggleable) {
+                const cur = this.itemStates.get(item.id) ?? { id: item.id };
+                this.itemStates = new Map(this.itemStates.set(item.id, { ...cur, active: !cur.active }));
+            }
+        }
+        this.toolbarItemClick.emit({ item, originalEvent: e });
+    }
+    handleValueChange(item, value) {
+        if (this.disabled || this.itemStates.get(item.id)?.disabled)
+            return;
+        this.pushUndoSnapshot();
+        const prev = this.itemStates.get(item.id)?.value;
+        this.itemStates = new Map(this.itemStates.set(item.id, { ...this.itemStates.get(item.id), id: item.id, value }));
+        this.toolbarItemChange.emit({ item, value, previousValue: prev });
+    }
+    isItemDisabled(item) {
+        return this.disabled || !!item.disabled || !!(this.itemStates.get(item.id)?.disabled);
+    }
+    isItemHidden(item) {
+        return !!(this.itemStates.get(item.id)?.hidden);
+    }
+    isItemLoading(item) {
+        return !!(this.itemStates.get(item.id)?.loading);
+    }
+    isItemActive(item) {
+        const state = this.itemStates.get(item.id);
+        if (state?.active !== undefined)
+            return state.active;
+        return item.active ?? false;
+    }
+    computeItemValue(item) {
+        const state = this.itemStates.get(item.id);
+        if (state?.value !== undefined)
+            return state.value;
+        if ('value' in item)
+            return item.value;
+        if ('checked' in item)
+            return item.checked;
+        return undefined;
+    }
+    // ─── Drag and Drop ─────────────────────────────────────────────────────────
+    handleDragStart(id) {
+        this.dragSourceId = id;
+    }
+    handleDrop(targetId) {
+        if (!this.dragSourceId || this.dragSourceId === targetId)
+            return;
+        const items = [...this.parsedItems];
+        const fromIdx = items.findIndex(i => i.id === this.dragSourceId);
+        const toIdx = items.findIndex(i => i.id === targetId);
+        if (fromIdx < 0 || toIdx < 0)
+            return;
+        const [moved] = items.splice(fromIdx, 1);
+        items.splice(toIdx, 0, moved);
+        this.parsedItems = [...items];
+        this.dragSourceId = null;
+        this.toolbarReorder.emit(items);
+    }
+    // ─── Render Helpers ────────────────────────────────────────────────────────
+    renderItem(item, inOverflow = false) {
+        if (this.isItemHidden(item))
+            return null;
+        if (!inOverflow && this.overflowedIds.has(item.id) && this.overflowStrategy === 'dropdown')
+            return null;
+        const disabled = this.isItemDisabled(item);
+        const loading = this.isItemLoading(item);
+        switch (item.type) {
+            case 'button':
+            case 'icon-button':
+                return this.renderButton(item, disabled, loading, inOverflow);
+            case 'dropdown':
+                return this.renderDropdown(item, disabled);
+            case 'input':
+            case 'search':
+                return this.renderInput(item, disabled, inOverflow);
+            case 'toggle':
+            case 'switch':
+                return this.renderToggle(item, disabled, inOverflow);
+            case 'toggle-group':
+                return this.renderToggleGroup(item, disabled, inOverflow);
+            case 'avatar':
+                return this.renderAvatar(item, inOverflow);
+            case 'separator':
+                return this.renderSeparator();
+            case 'spacer':
+                return h("span", { class: "toolbar-spacer", style: { flex: String(item.flex ?? 1) } });
+            case 'text':
+                return this.renderText(item);
+            case 'badge':
+                return this.renderBadge(item);
+            case 'custom':
+                return this.renderCustom(item);
+            case 'group':
+                return this.renderGroup(item, inOverflow);
+            default:
+                return null;
+        }
+    }
+    renderButton(item, disabled, loading, inOverflow) {
+        const active = this.isItemActive(item);
+        const lib = item.iconLibrary ?? this.iconLibrary;
+        const isIconOnly = item.iconOnly ?? (!item.label || this.iconOnly);
+        if (inOverflow) {
+            return (h("li", { class: { 'overflow-item': true, 'is-active': active, 'is-disabled': disabled }, role: "menuitem", "aria-disabled": disabled ? 'true' : null, onClick: disabled ? null : (e) => { this.handleItemClick(item, e); this.isOverflowOpen = false; }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        this.handleItemClick(item, e);
+                        this.isOverflowOpen = false;
+                    }
+                }, tabIndex: disabled ? -1 : 0, "data-item-id": item.id }, item.icon && h("ui-icon", { name: item.icon, library: lib, size: "16px" }), h("span", { class: "overflow-item-label" }, item.label ?? item.id), active && h("span", { class: "overflow-item-check" }, "\u2713")));
+        }
+        // Map toolbar variant names to ui-button variant
+        const btnVariant = (item.variant === 'ghost' || item.variant === 'outline' || !item.variant)
+            ? (item.variant ?? 'ghost')
+            : item.variant;
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--button': true, [item.className ?? '']: !!item.className }, "data-item-id": item.id, draggable: this.reorderable, onDragStart: () => this.handleDragStart(item.id), onDrop: () => this.handleDrop(item.id), onDragOver: (e) => e.preventDefault() }, h("ui-button", { label: isIconOnly ? undefined : item.label, icon: item.icon, "icon-library": lib, "icon-only": isIconOnly, variant: btnVariant, size: this.size, disabled: disabled, loading: loading, selected: active, active: active, noRipple: true, href: item.href, target: item.target, tooltip: item.tooltip, "aria-label": item.ariaLabel ?? (isIconOnly ? item.label : undefined), badge: item.badge != null ? String(item.badge) : undefined, ref: el => el && this.focusableRefs.set(item.id, el), onButtonClick: disabled ? null : (e) => this.handleItemClick(item, e.detail) })));
+    }
+    renderDropdown(item, disabled) {
+        const value = this.computeItemValue(item) ?? '';
+        const lib = item.iconLibrary ?? this.iconLibrary;
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--dropdown': true, 'is-disabled': disabled, [item.className ?? '']: !!item.className }, "data-item-id": item.id, title: item.tooltip }, h("ui-dropdown", { options: item.options, value: value, placeholder: item.placeholder ?? item.label ?? 'Select', disabled: disabled, multiSelect: item.multiSelect, searchable: item.searchable, clearable: item.clearable, size: this.size,
+            //   showSelectedMarker={item.showSelectedMarker !== false}
+            //  selectedMarkerIcon={item.selectedMarkerIcon ?? 'check'}
+            // selectedMarkerLabel={item.selectedMarkerLabel ?? ''}
+            onDropdownChange: (e) => this.handleValueChange(item, e.detail?.value) }, item.icon && h("ui-icon", { slot: "prefix", name: item.icon, library: lib, size: "16px" }))));
+    }
+    renderInput(item, disabled, inOverflow) {
+        if (inOverflow)
+            return null;
+        const value = this.computeItemValue(item) ?? '';
+        const handleChange = (val) => {
+            const debounce = item.debounce ?? this.inputDebounce;
+            if (this.inputDebounceTimers.has(item.id))
+                clearTimeout(this.inputDebounceTimers.get(item.id));
+            const timer = setTimeout(() => this.handleValueChange(item, val), debounce);
+            this.inputDebounceTimers.set(item.id, timer);
+        };
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--input': true, 'is-disabled': disabled, [item.className ?? '']: !!item.className }, "data-item-id": item.id, style: { minWidth: item.minWidth, maxWidth: item.maxWidth } }, h("ui-input", { value: value, placeholder: item.placeholder ?? (item.type === 'search' ? 'Search…' : ''), disabled: disabled, size: this.size, clearable: item.clearable, "prefix-icon": item.type === 'search' ? 'search' : item.icon, "icon-library": this.iconLibrary, ref: el => el && this.focusableRefs.set(item.id, el), onInputChange: (e) => handleChange(e.detail) })));
+    }
+    renderToggle(item, disabled, inOverflow) {
+        const checked = this.computeItemValue(item) ?? false;
+        if (inOverflow) {
+            return (h("li", { class: { 'overflow-item': true, 'overflow-item--toggle': true, 'is-disabled': disabled }, role: "menuitemcheckbox", "aria-checked": String(checked), "aria-disabled": disabled ? 'true' : null, tabIndex: disabled ? -1 : 0, "data-item-id": item.id, onClick: disabled ? null : () => this.handleValueChange(item, !checked), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ')
+                        this.handleValueChange(item, !checked);
+                } }, h("span", { class: "overflow-item-label" }, item.label ?? item.id), h("span", { class: `overflow-toggle${checked ? ' is-on' : ''}` }, checked ? 'ON' : 'OFF')));
+        }
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--toggle': true, 'is-disabled': disabled, [item.className ?? '']: !!item.className }, "data-item-id": item.id, title: item.tooltip }, item.labelPosition !== 'right' && item.label && h("span", { class: "toolbar-toggle-label" }, item.label), h("ui-switch", { checked: checked, disabled: disabled, size: this.size, label: item.labelPosition === 'right' ? item.label : undefined, "label-position": item.labelPosition ?? 'right', ref: el => el && this.focusableRefs.set(item.id, el), onSwitchChange: (e) => this.handleValueChange(item, e.detail.checked) })));
+    }
+    renderToggleGroup(item, disabled, inOverflow) {
+        if (inOverflow)
+            return null;
+        const value = this.computeItemValue(item) ?? '';
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--toggle-group': true, 'is-disabled': disabled, [item.className ?? '']: !!item.className }, "data-item-id": item.id, title: item.tooltip }, h("ui-toggle-group", { options: item.options, value: Array.isArray(value) ? value.join(',') : value, disabled: disabled, size: (item.size ?? this.size), color: item.color, variant: item.variant, shape: item.shape, "selection-mode": item.selectionMode ?? 'single', onToggleGroupChange: (e) => this.handleValueChange(item, e.detail.value) })));
+    }
+    renderAvatar(item, inOverflow) {
+        if (inOverflow) {
+            return (h("li", { class: { 'overflow-item': true, 'overflow-item--avatar': true }, role: "menuitem", tabIndex: 0, "data-item-id": item.id }, h("ui-avatar", { src: item.src, name: item.name, size: item.size ?? '24px', status: item.status, shape: "circle" }), item.name && h("span", { class: "overflow-item-label" }, item.name)));
+        }
+        return (h("div", { class: { 'toolbar-item': true, 'toolbar-item--avatar': true, 'is-clickable': item.clickable, [item.className ?? '']: !!item.className }, "data-item-id": item.id, title: item.tooltip ?? item.name, role: item.clickable ? 'button' : null, tabIndex: item.clickable ? 0 : null, ref: el => item.clickable && el && this.focusableRefs.set(item.id, el), onClick: item.clickable ? (e) => this.handleItemClick(item, e) : null, onKeyDown: (e) => {
+                if (item.clickable && (e.key === 'Enter' || e.key === ' '))
+                    this.handleItemClick(item, e);
+            } }, h("ui-avatar", { src: item.src, name: item.name, size: item.size ?? '28px', status: item.status, shape: "circle" }), item.badge != null && h("span", { class: "toolbar-badge toolbar-badge--primary" }, item.badge)));
+    }
+    renderSeparator() {
+        return (h("div", { class: `toolbar-separator${this.orientation === 'vertical' ? ' toolbar-separator--horizontal' : ''}`, role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'horizontal' : 'vertical' }));
+    }
+    renderText(item) {
+        return (h("span", { class: { 'toolbar-item': true, 'toolbar-text': true, 'toolbar-text--bold': item.bold, 'toolbar-text--muted': item.muted, [item.className ?? '']: !!item.className }, "data-item-id": item.id }, item.content));
+    }
+    renderBadge(item) {
+        return (h("span", { class: `toolbar-item toolbar-status-badge toolbar-status-badge--${item.color ?? 'primary'}${item.dot ? ' is-dot' : ''}`, "data-item-id": item.id }, !item.dot && item.label));
+    }
+    renderCustom(item) {
+        if (item.component) {
+            const Tag = item.component;
+            return h(Tag, { "data-item-id": item.id, ...(item.componentProps ?? {}) });
+        }
+        if (item.html) {
+            return h("div", { class: "toolbar-item toolbar-item--custom", "data-item-id": item.id, innerHTML: item.html });
+        }
+        return null;
+    }
+    renderGroup(item, inOverflow) {
+        const collapsed = this.itemStates.get(item.id)?.active === false;
+        return (h("div", { class: { 'toolbar-group': true, 'toolbar-group--divider': item.divider, 'is-collapsed': collapsed, [item.className ?? '']: !!item.className }, "data-item-id": item.id, role: "group", "aria-label": item.label }, item.label && (h("span", { class: "toolbar-group__label", onClick: item.collapsible ? () => {
+                const cur = this.itemStates.get(item.id) ?? { id: item.id };
+                this.itemStates = new Map(this.itemStates.set(item.id, { ...cur, active: !cur.active }));
+            } : null }, item.label)), !collapsed && item.items.map(child => this.renderItem(child, inOverflow))));
+    }
+    renderOverflowMenu() {
+        const overflowItems = this.getAllItems().filter(i => this.overflowedIds.has(i.id) || i.pinToOverflow);
+        if (overflowItems.length === 0)
+            return null;
+        return (h("div", { class: `toolbar-overflow${this.isOverflowOpen ? ' is-open' : ''}` }, h("ui-button", { class: "toolbar-overflow__btn toolbar-item toolbar-item--button toolbar-item--ghost", "aria-haspopup": "menu", "aria-expanded": String(this.isOverflowOpen), "aria-label": this.overflowLabel, title: this.overflowLabel, variant: "ghost", onButtonClick: (e) => { e.detail.stopPropagation(); this.isOverflowOpen = !this.isOverflowOpen; }, icon: this.overflowIcon, "icon-library": this.iconLibrary, badge: String(overflowItems.length), iconOnly: true }), this.isOverflowOpen && (h("ul", { class: "toolbar-overflow__menu", style: { overflow: 'visible' }, role: "menu", "aria-label": this.overflowLabel }, overflowItems.map(item => this.renderItem(item, true))))));
+    }
+    renderZone(items, zone) {
+        if (!items?.length)
+            return null;
+        return (h("div", { class: `toolbar-zone toolbar-zone--${zone}`, role: "group", "aria-label": zone }, items.map(item => this.renderItem(item))));
+    }
+    // ─── Main Render ───────────────────────────────────────────────────────────
+    render() {
+        const hasSchema = !!this.parsedSchema;
+        const bodyStyle = {
+            gap: this.gap,
+            padding: this.variant === 'inline' ? '0' : this.padding,
+        };
+        const hostClasses = {
+            [`variant-${this.variant}`]: true,
+            [`orientation-${this.orientation}`]: true,
+            [`position-${this.position}`]: true,
+            [`size-${this.size}`]: true,
+            [`elevation-${this.elevation}`]: true,
+            [`align-${this.alignment}`]: true,
+            'is-rounded': this.rounded,
+            'is-bordered': this.bordered,
+            'is-disabled': this.disabled,
+            'is-loading': this.loading,
+            'is-collapsed': this.isCollapsed,
+            'is-mobile': this.isMobile,
+            'is-overflow-open': this.isOverflowOpen,
+            'has-open-overlay': this.isOverflowOpen || this.openChildDropdowns > 0,
+            'has-zone-dividers': this.zoneDividers,
+            'has-overflow': this.overflowedIds.size > 0,
+            [`overflow-${this.overflowStrategy}`]: true,
+        };
+        const stickyStyle = {};
+        if (this.position === 'sticky' || this.position === 'fixed') {
+            stickyStyle[this.stickyEdge] = '0';
+        }
+        if (this.maxSize) {
+            stickyStyle[this.orientation === 'horizontal' ? 'maxWidth' : 'maxHeight'] = this.maxSize;
+        }
+        return (h(Host, { key: '6b33477b806940fbb98394621c375a70853128a9', class: hostClasses, style: stickyStyle, role: "toolbar", "aria-label": this.toolbarAriaLabel, "aria-disabled": this.disabled ? 'true' : null }, this.isMobile && (h("ui-button", { key: '12131b32e8813702f466625f77a38c3978bb4147', class: "toolbar-mobile-toggle", "aria-expanded": String(!this.isCollapsed), "aria-label": this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar', onButtonClick: () => { this.isCollapsed = !this.isCollapsed; }, variant: "ghost", icon: this.isCollapsed ? 'menu' : 'x', "icon-library": this.iconLibrary, iconOnly: true })), (!this.isMobile || !this.isCollapsed) && (h("div", { key: '3e203ab7c3349576bae4f42b906ec702b97b18af', class: "toolbar-body", style: bodyStyle, ref: el => this.toolbarBodyRef = el }, h("slot", { key: '5c2f402b9d318651a0007b3ed80064f711f6e3a5', name: "before" }), hasSchema ? (h("div", { class: "toolbar-zones" }, this.renderZone(this.parsedSchema.left ?? [], 'left'), this.zoneDividers && (this.parsedSchema.left?.length > 0) && (this.parsedSchema.center?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.center ?? [], 'center'), this.zoneDividers && (this.parsedSchema.center?.length > 0) && (this.parsedSchema.right?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.right ?? [], 'right'))) : (this.parsedItems.map(item => this.renderItem(item))), h("slot", { key: 'd8e7b2fec2cad8fe068792c0a4cb0e7b7d0b002e', name: "left" }), h("slot", { key: '4445e8c225d7249ddd65fe1164dc78a924d63530', name: "center" }), h("slot", { key: 'd590115edf7ff9d04cb0e36b5cac629b85901b09', name: "right" }), h("slot", { key: 'cf6631fd34e189258bea03f5b653ee4d766f3d78' }), this.overflowStrategy === 'dropdown' && this.renderOverflowMenu(), h("slot", { key: 'f97fe02b2756a3cbb7b82965d57e767597834ee7', name: "after" })))));
+    }
+    static get is() { return "ui-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toolbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "schema": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ToolbarSchema",
+                    "resolved": "ToolbarSchema | string",
+                    "references": {
+                        "ToolbarSchema": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarSchema",
+                            "referenceLocation": "ToolbarSchema"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string or object describing the full toolbar layout.\r\nSchema: { left?: ToolbarItem[], center?: ToolbarItem[], right?: ToolbarItem[] }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "schema",
+                "defaultValue": "null"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ToolbarItem[]",
+                    "resolved": "ToolbarItem[] | string",
+                    "references": {
+                        "ToolbarItem": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarItem",
+                            "referenceLocation": "ToolbarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flat list of items (all rendered in the main content zone)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarVariant",
+                    "resolved": "\"dark\" | \"default\" | \"elevated\" | \"glass\" | \"inline\" | \"minimal\" | \"outlined\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "ToolbarVariant": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarVariant",
+                            "referenceLocation": "ToolbarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the toolbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\"",
+                    "references": {
+                        "ToolbarSize": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarSize",
+                            "referenceLocation": "ToolbarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of toolbar items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "ToolbarOrientation": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarOrientation",
+                            "referenceLocation": "ToolbarOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation: horizontal or vertical."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarPosition",
+                    "resolved": "\"absolute\" | \"fixed\" | \"static\" | \"sticky\"",
+                    "references": {
+                        "ToolbarPosition": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarPosition",
+                            "referenceLocation": "ToolbarPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Positioning strategy."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'static'"
+            },
+            "stickyEdge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarStickyEdge",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "ToolbarStickyEdge": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarStickyEdge",
+                            "referenceLocation": "ToolbarStickyEdge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which edge to stick to when position is sticky or fixed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-edge",
+                "defaultValue": "'top'"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarAlignment",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {
+                        "ToolbarAlignment": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarAlignment",
+                            "referenceLocation": "ToolbarAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of items along the main axis."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'start'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between items (CSS value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'4px'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding inside the toolbar (CSS value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'8px 12px'"
+            },
+            "maxSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height (horizontal) or width (vertical) (CSS value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size"
+            },
+            "overflowStrategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarOverflowStrategy",
+                    "resolved": "\"dropdown\" | \"hidden\" | \"scroll\" | \"wrap\"",
+                    "references": {
+                        "ToolbarOverflowStrategy": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarOverflowStrategy",
+                            "referenceLocation": "ToolbarOverflowStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overflow handling strategy."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-strategy",
+                "defaultValue": "'dropdown'"
+            },
+            "overflowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the overflow \"More\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-label",
+                "defaultValue": "'More'"
+            },
+            "overflowIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon for the overflow more button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-icon",
+                "defaultValue": "'more-horizontal'"
+            },
+            "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": "Default icon library for items that don't specify one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toolbar is in a disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toolbar is in a loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "zoneDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show dividers between zones (left/center/right)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "zone-dividers",
+                "defaultValue": "false"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rounded corners for the whole bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "false"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1 | 2 | 3 | 4",
+                    "resolved": "0 | 1 | 2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation shadow level (0\u20134)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "1"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable drag-and-drop reordering of toolbar items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
+            "keyboardNav": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation across items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-nav",
+                "defaultValue": "true"
+            },
+            "toolbarAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the toolbar element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toolbar-aria-label",
+                "defaultValue": "'Toolbar'"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a border around the toolbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make label hidden (icon-only) for button items by default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "inputDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce time in ms for input/search items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-debounce",
+                "defaultValue": "300"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overflowedIds": {},
+            "isOverflowOpen": {},
+            "itemStates": {},
+            "dragSourceId": {},
+            "parsedSchema": {},
+            "parsedItems": {},
+            "isMobile": {},
+            "isCollapsed": {},
+            "openChildDropdowns": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolbarItemClick",
+                "name": "toolbarItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a button or clickable item is activated."
+                },
+                "complexType": {
+                    "original": "ToolbarItemClickEvent",
+                    "resolved": "ToolbarItemClickEvent",
+                    "references": {
+                        "ToolbarItemClickEvent": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarItemClickEvent",
+                            "referenceLocation": "ToolbarItemClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toolbarItemChange",
+                "name": "toolbarItemChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when an input, dropdown, toggle, or switch value changes."
+                },
+                "complexType": {
+                    "original": "ToolbarItemChangeEvent",
+                    "resolved": "ToolbarItemChangeEvent",
+                    "references": {
+                        "ToolbarItemChangeEvent": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarItemChangeEvent",
+                            "referenceLocation": "ToolbarItemChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toolbarOverflowChange",
+                "name": "toolbarOverflowChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the visible/overflowed item set changes."
+                },
+                "complexType": {
+                    "original": "ToolbarOverflowChangeEvent",
+                    "resolved": "ToolbarOverflowChangeEvent",
+                    "references": {
+                        "ToolbarOverflowChangeEvent": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarOverflowChangeEvent",
+                            "referenceLocation": "ToolbarOverflowChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toolbarReorder",
+                "name": "toolbarReorder",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after a drag-and-drop reorder."
+                },
+                "complexType": {
+                    "original": "ToolbarItem[]",
+                    "resolved": "ToolbarItem[]",
+                    "references": {
+                        "ToolbarItem": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarItem",
+                            "referenceLocation": "ToolbarItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setItemValue": {
+                "complexType": {
+                    "signature": "(id: string, value: unknown) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "unknown",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically set the value of any item by id.",
+                    "tags": []
+                }
+            },
+            "getItemValue": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<unknown>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<unknown>"
+                },
+                "docs": {
+                    "text": "Get the current value of an item by id.",
+                    "tags": []
+                }
+            },
+            "setItemDisabled": {
+                "complexType": {
+                    "signature": "(id: string, disabled: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "disabled",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Disable or enable an item by id.",
+                    "tags": []
+                }
+            },
+            "setItemHidden": {
+                "complexType": {
+                    "signature": "(id: string, hidden: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "hidden",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle visibility of an item.",
+                    "tags": []
+                }
+            },
+            "setItemLoading": {
+                "complexType": {
+                    "signature": "(id: string, loading: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "loading",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set loading state on a specific button item.",
+                    "tags": []
+                }
+            },
+            "toggleItem": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle active state of a toggleable button.",
+                    "tags": []
+                }
+            },
+            "setCollapsed": {
+                "complexType": {
+                    "signature": "(collapsed: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "collapsed",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapse / expand the toolbar (mobile).",
+                    "tags": []
+                }
+            },
+            "setOverflowOpen": {
+                "complexType": {
+                    "signature": "(open: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "open",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open or close the overflow menu.",
+                    "tags": []
+                }
+            },
+            "getStateSnapshot": {
+                "complexType": {
+                    "signature": "() => Promise<ToolbarStateSnapshot>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ToolbarStateSnapshot": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarStateSnapshot",
+                            "referenceLocation": "ToolbarStateSnapshot"
+                        }
+                    },
+                    "return": "Promise<ToolbarStateSnapshot>"
+                },
+                "docs": {
+                    "text": "Get a snapshot of current toolbar state.",
+                    "tags": []
+                }
+            },
+            "restoreStateSnapshot": {
+                "complexType": {
+                    "signature": "(snapshot: ToolbarStateSnapshot) => Promise<void>",
+                    "parameters": [{
+                            "name": "snapshot",
+                            "type": "ToolbarStateSnapshot",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ToolbarStateSnapshot": {
+                            "location": "import",
+                            "path": "./toolbar-types",
+                            "id": "src/components/toolbar/toolbar-types.ts::ToolbarStateSnapshot",
+                            "referenceLocation": "ToolbarStateSnapshot"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "undo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Undo last value change.",
+                    "tags": []
+                }
+            },
+            "redo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Redo last undone change.",
+                    "tags": []
+                }
+            },
+            "focusItem": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus a specific toolbar item by id.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }, {
+                "propName": "schema",
+                "methodName": "onSchemaChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dropdownOpen",
+                "method": "onChildDropdownOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dropdownClose",
+                "method": "onChildDropdownClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}