@ixfx/components 0.6.2 → 0.7.0

package/dist/split-layout.js

@@ -1,618 +1,2 @@
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { clamp } from "@ixfx/numbers";
-//#region src/split-layout/split-layout.ts
-let SplitLayoutElement = class SplitLayoutElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.layout = `vertical`;
-		this.sizeA = ``;
-		this.sizeB = ``;
-		this.fixedA = false;
-		this.fixedB = false;
-		this.collapsible = false;
-		this.collapsedA = false;
-		this.collapsedB = false;
-		this.minSizeA = ``;
-		this.maxSizeA = ``;
-		this.minSizeB = ``;
-		this.maxSizeB = ``;
-		this._hasCorner = false;
-		this.#startSizeA = ``;
-		this.#startSizeB = ``;
-		this.#cornerStartX = 0;
-		this.#cornerStartY = 0;
-		this.#nestedSplitInitialSizeA = ``;
-		this.#pendingNestedUpdate = null;
-		this.#hysteresisThreshold = .1;
-		this.#onResizeHandleDown = (event) => {
-			event.preventDefault();
-			const zoneEl = this.getZone();
-			if (zoneEl) zoneEl.classList.add(`user-resizing`);
-			this.#elementBounds = this.getBoundingClientRect();
-			this.#startSizeA = this.sizeA;
-			this.#startSizeB = this.sizeB;
-			window.addEventListener(`pointerup`, this.#onResizeHandleUp);
-			window.addEventListener(`pointermove`, this.#onResizeHandleMove);
-		};
-		this.#onResizeHandleUp = (event) => {
-			event.preventDefault();
-			const zoneEl = this.getZone();
-			if (zoneEl) zoneEl.classList.remove(`user-resizing`);
-			window.removeEventListener(`pointerup`, this.#onResizeHandleUp);
-			window.removeEventListener(`pointermove`, this.#onResizeHandleMove);
-		};
-		this.#onResizeHandleMove = (event) => {
-			const bounds = this.#elementBounds;
-			if (!bounds) return;
-			const threshold = 5;
-			if (this.layout === `horizontal`) {
-				const y = event.y - bounds.y;
-				const relativeY = clamp(y / bounds.height);
-				if (this.collapsible && this.collapsedA) {
-					if (relativeY > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
-						this.collapsedA = false;
-						this.#dispatchCollapsedEvent(`A`, false);
-						this.#collapsedAPointerAtCollapse = void 0;
-						const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
-						this.sizeA = sizeA;
-						this.sizeB = sizeB;
-					}
-				} else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {
-					this.collapsedA = true;
-					this.#dispatchCollapsedEvent(`A`, true);
-					this.sizeA = `0px`;
-					this.sizeB = `100%`;
-					this.#collapsedAPointerAtCollapse = relativeY;
-				} else if (!this.collapsedA) {
-					const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
-					this.sizeA = sizeA;
-					this.sizeB = sizeB;
-				}
-				if (this.collapsible && this.collapsedB) {
-					if (relativeY < (this.#collapsedBPointerAtCollapse ?? .95) - this.#hysteresisThreshold) {
-						this.collapsedB = false;
-						this.#dispatchCollapsedEvent(`B`, false);
-						this.#collapsedBPointerAtCollapse = void 0;
-						const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
-						this.sizeA = sizeA;
-						this.sizeB = sizeB;
-					}
-				} else if (this.collapsible && !this.collapsedB && relativeY > 1 - threshold / bounds.height) {
-					this.collapsedB = true;
-					this.#dispatchCollapsedEvent(`B`, true);
-					this.sizeA = `100%`;
-					this.sizeB = `0px`;
-					this.#collapsedBPointerAtCollapse = relativeY;
-				}
-			} else {
-				const x = event.x - bounds.x;
-				const relativeX = clamp(x / bounds.width);
-				if (this.collapsible && this.collapsedA) {
-					if (relativeX > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
-						this.collapsedA = false;
-						this.#dispatchCollapsedEvent(`A`, false);
-						this.#collapsedAPointerAtCollapse = void 0;
-						const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
-						this.sizeA = sizeA;
-						this.sizeB = sizeB;
-					}
-				} else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {
-					this.collapsedA = true;
-					this.#dispatchCollapsedEvent(`A`, true);
-					this.sizeA = `0px`;
-					this.sizeB = `100%`;
-					this.#collapsedAPointerAtCollapse = relativeX;
-				} else if (!this.collapsedA) {
-					const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
-					this.sizeA = sizeA;
-					this.sizeB = sizeB;
-				}
-				if (this.collapsible && this.collapsedB) {
-					if (relativeX < (this.#collapsedBPointerAtCollapse ?? .95) - this.#hysteresisThreshold) {
-						this.collapsedB = false;
-						this.#dispatchCollapsedEvent(`B`, false);
-						this.#collapsedBPointerAtCollapse = void 0;
-						const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
-						this.sizeA = sizeA;
-						this.sizeB = sizeB;
-					}
-				} else if (this.collapsible && !this.collapsedB && relativeX > 1 - threshold / bounds.width) {
-					this.collapsedB = true;
-					this.#dispatchCollapsedEvent(`B`, true);
-					this.sizeA = `100%`;
-					this.sizeB = `0px`;
-					this.#collapsedBPointerAtCollapse = relativeX;
-				}
-			}
-			event.preventDefault();
-		};
-		this.#onCornerResizeDown = (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			const zoneEl = this.getZone();
-			if (zoneEl) zoneEl.classList.add(`user-resizing`);
-			this.#elementBounds = this.getBoundingClientRect();
-			this.#cornerStartX = event.clientX;
-			this.#cornerStartY = event.clientY;
-			this.#startSizeA = this.sizeA;
-			this.#startSizeB = this.sizeB;
-			const nestedSplit = this.#getNestedSplit();
-			if (nestedSplit) {
-				this.#nestedSplitInitialSizeA = nestedSplit.sizeA;
-				const nestedBounds = nestedSplit.getBoundingClientRect();
-				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.split-bar`);
-				if (nestedHandle) {
-					this.#nestedSplitBounds = nestedBounds;
-					this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();
-				}
-				const nestedZoneEl = nestedSplit.getZone();
-				if (nestedZoneEl) nestedZoneEl.classList.add(`user-resizing`);
-			}
-			window.addEventListener(`pointerup`, this.#onCornerResizeUp);
-			window.addEventListener(`pointermove`, this.#onCornerResizeMove);
-		};
-		this.#onCornerResizeUp = (event) => {
-			event.preventDefault();
-			const zoneEl = this.getZone();
-			if (zoneEl) zoneEl.classList.remove(`user-resizing`);
-			const nestedSplit = this.#getNestedSplit();
-			if (nestedSplit) {
-				const nestedZoneEl = nestedSplit.getZone();
-				if (nestedZoneEl) nestedZoneEl.classList.remove(`user-resizing`);
-			}
-			window.removeEventListener(`pointerup`, this.#onCornerResizeUp);
-			window.removeEventListener(`pointermove`, this.#onCornerResizeMove);
-		};
-		this.#onCornerResizeMove = (event) => {
-			const outerBounds = this.#elementBounds;
-			const zoneEl = this.getZone();
-			const nestedSplit = this.#getNestedSplit();
-			if (!outerBounds || !zoneEl || !nestedSplit) return;
-			const zoneBounds = zoneEl.getBoundingClientRect();
-			const cursorZoneLocalX = event.clientX - zoneBounds.left;
-			const cursorZoneLocalY = event.clientY - zoneBounds.top;
-			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
-				let newOuterFraction = cursorZoneLocalX / outerBounds.width;
-				const newNestedFraction = cursorZoneLocalY / outerBounds.height;
-				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.width);
-				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);
-				this.sizeA = constrainedA;
-				this.sizeB = constrainedB;
-				this.#pendingNestedUpdate = {
-					sizeA: newNestedFraction,
-					sizeB: 1 - newNestedFraction
-				};
-				requestAnimationFrame(() => this.#applyPendingNestedUpdate());
-				const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
-				if (cornerZone) {
-					cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
-					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
-				}
-			} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
-				const newNestedFraction = cursorZoneLocalX / outerBounds.width;
-				let newOuterFraction = cursorZoneLocalY / outerBounds.height;
-				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.height);
-				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);
-				this.sizeA = constrainedA;
-				this.sizeB = constrainedB;
-				this.#pendingNestedUpdate = {
-					sizeA: newNestedFraction,
-					sizeB: 1 - newNestedFraction
-				};
-				requestAnimationFrame(() => this.#applyPendingNestedUpdate());
-				const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
-				if (cornerZone) {
-					cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
-					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
-				}
-			}
-			event.preventDefault();
-		};
-	}
-	get showGrabHandle() {
-		const size = getComputedStyle(this).getPropertyValue(`--handle-size`).trim();
-		const num = Number.parseFloat(size);
-		return !Number.isNaN(num) && num > 3;
-	}
-	#elementBounds;
-	#startSizeA;
-	#startSizeB;
-	#cornerStartX;
-	#cornerStartY;
-	#nestedSplitInitialSizeA;
-	#cornerZone;
-	#nestedSplit;
-	#nestedSplitBounds;
-	#nestedHandleBounds;
-	#observer;
-	#pendingNestedUpdate;
-	#collapsedAPointerAtCollapse;
-	#collapsedBPointerAtCollapse;
-	#hysteresisThreshold;
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#observer?.disconnect();
-	}
-	firstUpdated() {
-		this.#setupNestedSplitObserver();
-	}
-	updated(changedProperties) {
-		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`) || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) this.#updateCornerPosition();
-		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) this.#updateDataCollapsed();
-	}
-	#updateDataCollapsed() {
-		if (this.collapsedA) this.setAttribute(`data-collapsed-a`, ``);
-		else this.removeAttribute(`data-collapsed-a`);
-		if (this.collapsedB) this.setAttribute(`data-collapsed-b`, ``);
-		else this.removeAttribute(`data-collapsed-b`);
-	}
-	#dispatchCollapsedEvent(panel, collapsed) {
-		this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {
-			detail: {
-				panel,
-				collapsed
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#setupNestedSplitObserver() {
-		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
-		if (!slotA) return;
-		this.#observer = new MutationObserver(() => {
-			this.#checkForNestedSplit();
-		});
-		this.#observer.observe(slotA, {
-			characterData: true,
-			childList: true,
-			subtree: true
-		});
-		this.#checkForNestedSplit();
-	}
-	#checkForNestedSplit() {
-		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
-		if (!slotA) return;
-		const assignedElements = slotA.assignedElements();
-		const findNestedSplit = (elements) => {
-			for (const el of elements) {
-				if (el.tagName === `IXFX-SPLIT-LAYOUT`) return el;
-				const nested = findNestedSplit(Array.from(el.children));
-				if (nested) return nested;
-			}
-		};
-		const nestedSplit = findNestedSplit(assignedElements);
-		if (nestedSplit) {
-			this.#nestedSplit = nestedSplit;
-			this._hasCorner = true;
-			requestAnimationFrame(() => this.#updateCornerPosition());
-		} else {
-			this.#nestedSplit = void 0;
-			this._hasCorner = false;
-		}
-	}
-	#getNestedSplit() {
-		if (this.#nestedSplit) return this.#nestedSplit;
-		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
-		if (!slotA) return void 0;
-		return slotA.assignedElements().find((el) => el.tagName === `IXFX-SPLIT-LAYOUT`);
-	}
-	#parseSizeAsFraction(size, total) {
-		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``)) / total;
-		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100;
-		return .5;
-	}
-	#parseSizeToPx(size, total) {
-		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``));
-		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100 * total;
-		return null;
-	}
-	#applyConstraints(sizeA, sizeB, total) {
-		let fractionA = this.#parseSizeAsFraction(sizeA, total);
-		let fractionB = this.#parseSizeAsFraction(sizeB, total);
-		const minA = this.#minSizeToFraction(this.minSizeA, total);
-		const minB = this.#minSizeToFraction(this.minSizeB, total);
-		const maxA = this.#maxSizeToFraction(this.maxSizeA, total);
-		const maxB = this.#maxSizeToFraction(this.maxSizeB, total);
-		if (minA !== null || minB !== null) {
-			const minSum = (minA ?? 0) + (minB ?? 0);
-			if (minSum > 1) {
-				const scale = 1 / minSum;
-				if (minA !== null) minA !== null ? fractionA = minA * scale : fractionA = 0;
-				if (minB !== null) minB !== null ? fractionB = minB * scale : fractionB = 0;
-			}
-			if (fractionA < (minA ?? 0)) fractionA = minA ?? 0;
-			if (fractionB < (minB ?? 0)) fractionB = minB ?? 0;
-		}
-		if (maxA !== null) {
-			if (fractionA > maxA) fractionA = maxA;
-		}
-		if (maxB !== null) {
-			if (fractionB > maxB) fractionB = maxB;
-		}
-		fractionB = 1 - fractionA;
-		const isPercentA = !this.sizeA.endsWith(`px`);
-		this.sizeB.endsWith(`px`);
-		if (isPercentA) return {
-			sizeA: `${fractionA * 100}%`,
-			sizeB: `${fractionB * 100}%`
-		};
-		else return {
-			sizeA: `${fractionA * total}px`,
-			sizeB: `${fractionB * total}px`
-		};
-	}
-	#minSizeToFraction(minSize, total) {
-		if (minSize.length === 0) return null;
-		const px = this.#parseSizeToPx(minSize, total);
-		if (px !== null) return px / total;
-		if (minSize.endsWith(`%`)) return Number.parseFloat(minSize.replace(`%`, ``)) / 100;
-		return null;
-	}
-	#maxSizeToFraction(maxSize, total) {
-		if (maxSize.length === 0) return null;
-		const px = this.#parseSizeToPx(maxSize, total);
-		if (px !== null) return px / total;
-		if (maxSize.endsWith(`%`)) return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;
-		return null;
-	}
-	#getIntersectionPoint() {
-		const outerBounds = this.getBoundingClientRect();
-		const zoneEl = this.getZone();
-		if (!zoneEl) return null;
-		const nestedSplit = this.#getNestedSplit();
-		if (!nestedSplit) return null;
-		zoneEl.getBoundingClientRect();
-		const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);
-		let x, y;
-		if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
-			x = outerFraction * outerBounds.width;
-			y = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height) * outerBounds.height;
-		} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
-			x = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width) * outerBounds.width;
-			y = outerFraction * outerBounds.height;
-		} else return null;
-		return {
-			x,
-			y
-		};
-	}
-	#updateCornerPosition() {
-		if (!this._hasCorner) return;
-		const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
-		if (!cornerZone) return;
-		if (!this.getZone()) return;
-		const intersection = this.#getIntersectionPoint();
-		if (!intersection) {
-			cornerZone.style.display = `none`;
-			return;
-		}
-		const cornerX = intersection.x - 6;
-		const cornerY = intersection.y - 6;
-		cornerZone.style.left = `${cornerX}px`;
-		cornerZone.style.top = `${cornerY}px`;
-		cornerZone.style.display = `block`;
-		const nestedSplit = this.#getNestedSplit();
-		if (nestedSplit) {
-			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) cornerZone.style.cursor = `nwse-resize`;
-			else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) cornerZone.style.cursor = `nesw-resize`;
-		}
-	}
-	getZone() {
-		if (!this.shadowRoot) return;
-		const el = this.shadowRoot.querySelector(`#zone`);
-		if (!el) return void 0;
-		return el;
-	}
-	#onResizeHandleDown;
-	#onResizeHandleUp;
-	#onResizeHandleMove;
-	#onCornerResizeDown;
-	#onCornerResizeUp;
-	#applyPendingNestedUpdate() {
-		if (!this.#pendingNestedUpdate) return;
-		const { sizeA, sizeB } = this.#pendingNestedUpdate;
-		const nested = this.#getNestedSplit();
-		if (nested) {
-			nested.sizeA = `${sizeA * 100}%`;
-			nested.sizeB = `${sizeB * 100}%`;
-		}
-		this.#pendingNestedUpdate = null;
-	}
-	#onCornerResizeMove;
-	render() {
-		const sizePrefix = this.layout === `vertical` ? `width` : `height`;
-		let sizeA = this.sizeA;
-		let sizeB = this.sizeB;
-		if (this.collapsedA) sizeA = `0px`;
-		else if (sizeA.length === 0 && sizeB.length === 0) sizeB = sizeA = `50%`;
-		else if (sizeA.length === 0) sizeA = `auto`;
-		else if (sizeB.length === 0) sizeB = `auto`;
-		if (this.collapsedB) sizeB = `0px`;
-		sizeA = `${sizePrefix}:${sizeA}`;
-		sizeB = `${sizePrefix}:${sizeB}`;
-		return html`
-    <div id="zone">
-      <slot style=${sizeA} name="a"></slot>
-      ${this._hasCorner ? html`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
-      <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
-        ${this.showGrabHandle ? html`
-          <div class="grab-handle">
-            <span class="dot"></span>
-            <span class="dot"></span>
-            <span class="dot"></span>
-          </div>
-        ` : ``}
-      </div>
-      <slot style=${sizeB} name="b"></slot>
-    </div>`;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-  :host {
-      --handle-size: 2px;
-      --handle-colour: transparent;
-      --handle-hover-colour: var(--surface-6);
-      --handle-active-colour: var(--accent);
-      --handle-bg: var(--handle-colour);
-      --handle-grab-colour: var(--border-subtle-color);
-      --handle-grab-dot-size: 3px;
-      --handle-grab-size: 16px;
-      --handle-grab-thickness: 8px;
-
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-    }
-    * {
-      box-sizing: border-box;
-    }
-    #zone {
-      display: flex;
-      height: 100%;
-      position: relative;
-    }
-    slot {
-      display: block;
-      overflow: hidden;
-      border: var(--border-subtle);
-      border-radius: var(--radius-m);
-    }
-    :slotted(*) {
-      width: 100%;
-      height: 100%;
-    }
-
-    .split-bar {
-      position: relative;
-      background-color: var(--handle-colour);
-      transition: background-color 0.3s ease 0s;
-      width: var(--handle-size);
-      height: 100%;
-      cursor: ew-resize;
-      flex-shrink: 0;
-      border-radius: var(--radius-m);
-
-    }
-
-    @keyframes handle-hover {
-      from { background-color: var(--handle-colour); }
-      to { background-color: var(--handle-hover-colour); }
-    }
-
-    .grab-handle {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--handle-grab-dot-size);
-      background: var(--handle-bg);
-      border-radius: var(--radius-s);
-    }
-
-    .grab-handle .dot {
-      width: var(--handle-grab-dot-size);
-      height: var(--handle-grab-dot-size);
-      border-radius: 50%;
-      background: var(--handle-grab-colour);
-      flex-shrink: 0;
-    }
-
-    :host([layout="vertical"]) .grab-handle {
-      flex-direction: column;
-      width: var(--handle-grab-thickness);
-      height: var(--handle-grab-size);
-    }
-
-    :host([layout="horizontal"]) .grab-handle {
-      flex-direction: row;
-      width: var(--handle-grab-size);
-      height: var(--handle-grab-thickness);
-    }
-
-    #zone.user-resizing .grab-handle {
-      display: none;
-    }
-    #zone.user-resizing {
-      slot {
-        opacity: 0.5;
-      }
-      .split-bar {
-        background-color: var(--handle-active-colour);
-        transition: none;
-        animation: none !important;
-      }
-    }
-
-    #zone:not(.user-resizing) .split-bar:hover {
-      animation: handle-hover 0.001s ease-out 0.7s both;
-    }
-
-    .corner-zone {
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      z-index: 10;
-      border-radius: 50%;
-      background: transparent;
-    }
-    .corner-zone:hover {
-      background: transparent;
-    }
-
-    :host([layout='horizontal']) {
-      #zone {
-        flex-direction: column;
-      }
-      .split-bar {
-        position: relative;
-        background-color: var(--handle-colour);
-        transition: background-color 0.3s ease 0s;
-        height: var(--handle-size);
-        width: 100%;
-        cursor: ns-resize;
-      }
-      #zone.user-resizing .split-bar {
-        background-color: var(--handle-active-colour);
-        transition: none;
-        animation: none !important;
-      }
-    }
-
-    :host([data-collapsed-a]) slot[name="a"],
-    :host([data-collapsed-b]) slot[name="b"] {
-      display: none;
-    }
-  `];
-	}
-};
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "layout", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "sizeA", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "sizeB", void 0);
-__decorate([property({ type: Boolean })], SplitLayoutElement.prototype, "fixedA", void 0);
-__decorate([property({ type: Boolean })], SplitLayoutElement.prototype, "fixedB", void 0);
-__decorate([property({ type: Boolean })], SplitLayoutElement.prototype, "collapsible", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], SplitLayoutElement.prototype, "collapsedA", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], SplitLayoutElement.prototype, "collapsedB", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "minSizeA", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "maxSizeA", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "minSizeB", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "maxSizeB", void 0);
-__decorate([state()], SplitLayoutElement.prototype, "_hasCorner", void 0);
-SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
-//#endregion
+import { t as SplitLayoutElement } from "./split-layout-BFSbUZQv.js";
 export { SplitLayoutElement };
-
-//# sourceMappingURL=split-layout.js.map

package/dist/style.css

@@ -23,7 +23,7 @@
   --font-mono: ui-monospace, monospace;
   --font-weight: 400;
   --font-weight-bold: 600;
-  --text-xs: 10px;
+  --text-xs: 9px;
   --text-s: 11px;
   --text-m: 12px;
   --text-l: 13px;

package/dist/swipe.js

@@ -1,4 +1,4 @@
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";

package/dist/{tab-list-D_1cYhB_.d.ts → tab-list-MPwq_1Jj.d.ts}

@@ -63,6 +63,7 @@ declare class TabListElement extends LitElement {
   flip: boolean;
   scrollable: boolean;
   hideLabels: boolean;
+  shrink: boolean;
   dragMode: TabListDragMode;
   render(): import("lit").TemplateResult<1>;
   firstUpdated(): void;
@@ -78,4 +79,4 @@ declare global {
 }
 //#endregion
 export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
-//# sourceMappingURL=tab-list-D_1cYhB_.d.ts.map
+//# sourceMappingURL=tab-list-MPwq_1Jj.d.ts.map

package/dist/tab-list-MPwq_1Jj.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-MPwq_1Jj.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;EAEC;EAUA;EAUA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;EAKC;EAIA,wBAAM;UA8BP;SAWQ,sBAAM;;QAwHhB;YACI;IACR,sBAAsB;;;;;;;;;;KC5Pd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EAsDN;EAUA,QAAQ,mBAAmB;EA2GpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QA6JP;YACI;IACR,iBAAiB"}

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-D_1cYhB_.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-MPwq_1Jj.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };