@nldd/design-system 0.8.68 → 0.8.70

package/dist/components/actions/menu/menu.template.js

@@ -10,53 +10,78 @@ const itemRoleMap = {
     radio: { menu: 'menuitemradio', listbox: 'option' },
 };
 export function menuTemplate(isEmpty, variant) {
-    // Drop role="menu"/"listbox" when empty. The empty-state slot renders an
-    // nldd-inline-dialog, which is neither a menuitem nor an option — keeping
-    // the role here would violate ARIA's required-children rules.
-    const menuRole = isEmpty ? nothing : menuRoleMap[variant];
+    // role="menu"/"listbox" is now STATIC on .menu__list, which only ever owns
+    // nldd-menu-item children. The empty-state and the drill-in back button live
+    // in .menu__main as siblings of the list (outside the role), so an empty or
+    // filtered menu never needs to drop the role to stay ARIA-valid.
+    const menuRole = menuRoleMap[variant];
     // Back button shows when this menu is itself a submenu and we're rendering
     // in drill-in mode (touch / narrow viewport). The label is the parent
     // item's text — gives the user context about which level they're in.
     const showBack = this._isSubmenu && this._drillInMode && this._parentItem !== null;
+    // Header/footer are ROOT-ONLY: never rendered in a submenu (identity and
+    // account-level actions belong to the root menu, not a nested level). The
+    // slot is only in the DOM on the root, so submenu-slotted header/footer
+    // content is simply not projected.
+    const isRoot = !this._isSubmenu;
     return html `
 		<div class="menu"
-			role=${menuRole}
 			tabindex="-1"
 			@touchstart=${this._handleMenuTouchStart}
 			@touchmove=${this._handleMenuTouchMove}
 			@touchend=${this._handleMenuTouchEnd}
 			@touchcancel=${this._handleMenuTouchEnd}
 		>
-			${showBack ? html `
-				<button class="menu__back-button"
-					type="button"
-					aria-label=${this._resolvedBackLabel}
-					@click=${this._handleBack}
-					@mouseenter=${this._handleBackMouseenter}
+			${isRoot ? html `
+				<div class="menu__header"
+					?hidden=${!this._hasHeader}
 				>
-					<nldd-icon-cell
-						size="20"
-						icon="chevron-left"
-					></nldd-icon-cell>
-					<nldd-spacer-cell size="6"></nldd-spacer-cell>
-					<nldd-text-cell text=${this._parentItem.text}></nldd-text-cell>
-				</button>
-				<!-- Pure visual divider; role="none" keeps strict ARIA validators
-				     quiet (a focusable role="separator" inside a menu would need
-				     aria-valuenow et al.; this one is decorative). -->
-				<div class="menu__back-button-divider"
-					role="none"
-				></div>
+					<slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+				</div>
 			` : nothing}
-			<slot></slot>
-			${isEmpty ? html `
-				<div class="menu__empty">
-					<slot name="empty">
-						<nldd-inline-dialog
-							text=${this._resolvedEmptyText}
-							supporting-text=${this.emptySupportingText || nothing}
-						></nldd-inline-dialog>
-					</slot>
+			<div class="menu__main">
+				${showBack ? html `
+					<button class="menu__back-button"
+						type="button"
+						aria-label=${this._resolvedBackLabel}
+						@click=${this._handleBack}
+						@mouseenter=${this._handleBackMouseenter}
+					>
+						<nldd-icon-cell
+							size="20"
+							icon="chevron-left"
+						></nldd-icon-cell>
+						<nldd-spacer-cell size="6"></nldd-spacer-cell>
+						<nldd-text-cell text=${this._parentItem.text}></nldd-text-cell>
+					</button>
+					<!-- Pure visual divider; role="none" keeps strict ARIA validators
+					     quiet (a focusable role="separator" inside a menu would need
+					     aria-valuenow et al.; this one is decorative). -->
+					<div class="menu__back-button-divider"
+						role="none"
+					></div>
+				` : nothing}
+				<div class="menu__list"
+					role=${menuRole}
+				>
+					<slot></slot>
+				</div>
+				${isEmpty ? html `
+					<div class="menu__empty">
+						<slot name="empty">
+							<nldd-inline-dialog
+								text=${this._resolvedEmptyText}
+								supporting-text=${this.emptySupportingText || nothing}
+							></nldd-inline-dialog>
+						</slot>
+					</div>
+				` : nothing}
+			</div>
+			${isRoot ? html `
+				<div class="menu__footer"
+					?hidden=${!this._hasFooter}
+				>
+					<slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
 				</div>
 			` : nothing}
 		</div>

package/dist/components/actions/menu/menu.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../../src/components/actions/menu/menu.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../../src/components/actions/menu/menu.template.ts"],"names":[],"mappings":"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"}

package/dist/components/actions/split-button/split-button.d.ts

@@ -2,10 +2,11 @@
  * Nederlandse Digitale Dienst Split Button Component (Lit + TypeScript)
  *
  * A split button combines a primary action button with a dropdown trigger.
- * The main button performs the default action, while the icon button opens a menu.
+ * The main button performs the default action, while the icon button opens a
+ * menu or popover.
  *
  * Provide the dropdown by slotting an `nldd-menu` (with its `nldd-menu-item` /
- * `nldd-menu-divider` children) directly:
+ * `nldd-menu-divider` children) or an `nldd-popover` directly:
  *
  * ```html
  * <nldd-split-button text="Opslaan">
@@ -15,11 +16,10 @@
  * </nldd-split-button>
  * ```
  *
- * The slotted menu stays in the light DOM — no item-moving — so consumers keep
- * their references and the full nldd-menu API (submenus, groups, config). The
- * split-button anchors it to the chevron and opens it on click. When no
- * `nldd-menu` is slotted, the chevron dispatches `menu-click` and the consumer
- * manages their own popover.
+ * The slotted overlay stays in the light DOM — no item-moving — so consumers
+ * keep their references and the full overlay API. The split-button anchors it
+ * to the chevron and opens it on click. When no overlay is slotted, the chevron
+ * dispatches `menu-click` and the consumer manages their own popover.
  *
  * @element nldd-split-button
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
@@ -30,16 +30,18 @@
  * @attr {string} icon - Icon name shown before the text on the primary action button
  * @attr {object} translations - Translations; unset keys fall back to Dutch
  *
- * @slot - A single `nldd-menu` that the chevron opens.
+ * @slot - A single `nldd-menu` or `nldd-popover` that the chevron opens.
  *
  * @fires action-click - Fired when the main button is clicked
- * @fires menu-click - Fired when the dropdown trigger is clicked and no nldd-menu is slotted
+ * @fires menu-click - Fired when the dropdown trigger is clicked and no overlay is slotted
  */
 import { LitElement } from 'lit';
 import type { NLDDSplitButtonTranslations } from './split-button.i18n.js';
 import './../button/button.js';
 import './../icon-button/icon-button.js';
 import '../../actions/menu/menu.js';
+import { PopupAnchorController } from '../../../utilities/popup-anchor-controller.js';
+/** A floating overlay the split-button chevron anchors and toggles. */
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export declare class NLDDSplitButton extends LitElement {
     static styles: import("lit").CSSResult;
@@ -55,18 +57,14 @@ export declare class NLDDSplitButton extends LitElement {
     translations: Partial<NLDDSplitButtonTranslations>;
     private _popupButtonWrapper?;
     _menuIsOpen: boolean;
-    /** The consumer-slotted `nldd-menu`, or null when none is provided. */
-    private _menu;
-    private _menuWasOpenOnPointerdown;
+    /** Shared wiring for the consumer-slotted overlay. Anchors to the chevron's
+     * wrapper rather than the host, and keeps `_menuIsOpen` (the chevron's
+     * expanded visual) in step via `toggle`. Not private: the template module
+     * binds its slotchange handler. */
+    _popup: PopupAnchorController;
     _t(key: keyof NLDDSplitButtonTranslations): string;
     firstUpdated(): void;
     disconnectedCallback(): void;
-    /**
-     * Wires the slotted `nldd-menu` to the chevron: anchors it to the popup
-     * button and tracks its open state. Re-runs whenever the slotted content
-     * changes (menu added, removed or replaced).
-     */
-    _handleSlotChange(event: Event): void;
     private _handleMenuToggle;
     _handleActionClick(e: MouseEvent): void;
     _handleMenuClick(e: MouseEvent): void;

package/dist/components/actions/split-button/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AAGpC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,OAAO,EAAE,MAAM,CAAoB;IAGnC,QAAQ,UAAS;IAEjB,qHAAqH;IAErH,KAAK,SAAM;IAEX,0CAA0C;IAE1C,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAGV,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAKxD,OAAO,CAAC,mBAAmB,CAAC,CAAiB;IAG7C,WAAW,UAAS;IAEpB,uEAAuE;IACvE,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,yBAAyB,CAAS;IAInC,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMhD,YAAY,IAAI,IAAI;IAmBpB,oBAAoB,IAAI,IAAI;IAKrC;;;;OAIG;IACH,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAcrC,OAAO,CAAC,iBAAiB,CAEvB;IAEF,kBAAkB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMvC,gBAAgB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAgB5B,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBzD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAEtF,uEAAuE;AAGvE,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,OAAO,EAAE,MAAM,CAAoB;IAGnC,QAAQ,UAAS;IAEjB,qHAAqH;IAErH,KAAK,SAAM;IAEX,0CAA0C;IAE1C,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAGV,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAKxD,OAAO,CAAC,mBAAmB,CAAC,CAAiB;IAG7C,WAAW,UAAS;IAEpB;;;uCAGmC;IACnC,MAAM,wBAOH;IAII,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMhD,YAAY,IAAI,IAAI;IAOpB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,iBAAiB,CAEvB;IAEF,kBAAkB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMvC,gBAAgB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAU5B,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBzD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/actions/split-button/split-button.js

@@ -8,10 +8,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Nederlandse Digitale Dienst Split Button Component (Lit + TypeScript)
  *
  * A split button combines a primary action button with a dropdown trigger.
- * The main button performs the default action, while the icon button opens a menu.
+ * The main button performs the default action, while the icon button opens a
+ * menu or popover.
  *
  * Provide the dropdown by slotting an `nldd-menu` (with its `nldd-menu-item` /
- * `nldd-menu-divider` children) directly:
+ * `nldd-menu-divider` children) or an `nldd-popover` directly:
  *
  * ```html
  * <nldd-split-button text="Opslaan">
@@ -21,11 +22,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * </nldd-split-button>
  * ```
  *
- * The slotted menu stays in the light DOM — no item-moving — so consumers keep
- * their references and the full nldd-menu API (submenus, groups, config). The
- * split-button anchors it to the chevron and opens it on click. When no
- * `nldd-menu` is slotted, the chevron dispatches `menu-click` and the consumer
- * manages their own popover.
+ * The slotted overlay stays in the light DOM — no item-moving — so consumers
+ * keep their references and the full overlay API. The split-button anchors it
+ * to the chevron and opens it on click. When no overlay is slotted, the chevron
+ * dispatches `menu-click` and the consumer manages their own popover.
  *
  * @element nldd-split-button
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
@@ -36,10 +36,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string} icon - Icon name shown before the text on the primary action button
  * @attr {object} translations - Translations; unset keys fall back to Dutch
  *
- * @slot - A single `nldd-menu` that the chevron opens.
+ * @slot - A single `nldd-menu` or `nldd-popover` that the chevron opens.
  *
  * @fires action-click - Fired when the main button is clicked
- * @fires menu-click - Fired when the dropdown trigger is clicked and no nldd-menu is slotted
+ * @fires menu-click - Fired when the dropdown trigger is clicked and no overlay is slotted
  */
 import { LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -50,6 +50,7 @@ import { nlddSplitButtonTranslations } from './split-button.i18n.js';
 import './../button/button.js';
 import './../icon-button/icon-button.js';
 import '../../actions/menu/menu.js';
+import { PopupAnchorController } from '../../../utilities/popup-anchor-controller.js';
 let NLDDSplitButton = class NLDDSplitButton extends LitElement {
     constructor() {
         super(...arguments);
@@ -64,9 +65,18 @@ let NLDDSplitButton = class NLDDSplitButton extends LitElement {
         this.icon = '';
         this.translations = {};
         this._menuIsOpen = false;
-        /** The consumer-slotted `nldd-menu`, or null when none is provided. */
-        this._menu = null;
-        this._menuWasOpenOnPointerdown = false;
+        /** Shared wiring for the consumer-slotted overlay. Anchors to the chevron's
+         * wrapper rather than the host, and keeps `_menuIsOpen` (the chevron's
+         * expanded visual) in step via `toggle`. Not private: the template module
+         * binds its slotchange handler. */
+        this._popup = new PopupAnchorController(this, {
+            anchorFor: () => this._popupButtonWrapper ?? null,
+            onChange: (overlay, previous) => {
+                previous?.removeEventListener('toggle', this._handleMenuToggle);
+                this._menuIsOpen = false;
+                overlay?.addEventListener('toggle', this._handleMenuToggle);
+            },
+        });
         this._handleMenuToggle = (event) => {
             this._menuIsOpen = event.newState === 'open';
         };
@@ -77,44 +87,14 @@ let NLDDSplitButton = class NLDDSplitButton extends LitElement {
     }
     // — Lifecycle ————————————————————————————————————————————————————————————
     firstUpdated() {
-        // Capture open-state BEFORE the browser's light-dismiss fires on
-        // pointerdown. The click handler uses this snapshot to decide: was the
-        // popover open? → user clicked to close (no-op, light-dismiss already
-        // closed it). Was it closed? → open it. Pointerdown fires for mouse,
-        // touch and pen — `mousedown` alone would skip touch on mobile, where
-        // no mousedown precedes the synthetic click.
-        this._popupButtonWrapper?.addEventListener('pointerdown', () => {
-            this._menuWasOpenOnPointerdown = this._menu?.matches(':popover-open') ?? false;
-        });
-        // If the menu was slotted declaratively, _handleSlotChange may have run
-        // before @query resolved _popupButtonWrapper and couldn't anchor it. The
-        // wrapper exists now — anchor a menu that's still waiting for it.
-        if (this._menu && this._popupButtonWrapper) {
-            this._menu.anchorElement = this._popupButtonWrapper;
-        }
+        this._popupButtonWrapper?.addEventListener('pointerdown', this._popup.handlePointerdown);
+        // A declaratively-slotted overlay is adopted before @query resolves the
+        // wrapper, so it couldn't be anchored yet. The wrapper exists now.
+        this._popup.anchor();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._menu?.removeEventListener('toggle', this._handleMenuToggle);
-    }
-    /**
-     * Wires the slotted `nldd-menu` to the chevron: anchors it to the popup
-     * button and tracks its open state. Re-runs whenever the slotted content
-     * changes (menu added, removed or replaced).
-     */
-    _handleSlotChange(event) {
-        const slot = event.target;
-        const menu = slot.assignedElements().find((el) => el.matches('nldd-menu')) ?? null;
-        if (menu === this._menu)
-            return;
-        this._menu?.removeEventListener('toggle', this._handleMenuToggle);
-        this._menu = menu;
-        this._menuIsOpen = false;
-        if (menu) {
-            if (this._popupButtonWrapper)
-                menu.anchorElement = this._popupButtonWrapper;
-            menu.addEventListener('toggle', this._handleMenuToggle);
-        }
+        this._popup.overlay?.removeEventListener('toggle', this._handleMenuToggle);
     }
     _handleActionClick(e) {
         if (this.disabled)
@@ -126,14 +106,8 @@ let NLDDSplitButton = class NLDDSplitButton extends LitElement {
         if (this.disabled)
             return;
         e.stopPropagation();
-        if (this._menu) {
-            const wasOpen = this._menuWasOpenOnPointerdown;
-            this._menuWasOpenOnPointerdown = false;
-            if (wasOpen)
-                return; // light-dismiss already closed it
-            this._menu.showPopover();
+        if (this._popup.handleClick(e))
             return;
-        }
         this.dispatchEvent(new CustomEvent('menu-click', { bubbles: true, composed: true }));
     }
     // willUpdate (not updated) so the host width is resolved before the first

package/dist/components/actions/split-button/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"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"}

package/dist/components/actions/split-button/split-button.template.js

@@ -30,7 +30,7 @@ export function template() {
 				></nldd-icon-button>
 			</div>
 		</div>
-		<slot @slotchange=${this._handleSlotChange}></slot>
+		<slot @slotchange=${this._popup.handleSlotChange}></slot>
 	`;
 }
 //# sourceMappingURL=split-button.template.js.map

package/dist/components/actions/split-button/split-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;;cAGE,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;WACT,IAAI,CAAC,IAAI;iBACH,IAAI,CAAC,IAAI,IAAI,OAAO;;;;gBAIrB,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,kBAAkB;;;;;eAKrB,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;;YAET,IAAI,CAAC,EAAE,CAAC,qCAAqC,CAAC;;;;iBAIzC,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,WAAW;;cAEnB,IAAI,CAAC,gBAAgB;;;;sBAIb,IAAI,CAAC,iBAAiB;EAC1C,CAAC;AACH,CAAC"}
+{"version":3,"file":"split-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;;cAGE,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;WACT,IAAI,CAAC,IAAI;iBACH,IAAI,CAAC,IAAI,IAAI,OAAO;;;;gBAIrB,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,kBAAkB;;;;;eAKrB,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;;YAET,IAAI,CAAC,EAAE,CAAC,qCAAqC,CAAC;;;;iBAIzC,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,WAAW;;cAEnB,IAAI,CAAC,gBAAgB;;;;sBAIb,IAAI,CAAC,MAAM,CAAC,gBAAgB;EAChD,CAAC;AACH,CAAC"}

package/dist/components/actions/toolbar/toolbar.d.ts

@@ -5,6 +5,7 @@
  * @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
+ * @attr {object} translations - Override translation keys (e.g. the overflow button label); unset keys fall back to Dutch.
  *
  * @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
@@ -19,6 +20,8 @@
  * @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 {'sm'|'md'|'lg'} size - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's size (default: 'md') onto the item host, so size-dependent styling can key off it.
+ * @attr {boolean} show-item-labels - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's show-item-labels, so the item renders its label below the control.
  * @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.
@@ -35,6 +38,7 @@
  * @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 (default: '0', so the title shrink-wraps its content and the next element sits against it).
  * @attr {string} max-width - Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row).
+ * @attr {'sm'|'md'|'lg'} size - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's size (default: 'md'), which sets the title group height and, at 'sm', the title and supporting-text fonts.
  *
  * @slot action - Optional trailing control (e.g. an xs nldd-icon-button), shown inline after the title and tuned to sit against it. Empty by default.
  */
@@ -84,6 +88,12 @@ export declare class NLDDToolbar extends LitElement {
     private _overflowIds;
     private _leftSpacerZero;
     private _rightSpacerZero;
+    /** True when nothing is *rendered* in the start/end areas (they may hold
+     * consumer-hidden `display:none` children), so the center content is the
+     * only visible group. Drives the centered `.toolbar__center-fill` layout —
+     * a hidden back button no longer strands a centered title at the left.
+     * Computed from real rendering, not mere child presence. */
+    private _centerOnly;
     private _pinnedOverflowItems;
     private _childIds;
     private _idCounter;
@@ -135,6 +145,10 @@ export declare class NLDDToolbar extends LitElement {
     private _computeAreaWidth;
     private _computeSpacerZeros;
     private _updateAreaVars;
+    /** Whether any child in the list is actually rendered. getClientRects() is
+     * empty for a `display:none` element (consumer-hidden or toolbar-hidden via
+     * `[hidden]`), so this counts real on-screen presence, not mere DOM presence. */
+    private _hasRenderedChild;
     private _measureAndUpdate;
     private _measureOverflow;
     /**

package/dist/components/actions/toolbar/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.ts"],"names":[],"mappings":"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"}

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

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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
+ * @attr {object} translations - Override translation keys (e.g. the overflow button label); unset keys fall back to Dutch.
  *
  * @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
@@ -25,6 +26,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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 {'sm'|'md'|'lg'} size - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's size (default: 'md') onto the item host, so size-dependent styling can key off it.
+ * @attr {boolean} show-item-labels - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's show-item-labels, so the item renders its label below the control.
  * @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.
@@ -41,6 +44,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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 (default: '0', so the title shrink-wraps its content and the next element sits against it).
  * @attr {string} max-width - Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row).
+ * @attr {'sm'|'md'|'lg'} size - Set by nldd-toolbar, not a consumer attribute: mirrors the toolbar's size (default: 'md'), which sets the title group height and, at 'sm', the title and supporting-text fonts.
  *
  * @slot action - Optional trailing control (e.g. an xs nldd-icon-button), shown inline after the title and tuned to sit against it. Empty by default.
  */
@@ -191,6 +195,12 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         this._overflowIds = new Set();
         this._leftSpacerZero = false;
         this._rightSpacerZero = false;
+        /** True when nothing is *rendered* in the start/end areas (they may hold
+         * consumer-hidden `display:none` children), so the center content is the
+         * only visible group. Drives the centered `.toolbar__center-fill` layout —
+         * a hidden back button no longer strands a centered title at the left.
+         * Computed from real rendering, not mere child presence. */
+        this._centerOnly = false;
         this._pinnedOverflowItems = [];
         this._childIds = new WeakMap();
         this._idCounter = 0;
@@ -529,11 +539,36 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         this.style.setProperty('--_start-width', `${startWidth}px`);
         this.style.setProperty('--_center-width', `${centerWidth}px`);
         this.style.setProperty('--_end-width', `${endWidth}px`);
+        // The spacer basis subtracts a gap to account for the flex gap between a
+        // side area and its spacer. That gap only exists when the area is
+        // non-empty; with an empty start (or end) the spacer is the first (or
+        // last) item and there is no such gap, so drop the subtraction to 0 —
+        // otherwise the centre is pulled off-centre by one gap once the opposite
+        // side gains items.
+        this.style.setProperty('--_left-spacer-gap', startWidth > 0 ? `${itemGap}px` : '0px');
+        this.style.setProperty('--_right-spacer-gap', endWidth > 0 ? `${itemGap}px` : '0px');
         const { leftZero, rightZero } = this._computeSpacerZeros(hostWidth, itemGap, overflowButtonWidth, startWidth, centerWidth, endWidth);
         if (leftZero !== this._leftSpacerZero)
             this._leftSpacerZero = leftZero;
         if (rightZero !== this._rightSpacerZero)
             this._rightSpacerZero = rightZero;
+        // Route to the centered center-fill layout whenever nothing is actually
+        // rendered in start/end — measured by real rendering, not child presence,
+        // so a consumer-hidden (display:none) back button doesn't strand a centered
+        // title at the left (it would otherwise keep centerOnly false and fall into
+        // the spacer path, where startWidth===0 && endWidth===0 suppresses both
+        // balancing spacers).
+        const centerOnly = !this._hasRenderedChild(this._startChildren)
+            && !this._hasRenderedChild(this._endChildren)
+            && this._centerChildren.length > 0;
+        if (centerOnly !== this._centerOnly)
+            this._centerOnly = centerOnly;
+    }
+    /** Whether any child in the list is actually rendered. getClientRects() is
+     * empty for a `display:none` element (consumer-hidden or toolbar-hidden via
+     * `[hidden]`), so this counts real on-screen presence, not mere DOM presence. */
+    _hasRenderedChild(children) {
+        return children.some(c => c.element.getClientRects().length > 0);
     }
     _measureAndUpdate() {
         if (this._isMeasuring)
@@ -637,7 +672,12 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
      * promotion is skipped there (matching the previous template behaviour).
      */
     _promoteSoloFluid(itemsEl, itemChildren, titleChildren, centerOnly) {
-        const remainingVisible = itemChildren.filter(c => !c.element.hidden);
+        // Real rendering, not the `hidden` property: a consumer-hidden
+        // (display:none) start/end item must not count as a "remaining visible"
+        // item, or it blocks promoting a lone title to solo-fluid (which is what
+        // lets align="center" actually centre it). Toolbar-hidden items are
+        // display:none too, so this stays equivalent for the overflow flow.
+        const remainingVisible = itemChildren.filter(c => c.element.getClientRects().length > 0);
         if (!centerOnly && remainingVisible.length === 1 && remainingVisible[0].element.hasAttribute('fluid')) {
             const host = remainingVisible[0].element;
             host.removeAttribute('fluid');
@@ -726,7 +766,7 @@ let NLDDToolbar = class NLDDToolbar extends LitElement {
         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, 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._centerOnly, (key) => this._t(key));
     }
 };
 NLDDToolbar.styles = toolbarStyles;
@@ -763,6 +803,9 @@ __decorate([
 __decorate([
     state()
 ], NLDDToolbar.prototype, "_rightSpacerZero", void 0);
+__decorate([
+    state()
+], NLDDToolbar.prototype, "_centerOnly", void 0);
 __decorate([
     state()
 ], NLDDToolbar.prototype, "_pinnedOverflowItems", void 0);