@ixfx/components 0.4.3 → 0.4.4

package/dist/tab-list-DzknpdSo.js

@@ -0,0 +1,592 @@
+import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/util/drag-ghost.ts
+/**
+* Theme-aware floating element helper.
+*
+* Creates a `position: fixed`, `pointer-events: none` element anchored to a
+* source element's theme container, then exposes imperative `move` / `destroy`
+* hooks. Used by `ixfx-tab-list` for its drag-ghost; intended to be reusable
+* by future drag/detach features.
+*
+* Theme container lookup mirrors `tooltip-controller.ts` so the floating
+* element still inherits the right CSS custom properties when the source lives
+* inside a `.theme-dark` / `.theme-light` subtree (used by the loader iframes).
+*/
+let stylesInjected = false;
+function injectGhostStyles() {
+	if (stylesInjected) return;
+	stylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    .ixfx-drag-ghost {
+      position: fixed;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 10000;
+      will-change: transform;
+      opacity: 0.9;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs, 4px);
+      padding: var(--padding, var(--space-m, 8px)) calc(2 * var(--padding, var(--space-m, 8px)));
+      background: var(--surface-4);
+      color: var(--surface-4-text);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-m, 6px);
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: 500;
+      white-space: nowrap;
+      max-width: 240px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-shadow: var(--shadow-m);
+    }
+    .ixfx-drag-ghost ixfx-icon {
+      flex-shrink: 0;
+    }
+  `;
+	document.head.appendChild(style);
+}
+/**
+* Create a theme-aware floating ghost element.
+*
+* The ghost is appended to the closest `.theme-dark` / `.theme-light` ancestor
+* of `anchor`, falling back to `document.body`. This preserves CSS variable
+* inheritance for theming.
+*/
+function createDragGhost(opts) {
+	injectGhostStyles();
+	const ghost = document.createElement(`div`);
+	ghost.className = `ixfx-drag-ghost`;
+	if (opts.className) ghost.classList.add(opts.className);
+	ghost.appendChild(opts.content);
+	ghost.style.transform = `translate3d(-9999px, -9999px, 0)`;
+	const targetDoc = opts.anchor.ownerDocument;
+	const themeContainer = opts.anchor.closest(`.theme-dark, .theme-light`);
+	if (themeContainer) themeContainer.appendChild(ghost);
+	else targetDoc.body.appendChild(ghost);
+	const anchorRect = opts.anchor.getBoundingClientRect();
+	const offsetX = anchorRect.width / 2;
+	const offsetY = anchorRect.height / 2;
+	return {
+		element: ghost,
+		move(x, y) {
+			ghost.style.transform = `translate3d(${x - offsetX}px, ${y - offsetY}px, 0)`;
+		},
+		destroy() {
+			ghost.remove();
+		}
+	};
+}
+//#endregion
+//#region src/tabs/tab-list.ts
+/** Pointer movement threshold (px) before a press becomes a drag. */
+const DRAG_THRESHOLD_PX = 5;
+let TabListElement = class TabListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.flip = false;
+		this.scrollable = false;
+		this.dragMode = `off`;
+		this.#items = [];
+		this.#dragState = null;
+		this.#suppressNextClick = false;
+		this.#onSlotChange = () => {
+			this.updateComplete.then(() => {
+				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
+				this.#syncIndicatorColors();
+			});
+		};
+		this.#onKeyUp = (event) => {
+			const key = event.key;
+			if (this.#isVertical) {
+				if (key === `ArrowUp`) this.#selectPrevious();
+				else if (key === `ArrowDown`) this.#selectNext();
+			} else if (key === `ArrowRight`) this.#selectNext();
+			else if (key === `ArrowLeft`) this.#selectPrevious();
+		};
+		this.#onKeyDown = (event) => {
+			const state = this.#dragState;
+			if (event.key !== `Escape` || !state?.active) return;
+			event.preventDefault();
+			const pointerId = state.pointerId;
+			this.#abortDrag();
+			this.#endDrag(pointerId);
+		};
+		this.#onWheel = (event) => {
+			if (!this.scrollable) return;
+			const el = this.#containerEl;
+			if (!el) return;
+			if (!this.#isVertical) {
+				if (event.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
+				const prev = el.scrollLeft;
+				el.scrollLeft = prev + event.deltaY;
+				if (el.scrollLeft !== prev) event.preventDefault();
+			} else {
+				if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight) return;
+				const prev = el.scrollTop;
+				el.scrollTop = prev + event.deltaX;
+				if (el.scrollTop !== prev) event.preventDefault();
+			}
+		};
+		this.#onSlotClick = (event) => {
+			if (this.#suppressNextClick) {
+				this.#suppressNextClick = false;
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			this.focus();
+			const t = event.target.closest(`ixfx-tab-list-item`);
+			if (!t) return;
+			const previous = this.getSelectedElement();
+			this.selectElement(t);
+			const forId = t.getAttribute(`for`);
+			const previousId = previous?.id;
+			this.dispatchEvent(new CustomEvent(`change`, {
+				bubbles: true,
+				detail: {
+					previous: previousId,
+					selected: t.id,
+					for: forId ?? ``
+				}
+			}));
+		};
+		this.#onPointerDown = (event) => {
+			if (this.dragMode !== `reorder`) return;
+			if (event.button !== 0) return;
+			const target = this.#findDragTarget(event);
+			if (!target) return;
+			const fromIndex = this.#items.indexOf(target);
+			if (fromIndex < 0) return;
+			this.#dragState = {
+				pointerId: event.pointerId,
+				source: target,
+				fromIndex,
+				startX: event.clientX,
+				startY: event.clientY,
+				active: false,
+				ghost: null,
+				gapIndex: void 0
+			};
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerCancel);
+		};
+		this.#onPointerMove = (event) => {
+			const state = this.#dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			const dx = event.clientX - state.startX;
+			const dy = event.clientY - state.startY;
+			const distance = Math.hypot(dx, dy);
+			if (!state.active) {
+				if (distance < DRAG_THRESHOLD_PX) return;
+				this.#beginDrag(event);
+			}
+			state.ghost?.move(event.clientX, event.clientY);
+			const gap = this.#computeGapIndex(event.clientX, event.clientY);
+			if (gap !== state.gapIndex) {
+				state.gapIndex = gap;
+				this.requestUpdate();
+			}
+		};
+		this.#onPointerUp = (event) => {
+			const state = this.#dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			if (state.active) {
+				const gap = this.#computeGapIndex(event.clientX, event.clientY);
+				this.#commitDrag(state.source, state.fromIndex, gap);
+			}
+			this.#endDrag(event.pointerId);
+		};
+		this.#onPointerCancel = (event) => {
+			const state = this.#dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			this.#abortDrag();
+			this.#endDrag(event.pointerId);
+		};
+	}
+	#items;
+	#dragState;
+	#suppressNextClick;
+	get #isVertical() {
+		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
+	}
+	get #containerClass() {
+		const base = this.scrollable ? `${this.orientation} scrollable` : this.orientation;
+		return this.dragMode === `reorder` ? `${base} reorder` : base;
+	}
+	render() {
+		const caretStyle = this.#computeCaretStyle();
+		return html`
+    <div
+      tabindex=0
+      @keyup=${this.#onKeyUp}
+      @click=${this.#onSlotClick}
+      @pointerdown=${this.#onPointerDown}
+      @keydown=${this.#onKeyDown}
+      @wheel=${this.#onWheel}
+      id="container"
+      class=${this.#containerClass}
+    >
+      <slot @slotchange=${this.#onSlotChange}></slot>
+      ${caretStyle ? html`<div class="drop-caret" style=${caretStyle}></div>` : nothing}
+    </div>`;
+	}
+	#onSlotChange;
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			if (this.#items.length > 0) this.#syncIndicatorColors();
+		});
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		this.classList.toggle(`scrollable`, this.scrollable);
+		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
+	}
+	#syncIndicatorColors() {
+		for (const item of this.#items) {
+			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
+			item.style.setProperty(`--indicator-color-top`, `transparent`);
+			item.style.setProperty(`--indicator-color-left`, `transparent`);
+			item.style.setProperty(`--indicator-color-right`, `transparent`);
+			if (item.hasAttribute(`selected`)) {
+				if (this.orientation === `horizontal` && !this.flip) item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+				else if (this.orientation === `horizontal` && this.flip) item.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+				else if (this.#isVertical && !this.flip) item.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+				else if (this.#isVertical && this.flip) item.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+			}
+		}
+	}
+	#onKeyUp;
+	#onKeyDown;
+	/**
+	* Translate vertical wheel deltas into horizontal scroll on a scrollable
+	* horizontal list (and vice-versa for vertical lists). Without this, the
+	* default browser behaviour only scrolls horizontally with Shift+wheel or a
+	* physical horizontal wheel — neither of which most users reach for on a
+	* VS Code-style tab strip.
+	*
+	* Only kicks in when the list is actually scrollable (overflow content
+	* present), and is a no-op when nothing is scrollable in that direction.
+	*/
+	#onWheel;
+	getSelectedElement() {
+		for (const el of this.#items) if (this.#isSelected(el)) return el;
+		const slot = this.shadowRoot?.querySelector(`slot`);
+		if (slot) {
+			const els = slot.assignedElements({ flatten: true });
+			for (const el of els) if (this.#isSelected(el)) return el;
+		}
+	}
+	#isSelected(el) {
+		if (el.getAttribute(`selected`) === null) return false;
+		return el.hasAttribute(`selected`);
+	}
+	selectElement(el) {
+		const existing = this.getSelectedElement();
+		if (existing) {
+			existing.removeAttribute(`selected`);
+			existing.style.setProperty(`--indicator-color-bottom`, `transparent`);
+			existing.style.setProperty(`--indicator-color-top`, `transparent`);
+			existing.style.setProperty(`--indicator-color-left`, `transparent`);
+			existing.style.setProperty(`--indicator-color-right`, `transparent`);
+		}
+		el.setAttribute(`selected`, ``);
+		if (this.orientation === `horizontal` && !this.flip) el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+		else if (this.orientation === `horizontal` && this.flip) el.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+		else if (this.#isVertical && !this.flip) el.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+		else if (this.#isVertical && this.flip) el.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+	}
+	#selectNext() {
+		let found = false;
+		for (const el of this.#items) if (this.#isSelected(el) && !found) found = true;
+		else if (found) {
+			this.selectElement(el);
+			break;
+		}
+	}
+	#selectPrevious() {
+		let prev;
+		for (const el of this.#items) if (this.#isSelected(el) && prev) this.selectElement(prev);
+		else prev = el;
+	}
+	#onSlotClick;
+	/**
+	* Walk composedPath looking for the nearest ancestor tab-list-item, but bail
+	* if the path goes through a `.close-btn` or `.toolbar` (so close/toolbar
+	* buttons always win — same delegation pattern used by tooltip-controller).
+	*/
+	#findDragTarget(event) {
+		if (this.dragMode === `off`) return null;
+		const path = event.composedPath();
+		let item = null;
+		for (const node of path) {
+			if (!(node instanceof HTMLElement)) continue;
+			if (node.classList.contains(`close-btn`) || node.classList.contains(`toolbar`)) return null;
+			if (!item && node.tagName === `IXFX-TAB-LIST-ITEM`) item = node;
+		}
+		return item;
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onPointerCancel;
+	#beginDrag(event) {
+		const state = this.#dragState;
+		if (!state || state.active) return;
+		try {
+			this.#containerEl?.setPointerCapture(event.pointerId);
+		} catch {}
+		state.active = true;
+		state.source.setAttribute(`drag-source`, ``);
+		state.ghost = this.#createGhost(state.source);
+		if (state.ghost) state.ghost.move(event.clientX, event.clientY);
+	}
+	#abortDrag() {
+		const state = this.#dragState;
+		if (!state) return;
+		state.source.removeAttribute(`drag-source`);
+		if (state.gapIndex !== void 0) {
+			state.gapIndex = void 0;
+			this.requestUpdate();
+		}
+	}
+	#endDrag(pointerId) {
+		const state = this.#dragState;
+		if (!state) return;
+		state.ghost?.destroy();
+		state.ghost = null;
+		this.#dragState = null;
+		window.removeEventListener(`pointermove`, this.#onPointerMove);
+		window.removeEventListener(`pointerup`, this.#onPointerUp);
+		window.removeEventListener(`pointercancel`, this.#onPointerCancel);
+		try {
+			this.#containerEl?.releasePointerCapture(pointerId);
+		} catch {}
+		this.requestUpdate();
+	}
+	#commitDrag(source, fromIndex, gapIndex) {
+		source.removeAttribute(`drag-source`);
+		const siblings = this.#items.filter((el) => el !== source);
+		const target = gapIndex === void 0 ? siblings.length : Math.max(0, Math.min(gapIndex, siblings.length));
+		const parent = source.parentNode;
+		if (!parent) return;
+		const ref = siblings[target] ?? null;
+		parent.insertBefore(source, ref);
+		const toIndex = Array.prototype.indexOf.call(parent.children, source);
+		if (toIndex === fromIndex) return;
+		this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
+		this.#syncIndicatorColors();
+		this.#suppressNextClick = true;
+		this.dispatchEvent(new CustomEvent(`reorder`, {
+			bubbles: true,
+			detail: {
+				id: source.id,
+				fromIndex,
+				toIndex
+			}
+		}));
+	}
+	#createGhost(source) {
+		const content = document.createElement(`span`);
+		content.style.display = `inline-flex`;
+		content.style.alignItems = `center`;
+		content.style.gap = `var(--space-xs, 4px)`;
+		content.style.minWidth = `0`;
+		const iconName = source.iconName;
+		if (iconName) {
+			const icon = document.createElement(`ixfx-icon`);
+			icon.name = iconName;
+			content.appendChild(icon);
+		}
+		const label = document.createElement(`span`);
+		label.textContent = (source.textContent ?? ``).trim();
+		label.style.overflow = `hidden`;
+		label.style.textOverflow = `ellipsis`;
+		label.style.whiteSpace = `nowrap`;
+		content.appendChild(label);
+		try {
+			return createDragGhost({
+				anchor: source,
+				content
+			});
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Compute the index of the gap nearest the pointer, ignoring the source item.
+	* Returns 0..#items.length-1; undefined if no siblings.
+	*
+	* Per the plan: drag-mode="reorder" has "no sense of breaking out", so the
+	* perpendicular axis is ignored — the pointer always resolves to some gap.
+	*/
+	#computeGapIndex(clientX, clientY) {
+		const state = this.#dragState;
+		if (!state) return void 0;
+		const siblings = this.#items.filter((el) => el !== state.source);
+		if (siblings.length === 0) return 0;
+		const useX = !this.#isVertical;
+		let bestGap = 0;
+		let bestDist = Infinity;
+		for (let i = 0; i < siblings.length; i++) {
+			const rect = siblings[i].getBoundingClientRect();
+			const start = useX ? rect.left : rect.top;
+			const end = useX ? rect.right : rect.bottom;
+			const mid = (start + end) / 2;
+			const pos = useX ? clientX : clientY;
+			const dStart = Math.abs(pos - start);
+			Math.abs(pos - mid);
+			const dEnd = Math.abs(pos - end);
+			if (pos < mid) {
+				if (dStart < bestDist) {
+					bestDist = dStart;
+					bestGap = i;
+				}
+			} else if (dEnd < bestDist) {
+				bestDist = dEnd;
+				bestGap = i + 1;
+			}
+		}
+		return bestGap;
+	}
+	#computeCaretStyle() {
+		const state = this.#dragState;
+		if (!state?.active || state.gapIndex === void 0) return void 0;
+		const siblings = this.#items.filter((el) => el !== state.source);
+		if (siblings.length === 0) return void 0;
+		const useX = !this.#isVertical;
+		const containerRect = this.#containerEl?.getBoundingClientRect();
+		if (!containerRect) return void 0;
+		const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));
+		let rect = null;
+		if (gap < siblings.length) rect = siblings[gap].getBoundingClientRect();
+		else rect = siblings[siblings.length - 1].getBoundingClientRect();
+		if (useX) {
+			const x = (gap < siblings.length ? rect.left : rect.right) - containerRect.left;
+			const y = 0;
+			const h = containerRect.height;
+			const w = 2;
+			return `transform: translate(${x - w / 2}px, ${y}px); width: ${w}px; height: ${h}px;`;
+		} else {
+			const y = (gap < siblings.length ? rect.top : rect.bottom) - containerRect.top;
+			const x = 0;
+			const w = containerRect.width;
+			const h = 2;
+			return `transform: translate(${x}px, ${y - h / 2}px); width: ${w}px; height: ${h}px;`;
+		}
+	}
+	get #containerEl() {
+		return this.shadowRoot?.getElementById(`container`) ?? null;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+  :host {
+      display: inline-block;
+      --activated-colour: var(--accent);
+      --colour: var(--surface-4);
+      --scroll-max-height: 200px;
+      --allow-overflow: hidden;
+    }
+    :host(.scrollable) {
+      max-height: var(--scroll-max-height);
+    }
+    text {
+      user-select:none;
+    }
+    #container {
+      display:flex;
+      position: relative;
+    }
+    #container.horizontal {
+      flex-direction: row;
+      overflow: hidden;
+    }
+    #container.horizontal.scrollable {
+      overflow-x: auto;
+      --allow-overflow: visible;
+    }
+    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
+      flex-shrink: 0;
+    }
+    #container.vertical-stack {
+      flex-direction: column;
+    }
+    #container.vertical-stack.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-stack.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+    #container.vertical-side {
+      flex-direction: column;
+    }
+    #container.vertical-side.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-side.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+
+    ::slotted(ixfx-tab-list-item) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    #container.vertical-side ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    /* Drag affordances — opt-in via drag-mode="reorder" on the host (list). */
+    #container.reorder ::slotted(ixfx-tab-list-item) {
+      cursor: grab;
+    }
+    :host([drag-mode]) ::slotted(ixfx-tab-list-item[drag-source]) {
+      cursor: grabbing;
+      opacity: 0.4;
+      transition: opacity var(--transition, 0.15s ease-out);
+    }
+
+    /* Insertion caret shown during an active drag. */
+    .drop-caret {
+      position: absolute;
+      background: var(--accent);
+      border-radius: 1px;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    ::slotted(.activated) {
+      --colour: var(--activated-colour);
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
+__decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
+__decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
+__decorate([property({
+	type: String,
+	attribute: `drag-mode`
+})], TabListElement.prototype, "dragMode", void 0);
+TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
+//#endregion
+export { TabListElement as t };
+
+//# sourceMappingURL=tab-list-DzknpdSo.js.map

package/dist/tab-list-DzknpdSo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-DzknpdSo.js","names":["#items","#syncIndicatorColors","#isVertical","#selectPrevious","#selectNext","#dragState","#abortDrag","#endDrag","#containerEl","#suppressNextClick","#findDragTarget","#onPointerMove","#onPointerUp","#onPointerCancel","#beginDrag","#computeGapIndex","#commitDrag","#containerClass","#computeCaretStyle","#onKeyUp","#onSlotClick","#onPointerDown","#onKeyDown","#onWheel","#onSlotChange","#isSelected","#createGhost","customElement"],"sources":["../src/util/drag-ghost.ts","../src/tabs/tab-list.ts"],"sourcesContent":["/**\n * Theme-aware floating element helper.\n *\n * Creates a `position: fixed`, `pointer-events: none` element anchored to a\n * source element's theme container, then exposes imperative `move` / `destroy`\n * hooks. Used by `ixfx-tab-list` for its drag-ghost; intended to be reusable\n * by future drag/detach features.\n *\n * Theme container lookup mirrors `tooltip-controller.ts` so the floating\n * element still inherits the right CSS custom properties when the source lives\n * inside a `.theme-dark` / `.theme-light` subtree (used by the loader iframes).\n */\nlet stylesInjected = false;\n\nfunction injectGhostStyles(): void {\n  if (stylesInjected)\n    return;\n  stylesInjected = true;\n  const style = document.createElement(`style`);\n  style.textContent = `\n    .ixfx-drag-ghost {\n      position: fixed;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      z-index: 10000;\n      will-change: transform;\n      opacity: 0.9;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-xs, 4px);\n      padding: var(--padding, var(--space-m, 8px)) calc(2 * var(--padding, var(--space-m, 8px)));\n      background: var(--surface-4);\n      color: var(--surface-4-text);\n      border: 1px solid var(--border-subtle);\n      border-radius: var(--radius-m, 6px);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      white-space: nowrap;\n      max-width: 240px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      box-shadow: var(--shadow-m);\n    }\n    .ixfx-drag-ghost ixfx-icon {\n      flex-shrink: 0;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nexport interface DragGhost {\n  /** Position the ghost at (x, y) viewport coords, anchored around the source center. */\n  move: (x: number, y: number) => void;\n  /** Remove the ghost from the DOM. Idempotent. */\n  destroy: () => void;\n  /** The underlying ghost element (rarely needed outside this module). */\n  readonly element: HTMLElement;\n}\n\nexport interface CreateDragGhostOptions {\n  /** Content element to mount inside the ghost. Will be appended on create. */\n  content: HTMLElement;\n  /**\n   * Anchor element — used to find the theme container and to compute the\n   * initial offset so the ghost appears centered under the source on first move.\n   */\n  anchor: HTMLElement;\n  /** Optional class name appended to the ghost wrapper for custom styling. */\n  className?: string;\n}\n\n/**\n * Create a theme-aware floating ghost element.\n *\n * The ghost is appended to the closest `.theme-dark` / `.theme-light` ancestor\n * of `anchor`, falling back to `document.body`. This preserves CSS variable\n * inheritance for theming.\n */\nexport function createDragGhost(opts: CreateDragGhostOptions): DragGhost {\n  injectGhostStyles();\n\n  const ghost = document.createElement(`div`);\n  ghost.className = `ixfx-drag-ghost`;\n  if (opts.className)\n    ghost.classList.add(opts.className);\n  ghost.appendChild(opts.content);\n\n  // Place ghost off-screen until first `move()` call\n  ghost.style.transform = `translate3d(-9999px, -9999px, 0)`;\n\n  const targetDoc = opts.anchor.ownerDocument;\n  const themeContainer = opts.anchor.closest(`.theme-dark, .theme-light`);\n  if (themeContainer) {\n    themeContainer.appendChild(ghost);\n  } else {\n    targetDoc.body.appendChild(ghost);\n  }\n\n  // Anchor offset: distance from the source's top-left to its center.\n  const anchorRect = opts.anchor.getBoundingClientRect();\n  const offsetX = anchorRect.width / 2;\n  const offsetY = anchorRect.height / 2;\n\n  return {\n    element: ghost,\n    move(x: number, y: number): void {\n      ghost.style.transform = `translate3d(${x - offsetX}px, ${y - offsetY}px, 0)`;\n    },\n    destroy(): void {\n      ghost.remove();\n    },\n  };\n}\n","import type { PropertyValues } from \"lit\";\nimport type { DragGhost } from \"../util/drag-ghost.js\";\nimport type { TabListItemElement } from \"./tab-list-item.js\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { themeFallbacks } from \"../styles/fallbacks.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { createDragGhost } from \"../util/drag-ghost.js\";\n\n/**\n * Events\n * 'change' - new tab selected { previous:string, selected:string, for:string }\n * 'reorder' - tab moved within the list { id:string, fromIndex:number, toIndex:number }\n */\nexport type TabListChangeDetail = {\n  readonly previous: string | undefined;\n  readonly selected: string;\n  readonly for: string;\n};\n\nexport type TabListChangeEvent = CustomEvent<TabListChangeDetail>;\n\nexport type TabListReorderDetail = {\n  readonly id: string;\n  readonly fromIndex: number;\n  readonly toIndex: number;\n};\n\nexport type TabListReorderEvent = CustomEvent<TabListReorderDetail>;\n\nexport type TabListDragMode = `off` | `reorder`;\n\n/** Pointer movement threshold (px) before a press becomes a drag. */\nconst DRAG_THRESHOLD_PX = 5;\n\n@customElement(`ixfx-tab-list`)\nexport class TabListElement extends LitElement {\n  @property({ type: String })\n  orientation: `horizontal` | `vertical-stack` | `vertical-side` = `horizontal`;\n\n  @property({ type: Boolean })\n  flip = false;\n\n  @property({ type: Boolean })\n  scrollable = false;\n\n  @property({ type: String, attribute: `drag-mode` })\n  dragMode: TabListDragMode = `off`;\n\n  #items: TabListItemElement[] = [];\n\n  // ── Drag state (not reactive) ────────────────────────────────────────\n  #dragState: {\n    pointerId: number;\n    source: TabListItemElement;\n    fromIndex: number;\n    startX: number;\n    startY: number;\n    active: boolean;\n    ghost: DragGhost | null;\n    gapIndex: number | undefined;\n  } | null = null;\n\n  #suppressNextClick = false;\n\n  get #isVertical(): boolean {\n    return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;\n  }\n\n  get #containerClass(): string {\n    const base = this.scrollable ? `${this.orientation} scrollable` : this.orientation;\n    return this.dragMode === `reorder` ? `${base} reorder` : base;\n  }\n\n  override render() {\n    const caretStyle = this.#computeCaretStyle();\n    return html`\n    <div\n      tabindex=0\n      @keyup=${this.#onKeyUp}\n      @click=${this.#onSlotClick}\n      @pointerdown=${this.#onPointerDown}\n      @keydown=${this.#onKeyDown}\n      @wheel=${this.#onWheel}\n      id=\"container\"\n      class=${this.#containerClass}\n    >\n      <slot @slotchange=${this.#onSlotChange}></slot>\n      ${caretStyle\n        ? html`<div class=\"drop-caret\" style=${caretStyle}></div>`\n        : nothing}\n    </div>`;\n  }\n\n  #onSlotChange = () => {\n    this.updateComplete.then(() => {\n      this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n        ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n      this.#syncIndicatorColors();\n    });\n  };\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      if (this.#items.length > 0) {\n        this.#syncIndicatorColors();\n      }\n    });\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    this.classList.toggle(`scrollable`, this.scrollable);\n    if (changedProperties.has(`dragMode`)) {\n      this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);\n    }\n  }\n\n  #syncIndicatorColors() {\n    for (const item of this.#items) {\n      item.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      item.style.setProperty(`--indicator-color-top`, `transparent`);\n      item.style.setProperty(`--indicator-color-left`, `transparent`);\n      item.style.setProperty(`--indicator-color-right`, `transparent`);\n\n      if (item.hasAttribute(`selected`)) {\n        if (this.orientation === `horizontal` && !this.flip) {\n          item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n        } else if (this.orientation === `horizontal` && this.flip) {\n          item.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n        } else if (this.#isVertical && !this.flip) {\n          item.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n        } else if (this.#isVertical && this.flip) {\n          item.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n        }\n      }\n    }\n  }\n\n  #onKeyUp = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (this.#isVertical) {\n      if (key === `ArrowUp`) {\n        this.#selectPrevious();\n      } else if (key === `ArrowDown`) {\n        this.#selectNext();\n      }\n    } else {\n      if (key === `ArrowRight`) {\n        this.#selectNext();\n      } else if (key === `ArrowLeft`) {\n        this.#selectPrevious();\n      }\n    }\n  };\n\n  // Escape during drag aborts it (and tears down listeners / releases capture)\n  #onKeyDown = (event: KeyboardEvent): void => {\n    const state = this.#dragState;\n    if (event.key !== `Escape` || !state?.active)\n      return;\n    event.preventDefault();\n    const pointerId = state.pointerId;\n    this.#abortDrag();\n    this.#endDrag(pointerId);\n  };\n\n  /**\n   * Translate vertical wheel deltas into horizontal scroll on a scrollable\n   * horizontal list (and vice-versa for vertical lists). Without this, the\n   * default browser behaviour only scrolls horizontally with Shift+wheel or a\n   * physical horizontal wheel — neither of which most users reach for on a\n   * VS Code-style tab strip.\n   *\n   * Only kicks in when the list is actually scrollable (overflow content\n   * present), and is a no-op when nothing is scrollable in that direction.\n   */\n  #onWheel = (event: WheelEvent): void => {\n    if (!this.scrollable)\n      return;\n    const el = this.#containerEl;\n    if (!el)\n      return;\n\n    if (!this.#isVertical) {\n      // Horizontal list: vertical wheel → horizontal scroll.\n      if (event.deltaY === 0 || el.scrollWidth <= el.clientWidth)\n        return;\n      const prev = el.scrollLeft;\n      el.scrollLeft = prev + event.deltaY;\n      if (el.scrollLeft !== prev)\n        event.preventDefault();\n    } else {\n      // Vertical list: vertical wheel is already native; only intervene when\n      // a horizontal wheel is supplied (e.g. trackpad two-finger horizontal).\n      if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight)\n        return;\n      const prev = el.scrollTop;\n      el.scrollTop = prev + event.deltaX;\n      if (el.scrollTop !== prev)\n        event.preventDefault();\n    }\n  };\n\n  getSelectedElement() {\n    for (const el of this.#items) {\n      if (this.#isSelected(el))\n        return el;\n    }\n    // Fallback: #items may not be populated yet (slotchange hasn't fired).\n    // Query the slot directly to find the selected element.\n    const slot = this.shadowRoot?.querySelector(`slot`);\n    if (slot) {\n      const els = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of els) {\n        if (this.#isSelected(el as HTMLElement))\n          return el as TabListItemElement;\n      }\n    }\n  }\n\n  #isSelected(el: HTMLElement) {\n    const v = el.getAttribute(`selected`);\n    if (v === null)\n      return false;\n    return (el.hasAttribute(`selected`));\n  }\n\n  selectElement(el: HTMLElement) {\n    const existing = this.getSelectedElement();\n    if (existing) {\n      existing.removeAttribute(`selected`);\n      existing.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      existing.style.setProperty(`--indicator-color-top`, `transparent`);\n      existing.style.setProperty(`--indicator-color-left`, `transparent`);\n      existing.style.setProperty(`--indicator-color-right`, `transparent`);\n    }\n\n    el.setAttribute(`selected`, ``);\n\n    if (this.orientation === `horizontal` && !this.flip) {\n      el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n    } else if (this.orientation === `horizontal` && this.flip) {\n      el.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n    } else if (this.#isVertical && !this.flip) {\n      el.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n    } else if (this.#isVertical && this.flip) {\n      el.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n    }\n  }\n\n  #selectNext() {\n    let found = false;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && !found) {\n        found = true;\n      } else if (found) {\n        this.selectElement(el);\n        break;\n      }\n    }\n  }\n\n  #selectPrevious() {\n    let prev: HTMLElement | undefined;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && prev) {\n        this.selectElement(prev);\n      } else {\n        prev = el;\n      }\n    }\n  }\n\n  #onSlotClick = (event: MouseEvent) => {\n    if (this.#suppressNextClick) {\n      this.#suppressNextClick = false;\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.focus();\n    const t = (event.target as HTMLElement).closest(`ixfx-tab-list-item`);\n    if (!t)\n      return;\n    const previous = this.getSelectedElement();\n    this.selectElement(t);\n\n    const forId = t.getAttribute(`for`);\n    const previousId = previous?.id;\n    this.dispatchEvent(new CustomEvent<TabListChangeDetail>(`change`, {\n      bubbles: true,\n      detail: {\n        previous: previousId,\n        selected: t.id,\n        for: forId ?? ``,\n      },\n    }));\n  };\n\n  // ── Drag handling ────────────────────────────────────────────────────\n\n  /**\n   * Walk composedPath looking for the nearest ancestor tab-list-item, but bail\n   * if the path goes through a `.close-btn` or `.toolbar` (so close/toolbar\n   * buttons always win — same delegation pattern used by tooltip-controller).\n   */\n  #findDragTarget(event: PointerEvent): TabListItemElement | null {\n    if (this.dragMode === `off`)\n      return null;\n\n    const path = event.composedPath();\n    let item: TabListItemElement | null = null;\n    for (const node of path) {\n      if (!(node instanceof HTMLElement))\n        continue;\n      if (node.classList.contains(`close-btn`) || node.classList.contains(`toolbar`)) {\n        return null;\n      }\n      if (!item && node.tagName === `IXFX-TAB-LIST-ITEM`) {\n        item = node as TabListItemElement;\n      }\n    }\n    return item;\n  }\n\n  #onPointerDown = (event: PointerEvent): void => {\n    if (this.dragMode !== `reorder`)\n      return;\n    if (event.button !== 0)\n      return;\n    const target = this.#findDragTarget(event);\n    if (!target)\n      return;\n\n    const fromIndex = this.#items.indexOf(target);\n    if (fromIndex < 0)\n      return;\n\n    // Don't capture the pointer yet — doing so on pointerdown would redirect\n    // the trailing click event to the capture target (the container), so the\n    // click handler would see a container DIV as its target instead of the\n    // tab-list-item and `closest('ixfx-tab-list-item')` would return null.\n    // We capture only once the drag actually activates (#beginDrag). Until\n    // then, an ordinary press still produces a normal click on the tab.\n\n    this.#dragState = {\n      pointerId: event.pointerId,\n      source: target,\n      fromIndex,\n      startX: event.clientX,\n      startY: event.clientY,\n      active: false,\n      ghost: null,\n      gapIndex: undefined,\n    };\n\n    // Listen at window level for move/up so we don't lose events if the\n    // pointer exits the host before pointerup fires.\n    window.addEventListener(`pointermove`, this.#onPointerMove);\n    window.addEventListener(`pointerup`, this.#onPointerUp);\n    window.addEventListener(`pointercancel`, this.#onPointerCancel);\n  };\n\n  #onPointerMove = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n\n    const dx = event.clientX - state.startX;\n    const dy = event.clientY - state.startY;\n    const distance = Math.hypot(dx, dy);\n\n    if (!state.active) {\n      if (distance < DRAG_THRESHOLD_PX)\n        return;\n      this.#beginDrag(event);\n    }\n\n    state.ghost?.move(event.clientX, event.clientY);\n\n    const gap = this.#computeGapIndex(event.clientX, event.clientY);\n    if (gap !== state.gapIndex) {\n      state.gapIndex = gap;\n      this.requestUpdate();\n    }\n  };\n\n  #onPointerUp = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n\n    if (state.active) {\n      const gap = this.#computeGapIndex(event.clientX, event.clientY);\n      this.#commitDrag(state.source, state.fromIndex, gap);\n    }\n    this.#endDrag(event.pointerId);\n  };\n\n  #onPointerCancel = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n    this.#abortDrag();\n    this.#endDrag(event.pointerId);\n  };\n\n  #beginDrag(event: PointerEvent): void {\n    const state = this.#dragState;\n    if (!state || state.active)\n      return;\n\n    // Now that we know we're dragging, capture the pointer so pointermove/up\n    // events keep flowing even if the pointer leaves the host element.\n    try {\n      this.#containerEl?.setPointerCapture(event.pointerId);\n    } catch {\n      // setPointerCapture can throw if pointer is already captured elsewhere;\n      // fall through — window listeners still catch move/up.\n    }\n\n    state.active = true;\n    state.source.setAttribute(`drag-source`, ``);\n\n    state.ghost = this.#createGhost(state.source);\n    if (state.ghost) {\n      state.ghost.move(event.clientX, event.clientY);\n    }\n  }\n\n  #abortDrag(): void {\n    const state = this.#dragState;\n    if (!state)\n      return;\n    state.source.removeAttribute(`drag-source`);\n    if (state.gapIndex !== undefined) {\n      state.gapIndex = undefined;\n      this.requestUpdate();\n    }\n    // Caller is responsible for invoking #endDrag to release pointer capture,\n    // tear down listeners, and destroy the ghost.\n  }\n\n  #endDrag(pointerId: number): void {\n    const state = this.#dragState;\n    if (!state)\n      return;\n\n    state.ghost?.destroy();\n    state.ghost = null;\n    this.#dragState = null;\n\n    window.removeEventListener(`pointermove`, this.#onPointerMove);\n    window.removeEventListener(`pointerup`, this.#onPointerUp);\n    window.removeEventListener(`pointercancel`, this.#onPointerCancel);\n\n    try {\n      this.#containerEl?.releasePointerCapture(pointerId);\n    } catch { /* already released */ }\n\n    // #dragState is a private field, not a Lit-reactive property — setting it\n    // to null doesn't trigger a re-render on its own. Without this, the caret\n    // (and any other drag-time UI) would remain in the DOM after the drag\n    // ends, even though the next render would clear them.\n    this.requestUpdate();\n  }\n\n  #commitDrag(source: TabListItemElement, fromIndex: number, gapIndex: number | undefined): void {\n    source.removeAttribute(`drag-source`);\n\n    // gapIndex is an index into the without-source siblings array: 0 = before\n    // the first sibling, siblings.length = after the last. The siblings array\n    // already excludes source, so we can insert directly at that position\n    // using siblings[gapIndex] as the reference (or null to append).\n    const siblings = this.#items.filter(el => el !== source);\n    const target = gapIndex === undefined\n      ? siblings.length\n      : Math.max(0, Math.min(gapIndex, siblings.length));\n\n    const parent = source.parentNode;\n    if (!parent)\n      return;\n\n    const ref = siblings[target] ?? null;\n    parent.insertBefore(source, ref);\n\n    const toIndex = Array.prototype.indexOf.call(parent.children, source);\n    if (toIndex === fromIndex) {\n      // Dropped in the same gap the item already occupies — no reorder, and no\n      // click suppression (a real click on the same tab is still meaningful).\n      return;\n    }\n\n    // Refresh cached #items so subsequent drags / queries see the new order\n    // (slotchange does NOT fire on reorder, only on add/remove).\n    this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n      ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n    this.#syncIndicatorColors();\n\n    // A real reorder just happened. The trailing click event (which the\n    // browser still fires after pointerup) would re-select whatever is under\n    // the release point — not what the user wanted. Suppress it.\n    this.#suppressNextClick = true;\n\n    this.dispatchEvent(new CustomEvent<TabListReorderDetail>(`reorder`, {\n      bubbles: true,\n      detail: {\n        id: source.id,\n        fromIndex,\n        toIndex,\n      },\n    }));\n  }\n\n  #createGhost(source: TabListItemElement): DragGhost | null {\n    const content = document.createElement(`span`);\n    content.style.display = `inline-flex`;\n    content.style.alignItems = `center`;\n    content.style.gap = `var(--space-xs, 4px)`;\n    content.style.minWidth = `0`;\n\n    const iconName = source.iconName;\n    if (iconName) {\n      const icon = document.createElement(`ixfx-icon`) as HTMLElement & { name: string };\n      icon.name = iconName;\n      content.appendChild(icon);\n    }\n\n    // Reconstruct label text from light-DOM children that aren't slotted.\n    // We want the text content of the source item, excluding `slot=\"toolbar\"`\n    // descendants (the close button lives inside the item's shadow DOM, not\n    // its light DOM, so it isn't part of childNodes here).\n    const label = document.createElement(`span`);\n    label.textContent = (source.textContent ?? ``).trim();\n    label.style.overflow = `hidden`;\n    label.style.textOverflow = `ellipsis`;\n    label.style.whiteSpace = `nowrap`;\n    content.appendChild(label);\n\n    try {\n      return createDragGhost({ anchor: source, content });\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Compute the index of the gap nearest the pointer, ignoring the source item.\n   * Returns 0..#items.length-1; undefined if no siblings.\n   *\n   * Per the plan: drag-mode=\"reorder\" has \"no sense of breaking out\", so the\n   * perpendicular axis is ignored — the pointer always resolves to some gap.\n   */\n  #computeGapIndex(clientX: number, clientY: number): number | undefined {\n    const state = this.#dragState;\n    if (!state)\n      return undefined;\n    const siblings = this.#items.filter(el => el !== state.source);\n    if (siblings.length === 0)\n      return 0;\n\n    const useX = !this.#isVertical;\n\n    let bestGap = 0;\n    let bestDist = Infinity;\n\n    // For each sibling, decide: gap is \"before this sibling\" or \"after\" based\n    // on which side of the midpoint the pointer is on. Pick the gap whose\n    // position (the midpoint if \"before\", the edge if \"after\") is closest to\n    // the pointer on the relevant axis.\n    for (let i = 0; i < siblings.length; i++) {\n      const rect = siblings[i].getBoundingClientRect();\n      const start = useX ? rect.left : rect.top;\n      const end = useX ? rect.right : rect.bottom;\n      const mid = (start + end) / 2;\n      const pos = useX ? clientX : clientY;\n\n      // Two candidate gaps: before this sibling (at `start`) and after (at `end`).\n      // \"Before\" gap index = i; \"after\" gap index = i + 1.\n      const dStart = Math.abs(pos - start);\n      const dMid = Math.abs(pos - mid);\n      const dEnd = Math.abs(pos - end);\n\n      // Heuristic: if pointer is left/above midpoint, prefer the \"before\" gap;\n      // otherwise prefer the \"after\" gap. Within those, the closer edge wins.\n      const preferBefore = pos < mid;\n      if (preferBefore) {\n        // Gap i (before this sibling)\n        if (dStart < bestDist) {\n          bestDist = dStart;\n          bestGap = i;\n        }\n      } else {\n        // Gap i+1 (after this sibling)\n        if (dEnd < bestDist) {\n          bestDist = dEnd;\n          bestGap = i + 1;\n        }\n      }\n      // The midpoint-distance is mostly redundant with the above but handles\n      // ties near the boundary cleanly — no-op for the chosen gap.\n      void dMid;\n    }\n\n    return bestGap;\n  }\n\n  #computeCaretStyle(): string | undefined {\n    const state = this.#dragState;\n    if (!state?.active || state.gapIndex === undefined)\n      return undefined;\n\n    const siblings = this.#items.filter(el => el !== state.source);\n    if (siblings.length === 0)\n      return undefined;\n\n    const useX = !this.#isVertical;\n    const containerRect = this.#containerEl?.getBoundingClientRect();\n    if (!containerRect)\n      return undefined;\n\n    const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));\n    let rect: DOMRect | null = null;\n    if (gap < siblings.length) {\n      rect = siblings[gap].getBoundingClientRect();\n    } else {\n      // After the last sibling: use its trailing edge\n      const last = siblings[siblings.length - 1].getBoundingClientRect();\n      rect = last;\n    }\n\n    if (useX) {\n      const x = (gap < siblings.length ? rect.left : rect.right) - containerRect.left;\n      const y = 0;\n      const h = containerRect.height;\n      const w = 2;\n      return `transform: translate(${x - w / 2}px, ${y}px); width: ${w}px; height: ${h}px;`;\n    } else {\n      const y = (gap < siblings.length ? rect.top : rect.bottom) - containerRect.top;\n      const x = 0;\n      const w = containerRect.width;\n      const h = 2;\n      return `transform: translate(${x}px, ${y - h / 2}px); width: ${w}px; height: ${h}px;`;\n    }\n  }\n\n  get #containerEl(): HTMLElement | null {\n    return this.shadowRoot?.getElementById(`container`) ?? null;\n  }\n\n  static styles = [themeFallbacks, css`\n  :host {\n      display: inline-block;\n      --activated-colour: var(--accent);\n      --colour: var(--surface-4);\n      --scroll-max-height: 200px;\n      --allow-overflow: hidden;\n    }\n    :host(.scrollable) {\n      max-height: var(--scroll-max-height);\n    }\n    text {\n      user-select:none;\n    }\n    #container {\n      display:flex;\n      position: relative;\n    }\n    #container.horizontal {\n      flex-direction: row;\n      overflow: hidden;\n    }\n    #container.horizontal.scrollable {\n      overflow-x: auto;\n      --allow-overflow: visible;\n    }\n    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {\n      flex-shrink: 0;\n    }\n    #container.vertical-stack {\n      flex-direction: column;\n    }\n    #container.vertical-stack.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-stack.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n    #container.vertical-side {\n      flex-direction: column;\n    }\n    #container.vertical-side.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-side.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n\n    ::slotted(ixfx-tab-list-item) {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    #container.vertical-side ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-lr;\n      text-orientation: mixed;\n    }\n    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    /* Drag affordances — opt-in via drag-mode=\"reorder\" on the host (list). */\n    #container.reorder ::slotted(ixfx-tab-list-item) {\n      cursor: grab;\n    }\n    :host([drag-mode]) ::slotted(ixfx-tab-list-item[drag-source]) {\n      cursor: grabbing;\n      opacity: 0.4;\n      transition: opacity var(--transition, 0.15s ease-out);\n    }\n\n    /* Insertion caret shown during an active drag. */\n    .drop-caret {\n      position: absolute;\n      background: var(--accent);\n      border-radius: 1px;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    ::slotted(.activated) {\n      --colour: var(--activated-colour);\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-tab-list\": TabListElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAYA,IAAI,iBAAiB;AAErB,SAAS,oBAA0B;CACjC,IAAI,gBACF;CACF,iBAAiB;CACjB,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BpB,SAAS,KAAK,YAAY,KAAK;AACjC;;;;;;;;AA8BA,SAAgB,gBAAgB,MAAyC;CACvE,kBAAkB;CAElB,MAAM,QAAQ,SAAS,cAAc,KAAK;CAC1C,MAAM,YAAY;CAClB,IAAI,KAAK,WACP,MAAM,UAAU,IAAI,KAAK,SAAS;CACpC,MAAM,YAAY,KAAK,OAAO;CAG9B,MAAM,MAAM,YAAY;CAExB,MAAM,YAAY,KAAK,OAAO;CAC9B,MAAM,iBAAiB,KAAK,OAAO,QAAQ,2BAA2B;CACtE,IAAI,gBACF,eAAe,YAAY,KAAK;MAEhC,UAAU,KAAK,YAAY,KAAK;CAIlC,MAAM,aAAa,KAAK,OAAO,sBAAsB;CACrD,MAAM,UAAU,WAAW,QAAQ;CACnC,MAAM,UAAU,WAAW,SAAS;CAEpC,OAAO;EACL,SAAS;EACT,KAAK,GAAW,GAAiB;GAC/B,MAAM,MAAM,YAAY,eAAe,IAAI,QAAQ,MAAM,IAAI,QAAQ;EACvE;EACA,UAAgB;GACd,MAAM,OAAO;EACf;CACF;AACF;;;;ACjFA,MAAM,oBAAoB;AAGnB,IAAM,iBAAN,MAAM,uBAAuB,WAAW;;;EAEoB,KAAA,cAAA;EAG1D,KAAA,OAAA;EAGM,KAAA,aAAA;EAGe,KAAA,WAAA;EAEG,KAAA,SAAA,CAAC;EAYrB,KAAA,aAAA;EAEU,KAAA,qBAAA;EA+BC,KAAA,sBAAA;GACpB,KAAK,eAAe,WAAW;IAC7B,KAAKA,UAAU,KAAK,YAAY,cAAc,MAAM,EAAA,EAChD,iBAAiB,EAAE,SAAS,KAAK,CAAC,KAA6B,CAAC;IACpE,KAAKC,qBAAqB;GAC5B,CAAC;EACH;EAuCY,KAAA,YAAA,UAAyB;GACnC,MAAM,MAAM,MAAM;GAClB,IAAI,KAAKC,aAAa;IACpB,IAAI,QAAQ,WACV,KAAKC,gBAAgB;SAChB,IAAI,QAAQ,aACjB,KAAKC,YAAY;GAErB,OACE,IAAI,QAAQ,cACV,KAAKA,YAAY;QACZ,IAAI,QAAQ,aACjB,KAAKD,gBAAgB;EAG3B;EAGc,KAAA,cAAA,UAA+B;GAC3C,MAAM,QAAQ,KAAKE;GACnB,IAAI,MAAM,QAAQ,YAAY,CAAC,OAAO,QACpC;GACF,MAAM,eAAe;GACrB,MAAM,YAAY,MAAM;GACxB,KAAKC,WAAW;GAChB,KAAKC,SAAS,SAAS;EACzB;EAYY,KAAA,YAAA,UAA4B;GACtC,IAAI,CAAC,KAAK,YACR;GACF,MAAM,KAAK,KAAKC;GAChB,IAAI,CAAC,IACH;GAEF,IAAI,CAAC,KAAKN,aAAa;IAErB,IAAI,MAAM,WAAW,KAAK,GAAG,eAAe,GAAG,aAC7C;IACF,MAAM,OAAO,GAAG;IAChB,GAAG,aAAa,OAAO,MAAM;IAC7B,IAAI,GAAG,eAAe,MACpB,MAAM,eAAe;GACzB,OAAO;IAGL,IAAI,MAAM,WAAW,KAAK,GAAG,gBAAgB,GAAG,cAC9C;IACF,MAAM,OAAO,GAAG;IAChB,GAAG,YAAY,OAAO,MAAM;IAC5B,IAAI,GAAG,cAAc,MACnB,MAAM,eAAe;GACzB;EACF;EAwEgB,KAAA,gBAAA,UAAsB;GACpC,IAAI,KAAKO,oBAAoB;IAC3B,KAAKA,qBAAqB;IAC1B,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GAEA,KAAK,MAAM;GACX,MAAM,IAAK,MAAM,OAAuB,QAAQ,oBAAoB;GACpE,IAAI,CAAC,GACH;GACF,MAAM,WAAW,KAAK,mBAAmB;GACzC,KAAK,cAAc,CAAC;GAEpB,MAAM,QAAQ,EAAE,aAAa,KAAK;GAClC,MAAM,aAAa,UAAU;GAC7B,KAAK,cAAc,IAAI,YAAiC,UAAU;IAChE,SAAS;IACT,QAAQ;KACN,UAAU;KACV,UAAU,EAAE;KACZ,KAAK,SAAS;IAChB;GACF,CAAC,CAAC;EACJ;EA4BkB,KAAA,kBAAA,UAA8B;GAC9C,IAAI,KAAK,aAAa,WACpB;GACF,IAAI,MAAM,WAAW,GACnB;GACF,MAAM,SAAS,KAAKC,gBAAgB,KAAK;GACzC,IAAI,CAAC,QACH;GAEF,MAAM,YAAY,KAAKV,OAAO,QAAQ,MAAM;GAC5C,IAAI,YAAY,GACd;GASF,KAAKK,aAAa;IAChB,WAAW,MAAM;IACjB,QAAQ;IACR;IACA,QAAQ,MAAM;IACd,QAAQ,MAAM;IACd,QAAQ;IACR,OAAO;IACP,UAAU,KAAA;GACZ;GAIA,OAAO,iBAAiB,eAAe,KAAKM,cAAc;GAC1D,OAAO,iBAAiB,aAAa,KAAKC,YAAY;GACtD,OAAO,iBAAiB,iBAAiB,KAAKC,gBAAgB;EAChE;EAEkB,KAAA,kBAAA,UAA8B;GAC9C,MAAM,QAAQ,KAAKR;GACnB,IAAI,CAAC,SAAS,MAAM,cAAc,MAAM,WACtC;GAEF,MAAM,KAAK,MAAM,UAAU,MAAM;GACjC,MAAM,KAAK,MAAM,UAAU,MAAM;GACjC,MAAM,WAAW,KAAK,MAAM,IAAI,EAAE;GAElC,IAAI,CAAC,MAAM,QAAQ;IACjB,IAAI,WAAW,mBACb;IACF,KAAKS,WAAW,KAAK;GACvB;GAEA,MAAM,OAAO,KAAK,MAAM,SAAS,MAAM,OAAO;GAE9C,MAAM,MAAM,KAAKC,iBAAiB,MAAM,SAAS,MAAM,OAAO;GAC9D,IAAI,QAAQ,MAAM,UAAU;IAC1B,MAAM,WAAW;IACjB,KAAK,cAAc;GACrB;EACF;EAEgB,KAAA,gBAAA,UAA8B;GAC5C,MAAM,QAAQ,KAAKV;GACnB,IAAI,CAAC,SAAS,MAAM,cAAc,MAAM,WACtC;GAEF,IAAI,MAAM,QAAQ;IAChB,MAAM,MAAM,KAAKU,iBAAiB,MAAM,SAAS,MAAM,OAAO;IAC9D,KAAKC,YAAY,MAAM,QAAQ,MAAM,WAAW,GAAG;GACrD;GACA,KAAKT,SAAS,MAAM,SAAS;EAC/B;EAEoB,KAAA,oBAAA,UAA8B;GAChD,MAAM,QAAQ,KAAKF;GACnB,IAAI,CAAC,SAAS,MAAM,cAAc,MAAM,WACtC;GACF,KAAKC,WAAW;GAChB,KAAKC,SAAS,MAAM,SAAS;EAC/B;;CAtWA;CAGA;CAWA;CAEA,IAAIL,cAAuB;EACzB,OAAO,KAAK,gBAAgB,oBAAoB,KAAK,gBAAgB;CACvE;CAEA,IAAIe,kBAA0B;EAC5B,MAAM,OAAO,KAAK,aAAa,GAAG,KAAK,YAAY,eAAe,KAAK;EACvE,OAAO,KAAK,aAAa,YAAY,GAAG,KAAK,YAAY;CAC3D;CAEA,SAAkB;EAChB,MAAM,aAAa,KAAKC,mBAAmB;EAC3C,OAAO,IAAI;;;eAGA,KAAKC,SAAS;eACd,KAAKC,aAAa;qBACZ,KAAKC,eAAe;iBACxB,KAAKC,WAAW;eAClB,KAAKC,SAAS;;cAEf,KAAKN,gBAAgB;;0BAET,KAAKO,cAAc;QACrC,aACE,IAAI,iCAAiC,WAAW,WAChD,QAAQ;;CAEhB;CAEA;CAQA,eAAwB;EACtB,KAAK,eAAe,WAAW;GAC7B,IAAI,KAAKxB,OAAO,SAAS,GACvB,KAAKC,qBAAqB;EAE9B,CAAC;CACH;CAEA,QAAiB,mBAAyC;EACxD,MAAM,QAAQ,iBAAiB;EAC/B,KAAK,UAAU,OAAO,cAAc,KAAK,UAAU;EACnD,IAAI,kBAAkB,IAAI,UAAU,GAClC,KAAK,gBAAgB,aAAa,KAAK,aAAa,KAAK;CAE7D;CAEA,uBAAuB;EACrB,KAAK,MAAM,QAAQ,KAAKD,QAAQ;GAC9B,KAAK,MAAM,YAAY,4BAA4B,aAAa;GAChE,KAAK,MAAM,YAAY,yBAAyB,aAAa;GAC7D,KAAK,MAAM,YAAY,0BAA0B,aAAa;GAC9D,KAAK,MAAM,YAAY,2BAA2B,aAAa;GAE/D,IAAI,KAAK,aAAa,UAAU,GAAG;IACjC,IAAI,KAAK,gBAAgB,gBAAgB,CAAC,KAAK,MAC7C,KAAK,MAAM,YAAY,4BAA4B,eAAe;SAC7D,IAAI,KAAK,gBAAgB,gBAAgB,KAAK,MACnD,KAAK,MAAM,YAAY,yBAAyB,eAAe;SAC1D,IAAI,KAAKE,eAAe,CAAC,KAAK,MACnC,KAAK,MAAM,YAAY,2BAA2B,eAAe;SAC5D,IAAI,KAAKA,eAAe,KAAK,MAClC,KAAK,MAAM,YAAY,0BAA0B,eAAe;GAEpE;EACF;CACF;CAEA;CAkBA;;;;;;;;;;;CAoBA;CA2BA,qBAAqB;EACnB,KAAK,MAAM,MAAM,KAAKF,QACpB,IAAI,KAAKyB,YAAY,EAAE,GACrB,OAAO;EAIX,MAAM,OAAO,KAAK,YAAY,cAAc,MAAM;EAClD,IAAI,MAAM;GACR,MAAM,MAAO,KAAyB,iBAAiB,EAAE,SAAS,KAAK,CAAC;GACxE,KAAK,MAAM,MAAM,KACf,IAAI,KAAKA,YAAY,EAAiB,GACpC,OAAO;EAEb;CACF;CAEA,YAAY,IAAiB;EAE3B,IADU,GAAG,aAAa,UACtB,MAAM,MACR,OAAO;EACT,OAAQ,GAAG,aAAa,UAAU;CACpC;CAEA,cAAc,IAAiB;EAC7B,MAAM,WAAW,KAAK,mBAAmB;EACzC,IAAI,UAAU;GACZ,SAAS,gBAAgB,UAAU;GACnC,SAAS,MAAM,YAAY,4BAA4B,aAAa;GACpE,SAAS,MAAM,YAAY,yBAAyB,aAAa;GACjE,SAAS,MAAM,YAAY,0BAA0B,aAAa;GAClE,SAAS,MAAM,YAAY,2BAA2B,aAAa;EACrE;EAEA,GAAG,aAAa,YAAY,EAAE;EAE9B,IAAI,KAAK,gBAAgB,gBAAgB,CAAC,KAAK,MAC7C,GAAG,MAAM,YAAY,4BAA4B,eAAe;OAC3D,IAAI,KAAK,gBAAgB,gBAAgB,KAAK,MACnD,GAAG,MAAM,YAAY,yBAAyB,eAAe;OACxD,IAAI,KAAKvB,eAAe,CAAC,KAAK,MACnC,GAAG,MAAM,YAAY,2BAA2B,eAAe;OAC1D,IAAI,KAAKA,eAAe,KAAK,MAClC,GAAG,MAAM,YAAY,0BAA0B,eAAe;CAElE;CAEA,cAAc;EACZ,IAAI,QAAQ;EACZ,KAAK,MAAM,MAAM,KAAKF,QACpB,IAAI,KAAKyB,YAAY,EAAE,KAAK,CAAC,OAC3B,QAAQ;OACH,IAAI,OAAO;GAChB,KAAK,cAAc,EAAE;GACrB;EACF;CAEJ;CAEA,kBAAkB;EAChB,IAAI;EACJ,KAAK,MAAM,MAAM,KAAKzB,QACpB,IAAI,KAAKyB,YAAY,EAAE,KAAK,MAC1B,KAAK,cAAc,IAAI;OAEvB,OAAO;CAGb;CAEA;;;;;;CAkCA,gBAAgB,OAAgD;EAC9D,IAAI,KAAK,aAAa,OACpB,OAAO;EAET,MAAM,OAAO,MAAM,aAAa;EAChC,IAAI,OAAkC;EACtC,KAAK,MAAM,QAAQ,MAAM;GACvB,IAAI,EAAE,gBAAgB,cACpB;GACF,IAAI,KAAK,UAAU,SAAS,WAAW,KAAK,KAAK,UAAU,SAAS,SAAS,GAC3E,OAAO;GAET,IAAI,CAAC,QAAQ,KAAK,YAAY,sBAC5B,OAAO;EAEX;EACA,OAAO;CACT;CAEA;CAsCA;CAwBA;CAYA;CAQA,WAAW,OAA2B;EACpC,MAAM,QAAQ,KAAKpB;EACnB,IAAI,CAAC,SAAS,MAAM,QAClB;EAIF,IAAI;GACF,KAAKG,cAAc,kBAAkB,MAAM,SAAS;EACtD,QAAQ,CAGR;EAEA,MAAM,SAAS;EACf,MAAM,OAAO,aAAa,eAAe,EAAE;EAE3C,MAAM,QAAQ,KAAKkB,aAAa,MAAM,MAAM;EAC5C,IAAI,MAAM,OACR,MAAM,MAAM,KAAK,MAAM,SAAS,MAAM,OAAO;CAEjD;CAEA,aAAmB;EACjB,MAAM,QAAQ,KAAKrB;EACnB,IAAI,CAAC,OACH;EACF,MAAM,OAAO,gBAAgB,aAAa;EAC1C,IAAI,MAAM,aAAa,KAAA,GAAW;GAChC,MAAM,WAAW,KAAA;GACjB,KAAK,cAAc;EACrB;CAGF;CAEA,SAAS,WAAyB;EAChC,MAAM,QAAQ,KAAKA;EACnB,IAAI,CAAC,OACH;EAEF,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ;EACd,KAAKA,aAAa;EAElB,OAAO,oBAAoB,eAAe,KAAKM,cAAc;EAC7D,OAAO,oBAAoB,aAAa,KAAKC,YAAY;EACzD,OAAO,oBAAoB,iBAAiB,KAAKC,gBAAgB;EAEjE,IAAI;GACF,KAAKL,cAAc,sBAAsB,SAAS;EACpD,QAAQ,CAAyB;EAMjC,KAAK,cAAc;CACrB;CAEA,YAAY,QAA4B,WAAmB,UAAoC;EAC7F,OAAO,gBAAgB,aAAa;EAMpC,MAAM,WAAW,KAAKR,OAAO,QAAO,OAAM,OAAO,MAAM;EACvD,MAAM,SAAS,aAAa,KAAA,IACxB,SAAS,SACT,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,SAAS,MAAM,CAAC;EAEnD,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QACH;EAEF,MAAM,MAAM,SAAS,WAAW;EAChC,OAAO,aAAa,QAAQ,GAAG;EAE/B,MAAM,UAAU,MAAM,UAAU,QAAQ,KAAK,OAAO,UAAU,MAAM;EACpE,IAAI,YAAY,WAGd;EAKF,KAAKA,UAAU,KAAK,YAAY,cAAc,MAAM,EAAA,EAChD,iBAAiB,EAAE,SAAS,KAAK,CAAC,KAA6B,CAAC;EACpE,KAAKC,qBAAqB;EAK1B,KAAKQ,qBAAqB;EAE1B,KAAK,cAAc,IAAI,YAAkC,WAAW;GAClE,SAAS;GACT,QAAQ;IACN,IAAI,OAAO;IACX;IACA;GACF;EACF,CAAC,CAAC;CACJ;CAEA,aAAa,QAA8C;EACzD,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,MAAM,UAAU;EACxB,QAAQ,MAAM,aAAa;EAC3B,QAAQ,MAAM,MAAM;EACpB,QAAQ,MAAM,WAAW;EAEzB,MAAM,WAAW,OAAO;EACxB,IAAI,UAAU;GACZ,MAAM,OAAO,SAAS,cAAc,WAAW;GAC/C,KAAK,OAAO;GACZ,QAAQ,YAAY,IAAI;EAC1B;EAMA,MAAM,QAAQ,SAAS,cAAc,MAAM;EAC3C,MAAM,eAAe,OAAO,eAAe,GAAA,CAAI,KAAK;EACpD,MAAM,MAAM,WAAW;EACvB,MAAM,MAAM,eAAe;EAC3B,MAAM,MAAM,aAAa;EACzB,QAAQ,YAAY,KAAK;EAEzB,IAAI;GACF,OAAO,gBAAgB;IAAE,QAAQ;IAAQ;GAAQ,CAAC;EACpD,QAAQ;GACN,OAAO;EACT;CACF;;;;;;;;CASA,iBAAiB,SAAiB,SAAqC;EACrE,MAAM,QAAQ,KAAKJ;EACnB,IAAI,CAAC,OACH,OAAO,KAAA;EACT,MAAM,WAAW,KAAKL,OAAO,QAAO,OAAM,OAAO,MAAM,MAAM;EAC7D,IAAI,SAAS,WAAW,GACtB,OAAO;EAET,MAAM,OAAO,CAAC,KAAKE;EAEnB,IAAI,UAAU;EACd,IAAI,WAAW;EAMf,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;GACxC,MAAM,OAAO,SAAS,EAAE,CAAC,sBAAsB;GAC/C,MAAM,QAAQ,OAAO,KAAK,OAAO,KAAK;GACtC,MAAM,MAAM,OAAO,KAAK,QAAQ,KAAK;GACrC,MAAM,OAAO,QAAQ,OAAO;GAC5B,MAAM,MAAM,OAAO,UAAU;GAI7B,MAAM,SAAS,KAAK,IAAI,MAAM,KAAK;GACtB,KAAK,IAAI,MAAM,GAAG;GAC/B,MAAM,OAAO,KAAK,IAAI,MAAM,GAAG;GAK/B,IADqB,MAAM,KAGrB;QAAA,SAAS,UAAU;KACrB,WAAW;KACX,UAAU;IACZ;UAGA,IAAI,OAAO,UAAU;IACnB,WAAW;IACX,UAAU,IAAI;GAChB;EAKJ;EAEA,OAAO;CACT;CAEA,qBAAyC;EACvC,MAAM,QAAQ,KAAKG;EACnB,IAAI,CAAC,OAAO,UAAU,MAAM,aAAa,KAAA,GACvC,OAAO,KAAA;EAET,MAAM,WAAW,KAAKL,OAAO,QAAO,OAAM,OAAO,MAAM,MAAM;EAC7D,IAAI,SAAS,WAAW,GACtB,OAAO,KAAA;EAET,MAAM,OAAO,CAAC,KAAKE;EACnB,MAAM,gBAAgB,KAAKM,cAAc,sBAAsB;EAC/D,IAAI,CAAC,eACH,OAAO,KAAA;EAET,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,UAAU,SAAS,MAAM,CAAC;EACjE,IAAI,OAAuB;EAC3B,IAAI,MAAM,SAAS,QACjB,OAAO,SAAS,IAAI,CAAC,sBAAsB;OAI3C,OADa,SAAS,SAAS,SAAS,EAAE,CAAC,sBACjC;EAGZ,IAAI,MAAM;GACR,MAAM,KAAK,MAAM,SAAS,SAAS,KAAK,OAAO,KAAK,SAAS,cAAc;GAC3E,MAAM,IAAI;GACV,MAAM,IAAI,cAAc;GACxB,MAAM,IAAI;GACV,OAAO,wBAAwB,IAAI,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE;EACnF,OAAO;GACL,MAAM,KAAK,MAAM,SAAS,SAAS,KAAK,MAAM,KAAK,UAAU,cAAc;GAC3E,MAAM,IAAI;GACV,MAAM,IAAI,cAAc;GACxB,MAAM,IAAI;GACV,OAAO,wBAAwB,EAAE,MAAM,IAAI,IAAI,EAAE,cAAc,EAAE,cAAc,EAAE;EACnF;CACF;CAEA,IAAIA,eAAmC;EACrC,OAAO,KAAK,YAAY,eAAe,WAAW,KAAK;CACzD;;EAEgB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFnC;;AACH;AAhsBG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,eAAA,WAAA,cAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAXnDmB,iBAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,cAAA"}

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { n as TabListChangeEvent, r as TabListElement, t as TabListChangeDetail } from "./tab-list-DLzb-m-I.js";
-export { TabListChangeDetail, TabListChangeEvent, TabListElement };
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
+export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };