@ixfx/components 0.3.0 → 0.3.1

package/bundle/index.js

@@ -32292,16 +32292,19 @@ let TabListItemElement = class TabListItemElement extends i$4 {
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
-        ${this.closeable ? b`
-          <button
-            class="close-btn"
-            type="button"
-            aria-label="Close tab"
-            @click=${this._onCloseClick}
-          >
-            <ixfx-icon name="close"></ixfx-icon>
-          </button>
-        ` : A}
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+        </div>
       </div>
     `;
 	}
@@ -32325,7 +32328,7 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         box-sizing: border-box;
       }
 
-      div {
+      :host > div {
         display: flex;
         align-items: center;
         gap: var(--space-s, 4px);
@@ -32356,6 +32359,28 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         flex-shrink: 0;
       }
 
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .toolbar {
+        display: none;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+
+      :host([selected]) .toolbar {
+        display: flex;
+      }
+
+      slot[name="toolbar"] {
+        display: contents;
+      }
+
       .close-btn {
         display: inline-flex;
         align-items: center;
@@ -32363,7 +32388,6 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         background: none;
         border: none;
         padding: var(--space-xs);
-        margin-left: auto;
         cursor: pointer;
         color: inherit;
         border-radius: var(--radius-s);
@@ -32642,14 +32666,17 @@ let TabPanelsElement = class TabPanelsElement extends i$4 {
 		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
 	}
 	syncWithList(el) {
+		const apply = (t) => {
+			if (!t) return;
+			const forEl = t.getAttribute(`for`);
+			if (forEl) this.selectPanel(forEl);
+		};
 		const t = el.getSelectedElement();
 		if (!t) {
-			el.updateComplete.then(() => this.syncWithList(el));
+			el.updateComplete.then(() => apply(el.getSelectedElement()));
 			return;
 		}
-		const forEl = t.getAttribute(`for`);
-		if (!forEl) return;
-		this.selectPanel(forEl);
+		apply(t);
 	}
 	selectPanel(id) {
 		const current = this.getSelectedElement();
@@ -35983,6 +36010,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		this._selectedItems = /* @__PURE__ */ new Set();
 		this._searchVisible = false;
 		this._searchQuery = ``;
+		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.tickled = new TickledController(this, {
 			getItems: () => this._getVisibleItems().map((el) => ({
 				id: el,
@@ -36092,6 +36120,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 	}
 	#search;
 	#selectionAnchor;
+	#customWrappers;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -36124,7 +36153,19 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		super.updated(changed);
 		if (changed.has(`interactionMode`)) {
 			this.#selectionAnchor = void 0;
-			this._clearSelection();
+			const previousSelected = this._selectedItems;
+			const savedWrappers = changed.get(`interactionMode`) === `checked` ? new Map(this.#customWrappers) : null;
+			this._syncCheckboxes();
+			if (previousSelected.size > 0) {
+				let remapped;
+				if (savedWrappers && savedWrappers.size > 0) remapped = new Set([...previousSelected].map((el) => savedWrappers.get(el) ?? el));
+				else if (this.#customWrappers.size > 0) {
+					const innerToWrapper = new Map([...this.#customWrappers].map(([w, i]) => [i, w]));
+					remapped = new Set([...previousSelected].map((el) => innerToWrapper.get(el) ?? el));
+				} else remapped = new Set(previousSelected);
+				this._selectedItems = remapped;
+			}
+			this._syncItemStates();
 		}
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
@@ -36147,6 +36188,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		item.remove();
 	}
 	clearItems() {
+		this.#customWrappers.clear();
 		this.replaceChildren();
 		this.#selectionAnchor = void 0;
 		this._selectedItems = /* @__PURE__ */ new Set();
@@ -36304,6 +36346,29 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 	}
 	_syncCheckboxes() {
 		const inCheckedMode = this.interactionMode === `checked`;
+		if (inCheckedMode) for (const inner of Array.from(this.children)) {
+			if (!inner.hasAttribute(`data-list-item`)) continue;
+			if (inner.parentElement !== this) continue;
+			const wrapper = document.createElement(`li`);
+			wrapper.className = `ixfx-custom-row`;
+			const key = inner.getAttribute(`data-key`);
+			const label = inner.getAttribute(`data-search-label`);
+			if (key !== null) wrapper.setAttribute(`data-key`, key);
+			if (label !== null) wrapper.setAttribute(`data-search-label`, label);
+			inner.removeAttribute(`data-list-item`);
+			this.insertBefore(wrapper, inner);
+			wrapper.appendChild(inner);
+			this.#customWrappers.set(wrapper, inner);
+		}
+		else {
+			for (const [wrapper, inner] of this.#customWrappers) {
+				if (wrapper.parentElement !== this) continue;
+				inner.setAttribute(`data-list-item`, ``);
+				this.insertBefore(inner, wrapper);
+				wrapper.remove();
+			}
+			this.#customWrappers.clear();
+		}
 		for (const el of this.querySelectorAll(`li`)) {
 			let cb = el.querySelector(`input.ixfx-list-checkbox`);
 			if (inCheckedMode) {
@@ -36445,17 +36510,6 @@ let VerticalListElement = class VerticalListElement extends i$4 {
       outline: 1px solid var(--accent, #60a5fa);
     }
 
-    /* checked mode: left-border indicator for custom shadow-DOM items (no checkbox injection possible) */
-    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
-      border-left: 3px solid transparent;
-      transition: background var(--transition, 0.1s ease-out),
-                  border-color var(--transition, 0.1s ease-out);
-    }
-
-    :host([interaction-mode="checked"]) ::slotted([data-list-item][data-checked]) {
-      border-left: 3px solid var(--accent, #60a5fa);
-    }
-
     .search-overlay {
       position: absolute;
       top: 8px;