@nldd/design-system 0.8.44 → 0.8.46

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

@@ -7,18 +7,34 @@ export const listStyles = css `
 	:host {
 		--_drag-clone-top: 0px;
 		--_drag-clone-left: 0px;
-		--_drag-clone-width: 0px;
-		--_drag-clone-height: 0px;
 		--_drag-clone-opacity: 0.95;
 		--_drag-clone-z-index: 100;
+		--_drag-clone-width: 0px;
+		--_drag-clone-height: 0px;
 
 		display: block;
 		position: relative;
 		isolation: isolate;
 	}
 
+	:host([no-dividers]) {
+		--context-list-divider-display: none;
+	}
+
+	:host([variant="box"]) .list__items {
+		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-tinted-background-color);
+		overflow: hidden;
+	}
+
+	:host([variant="box-on-tinted"]) .list__items {
+		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-background-color);
+		overflow: hidden;
+	}
 
-	/* # Body */
+
+	/* # Elements */
 
 	.list__body {
 		display: flex;
@@ -26,25 +42,16 @@ export const listStyles = css `
 		gap: var(--primitives-space-8);
 	}
 
-
-	/* # Header & footer */
-
 	.list__header,
 	.list__footer {
 		display: contents;
 	}
 
-
-	/* # Items */
-
 	.list__items {
 		display: flex;
 		flex-direction: column;
 	}
 
-
-	/* # Empty slot */
-
 	.list__empty {
 		padding: var(--primitives-space-16);
 	}
@@ -53,34 +60,6 @@ export const listStyles = css `
 		display: none;
 	}
 
-
-	/* # No dividers */
-
-	:host([no-dividers]) {
-		--context-list-divider-display: none;
-	}
-
-
-	/* # Variant: box */
-
-	:host([variant='box']) .list__items {
-		border-radius: var(--components-list-corner-radius);
-		background-color: var(--semantics-surfaces-tinted-background-color);
-		overflow: hidden;
-	}
-
-
-	/* # Variant: box-on-tinted */
-
-	:host([variant='box-on-tinted']) .list__items {
-		border-radius: var(--components-list-corner-radius);
-		background-color: var(--semantics-surfaces-background-color);
-		overflow: hidden;
-	}
-
-
-	/* # Drag placeholder */
-
 	::slotted(.nldd-list-drag-placeholder) {
 		box-sizing: border-box;
 		border-radius: var(--components-list-item-indicator-corner-radius);
@@ -88,14 +67,11 @@ export const listStyles = css `
 		pointer-events: none;
 	}
 
-
-	/* # Drag clone */
-
 	.list__drag-clone {
+		display: flex;
 		position: absolute;
 		top: var(--_drag-clone-top);
 		left: var(--_drag-clone-left);
-		display: flex;
 		opacity: var(--_drag-clone-opacity);
 		z-index: var(--_drag-clone-z-index);
 		border-radius: var(--components-list-item-indicator-corner-radius);
@@ -108,9 +84,6 @@ export const listStyles = css `
 		align-items: stretch;
 	}
 
-
-	/* # Announcer */
-
 	.list__polite-announcer,
 	.list__assertive-announcer {
 		position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H5B,CAAC"}
+{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG5B,CAAC"}

package/dist/components/lists-and-menus/list-item/list-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2P1B,CAAC"}
+{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAoQ1B,CAAC"}

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

@@ -55,14 +55,14 @@ export const listItemStyles = css `
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
-		min-height: var(--semantics-controls-md-min-size);
 		width: 100%;
+		min-height: var(--semantics-controls-md-min-size);
 		flex-direction: row;
 		align-items: stretch;
 		isolation: isolate;
 	}
 
-	:host([size='sm']) .list-item {
+	:host([size="sm"]) .list-item {
 		min-height: var(--semantics-controls-sm-min-size);
 	}
 
@@ -72,16 +72,16 @@ export const listItemStyles = css `
 	.list-item__action {
 		display: flex;
 		margin: 0;
-		border: none;
 		outline: none;
+		border: none;
 		background: none;
 		width: 100%;
 		padding: 0;
 		flex-direction: row;
 		align-items: stretch;
 		text-align: start;
-		text-decoration: none;
 		color: inherit;
+		text-decoration: none;
 	}
 
 	a.list-item__action {
@@ -91,11 +91,8 @@ export const listItemStyles = css `
 
 	/* # Indicator */
 
-	/* ## Non-interactive
-	   Items without an inner action get the selection indicator directly on
-	   .list-item, driven only by :host([selected]). Use when a slotted
-	   control (e.g. a checkbox) owns the selection semantics and the row
-	   itself should still reflect the selected state visually. */
+	/* Non-interactive: items without an inner action get the selection
+	   indicator directly on .list-item, driven only by :host([selected]) */
 
 	.list-item:not(:has(.list-item__action))::before {
 		content: '';
@@ -114,9 +111,8 @@ export const listItemStyles = css `
 		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	/* ## Interactive
-	   Items with a link or button inner element. Indicator responds to
-	   hover and focus on top of the selected state. */
+	/* Interactive: items with a link/button inner element; indicator responds
+	   to hover and focus on top of the selected state */
 
 	.list-item__action::before {
 		content: '';
@@ -130,8 +126,8 @@ export const listItemStyles = css `
 		pointer-events: none;
 	}
 
-	/* Hover rules only on hover-capable devices: prevents touch-scrolling
-	 * from briefly flashing the hover state on the row under the finger. */
+	/* hover only on hover-capable devices: avoids touch-scroll flashing the
+	   hover state on the row under the finger */
 	@media (hover: hover) {
 		.list-item__action:hover {
 			--_background-color: var(--components-list-item-is-hovered-background-color);
@@ -149,6 +145,19 @@ export const listItemStyles = css `
 		}
 	}
 
+	/* Press feedback — works on touch where :hover doesn't. Same visual as
+	   :hover (the gated mouse rule above) so it reads consistently across
+	   input modes. */
+	.list-item__action:active {
+		--_background-color: var(--components-list-item-is-hovered-background-color);
+		--context-cell-content-color: var(--components-list-item-is-hovered-content-color);
+	}
+
+	:host([selected]) .list-item__action:active {
+		--_background-color: var(--components-list-item-is-highlighted-background-color);
+		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
 	:host([selected]) .list-item__action {
 		--_background-color: var(--components-list-item-is-selected-background-color);
 		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
@@ -160,7 +169,7 @@ export const listItemStyles = css `
 	}
 
 
-	/* ## Focus */
+	/* # Focus */
 
 	.list-item__action:focus-visible:not(.is-pointer-focus)::after {
 		content: '';
@@ -202,8 +211,8 @@ export const listItemStyles = css `
 		z-index: var(--_z-index-content);
 		padding-block: var(--components-list-item-md-padding-block);
 		flex-direction: row;
-		align-items: center;
 		flex-shrink: 0;
+		align-items: center;
 	}
 
 	.list-item__start-area.is-visible,
@@ -211,8 +220,8 @@ export const listItemStyles = css `
 		display: flex;
 	}
 
-	:host([size='sm']) .list-item__start-area,
-	:host([size='sm']) .list-item__end-area {
+	:host([size="sm"]) .list-item__start-area,
+	:host([size="sm"]) .list-item__end-area {
 		padding-block: var(--components-list-item-sm-padding-block);
 	}
 
@@ -226,11 +235,11 @@ export const listItemStyles = css `
 		min-width: 0;
 		padding-block: var(--components-list-item-md-padding-block);
 		flex-direction: row;
-		align-items: center;
 		flex-grow: 1;
+		align-items: center;
 	}
 
-	:host([size='sm']) .list-item__main-area {
+	:host([size="sm"]) .list-item__main-area {
 		padding-block: var(--components-list-item-sm-padding-block);
 	}
 

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhC,CAAC"}
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQhC,CAAC"}

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

@@ -47,6 +47,11 @@ export declare class NLDDMenuGroup extends LitElement {
  * @attr {string}  icon      - Icon name rendered before the text (nldd-icon name).
  * @attr {string}  type      - Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'.
  * @attr {boolean} selected        - Selected state for checkbox and radio types.
+ * @attr {boolean} destructive     - Marks the item as destructive (red text; red highlight bg). Use for irreversible
+ *                                   actions like "Delete". Colour is the only built-in signal, so per WCAG 1.4.1 the
+ *                                   item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely
+ *                                   on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's
+ *                                   responsibility.
  * @attr {boolean} disabled        - Disabled state.
  * @attr {string}  query           - Query substring to bold-highlight in text. Set by menu's filter(); also settable by consumers.
  * @attr {string}  query-mark-mode - 'match' | 'predictive' (default: 'predictive'). See text-cell for details.
@@ -64,6 +69,7 @@ export declare class NLDDMenuItem extends LitElement {
     icon: string;
     type: 'button' | 'checkbox' | 'radio';
     selected: boolean;
+    destructive: boolean;
     disabled: boolean;
     query: string;
     queryMarkMode: QueryMarkMode;
@@ -104,9 +110,9 @@ export declare class NLDDMenuItem extends LitElement {
  * @attr {string}  empty-text           - Text of the default empty-state dialog. Falls back
  *                                        to Dutch i18n "Geen opties beschikbaar".
  * @attr {string}  empty-supporting-text - Supporting text of the default empty-state dialog.
- * @attr {string}  width                - Explicit width. Sets --_menu-width internally.
+ * @attr {string}  width                - Explicit width. Sets --_width internally.
  * @attr {number}  max-items            - Maximum number of visible items before scrolling.
- *                                        Sets --_menu-max-items internally. Default: 0 (no limit).
+ *                                        Sets --_max-items internally. Default: 0 (no limit).
  * @attr {object}  translations         - Override one or more translation keys.
  * @attr {Function} filterFn            - Custom filter function (query, item) => boolean.
  *
@@ -128,11 +134,11 @@ export declare class NLDDMenu extends LitElement {
     variant: 'menu' | 'listbox';
     emptyText: string;
     emptySupportingText: string;
-    /** Explicit width. Sets --_menu-width internally. */
+    /** Explicit width. Sets --_width internally. */
     width: string;
     /**
      * Maximum number of visible items before the menu scrolls.
-     * Sets --_menu-max-items internally. Default: 0 (no limit).
+     * Sets --_max-items internally. Default: 0 (no limit).
      */
     maxItems: number;
     /**
@@ -193,12 +199,13 @@ export declare class NLDDMenu extends LitElement {
      * @internal */
     _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 */
+     * or confirmed tap) collapsed the chain, or when a pointerdown landed
+     * on the anchor while the menu was open (covers native light-dismiss).
+     * The trailing `click` of that same gesture consumes it in
+     * `_handleDocumentClick` and must NOT reopen — gesture-correlated, so
+     * it's reliable on touch regardless of pointerup→click timing.
+     * @internal */
     _collapsedByPointerGesture: boolean;
     private _cleanupAutoUpdate;
     private _t;
@@ -466,6 +473,18 @@ export declare class NLDDMenu extends LitElement {
      * tap (pointerup without crossing the scroll threshold); a scroll
      * leaves the chain untouched, matching root-menu behaviour.
      */
+    private _dragStartItem;
+    /**
+     * Native HTML `<select>` lets you press on one option, drag to another,
+     * and release to pick the one under the pointer. Standard click events
+     * don't fire across different elements, so we replicate it manually:
+     * remember the pointerdown'd item, listen for the matching pointerup,
+     * and if the release lands on a different non-disabled item, fire its
+     * `select` directly. The original button's click handler still owns the
+     * single-click no-drag path.
+     */
+    private _handleItemPointerdown;
+    private _handleDragRelease;
     private _handleDocumentPointerdown;
     private _outsideTapStartX;
     private _outsideTapStartY;

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,oDAAoD,CAAC;AAC5D,OAAO,wDAAwD,CAAC;AAChE,OAAO,oDAAoD,CAAC;AAC5D,OAAO,4BAA4B,CAAC;AACpC,OAAO,0DAA0D,CAAC;AAQlE,qBAAa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAElC,MAAM;CAGf;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,IAAI,SAAM;IAOV,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAC9B,QAAQ,CAAC,QAAQ,SAAyD;IAEjE,MAAM;CAGf;AASD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAkB;IAGxC,IAAI,SAAM;IAGV,KAAK,SAAM;IAEX,2EAA2E;IAE3E,OAAO,SAAM;IAGb,OAAO,SAAM;IAEb,oEAAoE;IAEpE,IAAI,SAAM;IAGV,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAY;IAGjD,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAGX,aAAa,EAAE,aAAa,CAAgB;IAE5C,oDAAoD;IAEpD,WAAW,EAAE,MAAM,GAAG,SAAS,CAAU;IAEzC;gFAC4E;IAE5E,YAAY,UAAS;IAErB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAErB,iBAAiB,IAAI,IAAI;IA8BzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAK5C;;uCAEmC;IACnC,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,wBAAwB,CAAiC;IAEjE,IAAI,UAAU,IAAI,QAAQ,GAAG,IAAI,CAEhC;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAEQ,YAAY,IAAI,IAAI;IAyBpB,oBAAoB,IAAI,IAAI;IAMrC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;IAyCjC,yCAAyC;IACzC,MAAM,IAAI,IAAI;IAIL,MAAM;CAGf;AAiBD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,MAAM,SAAM;IAGZ,aAAa,EAAE,OAAO,GAAG,IAAI,CAAQ;IAGrC,SAAS,EAAE,MAAM,CAAkB;IAEnC;;;;OAIG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAU;IAGrC,SAAS,SAAM;IAGf,mBAAmB,SAAM;IAGzB,qDAAqD;IAErD,KAAK,SAAM;IAEX;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,YAAY,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAEjD;;;;;;;;OAQG;IAEH,iBAAiB,UAAS;IAE1B;;;OAGG;IAEH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,OAAO,CAAmB;IAG3E,OAAO,CAAC,QAAQ,CAAS;IAEzB;qEACiE;IACjE,OAAO,CAAC,cAAc,CAAyB;IAC/C,OAAO,CAAC,oBAAoB,CAA6B;IACzD;;;;0DAIsD;IACtD,OAAO,CAAC,qBAAqB,CAAgD;IAC7E;;yEAEqE;IACrE,uBAAuB,UAAS;IAChC;;;;6DAIyD;IACzD,UAAU,EAAE,QAAQ,EAAE,CAAM;IAC5B;;wEAEoE;IACpE,UAAU,EAAE,QAAQ,GAAG,IAAI,CAAQ;IACnC;;wDAEoD;IACpD,aAAa,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAQ;IAE1C;;mBAEe;IACf,WAAW,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAEpC;;mBAEe;IAEf,WAAW,EAAE,YAAY,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAK;IACtB;;;;4EAIwE;IACxE,0BAA0B,UAAS;IACnC,OAAO,CAAC,kBAAkB,CAA6B;IAIvD,OAAO,CAAC,EAAE;IAUV,qFAAqF;IACrF,IAAI,kBAAkB,IAAI,MAAM,CAE/B;IAED;;;yDAGqD;IACrD,IAAI,kBAAkB,IAAI,MAAM,CAI/B;IAWD;+EAC2E;IAC3E,OAAO,CAAC,YAAY,CAAK;IACzB;;iEAE6D;IAC7D,OAAO,CAAC,oBAAoB,CAAM;IAElC;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,SAAS;IAmBR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAwB/D,OAAO,CAAC,YAAY;IAMpB;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAWhC;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,OAAO,CAAC,qBAAqB;IAuB7B,OAAO,CAAC,oBAAoB,CAgC1B;IAmBF,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,qBAAqB,CAA0C;IACvE,OAAO,CAAC,uBAAuB,CAAuB;IACtD,OAAO,CAAC,cAAc,CAAyC;IAC/D,OAAO,CAAC,iBAAiB,CAAyC;IAClE,OAAO,CAAC,oBAAoB,CAAyB;IACrD,OAAO,CAAC,oBAAoB,CAAS;IACrC;;;oEAGgE;IAChE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,+BAA+B,CAAO;IAC9D;;;;;;sEAMkE;IAClE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,4BAA4B,CAAK;IAEzD,OAAO,CAAC,yBAAyB,CAO/B;IAEF;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAwCrB;;;uDAGmD;IACnD,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB,CAMvB;IAEF;;6EAEyE;IACzE,OAAO,CAAC,kBAAkB;IA6D1B;;;6EAGyE;IACzE,OAAO,CAAC,oBAAoB;IAQ5B;;+DAE2D;IAC3D,OAAO,CAAC,yBAAyB;IAwBjC;;;;kFAI8E;IAC9E,OAAO,CAAC,oBAAoB;IAW5B;;;;qDAIiD;IACjD,OAAO,CAAC,yBAAyB;IAOjC;;6CAEyC;IACzC,OAAO,CAAC,wBAAwB;IAkBhC;;;kEAG8D;IAC9D,OAAO,CAAC,gCAAgC;IAOxC;;;0EAGsE;IACtE,OAAO,CAAC,sCAAsC;IAK9C;;0EAEsE;IACtE,OAAO,CAAC,0BAA0B;IAclC;;2CAEuC;IACvC,OAAO,CAAC,MAAM,CAAC,kBAAkB;IASjC,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,oBAAoB,CAA+B;IAE3D,OAAO,CAAC,0BAA0B;IAwBlC,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,gBAAgB;IAOxB;;;;8EAI0E;IAC1E,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAOjC;oEACgE;IAChE,OAAO,CAAC,MAAM,CAAC,eAAe;IAc9B,OAAO,CAAC,sBAAsB,CAQ5B;IAEF;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAA+B;IAC/D,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAUnC,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED;uDACmD;IACnD,IAAI,SAAS,IAAI,QAAQ,CAIxB;IAED;6CACyC;IACzC,IAAI,UAAU,IAAI,OAAO,CAExB;IAED;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB,CAiMxB;IAEF;;;mBAGe;IACf,WAAW,QAAO,IAAI,CAEpB;IAEF;;;mBAGe;IACf,qBAAqB,QAAO,IAAI,CAE9B;IAaF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAAK;IACvD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IAEzB,gBAAgB;IAChB,qBAAqB,GAAI,OAAO,UAAU,KAAG,IAAI,CAM/C;IAEF,gBAAgB;IAChB,oBAAoB,GAAI,OAAO,UAAU,KAAG,IAAI,CAS9C;IAEF,gBAAgB;IAChB,mBAAmB,QAAO,IAAI,CAE5B;IAEF;;;;;;;;iCAQ6B;IAC7B,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,cAAc,CASpB;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,OAAO,CAAC,0BAA0B,CAqChC;IAEF,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,eAAe,CAOrB;IAEF,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,MAAM,CAAC,cAAc,CAAK;IAEzB,iBAAiB,IAAI,IAAI;IAmBzB,YAAY,IAAI,IAAI;IAIpB,oBAAoB,IAAI,IAAI;IAoCrC,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,wBAAwB;IAyBhC;;;;;;;;OAQG;IACI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAclC;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;OAEG;IACI,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IAwB5D;;;OAGG;IACI,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAiBtD,+DAA+D;IACxD,cAAc,IAAI,YAAY,GAAG,IAAI;IAI5C,iFAAiF;IAC1E,gBAAgB,IAAI,MAAM;IAIjC;sEACkE;IAClE,OAAO,CAAC,MAAM;IAKd,oEAAoE;IACvD,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAmDxC,OAAO,CAAC,cAAc,CA0FpB;IAEF,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAuB;IAC9C;;;uBAGmB;IACnB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAO;IAElD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,gBAAgB;IA4BxB,OAAO,CAAC,aAAa,CA0DnB;IAEO,MAAM;CAGf;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;QACtB,gBAAgB,EAAE,YAAY,CAAC;QAC/B,mBAAmB,EAAE,eAAe,CAAC;QACrC,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/menu/menu.ts"],"names":[],"mappings":"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"}

package/dist/components/lists-and-menus/menu/menu.js

@@ -16,7 +16,6 @@ import '../../lists-and-menus/cells/text-cell/text-cell.js';
 import '../../content/icon/icon.js';
 import '../../status-and-feedback/inline-dialog/inline-dialog.js';
 import { isKeyboardMode, isTouchMode } from '../../../utilities/input-modality.js';
-import { POPOVER_REOPEN_GUARD_MS } from '../../../utilities/popover-guard.js';
 import { breakpoints } from '../../../assets/styles/breakpoints.js';
 // # nldd-menu-divider
 export class NLDDMenuDivider extends LitElement {
@@ -83,6 +82,11 @@ if (!customElements.get('nldd-menu-group')) {
  * @attr {string}  icon      - Icon name rendered before the text (nldd-icon name).
  * @attr {string}  type      - Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'.
  * @attr {boolean} selected        - Selected state for checkbox and radio types.
+ * @attr {boolean} destructive     - Marks the item as destructive (red text; red highlight bg). Use for irreversible
+ *                                   actions like "Delete". Colour is the only built-in signal, so per WCAG 1.4.1 the
+ *                                   item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely
+ *                                   on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's
+ *                                   responsibility.
  * @attr {boolean} disabled        - Disabled state.
  * @attr {string}  query           - Query substring to bold-highlight in text. Set by menu's filter(); also settable by consumers.
  * @attr {string}  query-mark-mode - 'match' | 'predictive' (default: 'predictive'). See text-cell for details.
@@ -101,6 +105,7 @@ export class NLDDMenuItem extends LitElement {
         this.icon = '';
         this.type = 'button';
         this.selected = false;
+        this.destructive = false;
         this.disabled = false;
         this.query = '';
         this.queryMarkMode = 'predictive';
@@ -256,6 +261,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDMenuItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuItem.prototype, "destructive", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDMenuItem.prototype, "disabled", void 0);
@@ -297,9 +305,9 @@ const defaultFilterFn = (query, item) => {
  * @attr {string}  empty-text           - Text of the default empty-state dialog. Falls back
  *                                        to Dutch i18n "Geen opties beschikbaar".
  * @attr {string}  empty-supporting-text - Supporting text of the default empty-state dialog.
- * @attr {string}  width                - Explicit width. Sets --_menu-width internally.
+ * @attr {string}  width                - Explicit width. Sets --_width internally.
  * @attr {number}  max-items            - Maximum number of visible items before scrolling.
- *                                        Sets --_menu-max-items internally. Default: 0 (no limit).
+ *                                        Sets --_max-items internally. Default: 0 (no limit).
  * @attr {object}  translations         - Override one or more translation keys.
  * @attr {Function} filterFn            - Custom filter function (query, item) => boolean.
  *
@@ -322,11 +330,11 @@ export class NLDDMenu extends LitElement {
         this.variant = 'menu';
         this.emptyText = '';
         this.emptySupportingText = '';
-        /** Explicit width. Sets --_menu-width internally. */
+        /** Explicit width. Sets --_width internally. */
         this.width = '';
         /**
          * Maximum number of visible items before the menu scrolls.
-         * Sets --_menu-max-items internally. Default: 0 (no limit).
+         * Sets --_max-items internally. Default: 0 (no limit).
          */
         this.maxItems = 0;
         /**
@@ -387,12 +395,13 @@ export class NLDDMenu extends LitElement {
          * @internal */
         this._parentItem = null;
         this._isOpen = false;
-        this._closedAt = 0;
         /** 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 */
+         * or confirmed tap) collapsed the chain, or when a pointerdown landed
+         * on the anchor while the menu was open (covers native light-dismiss).
+         * The trailing `click` of that same gesture consumes it in
+         * `_handleDocumentClick` and must NOT reopen — gesture-correlated, so
+         * it's reliable on touch regardless of pointerup→click timing.
+         * @internal */
         this._collapsedByPointerGesture = false;
         this._cleanupAutoUpdate = null;
         // — Status messages (WCAG 4.1.3) ———————————————————————————————————————————
@@ -445,7 +454,7 @@ export class NLDDMenu extends LitElement {
             if (this._isOpen) {
                 this.hidePopover();
             }
-            else if (Date.now() - this._closedAt > POPOVER_REOPEN_GUARD_MS) {
+            else {
                 this.showPopover();
             }
         };
@@ -767,7 +776,6 @@ export class NLDDMenu extends LitElement {
          */
         this._collapseChain = () => {
             const root = this._chainRoot ?? this;
-            root._closedAt = Date.now();
             // Snapshot + clear first so the re-entrant cleanup splices are
             // no-ops and a trailing same-gesture call finds nothing to do.
             const chain = root._openChain;
@@ -804,9 +812,58 @@ export class NLDDMenu extends LitElement {
          * tap (pointerup without crossing the scroll threshold); a scroll
          * leaves the chain untouched, matching root-menu behaviour.
          */
+        this._dragStartItem = null;
+        /**
+         * Native HTML `<select>` lets you press on one option, drag to another,
+         * and release to pick the one under the pointer. Standard click events
+         * don't fire across different elements, so we replicate it manually:
+         * remember the pointerdown'd item, listen for the matching pointerup,
+         * and if the release lands on a different non-disabled item, fire its
+         * `select` directly. The original button's click handler still owns the
+         * single-click no-drag path.
+         */
+        this._handleItemPointerdown = (event) => {
+            if (event.button !== 0)
+                return;
+            const item = event.target?.closest('nldd-menu-item');
+            if (!item || item.disabled)
+                return;
+            this._dragStartItem = item;
+            document.addEventListener('pointerup', this._handleDragRelease, { capture: true, once: true });
+        };
+        this._handleDragRelease = (event) => {
+            const startItem = this._dragStartItem;
+            this._dragStartItem = null;
+            if (!startItem)
+                return;
+            // If the menu closed between pointerdown and pointerup (light-dismiss,
+            // keyboard shortcut), bail — elementFromPoint could otherwise resolve
+            // to an item in a different, newly-opened menu and fire its select.
+            if (!this._isOpen)
+                return;
+            const target = document.elementFromPoint(event.clientX, event.clientY);
+            const releaseItem = target?.closest('nldd-menu-item');
+            if (!releaseItem || releaseItem === startItem || releaseItem.disabled)
+                return;
+            // Different item — fire its select. Browser won't dispatch click here
+            // because pointerdown and pointerup landed on different targets, so
+            // there's no double-fire to suppress.
+            releaseItem._handleClick();
+        };
         this._handleDocumentPointerdown = (event) => {
             if (!this._isOpen)
                 return;
+            // Anchor pointerdown on a root menu while open: capture as a gesture
+            // so the trailing click — fired after native popover light-dismiss
+            // has already closed us — won't reopen us via `_handleDocumentClick`.
+            // Drill-in submenus take a different path further down.
+            if (!this._isSubmenu) {
+                const anchorEl = this._getAnchorEl();
+                if (anchorEl && event.composedPath().includes(anchorEl)) {
+                    this._collapsedByPointerGesture = true;
+                    return;
+                }
+            }
             if (!this._drillInMode)
                 return;
             // Only nested drill-in submenus need this: they form a hidden chain
@@ -973,7 +1030,6 @@ export class NLDDMenu extends LitElement {
             // already chosen a value, so screen readers announce the role.
             this._syncAnchorPopupState(this._isOpen);
             if (toggleEvent.newState !== 'open') {
-                this._closedAt = Date.now();
                 this._cleanupAutoUpdate?.();
                 this._cleanupAutoUpdate = null;
                 window.removeEventListener('resize', this._handleWindowResize);
@@ -1076,18 +1132,18 @@ export class NLDDMenu extends LitElement {
     updated(changedProperties) {
         if (changedProperties.has('width')) {
             if (this.width) {
-                this.style.setProperty('--_menu-width', this.width);
+                this.style.setProperty('--_width', this.width);
             }
             else {
-                this.style.removeProperty('--_menu-width');
+                this.style.removeProperty('--_width');
             }
         }
         if (changedProperties.has('maxItems')) {
             if (this.maxItems > 0) {
-                this.style.setProperty('--_menu-max-items', String(this.maxItems));
+                this.style.setProperty('--_max-items', String(this.maxItems));
             }
             else {
-                this.style.removeProperty('--_menu-max-items');
+                this.style.removeProperty('--_max-items');
             }
         }
         if (changedProperties.has('variant')) {
@@ -1525,6 +1581,7 @@ export class NLDDMenu extends LitElement {
         this.addEventListener('menu-item-focused', this._handleMenuItemFocused);
         this.addEventListener('submenu-open', this._handleSubmenuOpen);
         this.addEventListener('select', this._collapseChain);
+        this.addEventListener('pointerdown', this._handleItemPointerdown);
         document.addEventListener('click', this._handleDocumentClick);
     }
     firstUpdated() {
@@ -1547,7 +1604,9 @@ export class NLDDMenu extends LitElement {
         this.removeEventListener('menu-item-focused', this._handleMenuItemFocused);
         this.removeEventListener('submenu-open', this._handleSubmenuOpen);
         this.removeEventListener('select', this._collapseChain);
+        this.removeEventListener('pointerdown', this._handleItemPointerdown);
         document.removeEventListener('click', this._handleDocumentClick);
+        document.removeEventListener('pointerup', this._handleDragRelease, true);
         // Defensive: the pointerdown + resize listeners are added on open
         // and removed on close, but if the menu is torn down mid-open we'd
         // otherwise leak the global listeners.
@@ -1594,24 +1653,44 @@ export class NLDDMenu extends LitElement {
     _updateDividerVisibility() {
         const children = Array.from(this.children);
         children.forEach(el => {
-            if (el.tagName.toLowerCase() === 'nldd-menu-divider') {
+            const tag = el.tagName.toLowerCase();
+            if (tag === 'nldd-menu-divider')
                 el.removeAttribute('hidden');
-            }
+            if (tag === 'nldd-menu-group')
+                el.removeAttribute('data-no-bottom-divider');
         });
         const visible = children.filter(el => !el.hasAttribute('hidden'));
+        // Pass 1: hide redundant explicit dividers (first/last, adjacent to
+        // another divider, adjacent to a group's auto-divider).
         visible.forEach((el, index) => {
             if (el.tagName.toLowerCase() !== 'nldd-menu-divider')
                 return;
+            const prevTag = visible[index - 1]?.tagName.toLowerCase();
+            const nextTag = visible[index + 1]?.tagName.toLowerCase();
             const isFirst = index === 0;
             const isLast = index === visible.length - 1;
-            const prevIsDivider = index > 0 && visible[index - 1].tagName.toLowerCase() === 'nldd-menu-divider';
-            // nldd-menu-group renders its own auto-divider above; suppress an
-            // explicit divider that would render right next to it.
-            const nextIsGroup = index < visible.length - 1 && visible[index + 1].tagName.toLowerCase() === 'nldd-menu-group';
-            if (isFirst || isLast || prevIsDivider || nextIsGroup) {
+            if (isFirst || isLast
+                || prevTag === 'nldd-menu-divider'
+                || prevTag === 'nldd-menu-group'
+                || nextTag === 'nldd-menu-group') {
                 el.setAttribute('hidden', '');
             }
         });
+        // Pass 2: determine group bottom-divider against the post-pass-1
+        // visible set. Without this re-filter a group followed by an
+        // explicit divider that pass 1 hid (e.g. because the divider is
+        // last, or the items after it are hidden) would still see the
+        // divider as its "next" sibling and keep the bottom border.
+        const remaining = visible.filter(el => !el.hasAttribute('hidden'));
+        remaining.forEach((el, index) => {
+            if (el.tagName.toLowerCase() !== 'nldd-menu-group')
+                return;
+            const nextTag = remaining[index + 1]?.tagName.toLowerCase();
+            const isLast = index === remaining.length - 1;
+            if (isLast || nextTag === 'nldd-menu-group') {
+                el.setAttribute('data-no-bottom-divider', '');
+            }
+        });
     }
     // — Public API ————————————————————————————————————————————————————————————
     /**
@@ -1717,7 +1796,7 @@ export class NLDDMenu extends LitElement {
         // Without this, the submenu's top edge aligns with the opener and the
         // inner padding pushes the first item down, leaving a visible step.
         const submenuPadding = (this._isSubmenu && !this._drillInMode)
-            ? this._cssPx('--_menu-padding')
+            ? this._cssPx('--_padding')
             : 0;
         // Drill-in: pick the side from the available space around the
         // anchor — recomputed every reposition, but content-independent so
@@ -1741,7 +1820,7 @@ export class NLDDMenu extends LitElement {
                 size({
                     padding: viewportMargin,
                     apply: ({ availableHeight }) => {
-                        this.style.setProperty('--_menu-max-height', `${availableHeight}px`);
+                        this.style.setProperty('--_max-height', `${availableHeight}px`);
                     },
                 }),
             ],