@nldd/design-system 0.8.43 → 0.8.44

package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js

@@ -11,12 +11,12 @@ export const descriptionCellStyles = css `
 		--_min-height: 0;
 
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
 		min-height: var(--_min-height);
+		flex-direction: column;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -34,10 +34,10 @@ export const descriptionCellStyles = css `
 	}
 
 	:host([width='fit-content']) {
+		width: fit-content;
 		flex-grow: 0;
 		flex-shrink: 0;
 		flex-basis: auto;
-		width: fit-content;
 	}
 
 	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
@@ -75,8 +75,8 @@ export const descriptionCellStyles = css `
 
 	::slotted([slot='title']) {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		font: var(--primitives-font-body-sm-regular-flat);
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
@@ -86,8 +86,8 @@ export const descriptionCellStyles = css `
 
 	::slotted([slot='description']) {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		font: var(--primitives-font-body-md-regular-tight);
 		color: var(--context-cell-content-color, var(--semantics-content-color));
 	}

package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.styles.js

@@ -6,10 +6,10 @@ export const dragHandleCellStyles = css `
 
 	:host {
 		display: inline-flex;
+		cursor: grab;
+		width: fit-content;
 		align-items: center;
 		justify-content: center;
-		width: fit-content;
-		cursor: grab;
 	}
 
 	:host([hidden]) {
@@ -25,13 +25,13 @@ export const dragHandleCellStyles = css `
 
 	.drag-handle-cell__control {
 		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--semantics-grab-handles-background-color);
-		border: none;
-		padding: 0;
 		margin: 0;
+		border: none;
+		background-color: var(--semantics-grab-handles-background-color);
 		cursor: inherit;
+		padding: 0;
+		align-items: center;
+		justify-content: center;
 		-webkit-appearance: none;
 		appearance: none;
 	}
@@ -47,18 +47,18 @@ export const dragHandleCellStyles = css `
 
 	:host([size="md"]) .drag-handle-cell__control,
 	:host(:not([size])) .drag-handle-cell__control {
+		border-radius: var(--semantics-controls-md-corner-radius);
 		width: var(--semantics-controls-sm-min-size);
 		height: var(--semantics-controls-md-min-size);
-		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
 
 	/* ## Size: SM */
 
 	:host([size="sm"]) .drag-handle-cell__control {
+		border-radius: var(--semantics-controls-sm-corner-radius);
 		width: var(--semantics-controls-xs-min-size);
 		height: var(--semantics-controls-sm-min-size);
-		border-radius: var(--semantics-controls-sm-corner-radius);
 	}
 
 

package/dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.styles.js

@@ -40,8 +40,8 @@ export const spacerCellStyles = css `
 	:host([size="96"]) { width: var(--primitives-space-96); }
 
 	:host([size="flexible"]) {
-		flex-grow: 1;
 		width: auto;
+		flex-grow: 1;
 	}
 `;
 //# sourceMappingURL=spacer-cell.styles.js.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js

@@ -11,12 +11,12 @@ export const textCellStyles = css `
 		--_min-height: 0;
 
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
 		min-height: var(--_min-height);
+		flex-direction: column;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -34,10 +34,10 @@ export const textCellStyles = css `
 	}
 
 	:host([width='fit-content']) {
+		width: fit-content;
 		flex-grow: 0;
 		flex-shrink: 0;
 		flex-basis: auto;
-		width: fit-content;
 	}
 
 	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
@@ -91,8 +91,8 @@ export const textCellStyles = css `
 
 	.text-cell__overline {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
@@ -119,8 +119,8 @@ export const textCellStyles = css `
 
 	.text-cell__text {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: anywhere;
 		text-wrap: pretty;
 	}
@@ -195,8 +195,8 @@ export const textCellStyles = css `
 
 	.text-cell__supporting-text {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: anywhere;
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}

package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js

@@ -11,12 +11,12 @@ export const titleCellStyles = css `
 		--_min-height: 0;
 
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
 		min-height: var(--_min-height);
+		flex-direction: column;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -34,10 +34,10 @@ export const titleCellStyles = css `
 	}
 
 	:host([width='fit-content']) {
+		width: fit-content;
 		flex-grow: 0;
 		flex-shrink: 0;
 		flex-basis: auto;
-		width: fit-content;
 	}
 
 	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
@@ -91,8 +91,8 @@ export const titleCellStyles = css `
 
 	.title-cell__overline {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: anywhere;
 		font: var(--primitives-font-body-xs-regular-tight);
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
@@ -111,8 +111,8 @@ export const titleCellStyles = css `
 
 	.title-cell__title {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: break-word;
 		color: var(--context-cell-content-color, var(--semantics-content-color));
 		text-wrap: pretty;
@@ -168,8 +168,8 @@ export const titleCellStyles = css `
 
 	.title-cell__supporting-text {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
 		overflow-wrap: anywhere;
 		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));

package/dist/components/lists-and-menus/list/list.styles.js

@@ -64,8 +64,8 @@ export const listStyles = css `
 	/* # Variant: box */
 
 	:host([variant='box']) .list__items {
-		background-color: var(--semantics-surfaces-tinted-background-color);
 		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-tinted-background-color);
 		overflow: hidden;
 	}
 
@@ -73,8 +73,8 @@ export const listStyles = css `
 	/* # Variant: box-on-tinted */
 
 	:host([variant='box-on-tinted']) .list__items {
-		background-color: var(--semantics-surfaces-background-color);
 		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-background-color);
 		overflow: hidden;
 	}
 
@@ -83,9 +83,9 @@ export const listStyles = css `
 
 	::slotted(.nldd-list-drag-placeholder) {
 		box-sizing: border-box;
+		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--components-list-drag-placeholder-background-color);
 		pointer-events: none;
-		border-radius: var(--components-list-item-indicator-corner-radius);
 	}
 
 
@@ -95,17 +95,17 @@ export const listStyles = css `
 		position: absolute;
 		top: var(--_drag-clone-top);
 		left: var(--_drag-clone-left);
-		width: var(--_drag-clone-width);
-		height: var(--_drag-clone-height);
 		display: flex;
-		flex-direction: row;
-		align-items: stretch;
-		pointer-events: none;
 		opacity: var(--_drag-clone-opacity);
+		z-index: var(--_drag-clone-z-index);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background: var(--semantics-surfaces-background-color);
-		z-index: var(--_drag-clone-z-index);
+		pointer-events: none;
+		width: var(--_drag-clone-width);
+		height: var(--_drag-clone-height);
 		overflow: hidden;
+		flex-direction: row;
+		align-items: stretch;
 	}
 
 
@@ -114,14 +114,14 @@ export const listStyles = css `
 	.list__polite-announcer,
 	.list__assertive-announcer {
 		position: absolute;
+		margin: -1px;
+		border: 0;
 		width: 1px;
 		height: 1px;
-		padding: 0;
-		margin: -1px;
 		overflow: hidden;
-		clip-path: inset(50%);
+		padding: 0;
 		white-space: nowrap;
-		border: 0;
+		clip-path: inset(50%);
 	}
 `;
 //# sourceMappingURL=list.styles.js.map

package/dist/components/lists-and-menus/list-item/list-item.styles.js

@@ -12,10 +12,10 @@ export const listItemStyles = css `
 		--_focus-outline-offset: 6px;
 
 		display: block;
-		width: 100%;
-		-webkit-tap-highlight-color: transparent;
 		container-type: inline-size;
 		container-name: list-item;
+		width: 100%;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	:host([hidden]) {
@@ -54,12 +54,12 @@ export const listItemStyles = css `
 	.list-item {
 		box-sizing: border-box;
 		display: flex;
+		position: relative;
 		min-height: var(--semantics-controls-md-min-size);
+		width: 100%;
 		flex-direction: row;
 		align-items: stretch;
-		position: relative;
 		isolation: isolate;
-		width: 100%;
 	}
 
 	:host([size='sm']) .list-item {
@@ -71,17 +71,17 @@ export const listItemStyles = css `
 
 	.list-item__action {
 		display: flex;
-		flex-direction: row;
-		align-items: stretch;
-		width: 100%;
-		background: none;
+		margin: 0;
 		border: none;
+		outline: none;
+		background: none;
+		width: 100%;
 		padding: 0;
-		margin: 0;
+		flex-direction: row;
+		align-items: stretch;
 		text-align: start;
 		text-decoration: none;
 		color: inherit;
-		outline: none;
 	}
 
 	a.list-item__action {
@@ -103,9 +103,9 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block: 0;
 		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		z-index: var(--_z-index-indicator);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--_background-color);
-		z-index: var(--_z-index-indicator);
 		pointer-events: none;
 	}
 
@@ -124,9 +124,9 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block: 0;
 		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		z-index: var(--_z-index-indicator);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--_background-color);
-		z-index: var(--_z-index-indicator);
 		pointer-events: none;
 	}
 
@@ -166,10 +166,10 @@ export const listItemStyles = css `
 		content: '';
 		display: block;
 		position: absolute;
-		pointer-events: none;
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
+		pointer-events: none;
 	}
 
 	:host(:not(.is-boxed)) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
@@ -198,12 +198,12 @@ export const listItemStyles = css `
 	.list-item__start-area,
 	.list-item__end-area {
 		display: none;
-		flex-direction: row;
-		align-items: center;
-		flex-shrink: 0;
 		position: relative;
 		z-index: var(--_z-index-content);
 		padding-block: var(--components-list-item-md-padding-block);
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
 	}
 
 	.list-item__start-area.is-visible,
@@ -221,13 +221,13 @@ export const listItemStyles = css `
 
 	.list-item__main-area {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex-grow: 1;
-		min-width: 0;
 		position: relative;
 		z-index: var(--_z-index-content);
+		min-width: 0;
 		padding-block: var(--components-list-item-md-padding-block);
+		flex-direction: row;
+		align-items: center;
+		flex-grow: 1;
 	}
 
 	:host([size='sm']) .list-item__main-area {
@@ -242,8 +242,8 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block-end: 0;
 		inset-inline: 0;
-		height: var(--semantics-dividers-thickness);
 		background-color: var(--semantics-dividers-color);
+		height: var(--semantics-dividers-thickness);
 	}
 
 	:host([selected]) .list-item__divider,

package/dist/components/lists-and-menus/menu/menu.d.ts

@@ -84,7 +84,7 @@ export declare class NLDDMenuItem extends LitElement {
     get _hasSubmenu(): boolean;
     firstUpdated(): void;
     disconnectedCallback(): void;
-    _handleClick(): void;
+    _handleClick(event?: Event): void;
     /** Programmatically select this item. */
     select(): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -160,6 +160,30 @@ export declare class NLDDMenu extends LitElement {
      * by one of this menu's items). null when no submenu is open. */
     private _activeSubmenu;
     private _activeSubmenuOpener;
+    /** Cleanup closure for the currently open child submenu. Invoked by the
+     * submenu's `toggle→closed` event, but also callable directly from a
+     * chain-close walk so the upper levels can be torn down without waiting
+     * for stale toggle events that will never fire (e.g. a hidden drill-in
+     * parent whose popover state is already 'closed'). */
+    private _activeSubmenuCleanup;
+    /** Signal that this menu is hiding itself to make room for a deeper drill-in
+     * level — its parent's onToggle should skip the normal close cleanup
+     * (re-parent + re-show) so the chain stays in deeper-level state. */
+    _drillInHidingForDeeper: boolean;
+    /** Root-owned registry of every submenu currently open in this chain,
+     * in open order. Lives on the root menu only; submenus reach it via
+     * `_chainRoot`. Drives `_collapseChain()` so collapsing the whole
+     * stack never depends on `_activeSubmenu`/`_parentMenu` threading
+     * (which real interaction can leave stale). @internal */
+    _openChain: NLDDMenu[];
+    /** Back-reference to the chain's root, set on every submenu when it
+     * opens. Lets `_collapseChain()` find the registry without walking
+     * the (possibly stale) parent links. null on the root. @internal */
+    _chainRoot: NLDDMenu | null;
+    /** Force-teardown for this submenu (detach toggle listener, hide,
+     * restore DOM, reset state — no parent re-show). Set when the submenu
+     * opens; called by `_collapseChain()`. @internal */
+    _collapseSelf: (() => void) | null;
     /** When this menu is itself a submenu, points to the parent menu that
      * opened it. Set by the parent's _handleSubmenuOpen. null on the root.
      * @internal */
@@ -170,6 +194,12 @@ export declare class NLDDMenu extends LitElement {
     _parentItem: NLDDMenuItem | null;
     private _isOpen;
     private _closedAt;
+    /** Set on the root when a pointer gesture (outside/anchor pointerdown
+     * or confirmed tap) collapsed the chain. The trailing `click` of that
+     * same gesture consumes it in `_handleDocumentClick` and must NOT
+     * reopen — gesture-correlated, so it's reliable on touch where the
+     * pointerup→click gap exceeds the time-based reopen guard. @internal */
+    _collapsedByPointerGesture: boolean;
     private _cleanupAutoUpdate;
     private _t;
     /** Resolved empty text: emptyText attribute takes precedence, then i18n fallback. */
@@ -179,20 +209,70 @@ export declare class NLDDMenu extends LitElement {
      * Bestand" instead of an ambiguous "Bestand, button". Only used when
      * this menu is itself a submenu in drill-in mode. */
     get _resolvedBackLabel(): string;
+    /** Double-rAF handle for the announcement awaiting flush, so a rapid
+     * follow-up transition can cancel the stale one instead of stacking it. */
+    private _announceRaf;
+    /** Message currently queued (not yet flushed to the region). Used to
+     * drop a doubled event in the same tick while still allowing the same
+     * text to be re-announced on a later, genuine transition. */
+    private _pendingAnnouncement;
+    /**
+     * Write `message` to this menu's polite live region. Clears first, then
+     * sets on a double rAF — the empty→text transition is what makes screen
+     * readers reliably re-announce unchanged-looking content across engines.
+     *
+     * Spam control without muting real navigation: a doubled event in the
+     * same tick (identical message still pending) is dropped; a *different*
+     * message arriving first cancels the stale pending one (rapid navigation
+     * announces only the level you land on); once flushed, the same text may
+     * be announced again for a later genuine transition (e.g. re-entering a
+     * submenu after going back).
+     */
+    private _announce;
     updated(changedProperties: Map<string, unknown>): void;
     private _getAnchorEl;
+    /**
+     * Pick the drill-in side (above vs below the anchor) purely from the
+     * available viewport space around the anchor — never from content
+     * size. Content-independent so every level of the chain resolves to
+     * the same side and a bigger submenu scrolls internally rather than
+     * flipping the whole stack. Keeps the configured alignment suffix
+     * (`-start` / `-end`) from `placement`.
+     */
+    private _resolveDrillInPlacement;
+    /**
+     * Reflect this menu's open state on the anchor so an anchor button (or
+     * any element exposing an `expanded` IDL property) shows the active
+     * "is-expanded" visual while we're open. Skip menu-items as anchors —
+     * they manage their own `_submenuOpen` lifecycle and don't have an
+     * `expanded` property. Also default `popupType` to 'menu' / 'listbox'
+     * (matching this menu's variant) when the anchor supports it and the
+     * consumer hasn't already chosen a value, so screen readers announce
+     * the popup role without each consumer having to set it manually.
+     *
+     * Finally, drive the anchor's `popoverTargetAction` so the browser's
+     * native invoker action always matches the current state explicitly:
+     * `'hide'` while open, `'show'` while closed. We avoid `'toggle'` on
+     * purpose — toggle re-evaluates the popover's live state at click time
+     * and would re-open the menu if it had just been light-dismissed
+     * milliseconds earlier (the source of the "menu briefly closes and
+     * reopens" bug). With explicit show/hide, the worst case is a no-op
+     * (e.g. `'hide'` on an already-closed menu) — never a spurious open.
+     *
+     * The invoker association (`popoverTargetElement`) is set elsewhere
+     * — persistently on anchor change rather than per-toggle — so the
+     * browser's light-dismiss exclusion is in place from the very first
+     * click instead of only after the menu has already opened once.
+     */
+    private _syncAnchorPopupState;
     private _handleDocumentClick;
     private _hoverOpenTimer;
-    private _hoverCloseTimer;
     private _safeTriangleListener;
     private _safeTriangleStallTimer;
     private _lastCursorPos;
     private _safeTriangleApex;
     private _safeTriangleSubmenu;
     private _movingTowardSubmenu;
-    /** Wait this long after cursor stops being on a path toward the submenu
-     * before closing. Smooths over brief cursor stalls and accidental nudges. */
-    private static readonly _SUBMENU_LINGER_CLOSE_MS;
     /** When the cursor sits motionless inside the safe triangle for this
      * long, dismiss the triangle and let whatever item is under the cursor
      * become interactive. Without this, a paused cursor would stay
@@ -266,10 +346,6 @@ export declare class NLDDMenu extends LitElement {
      * inside the safe triangle long enough, drop the protection so the
      * element under the cursor can become interactive without nudging. */
     private _safeTriangleScheduleStall;
-    /** Schedule submenu close when cursor sits outside the parent menu rect.
-     * No-op if cursor is inside the menu (peer-hover logic handles it) or
-     * if a close is already scheduled. */
-    private _safeTriangleMaybeScheduleLingerClose;
     /** True when the rect contains the point (inclusive). Returns false for
      * a missing rect or point — convenient for the optional-chained call
      * sites in the safe-triangle logic. */
@@ -279,12 +355,11 @@ export declare class NLDDMenu extends LitElement {
     private _renderSafeTriangleOverlay;
     private _removeSafeTriangleOverlay;
     private _cancelHoverOpen;
-    private _cancelHoverClose;
     /** Recursively checks whether a point sits inside the given menu OR any of
-     * its descendant submenus. Used by the hover guard so a cursor deep inside
-     * a nested submenu still reads as "in the safe area" for ancestor menus —
-     * without this, an ancestor's linger-close fires and cascades the whole
-     * chain shut. */
+     * its descendant submenus. Used by the safe-triangle "arrived" check so a
+     * cursor that has continued past the immediate submenu into a deeper
+     * nested submenu still reads as "in the safe area" — without the recursive
+     * walk we'd treat the deeper hover as an exit and re-pin a stale apex. */
     private static _isPointInMenuTree;
     /** Convex point-in-polygon test via consistent edge-cross-product sign.
      * Vertices must be ordered (clockwise or counter-clockwise). */
@@ -302,8 +377,7 @@ export declare class NLDDMenu extends LitElement {
      *
      * Cached MediaQueryList shared across instances — `matchMedia()` returns
      * a live object and re-evaluating it for every mouseenter/submenu-open
-     * is wasteful. Instances also subscribe to `change` so resize events
-     * naturally route through `_handleViewportResize`.
+     * is wasteful.
      */
     private static _drillInModeQuery;
     private static _getDrillInModeQuery;
@@ -331,21 +405,75 @@ export declare class NLDDMenu extends LitElement {
      * item that was auto-highlighted on open).
      * @internal */
     _handleBackMouseenter: () => void;
-    /** Last cached drill-in mode value, so we only act when it actually
-     * changes across a resize event. */
-    private _lastDrillInMode;
-    /** Close any open submenu when the cascade ↔ drill-in threshold is
-     * crossed during a resize. Switching the rendering of an already-open
-     * submenu mid-flight (anchor + placement + back button) is more
-     * disorienting than a clean reset to the root view. */
-    private _handleViewportResize;
+    private static readonly _TOUCH_SCROLL_THRESHOLD_PX;
+    private _touchStartX;
+    private _touchStartY;
+    /** @internal */
+    _handleMenuTouchStart: (event: TouchEvent) => void;
+    /** @internal */
+    _handleMenuTouchMove: (event: TouchEvent) => void;
+    /** @internal */
+    _handleMenuTouchEnd: () => void;
+    /** Close the menu on a window resize. Floating-UI's autoUpdate keeps
+     * the position in sync with scrolls (where users genuinely expect the
+     * menu to follow the anchor), but a full window resize is a layout-
+     * shifting interaction the user isn't currently tracking — better to
+     * dismiss with a clean slate than to chase the anchor across a
+     * reflow, repaint a flipped placement, or get stuck mid-flight when
+     * crossing the cascade ↔ drill-in viewport threshold. The window
+     * listener is wired only while we're open and torn down on close, so
+     * idle menus pay nothing. */
+    private _handleWindowResize;
+    /**
+     * Collapse the entire menu chain at once — root + every open submenu —
+     * with no "back one level" re-show. Used when the action is final:
+     * selecting an item, clicking the anchor, clicking/tapping outside, or
+     * a viewport resize.
+     *
+     * Driven by the root's `_openChain` registry and each submenu's
+     * `_collapseSelf`, so it never depends on `_activeSubmenu` /
+     * `_parentMenu` threading being intact at collapse time — real
+     * interaction can leave those stale, which was the source of the
+     * recurring "anchor click doesn't close after the 2nd navigation"
+     * bug. Idempotent: every chain level's `select` listener may call it,
+     * but the first run empties the registry so the rest are no-ops.
+     */
+    private _collapseChain;
     /**
-     * Close this menu when a `select` event bubbles up — selecting an item
-     * anywhere in the menu (or any descendant submenu) closes the entire
-     * popover chain so the action feels final. The select event is dispatched
-     * with `composed: true` so it crosses every ancestor menu in the chain.
+     * Drill-in click-outside: collapse the entire chain.
+     *
+     * In drill-in mode only the deepest level is `:popover-open` — popover
+     * light-dismiss would close just that level, and our onToggle cleanup
+     * would helpfully re-show the previous level. That's the wrong outcome
+     * for a click outside the menu: the user is dismissing the whole menu,
+     * not navigating one step back. Detect the outside click here and route
+     * to `_collapseChain`, which collapses every level at once.
+     *
+     * Cascade mode falls back to the native popover stack behaviour: a click
+     * outside light-dismisses every popover down to the click target's
+     * closest ancestor popover, so no extra handling is needed there.
+     *
+     * For mouse/pen, pointerdown (capture) is the right hook: it fires
+     * before light-dismiss does its work, so by the time the toggle event
+     * fires our chain walk has already detached listeners and prevented
+     * the parent re-show.
+     *
+     * For touch, an outside pointerdown is ambiguous: it's also how a page
+     * scroll begins. Closing the chain on the scroll-start would be
+     * inconsistent with a root menu (which native light-dismiss leaves
+     * open while you scroll outside it) and annoying. So on touch we defer
+     * the decision: track the pointer and only chain-close on a confirmed
+     * tap (pointerup without crossing the scroll threshold); a scroll
+     * leaves the chain untouched, matching root-menu behaviour.
      */
-    private _handleSelectChainClose;
+    private _handleDocumentPointerdown;
+    private _outsideTapStartX;
+    private _outsideTapStartY;
+    private _outsideTapTracking;
+    private _outsideTapMove;
+    private _outsideTapEnd;
+    private _outsideTapCancel;
+    private _teardownOutsideTap;
     private static _menuIdCounter;
     connectedCallback(): void;
     firstUpdated(): void;
@@ -385,6 +513,9 @@ export declare class NLDDMenu extends LitElement {
     getHighlighted(): NLDDMenuItem | null;
     /** Returns the ID of the currently highlighted item, or empty string if none. */
     getHighlightedId(): string;
+    /** Read a px-valued CSS custom property as a number. `parseFloat`
+     * keeps fractional pixels; an unset/NaN value falls back to 0. */
+    private _cssPx;
     /** Recalculate position and size relative to the anchor element. */
     reposition(): Promise<void>;
     private _handleKeydown;