@nldd/design-system 0.8.95 → 0.8.97

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

@@ -9,19 +9,20 @@ export const documentTabBarStyles = css `
 	/* # Host */
 
 	: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;
-		--_short-text-threshold: 200px;
-		--_item-min-width: 100px;
-		--_overflow-button-reserve: 52px; /* Used for overflowButtonReserve. Overflow button width + spacing */
-		--_dismiss-button-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
-		--_dismiss-button-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-300));
-		--_dismiss-button-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-accent-650), var(--primitives-color-accent-600));
-		--_dismiss-button-is-selected-is-active-background-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-550));
+		--_document-tab-bar-drag-clone-top: 0px;
+		--_document-tab-bar-drag-clone-left: 0px;
+		--_document-tab-bar-drag-clone-width: 0px;
+		--_document-tab-bar-drag-clone-height: 0px;
+		--_document-tab-bar-drag-clone-opacity: 0.95;
+		--_document-tab-bar-drag-clone-z-index: 100;
+		--_document-tab-bar-short-text-threshold: 200px;
+		--_document-tab-bar-item-min-width: 100px;
+		--_document-tab-bar-overflow-button-reserve: 52px; /* Used for overflowButtonReserve. Overflow button width + spacing */
+		--_document-tab-bar-dismiss-button-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
+		--_document-tab-bar-dismiss-button-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-300));
+		--_document-tab-bar-dismiss-button-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-accent-650), var(--primitives-color-accent-600));
+		--_document-tab-bar-dismiss-button-is-selected-is-active-background-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-550));
+		--_document-tab-bar-tab-title-font: var(--primitives-font-body-sm-medium-flat);
 
 		${inheritedTextReset}
 		display: block;
@@ -59,7 +60,7 @@ export const documentTabBarStyles = css `
 	}
 
 	::slotted(nldd-document-tab-bar-item) {
-		min-width: var(--_item-min-width);
+		min-width: var(--_document-tab-bar-item-min-width);
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
@@ -120,7 +121,7 @@ export const documentTabBarStyles = css `
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		pointer-events: none;
 		height: var(--semantics-controls-md-min-size);
-		min-width: var(--_item-min-width);
+		min-width: var(--_document-tab-bar-item-min-width);
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
@@ -131,17 +132,17 @@ export const documentTabBarStyles = css `
 
 	.document-tab-bar__drag-clone {
 		position: absolute;
-		top: var(--_drag-clone-top);
-		left: var(--_drag-clone-left);
+		top: var(--_document-tab-bar-drag-clone-top);
+		left: var(--_document-tab-bar-drag-clone-left);
 		display: flex;
-		opacity: var(--_drag-clone-opacity);
-		z-index: var(--_drag-clone-z-index);
+		opacity: var(--_document-tab-bar-drag-clone-opacity);
+		z-index: var(--_document-tab-bar-drag-clone-z-index);
 		border-radius: var(--semantics-controls-md-corner-radius);
 		background: var(--semantics-buttons-neutral-tinted-background-color);
 		pointer-events: none;
 		cursor: grabbing;
-		width: var(--_drag-clone-width);
-		height: var(--_drag-clone-height);
+		width: var(--_document-tab-bar-drag-clone-width);
+		height: var(--_document-tab-bar-drag-clone-height);
 		overflow: hidden;
 		flex-direction: row;
 		align-items: stretch;
@@ -175,7 +176,7 @@ export const documentTabBarStyles = css `
 
 	.document-tab-bar__drag-clone .document-tab-bar__item-text {
 		overflow: hidden;
-		font: var(--components-document-tab-bar-tab-title-font);
+		font: var(--_document-tab-bar-tab-title-font);
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -221,14 +222,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);
+		--_document-tab-bar-item-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_document-tab-bar-item-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_document-tab-bar-item-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_document-tab-bar-item-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_document-tab-bar-item-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_document-tab-bar-item-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-content-secondary-color);
+		--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
+		--_document-tab-bar-item-tab-title-font: var(--primitives-font-body-sm-medium-flat);
 
 		${inheritedTextReset}
 		container-type: inline-size;
@@ -263,7 +265,7 @@ export const documentTabBarItemStyles = css `
 		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);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_document-tab-bar-item-highlight-border-color);
 		width: 100%;
 		height: 100%;
 		min-width: 0;
@@ -281,34 +283,34 @@ 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-content-secondary-color);
+			--_document-tab-bar-item-highlight-border-color: var(--_document-tab-bar-item-is-hovered-highlight-border-color);
+			--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-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-content-secondary-color);
+		--_document-tab-bar-item-highlight-border-color: var(--_document-tab-bar-item-is-active-highlight-border-color);
+		--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-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-content-secondary-color);
+		--_document-tab-bar-item-highlight-border-color: var(--_document-tab-bar-item-is-selected-highlight-border-color);
+		--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-secondary-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-content-secondary-color);
+			--_document-tab-bar-item-highlight-border-color: var(--_document-tab-bar-item-is-selected-is-hovered-highlight-border-color);
+			--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-secondary-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-content-secondary-color);
+		--_document-tab-bar-item-highlight-border-color: var(--_document-tab-bar-item-is-selected-is-active-highlight-border-color);
+		--_document-tab-bar-item-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-secondary-color);
 	}
 
 	/* ## Focus */
@@ -316,7 +318,7 @@ export const documentTabBarItemStyles = css `
 	.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), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_document-tab-bar-item-highlight-border-color);
 	}
 
 
@@ -344,7 +346,7 @@ export const documentTabBarItemStyles = css `
 	.document-tab-bar__item-text {
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
-		font: var(--components-document-tab-bar-tab-title-font);
+		font: var(--_document-tab-bar-item-tab-title-font);
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -357,7 +359,7 @@ export const documentTabBarItemStyles = css `
 	.document-tab-bar__item-short-text {
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
-		font: var(--components-document-tab-bar-tab-title-font);
+		font: var(--_document-tab-bar-item-tab-title-font);
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -374,7 +376,7 @@ export const documentTabBarItemStyles = css `
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--primitives-font-body-xs-regular-flat);
-		color: var(--_secondary-content-color);
+		color: var(--_document-tab-bar-item-secondary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -383,7 +385,7 @@ export const documentTabBarItemStyles = css `
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--primitives-font-body-xs-regular-flat);
-		color: var(--_secondary-content-color);
+		color: var(--_document-tab-bar-item-secondary-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -412,12 +414,12 @@ export const documentTabBarItemStyles = css `
 
 	@media (hover: hover) {
 		.document-tab-bar__item-dismiss-button:hover {
-			background-color: var(--_dismiss-button-is-hovered-background-color);
+			background-color: var(--_document-tab-bar-dismiss-button-is-hovered-background-color);
 		}
 	}
 
 	.document-tab-bar__item-dismiss-button:active {
-		background-color: var(--_dismiss-button-is-active-background-color);
+		background-color: var(--_document-tab-bar-dismiss-button-is-active-background-color);
 	}
 
 	:host([selected]) .document-tab-bar__item-dismiss-button {
@@ -426,12 +428,12 @@ export const documentTabBarItemStyles = css `
 
 	@media (hover: hover) {
 		:host([selected]) .document-tab-bar__item-dismiss-button:hover {
-			background-color: var(--_dismiss-button-is-selected-is-hovered-background-color);
+			background-color: var(--_document-tab-bar-dismiss-button-is-selected-is-hovered-background-color);
 		}
 	}
 
 	:host([selected]) .document-tab-bar__item-dismiss-button:active {
-		background-color: var(--_dismiss-button-is-selected-is-active-background-color);
+		background-color: var(--_document-tab-bar-dismiss-button-is-selected-is-active-background-color);
 	}
 
 	.document-tab-bar__item-dismiss-button:focus-visible {

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;IAuBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LrB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;IAevC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NrB,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;IAwBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LrB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;IAgBvC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NrB,CAAC"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts

@@ -24,6 +24,7 @@
  *
  * @fires select - On a click on a non-expandable button item (bubbles, composed)
  *
+ * @slot icon - Takes the place of the icon: an `nldd-avatar` for the person who is signed in, for instance. It gets the size of an icon, and follows `content-priority` and `icon-only` as the icon does. Wins over `icon`.
  * @slot - Content of the expandable popover. Wrap items in an `<nldd-menu>` so
  *   this component does not have to duplicate the menu API (variant,
  *   accessible-label, translations, filterFn and so on). Event listeners on
@@ -70,6 +71,10 @@ export declare class NLDDMenuBarItem extends LitElement {
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
+    /** @internal Whether the icon slot is filled, so the icon area and the icon-only rules follow it. */
+    _hasSlottedIcon: boolean;
+    /** @internal */
+    _onIconSlotChange: (e: Event) => void;
     _onSlotChange: () => void;
     focus(options?: FocusOptions): void;
     private _findMenu;

package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AAcpC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,SAAM;IAGV,OAAO,UAAS;IAGhB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAG9E,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,eAAe,SAAM;IAGrB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,eAAe,SAAM;IAGrB,QAAQ,SAAM;IAGd,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAI3D,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,yBAAyB,CAAS;IAC1C,OAAO,CAAC,kBAAkB,CAAyC;IAI1D,iBAAiB,IAAI,IAAI;IAWzB,YAAY,IAAI,IAAI;IAQpB,oBAAoB,IAAI,IAAI;IAOrC,aAAa,QAAO,IAAI,CAGtB;IAEO,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAO5C,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,YAAY,CAqBlB;IAIF,OAAO,CAAC,WAAW;IAgBV,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,eAAe,CAAC;KACtC;CACD"}
+{"version":3,"file":"menu-bar-item.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AAcpC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,SAAM;IAGV,OAAO,UAAS;IAGhB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAG9E,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,eAAe,SAAM;IAGrB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,eAAe,SAAM;IAGrB,QAAQ,SAAM;IAGd,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAI3D,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,yBAAyB,CAAS;IAC1C,OAAO,CAAC,kBAAkB,CAAyC;IAI1D,iBAAiB,IAAI,IAAI;IAWzB,YAAY,IAAI,IAAI;IAQpB,oBAAoB,IAAI,IAAI;IAOrC,qGAAqG;IAErG,eAAe,UAAS;IAExB,gBAAgB;IAChB,iBAAiB,GAAI,GAAG,KAAK,KAAG,IAAI,CAIlC;IAEF,aAAa,QAAO,IAAI,CAGtB;IAEO,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAO5C,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,YAAY,CAqBlB;IAIF,OAAO,CAAC,WAAW;IAgBV,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,eAAe,CAAC;KACtC;CACD"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.js

@@ -24,6 +24,7 @@
  *
  * @fires select - On a click on a non-expandable button item (bubbles, composed)
  *
+ * @slot icon - Takes the place of the icon: an `nldd-avatar` for the person who is signed in, for instance. It gets the size of an icon, and follows `content-priority` and `icon-only` as the icon does. Wins over `icon`.
  * @slot - Content of the expandable popover. Wrap items in an `<nldd-menu>` so
  *   this component does not have to duplicate the menu API (variant,
  *   accessible-label, translations, filterFn and so on). Event listeners on
@@ -36,7 +37,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { menuBarItemStyles } from './menu-bar-item.styles.js';
 import { template } from './menu-bar-item.template.js';
@@ -79,6 +80,14 @@ let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
         this._menuOpen = false;
         this._pointerdownWhileMenuOpen = false;
         this._menuToggleHandler = null;
+        /** @internal Whether the icon slot is filled, so the icon area and the icon-only rules follow it. */
+        this._hasSlottedIcon = false;
+        /** @internal */
+        this._onIconSlotChange = (e) => {
+            this._hasSlottedIcon = e.target.assignedElements().length > 0;
+            // A derived state for the host's own CSS, never written back into `icon`.
+            this.toggleAttribute('data-has-icon', this._hasSlottedIcon);
+        };
         this._onSlotChange = () => {
             // Re-wire when a consumer swaps the slotted <nldd-menu> at runtime.
             this._wireMenu();
@@ -233,6 +242,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], NLDDMenuBarItem.prototype, "popoverTargetAction", void 0);
+__decorate([
+    state()
+], NLDDMenuBarItem.prototype, "_hasSlottedIcon", void 0);
 NLDDMenuBarItem = __decorate([
     customElement('nldd-menu-bar-item')
 ], NLDDMenuBarItem);

package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map

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

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBAsL7B,CAAC"}
+{"version":3,"file":"menu-bar-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBAsM7B,CAAC"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js

@@ -9,9 +9,15 @@ export const menuBarItemStyles = css `
 	/* # Host */
 
 	:host {
-		--_indicator-z-index: 0;
-		--_content-z-index: 1;
-		--_focus-z-index: 1;
+		--_menu-bar-item-indicator-z-index: 0;
+		--_menu-bar-item-content-z-index: 1;
+		--_menu-bar-item-focus-z-index: 1;
+		--_menu-bar-item-content-color: var(--primitives-color-accent-750);
+		--_menu-bar-item-font: var(--primitives-font-body-md-medium-flat);
+		--_menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
+		--_menu-bar-item-is-expanded-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
+		--_menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+		--_menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
 
 		${inheritedTextReset}
 		display: inline-block;
@@ -41,13 +47,13 @@ export const menuBarItemStyles = css `
 		background: none;
 		min-width: var(--semantics-controls-md-min-size);
 		height: var(--semantics-controls-md-min-size);
-		padding: 0 var(--components-menu-bar-item-inline-padding);
+		padding: 0 var(--semantics-menu-bar-items-inline-padding);
 		gap: var(--primitives-space-4);
 		align-items: center;
 		justify-content: center;
 		text-align: center;
-		color: var(--components-menu-bar-item-content-color);
-		font: var(--components-menu-bar-item-font);
+		color: var(--_menu-bar-item-content-color);
+		font: var(--_menu-bar-item-font);
 		text-decoration: none;
 		white-space: nowrap;
 		appearance: none;
@@ -66,24 +72,24 @@ export const menuBarItemStyles = css `
 		right: 0;
 		bottom: var(--primitives-space-6);
 		left: 0;
-		z-index: var(--_indicator-z-index);
+		z-index: var(--_menu-bar-item-indicator-z-index);
 		border-radius: var(--semantics-controls-sm-corner-radius);
 		pointer-events: none;
 	}
 
 	@media (hover: hover) {
 		.menu-bar-item:hover::before {
-			background-color: var(--components-menu-bar-item-is-hovered-indicator-background-color);
+			background-color: var(--_menu-bar-item-is-hovered-indicator-background-color);
 		}
 	}
 
 	:host([expanded]) .menu-bar-item::before {
-		background-color: var(--components-menu-bar-item-is-expanded-indicator-background-color);
+		background-color: var(--_menu-bar-item-is-expanded-indicator-background-color);
 	}
 
 	@media (hover: hover) {
 		:host([expanded]) .menu-bar-item:hover::before {
-			background-color: var(--components-menu-bar-item-is-hovered-indicator-background-color);
+			background-color: var(--_menu-bar-item-is-hovered-indicator-background-color);
 		}
 	}
 
@@ -95,9 +101,9 @@ export const menuBarItemStyles = css `
 		right: var(--primitives-space-8);
 		bottom: 0;
 		left: var(--primitives-space-8);
-		z-index: var(--_indicator-z-index);
-		background-color: var(--components-menu-bar-item-is-current-indicator-background-color);
-		height: var(--components-menu-bar-item-is-current-indicator-height);
+		z-index: var(--_menu-bar-item-indicator-z-index);
+		background-color: var(--_menu-bar-item-is-current-indicator-background-color);
+		height: var(--_menu-bar-item-is-current-indicator-height);
 		pointer-events: none;
 	}
 
@@ -105,22 +111,32 @@ export const menuBarItemStyles = css `
 
 	.menu-bar-item__text {
 		position: relative;
-		z-index: var(--_content-z-index);
+		z-index: var(--_menu-bar-item-content-z-index);
 	}
 
 	/* ## Icon */
 
 	.menu-bar-item__icon {
-		z-index: var(--_content-z-index);
+		z-index: var(--_menu-bar-item-content-z-index);
 		width: var(--primitives-space-20);
 		height: var(--primitives-space-20);
 		flex-shrink: 0;
 	}
 
+	.menu-bar-item__icon[hidden] {
+		display: none;
+	}
+
+	::slotted([slot="icon"]) {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
 	/* ## Disclosure icon */
 
 	.menu-bar-item__disclosure-icon {
-		z-index: var(--_content-z-index);
+		z-index: var(--_menu-bar-item-content-z-index);
 		width: var(--primitives-space-16);
 		height: var(--primitives-space-16);
 	}
@@ -129,7 +145,7 @@ export const menuBarItemStyles = css `
 	/* # Focus */
 
 	:host(:focus-within) {
-		z-index: var(--_focus-z-index);
+		z-index: var(--_menu-bar-item-focus-z-index);
 	}
 
 	.menu-bar-item:focus-visible {
@@ -162,12 +178,12 @@ export const menuBarItemStyles = css `
 	/* # Icon-only */
 
 	:host([icon-only]) .menu-bar-item,
-	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item {
+	:host([content-priority="icon"][compact]:is([icon]:not([icon=""]), [data-has-icon])) .menu-bar-item {
 		padding: var(--primitives-space-8);
 	}
 
 	:host([icon-only]) .menu-bar-item__text,
-	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item__text {
+	:host([content-priority="icon"][compact]:is([icon]:not([icon=""]), [data-has-icon])) .menu-bar-item__text {
 		position: absolute;
 		margin: -1px;
 		border: 0;

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKrB,CAAC"}
+{"version":3,"file":"menu-bar-item.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;IAmBhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmLrB,CAAC"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,QAAQ,CAAC,SAAS,EAAE,eAAe,wCAiElD"}
+{"version":3,"file":"menu-bar-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,QAAQ,CAAC,SAAS,EAAE,eAAe,wCAkElD"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js

@@ -8,6 +8,15 @@ export function template(component) {
     const ariaCurrent = component.current ? component.currentType : nothing;
     const ariaHaspopup = component.expandable ? 'menu' : (component.haspopup || nothing);
     const ariaExpanded = (component.expandable || component.haspopup) ? String(component.expanded) : nothing;
+    // The slot is always rendered, so a slotted icon is noticed when it arrives;
+    // the icon name is its fallback.
+    const icon = html `
+		<span class="menu-bar-item__icon" ?hidden=${!component.icon && !component._hasSlottedIcon}>
+			<slot name="icon" @slotchange=${component._onIconSlotChange}>
+				${component.icon ? html `<nldd-icon icon=${component.icon}></nldd-icon>` : nothing}
+			</slot>
+		</span>
+	`;
     if (isLink) {
         return html `
 			<a class="menu-bar-item"
@@ -19,11 +28,7 @@ export function template(component) {
 				aria-haspopup=${ariaHaspopup}
 				aria-expanded=${ariaExpanded}
 			>
-				${component.icon ? html `
-					<span class="menu-bar-item__icon">
-						<nldd-icon icon=${component.icon}></nldd-icon>
-					</span>
-				` : nothing}
+				${icon}
 				<span class="menu-bar-item__text">
 					${component.text}
 				</span>
@@ -47,11 +52,7 @@ export function template(component) {
 			.popoverTargetElement=${component.popoverTargetElement}
 			.popoverTargetAction=${component.popoverTargetAction}
 		>
-			${component.icon ? html `
-				<span class="menu-bar-item__icon">
-					<nldd-icon icon=${component.icon}></nldd-icon>
-				</span>
-			` : nothing}
+			${icon}
 			<span class="menu-bar-item__text">
 				${component.text}
 			</span>

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,QAAQ,CAAC,SAA0B;IAClD,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClI,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzG,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;WAEF,QAAkB;oBACT,SAAS,CAAC,QAAQ,IAAI,OAAO;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;mBAC/B,WAAW;iBACb,SAAS;oBACN,YAAY;oBACZ,YAAY;;MAE1B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEH,SAAS,CAAC,IAAI;;KAEjC,CAAC,CAAC,CAAC,OAAO;;OAER,SAAS,CAAC,IAAI;;MAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;KAI5B,CAAC,CAAC,CAAC,OAAO;;uBAEQ,SAAS,CAAC,aAAa;GAC3C,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,QAAQ;kBACf,WAAW;gBACb,SAAS;mBACN,YAAY;mBACZ,YAAY;2BACJ,SAAS,CAAC,oBAAoB;0BAC/B,SAAS,CAAC,mBAAmB;;KAElD,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,OAAO;;MAER,SAAS,CAAC,IAAI;;KAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;sBAEQ,SAAS,CAAC,aAAa;EAC3C,CAAC;AACH,CAAC"}
+{"version":3,"file":"menu-bar-item.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,QAAQ,CAAC,SAA0B;IAClD,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClI,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACzG,6EAA6E;IAC7E,iCAAiC;IACjC,MAAM,IAAI,GAAG,IAAI,CAAA;8CAC4B,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,eAAe;mCACxD,SAAS,CAAC,iBAAiB;MACxD,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,OAAO;;;EAGnF,CAAC;IAEF,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;WAEF,QAAkB;oBACT,SAAS,CAAC,QAAQ,IAAI,OAAO;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;mBAC/B,WAAW;iBACb,SAAS;oBACN,YAAY;oBACZ,YAAY;;MAE1B,IAAI;;OAEH,SAAS,CAAC,IAAI;;MAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;KAI5B,CAAC,CAAC,CAAC,OAAO;;uBAEQ,SAAS,CAAC,aAAa;GAC3C,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,QAAQ;kBACf,WAAW;gBACb,SAAS;mBACN,YAAY;mBACZ,YAAY;2BACJ,SAAS,CAAC,oBAAoB;0BAC/B,SAAS,CAAC,mBAAmB;;KAElD,IAAI;;MAEH,SAAS,CAAC,IAAI;;KAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;sBAEQ,SAAS,CAAC,aAAa;EAC3C,CAAC;AACH,CAAC"}