@ixfx/components 0.14.7 → 0.15.1

package/dist/tab-list-R_bGbDvO.js

@@ -0,0 +1,766 @@
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
+import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/tabs/indicator-transition.ts
+/**
+* Smoothstep, 3t² − 2t³, expressed exactly as a cubic Bézier: control points
+* at x = 1/3 and 2/3 make x linear in the curve parameter, leaving y as the
+* smoothstep polynomial.
+*/
+const SMOOTHSTEP = `cubic-bezier(0.3333, 0, 0.6667, 1)`;
+let counter = 0;
+/** A document-unique `view-transition-name` for one tab list's indicator. */
+function nextIndicatorName() {
+	counter += 1;
+	return `ixfx-tab-indicator-${counter}`;
+}
+/**
+* Read the transition settings from an element's computed style. Returns
+* undefined when transitions are off (`--ixfx-tab-transition-duration` unset
+* or zero), unsupported by the browser, or the user prefers reduced motion.
+*/
+function readTiming(el) {
+	if (!(`startViewTransition` in document)) return void 0;
+	if (globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches) return void 0;
+	const style = getComputedStyle(el);
+	const duration = style.getPropertyValue(`--ixfx-tab-transition-duration`).trim();
+	if (!(Number.parseFloat(duration) > 0)) return void 0;
+	return {
+		duration,
+		easing: style.getPropertyValue(`--ixfx-tab-transition-easing`).trim() || SMOOTHSTEP
+	};
+}
+const baseRule = `ixfx-tab-list-item[selected]::after { view-transition-name: var(--ixfx-tab-indicator-name, none); }`;
+const rules = /* @__PURE__ */ new Map();
+let sheet;
+function writeSheet() {
+	if (sheet === void 0) {
+		sheet = new CSSStyleSheet();
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+	}
+	sheet.replaceSync([baseRule, ...rules.values()].join(`\n`));
+}
+/** Install the document-level indicator rule. Safe to call repeatedly. */
+function installIndicatorStyles() {
+	if (sheet === void 0) writeSheet();
+}
+function applyTiming(name, timing) {
+	rules.set(name, `::view-transition-group(${name}) { animation-duration: ${timing.duration}; animation-timing-function: ${timing.easing}; }`);
+	writeSheet();
+}
+/**
+* Run `update` (which must change the DOM synchronously) inside a view
+* transition. The update itself is deferred by the browser until the old
+* state has been captured.
+*/
+function runTransition(name, timing, update) {
+	applyTiming(name, timing);
+	return document.startViewTransition(update);
+}
+//#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.hideLabels = false;
+		this.labelNogrow = false;
+		this.shrink = false;
+		this.dragMode = `off`;
+		this.#items = [];
+		this.#indicatorName = nextIndicatorName();
+		this.#dragState = null;
+		this.#suppressNextClick = false;
+		this.#onSlotChange = () => {
+			this.updateComplete.then(() => {
+				this.#refreshItems();
+				this.#syncIndicatorColors();
+				this.#syncHideLabels();
+				this.#syncLabelNogrow();
+			});
+		};
+		this.#onToolbarSlotChange = () => {
+			const assigned = (this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.assignedElements() ?? [];
+			const has = assigned.length > 0;
+			this.toggleAttribute(`has-toolbar`, has);
+			const toolbarDiv = this.shadowRoot?.querySelector(`.list-toolbar`);
+			if (toolbarDiv) toolbarDiv.hidden = !has;
+			if (has) {
+				const toolbar = assigned[0];
+				if (toolbar?.tagName === `IXFX-TOOLBAR`) requestAnimationFrame(() => {
+					toolbar?._scheduleMeasure?.();
+				});
+			}
+		};
+		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;
+				el.scrollLeft = el.scrollLeft + event.deltaY;
+				event.preventDefault();
+			} else {
+				if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight) return;
+				el.scrollTop = el.scrollTop + event.deltaX;
+				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();
+			const forId = t.getAttribute(`for`);
+			const previousId = previous?.id;
+			const apply = () => {
+				this.selectElement(t);
+				this.dispatchEvent(new CustomEvent(`change`, {
+					bubbles: true,
+					detail: {
+						previous: previousId,
+						selected: t.id,
+						for: forId ?? ``
+					}
+				}));
+			};
+			if (previous === t) apply();
+			else this.#transition(apply);
+		};
+		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.#pendingMove = null;
+		this.#moveRaf = null;
+		this.#onPointerMove = (event) => {
+			const state = this.#dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			this.#pendingMove = event;
+			this.#moveRaf ??= requestAnimationFrame(this.#flushMove);
+		};
+		this.#flushMove = () => {
+			const event = this.#pendingMove;
+			this.#pendingMove = null;
+			this.#moveRaf = null;
+			const state = this.#dragState;
+			if (!state || !event) 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;
+	#indicatorName;
+	#dragState;
+	#suppressNextClick;
+	get #isVertical() {
+		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
+	}
+	get #containerClass() {
+		return [
+			this.scrollable ? `${this.orientation} scrollable` : this.orientation,
+			this.scrollable ? this.#isVertical ? `scroll-fade-y` : `scroll-fade-x` : ``,
+			this.dragMode === `reorder` ? `reorder` : ``
+		].filter(Boolean).join(` `);
+	}
+	render() {
+		const caretStyle = this.#computeCaretStyle();
+		return html`
+    <div class="outer ${this.orientation}">
+      <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>
+      <div class="list-toolbar ${this.orientation}" part="list-toolbar">
+        <slot name="toolbar" @slotchange=${this.#onToolbarSlotChange}></slot>
+      </div>
+    </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(() => {
+			this.#refreshItems();
+			this.#syncIndicatorColors();
+			this.#syncHideLabels();
+			this.#syncLabelNogrow();
+			this.#onToolbarSlotChange();
+		});
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		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();
+		if (changedProperties.has(`orientation`) || changedProperties.has(`flip`)) for (const item of this.#items) item.setAttribute(`indicator-edge`, this.#indicatorEdge);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		installIndicatorStyles();
+	}
+	/**
+	* Run a selection change inside a view transition when the page opted in
+	* via `--ixfx-tab-transition-duration`. The browser defers `update`, so only
+	* user-initiated changes (click, arrow keys) use this; the public
+	* `selectElement` stays synchronous.
+	*/
+	#transition(update) {
+		const timing = readTiming(this);
+		if (timing === void 0) {
+			update();
+			return;
+		}
+		this.style.setProperty(`--ixfx-tab-indicator-name`, this.#indicatorName);
+		const transition = runTransition(this.#indicatorName, timing, update);
+		const clear = () => this.style.removeProperty(`--ixfx-tab-indicator-name`);
+		transition.finished.then(clear, clear);
+	}
+	#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`);
+	}
+	get #indicatorEdge() {
+		if (this.#isVertical) return this.flip ? `left` : `right`;
+		return this.flip ? `top` : `bottom`;
+	}
+	#syncIndicatorColors() {
+		for (const item of this.#items) {
+			item.setAttribute(`indicator-edge`, this.#indicatorEdge);
+			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.#transition(() => this.selectElement(el));
+			break;
+		}
+	}
+	#selectPrevious() {
+		let prev;
+		for (const el of this.#items) if (this.#isSelected(el) && prev) {
+			const target = prev;
+			this.#transition(() => this.selectElement(target));
+		} 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;
+	#pendingMove;
+	#moveRaf;
+	#onPointerMove;
+	#cancelPendingMove() {
+		if (this.#moveRaf !== null) {
+			cancelAnimationFrame(this.#moveRaf);
+			this.#moveRaf = null;
+		}
+		this.#pendingMove = null;
+	}
+	#flushMove;
+	#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;
+		this.#cancelPendingMove();
+		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,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			css`
+  :host {
+      display: inline-block;
+      --activated-colour: var(--accent);
+      --colour: var(--surface-3-text);
+      --scroll-max-height: 200px;
+      --allow-overflow: hidden;
+      color: var(--colour);
+      border: var(--border, none);
+      border-color: var(--surface-5);
+      border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
+
+    }
+    :host(.scrollable) {
+      max-height: var(--scroll-max-height);
+    }
+    :host([hide-labels]) {
+      display: inline-flex;
+      width: auto;
+    }
+    text {
+      user-select:none;
+    }
+    .outer {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      gap: var(--space-s);
+      align-items: stretch;
+      box-sizing: border-box;
+    }
+    .outer.horizontal {
+      flex-direction: row;
+      align-items: center;
+    }
+    .outer.vertical-stack,
+    .outer.vertical-side {
+      flex-direction: column;
+    }
+    .list-toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      flex: 0 0 auto;
+      width: max-content;
+      max-width: 50%;
+      overflow: visible;
+    }
+    .list-toolbar.horizontal ::slotted(*:not(ixfx-toolbar)) {
+      margin-left: auto;
+    }
+    .list-toolbar[hidden] {
+      display: none !important;
+    }
+    .list-toolbar[hidden] {
+      display: none !important;
+    }
+    ::slotted(ixfx-toolbar) {
+      --toolbar-bg: transparent;
+      --toolbar-border: none;
+      --toolbar-padding: 0;
+      width: max-content;
+      max-width: 100%;
+      min-width: 150px;
+      flex-shrink: 0;
+    }
+    #container {
+      display:flex;
+      position: relative;
+      flex: 1 1 0%;
+      min-width: 0;
+      min-height: 0;
+    }
+    .outer.vertical-stack #container,
+    .outer.vertical-side #container {
+      flex: 1 1 auto;
+      height: 100%;
+    }
+    #container.horizontal {
+      flex-direction: row;
+      overflow: hidden;
+    }
+    #container.horizontal.scrollable {
+      overflow-x: scroll;
+      --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.horizontal.scrollable::-webkit-scrollbar {
+      display: none;
+    }
+    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
+      flex-shrink: 0;
+    }
+    #container.vertical-stack {
+      flex-direction: column;
+      height: 100%;
+    }
+    #container.vertical-stack.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-stack.scrollable {
+      overflow-y: scroll;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.vertical-stack.scrollable::-webkit-scrollbar {
+      display: none;
+    }
+    #container.vertical-side {
+      flex-direction: column;
+      height: 100%;
+    }
+    #container.vertical-side.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-side.scrollable {
+      overflow-y: scroll;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.vertical-side.scrollable::-webkit-scrollbar {
+      display: none;
+    }
+
+    ::slotted(ixfx-tab-list-item) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    :host([shrink]) ::slotted(ixfx-tab-list-item) {
+      flex: 0 0 auto;
+    }
+
+    #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: 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
+})], TabListElement.prototype, "shrink", 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 };