@ixfx/components 0.14.7 → 0.15.1

package/dist/tabs.d.ts

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

package/dist/tabs.js

@@ -1,674 +1,2 @@
-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/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.#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();
-			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.#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;
-	#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();
-	}
-	#syncHideLabels() {
-		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
-		else item.removeAttribute(`hide-labels`);
-	}
-	#syncLabelNogrow() {
-		for (const item of this.#items) if (this.labelNogrow) item.setAttribute(`label-nogrow`, ``);
-		else item.removeAttribute(`label-nogrow`);
-	}
-	#syncIndicatorColors() {
-		for (const item of this.#items) {
-			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
-			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;
-	#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
+import { t as TabListElement } from "./tab-list-R_bGbDvO.js";
 export { TabListElement };

package/docs-user/button.md

@@ -27,6 +27,7 @@ Three related button components:
 | `icon`              | string  | —       | Registered icon name **or** raw `<svg>` string     |
 | `hide-icon`         | boolean | `false` | Hides the icon even when `icon` is set             |
 | `hide-label`        | boolean | `false` | Hides the text label (useful for icon-only buttons)|
+| `type`              | `'button' \| 'submit' \| 'reset'` | `'button'` | Inside a `<form>` (including `ixfx-form`), `submit` submits it (after validation) and `reset` resets it. The button is form-associated, so this works even though its inner `<button>` is in a shadow root |
 | `subtle`            | boolean | `false` | Renders the background at 40% opacity, raised to 70% on hover/focus |
 
 ### Slots