@ixfx/components 0.10.4 → 0.10.5

package/bundle/index.js

@@ -19723,6 +19723,7 @@ let TabListElement = class TabListElement extends i {
 		this.flip = false;
 		this.scrollable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.shrink = false;
 		this.dragMode = `off`;
 		this.#items = [];
@@ -19730,9 +19731,10 @@ let TabListElement = class TabListElement extends i {
 		this.#suppressNextClick = false;
 		this.#onSlotChange = () => {
 			this.updateComplete.then(() => {
-				this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+				this.#refreshItems();
 				this.#syncIndicatorColors();
 				this.#syncHideLabels();
+				this.#syncLabelNogrow();
 			});
 		};
 		this.#onToolbarSlotChange = () => {
@@ -19891,13 +19893,21 @@ let TabListElement = class TabListElement extends i {
     </div>`;
 	}
 	#onSlotChange;
+	/**
+	* Re-read the assigned tab items. Some environments do not fire slotchange
+	* for a slot's initial assignment, so firstUpdated also calls this before
+	* syncing item attributes.
+	*/
+	#refreshItems() {
+		this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+	}
 	#onToolbarSlotChange;
 	firstUpdated() {
 		this.updateComplete.then(() => {
-			if (this.#items.length > 0) {
-				this.#syncIndicatorColors();
-				this.#syncHideLabels();
-			}
+			this.#refreshItems();
+			this.#syncIndicatorColors();
+			this.#syncHideLabels();
+			this.#syncLabelNogrow();
 			this.#onToolbarSlotChange();
 		});
 	}
@@ -19906,11 +19916,16 @@ let TabListElement = class TabListElement extends i {
 		this.classList.toggle(`scrollable`, this.scrollable);
 		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
 		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
+		if (changedProperties.has(`labelNogrow`)) this.#syncLabelNogrow();
 	}
 	#syncHideLabels() {
 		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
 		else item.removeAttribute(`hide-labels`);
 	}
+	#syncLabelNogrow() {
+		for (const item of this.#items) if (this.labelNogrow) item.setAttribute(`label-nogrow`, ``);
+		else item.removeAttribute(`label-nogrow`);
+	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
 			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
@@ -20329,6 +20344,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -20345,16 +20364,21 @@ let TabListItemElement = class TabListItemElement extends i {
 		super(..._args);
 		this.closeable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
 		this._hasToolbarContent = false;
+		this._hasStatusContent = false;
 		this._labelObserver = null;
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
+		this._onStatusSlotChange = () => {
+			this._updateStatusContent();
+		};
 		this._onLabelSlotChange = () => {
 			this._syncLabelSizer();
 		};
@@ -20365,13 +20389,18 @@ let TabListItemElement = class TabListItemElement extends i {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
-		this._labelObserver = new MutationObserver(() => this._syncLabelSizer());
+		this._wireSlotListeners();
+		this._labelObserver = new MutationObserver(() => {
+			this._syncLabelSizer();
+			this._updateToolbarContent();
+			this._updateStatusContent();
+		});
 		this._labelObserver.observe(this, {
 			childList: true,
 			characterData: true,
-			subtree: true
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`slot`]
 		});
 	}
 	disconnectedCallback() {
@@ -20382,8 +20411,7 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._commandCleanup = void 0;
 		this._labelObserver?.disconnect();
 		this._labelObserver = null;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+		this._unwireSlotListeners();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -20407,6 +20435,22 @@ let TabListItemElement = class TabListItemElement extends i {
 		});
 	}
 	/**
+	* Attach slotchange listeners. The shadow root is empty during the first
+	* connectedCallback (the template only exists once rendered), so this is
+	* called again from firstUpdated. addEventListener dedupes identical
+	* listener registrations, so double-wiring is harmless.
+	*/
+	_wireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.addEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	_unwireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.removeEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	/**
 	* Mirror the default-slot text into `.label[data-label]` for the `::after`
 	* width sizer. Slotted toolbar content is excluded.
 	*/
@@ -20419,11 +20463,20 @@ let TabListItemElement = class TabListItemElement extends i {
 		else label.removeAttribute(`data-label`);
 	}
 	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+		this._hasToolbarContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `toolbar`);
+	}
+	/**
+	* Named slots only render once content has been detected, so reading
+	* assignedElements() cannot bootstrap detection. Direct light-DOM children
+	* are exactly what a slot assigns, so scan those instead.
+	*/
+	_updateStatusContent() {
+		this._hasStatusContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `status`);
 	}
 	firstUpdated() {
+		this._wireSlotListeners();
 		this._updateToolbarContent();
+		this._updateStatusContent();
 		this._syncLabelSizer();
 	}
 	render() {
@@ -20433,6 +20486,7 @@ let TabListItemElement = class TabListItemElement extends i {
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${this._hasStatusContent ? b`<div class="status"><slot name="status"></slot></div>` : A}
         ${hasActions ? b`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
@@ -20585,6 +20639,28 @@ let TabListItemElement = class TabListItemElement extends i {
         display: contents;
       }
 
+      /* Persistent status slot (e.g. an ixfx-led). Unlike .toolbar it is
+         always visible, selection or not, and keeps its own size however
+         much the label truncates. --size inherits through slotted content,
+         so bare and button-wrapped LEDs both render smaller; consumers can
+         override per element. */
+      .status {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        --size: 0.75ex;
+      }
+
+      slot[name="status"] {
+        display: contents;
+      }
+
+      /* With label-nogrow, the label keeps its intrinsic width so status
+         content lands next to the label text instead of the far edge. */
+      :host([label-nogrow]) .label {
+        flex: 0 0 auto;
+      }
+
       /* Slotted buttons inherit these through the shadow boundary; keeps a
          toolbar button from inflating the strip height. */
       .toolbar ::slotted(ixfx-button) {
@@ -20628,6 +20704,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListItemElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListItemElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -20640,6 +20720,7 @@ __decorate([property({
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 __decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasStatusContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/dock/dock-panel.ts
@@ -46813,6 +46894,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		this.invisibleGroups = false;
 		this.allowReorder = false;
 		this._overflowCount = 0;
+		this._popoverOpen = false;
 		this._ro = null;
 		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
 		this._sizes = /* @__PURE__ */ new WeakMap();
@@ -46938,11 +47020,11 @@ let ToolbarElement = class ToolbarElement extends i {
     .overflow-btn[hidden] { display: none; }
     .overflow-popover {
       position: fixed;
-      top: anchor(bottom);
-      left: anchor(right);
+      inset: auto;
+      margin: 0;
       position-anchor: var(--anchor-name);
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-      margin: 8px;
+      position-visibility: anchors-visible;
       max-height: min(60vh, 400px);
       max-width: min(90vw, 320px);
       overflow: auto;
@@ -46952,6 +47034,18 @@ let ToolbarElement = class ToolbarElement extends i {
       flex-direction: column;
       gap: var(--space-s);
     }
+    :host([orientation="horizontal"]) .overflow-popover {
+      position-area: bottom span-left;
+      margin-top: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-left"]) .overflow-popover {
+      position-area: right span-bottom;
+      margin-left: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-right"]) .overflow-popover {
+      position-area: left span-bottom;
+      margin-right: var(--toolbar-overflow-gap, 8px);
+    }
     .overflow-popover:popover-open { display: flex; }
     .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
 
@@ -46990,6 +47084,9 @@ let ToolbarElement = class ToolbarElement extends i {
 		});
 		this._ro = new ResizeObserver(() => this._scheduleMeasure());
 		this._ro.observe(this._inner);
+		this._popover.addEventListener(`toggle`, () => {
+			this._popoverOpen = this._popover.matches(`:popover-open`);
+		});
 		this._scheduleMeasure();
 		this._updateGroups();
 	}
@@ -47330,7 +47427,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		return b`
       <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
         <slot @pointerdown=${this._onPointerDown} @keydown=${this._onKeyDown}></slot>
-        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popoverOpen}>⋯</ixfx-button>
       </div>
       <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
         <slot name="overflow"></slot>
@@ -47373,6 +47470,7 @@ __decorate([property({
 	reflect: true
 })], ToolbarElement.prototype, "allowReorder", void 0);
 __decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([state()], ToolbarElement.prototype, "_popoverOpen", void 0);
 __decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
 __decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
 __decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);