npm - @nldd/design-system - Versions diffs - 0.8.56 → 0.8.58 - Mend

@nldd/design-system 0.8.56 → 0.8.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/dist/components/navigation/breadcrumbs/breadcrumbs.js CHANGED Viewed

@@ -11,21 +11,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * `<nav>` landmark wrapping a `<div role="list">` (with each item carrying
  * `role="listitem"`). Explicit ARIA roles travel reliably across the slot
  * boundary where the implicit `<ol>`/`<li>` mapping is inconsistent across
- * AT + browser combos. The host itself is its own container-query scope so
- * the sm-viewport "‹ {parent}" fallback reacts to the breadcrumbs' own
- * width, not the viewport.
+ * 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.
  *
  * @slot - `nldd-breadcrumbs-item` children.
  */
 import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { breadcrumbsStyles, breadcrumbsItemStyles } from './breadcrumbs.styles.js';
 import { breadcrumbsTemplate, breadcrumbsItemTemplate } from './breadcrumbs.template.js';
 import { nlddBreadcrumbsTranslations } from './breadcrumbs.i18n.js';
@@ -74,6 +82,22 @@ export class NLDDBreadcrumbsItem extends LitElement {
             }
         }
     }
+    /**
+     * 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) {
+        const link = this.shadowRoot?.querySelector('.breadcrumbs__item-link');
+        if (link) {
+            link.focus(options);
+            return;
+        }
+        this.tabIndex = -1;
+        super.focus(options);
+    }
     render() {
         return breadcrumbsItemTemplate(this);
     }
@@ -101,15 +125,56 @@ let NLDDBreadcrumbs = class NLDDBreadcrumbs extends LitElement {
     constructor() {
         super(...arguments);
         this.accessibleLabel = '';
+        this.noCollapse = false;
         this.translations = {};
+        this._collapsed = false;
+        /** One-shot: once the user expands the trail it stays expanded. */
+        this._expanded = false;
         this._mergedTranslations = { ...nlddBreadcrumbsTranslations };
+        /** 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. */
         this._onSlotChange = () => {
-            // CSS reads `[has-parent]` directly; no need for @state. Toggling
-            // the attribute is enough.
-            this.toggleAttribute('has-parent', !!this._parentItem());
-            this._observeItemAttrs();
-            this.requestUpdate();
+            void Promise.resolve().then(() => this._syncCollapse());
+        };
+        /**
+         * 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.
+         */
+        this._syncCollapse = () => {
+            const items = this._items();
+            const collapsed = !this.noCollapse && !this._expanded && items.length >= 4;
+            items.forEach((item, index) => {
+                if (collapsed && index === 0) {
+                    item.setAttribute('slot', 'first');
+                }
+                else if (item.getAttribute('slot') === 'first') {
+                    item.removeAttribute('slot');
+                }
+                item.toggleAttribute('data-nldd-collapsed', collapsed && index >= 1 && index <= items.length - 3);
+            });
+            this._collapsed = collapsed;
         };
+        /** @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). */
+        this._expand = () => {
+            const revealed = this._items().filter((item) => item.hasAttribute('data-nldd-collapsed'));
+            this._expanded = true;
+            this._syncCollapse();
+            (revealed.find((item) => item.href && !item.current) ?? revealed[0])?.focus();
+        };
+    }
+    _items() {
+        return Array.from(this.children).filter((child) => child instanceof NLDDBreadcrumbsItem);
     }
     willUpdate(changed) {
         if (changed.has('translations') || changed.has('accessibleLabel')) {
@@ -122,6 +187,10 @@ let NLDDBreadcrumbs = class NLDDBreadcrumbs extends LitElement {
             }
         }
     }
+    updated(changed) {
+        if (changed.has('noCollapse'))
+            this._syncCollapse();
+    }
     _t(key) {
         // Return '' (not the key) for missing translations so callers can do
         // `value || nothing` to suppress aria-label / text rather than
@@ -132,48 +201,6 @@ let NLDDBreadcrumbs = class NLDDBreadcrumbs extends LitElement {
         }
         return value ?? '';
     }
-    /**
-     * All slotted nldd-breadcrumbs-item children, in DOM order. Items MUST
-     * be direct children of nldd-breadcrumbs — wrapping them in another
-     * element (e.g. `<ul><nldd-breadcrumbs-item>`) is unsupported and will
-     * make them invisible to this component (separator handling, sm-viewport
-     * fallback, etc. all key off this set).
-     */
-    _items() {
-        return Array.from(this.querySelectorAll(':scope > nldd-breadcrumbs-item'));
-    }
-    /**
-     * The parent (one-level-up) item: the last non-current item with an
-     * `href` — the level-up link needs somewhere to navigate. Returns null
-     * when no eligible parent exists; the level-up element is not rendered
-     * in that case (so it can't appear in the link list of any AT).
-     */
-    _parentItem() {
-        const items = this._items();
-        for (let i = items.length - 1; i >= 0; i--) {
-            if (!items[i].current && items[i].href)
-                return items[i];
-        }
-        return null;
-    }
-    _observeItemAttrs() {
-        this._itemObserver?.disconnect();
-        this._itemObserver = new MutationObserver(() => {
-            this.toggleAttribute('has-parent', !!this._parentItem());
-            this.requestUpdate();
-        });
-        for (const item of this._items()) {
-            this._itemObserver.observe(item, {
-                attributes: true,
-                attributeFilter: ['href', 'current'],
-            });
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._itemObserver?.disconnect();
-        this._itemObserver = undefined;
-    }
     render() {
         return breadcrumbsTemplate(this);
     }
@@ -182,9 +209,15 @@ NLDDBreadcrumbs.styles = breadcrumbsStyles;
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDBreadcrumbs.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-collapse' })
+], NLDDBreadcrumbs.prototype, "noCollapse", void 0);
 __decorate([
     property({ type: Object })
 ], NLDDBreadcrumbs.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDBreadcrumbs.prototype, "_collapsed", void 0);
 NLDDBreadcrumbs = __decorate([
     customElement('nldd-breadcrumbs')
 ], NLDDBreadcrumbs);

package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":";;;;;;AAAA~~;;;;;;;;;;;;;;;;;;;GAmBG~~;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;~~AAC5D~~,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,2BAA2B,EAAoC,MAAM,uBAAuB,CAAC;AAGtG,0BAA0B;AAE1B;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,mBAAoB,SAAQ,UAAU;IAAnD;;QAOC,YAAO,GAAG,KAAK,CAAC;QAGhB,SAAI,GAAG,EAAE,CAAC;~~IA8BX~~,CAAC;~~IA5BS~~,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,iEAAiE;QACjE,+DAA+D;QAC/D,8DAA8D;QAC9D,0DAA0D;QAC1D,wCAAwC;QACxC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,kEAAkE;QAClE,qEAAqE;QACrE,wDAAwD;QACxD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC5B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACtC,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;;~~AAtCe~~,0BAAM,GAAG,qBAAqB,AAAxB,CAAyB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAChC;~~AAgCX~~,yEAAyE;AACzE,wEAAwE;AACxE,yEAAyE;AACzE,2EAA2E;AAC3E,wCAAwC;AACxC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACrE,CAAC;AAGD,qBAAqB;AAGd,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,oBAAe,GAAG,EAAE,CAAC;QAGrB,iBAAY,GAAyC,EAAE,CAAC;~~QAEhD~~,wBAAmB,GAAgC,EAAE,GAAG,2BAA2B,EAAE,CAAC;~~QAkD9F~~,kBAAa,GAAG,~~GAAG~~,EAAE;~~YACpB~~,~~kEAAkE;YAClE~~,~~2BAA2B;YAC3B~~,~~IAAI~~,CAAC,~~eAAe~~,CAAC,~~YAAY~~,EAAE,CAAC,~~CAAC,~~IAAI,CAAC,~~WAAW~~,EAAE,CAAC,CAAC;~~YACzD~~,~~IAAI~~,CAAC,~~iBAAiB~~,EAAE~~,CAAC~~;~~YACzB~~,IAAI,CAAC,~~aAAa~~,EAAE,CAAC;~~QACtB~~,~~CAAC~~,~~CAAC;IA+BH~~,CAAC~~;IArFS~~,~~UAAU~~,CAAC,~~OAAuB;QAC1C~~,IAAI,~~OAAO,~~CAAC,~~GAAG~~,CAAC,~~cAAc~~,CAAC,IAAI,~~OAAO~~,CAAC,~~GAAG~~,CAAC,~~iBAAiB~~,CAAC,~~EAAE,~~CAAC~~;YACnE~~,IAAI,~~CAAC~~,~~mBAAmB~~,~~GAAG;gBAC1B~~,~~GAAG,2BAA2B~~;~~gBAC9B~~,~~GAAG,~~IAAI,~~CAAC~~,~~YAAY;aACpB~~,~~CAAC;YACF~~,~~IAAI~~,~~IAAI,~~CAAC,~~eAAe,~~EAAE,CAAC;~~gBAC1B~~,IAAI,CAAC,~~mBAAmB~~,CAAC,~~yCAAyC~~,~~CAAC~~,~~GAAG~~,~~IAAI,~~CAAC,~~eAAe,~~CAAC;~~YAC5F~~,CAAC;~~QACF~~,~~CAAC;IACF~~,CAAC~~;IAED~~,~~EAAE~~,CAAC,~~GAAsC;QACxC~~,~~qEAAqE;QACrE,+DAA+D;QAC/D~~,~~8CAA8C;QAC9C~~,~~MAAM~~,~~KAAK~~,~~GAAG~~,IAAI,CAAC,~~mBAAmB~~,CAAC,~~GAAG~~,CAAC,CAAC;~~QAC5C~~,IAAI,~~KAAK~~,~~KAAK~~,SAAS,IAAI,~~MAAM~~,CAAC,IAAI,CAAC,~~GAAG~~,~~EAAE,~~GAAG,~~EAAE~~,CAAC;~~YACjD~~,~~OAAO~~,CAAC,IAAI,CAAC,~~gDAAgD~~,GAAG,~~GAAG~~,CAAC,CAAC~~;QACtE~~,CAAC;~~QACD~~,~~OAAO~~,~~KAAK~~,~~IAAI~~,EAAE~~,CAAC~~;~~IACpB~~,CAAC~~;IAED;;;;;;OAMG;IACH~~,MAAM~~;QACL~~,~~OAAO~~,~~KAAK~~,CAAC,IAAI,CAAC,IAAI,CAAC,~~gBAAgB~~,CAAC,~~gCAAgC~~,CAAC,CAAC,CAAC;~~IAC5E~~,CAAC~~;IAED;;;;;OAKG;IACH~~,~~WAAW;QACV~~,~~MAAM~~,~~KAAK~~,~~GAAG~~,IAAI,CAAC,~~MAAM~~,EAAE,CAAC;~~QAC5B~~,~~KAAK~~,~~IAAI~~,CAAC,~~GAAG~~,~~KAAK~~,CAAC,~~MAAM~~,~~GAAG~~,CAAC,~~EAAE~~,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,~~EAAE~~,~~EAAE,~~CAAC~~;YAC5C~~,IAAI,~~CAAC~~,~~KAAK,~~CAAC,CAAC,CAAC,CAAC,~~OAAO~~,~~IAAI,~~KAAK,CAAC,CAAC,CAAC,CAAC,~~IAAI~~;~~gBAAE~~,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC~~;QACzD~~,CAAC~~;QACD~~,~~OAAO~~,~~IAAI~~,CAAC~~;IACb~~,~~CAAC;IAgBO~~,~~iBAAiB;QACxB~~,~~IAAI~~,CAAC,~~aAAa~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,CAAC;~~QACjC~~,~~IAAI~~,CAAC,~~aAAa~~,~~GAAG,~~IAAI,~~gBAAgB~~,CAAC,GAAG,~~EAAE;YAC9C~~,IAAI,CAAC,~~eAAe~~,CAAC,~~YAAY~~,EAAE,CAAC,~~CAAC,~~IAAI,CAAC,~~WAAW~~,~~EAAE~~,CAAC,CAAC;~~YACzD~~,IAAI,CAAC,~~aAAa~~,EAAE,CAAC;~~QACtB~~,~~CAAC~~,CAAC,CAAC~~;QACH~~,~~KAAK~~,~~MAAM~~,~~IAAI~~,IAAI,~~IAAI~~,CAAC,~~MAAM~~,~~EAAE~~,~~EAAE~~,CAAC;~~YAClC~~,IAAI,CAAC,~~aAAa~~,CAAC,~~OAAO~~,CAAC,IAAI,~~EAAE;gBAChC~~,~~UAAU~~,EAAE,~~IAAI~~;~~gBAChB~~,~~eAAe~~,EAAE,CAAC,MAAM,~~EAAE~~,~~SAAS~~,~~CAAC;aACpC~~,CAAC,CAAC~~;QACJ~~,CAAC~~;IACF~~,CAAC;~~IAEQ~~,~~oBAAoB;QAC5B~~,KAAK,~~CAAC~~,~~oBAAoB~~,~~EAAE~~,CAAC~~;QAC7B~~,IAAI,CAAC,~~aAAa~~,EAAE,~~UAAU~~,EAAE,CAAC;~~QACjC~~,IAAI,CAAC,~~aAAa~~,GAAG,~~SAAS~~,CAAC;~~IAChC~~,CAAC;IAEQ,MAAM;QACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;;~~AA9Fe~~,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;wDACrC;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAC6B;~~AAP5C~~,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,~~CAgG3B~~"}
1	+ {"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"~~AAMA~~,eAAO,MAAM,iBAAiB,~~yBA+D7B~~,CAAC;AAEF,eAAO,MAAM,qBAAqB,~~yBAyDjC~~,CAAC"}
1	+ {"version":3,"file":"breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,iBAAiB,yBA6D7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAsDjC,CAAC"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js CHANGED Viewed

@@ -1,11 +1,25 @@
-import { css, unsafeCSS } from 'lit';
-import { breakpoints } from '../../../assets/styles/breakpoints.js';
+import { css } from 'lit';
 import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
-const smMax = unsafeCSS(breakpoints.smMax);
+/* Shared between the parent stylesheet (ellipsis separator) and the item
+   stylesheet (item separator); both hosts define
+   --_separator-vertical-offset. */
+const separatorStyles = css `
+	.breadcrumbs__separator {
+		display: inline-flex;
+		position: relative;
+		top: var(--_separator-vertical-offset);
+		margin-inline: var(--primitives-space-2);
+		color: var(--semantics-content-secondary-color);
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+		flex-shrink: 0;
+	}
+`;
 export const breadcrumbsStyles = css `
 	:host {
+		--_separator-vertical-offset: 0.05em;
 		${inheritedTextReset}
-		container-type: inline-size;
 		display: block;
 	}
@@ -23,48 +37,45 @@ export const breadcrumbsStyles = css `
 		row-gap: var(--primitives-space-4);
 	}
-	:host([has-parent]) .breadcrumbs__items {
-		@container (max-width: ${smMax}) {
-			display: none;
-		}
+	.breadcrumbs__ellipsis {
+		display: inline-flex;
+		align-items: center;
 	}
-	.breadcrumbs__level-up {
-		display: none;
+	.breadcrumbs__ellipsis-button {
+		display: inline-flex;
+		margin: 0;
+		border: none;
+		background: none;
+		padding: 0;
 		align-items: center;
-		gap: var(--primitives-space-4);
 		color: var(--semantics-links-color);
 		font: var(--primitives-font-body-md-regular-tight);
-		text-decoration: none;
-	}
-	:host([has-parent]) .breadcrumbs__level-up {
-		@container (max-width: ${smMax}) {
-			display: inline-flex;
-		}
+		appearance: none;
 	}
-	.breadcrumbs__level-up:hover {
+	.breadcrumbs__ellipsis-button:hover {
 		color: var(--semantics-links-is-hovered-color);
 	}
-	.breadcrumbs__level-up:active {
+	.breadcrumbs__ellipsis-button:active {
 		color: var(--semantics-links-is-active-color);
 	}
-	.breadcrumbs__level-up:focus-visible {
+	.breadcrumbs__ellipsis-button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		border-radius: var(--primitives-corner-radius-xs);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
-	.breadcrumbs__level-up-icon {
-		display: inline-flex;
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		flex-shrink: 0;
+	@media (forced-colors: active) {
+		.breadcrumbs__ellipsis-button:focus-visible {
+			outline: 2px solid CanvasText;
+		}
 	}
+	${separatorStyles}
 `;
 export const breadcrumbsItemStyles = css `
 	:host {
@@ -82,6 +93,12 @@ export const breadcrumbsItemStyles = css `
 		display: none;
 	}
+	/* Applied by the parent nldd-breadcrumbs while the trail is collapsed;
+	   intentionally separate from the consumer-owned hidden attribute. */
+	:host([data-nldd-collapsed]) {
+		display: none;
+	}
 	.breadcrumbs__item {
 		display: inline-flex;
 		align-items: center;
@@ -109,16 +126,7 @@ export const breadcrumbsItemStyles = css `
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
-	.breadcrumbs__separator {
-		display: inline-flex;
-		position: relative;
-		top: var(--_separator-vertical-offset);
-		margin-inline: var(--primitives-space-2);
-		color: var(--semantics-content-secondary-color);
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-		flex-shrink: 0;
-	}
+	${separatorStyles}
 	:host(:last-of-type) .breadcrumbs__separator {
 		display: none;

package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,~~SAAS,EAAE,~~MAAM,KAAK,CAAC;~~AACrC~~,OAAO,EAAE,~~WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,~~kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,~~KAAK~~,GAAG,~~SAAS~~,~~CAAC~~,~~WAAW,~~CAAC~~,KAAK,CAAC,CAAC~~;~~AAE3C~~,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA~~;;IAEhC~~,kBAAkB~~;;;;;;;;;;;;;;;;;;;;2BAoBK~~,~~KAAK;;;;;;;;;;;;;;;2BAeL~~,~~KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B/B,~~CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;IAOpC,kBAAkB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDrB~~,CAAC"}
1	+ {"version":3,"file":"breadcrumbs.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;mCAEmC;AACnC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;CAW1B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;IAIhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDnB,eAAe;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;IAOpC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CnB,eAAe;;;;;CAKjB,CAAC"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;~~AAEzD~~,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,4BAA4B,CAAC;AAEpC,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,~~CA6B9E~~;AAED,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,mBAAmB,GAAG,cAAc,CAuBtF"}
1	+ {"version":3,"file":"breadcrumbs.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,4BAA4B,CAAC;AAEpC,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA8B9E;AAED,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,mBAAmB,GAAG,cAAc,CAuBtF"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js CHANGED Viewed

@@ -1,30 +1,30 @@
 import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../content/icon/icon.js';
 export function breadcrumbsTemplate(component) {
     const label = component._t('components.breadcrumbs.accessible-label');
-    const levelUpLabel = component._t('components.breadcrumbs.level-up-label');
-    const parent = component._parentItem();
-    const levelUpText = parent ? (parent.text || parent.textContent?.trim() || levelUpLabel) : '';
     return html `
 		<nav class="breadcrumbs"
 			aria-label=${label || nothing}
 		>
-			${parent ? html `
-				<a class="breadcrumbs__level-up"
-					href=${ifDefined(parent.href)}
-				>
-					<span class="breadcrumbs__level-up-icon"
-						aria-hidden="true"
-					>
-						<nldd-icon name="chevron-left"></nldd-icon>
-					</span>
-					<span class="breadcrumbs__level-up-text">${levelUpText}</span>
-				</a>
-			` : nothing}
 			<div class="breadcrumbs__items"
 				role="list"
 			>
+				<slot name="first"
+					@slotchange=${component._onSlotChange}
+				></slot>
+				${component._collapsed ? html `
+					<span class="breadcrumbs__ellipsis"
+						role="listitem"
+					>
+						<button class="breadcrumbs__ellipsis-button"
+							aria-label=${component._t('components.breadcrumbs.show-all-levels') || nothing}
+							@click=${component._expand}
+						>&hellip;</button>
+						<span class="breadcrumbs__separator"
+							aria-hidden="true"
+						><nldd-icon name="chevron-right-small"></nldd-icon></span>
+					</span>
+				` : nothing}
 				<slot @slotchange=${component._onSlotChange}></slot>
 			</div>
 		</nav>

package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;~~AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;~~AAEzD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,CAAC,yCAAyC,CAAC,CAAC;~~IACtE~~,~~MAAM~~,~~YAAY~~,~~GAAG~~,~~SAAS~~,~~CAAC~~,~~EAAE~~,~~CAAC~~,~~uCAAuC,~~CAAC,~~CAAC;IAC3E~~,~~MAAM,MAAM,GAAG,~~SAAS,CAAC,~~WAAW~~,~~EAAE,~~CAAC~~;IACvC~~,~~MAAM,WAAW,GAAG,MAAM,~~CAAC,CAAC,~~CAAC,CAAC,MAAM,CAAC,~~IAAI,~~IAAI~~,~~MAAM~~,CAAC,~~WAAW,~~EAAE,~~IAAI,EAAE,IAAI,YAAY,~~CAAC,~~CAAC~~,CAAC,~~CAAC,EAAE,CAAC;IAE9F,OAAO,~~IAAI,~~CAAA;;gBAEI,KAAK,IAAI,~~OAAO~~;;KAE3B~~,~~MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEN,~~SAAS,CAAC,~~MAAM~~,CAAC,~~IAAI,~~CAAC~~;;;;;;;gDAOc~~,~~WAAW;;IAEvD,~~CAAC,~~CAAC,CAAC,~~OAAO~~;;;;wBAIU~~,SAAS,CAAC,aAAa;;;EAG7C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,SAA8B;IACrE,qEAAqE;IACrE,oEAAoE;IACpE,8DAA8D;IAC9D,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe,CAAC;IACpD,MAAM,SAAS,GAAG,IAAI,CAAA;;4DAEqC,CAAC;IAC5D,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAA;;;YAGD,SAAS,CAAC,IAAI;OACnB,KAAK;YACA,SAAS;GAClB,CAAC;IACH,CAAC;IACD,0EAA0E;IAC1E,2EAA2E;IAC3E,4CAA4C;IAC5C,OAAO,IAAI,CAAA;iBACK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;IACjD,KAAK,UAAU,SAAS,EAAE,CAAC;AAC/B,CAAC"}
1	+ {"version":3,"file":"breadcrumbs.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAEzD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,CAAC,yCAAyC,CAAC,CAAC;IAEtE,OAAO,IAAI,CAAA;;gBAEI,KAAK,IAAI,OAAO;;;;;;mBAMb,SAAS,CAAC,aAAa;;MAEpC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;oBAKb,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC,IAAI,OAAO;gBACrE,SAAS,CAAC,OAAO;;;;;;KAM5B,CAAC,CAAC,CAAC,OAAO;wBACS,SAAS,CAAC,aAAa;;;EAG7C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,SAA8B;IACrE,qEAAqE;IACrE,oEAAoE;IACpE,8DAA8D;IAC9D,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe,CAAC;IACpD,MAAM,SAAS,GAAG,IAAI,CAAA;;4DAEqC,CAAC;IAC5D,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAA;;;YAGD,SAAS,CAAC,IAAI;OACnB,KAAK;YACA,SAAS;GAClB,CAAC;IACH,CAAC;IACD,0EAA0E;IAC1E,2EAA2E;IAC3E,4CAA4C;IAC5C,OAAO,IAAI,CAAA;iBACK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;IACjD,KAAK,UAAU,SAAS,EAAE,CAAC;AAC/B,CAAC"}

package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,~~yBA6MhC~~,CAAC;AAEF,eAAO,MAAM,wBAAwB,~~yBA0NpC~~,CAAC"}
1	+ {"version":3,"file":"document-tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,yBAiNhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBA0OpC,CAAC"}

package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js CHANGED Viewed

@@ -164,10 +164,14 @@ export const documentTabBarStyles = css `
 		justify-content: center;
 	}
+	a.document-tab-bar__item-tab {
+		cursor: var(--semantics-controls-link-cursor);
+	}
 	.document-tab-bar__drag-clone .document-tab-bar__item-text {
 		overflow: hidden;
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -178,7 +182,7 @@ export const documentTabBarStyles = css `
 	.document-tab-bar__drag-clone.is-selected .document-tab-bar__item-text,
 	.document-tab-bar__drag-clone.is-selected .document-tab-bar__item-supporting-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
 	}
 	.document-tab-bar__drag-clone .document-tab-bar__item-supporting-text {
@@ -212,6 +216,15 @@ export const documentTabBarItemStyles = css `
 	/* # Host */
 	:host {
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
 		${inheritedTextReset}
 		container-type: inline-size;
 		display: block;
@@ -240,10 +253,12 @@ export const documentTabBarItemStyles = css `
 	.document-tab-bar__item-tab {
 		display: flex;
 		box-sizing: border-box;
+		position: relative;
 		margin: 0;
 		border: none;
 		border-radius: var(--semantics-controls-md-corner-radius);
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 		width: 100%;
 		height: 100%;
 		min-width: 0;
@@ -261,29 +276,42 @@ export const documentTabBarItemStyles = css `
 	@media (hover: hover) {
 		.document-tab-bar__item-tab:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
+			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
 		}
 	}
 	.document-tab-bar__item-tab:active {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_highlight-border-color: var(--_is-active-highlight-border-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
 	}
 	:host([selected]) .document-tab-bar__item-tab {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_highlight-border-color: var(--_is-selected-highlight-border-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-secondary-content-color);
 	}
 	@media (hover: hover) {
 		:host([selected]) .document-tab-bar__item-tab:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
+			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-secondary-content-color);
 		}
 	}
+	:host([selected]) .document-tab-bar__item-tab:active {
+		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-secondary-content-color);
+	}
 	/* ## Focus */
 	.document-tab-bar__item-tab:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 	}
@@ -312,26 +340,26 @@ export const documentTabBarItemStyles = css `
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 	:host([selected]) .document-tab-bar__item-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
 	}
 	.document-tab-bar__item-short-text {
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 	:host([selected]) .document-tab-bar__item-short-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
 	}
@@ -341,28 +369,20 @@ export const documentTabBarItemStyles = css `
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--primitives-font-body-xs-regular-flat);
-		color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
+		color: var(--_secondary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	:host([selected]) .document-tab-bar__item-supporting-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-secondary-content-color);
-	}
 	.document-tab-bar__item-short-supporting-text {
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--primitives-font-body-xs-regular-flat);
-		color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
+		color: var(--_secondary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	:host([selected]) .document-tab-bar__item-short-supporting-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-secondary-content-color);
-	}
 	/* # Item dismiss button */
@@ -380,7 +400,7 @@ export const documentTabBarItemStyles = css `
 		padding: var(--primitives-space-4);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
 		transform: translateY(-50%);
 		appearance: none;
 	}
@@ -396,7 +416,7 @@ export const documentTabBarItemStyles = css `
 	}
 	:host([selected]) .document-tab-bar__item-dismiss-button {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
 	}
 	@media (hover: hover) {

package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoBnC,kBAAkB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLrB~~,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA~~;;;;;;IAMvC~~,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNrB,CAAC"}
1	+ {"version":3,"file":"document-tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LrB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;IAevC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NrB,CAAC"}

package/dist/components/navigation/document-tab-bar/document-tab-bar.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-tab-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,oCAAoC,CAAC;AAE5C,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,~~CAiDpF~~;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,sBAAsB,GAAG,cAAc,~~CA8D5F~~"}
1	+ {"version":3,"file":"document-tab-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/document-tab-bar/document-tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,oCAAoC,CAAC;AAE5C,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,CAqDpF;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,sBAAsB,GAAG,cAAc,CAgE5F"}

package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js CHANGED Viewed

@@ -32,13 +32,17 @@ export function documentTabBarTemplate(component) {
 				?expanded=${component._menuOpen}
 			></nldd-icon-button>
 		</div>
-		<div class="document-tab-bar__end" hidden>
+		<div class="document-tab-bar__end"
+			hidden
+		>
 			<slot name="end" @slotchange=${component._onEndSlotChange}></slot>
 		</div>
 	`;
     return html `
 		${isNavigation
-        ? html `<nav class="document-tab-bar" aria-label=${label}>${inner}</nav>`
+        ? html `<nav class="document-tab-bar"
+					aria-label=${label}
+				>${inner}</nav>`
         : html `<div class="document-tab-bar">${inner}</div>`}
 		<div class="document-tab-bar__polite-announcer"
 			role="status"
@@ -63,7 +67,9 @@ export function documentTabBarItemTemplate(component) {
         ? `${component.text} · ${component.supportingText}`
         : component.text;
     const tabContent = html `
-		<span class="document-tab-bar__item-normal" aria-hidden="true">
+		<span class="document-tab-bar__item-normal"
+			aria-hidden="true"
+		>
 			<span class="document-tab-bar__item-text">${component.text}</span>
 			${component.supportingText
         ? html `<span class="document-tab-bar__item-supporting-text">${component.supportingText}</span>`