@mlightcad/cad-simple-viewer 1.6.3 → 1.7.1

package/lib/ui/toolbar/AcUiToolbar.js

@@ -0,0 +1,1550 @@
+/**
+ * Plain-DOM floating toolbar with sub-toolbars, dropdown menus, and toggles.
+ *
+ * Document open / open-mode state is injected via {@link AcUiToolbar.setDocState}
+ * or {@link acapBindToolbarDocState} — this module never imports DocManager.
+ *
+ * @module AcUiToolbar
+ * @packageDocumentation
+ */
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { AcEdOpenMode } from '../../editor/view/AcEdOpenMode';
+import { createIconElement, ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT, ICON_CHEVRON_UP, ICON_MORE } from '../icons';
+import { AcUiDropdownMenu } from './AcUiDropdownMenu';
+import { AcUiSubToolbar } from './AcUiSubToolbar';
+import { acuiEnsureToolbarStyles } from './AcUiToolbarStyles';
+import { acuiResolveToolbarChrome } from './resolveToolbarChrome';
+import { acuiFilterVisibleToolbarItems, acuiIsToolbarItemDisabled, acuiItemRequiresDocument, acuiResolveEffectiveToolbarItem, acuiResolveParentToolbarDisplay } from './resolveToolbarItemState';
+import { acuiIsDynamicToolbarChildren, acuiIsToolbarChildrenStrip, acuiIsToolbarSeparatorItem, acuiResolveToolbarChildrenUi } from './toolbarItemUtils';
+var AcUiToolbar = /** @class */ (function () {
+    /**
+     * @param options - Host, placement, items, i18n, and command callback.
+     */
+    function AcUiToolbar(options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.options = options;
+        /** Whether the toolbar is globally disabled during document open. */
+        this.isDisabled = false;
+        /** Current document open mode used for item visibility. */
+        this.openMode = AcEdOpenMode.Read;
+        /** Whether an active document is loaded. */
+        this.hasDocument = false;
+        /** Runtime submenu selection for parents with {@link AcUiToolbarItem.childIcon} `'selected'`. */
+        this.selectedChildByParent = new Map();
+        /** Whether the toolbar root is shown. */
+        this.visible = true;
+        /** Items currently hidden behind the overflow menu. */
+        this.overflowItems = [];
+        /** Whether menu overflow is showing the ⋯ button (used for vertical positioning). */
+        this.overflowMenuActive = false;
+        /** Toolbar item nodes rendered in the last {@link renderButtons} pass. */
+        this.renderedEntries = [];
+        acuiEnsureToolbarStyles();
+        this.mountHost = options.host;
+        this.themeHost = (_a = options.themeHost) !== null && _a !== void 0 ? _a : options.host;
+        this.edgeOffset = (_b = options.edgeOffset) !== null && _b !== void 0 ? _b : 8;
+        this.sideOffset = (_c = options.sideOffset) !== null && _c !== void 0 ? _c : 0;
+        this.showBorder = (_d = options.showBorder) !== null && _d !== void 0 ? _d : true;
+        this.showButtonBorder = (_e = options.showButtonBorder) !== null && _e !== void 0 ? _e : false;
+        this.showSeparators = (_f = options.showSeparators) !== null && _f !== void 0 ? _f : true;
+        this.showChildrenIndicator = (_g = options.showChildrenIndicator) !== null && _g !== void 0 ? _g : true;
+        this.inCanvasParent = options.inCanvasParent === true;
+        this.items = options.items;
+        this.collapsed =
+            Boolean(options.collapsible) && Boolean(options.defaultCollapsed);
+        if (options.overflow === undefined) {
+            options.overflow = 'menu';
+        }
+        this.seedSelectedChildren(options.items);
+        this.ensureMountHostLayout();
+        this.root = document.createElement('div');
+        this.syncRootClasses();
+        this.root.setAttribute('role', 'toolbar');
+        this.overflowButton = document.createElement('button');
+        this.overflowButton.type = 'button';
+        this.overflowButton.className =
+            'ml-ex-ui-toolbar-btn ml-ex-ui-toolbar-overflow-btn';
+        this.overflowButton.dataset.toolbarItemId = 'toolbar-overflow';
+        this.overflowButton.hidden = true;
+        this.overflowButton.appendChild(createIconElement(ICON_MORE));
+        this.overflowButton.addEventListener('click', function (event) {
+            event.stopPropagation();
+            if (_this.overflowButton.hidden)
+                return;
+            _this.toggleOverflowMenu();
+        });
+        this.mountHost.appendChild(this.root);
+        this.ensureInParentLayout();
+        this.setupResizeObserver();
+        if (options.docState) {
+            this.setDocState(options.docState);
+        }
+        else {
+            this.renderButtons();
+        }
+    }
+    /**
+     * Updates document-related enablement and open-mode filtering.
+     *
+     * Hosts with DocManager should use {@link acapBindToolbarDocState}. Offline
+     * HTML / custom hosts call this directly.
+     *
+     * @param state - Partial document state to merge.
+     */
+    AcUiToolbar.prototype.setDocState = function (state) {
+        if (state.hasDocument !== undefined) {
+            this.hasDocument = state.hasDocument;
+        }
+        if (state.isOpening !== undefined) {
+            this.isDisabled = state.isOpening;
+            if (state.isOpening) {
+                this.closeChildrenUi();
+            }
+        }
+        if (state.openMode !== undefined) {
+            this.openMode = state.openMode;
+        }
+        this.syncRootClasses();
+        this.renderButtons();
+    };
+    /**
+     * Replaces the toolbar item list and re-renders buttons.
+     *
+     * @param items - New toolbar items.
+     */
+    AcUiToolbar.prototype.updateItems = function (items) {
+        this.items = items;
+        this.seedSelectedChildren(items);
+        this.renderButtons();
+    };
+    /**
+     * Applies layout-driven view options (placement, chrome flags, items).
+     *
+     * Used by {@link AcApSimpleUiPlugin} when switching phone / pad / desktop
+     * layouts without recreating the toolbar instance.
+     *
+     * @param view - Partial toolbar view state to merge.
+     */
+    AcUiToolbar.prototype.applyViewOptions = function (view) {
+        if (view.placement !== undefined) {
+            this.options.placement = view.placement;
+        }
+        if (view.edgeOffset !== undefined) {
+            this.edgeOffset = Math.max(0, view.edgeOffset);
+        }
+        if (view.sideOffset !== undefined) {
+            this.sideOffset = Math.max(0, view.sideOffset);
+        }
+        if (view.collapsible !== undefined) {
+            this.options.collapsible = view.collapsible;
+            if (!view.collapsible) {
+                this.collapsed = false;
+            }
+        }
+        if (view.defaultCollapsed !== undefined) {
+            this.collapsed =
+                Boolean(this.options.collapsible) && Boolean(view.defaultCollapsed);
+        }
+        if (view.showLabels !== undefined) {
+            this.options.showLabels = view.showLabels;
+        }
+        if (view.size !== undefined) {
+            this.options.size = view.size;
+        }
+        if (view.overflow !== undefined) {
+            this.options.overflow = view.overflow;
+        }
+        if (view.showBorder !== undefined) {
+            this.showBorder = view.showBorder;
+        }
+        if (view.showButtonBorder !== undefined) {
+            this.showButtonBorder = view.showButtonBorder;
+        }
+        if (view.showSeparators !== undefined) {
+            this.showSeparators = view.showSeparators;
+        }
+        if (view.showChildrenIndicator !== undefined) {
+            this.showChildrenIndicator = view.showChildrenIndicator;
+            this.options.showChildrenIndicator = view.showChildrenIndicator;
+        }
+        if (view.subToolbar !== undefined) {
+            this.options.subToolbar = view.subToolbar;
+        }
+        if (view.inCanvasParent !== undefined) {
+            this.inCanvasParent = view.inCanvasParent;
+            this.options.inCanvasParent = view.inCanvasParent;
+        }
+        if (view.items !== undefined) {
+            this.items = view.items;
+            this.seedSelectedChildren(view.items);
+        }
+        this.syncRootClasses();
+        this.ensureInParentLayout();
+        this.renderButtons();
+        this.scheduleSyncPosition();
+    };
+    /** Re-renders buttons (e.g. after locale or theme change). */
+    AcUiToolbar.prototype.refresh = function () {
+        this.renderButtons();
+    };
+    /** Updates button labels and tooltips after locale change. */
+    AcUiToolbar.prototype.refreshLocale = function () {
+        var e_1, _a;
+        var _b, _c;
+        this.syncOverflowButtonLabels();
+        this.syncCollapseToggleButton();
+        try {
+            for (var _d = __values(this.renderedEntries), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var _f = _e.value, item = _f.item, element = _f.element, isSeparator = _f.isSeparator;
+                if (isSeparator)
+                    continue;
+                var button = element;
+                var effective = acuiResolveParentToolbarDisplay(item, this.selectedChildByParent.get(item.id));
+                var label = effective.label
+                    ? this.options.i18n.t(effective.label)
+                    : effective.id;
+                button.title = label;
+                button.setAttribute('aria-label', label);
+                var labelEl = button.querySelector('.ml-ex-ui-toolbar-btn-label, .ml-ex-ui-toolbar-btn-text');
+                if (labelEl) {
+                    labelEl.textContent = label;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        (_b = this.openSubToolbar) === null || _b === void 0 ? void 0 : _b.refreshLocale();
+        (_c = this.openNestedSubToolbar) === null || _c === void 0 ? void 0 : _c.refreshLocale();
+    };
+    Object.defineProperty(AcUiToolbar.prototype, "replaceOnNested", {
+        /**
+         * Whether nested strips and dock panels replace an open ancestor strip.
+         *
+         * @see {@link AcUiSubToolbarOptions.replaceOnNested}
+         */
+        get: function () {
+            return this.resolveSubToolbarChrome().replaceOnNested === true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Closes any open dropdown or sub-toolbar. */
+    AcUiToolbar.prototype.dismissOpenChildren = function () {
+        this.closeChildrenUi();
+    };
+    /** Notifies the host to hide mutually exclusive chrome (e.g. dock panels). */
+    AcUiToolbar.prototype.notifyExclusiveOpen = function () {
+        var _a, _b;
+        if (this.replaceOnNested) {
+            (_b = (_a = this.options).onExclusiveOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    };
+    /**
+     * Moves the toolbar to another host edge and updates orientation classes.
+     *
+     * @param placement - Target edge placement.
+     */
+    AcUiToolbar.prototype.setPlacement = function (placement) {
+        if (this.options.placement === placement)
+            return;
+        this.options.placement = placement;
+        this.selectedChildByParent.set('toolbar-placement', "placement-".concat(placement));
+        this.syncRootClasses();
+        this.ensureInParentLayout();
+        this.renderButtons();
+    };
+    /** Current inset from the canvas edge in px. */
+    AcUiToolbar.prototype.getEdgeOffset = function () {
+        return this.edgeOffset;
+    };
+    /**
+     * Sets the inset from the canvas edge and reclamps toolbar position.
+     *
+     * @param offset - Distance in px (clamped to >= 0).
+     */
+    AcUiToolbar.prototype.setEdgeOffset = function (offset) {
+        this.edgeOffset = Math.max(0, offset);
+        this.scheduleSyncPosition();
+    };
+    /** Current cross-axis inset from host edges in px. */
+    AcUiToolbar.prototype.getSideOffset = function () {
+        return this.sideOffset;
+    };
+    /**
+     * Sets the cross-axis inset from host edges and reclamps toolbar position.
+     *
+     * @param offset - Distance in px (clamped to >= 0).
+     */
+    AcUiToolbar.prototype.setSideOffset = function (offset) {
+        this.sideOffset = Math.max(0, offset);
+        this.scheduleSyncPosition();
+    };
+    /** Resolved chrome options for sub-toolbars. */
+    AcUiToolbar.prototype.resolveSubToolbarChrome = function () {
+        return acuiResolveToolbarChrome({
+            edgeOffset: this.edgeOffset,
+            sideOffset: this.sideOffset,
+            showLabels: this.options.showLabels,
+            size: this.options.size,
+            overflow: this.options.overflow,
+            showBorder: this.showBorder,
+            showButtonBorder: this.showButtonBorder,
+            showSeparators: this.showSeparators,
+            showChildrenIndicator: this.showChildrenIndicator
+        }, this.options.subToolbar);
+    };
+    /**
+     * Cross-axis host margins for wrap sizing and sub-toolbar clamping.
+     *
+     * Horizontal toolbars use {@link sideOffset} on the top/bottom edges; vertical
+     * toolbars use it on the left/right edges. The dock edge keeps
+     * {@link edgeOffset}.
+     */
+    AcUiToolbar.prototype.getCrossAxisInset = function () {
+        var horizontal = this.getOrientationClass() === 'horizontal';
+        if (horizontal) {
+            return this.options.placement === 'top'
+                ? { near: this.edgeOffset, far: this.sideOffset }
+                : { near: this.sideOffset, far: this.edgeOffset };
+        }
+        return this.options.placement === 'left'
+            ? { near: this.sideOffset, far: this.edgeOffset }
+            : { near: this.edgeOffset, far: this.sideOffset };
+    };
+    /**
+     * Moves the toolbar to another canvas mount element.
+     *
+     * @param newHost - New canvas container.
+     */
+    AcUiToolbar.prototype.reparentTo = function (newHost) {
+        var _a;
+        if (this.mountHost === newHost) {
+            if (!this.root.isConnected && newHost.isConnected) {
+                newHost.appendChild(this.root);
+            }
+            this.syncInParentLayout();
+            return;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.releaseInParentLayout({ keepRoot: true });
+        this.root.remove();
+        this.mountHost = newHost;
+        this.ensureMountHostLayout();
+        this.mountHost.appendChild(this.root);
+        this.ensureInParentLayout();
+        this.setupResizeObserver();
+        this.scheduleSyncPosition();
+    };
+    /**
+     * Re-applies in-canvas-parent flex layout after the dock panel wraps or
+     * reparents the canvas slot.
+     */
+    AcUiToolbar.prototype.syncInParentLayout = function () {
+        this.ensureInParentLayout();
+        this.setupResizeObserver();
+        this.scheduleSyncPosition();
+    };
+    /**
+     * Sets the active submenu child for a parent button.
+     *
+     * @param parentId - Parent toolbar item id.
+     * @param childId - Selected child item id.
+     */
+    AcUiToolbar.prototype.setSelectedChild = function (parentId, childId) {
+        this.selectedChildByParent.set(parentId, childId);
+    };
+    Object.defineProperty(AcUiToolbar.prototype, "placement", {
+        /** Current toolbar edge placement. */
+        get: function () {
+            return this.options.placement;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AcUiToolbar.prototype, "isCollapsed", {
+        /** Whether the toolbar is collapsed to the toggle button only. */
+        get: function () {
+            return this.collapsed;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AcUiToolbar.prototype, "isVisible", {
+        /** Whether the toolbar root is visible. */
+        get: function () {
+            return this.visible;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Whether the toolbar root node is still attached to the document. */
+    AcUiToolbar.prototype.isRootConnected = function () {
+        return this.root.isConnected;
+    };
+    /**
+     * Shows or hides the entire toolbar.
+     *
+     * @param visible - Target visibility.
+     */
+    AcUiToolbar.prototype.setVisible = function (visible) {
+        var _a, _b;
+        if (this.visible === visible)
+            return;
+        this.visible = visible;
+        this.root.hidden = !visible;
+        if (!visible) {
+            this.closeChildrenUi();
+            (_b = (_a = this.options).onCollapse) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    };
+    /**
+     * Returns the layer toolbar button, expanding a collapsed toolbar first.
+     */
+    AcUiToolbar.prototype.getLayerButtonAnchor = function () {
+        var _a;
+        if (this.options.collapsible && this.collapsed) {
+            this.setCollapsed(false);
+        }
+        return ((_a = this.root.querySelector('[data-toolbar-item-id="layer"]')) !== null && _a !== void 0 ? _a : undefined);
+    };
+    /**
+     * Sets collapsed state without toggling.
+     *
+     * @param collapsed - Target collapsed state.
+     */
+    AcUiToolbar.prototype.setCollapsed = function (collapsed) {
+        var _a, _b;
+        if (!this.options.collapsible || this.collapsed === collapsed)
+            return;
+        this.collapsed = collapsed;
+        if (collapsed) {
+            this.closeChildrenUi();
+            (_b = (_a = this.options).onCollapse) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        this.syncRootClasses();
+        this.syncCollapseToggleButton();
+        this.scheduleSyncPosition();
+    };
+    /** Closes dropdowns and detaches the toolbar DOM. */
+    AcUiToolbar.prototype.destroy = function () {
+        var _a;
+        if (this.layoutFrame !== undefined) {
+            cancelAnimationFrame(this.layoutFrame);
+            this.layoutFrame = undefined;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        this.closeChildrenUi();
+        this.releaseInParentLayout({ keepRoot: false });
+        this.root.remove();
+    };
+    /** Whether the toolbar stretches along its layout axis. */
+    AcUiToolbar.prototype.isStretchSize = function () {
+        return this.options.size === 'stretch';
+    };
+    /**
+     * Returns the CSS orientation class suffix for the current placement.
+     *
+     * @returns `'vertical'` for left/right, `'horizontal'` for top/bottom.
+     */
+    AcUiToolbar.prototype.getOrientationClass = function () {
+        return this.options.placement === 'left' ||
+            this.options.placement === 'right'
+            ? 'vertical'
+            : 'horizontal';
+    };
+    /** Applies placement, collapsed, and disabled classes on the root element. */
+    AcUiToolbar.prototype.syncRootClasses = function () {
+        var classes = [
+            'ml-ex-ui-toolbar',
+            "is-".concat(this.getOrientationClass()),
+            "is-".concat(this.options.placement)
+        ];
+        if (this.collapsed)
+            classes.push('is-collapsed');
+        if (this.isDisabled)
+            classes.push('is-disabled');
+        if (this.options.showLabels)
+            classes.push('has-labels');
+        if (this.options.size === 'stretch')
+            classes.push('is-stretch');
+        if (this.inCanvasParent)
+            classes.push('is-in-parent');
+        if (this.options.overflow === 'wrap')
+            classes.push('is-overflow-wrap');
+        if (this.options.overflow === 'menu')
+            classes.push('is-overflow-menu');
+        if (!this.showBorder)
+            classes.push('no-border');
+        if (this.showButtonBorder)
+            classes.push('show-button-border');
+        if (this.showChildrenIndicator)
+            classes.push('show-children-indicator');
+        this.root.className = classes.join(' ');
+    };
+    /** Appends icon and optional label content to a toolbar button. */
+    AcUiToolbar.prototype.populateButtonContent = function (button, effective) {
+        if (effective.icon) {
+            button.appendChild(createIconElement(effective.icon));
+        }
+        else if (effective.label && !this.options.showLabels) {
+            var text = document.createElement('span');
+            text.className = 'ml-ex-ui-toolbar-btn-text';
+            text.textContent = this.options.i18n.t(effective.label);
+            text.style.fontSize = '11px';
+            text.style.padding = '0 4px';
+            button.appendChild(text);
+        }
+        if (this.options.showLabels && effective.label) {
+            var label = document.createElement('span');
+            label.className = 'ml-ex-ui-toolbar-btn-label';
+            label.textContent = this.options.i18n.t(effective.label);
+            button.appendChild(label);
+        }
+    };
+    /** Toggles collapsed state when {@link AcUiToolbarMountOptions.collapsible} is enabled. */
+    AcUiToolbar.prototype.toggleCollapsed = function () {
+        this.setCollapsed(!this.collapsed);
+    };
+    /**
+     * Chevron for the collapse toggle: vertical placements use up/down;
+     * horizontal placements (top/bottom) use left/right.
+     */
+    AcUiToolbar.prototype.getCollapseToggleIcon = function () {
+        var horizontal = this.options.placement === 'top' || this.options.placement === 'bottom';
+        if (horizontal) {
+            return this.collapsed ? ICON_CHEVRON_RIGHT : ICON_CHEVRON_LEFT;
+        }
+        return this.collapsed ? ICON_CHEVRON_DOWN : ICON_CHEVRON_UP;
+    };
+    /** Updates collapse toggle icon and labels after locale or state changes. */
+    AcUiToolbar.prototype.syncCollapseToggleButton = function (button) {
+        var target = button !== null && button !== void 0 ? button : this.root.querySelector('[data-toolbar-item-id="toolbar-collapse"]');
+        if (!target)
+            return;
+        var labelKey = this.collapsed ? 'toolbar.expand' : 'toolbar.collapse';
+        target.replaceChildren(createIconElement(this.getCollapseToggleIcon()));
+        target.title = this.options.i18n.t(labelKey);
+        target.setAttribute('aria-label', target.title);
+        target.setAttribute('aria-expanded', String(!this.collapsed));
+    };
+    /** Appends separator and collapse toggle when collapsible mode is enabled. */
+    AcUiToolbar.prototype.appendCollapseToggle = function () {
+        var _this = this;
+        if (!this.options.collapsible)
+            return;
+        if (this.showSeparators) {
+            var separator = document.createElement('div');
+            separator.className = 'ml-ex-ui-toolbar-separator';
+            separator.setAttribute('role', 'separator');
+            this.root.appendChild(separator);
+        }
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'ml-ex-ui-toolbar-btn ml-ex-ui-toolbar-collapse-btn';
+        button.dataset.toolbarItemId = 'toolbar-collapse';
+        this.syncCollapseToggleButton(button);
+        button.addEventListener('click', function (event) {
+            event.stopPropagation();
+            _this.toggleCollapsed();
+        });
+        this.root.appendChild(button);
+    };
+    /** Rebuilds all toolbar buttons from {@link items}. */
+    AcUiToolbar.prototype.renderButtons = function () {
+        var _this = this;
+        var restoreStickyId = this.stickyParentId;
+        this.closeChildrenUi();
+        this.root.replaceChildren();
+        this.renderedEntries = [];
+        this.overflowItems = [];
+        var visibleItems = acuiFilterVisibleToolbarItems(this.items, this.openMode);
+        visibleItems.forEach(function (item) {
+            var _a;
+            if (acuiIsToolbarSeparatorItem(item)) {
+                if (!_this.showSeparators)
+                    return;
+                var separator = document.createElement('div');
+                separator.className = 'ml-ex-ui-toolbar-separator';
+                separator.setAttribute('role', 'separator');
+                if (item.id) {
+                    separator.dataset.toolbarItemId = item.id;
+                }
+                _this.root.appendChild(separator);
+                _this.renderedEntries.push({
+                    item: item,
+                    element: separator,
+                    isSeparator: true
+                });
+                return;
+            }
+            var effective = acuiResolveParentToolbarDisplay(item, _this.selectedChildByParent.get(item.id));
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'ml-ex-ui-toolbar-btn';
+            button.title = effective.label
+                ? _this.options.i18n.t(effective.label)
+                : effective.id;
+            button.setAttribute('aria-label', button.title);
+            button.dataset.toolbarItemId = effective.id;
+            if (((_a = effective.children) === null || _a === void 0 ? void 0 : _a.length) || acuiIsDynamicToolbarChildren(item)) {
+                button.classList.add('has-children');
+                button.setAttribute('aria-haspopup', 'true');
+                button.setAttribute('aria-expanded', 'false');
+            }
+            _this.populateButtonContent(button, effective);
+            var disabled = (acuiItemRequiresDocument(effective) &&
+                (_this.isDisabled || !_this.hasDocument)) ||
+                acuiIsToolbarItemDisabled(effective);
+            button.disabled = disabled;
+            button.addEventListener('click', function (event) {
+                event.stopPropagation();
+                if (button.disabled)
+                    return;
+                _this.activateToolbarItem(item, button);
+            });
+            _this.root.appendChild(button);
+            _this.renderedEntries.push({ item: item, element: button, isSeparator: false });
+        });
+        if (this.options.overflow === 'menu') {
+            this.syncOverflowButtonLabels();
+            this.root.appendChild(this.overflowButton);
+        }
+        this.appendCollapseToggle();
+        this.applyOverflowLayout();
+        this.scheduleSyncPosition();
+        if (restoreStickyId && !this.collapsed && this.visible) {
+            this.openStickyChildrenByParentId(restoreStickyId);
+        }
+    };
+    /**
+     * Runs a toolbar item action or opens its children UI.
+     *
+     * @param item - Source toolbar item definition.
+     * @param anchor - Button element used as the submenu anchor.
+     */
+    AcUiToolbar.prototype.activateToolbarItem = function (item, anchor) {
+        var _this = this;
+        var _a, _b;
+        var effective = acuiResolveParentToolbarDisplay(item, this.selectedChildByParent.get(item.id));
+        if (((_a = effective.children) === null || _a === void 0 ? void 0 : _a.length) || acuiIsDynamicToolbarChildren(item)) {
+            var visibleChildren = this.resolveStripChildItems((_b = effective.children) !== null && _b !== void 0 ? _b : []);
+            if (visibleChildren.length === 0)
+                return;
+            if (this.openParentId === item.id) {
+                this.closeChildrenUi();
+                return;
+            }
+            this.openChildrenUi(item, anchor, visibleChildren);
+            return;
+        }
+        if (effective.anchorAction) {
+            effective.anchorAction(anchor);
+        }
+        else if (effective.action) {
+            effective.action();
+        }
+        else if (effective.command) {
+            this.options.onCommand(effective.command);
+        }
+        if (item.toggle) {
+            window.setTimeout(function () { return _this.renderButtons(); }, 0);
+        }
+    };
+    /** Syncs overflow button tooltip with the active locale. */
+    AcUiToolbar.prototype.syncOverflowButtonLabels = function () {
+        var label = this.options.i18n.t('toolbar.moreOverflow');
+        this.overflowButton.title = label;
+        this.overflowButton.setAttribute('aria-label', label);
+    };
+    /** Applies overflow menu or wrap constraints after render or resize. */
+    AcUiToolbar.prototype.applyOverflowLayout = function () {
+        if (this.collapsed || !this.root.isConnected) {
+            this.overflowButton.hidden = true;
+            this.overflowMenuActive = false;
+            return;
+        }
+        if (this.options.overflow === 'wrap') {
+            this.applyOverflowWrapLayout();
+            return;
+        }
+        if (this.options.overflow === 'menu') {
+            this.applyOverflowMenuLayout();
+        }
+    };
+    /** Constrains wrap layout to the mount host and allows multi-row/column flow. */
+    AcUiToolbar.prototype.applyOverflowWrapLayout = function () {
+        this.overflowButton.hidden = true;
+        this.renderedEntries.forEach(function (entry) {
+            entry.element.hidden = false;
+        });
+        var offset = this.inCanvasParent ? this.sideOffset : this.edgeOffset;
+        var crossInset = this.getCrossAxisInset();
+        var horizontal = this.getOrientationClass() === 'horizontal';
+        var host = this.getLayoutHost();
+        if (horizontal) {
+            var maxWidth = Math.max(0, host.clientWidth - offset * 2);
+            this.root.style.setProperty('--ml-ex-ui-toolbar-max-width', "".concat(maxWidth, "px"));
+            if (this.inCanvasParent) {
+                this.root.style.removeProperty('--ml-ex-ui-toolbar-max-height');
+            }
+            else {
+                var maxHeight = Math.max(0, host.clientHeight - crossInset.near - crossInset.far);
+                this.root.style.setProperty('--ml-ex-ui-toolbar-max-height', "".concat(maxHeight, "px"));
+            }
+        }
+        else {
+            if (this.inCanvasParent) {
+                this.root.style.removeProperty('--ml-ex-ui-toolbar-max-width');
+            }
+            else {
+                var maxWidth = Math.max(0, host.clientWidth - crossInset.near - crossInset.far);
+                this.root.style.setProperty('--ml-ex-ui-toolbar-max-width', "".concat(maxWidth, "px"));
+            }
+            var maxHeight = Math.max(0, host.clientHeight - offset * 2);
+            this.root.style.setProperty('--ml-ex-ui-toolbar-max-height', "".concat(maxHeight, "px"));
+        }
+    };
+    /** Returns the measured size of a toolbar child along the layout axis. */
+    AcUiToolbar.prototype.getEntryAxisSize = function (entry, horizontal) {
+        var measured = horizontal ? entry.offsetWidth : entry.offsetHeight;
+        if (measured > 0)
+            return measured;
+        return entry.classList.contains('ml-ex-ui-toolbar-separator')
+            ? horizontal
+                ? 9
+                : 9
+            : 36;
+    };
+    /** Hides overflowing items behind a ⋯ menu button. */
+    AcUiToolbar.prototype.applyOverflowMenuLayout = function () {
+        this.closeOverflowMenu();
+        this.overflowItems = [];
+        this.overflowMenuActive = false;
+        this.overflowButton.hidden = true;
+        this.renderedEntries.forEach(function (entry) {
+            entry.element.hidden = false;
+        });
+        var horizontal = this.getOrientationClass() === 'horizontal';
+        var hostLimit = this.getOverflowHostLimit(horizontal);
+        // Stretch mode forces root width/height to the host, so offset* metrics never
+        // shrink when items are hidden. Measure intrinsic content size instead.
+        var fullSize = this.getToolbarOverflowMeasureSize(horizontal);
+        if (hostLimit <= 0 || this.renderedEntries.length === 0) {
+            this.root.style.removeProperty('--ml-ex-ui-toolbar-max-width');
+            this.root.style.removeProperty('--ml-ex-ui-toolbar-max-height');
+            return;
+        }
+        if (fullSize <= hostLimit) {
+            this.root.style.removeProperty('--ml-ex-ui-toolbar-max-width');
+            this.root.style.removeProperty('--ml-ex-ui-toolbar-max-height');
+            return;
+        }
+        this.overflowButton.hidden = false;
+        var hideFrom = this.renderedEntries.length;
+        while (true) {
+            for (var i = 0; i < this.renderedEntries.length; i++) {
+                this.renderedEntries[i].element.hidden = i >= hideFrom;
+            }
+            if (this.getToolbarOverflowMeasureSize(horizontal) <= hostLimit ||
+                hideFrom === 0) {
+                break;
+            }
+            hideFrom -= 1;
+        }
+        // Keep at least one primary item visible when possible (avoid ⋯-only bars).
+        if (hideFrom === 0 && this.renderedEntries.length > 0) {
+            hideFrom = 1;
+            for (var i = 0; i < this.renderedEntries.length; i++) {
+                this.renderedEntries[i].element.hidden = i >= hideFrom;
+            }
+        }
+        for (var i = hideFrom; i < this.renderedEntries.length; i++) {
+            var entry = this.renderedEntries[i];
+            if (!entry.isSeparator) {
+                this.overflowItems.push(entry.item);
+            }
+        }
+        this.overflowButton.hidden = this.overflowItems.length === 0;
+        this.overflowMenuActive = !this.overflowButton.hidden;
+        this.root.style.removeProperty('--ml-ex-ui-toolbar-max-width');
+        this.root.style.removeProperty('--ml-ex-ui-toolbar-max-height');
+    };
+    /** Forces layout so axis measurements reflect the current DOM state. */
+    AcUiToolbar.prototype.flushToolbarAxisMeasure = function () {
+        void this.root.offsetHeight;
+        void this.root.offsetWidth;
+    };
+    /**
+     * Intrinsic axis size for overflow-menu decisions (padding + visible children).
+     *
+     * Stretch chrome forces the root box to the host size, so {@link getToolbarAxisSize}
+     * cannot detect overflow. This sums unstretched child sizes instead.
+     */
+    AcUiToolbar.prototype.getToolbarOverflowMeasureSize = function (horizontal) {
+        var e_2, _a;
+        var stretch = this.isStretchSize();
+        var prevWidth = this.root.style.width;
+        var prevHeight = this.root.style.height;
+        if (stretch) {
+            // Drop stretch flex so labeled buttons report natural widths/heights.
+            this.root.classList.remove('is-stretch');
+            this.root.style.width = horizontal ? 'max-content' : prevWidth;
+            this.root.style.height = horizontal ? prevHeight : 'max-content';
+        }
+        this.flushToolbarAxisMeasure();
+        var style = getComputedStyle(this.root);
+        var gap = Number.parseFloat(horizontal ? style.columnGap || style.gap : style.rowGap || style.gap) ||
+            4;
+        var padding = horizontal
+            ? Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight)
+            : Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+        var border = horizontal
+            ? Number.parseFloat(style.borderLeftWidth) +
+                Number.parseFloat(style.borderRightWidth)
+            : Number.parseFloat(style.borderTopWidth) +
+                Number.parseFloat(style.borderBottomWidth);
+        var size = (Number.isFinite(padding) ? padding : 0) +
+            (Number.isFinite(border) ? border : 0);
+        var visibleCount = 0;
+        try {
+            for (var _b = __values(Array.from(this.root.children)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                if (child instanceof HTMLElement && !child.hidden) {
+                    if (visibleCount > 0)
+                        size += gap;
+                    size += this.getEntryAxisSize(child, horizontal);
+                    visibleCount += 1;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        if (stretch) {
+            this.root.classList.add('is-stretch');
+            this.root.style.width = prevWidth;
+            this.root.style.height = prevHeight;
+            this.flushToolbarAxisMeasure();
+        }
+        return size;
+    };
+    /**
+     * Returns the toolbar root size along the layout axis (padding and chrome included).
+     *
+     * Uses live layout metrics; falls back to child summation in test environments.
+     */
+    AcUiToolbar.prototype.getToolbarAxisSize = function (horizontal) {
+        this.flushToolbarAxisMeasure();
+        var measured = horizontal ? this.root.offsetWidth : this.root.offsetHeight;
+        if (measured > 0)
+            return measured;
+        return this.getToolbarOverflowMeasureSize(horizontal);
+    };
+    /** Returns the host axis limit for toolbar content (inside edge offsets). */
+    AcUiToolbar.prototype.getOverflowHostLimit = function (horizontal) {
+        var offset = this.inCanvasParent ? this.sideOffset : this.edgeOffset;
+        var host = this.getLayoutHost();
+        var hostSize = horizontal ? host.clientWidth : host.clientHeight;
+        return Math.max(0, hostSize - offset * 2);
+    };
+    /** Opens or closes the overflow dropdown menu. */
+    AcUiToolbar.prototype.toggleOverflowMenu = function () {
+        var _this = this;
+        if (this.overflowDropdown) {
+            this.closeOverflowMenu();
+            return;
+        }
+        if (this.overflowItems.length === 0)
+            return;
+        this.notifyExclusiveOpen();
+        this.closeChildrenUi();
+        var menuItems = this.overflowItems
+            .map(function (item) {
+            return acuiResolveParentToolbarDisplay(item, _this.selectedChildByParent.get(item.id));
+        })
+            .filter(function (item) { return !acuiIsToolbarSeparatorItem(item); });
+        this.overflowDropdown = new AcUiDropdownMenu(this.options.i18n, menuItems, this.overflowButton, this.themeHost);
+        this.overflowDropdown.setOnSelect(function (child) {
+            _this.activateToolbarItem(child, _this.overflowButton);
+            _this.closeOverflowMenu();
+        });
+        this.overflowDropdown.setOnClose(function () {
+            _this.overflowDropdown = undefined;
+        });
+    };
+    /** Closes the overflow dropdown when open. */
+    AcUiToolbar.prototype.closeOverflowMenu = function () {
+        var _a;
+        (_a = this.overflowDropdown) === null || _a === void 0 ? void 0 : _a.close();
+        this.overflowDropdown = undefined;
+    };
+    AcUiToolbar.prototype.ensureMountHostLayout = function () {
+        if (getComputedStyle(this.mountHost).position === 'static') {
+            this.mountHost.style.position = 'relative';
+        }
+        this.mountHost.classList.add('ml-ex-ui-toolbar-host');
+    };
+    /**
+     * Flex container used for overflow and in-canvas-parent sizing.
+     *
+     * Overlay toolbars measure the mount host. In-canvas-parent toolbars measure
+     * the canvas-slot flex host so the bar tracks the drawing area, not the
+     * outer dock chrome.
+     */
+    AcUiToolbar.prototype.getLayoutHost = function () {
+        var _a;
+        if (this.inCanvasParent) {
+            return (_a = this.inParentHost) !== null && _a !== void 0 ? _a : this.mountHost;
+        }
+        return this.mountHost;
+    };
+    /**
+     * Positioning host for sub-toolbars: optional {@link AcUiToolbarMountOptions.overlayHost},
+     * otherwise the canvas slot when in-canvas-parent so strips overlay the drawing,
+     * otherwise {@link mountHost}.
+     */
+    AcUiToolbar.prototype.getOverlayHost = function () {
+        if (this.options.overlayHost) {
+            return this.options.overlayHost;
+        }
+        if (this.inCanvasParent && this.toolbarMain) {
+            return this.toolbarMain;
+        }
+        return this.mountHost;
+    };
+    /**
+     * Wraps canvas children and places the toolbar as a flex sibling when
+     * {@link inCanvasParent} is enabled. Prefers an existing dock-main slot so
+     * dock side changes do not pull the toolbar onto the dock axis.
+     */
+    AcUiToolbar.prototype.ensureInParentLayout = function () {
+        if (!this.inCanvasParent) {
+            this.releaseInParentLayout({ keepRoot: true });
+            return;
+        }
+        var wrapRoot = this.resolveInParentWrapRoot();
+        this.applyInParentHostClasses(wrapRoot);
+        this.ensureToolbarMainWrapper(wrapRoot);
+        this.placeToolbarInWrapRoot(wrapRoot);
+    };
+    /** Dock-main when present, otherwise the toolbar mount host. */
+    AcUiToolbar.prototype.resolveInParentWrapRoot = function () {
+        var dockMain = this.mountHost.querySelector(':scope > .ml-ex-ui-dock-main');
+        return dockMain instanceof HTMLElement ? dockMain : this.mountHost;
+    };
+    AcUiToolbar.prototype.applyInParentHostClasses = function (wrapRoot) {
+        if (this.inParentHost && this.inParentHost !== wrapRoot) {
+            this.clearInParentHostClasses(this.inParentHost);
+        }
+        this.inParentHost = wrapRoot;
+        wrapRoot.classList.add('ml-ex-ui-toolbar-in-parent');
+        wrapRoot.classList.remove('ml-ex-ui-toolbar-in-parent-top', 'ml-ex-ui-toolbar-in-parent-bottom', 'ml-ex-ui-toolbar-in-parent-left', 'ml-ex-ui-toolbar-in-parent-right');
+        wrapRoot.classList.add("ml-ex-ui-toolbar-in-parent-".concat(this.options.placement));
+    };
+    AcUiToolbar.prototype.clearInParentHostClasses = function (host) {
+        var _a;
+        if (!host)
+            return;
+        (_a = host.classList).remove.apply(_a, __spreadArray([], __read(AcUiToolbar.IN_PARENT_HOST_CLASSES), false));
+    };
+    AcUiToolbar.prototype.shouldSkipInParentMove = function (node) {
+        if (!(node instanceof HTMLElement))
+            return false;
+        return (node === this.root ||
+            node.classList.contains('ml-ex-ui-toolbar') ||
+            node.classList.contains('ml-ex-ui-toolbar-main') ||
+            node.classList.contains('ml-ex-ui-dock-panel') ||
+            node.classList.contains('ml-ex-ui-subtoolbar') ||
+            node.classList.contains('ml-ex-ui-dropdown'));
+    };
+    AcUiToolbar.prototype.ensureToolbarMainWrapper = function (wrapRoot) {
+        var _this = this;
+        var _a;
+        if (((_a = this.toolbarMain) === null || _a === void 0 ? void 0 : _a.parentElement) === wrapRoot)
+            return;
+        var existing = wrapRoot.querySelector(':scope > .ml-ex-ui-toolbar-main');
+        if (existing instanceof HTMLElement) {
+            this.toolbarMain = existing;
+            return;
+        }
+        var movable = [];
+        Array.from(wrapRoot.childNodes).forEach(function (child) {
+            if (_this.shouldSkipInParentMove(child))
+                return;
+            movable.push(child);
+        });
+        var wrapper = document.createElement('div');
+        wrapper.className = 'ml-ex-ui-toolbar-main';
+        movable.forEach(function (node) { return wrapper.appendChild(node); });
+        wrapRoot.appendChild(wrapper);
+        this.toolbarMain = wrapper;
+    };
+    AcUiToolbar.prototype.placeToolbarInWrapRoot = function (wrapRoot) {
+        var placement = this.options.placement;
+        if (placement === 'top' || placement === 'left') {
+            wrapRoot.insertBefore(this.root, wrapRoot.firstChild);
+            return;
+        }
+        wrapRoot.appendChild(this.root);
+    };
+    /**
+     * Unwraps the canvas slot and restores overlay mounting.
+     *
+     * @param options.keepRoot - When true, leaves the toolbar root in the DOM.
+     */
+    AcUiToolbar.prototype.releaseInParentLayout = function (options) {
+        var wasInParent = Boolean(this.inParentHost || this.toolbarMain);
+        this.clearInParentHostClasses(this.inParentHost);
+        this.inParentHost = undefined;
+        this.releaseToolbarMainWrapper();
+        this.clearInParentOffsetStyles();
+        if (wasInParent &&
+            options.keepRoot &&
+            this.root.isConnected &&
+            this.root.parentElement !== this.mountHost &&
+            this.mountHost.isConnected) {
+            this.mountHost.appendChild(this.root);
+        }
+    };
+    AcUiToolbar.prototype.releaseToolbarMainWrapper = function () {
+        var _a;
+        if (!((_a = this.toolbarMain) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+            this.toolbarMain = undefined;
+            return;
+        }
+        var parent = this.toolbarMain.parentElement;
+        if (parent) {
+            while (this.toolbarMain.firstChild) {
+                parent.insertBefore(this.toolbarMain.firstChild, this.toolbarMain);
+            }
+        }
+        this.toolbarMain.remove();
+        this.toolbarMain = undefined;
+    };
+    AcUiToolbar.prototype.clearInParentOffsetStyles = function () {
+        this.root.style.marginTop = '';
+        this.root.style.marginRight = '';
+        this.root.style.marginBottom = '';
+        this.root.style.marginLeft = '';
+    };
+    AcUiToolbar.prototype.setupResizeObserver = function () {
+        var _this = this;
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = new ResizeObserver(function () {
+            _this.scheduleSyncPosition();
+        });
+        this.resizeObserver.observe(this.mountHost);
+        var layoutHost = this.getLayoutHost();
+        if (layoutHost !== this.mountHost) {
+            this.resizeObserver.observe(layoutHost);
+        }
+        if (this.toolbarMain && this.toolbarMain !== layoutHost) {
+            this.resizeObserver.observe(this.toolbarMain);
+        }
+    };
+    AcUiToolbar.prototype.scheduleSyncPosition = function () {
+        var _this = this;
+        if (this.layoutFrame !== undefined)
+            return;
+        this.layoutFrame = requestAnimationFrame(function () {
+            var _a, _b;
+            _this.layoutFrame = undefined;
+            _this.applyOverflowLayout();
+            _this.syncPosition();
+            if (_this.overflowMenuActive) {
+                var horizontal = _this.getOrientationClass() === 'horizontal';
+                var hostLimit = _this.getOverflowHostLimit(horizontal);
+                if (_this.getToolbarOverflowMeasureSize(horizontal) > hostLimit) {
+                    _this.applyOverflowMenuLayout();
+                    _this.syncPosition();
+                }
+            }
+            (_a = _this.openSubToolbar) === null || _a === void 0 ? void 0 : _a.syncPosition();
+            (_b = _this.openNestedSubToolbar) === null || _b === void 0 ? void 0 : _b.syncPosition();
+        });
+    };
+    /** Positions the toolbar inside the canvas, clamped to the current host bounds. */
+    AcUiToolbar.prototype.syncPosition = function () {
+        if (!this.root.isConnected || this.root.hidden)
+            return;
+        if (this.inCanvasParent) {
+            this.applyInParentPosition();
+            return;
+        }
+        this.clearInParentOffsetStyles();
+        var offset = this.edgeOffset;
+        var hostWidth = this.mountHost.clientWidth;
+        var hostHeight = this.mountHost.clientHeight;
+        if (hostWidth <= 0 || hostHeight <= 0)
+            return;
+        this.root.style.top = '';
+        this.root.style.bottom = '';
+        this.root.style.left = '';
+        this.root.style.right = '';
+        this.root.style.transform = '';
+        this.root.style.width = '';
+        this.root.style.height = '';
+        this.root.style.maxWidth = '';
+        this.root.style.maxHeight = '';
+        var toolbarWidth = this.getToolbarAxisSize(true);
+        var toolbarHeight = this.getToolbarAxisSize(false);
+        var placement = this.options.placement;
+        var stretch = this.isStretchSize();
+        if (placement === 'top' || placement === 'bottom') {
+            if (stretch) {
+                this.root.style.left = '0';
+                this.root.style.right = '0';
+                this.root.style.width = "".concat(hostWidth, "px");
+                this.root.style.maxWidth = "".concat(hostWidth, "px");
+            }
+            else {
+                var maxLeft = Math.max(offset, hostWidth - toolbarWidth - offset);
+                var idealLeft = (hostWidth - toolbarWidth) / 2;
+                var left = Math.min(maxLeft, Math.max(offset, idealLeft));
+                this.root.style.left = "".concat(left, "px");
+                this.root.style.maxWidth = "".concat(Math.max(0, hostWidth - offset * 2), "px");
+            }
+            if (placement === 'top') {
+                this.root.style.top = "".concat(offset, "px");
+            }
+            else {
+                this.root.style.bottom = "".concat(offset, "px");
+            }
+            return;
+        }
+        if (stretch) {
+            var stretchHeight = Math.max(0, hostHeight - offset * 2);
+            this.root.style.height = "".concat(stretchHeight, "px");
+            this.root.style.top = "".concat(offset, "px");
+        }
+        else {
+            var lowerTop = offset;
+            var upperTop = hostHeight - toolbarHeight - offset;
+            var idealTop = (hostHeight - toolbarHeight) / 2;
+            // When the shrunk toolbar still fits, keep vertical centering. When it
+            // cannot fit, upperTop is negative and bottom-aligns so ⋯ stays in view.
+            var top_1 = upperTop >= lowerTop
+                ? Math.min(upperTop, Math.max(lowerTop, idealTop))
+                : upperTop;
+            this.root.style.top = "".concat(top_1, "px");
+        }
+        if (placement === 'left') {
+            this.root.style.left = "".concat(offset, "px");
+        }
+        else {
+            this.root.style.right = "".concat(offset, "px");
+        }
+    };
+    /**
+     * Applies edge/side offsets as margins so an in-canvas-parent toolbar sits
+     * against the canvas without overlay positioning.
+     */
+    AcUiToolbar.prototype.applyInParentPosition = function () {
+        this.root.style.top = '';
+        this.root.style.bottom = '';
+        this.root.style.left = '';
+        this.root.style.right = '';
+        this.root.style.transform = '';
+        this.root.style.width = '';
+        this.root.style.height = '';
+        this.root.style.maxWidth = '';
+        this.root.style.maxHeight = '';
+        var offset = this.edgeOffset;
+        var side = this.sideOffset;
+        var placement = this.options.placement;
+        if (placement === 'top' || placement === 'bottom') {
+            this.root.style.marginTop = placement === 'bottom' ? "".concat(offset, "px") : '0';
+            this.root.style.marginBottom = placement === 'top' ? "".concat(offset, "px") : '0';
+            this.root.style.marginLeft = "".concat(side, "px");
+            this.root.style.marginRight = "".concat(side, "px");
+        }
+        else {
+            this.root.style.marginLeft = placement === 'right' ? "".concat(offset, "px") : '0';
+            this.root.style.marginRight = placement === 'left' ? "".concat(offset, "px") : '0';
+            this.root.style.marginTop = "".concat(side, "px");
+            this.root.style.marginBottom = "".concat(side, "px");
+        }
+    };
+    /** Seeds submenu selection from {@link AcUiToolbarItem.selectedChildId}. */
+    AcUiToolbar.prototype.seedSelectedChildren = function (items) {
+        var e_3, _a;
+        var _b;
+        try {
+            for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                var item = items_1_1.value;
+                if (acuiIsToolbarSeparatorItem(item))
+                    continue;
+                if (item.childIcon === 'selected' && item.selectedChildId) {
+                    this.selectedChildByParent.set(item.id, item.selectedChildId);
+                }
+                if (!acuiIsDynamicToolbarChildren(item) && ((_b = item.children) === null || _b === void 0 ? void 0 : _b.length)) {
+                    this.seedSelectedChildren(item.children);
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
+    /**
+     * Resolves visible strip children, applying {@link acuiResolveParentToolbarDisplay}
+     * so nested parents (e.g. toolbar placement under settings) show the active
+     * child icon.
+     */
+    AcUiToolbar.prototype.resolveStripChildItems = function (children) {
+        var _this = this;
+        return acuiFilterVisibleToolbarItems(children, this.openMode).map(function (child) {
+            return acuiResolveParentToolbarDisplay(child, _this.selectedChildByParent.get(child.id));
+        });
+    };
+    /** Closes any open dropdown or sub-toolbar and clears parent expanded state. */
+    AcUiToolbar.prototype.closeChildrenUi = function () {
+        var _a, _b;
+        this.closeOverflowMenu();
+        this.closeNestedSubToolbar();
+        (_a = this.openDropdown) === null || _a === void 0 ? void 0 : _a.close();
+        this.openDropdown = undefined;
+        (_b = this.openSubToolbar) === null || _b === void 0 ? void 0 : _b.close();
+        this.openSubToolbar = undefined;
+        this.clearParentOpenState();
+        this.openParentId = undefined;
+        this.stickyParentId = undefined;
+    };
+    /** Removes `is-open` / `aria-expanded` from the last expanded parent button. */
+    AcUiToolbar.prototype.clearParentOpenState = function () {
+        if (!this.openParentButton)
+            return;
+        this.openParentButton.classList.remove('is-open');
+        this.openParentButton.setAttribute('aria-expanded', 'false');
+        if (this.openParentButton instanceof HTMLElement) {
+            this.openParentButton.blur();
+        }
+        this.openParentButton = undefined;
+    };
+    /**
+     * Marks a parent button as expanded while its children UI is open.
+     *
+     * @param button - Parent toolbar button.
+     */
+    AcUiToolbar.prototype.markParentOpen = function (button) {
+        this.clearParentOpenState();
+        button.classList.add('is-open');
+        button.setAttribute('aria-expanded', 'true');
+        this.openParentButton = button;
+    };
+    /**
+     * Opens a dropdown or sub-toolbar for a parent item.
+     *
+     * @param item - Parent toolbar item.
+     * @param button - Parent button used as the anchor.
+     * @param visibleChildren - Filtered, effective child items.
+     */
+    AcUiToolbar.prototype.openChildrenUi = function (item, button, visibleChildren) {
+        var _this = this;
+        var _a;
+        this.notifyExclusiveOpen();
+        this.closeChildrenUi();
+        var childrenUi = acuiResolveToolbarChildrenUi(item);
+        this.openParentId = item.id;
+        this.markParentOpen(button);
+        if (acuiIsToolbarChildrenStrip(childrenUi)) {
+            var sticky_1 = childrenUi === 'sticky-toolbar';
+            this.stickyParentId = sticky_1 ? item.id : undefined;
+            var strip_1 = new AcUiSubToolbar({
+                i18n: this.options.i18n,
+                items: visibleChildren,
+                anchor: button,
+                toolbarRoot: this.root,
+                host: this.getOverlayHost(),
+                placement: this.options.placement,
+                sticky: sticky_1,
+                chrome: this.resolveSubToolbarChrome(),
+                position: (_a = this.options.subToolbar) === null || _a === void 0 ? void 0 : _a.position,
+                getCrossAxisInset: function () { return _this.getCrossAxisInset(); },
+                commandsDisabled: this.isDisabled || !this.hasDocument,
+                onSelect: function (child, childButton) {
+                    return _this.handleSubToolbarSelect(item, child, childButton, sticky_1);
+                },
+                onClose: function () {
+                    if (_this.openSubToolbar === strip_1) {
+                        _this.closeNestedSubToolbar();
+                        _this.openSubToolbar = undefined;
+                        _this.clearParentOpenState();
+                        _this.openParentId = undefined;
+                        _this.stickyParentId = undefined;
+                    }
+                },
+                shouldKeepOpenForTarget: function (target) { var _a, _b; return (_b = (_a = _this.openNestedSubToolbar) === null || _a === void 0 ? void 0 : _a.containsTarget(target)) !== null && _b !== void 0 ? _b : false; }
+            });
+            this.openSubToolbar = strip_1;
+            return;
+        }
+        var dropdown = new AcUiDropdownMenu(this.options.i18n, visibleChildren, button, this.themeHost);
+        dropdown.setOnSelect(function (child) {
+            _this.activateChild(item, child, false);
+        });
+        dropdown.setOnClose(function () {
+            if (_this.openDropdown === dropdown) {
+                _this.openDropdown = undefined;
+                _this.clearParentOpenState();
+                _this.openParentId = undefined;
+            }
+        });
+        this.openDropdown = dropdown;
+    };
+    /**
+     * Re-opens a sticky sub-toolbar after the main toolbar is rebuilt.
+     *
+     * @param parentId - Parent item id that was sticky-open.
+     */
+    AcUiToolbar.prototype.openStickyChildrenByParentId = function (parentId) {
+        var _a;
+        var item = this.items.find(function (candidate) {
+            if (acuiIsToolbarSeparatorItem(candidate))
+                return false;
+            return candidate.id === parentId;
+        });
+        if (!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (acuiResolveToolbarChildrenUi(item) !== 'sticky-toolbar')
+            return;
+        var button = this.root.querySelector("[data-toolbar-item-id=\"".concat(parentId, "\"]"));
+        if (!button)
+            return;
+        var visibleChildren = this.resolveStripChildItems(item.children);
+        if (visibleChildren.length === 0)
+            return;
+        this.openChildrenUi(item, button, visibleChildren);
+    };
+    /**
+     * Handles a sub-toolbar item click, opening nested strips when needed.
+     *
+     * @param stripParent - Root parent item that owns the first-level strip.
+     * @param child - Sub-toolbar item that was activated.
+     * @param button - Anchor button for nested UI positioning.
+     * @param stripSticky - Whether the first-level strip is sticky.
+     */
+    AcUiToolbar.prototype.handleSubToolbarSelect = function (stripParent, child, button, stripSticky) {
+        var _a, _b;
+        if (acuiIsToolbarSeparatorItem(child))
+            return;
+        var effective = acuiResolveEffectiveToolbarItem(child);
+        if (((_a = effective.children) === null || _a === void 0 ? void 0 : _a.length) ||
+            acuiIsDynamicToolbarChildren(effective)) {
+            var visibleChildren = this.resolveStripChildItems((_b = effective.children) !== null && _b !== void 0 ? _b : []);
+            if (visibleChildren.length === 0)
+                return;
+            this.openNestedSubToolbarUi(effective, button, visibleChildren, stripParent, stripSticky);
+            return;
+        }
+        this.activateChild(stripParent, child, stripSticky);
+        if (!stripSticky) {
+            this.closeChildrenUi();
+        }
+    };
+    /**
+     * Opens a nested icon strip or dropdown for a sub-toolbar parent
+     * (e.g. locale under settings on the phone toolbar).
+     *
+     * @param item - Parent item with nested children.
+     * @param button - Sub-toolbar button used as the nested anchor.
+     * @param visibleChildren - Filtered child items to show.
+     * @param stripParent - First-level strip parent (for refresh after nested select).
+     * @param stripSticky - Whether the first-level strip is sticky.
+     */
+    AcUiToolbar.prototype.openNestedSubToolbarUi = function (item, button, visibleChildren, stripParent, stripSticky) {
+        var _this = this;
+        var _a, _b;
+        if (this.openNestedSubToolbar &&
+            this.openNestedSubToolbar.anchor === button) {
+            this.closeNestedSubToolbar();
+            return;
+        }
+        this.closeNestedSubToolbar();
+        var childrenUi = acuiResolveToolbarChildrenUi(item);
+        var chrome = this.resolveSubToolbarChrome();
+        var replaceOnNested = chrome.replaceOnNested;
+        if (!acuiIsToolbarChildrenStrip(childrenUi)) {
+            var dropdown_1 = new AcUiDropdownMenu(this.options.i18n, visibleChildren, button, this.themeHost);
+            dropdown_1.setOnSelect(function (child) {
+                var _a, _b;
+                _this.activateChild(item, child, false);
+                dropdown_1.close();
+                if (!stripSticky) {
+                    _this.closeChildrenUi();
+                }
+                else {
+                    (_a = _this.openSubToolbar) === null || _a === void 0 ? void 0 : _a.refresh(_this.resolveStripChildItems((_b = stripParent.children) !== null && _b !== void 0 ? _b : []), _this.isDisabled || !_this.hasDocument);
+                }
+            });
+            dropdown_1.setOnClose(function () { return undefined; });
+            return;
+        }
+        if (replaceOnNested) {
+            (_a = this.openSubToolbar) === null || _a === void 0 ? void 0 : _a.setHidden(true);
+        }
+        var nestedSticky = childrenUi === 'sticky-toolbar';
+        var nested = new AcUiSubToolbar({
+            i18n: this.options.i18n,
+            items: visibleChildren,
+            anchor: button,
+            toolbarRoot: replaceOnNested || !this.openSubToolbar
+                ? this.root
+                : this.openSubToolbar.rootElement,
+            host: this.getOverlayHost(),
+            placement: this.options.placement,
+            sticky: nestedSticky,
+            chrome: chrome,
+            position: (_b = this.options.subToolbar) === null || _b === void 0 ? void 0 : _b.position,
+            getCrossAxisInset: function () { return _this.getCrossAxisInset(); },
+            commandsDisabled: this.isDisabled || !this.hasDocument,
+            onSelect: function (child, nestedButton) {
+                return _this.handleSubToolbarSelect(item, child, nestedButton, nestedSticky);
+            },
+            onClose: function () {
+                var _a, _b;
+                if (_this.openNestedSubToolbar === nested) {
+                    _this.openNestedSubToolbar = undefined;
+                    if (replaceOnNested) {
+                        (_a = _this.openSubToolbar) === null || _a === void 0 ? void 0 : _a.setHidden(false);
+                        (_b = _this.openSubToolbar) === null || _b === void 0 ? void 0 : _b.syncPosition();
+                    }
+                }
+            }
+        });
+        this.openNestedSubToolbar = nested;
+    };
+    /** Closes the nested sub-toolbar opened from a parent strip item. */
+    AcUiToolbar.prototype.closeNestedSubToolbar = function () {
+        var _a, _b;
+        var replaceOnNested = this.resolveSubToolbarChrome().replaceOnNested === true;
+        (_a = this.openNestedSubToolbar) === null || _a === void 0 ? void 0 : _a.close();
+        this.openNestedSubToolbar = undefined;
+        if (replaceOnNested) {
+            (_b = this.openSubToolbar) === null || _b === void 0 ? void 0 : _b.setHidden(false);
+        }
+    };
+    /**
+     * Runs a child item's action/command and refreshes parent/child UI as needed.
+     *
+     * @param parent - Parent toolbar item.
+     * @param child - Selected child item.
+     * @param sticky - Whether the child UI should stay open.
+     */
+    AcUiToolbar.prototype.activateChild = function (parent, child, sticky) {
+        var _this = this;
+        var _a;
+        if (acuiIsToolbarSeparatorItem(child))
+            return;
+        var effective = acuiResolveEffectiveToolbarItem(child);
+        if (parent.childIcon === 'selected') {
+            this.selectedChildByParent.set(parent.id, effective.id);
+        }
+        if (effective.action) {
+            effective.action();
+        }
+        else if (effective.command) {
+            this.options.onCommand(effective.command);
+        }
+        var isLocalePick = !acuiIsToolbarSeparatorItem(child) &&
+            effective.id.startsWith('locale-');
+        if (isLocalePick) {
+            this.refreshLocale();
+        }
+        if (child.toggle && sticky && this.openSubToolbar) {
+            window.setTimeout(function () {
+                var _a;
+                if (!_this.openSubToolbar)
+                    return;
+                _this.openSubToolbar.refresh(_this.resolveStripChildItems((_a = parent.children) !== null && _a !== void 0 ? _a : []), _this.isDisabled || !_this.hasDocument);
+            }, 0);
+            return;
+        }
+        // Nested parents under an open strip (e.g. placement under settings):
+        // refresh the strip so the parent button shows the newly selected icon.
+        if (parent.childIcon === 'selected' &&
+            this.openSubToolbar &&
+            this.openParentId &&
+            parent.id !== this.openParentId) {
+            var stripParent_1 = this.items.find(function (candidate) {
+                if (acuiIsToolbarSeparatorItem(candidate))
+                    return false;
+                return candidate.id === _this.openParentId;
+            });
+            if ((_a = stripParent_1 === null || stripParent_1 === void 0 ? void 0 : stripParent_1.children) === null || _a === void 0 ? void 0 : _a.length) {
+                window.setTimeout(function () {
+                    if (!_this.openSubToolbar || !stripParent_1.children)
+                        return;
+                    _this.openSubToolbar.refresh(_this.resolveStripChildItems(stripParent_1.children), _this.isDisabled || !_this.hasDocument);
+                }, 0);
+            }
+        }
+        if (child.toggle) {
+            window.setTimeout(function () { return _this.renderButtons(); }, 0);
+        }
+        else if (parent.childIcon === 'selected' || parent.toggle) {
+            this.renderButtons();
+        }
+    };
+    AcUiToolbar.IN_PARENT_HOST_CLASSES = [
+        'ml-ex-ui-toolbar-in-parent',
+        'ml-ex-ui-toolbar-in-parent-top',
+        'ml-ex-ui-toolbar-in-parent-bottom',
+        'ml-ex-ui-toolbar-in-parent-left',
+        'ml-ex-ui-toolbar-in-parent-right'
+    ];
+    return AcUiToolbar;
+}());
+export { AcUiToolbar };
+//# sourceMappingURL=AcUiToolbar.js.map