@nldd/design-system 0.8.55 → 0.8.57

package/dist/components/actions/toolbar/toolbar.js

@@ -8,46 +8,164 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Nederlandse Digitale Dienst Toolbar Component (Lit + TypeScript)
  *
  * @element nldd-toolbar
- * @attr {string} size - Toolbar size, propagated to all child controls: 'sm' | 'md' (default: 'md')
+ * @attr {string} size - Toolbar size, propagated to all child controls: 'sm' | 'md' | 'lg' (default: 'md'). At 'lg' the overflow button (and lg-capable children like nldd-icon-button) stack their label below the icon.
  * @attr {boolean} show-item-labels - When true, shows a text label below each toolbar item and the overflow button
  * @attr {string} label - Accessible label for the toolbar. Only needed when multiple toolbars appear on the same page
  *
  * @slot start    - nldd-toolbar-item and nldd-toolbar-title elements placed at the start
  * @slot center   - nldd-toolbar-item and nldd-toolbar-title elements placed at the center
  * @slot end      - nldd-toolbar-item and nldd-toolbar-title elements placed at the end
- * @slot overflow - nldd-menu-item and nldd-menu-divider elements always shown in the overflow menu
+ * @slot overflow - nldd-menu-item, nldd-menu-divider and nldd-menu-group elements always shown in the overflow menu
+ *
+ * ---
+ *
+ * @element nldd-toolbar-item
+ * @attr {string} width - Fluid width: a percentage (e.g. '40%') or any CSS length (e.g. '240px'). Setting it (or min-width or max-width) makes the item fluid so it grows to fill the available space.
+ * @attr {string} min-width - Minimum (fluid) width as a CSS length (e.g. '240px'). Setting it also makes the item fluid.
+ * @attr {string} max-width - Maximum (fluid) width as a CSS length (e.g. '480px'). Setting it also makes the item fluid.
+ * @attr {string} label - Text label shown below the item when the toolbar has show-item-labels.
+ * @attr {number} priority - Overflow order: items with a lower priority move into the overflow menu first (default 0). Items sharing a priority overflow together, regardless of position.
+ * @attr {boolean} fluid - Set by nldd-toolbar, not a consumer attribute: marks an item that grows or shrinks to fill space. Toggled synchronously during measurement, so it can appear or disappear between layout frames — do not style against it. It is not reflected as a JS property — read it with hasAttribute('fluid').
+ * @attr {boolean} solo-fluid - Set by nldd-toolbar, not a consumer attribute: the sole fluid item, allowed to shrink below its content. Same synchronous-toggle and property-read caveats as fluid.
+ * @attr {boolean} hidden - Set by nldd-toolbar, not a consumer attribute, when the item moves into the overflow menu. Same synchronous-toggle caveat.
+ *
+ * @slot - The control shown in the toolbar (e.g. nldd-icon-button)
+ * @slot overflow - nldd-menu-item / nldd-menu-divider / nldd-menu-group children, shown in the overflow menu when this item overflows
+ *
+ * ---
+ *
+ * @element nldd-toolbar-title
+ * @attr {string} text - Title text.
+ * @attr {string} supporting-text - Secondary supporting text shown below the title.
+ * @attr {string} align - Text alignment: 'left' | 'center' (default: 'left').
+ * @attr {string} width - Preferred (fluid) width as a CSS length or percentage; the title grows toward it and shrinks to min-width.
+ * @attr {string} min-width - Minimum width as a CSS length (e.g. '200px', default '200px').
+ * @attr {string} max-width - Maximum width as a CSS length (e.g. '480px').
  */
 import { LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { toolbarStyles } from './toolbar.styles.js';
-import { template } from './toolbar.template.js';
+import { toolbarStyles, toolbarItemStyles, toolbarTitleStyles } from './toolbar.styles.js';
+import { template, toolbarItemTemplate, toolbarTitleTemplate } from './toolbar.template.js';
 import { nlddToolbarTranslations } from './toolbar.i18n.js';
-// # Marker elements
-if (!customElements.get('nldd-toolbar-item')) {
-    customElements.define('nldd-toolbar-item', class extends HTMLElement {
-        constructor() {
-            super();
-            this.attachShadow({ mode: 'open' }).innerHTML = '<slot></slot><slot name="overflow" style="display:none"></slot>';
+// # nldd-toolbar-item
+let NLDDToolbarItem = class NLDDToolbarItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.width = '';
+        this.minWidth = '';
+        this.maxWidth = '';
+        this.label = '';
+        this.priority = 0;
+        /** Set by nldd-toolbar; not part of the public API. @internal */
+        this.size = 'md';
+        /** Set by nldd-toolbar; not part of the public API. @internal */
+        this.showItemLabels = false;
+    }
+    // Layout state — `fluid`, `solo-fluid` and `hidden` — is owned by
+    // nldd-toolbar and toggled directly as attributes during measurement
+    // (synchronous, so the host box reflows immediately). They are not
+    // reactive properties: Lit would reflect them asynchronously, which would
+    // desync the attribute from the synchronous getBoundingClientRect reads.
+    render() {
+        return toolbarItemTemplate(this);
+    }
+};
+NLDDToolbarItem.styles = toolbarItemStyles;
+__decorate([
+    property({ type: String })
+], NLDDToolbarItem.prototype, "width", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-width' })
+], NLDDToolbarItem.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-width' })
+], NLDDToolbarItem.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToolbarItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDToolbarItem.prototype, "priority", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToolbarItem.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-item-labels' })
+], NLDDToolbarItem.prototype, "showItemLabels", void 0);
+NLDDToolbarItem = __decorate([
+    customElement('nldd-toolbar-item')
+], NLDDToolbarItem);
+export { NLDDToolbarItem };
+// # nldd-toolbar-title
+let NLDDToolbarTitle = class NLDDToolbarTitle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.supportingText = '';
+        this.align = 'left';
+        this.width = '';
+        this.minWidth = '';
+        this.maxWidth = '';
+        /** Set by nldd-toolbar; not part of the public API. @internal */
+        this.size = 'md';
+    }
+    // Layout state — `solo-fluid` and `hidden` — is owned by nldd-toolbar and
+    // toggled directly as attributes during measurement (synchronous). Not a
+    // reactive property for the same reflection-timing reason as the item.
+    // willUpdate (not updated) so the size CSS variables are written before the
+    // toolbar measures the title with getBoundingClientRect() on the same frame.
+    willUpdate(changedProperties) {
+        if (changedProperties.has('minWidth'))
+            this._reflectSizeVar('--_title-group-min-width', this.minWidth);
+        if (changedProperties.has('width'))
+            this._reflectSizeVar('--_title-width', this.width);
+        if (changedProperties.has('maxWidth'))
+            this._reflectSizeVar('--_title-max-width', this.maxWidth);
+    }
+    _reflectSizeVar(prop, value) {
+        if (value) {
+            this.style.setProperty(prop, value);
         }
-    });
-}
-if (!customElements.get('nldd-toolbar-title')) {
-    customElements.define('nldd-toolbar-title', class extends HTMLElement {
-    });
-}
+        else {
+            this.style.removeProperty(prop);
+        }
+    }
+    render() {
+        return toolbarTitleTemplate(this);
+    }
+};
+NLDDToolbarTitle.styles = toolbarTitleStyles;
+__decorate([
+    property({ type: String })
+], NLDDToolbarTitle.prototype, "text", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDToolbarTitle.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToolbarTitle.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToolbarTitle.prototype, "width", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-width' })
+], NLDDToolbarTitle.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-width' })
+], NLDDToolbarTitle.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToolbarTitle.prototype, "size", void 0);
+NLDDToolbarTitle = __decorate([
+    customElement('nldd-toolbar-title')
+], NLDDToolbarTitle);
+export { NLDDToolbarTitle };
 // # Component
 let NLDDToolbar = class NLDDToolbar extends LitElement {
     constructor() {
         super(...arguments);
-        /** Controls the size of toolbar items. Propagated automatically to all child controls. */
         this.size = 'md';
-        /** When true, shows a text label below each toolbar item and the overflow button. */
         this.showItemLabels = false;
-        /**
-         * Accessible label for the toolbar, exposed as `aria-label` on the `role="toolbar"` container.
-         * Only needed when multiple toolbars appear on the same page so screen readers can distinguish them.
-         * @example `<nldd-toolbar label="Formatting">`
-         */
         this.label = '';
         this.translations = {};
         this._menuOpen = false;
@@ -120,11 +238,11 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
             this._measureAndUpdate();
         });
         this._resizeObserver.observe(this);
-        this._propagateSize();
+        this._syncHosts();
     }
     updated(changedProperties) {
-        if (changedProperties.has('size')) {
-            this._propagateSize();
+        if (changedProperties.has('size') || changedProperties.has('showItemLabels')) {
+            this._syncHosts();
         }
         if (changedProperties.has('_startChildren') ||
             changedProperties.has('_centerChildren') ||
@@ -208,13 +326,49 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
             });
         }
     }
-    _propagateSize() {
-        Array.from(this.querySelectorAll('nldd-toolbar-item')).forEach(item => {
-            Array.from(item.children).forEach(child => {
-                if (child.getAttribute('slot') !== 'overflow') {
-                    child.setAttribute('size', this.size);
+    /**
+     * Syncs declarative state onto the slotted item and title hosts: size,
+     * show-item-labels, the base fluid flag and the fluid width custom
+     * properties. The parent owns layout decisions; each host owns its own box
+     * and rendering. Attributes are set directly (not via reactive properties)
+     * so the host box reflows synchronously before the next measurement.
+     */
+    _syncHosts() {
+        this._allHostChildren().forEach(child => {
+            if (child.type === 'item') {
+                const host = child.element;
+                host.setAttribute('size', this.size);
+                host.toggleAttribute('show-item-labels', this.showItemLabels);
+                host.toggleAttribute('fluid', child.isFluid);
+                if (child.isFluid && child.minWidth) {
+                    host.style.setProperty('--_item-min-width', child.minWidth);
                 }
-            });
+                else {
+                    host.style.removeProperty('--_item-min-width');
+                }
+                if (child.isFluid && child.width) {
+                    host.style.setProperty('--_item-width', child.width);
+                }
+                else {
+                    host.style.removeProperty('--_item-width');
+                }
+                if (child.isFluid && child.maxWidth) {
+                    host.style.setProperty('--_item-max-width', child.maxWidth);
+                }
+                else {
+                    host.style.removeProperty('--_item-max-width');
+                }
+                // Forward size to the inner control(s).
+                Array.from(host.children).forEach(inner => {
+                    if (inner.getAttribute('slot') !== 'overflow') {
+                        inner.setAttribute('size', this.size);
+                    }
+                });
+            }
+            else if (child.type === 'title') {
+                const host = child.element;
+                host.setAttribute('size', this.size);
+            }
         });
     }
     _getPrioritizedItems() {
@@ -242,11 +396,21 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         this._prioritizedItemsCache = result;
         return result;
     }
+    _allHostChildren() {
+        return [...this._startChildren, ...this._centerChildren, ...this._endChildren];
+    }
+    _hostFor(id) {
+        const child = this._allHostChildren().find(c => c.id === id);
+        return (child && (child.type === 'item' || child.type === 'title'))
+            ? child.element
+            : null;
+    }
     _measureItemWidths() {
-        const measurableEls = Array.from(this.shadowRoot?.querySelectorAll('.toolbar__item[data-child-id], .toolbar__title-group[data-child-id]') ?? []);
-        measurableEls.forEach(el => {
-            const id = Number(el.dataset.childId);
-            this._itemWidths.set(id, el.getBoundingClientRect().width);
+        this._allHostChildren().forEach(child => {
+            if (child.type === 'item' || child.type === 'title') {
+                const host = child.element;
+                this._itemWidths.set(child.id, host.getBoundingClientRect().width);
+            }
         });
     }
     _computeAreaWidth(children, itemGap) {
@@ -311,25 +475,26 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
     }
     _measureOverflow(itemsEl) {
         const overflowButtonEl = this.shadowRoot?.querySelector('.toolbar__overflow-button');
-        const allItemEls = Array.from(this.shadowRoot?.querySelectorAll('.toolbar__item[data-child-id]') ?? []);
-        const allTitleGroupEls = Array.from(this.shadowRoot?.querySelectorAll('.toolbar__title-group[data-child-id]') ?? []);
-        const allChildren = [...this._startChildren, ...this._centerChildren, ...this._endChildren];
-        // Show all items, reset solo-fluid to is-fluid with min-width restored
-        allItemEls.forEach(el => {
-            el.classList.remove('is-hidden');
-            if (el.classList.contains('is-solo-fluid')) {
-                el.classList.replace('is-solo-fluid', 'is-fluid');
-                const id = Number(el.dataset.childId);
-                const child = allChildren.find(c => c.id === id);
-                if (child?.type === 'item' && child.minWidth) {
-                    el.style.setProperty('--_item-min-width', child.minWidth);
+        const allChildren = this._allHostChildren();
+        const itemChildren = allChildren.filter((c) => c.type === 'item');
+        const titleChildren = allChildren.filter((c) => c.type === 'title');
+        // Show all items, reset solo-fluid to fluid with min-width restored.
+        itemChildren.forEach(child => {
+            const host = child.element;
+            host.hidden = false;
+            if (host.hasAttribute('solo-fluid')) {
+                host.removeAttribute('solo-fluid');
+                host.toggleAttribute('fluid', child.isFluid);
+                if (child.isFluid && child.minWidth) {
+                    host.style.setProperty('--_item-min-width', child.minWidth);
                 }
             }
         });
-        allTitleGroupEls.forEach(el => {
-            if (el.classList.contains('is-solo-fluid')) {
-                el.classList.remove('is-solo-fluid');
-                el.style.removeProperty('min-width');
+        titleChildren.forEach(child => {
+            const host = child.element;
+            if (host.hasAttribute('solo-fluid')) {
+                host.removeAttribute('solo-fluid');
+                host.style.removeProperty('min-width');
             }
         });
         if (this._pinnedOverflowItems.length > 0) {
@@ -339,11 +504,15 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
             overflowButtonEl?.classList.add('is-hidden');
         }
         void itemsEl.offsetWidth;
+        const centerOnly = this._startChildren.length === 0
+            && this._endChildren.length === 0
+            && this._centerChildren.length > 0;
         const isOverflowing = () => itemsEl.scrollWidth > itemsEl.clientWidth + 1;
         if (!isOverflowing()) {
             if (this._overflowIds.size > 0) {
                 this._overflowIds = new Set();
             }
+            this._promoteSoloFluid(itemsEl, itemChildren, titleChildren, centerOnly);
             this._measureItemWidths();
             this._updateAreaVars();
             return;
@@ -352,36 +521,32 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         void itemsEl.offsetWidth;
         const prioritized = this._getPrioritizedItems();
         const newOverflowIds = new Set();
-        for (const child of prioritized) {
+        const priorityGroups = groupForOverflow(prioritized);
+        for (const group of priorityGroups) {
             if (!isOverflowing())
                 break;
-            if (child.isFluid) {
-                const remainingVisible = allItemEls.filter(el => !el.classList.contains('is-hidden') &&
-                    !el.classList.contains('is-fluid') &&
-                    !el.classList.contains('is-solo-fluid'));
-                if (remainingVisible.length === 0)
+            // Fluid-guard (per group): never hide the last fluid fallback. If
+            // hiding this group would leave no non-fluid item visible, stop and
+            // let a remaining fluid item shrink (solo-fluid) instead.
+            if (group.some(c => c.isFluid)) {
+                const groupIds = new Set(group.map(c => c.id));
+                const nonFluidVisibleOutside = itemChildren.filter(c => {
+                    const host = c.element;
+                    return !host.hidden && !host.hasAttribute('fluid') && !host.hasAttribute('solo-fluid') && !groupIds.has(c.id);
+                });
+                if (nonFluidVisibleOutside.length === 0)
                     break;
             }
-            newOverflowIds.add(child.id);
-            const el = this.shadowRoot?.querySelector(`.toolbar__item[data-child-id="${child.id}"]`);
-            el?.classList.add('is-hidden');
+            for (const child of group) {
+                newOverflowIds.add(child.id);
+                child.element.hidden = true;
+            }
             void itemsEl.offsetWidth;
         }
         if (newOverflowIds.size === 0 && this._pinnedOverflowItems.length === 0) {
             overflowButtonEl?.classList.add('is-hidden');
         }
-        const remainingVisible = allItemEls.filter(el => !el.classList.contains('is-hidden'));
-        if (remainingVisible.length === 1 && remainingVisible[0].classList.contains('is-fluid')) {
-            remainingVisible[0].classList.replace('is-fluid', 'is-solo-fluid');
-            remainingVisible[0].style.removeProperty('--_item-min-width');
-            void itemsEl.offsetWidth;
-        }
-        const remainingTitleGroups = allTitleGroupEls.filter(el => !el.classList.contains('is-hidden'));
-        if (remainingVisible.length === 0 && remainingTitleGroups.length === 1) {
-            remainingTitleGroups[0].classList.add('is-solo-fluid');
-            remainingTitleGroups[0].style.setProperty('min-width', '0px');
-            void itemsEl.offsetWidth;
-        }
+        this._promoteSoloFluid(itemsEl, itemChildren, titleChildren, centerOnly);
         const changed = newOverflowIds.size !== this._overflowIds.size ||
             [...newOverflowIds].some(id => !this._overflowIds.has(id));
         if (changed) {
@@ -390,6 +555,29 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         this._measureItemWidths();
         this._updateAreaVars();
     }
+    /**
+     * Promotes a lone remaining fluid item — or a lone title when no items are
+     * visible — to the solo-fluid state so it grows to fill the row. In
+     * center-only mode the center-fill wrapper already grows the items, so item
+     * promotion is skipped there (matching the previous template behaviour).
+     */
+    _promoteSoloFluid(itemsEl, itemChildren, titleChildren, centerOnly) {
+        const remainingVisible = itemChildren.filter(c => !c.element.hidden);
+        if (!centerOnly && remainingVisible.length === 1 && remainingVisible[0].element.hasAttribute('fluid')) {
+            const host = remainingVisible[0].element;
+            host.removeAttribute('fluid');
+            host.setAttribute('solo-fluid', '');
+            host.style.removeProperty('--_item-min-width');
+            void itemsEl.offsetWidth;
+        }
+        const remainingTitles = titleChildren.filter(c => !c.element.hidden);
+        if (remainingVisible.length === 0 && remainingTitles.length === 1) {
+            const host = remainingTitles[0].element;
+            host.setAttribute('solo-fluid', '');
+            host.style.setProperty('min-width', '0px');
+            void itemsEl.offsetWidth;
+        }
+    }
     _buildChildrenForSlot(slotName) {
         return Array.from(this.children)
             .filter(el => el.getAttribute('slot') === slotName)
@@ -397,13 +585,9 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
             const tag = el.tagName.toLowerCase();
             if (tag === 'nldd-toolbar-title') {
                 const id = this._getId(el);
-                el.dataset.toolbarSlot = slotName;
-                el.setAttribute('slot', `child-${id}`);
                 return {
                     type: 'title',
-                    title: el.getAttribute('text') ?? '',
-                    supportingText: el.getAttribute('supporting-text') ?? '',
-                    align: el.getAttribute('align') ?? 'left',
+                    element: el,
                     minWidth: el.getAttribute('min-width') ?? '200px',
                     id,
                 };
@@ -412,26 +596,19 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
                 const id = this._getId(el);
                 const label = el.getAttribute('label') ?? '';
                 const priority = parseInt(el.getAttribute('priority') ?? '0', 10);
+                const hasPriority = el.hasAttribute('priority');
                 const minWidth = el.getAttribute('min-width') ?? '';
+                const maxWidth = el.getAttribute('max-width') ?? '';
                 const width = el.getAttribute('width') ?? '';
-                const isFluid = !!(minWidth || width);
-                Array.from(el.children).forEach(child => {
-                    if (child.getAttribute('slot') !== 'overflow') {
-                        child.setAttribute('size', this.size);
-                    }
-                });
-                el.dataset.toolbarSlot = slotName;
-                el.setAttribute('slot', `child-${id}`);
+                const isFluid = !!(minWidth || maxWidth || width);
                 const overflowItems = Array.from(el.children).filter(child => {
                     const childTag = child.tagName.toLowerCase();
-                    return childTag === 'nldd-menu-item' || childTag === 'nldd-menu-divider';
+                    return childTag === 'nldd-menu-item' || childTag === 'nldd-menu-divider' || childTag === 'nldd-menu-group';
                 });
                 overflowItems.forEach(child => child.setAttribute('slot', 'overflow'));
-                return { type: 'item', element: el, label, id, priority, overflowItems, minWidth, width, isFluid };
+                return { type: 'item', element: el, label, id, priority, hasPriority, overflowItems, minWidth, maxWidth, width, isFluid };
             }
             const id = this._getId(el);
-            el.dataset.toolbarSlot = slotName;
-            el.setAttribute('slot', `child-${id}`);
             return { type: 'other', element: el, id };
         });
     }
@@ -439,15 +616,7 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         this._pinnedOverflowItems = Array.from(this.children).filter(el => {
             const tag = el.tagName.toLowerCase();
             return el.getAttribute('slot') === 'overflow' &&
-                (tag === 'nldd-menu-item' || tag === 'nldd-menu-divider');
-        });
-    }
-    _restoreSlots() {
-        Array.from(this.children)
-            .filter((el) => el instanceof HTMLElement && !!el.dataset.toolbarSlot)
-            .forEach(el => {
-            el.setAttribute('slot', el.dataset.toolbarSlot);
-            delete el.dataset.toolbarSlot;
+                (tag === 'nldd-menu-item' || tag === 'nldd-menu-divider' || tag === 'nldd-menu-group');
         });
     }
     _buildChildren() {
@@ -455,22 +624,22 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
             return;
         this._isBuilding = true;
         this._observer?.disconnect();
-        this._restoreSlots();
         this._startChildren = this._buildChildrenForSlot('start');
         this._centerChildren = this._buildChildrenForSlot('center');
         this._endChildren = this._buildChildrenForSlot('end');
         this._buildPinnedOverflowItems();
         this._prioritizedItemsCache = null;
-        const itemAttributeFilter = ['label', 'priority', 'min-width', 'width', 'text', 'disabled', 'selected', 'type'];
+        this._syncHosts();
+        const itemAttributeFilter = ['label', 'priority', 'min-width', 'max-width', 'width', 'text', 'disabled', 'selected', 'type'];
         this._observer?.observe(this, { childList: true, attributes: true, subtree: true, attributeFilter: itemAttributeFilter });
         this._isBuilding = false;
     }
     render() {
-        const allChildren = [...this._startChildren, ...this._centerChildren, ...this._endChildren];
+        const allChildren = this._allHostChildren();
         const visibleNonDivider = allChildren.filter(c => !this._overflowIds.has(c.id));
         const isSoloFluid = visibleNonDivider.length === 1 && (visibleNonDivider[0].type === 'title' ||
             (visibleNonDivider[0].type === 'item' && visibleNonDivider[0].isFluid));
-        return template(this._startChildren, this._centerChildren, this._endChildren, this._overflowIds, this.size, this._centerChildren.length > 0, this._leftSpacerZero, this._rightSpacerZero, isSoloFluid, this._pinnedOverflowItems.length > 0 || this._overflowIds.size > 0, this._menuOpen, this.label, this._startChildren.length === 0 && this._endChildren.length === 0 && this._centerChildren.length > 0, (key) => this._t(key));
+        return template(this, this._centerChildren.length > 0, this._leftSpacerZero, this._rightSpacerZero, isSoloFluid, this._pinnedOverflowItems.length > 0 || this._overflowIds.size > 0, this._menuOpen, this.label, this._startChildren.length === 0 && this._endChildren.length === 0 && this._centerChildren.length > 0, (key) => this._t(key));
     }
 };
 NLDDToolbar.styles = toolbarStyles;
@@ -514,4 +683,31 @@ NLDDToolbar = __decorate([
     customElement('nldd-toolbar')
 ], NLDDToolbar);
 export { NLDDToolbar };
+/**
+ * Groups prioritized items for overflow. Items with an explicit priority that
+ * share a value form one group and overflow together regardless of their
+ * position; items without a priority attribute each form their own group
+ * (they overflow individually).
+ *
+ * @internal Exported for unit tests only; not part of the public API.
+ */
+export function groupForOverflow(items) {
+    const groups = [];
+    const byPriority = new Map();
+    for (const child of items) {
+        if (!child.hasPriority) {
+            groups.push([child]);
+            continue;
+        }
+        const existing = byPriority.get(child.priority);
+        if (existing) {
+            existing.push(child);
+            continue;
+        }
+        const group = [child];
+        byPriority.set(child.priority, group);
+        groups.push(group);
+    }
+    return groups;
+}
 //# sourceMappingURL=toolbar.js.map