@ixfx/components 0.2.4 → 0.2.5

package/dist/style.css

@@ -0,0 +1,133 @@
+:root {
+  --surface-0: oklch(5% .02 240);
+  --surface-1: oklch(8% .02 240);
+  --surface-2: oklch(12% .02 240);
+  --surface-3: oklch(15% .02 240);
+  --surface-4: oklch(22% .02 240);
+  --surface-5: oklch(28% .02 240);
+  --surface-6: oklch(35% .02 240);
+  --surface-2-text: #fff;
+  --surface-3-text: oklch(75% .02 240);
+  --surface-4-text: #fff;
+  --surface-5-text: #fff;
+  --surface-6-text: #fff;
+  --surface-muted-text: oklch(55% .02 240);
+  --content: oklch(10% .01 240);
+  --content-text: #fff;
+  --accent: oklch(60% .15 140);
+  --accent-text: #fff;
+  --plot-color: var(--accent);
+  --error: oklch(60% .15 20);
+  --error-text: #fff;
+  --font-family: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --font-weight: 400;
+  --font-weight-bold: 600;
+  --text-xs: 10px;
+  --text-s: 11px;
+  --text-m: 12px;
+  --text-l: 13px;
+  --text-xl: 16px;
+  --text-2xl: 20px;
+  --space-xs: 3px;
+  --space-s: 4px;
+  --space-m: 8px;
+  --space-l: 12px;
+  --space-xl: 16px;
+  --space-2xl: 20px;
+  --border: 1px solid oklch(25% .02 240);
+  --border-subtle: 1px solid oklch(18% .02 240);
+  --radius-s: 3px;
+  --radius-m: 4px;
+  --radius-l: 6px;
+  --radius-xl: 8px;
+  --shadow-m: 0 4px 12px #0000004d;
+  --shadow-l: 0 4px 24px #00000080;
+  --disabled-opacity: .5;
+  --transition: .15s ease-out;
+  --prominence-idle-opacity: .6;
+  --prominence-idle-saturate: .4;
+  --prominence-tickled-opacity: .85;
+  --prominence-tickled-saturate: .8;
+  --prominence-disabled-opacity: .3;
+  --prominence-disabled-saturate: .1;
+  --transparent-bg: oklch(30% .02 240);
+  --item-border: 1px solid var(--surface-5);
+  --item-border-tickled: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
+  --item-border-selected: 1px dashed var(--accent);
+  --item-border-active: 2px solid var(--accent);
+  --item-border-dragged: 2px dotted color-mix(in oklch, var(--accent) 80%, transparent);
+  --item-border-disabled: 1px solid var(--surface-4);
+  --item-bg-tickled: var(--surface-5);
+  --item-text-tickled: var(--surface-5-text);
+  --item-bg-selected: var(--accent);
+  --item-text-selected: var(--accent-text);
+  --item-label-font-style-default: normal;
+  --item-label-font-style-selected: italic;
+  --item-label-font-style-tickled: normal;
+  --item-label-text-decoration-default: none;
+  --item-label-text-decoration-selected: none;
+  --item-label-text-decoration-tickled: underline;
+  --item-label-text-underline-offset-default: auto;
+  --item-label-text-underline-offset-tickled: 3px;
+  --deboss-3: inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-1) 60%, transparent),
+    inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-3) 50%, transparent),
+    -2px -2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+  --emboss-3: inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent),
+    inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
+    2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --surface-0: oklch(70% 0 0);
+    --surface-1: oklch(80% .01 240);
+    --surface-2: oklch(85% .01 240);
+    --surface-3: oklch(90% .01 240);
+    --surface-4: oklch(94% .01 240);
+    --surface-5: oklch(96% .01 240);
+    --surface-6: oklch(99% .01 240);
+    --surface-2-text: oklch(15% .02 240);
+    --surface-3-text: oklch(25% .02 240);
+    --surface-4-text: oklch(15% .02 240);
+    --surface-5-text: oklch(10% .02 240);
+    --surface-6-text: oklch(10% .02 240);
+    --surface-muted-text: oklch(45% .02 240);
+    --content: oklch(100% 0 0);
+    --content-text: oklch(10% .02 240);
+    --accent: oklch(45% .15 140);
+    --accent-text: #fff;
+    --plot-color: var(--accent);
+    --error: oklch(55% .15 20);
+    --error-text: #fff;
+    --border: 1px solid oklch(80% .01 240);
+    --border-subtle: 1px solid oklch(88% .01 240);
+    --shadow-m: 0 2px 8px #0000001a;
+    --shadow-l: 0 4px 16px #00000026;
+    --prominence-idle-opacity: .55;
+    --prominence-idle-saturate: .35;
+    --prominence-tickled-opacity: .8;
+    --prominence-tickled-saturate: .75;
+    --prominence-disabled-opacity: .25;
+    --prominence-disabled-saturate: .1;
+    --transparent-bg: oklch(85% .01 240);
+    --item-border: 1px solid var(--surface-4);
+    --item-border-tickled: 1px solid color-mix(in oklch, var(--accent) 50%, transparent);
+    --item-border-selected: 1px dashed var(--accent);
+    --item-border-active: 2px solid var(--accent);
+    --item-border-dragged: 2px dotted var(--accent);
+    --item-border-disabled: 1px solid var(--surface-3);
+    --item-bg-tickled: var(--surface-4);
+    --item-text-tickled: var(--surface-4-text);
+    --item-bg-selected: var(--accent);
+    --item-text-selected: var(--accent-text);
+    --item-label-font-style-default: normal;
+    --item-label-font-style-selected: italic;
+    --item-label-font-style-tickled: normal;
+    --item-label-text-decoration-default: none;
+    --item-label-text-decoration-selected: none;
+    --item-label-text-decoration-tickled: underline;
+    --item-label-text-underline-offset-default: auto;
+    --item-label-text-underline-offset-tickled: 3px;
+  }
+}

package/dist/swipe.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, LitElement, html } from "lit";
+
+//#region src/swipe/swipe.d.ts
+type SwipeInputDetail = {
+  readonly value: number;
+};
+type SwipeInputEvent = CustomEvent<SwipeInputDetail>;
+interface SwipeElementEventMap {
+  input: SwipeInputEvent;
+}
+interface SwipeElement {
+  addEventListener<K extends keyof SwipeElementEventMap>(type: K, listener: (this: SwipeElement, event: SwipeElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-swipe': SwipeElement;
+  }
+}
+declare class SwipeElement extends LitElement {
+  #private;
+  barSpacing: number;
+  barWidth: number;
+  debounceMs: number;
+  retractDurationMs: number;
+  private _startX;
+  private _currentX;
+  private _pointerId;
+  private _componentWidth;
+  private _isDragging;
+  private _offset;
+  private _width;
+  private _height;
+  private _animRafId;
+  private _debounceTimer;
+  private _animStartOffset;
+  private _animStartTime;
+  private _resizeObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private _onPointerDown;
+  private _onPointerMove;
+  static styles: CSSResultGroup;
+  render(): ReturnType<typeof html>;
+}
+//#endregion
+export { SwipeElement, SwipeElementEventMap, SwipeInputDetail, SwipeInputEvent };
+//# sourceMappingURL=swipe.d.ts.map

package/dist/swipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe.d.ts","names":[],"sources":["../src/swipe/swipe.ts"],"mappings":";;;KAyBY,gBAAA;EAAA,SAA8B,KAAA;AAAA;AAAA,KAC9B,eAAA,GAAkB,WAAA,CAAY,gBAAA;AAAA,UAEzB,oBAAA;EACf,KAAA,EAAO,eAAA;AAAA;AAAA,UAGQ,YAAA;EACf,gBAAA,iBAAiC,oBAAA,EAC/B,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,YAAA,EAAc,KAAA,EAAO,oBAAA,CAAqB,CAAA,YAC3D,OAAA,aAAoB,uBAAA;EAEtB,gBAAA,CACE,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA;AAAA,QAIhB,MAAA;EAAA,UACI,qBAAA;IACR,YAAA,EAAc,YAAA;EAAA;AAAA;AAAA,cAKL,YAAA,SAAqB,UAAA;EAAA;EACJ,UAAA;EACA,QAAA;EACA,UAAA;EACA,iBAAA;EAAA,QAEpB,OAAA;EAAA,QACA,SAAA;EAAA,QACA,UAAA;EAAA,QACA,eAAA;EAAA,QACA,WAAA;EAAA,QAEA,OAAA;EAAA,QACA,MAAA;EAAA,QACA,OAAA;EAAA,QAEA,UAAA;EAAA,QACA,cAAA;EAAA,QACA,gBAAA;EAAA,QACA,cAAA;EAAA,QACA,eAAA;EAyCC,iBAAA,CAAA;EAaA,oBAAA,CAAA;EAAA,QAUD,cAAA;EAAA,QAcA,cAAA;EAAA,OAoFQ,MAAA,EAAQ,cAAA;EA8Bf,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;AAAA"}

package/dist/swipe.js

@@ -0,0 +1,204 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { LitElement, css, html, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/swipe/swipe.ts
+let SwipeElement = class SwipeElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.barSpacing = 20;
+		this.barWidth = 14;
+		this.debounceMs = 200;
+		this.retractDurationMs = 400;
+		this._startX = 0;
+		this._currentX = 0;
+		this._pointerId = null;
+		this._componentWidth = 0;
+		this._isDragging = false;
+		this._offset = 0;
+		this._width = 0;
+		this._height = 0;
+		this._animRafId = null;
+		this._debounceTimer = null;
+		this._animStartOffset = 0;
+		this._animStartTime = null;
+		this._resizeObserver = null;
+		this.#onWindowPointerUp = (e) => {
+			if (e.pointerId !== this._pointerId) return;
+			this.#removeWindowListeners();
+			const rect = this.getBoundingClientRect();
+			if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
+				const deltaX = this._currentX - this._startX;
+				const value = Math.max(-1, Math.min(1, deltaX / this._componentWidth));
+				this.#emitInput(value);
+			}
+			this._isDragging = false;
+			this._pointerId = null;
+			this.#scheduleRetraction();
+		};
+		this.#onWindowPointerCancel = (e) => {
+			if (e.pointerId !== this._pointerId) return;
+			this.#removeWindowListeners();
+			this._isDragging = false;
+			this._pointerId = null;
+			this.#scheduleRetraction();
+		};
+		this._onPointerDown = (e) => {
+			e.preventDefault();
+			this.#cancelAnimation();
+			e.target.setPointerCapture(e.pointerId);
+			this._pointerId = e.pointerId;
+			this._startX = e.clientX;
+			this._currentX = e.clientX;
+			this._componentWidth = this.getBoundingClientRect().width;
+			this._isDragging = true;
+			window.addEventListener(`pointerup`, this.#onWindowPointerUp);
+			window.addEventListener(`pointercancel`, this.#onWindowPointerCancel);
+		};
+		this._onPointerMove = (e) => {
+			if (!this._isDragging || e.pointerId !== this._pointerId) return;
+			this._currentX = e.clientX;
+			const deltaX = this._currentX - this._startX;
+			const ratio = Math.max(-1, Math.min(1, deltaX / this._componentWidth));
+			this._offset = ratio * this._height * .5;
+			this.requestUpdate();
+		};
+	}
+	#onWindowPointerUp;
+	#onWindowPointerCancel;
+	#emitInput(value) {
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: { value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			this._width = entry.contentRect.width;
+			this._height = entry.contentRect.height;
+			this.requestUpdate();
+		});
+		this._resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.#cancelAnimation();
+		this.#removeWindowListeners();
+		this._isDragging = false;
+		this._pointerId = null;
+	}
+	#removeWindowListeners() {
+		window.removeEventListener(`pointerup`, this.#onWindowPointerUp);
+		window.removeEventListener(`pointercancel`, this.#onWindowPointerCancel);
+	}
+	#scheduleRetraction() {
+		if (this._debounceTimer !== null) clearTimeout(this._debounceTimer);
+		this._debounceTimer = setTimeout(() => {
+			this._debounceTimer = null;
+			this.#startRetraction();
+		}, this.debounceMs);
+	}
+	#startRetraction() {
+		this._animStartOffset = this._offset;
+		this._animStartTime = null;
+		const animate = (time) => {
+			if (this._animStartTime === null) this._animStartTime = time;
+			const elapsed = time - this._animStartTime;
+			const t = Math.min(elapsed / this.retractDurationMs, 1);
+			const eased = 1 - (1 - t) ** 3;
+			this._offset = this._animStartOffset * (1 - eased);
+			this.requestUpdate();
+			if (t < 1) this._animRafId = requestAnimationFrame(animate);
+			else {
+				this._offset = 0;
+				this._animRafId = null;
+				this.requestUpdate();
+			}
+		};
+		this._animRafId = requestAnimationFrame(animate);
+	}
+	#cancelAnimation() {
+		if (this._animRafId !== null) {
+			cancelAnimationFrame(this._animRafId);
+			this._animRafId = null;
+		}
+		if (this._debounceTimer !== null) {
+			clearTimeout(this._debounceTimer);
+			this._debounceTimer = null;
+		}
+	}
+	#renderBars() {
+		const w = this._width;
+		const h = this._height;
+		const off = this._offset;
+		const { barSpacing, barWidth } = this;
+		if (w === 0 || h === 0) return svg``;
+		const half = barWidth / 2;
+		const mid = h / 2;
+		const count = Math.ceil(w / barSpacing) + 1;
+		return svg`${Array.from({ length: count }, (_, i) => {
+			const cx = i * barSpacing;
+			const x0 = cx - half;
+			const x1 = cx + half;
+			const colorVar = i % 2 === 0 ? `var(--swipe-color-a, var(--surface-4))` : `var(--swipe-color-b, var(--surface-5))`;
+			return svg`<path d=${`M${x0},0 L${x1},0 L${x1 + off},${mid} L${x1},${h} L${x0},${h} L${x0 + off},${mid}Z`} style="fill:${colorVar}"></path>`;
+		})}`;
+	}
+	static {
+		this.styles = [prominenceStyles, css`
+    :host {
+      display: block;
+      user-select: none;
+      touch-action: none;
+      width: 100%;
+      height: 2.5rem;
+      --swipe-border-color: var(--border);
+    }
+
+    .swipe-area {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      cursor: grab;
+      border: var(--swipe-border-color);
+      overflow: hidden;
+    }
+
+    .swipe-area:active {
+      cursor: grabbing;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `];
+	}
+	render() {
+		return html`
+      <div
+        class="swipe-area"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+      >
+        <svg aria-hidden="true">${this.#renderBars()}</svg>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], SwipeElement.prototype, "barSpacing", void 0);
+__decorate([property({ type: Number })], SwipeElement.prototype, "barWidth", void 0);
+__decorate([property({ type: Number })], SwipeElement.prototype, "debounceMs", void 0);
+__decorate([property({ type: Number })], SwipeElement.prototype, "retractDurationMs", void 0);
+SwipeElement = __decorate([customElement(`ixfx-swipe`)], SwipeElement);
+//#endregion
+export { SwipeElement };
+
+//# sourceMappingURL=swipe.js.map

package/dist/swipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe.js","names":["#removeWindowListeners","#emitInput","#scheduleRetraction","#cancelAnimation","#onWindowPointerUp","#onWindowPointerCancel","#startRetraction","#renderBars"],"sources":["../src/swipe/swipe.ts"],"sourcesContent":["/**\n * <ixfx-swipe> — Touch-friendly swipe/nudge component.\n *\n * User taps and drags to generate a value in range [-1, 1].\n * A drag of full component width = ±1. Value is emitted only on pointerup.\n *\n * Properties\n *   barSpacing        – center-to-center pixel distance between bars (default 20)\n *   barWidth          – pixel width of each bar (default 14)\n *   debounceMs        – ms pause after release before retraction begins (default 200)\n *   retractDurationMs – ms for the spring-back animation (default 400)\n *\n * CSS custom properties\n *   --swipe-color-a      – fill for even-indexed bars (default var(--surface-4))\n *   --swipe-color-b      – fill for odd-indexed bars  (default var(--surface-5))\n *   --swipe-border-color – border color               (default var(--border))\n *\n * Events\n *   input – CustomEvent<{ detail: { value: number } }>, bubbles + composed\n */\nimport type { CSSResultGroup } from 'lit';\nimport { css, html, LitElement, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { prominenceStyles } from '../styles/prominence.js';\n\nexport type SwipeInputDetail = { readonly value: number };\nexport type SwipeInputEvent = CustomEvent<SwipeInputDetail>;\n\nexport interface SwipeElementEventMap {\n  input: SwipeInputEvent;\n}\n\nexport interface SwipeElement {\n  addEventListener<K extends keyof SwipeElementEventMap>(\n    type: K,\n    listener: (this: SwipeElement, event: SwipeElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ): void;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-swipe': SwipeElement;\n  }\n}\n\n@customElement(`ixfx-swipe`)\nexport class SwipeElement extends LitElement {\n  @property({ type: Number }) barSpacing = 20;\n  @property({ type: Number }) barWidth = 14;\n  @property({ type: Number }) debounceMs = 200;\n  @property({ type: Number }) retractDurationMs = 400;\n\n  private _startX = 0;\n  private _currentX = 0;\n  private _pointerId: number | null = null;\n  private _componentWidth = 0;\n  private _isDragging = false;\n\n  private _offset = 0;\n  private _width = 0;\n  private _height = 0;\n\n  private _animRafId: number | null = null;\n  private _debounceTimer: ReturnType<typeof setTimeout> | null = null;\n  private _animStartOffset = 0;\n  private _animStartTime: number | null = null;\n  private _resizeObserver: ResizeObserver | null = null;\n\n  #onWindowPointerUp = (e: PointerEvent): void => {\n    if (e.pointerId !== this._pointerId)\n      return;\n    this.#removeWindowListeners();\n\n    const rect = this.getBoundingClientRect();\n    const inside = e.clientX >= rect.left && e.clientX <= rect.right\n      && e.clientY >= rect.top && e.clientY <= rect.bottom;\n\n    if (inside) {\n      const deltaX = this._currentX - this._startX;\n      const value = Math.max(-1, Math.min(1, deltaX / this._componentWidth));\n      this.#emitInput(value);\n    }\n\n    this._isDragging = false;\n    this._pointerId = null;\n    this.#scheduleRetraction();\n  };\n\n  #onWindowPointerCancel = (e: PointerEvent): void => {\n    if (e.pointerId !== this._pointerId)\n      return;\n    this.#removeWindowListeners();\n    this._isDragging = false;\n    this._pointerId = null;\n    this.#scheduleRetraction();\n  };\n\n  #emitInput(value: number): void {\n    this.dispatchEvent(\n      new CustomEvent<SwipeInputDetail>(`input`, {\n        detail: { value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry)\n        return;\n      this._width = entry.contentRect.width;\n      this._height = entry.contentRect.height;\n      this.requestUpdate();\n    });\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n    this.#cancelAnimation();\n    this.#removeWindowListeners();\n    this._isDragging = false;\n    this._pointerId = null;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    e.preventDefault();\n    this.#cancelAnimation();\n    const target = e.target as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n    this._pointerId = e.pointerId;\n    this._startX = e.clientX;\n    this._currentX = e.clientX;\n    this._componentWidth = this.getBoundingClientRect().width;\n    this._isDragging = true;\n    window.addEventListener(`pointerup`, this.#onWindowPointerUp);\n    window.addEventListener(`pointercancel`, this.#onWindowPointerCancel);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._isDragging || e.pointerId !== this._pointerId)\n      return;\n    this._currentX = e.clientX;\n    const deltaX = this._currentX - this._startX;\n    const ratio = Math.max(-1, Math.min(1, deltaX / this._componentWidth));\n    this._offset = ratio * this._height * 0.5;\n    this.requestUpdate();\n  };\n\n  #removeWindowListeners(): void {\n    window.removeEventListener(`pointerup`, this.#onWindowPointerUp);\n    window.removeEventListener(`pointercancel`, this.#onWindowPointerCancel);\n  }\n\n  #scheduleRetraction(): void {\n    if (this._debounceTimer !== null)\n      clearTimeout(this._debounceTimer);\n    this._debounceTimer = setTimeout(() => {\n      this._debounceTimer = null;\n      this.#startRetraction();\n    }, this.debounceMs);\n  }\n\n  #startRetraction(): void {\n    this._animStartOffset = this._offset;\n    this._animStartTime = null;\n\n    const animate = (time: number): void => {\n      if (this._animStartTime === null)\n        this._animStartTime = time;\n      const elapsed = time - this._animStartTime;\n      const t = Math.min(elapsed / this.retractDurationMs, 1);\n      const eased = 1 - (1 - t) ** 3;\n      this._offset = this._animStartOffset * (1 - eased);\n      this.requestUpdate();\n\n      if (t < 1) {\n        this._animRafId = requestAnimationFrame(animate);\n      } else {\n        this._offset = 0;\n        this._animRafId = null;\n        this.requestUpdate();\n      }\n    };\n\n    this._animRafId = requestAnimationFrame(animate);\n  }\n\n  #cancelAnimation(): void {\n    if (this._animRafId !== null) {\n      cancelAnimationFrame(this._animRafId);\n      this._animRafId = null;\n    }\n    if (this._debounceTimer !== null) {\n      clearTimeout(this._debounceTimer);\n      this._debounceTimer = null;\n    }\n  }\n\n  #renderBars(): ReturnType<typeof svg> {\n    const w = this._width;\n    const h = this._height;\n    const off = this._offset;\n    const { barSpacing, barWidth } = this;\n    if (w === 0 || h === 0)\n      return svg``;\n\n    const half = barWidth / 2;\n    const mid = h / 2;\n    const count = Math.ceil(w / barSpacing) + 1;\n\n    return svg`${Array.from({ length: count }, (_, i) => {\n      const cx = i * barSpacing;\n      const x0 = cx - half;\n      const x1 = cx + half;\n      const colorVar = i % 2 === 0\n        ? `var(--swipe-color-a, var(--surface-4))`\n        : `var(--swipe-color-b, var(--surface-5))`;\n      const d = `M${x0},0 L${x1},0 L${x1 + off},${mid} L${x1},${h} L${x0},${h} L${x0 + off},${mid}Z`;\n      return svg`<path d=${d} style=\"fill:${colorVar}\"></path>`;\n    })}`;\n  }\n\n  static override styles: CSSResultGroup = [prominenceStyles, css`\n    :host {\n      display: block;\n      user-select: none;\n      touch-action: none;\n      width: 100%;\n      height: 2.5rem;\n      --swipe-border-color: var(--border);\n    }\n\n    .swipe-area {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      cursor: grab;\n      border: var(--swipe-border-color);\n      overflow: hidden;\n    }\n\n    .swipe-area:active {\n      cursor: grabbing;\n    }\n\n    svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div\n        class=\"swipe-area\"\n        @pointerdown=${this._onPointerDown}\n        @pointermove=${this._onPointerMove}\n      >\n        <svg aria-hidden=\"true\">${this.#renderBars()}</svg>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

package/dist/tab-list-CFF7uSYH.d.ts

@@ -0,0 +1,66 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues } from "lit";
+import { CommandRegistry } from "@clinth/ui-commands";
+
+//#region src/tabs/tab-list-item.d.ts
+/**
+ * CSS vars (can be overridden per-instance):
+ * --selected-colour: text colour when selected
+ * --selected-border-width: border width
+ * --padding
+ */
+declare class TabListItemElement extends LitElement {
+  closeable: boolean;
+  iconName: string | undefined;
+  description: string | undefined;
+  commandActive: string | undefined;
+  registry: CommandRegistry<unknown> | undefined;
+  private _compact;
+  private _resizeObserver?;
+  private _commandCleanup?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changed: PropertyValues): void;
+  private _syncTooltipAttrs;
+  private _syncCommandListener;
+  render(): _$lit.TemplateResult<1>;
+  private _onCloseClick;
+  static styles: _$lit.CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-tab-list-item": TabListItemElement;
+  }
+} //# sourceMappingURL=tab-list-item.d.ts.map
+//#endregion
+//#region src/tabs/tab-list.d.ts
+/**
+ * Events
+ * 'change' - new tab selected { previous:string, selected:string, for:string }
+ */
+type TabListChangeDetail = {
+  readonly previous: string | undefined;
+  readonly selected: string;
+  readonly for: string;
+};
+type TabListChangeEvent = CustomEvent<TabListChangeDetail>;
+declare class TabListElement extends LitElement {
+  #private;
+  orientation: `horizontal` | `vertical-stack` | `vertical-side`;
+  flip: boolean;
+  scrollable: boolean;
+  render(): _$lit.TemplateResult<1>;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues): void;
+  getSelectedElement(): TabListItemElement | undefined;
+  selectElement(el: HTMLElement): void;
+  static styles: _$lit.CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-tab-list": TabListElement;
+  }
+} //# sourceMappingURL=tab-list.d.ts.map
+//#endregion
+export { TabListItemElement as i, TabListChangeEvent as n, TabListElement as r, TabListChangeDetail as t };
+//# sourceMappingURL=tab-list-CFF7uSYH.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-CFF7uSYH.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;AAaA;;;;cACa,kBAAA,SAA2B,UAAA;EAEtC,SAAA;EAGA,QAAA;EAGA,WAAA;EAGA,aAAA;EAGA,QAAA,EAAU,eAAA;EAAA,QAEO,QAAA;EAAA,QACT,eAAA;EAAA,QACA,eAAA;EAEC,iBAAA,CAAA;EAQA,oBAAA,CAAA;EAQA,OAAA,CAAQ,OAAA,EAAS,cAAA;EAAA,QAQlB,iBAAA;EAAA,QAUA,oBAAA;EAWC,MAAA,CAAA,GA7B+B,KAAA,CA6BzB,cAAA;EAAA,QAsBP,aAAA;EAAA,OAWQ,MAAA,EAjCD,KAAA,CAiCO,SAAA;AAAA;AAAA,QA6EhB,MAAA;EAAA,UACI,qBAAA;IACR,oBAAA,EAAsB,kBAAA;EAAA;AAAA;;;;;;AAlL1B;KCJY,mBAAA;EAAA,SACD,QAAA;EAAA,SACA,QAAA;EAAA,SACA,GAAA;AAAA;AAAA,KAGC,kBAAA,GAAqB,WAAA,CAAY,mBAAA;AAAA,cAGhC,cAAA,SAAuB,UAAA;EAAA;EAElC,WAAA;EAGA,IAAA;EAGA,UAAA;EAYS,MAAA,CAAA,GApBiB,KAAA,CAoBX,cAAA;EAqBN,YAAA,CAAA;EAQA,OAAA,CAAQ,iBAAA,EAAmB,cAAA;EA2CpC,kBAAA,CAAA,GAAkB,kBAAA;EAclB,aAAA,CAAc,EAAA,EAAI,WAAA;EAAA,OAkEX,MAAA,EAlEsB,KAAA,CAkEhB,SAAA;AAAA;AAAA,QAuEP,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,cAAA;EAAA;AAAA"}

package/dist/tabs.d.ts

@@ -0,0 +1,2 @@
+import { n as TabListChangeEvent, r as TabListElement, t as TabListChangeDetail } from "./tab-list-CFF7uSYH.js";
+export { TabListChangeDetail, TabListChangeEvent, TabListElement };