@nldd/design-system 0.8.62 → 0.8.64

package/dist/components/lists-and-tables/list-item/list-item.js

@@ -24,6 +24,9 @@ import '../cells/spacer-cell/spacer-cell.js';
  * - `list` parent       → `role="listitem"`
  * - `navigation` parent → `role="listitem"` + `aria-current="page"` on the
  *                         inner `<a>` / `<button>` when `selected`
+ * - `listbox` parent    → `role="option"` + `aria-selected` reflecting `selected`.
+ *                         The list points its search input's `aria-activedescendant`
+ *                         at the active option via `_highlighted` (separate from `selected`).
  *
  * @slot         - Main content area
  * @slot start   - Content at the start of the row
@@ -41,8 +44,19 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         this._showStart = false;
         this._showEnd = false;
         this._parentType = 'list';
+        /** Set by the parent nldd-list when `arrow-navigation` (roving tabindex) is on.
+         *  Switches the inner action from a normal tab stop to a roving one. */
+        this._arrowNavigation = false;
+        /** Set by the parent nldd-list: when arrow-navigation is on, exactly one item
+         *  is the roving entry point (tabindex 0); the rest are tabindex -1. */
+        this._rovingActive = false;
+        /** Set by the parent nldd-list in `type="listbox"`: marks this option as
+         *  highlighted — the active descendant the search input's `aria-activedescendant`
+         *  points at. Kept SEPARATE from `selected`: the highlight moves with the arrow
+         *  keys, selection stays consumer-managed. Named for the visual state (not
+         *  `_active`, which would clash with the pressed / `:active` feedback). */
+        this._highlighted = false;
         this._isBoxed = false;
-        this._listObserver = null;
         this._handleClick = () => {
             // Safari and Firefox on Mac don't focus buttons on click. Force focus
             // so :has(.list-item__action:focus) and :focus-within CSS work reliably.
@@ -59,6 +73,15 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         this._handleFocusOut = () => {
             this._action?.classList.remove('is-pointer-focus');
         };
+        this._onPointerDown = (e) => {
+            // Primary button / touch / pen only (mouse right-click has button > 0).
+            if (e.button > 0)
+                return;
+            this._action?.classList.add('is-pressed');
+        };
+        this._clearPressed = () => {
+            this._action?.classList.remove('is-pressed');
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -72,14 +95,21 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         this.addEventListener('focusin', this._handleFocusIn);
         this.addEventListener('focusout', this._handleFocusOut);
         this.addEventListener('click', this._handleClick);
+        // Press feedback: shown on press, cleared on release or when a touch
+        // turns into a scroll (the browser fires pointercancel for that pointer),
+        // so `active` never sticks while the user scrolls the list.
+        this.addEventListener('pointerdown', this._onPointerDown);
+        this.addEventListener('pointerup', this._clearPressed);
+        this.addEventListener('pointercancel', this._clearPressed);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._listObserver?.disconnect();
-        this._listObserver = null;
         this.removeEventListener('focusin', this._handleFocusIn);
         this.removeEventListener('focusout', this._handleFocusOut);
         this.removeEventListener('click', this._handleClick);
+        this.removeEventListener('pointerdown', this._onPointerDown);
+        this.removeEventListener('pointerup', this._clearPressed);
+        this.removeEventListener('pointercancel', this._clearPressed);
     }
     firstUpdated() {
         if (this.hasAttribute('data-nldd-clone')) {
@@ -98,11 +128,17 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
             this._updateAriaState();
         }
     }
+    /** True when the item is an option in a `type="listbox"` parent. */
+    get _isListboxOption() {
+        return this._parentType === 'listbox';
+    }
     /**
-     * Syncs the item with the closest parent nldd-list (variant + type).
-     * Called once in firstUpdated. If the item is moved to a different nldd-list
-     * after first render, the MutationObserver will still watch the original list.
-     * This is acceptable as moving items between lists is not a supported use case.
+     * Reads the initial variant + type from the closest parent nldd-list, once in
+     * firstUpdated, so the item is styled correctly on first paint. Later changes
+     * are PUSHED by the list: its `updated` / `_updateItems` calls `_applyVariant`
+     * and `_applyParentType` on every item, so the list is the single source of
+     * truth and a runtime variant/type switch (or an item moved to another list)
+     * always tracks its current parent.
      */
     _syncWithList() {
         const list = this.closest('nldd-list');
@@ -114,14 +150,6 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         }
         this._applyVariant(list.variant);
         this._applyParentType(list.type);
-        this._listObserver = new MutationObserver(() => {
-            this._applyVariant(list.variant);
-            this._applyParentType(list.type);
-        });
-        this._listObserver.observe(list, {
-            attributes: true,
-            attributeFilter: ['variant', 'type'],
-        });
     }
     _applyVariant(variant) {
         this._isBoxed = variant === 'box';
@@ -132,9 +160,20 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         this._parentType = type;
     }
     _updateAriaState() {
-        this.setAttribute('role', 'listitem');
+        // In a listbox parent the item is an `option`, not a `listitem`, and
+        // carries aria-selected so AT announces selection state. The active
+        // option (the input's aria-activedescendant) is conveyed via `_highlighted`
+        // (a highlight class), kept separate from selection.
+        if (this._isListboxOption) {
+            this.setAttribute('role', 'option');
+            this.setAttribute('aria-selected', String(this.selected));
+        }
+        else {
+            this.setAttribute('role', 'listitem');
+            this.removeAttribute('aria-selected');
+        }
         // aria-current on the inner action (link/button) — navigation only
-        const action = this.shadowRoot?.querySelector('.list-item__action');
+        const action = this._action;
         if (this._parentType === 'navigation' && this.selected && action) {
             action.setAttribute('aria-current', 'page');
         }
@@ -164,10 +203,23 @@ let NLDDListItem = class NLDDListItem extends withTranslations(LitElement, nlddL
         this._action?.focus(options);
     }
     render() {
-        const newTabLabel = this.href && this.target === '_blank'
-            ? this._t('components.list-item.opens-in-new-tab-label')
+        const opensInNewTabLabel = this.href && this.target === '_blank'
+            ? this._t('components.list-item.opens-in-new-tab-text')
             : undefined;
-        return template(this.button, this.href, this.target, this.rel, this._showStart, this._showEnd, newTabLabel);
+        // Listbox options are never separate tab stops — only the list's own
+        // search input is in the tab order, and active moves via
+        // aria-activedescendant. Roving tabindex (arrow-navigation) supersedes
+        // nothing here: the two modes are mutually exclusive on the parent list.
+        // Otherwise, roving tabindex: when the list runs arrow-navigation,
+        // exactly one item is the tab stop (0) and the rest are reachable only
+        // via the arrow keys (-1). Off → undefined leaves the native
+        // button/link as a normal tab stop.
+        const actionTabindex = this._isListboxOption
+            ? '-1'
+            : this._arrowNavigation
+                ? (this._rovingActive ? '0' : '-1')
+                : undefined;
+        return template(this.button, this.href, this.target, this.rel, this._showStart, this._showEnd, opensInNewTabLabel, actionTabindex, this._highlighted);
     }
 };
 NLDDListItem.styles = [listItemStyles];
@@ -201,6 +253,15 @@ __decorate([
 __decorate([
     state()
 ], NLDDListItem.prototype, "_parentType", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_arrowNavigation", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_rovingActive", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_highlighted", void 0);
 __decorate([
     query('.list-item__action')
 ], NLDDListItem.prototype, "_action", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,qCAAqC,CAAC;AAI7C;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB,CAAC,UAAU,EAAE,wBAAwB,CAAC;IAAjF;;QAIN,SAAI,GAAiB,IAAI,CAAC;QAG1B,aAAQ,GAAG,KAAK,CAAC;QAEjB,wEAAwE;QAExE,WAAM,GAAG,KAAK,CAAC;QAmBf,8GAA8G;QAE9G,gBAAW,GAAG,KAAK,CAAC;QAGZ,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAa,MAAM,CAAC;QAK/B,aAAQ,GAAG,KAAK,CAAC;QACjB,kBAAa,GAA4B,IAAI,CAAC;QA4G9C,iBAAY,GAAG,GAAG,EAAE;YAC3B,sEAAsE;YACtE,yEAAyE;YACzE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACvB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC7B,wEAAwE;YACxE,uEAAuE;YACvE,uEAAuE;YACvE,qEAAqE;YACrE,sEAAsE;YACtE,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,aAAa,EAAE,CAAC,CAAC;QACrE,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QACpD,CAAC,CAAC;IAyBH,CAAC;IApJS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,0FAA0F;QAC1F,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC;YAAE,OAAO;QACjD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,mEAAmE;QACnE,wEAAwE;QACxE,6DAA6D;QAC7D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACxD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,UAAU,EAAE,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAEQ,YAAY;QACpB,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC1C,gEAAgE;YAChE,gEAAgE;YAChE,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO;QACR,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC3G,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACzB,CAAC;IACF,CAAC;IAED;;;;;OAKG;IACK,aAAa;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAW,WAAW,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,EAAE,CAAC;YACX,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;gBAC1B,OAAO,CAAC,IAAI,CAAC,wHAAwH,CAAC,CAAC;YACxI,CAAC;YACD,OAAO;QACR,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE;YAChC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;SACpC,CAAC,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,OAAe;QACpC,IAAI,CAAC,QAAQ,GAAG,OAAO,KAAK,KAAK,CAAC;QAClC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB,CAAC,IAAc;QACtC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACzB,CAAC;IAEO,gBAAgB;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,mEAAmE;QACnE,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,oBAAoB,CAAC,CAAC;QACjF,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,EAAE,CAAC;YAClE,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACP,MAAM,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;IAEO,iBAAiB;QACxB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,oBAAoB,CAAC,CAAC;QACxF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,kBAAkB,CAAC,CAAC;QACpF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACnF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,CAAC;IAEO,iBAAiB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,oBAAoB,CAAC,CAAC;QACnF,IAAI,EAAE,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACtE,CAAC;IAEO,eAAe;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,kBAAkB,CAAC,CAAC;QACjF,IAAI,EAAE,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACtE,CAAC;IAqBD;;;OAGG;IACM,KAAK,CAAC,OAAsB;QACpC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,MAAM;QACd,MAAM,WAAW,GAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YACpC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,6CAA6C,CAAC;YACxD,CAAC,CAAC,SAAS,CAAC;QACd,OAAO,QAAQ,CACd,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,QAAQ,EACb,WAAW,CACX,CAAC;IACH,CAAC;;AAnMe,mBAAM,GAAG,CAAC,cAAc,CAAC,AAAnB,CAAoB;AAG1C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACF;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC5B;AAIf;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACd;AASd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACZ;AAIhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACvB;AAGZ;IADP,KAAK,EAAE;gDACmB;AAGnB;IADP,KAAK,EAAE;8CACiB;AAGjB;IADP,KAAK,EAAE;iDAC+B;AAG/B;IADP,KAAK,CAAC,oBAAoB,CAAC;6CACE;AA5ClB,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAqMxB"}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":"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"}

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

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

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

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const listItemStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */
@@ -93,7 +96,7 @@ export const listItemStyles = css `
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
-	.list-item__new-tab-hint {
+	.list-item__opens-in-new-tab-hint {
 		position: absolute;
 		margin: -1px;
 		border: 0;
@@ -108,15 +111,16 @@ 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]) */
-
-	.list-item:not(:has(.list-item__action))::before {
+	/* The selection / state fill. Non-interactive items carry it on .list-item
+	   (driven only by :host([selected])); interactive items carry it on
+	   .list-item__action (and respond to hover / focus / press below). */
+	.list-item:not(:has(.list-item__action))::before,
+	.list-item__action::before {
 		content: '';
 		display: block;
 		position: absolute;
 		inset-block: 0;
-		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		inset-inline: calc(-1 * var(--components-list-item-indicator-inline-inset));
 		z-index: var(--_z-index-indicator);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--_background-color);
@@ -128,21 +132,6 @@ export const listItemStyles = css `
 		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	/* 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: '';
-		display: block;
-		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);
-		pointer-events: none;
-	}
-
 	/* hover only on hover-capable devices: avoids touch-scroll flashing the
 	   hover state on the row under the finger */
 	@media (hover: hover) {
@@ -163,24 +152,28 @@ 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 {
+	   :hover (the gated mouse rule above) so it reads consistently across input
+	   modes. JS-driven (.is-pressed) rather than :active so a touch that turns
+	   into a scroll clears the press (pointercancel) instead of flashing it. */
+	.list-item__action.is-pressed {
 		--_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);
 	}
 
-	:host([selected]) .list-item__action:focus {
+	/* Highlight accent — the strongest fill. Shown for a selected item that is
+	   pressed or focused, for the listbox active descendant (.is-highlighted —
+	   the option the search input's aria-activedescendant points at), and for a
+	   selected active descendant (.is-highlighted on the action, to outweigh the
+	   selected fill). The hover+focus variant sits in the @media block above. */
+	:host([selected]) .list-item__action.is-pressed,
+	:host([selected]) .list-item__action:focus,
+	.list-item.is-highlighted,
+	:host([selected]) .list-item.is-highlighted .list-item__action {
 		--_background-color: var(--components-list-item-is-highlighted-background-color);
 		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
 	}
@@ -200,7 +193,7 @@ export const listItemStyles = css `
 
 	:host(:not(.is-boxed)) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
 		inset-block: 0;
-		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		inset-inline: calc(-1 * var(--components-list-item-indicator-inline-inset));
 		border-radius: var(--components-list-item-indicator-corner-radius);
 	}
 
@@ -219,6 +212,35 @@ export const listItemStyles = css `
 	}
 
 
+	/* # Boxed indicator + first/last corners
+	   In a box the rows fill the frame edge-to-edge, so the indicator drops its
+	   outward inline bleed and pill radius (inset-inline / border-radius 0).
+	   Without this, overflow-x: hidden on .list__items clips the bled-out rounded
+	   corners back to a square edge. The first/last VISIBLE row then rounds its
+	   outer corners to the box radius, so the fill follows the frame (and bounce /
+	   overscroll, where the rounded clip can leak, shows rounded rows). Visible-
+	   aware via .is-first / .is-last (set by the list), so it tracks the filtered
+	   set in a listbox. */
+
+	:host(.is-boxed) .list-item__action::before,
+	:host(.is-boxed) .list-item:not(:has(.list-item__action))::before {
+		inset-inline: 0;
+		border-radius: 0;
+	}
+
+	:host(.is-boxed.is-first) .list-item__action::before,
+	:host(.is-boxed.is-first) .list-item:not(:has(.list-item__action))::before {
+		border-top-left-radius: var(--components-list-corner-radius);
+		border-top-right-radius: var(--components-list-corner-radius);
+	}
+
+	:host(.is-boxed.is-last) .list-item__action::before,
+	:host(.is-boxed.is-last) .list-item:not(:has(.list-item__action))::before {
+		border-bottom-left-radius: var(--components-list-corner-radius);
+		border-bottom-right-radius: var(--components-list-corner-radius);
+	}
+
+
 	/* # Start & end area */
 
 	.list-item__start-area,
@@ -264,7 +286,8 @@ export const listItemStyles = css `
 	}
 
 	:host([selected]) .list-item__divider,
-	:host(.is-boxed.is-last) .list-item__divider {
+	:host(.is-boxed.is-last) .list-item__divider,
+	.list-item.is-highlighted .list-item__divider {
 		display: none;
 	}
 `;

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

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

package/dist/components/lists-and-tables/list-item/list-item.template.d.ts

@@ -1,2 +1,2 @@
-export declare const template: (button: boolean, href: string | undefined, target: string | undefined, rel: string | undefined, showStart: boolean, showEnd: boolean, newTabLabel?: string) => import("lit-html").TemplateResult<1>;
+export declare const template: (button: boolean, href: string | undefined, target: string | undefined, rel: string | undefined, showStart: boolean, showEnd: boolean, opensInNewTabLabel?: string, actionTabindex?: string, isHighlighted?: boolean) => import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=list-item.template.d.ts.map

package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.template.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ,GACpB,QAAQ,OAAO,EACf,MAAM,MAAM,GAAG,SAAS,EACxB,QAAQ,MAAM,GAAG,SAAS,EAC1B,KAAK,MAAM,GAAG,SAAS,EACvB,WAAW,OAAO,EAClB,SAAS,OAAO,EAChB,cAAc,MAAM,yCAuBpB,CAAC"}
+{"version":3,"file":"list-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.template.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ,GACpB,QAAQ,OAAO,EACf,MAAM,MAAM,GAAG,SAAS,EACxB,QAAQ,MAAM,GAAG,SAAS,EAC1B,KAAK,MAAM,GAAG,SAAS,EACvB,WAAW,OAAO,EAClB,SAAS,OAAO,EAChB,qBAAqB,MAAM,EAC3B,iBAAiB,MAAM,EACvB,uBAAqB,yCA4BrB,CAAC"}

package/dist/components/lists-and-tables/list-item/list-item.template.js

@@ -16,24 +16,29 @@ const areas = (showStart, showEnd) => html `
 		</slot>
 	</div>
 `;
-export const template = (button, href, target, rel, showStart, showEnd, newTabLabel) => {
+export const template = (button, href, target, rel, showStart, showEnd, opensInNewTabLabel, actionTabindex, isHighlighted = false) => {
+    // `is-highlighted` paints the listbox active-option highlight (separate from
+    // selected). Only the list sets `_highlighted`, and only in listbox mode.
+    const blockClass = classMap({ 'list-item': true, 'is-highlighted': isHighlighted });
     if (href) {
-        return html `<div class="list-item">
+        return html `<div class=${blockClass}>
 			<a class="list-item__action"
 				href=${href}
 				target=${target ?? nothing}
 				rel=${rel ?? nothing}
-			>${areas(showStart, showEnd)}${newTabLabel ? html `<span class="list-item__new-tab-hint">${newTabLabel}</span>` : nothing}</a>
+				tabindex=${actionTabindex ?? nothing}
+			>${areas(showStart, showEnd)}${opensInNewTabLabel ? html `<span class="list-item__opens-in-new-tab-hint">${opensInNewTabLabel}</span>` : nothing}</a>
 		</div>`;
     }
     if (button) {
-        return html `<div class="list-item">
+        return html `<div class=${blockClass}>
 			<button class="list-item__action"
 				type="button"
+				tabindex=${actionTabindex ?? nothing}
 			>${areas(showStart, showEnd)}</button>
 		</div>`;
     }
-    return html `<div class="list-item">
+    return html `<div class=${blockClass}>
 		${areas(showStart, showEnd)}
 	</div>`;
 };

package/dist/components/lists-and-tables/list-item/list-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,KAAK,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE,CAAC,IAAI,CAAA;cAC9C,QAAQ,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;;;;;;;;;cASpE,QAAQ,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;;;;CAK7E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,MAAe,EACf,IAAwB,EACxB,MAA0B,EAC1B,GAAuB,EACvB,SAAkB,EAClB,OAAgB,EAChB,WAAoB,EACnB,EAAE;IACH,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;;WAEF,IAAI;aACF,MAAM,IAAI,OAAO;UACpB,GAAG,IAAI,OAAO;MAClB,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3B,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,WAAW,SAAS,CAAC,CAAC,CAAC,OACnF;SACM,CAAC;IACT,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;;MAGP,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;SACtB,CAAC;IACT,CAAC;IACD,OAAO,IAAI,CAAA;IACR,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QACrB,CAAC;AACT,CAAC,CAAC"}
+{"version":3,"file":"list-item.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,KAAK,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE,CAAC,IAAI,CAAA;cAC9C,QAAQ,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;;;;;;;;;cASpE,QAAQ,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;;;;CAK7E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,MAAe,EACf,IAAwB,EACxB,MAA0B,EAC1B,GAAuB,EACvB,SAAkB,EAClB,OAAgB,EAChB,kBAA2B,EAC3B,cAAuB,EACvB,aAAa,GAAG,KAAK,EACpB,EAAE;IACH,6EAA6E;IAC7E,0EAA0E;IAC1E,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC,CAAC;IACpF,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA,cAAc,UAAU;;WAE1B,IAAI;aACF,MAAM,IAAI,OAAO;UACpB,GAAG,IAAI,OAAO;eACT,cAAc,IAAI,OAAO;MAClC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,kBAAkB,SAAS,CAAC,CAAC,CAAC,OAC1G;SACM,CAAC;IACT,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA,cAAc,UAAU;;;eAGtB,cAAc,IAAI,OAAO;MAClC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;SACtB,CAAC;IACT,CAAC;IACD,OAAO,IAAI,CAAA,cAAc,UAAU;IAChC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QACrB,CAAC;AACT,CAAC,CAAC"}

package/dist/components/lists-and-tables/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAgFvB,CAAC;AAEF,eAAO,MAAM,cAAc,yBA0C1B,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAmFvB,CAAC;AAEF,eAAO,MAAM,cAAc,yBA0C1B,CAAC"}

package/dist/components/lists-and-tables/table/table.styles.js

@@ -1,6 +1,9 @@
 import { css } from 'lit';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
 export const tableStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 	:host {
 		--_columns: none;
 		--_corner-radius: var(--semantics-tables-corner-radius);

package/dist/components/lists-and-tables/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;IAW1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;IAQ7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCrB,CAAC"}
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAc1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;IAQ7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCrB,CAAC"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts

@@ -8,19 +8,10 @@
  * AT + browser combos. The trail wraps onto multiple lines when it doesn't
  * fit, so it adapts to any width.
  *
- * Vanaf vier niveaus klapt het pad standaard in tot
- * `Home › … › {bovenliggende pagina} › {huidige pagina}`. De ellipsis is een
- * knop die bij activeren de verborgen niveaus op hun plek toont (eenmalig;
- * de focus verplaatst naar het eerste onthulde niveau). De verborgen items
- * blijven in de DOM, zodat zoekmachines en agents het volledige pad zien.
- * Zet `no-collapse` om het pad altijd volledig te tonen.
- *
  * @element nldd-breadcrumbs
  *
  * @attr {string}  accessible-label - Override the nav's aria-label.
  *                                    Defaults to the i18n value (NL: "Kruimelpad").
- * @attr {boolean} no-collapse      - Toon altijd alle niveaus; schakelt het
- *                                    inklappen vanaf vier niveaus uit.
  * @attr {object}  translations     - Override translation keys; unset keys
  *                                    fall back to the Dutch default.
  *
@@ -49,49 +40,14 @@ export declare class NLDDBreadcrumbsItem extends LitElement {
     text: string;
     connectedCallback(): void;
     updated(changed: PropertyValues): void;
-    /**
-     * Delegates focus to the inner link, so the parent can move focus to a
-     * revealed item after expanding the collapsed trail. A plain-text or current
-     * crumb has no inner link; it makes its own host focusable (tabindex="-1")
-     * and takes focus there instead, so the parent can land focus on any
-     * revealed item rather than dropping it to <body> (WCAG 2.4.3).
-     */
-    focus(options?: FocusOptions): void;
     render(): import("lit-html").TemplateResult;
 }
 export declare class NLDDBreadcrumbs extends LitElement {
     static styles: import("lit").CSSResult;
     accessibleLabel: string;
-    noCollapse: boolean;
     translations: Partial<NLDDBreadcrumbsTranslations>;
-    _collapsed: boolean;
-    /** One-shot: once the user expands the trail it stays expanded. */
-    private _expanded;
     private _mergedTranslations;
-    private _items;
-    /** Defers the slotchange-driven sync to a microtask: _syncCollapse moves
-     *  an item between slots, which fires another slotchange — running it
-     *  inline could mutate the DOM while Lit is mid-render. The direct calls
-     *  from updated() and _expand() stay synchronous.
-     *
-     *  An arrow-function class field (not a method) on purpose: it gives a
-     *  stable per-instance reference so add/removeEventListener pair up. */
-    _onSlotChange: () => void;
-    /**
-     * Applies the collapsed state to the light-DOM items. While collapsed the
-     * first item moves to the "first" slot (so the shadow ellipsis can sit
-     * between it and the tail) and the middle items get a marker attribute
-     * that hides them via the item's own styles. The consumer's `hidden`
-     * attribute is deliberately left alone. Re-runs are idempotent, so the
-     * slotchange this triggers settles immediately.
-     */
-    _syncCollapse: () => void;
-    /** @internal Expands the trail and moves focus to a revealed item.
-     *  Prefers the first revealed link; falls back to the first revealed item
-     *  so focus is never silently dropped (WCAG 2.4.3). */
-    _expand: () => void;
     willUpdate(changed: PropertyValues): void;
-    updated(changed: PropertyValues): void;
     _t(key: keyof NLDDBreadcrumbsTranslations): string;
     render(): import("lit-html").TemplateResult;
 }

package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItD,OAAO,EAA+B,KAAK,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAKtG;;;;;;;;;;;;;GAaG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAyB;IAG/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,UAAS;IAGhB,IAAI,SAAM;IAED,iBAAiB,IAAI,IAAI;IAYzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAa/C;;;;;;OAMG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAUnC,MAAM;CAGf;AAcD,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,eAAe,SAAM;IAGrB,UAAU,UAAS;IAGnB,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAGxD,UAAU,UAAS;IAEnB,mEAAmE;IACnE,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,mBAAmB,CAAmE;IAE9F,OAAO,CAAC,MAAM;IAMd;;;;;;4EAMwE;IACxE,aAAa,QAAO,IAAI,CAEtB;IAEF;;;;;;;OAOG;IACH,aAAa,QAAO,IAAI,CAYtB;IAEF;;2DAEuD;IACvD,OAAO,QAAO,IAAI,CAKhB;IAEO,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAWzC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;QACpC,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItD,OAAO,EAA+B,KAAK,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAKtG;;;;;;;;;;;;;GAaG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAyB;IAG/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,UAAS;IAGhB,IAAI,SAAM;IAED,iBAAiB,IAAI,IAAI;IAYzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAatC,MAAM;CAGf;AAcD,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,eAAe,SAAM;IAGrB,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAExD,OAAO,CAAC,mBAAmB,CAAmE;IAErF,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYlD,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAWzC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;QACpC,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts

@@ -1,6 +1,5 @@
 export declare const nlddBreadcrumbsTranslations: {
     'components.breadcrumbs.accessible-label': string;
-    'components.breadcrumbs.show-all-levels': string;
 };
 export type NLDDBreadcrumbsTranslations = typeof nlddBreadcrumbsTranslations;
 //# sourceMappingURL=breadcrumbs.i18n.d.ts.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B;;;CAGvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC"}
+{"version":3,"file":"breadcrumbs.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B;;CAEvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js

@@ -1,5 +1,4 @@
 export const nlddBreadcrumbsTranslations = {
     'components.breadcrumbs.accessible-label': 'Kruimelpad',
-    'components.breadcrumbs.show-all-levels': 'Toon alle niveaus',
 };
 //# sourceMappingURL=breadcrumbs.i18n.js.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.i18n.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;IAC1C,yCAAyC,EAAE,YAAY;IACvD,wCAAwC,EAAE,mBAAmB;CAC7D,CAAC"}
+{"version":3,"file":"breadcrumbs.i18n.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;IAC1C,yCAAyC,EAAE,YAAY;CACvD,CAAC"}