@ixfx/components 0.5.20 → 0.6.1

package/dist/snackbar.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from "lit";
+//#region src/snackbar/snackbar.d.ts
+type SnackbarMode = `explicit` | `manual` | `implicit`;
+type SnackbarPlacement = `top` | `bottom` | `left` | `right`;
+type SnackbarDismiss = `auto` | `manual`;
+/**
+ * `ixfx-snackbar` is itself the popover panel (`popover="auto"` set on the host) -
+ * unlike `ixfx-menu-trigger`/`ixfx-colour-picker-popup` there's no separate always-visible
+ * trigger living inside the component to keep out of the top layer; the trigger is the
+ * external `for` target, so the whole host can be the popover content.
+ */
+declare class SnackbarElement extends LitElement {
+  for: string;
+  mode: SnackbarMode;
+  placement: SnackbarPlacement;
+  dismiss: SnackbarDismiss;
+  showDelay: number;
+  hideDelay: number;
+  private _isOpen;
+  private _recentCloseAt;
+  private readonly _anchorName;
+  private _target;
+  private _addedTabindex;
+  private _addedRole;
+  private _showTimeout;
+  private _hideTimeout;
+  private readonly _onTargetClick;
+  private readonly _onTargetKeydown;
+  private readonly _onTickleIn;
+  private readonly _onTickleOut;
+  private readonly _onPanelClick;
+  private readonly _onToggle;
+  private readonly _onBeforeToggle;
+  get isOpen(): boolean;
+  show(): void;
+  hide(): void;
+  toggle(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changed: Map<PropertyKey, unknown>): void;
+  private _resolveTarget;
+  private _attachToTarget;
+  private _detachFromTarget;
+  private _scheduleShow;
+  private _scheduleHide;
+  private _cancelShow;
+  private _cancelHide;
+  static styles: import("lit").CSSResult[];
+  protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-snackbar': SnackbarElement;
+  }
+}
+//#endregion
+export { SnackbarDismiss, SnackbarElement, SnackbarMode, SnackbarPlacement };
+//# sourceMappingURL=snackbar.d.ts.map

package/dist/snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.d.ts","names":[],"sources":["../src/snackbar/snackbar.ts"],"mappings":";;KAMY;KACA;KACA;;;;;;;cAWC,wBAAwB;EACP;EACA,MAAM;EACS,WAAW;EAC1B,SAAS;EACgB;EACA;UAEpC;UAQT;mBAES;UAET;UACA;UACA;UACA;UACA;mBAES;mBACA;mBAQA;mBACA;mBACA;mBAKA;mBAQA;MAKb;EAIJ;EAUA;EAUA;EAkBS;EAYA;EAUA,QAAQ,SAAS,IAAI;UAOtB;UAOA;UAwCA;UA4BA;UAUA;UAUA;UAOA;SAOQ,sBAAM;YA0DH,wBAAM;;QAKnB;YACI;IACR,iBAAiB"}

package/dist/snackbar.js

@@ -0,0 +1,265 @@
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { t as popupSurfaceStyles } from "./popup-D80sj2QC.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";
+//#region src/snackbar/snackbar.ts
+let _instanceCounter = 0;
+let SnackbarElement = class SnackbarElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.for = ``;
+		this.mode = `explicit`;
+		this.placement = `top`;
+		this.dismiss = `auto`;
+		this.showDelay = 150;
+		this.hideDelay = 500;
+		this._isOpen = false;
+		this._anchorName = `--ixfx-snackbar-anchor-${++_instanceCounter}`;
+		this._addedTabindex = false;
+		this._addedRole = false;
+		this._onTargetClick = () => this.toggle();
+		this._onTargetKeydown = (e) => {
+			if (e.key !== `Enter` && e.key !== ` `) return;
+			e.preventDefault();
+			this.toggle();
+		};
+		this._onTickleIn = () => this._scheduleShow();
+		this._onTickleOut = () => this._scheduleHide();
+		this._onPanelClick = () => {
+			if (this.dismiss === `auto`) this.hide();
+		};
+		this._onToggle = (e) => {
+			const { newState } = e;
+			this._isOpen = newState === `open`;
+			if (newState === `closed` && this.contains(document.activeElement)) this._target?.focus();
+		};
+		this._onBeforeToggle = (e) => {
+			const { newState } = e;
+			this._recentCloseAt = newState === `closed` ? performance.now() : void 0;
+		};
+	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	show() {
+		if (!this.popover) return;
+		try {
+			this.showPopover();
+		} catch {}
+	}
+	hide() {
+		if (!this.popover) return;
+		try {
+			this.hidePopover();
+		} catch {}
+	}
+	toggle() {
+		if (!this.popover) return;
+		if (this._recentCloseAt !== void 0 && performance.now() - this._recentCloseAt < 50) {
+			this._recentCloseAt = void 0;
+			return;
+		}
+		try {
+			this.togglePopover();
+		} catch {}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`popover`)) this.popover = `auto`;
+		this.classList.add(`popup-surface`);
+		this.addEventListener(`toggle`, this._onToggle);
+		this.addEventListener(`beforetoggle`, this._onBeforeToggle);
+		this.addEventListener(`click`, this._onPanelClick);
+		this.style.setProperty(`position-anchor`, this._anchorName);
+		this._attachToTarget();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`toggle`, this._onToggle);
+		this.removeEventListener(`beforetoggle`, this._onBeforeToggle);
+		this.removeEventListener(`click`, this._onPanelClick);
+		this._detachFromTarget();
+		this._cancelShow();
+		this._cancelHide();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`for`) || changed.has(`mode`)) this._attachToTarget();
+	}
+	_resolveTarget() {
+		if (!this.for) return void 0;
+		return this.getRootNode().getElementById(this.for) ?? void 0;
+	}
+	_attachToTarget() {
+		this._detachFromTarget();
+		const target = this._resolveTarget();
+		if (!target) {
+			if (this.for) console.warn(`ixfx-snackbar: no element found with id "${this.for}"`);
+			return;
+		}
+		this._target = target;
+		target.style.setProperty(`anchor-name`, this._anchorName);
+		if (this.mode === `explicit`) {
+			const alreadyFocusable = target.tabIndex >= 0;
+			if (!alreadyFocusable) {
+				target.setAttribute(`tabindex`, `0`);
+				this._addedTabindex = true;
+			}
+			if (!target.hasAttribute(`role`) && !alreadyFocusable) {
+				target.setAttribute(`role`, `button`);
+				this._addedRole = true;
+			}
+			target.setAttribute(`aria-haspopup`, `true`);
+			target.addEventListener(`click`, this._onTargetClick);
+			if (!alreadyFocusable) target.addEventListener(`keydown`, this._onTargetKeydown);
+		} else if (this.mode === `implicit`) {
+			target.addEventListener(`pointerenter`, this._onTickleIn);
+			target.addEventListener(`focus`, this._onTickleIn);
+			target.addEventListener(`pointerleave`, this._onTickleOut);
+			target.addEventListener(`blur`, this._onTickleOut);
+			this.addEventListener(`pointerenter`, this._onTickleIn);
+			this.addEventListener(`focusin`, this._onTickleIn);
+			this.addEventListener(`pointerleave`, this._onTickleOut);
+			this.addEventListener(`focusout`, this._onTickleOut);
+		}
+	}
+	_detachFromTarget() {
+		const target = this._target;
+		if (!target) return;
+		target.style.removeProperty(`anchor-name`);
+		if (this._addedTabindex) {
+			target.removeAttribute(`tabindex`);
+			this._addedTabindex = false;
+		}
+		if (this._addedRole) {
+			target.removeAttribute(`role`);
+			this._addedRole = false;
+		}
+		target.removeAttribute(`aria-haspopup`);
+		target.removeEventListener(`click`, this._onTargetClick);
+		target.removeEventListener(`keydown`, this._onTargetKeydown);
+		target.removeEventListener(`pointerenter`, this._onTickleIn);
+		target.removeEventListener(`focus`, this._onTickleIn);
+		target.removeEventListener(`pointerleave`, this._onTickleOut);
+		target.removeEventListener(`blur`, this._onTickleOut);
+		this.removeEventListener(`pointerenter`, this._onTickleIn);
+		this.removeEventListener(`focusin`, this._onTickleIn);
+		this.removeEventListener(`pointerleave`, this._onTickleOut);
+		this.removeEventListener(`focusout`, this._onTickleOut);
+		this._target = void 0;
+	}
+	_scheduleShow() {
+		this._cancelHide();
+		this._cancelShow();
+		if (this.showDelay <= 0) {
+			this.show();
+			return;
+		}
+		this._showTimeout = window.setTimeout(() => this.show(), this.showDelay);
+	}
+	_scheduleHide() {
+		this._cancelShow();
+		this._cancelHide();
+		if (this.hideDelay <= 0) {
+			this.hide();
+			return;
+		}
+		this._hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
+	}
+	_cancelShow() {
+		if (this._showTimeout !== void 0) {
+			window.clearTimeout(this._showTimeout);
+			this._showTimeout = void 0;
+		}
+	}
+	_cancelHide() {
+		if (this._hideTimeout !== void 0) {
+			window.clearTimeout(this._hideTimeout);
+			this._hideTimeout = void 0;
+		}
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      padding: var(--space-s);
+
+      position: fixed;
+      inset: unset;
+      margin: 0;
+      z-index: 100;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+      opacity: 0;
+      scale: 0.97;
+      pointer-events: none;
+      transition: opacity 0.12s ease-out, scale 0.12s ease-out,
+                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
+    }
+
+    :host(:popover-open) {
+      opacity: 1;
+      scale: 1;
+      pointer-events: auto;
+    }
+
+    @starting-style {
+      :host(:popover-open) {
+        opacity: 0;
+        scale: 0.97;
+      }
+    }
+
+    :host([placement="top"]) {
+      position-area: block-start;
+      margin-block-end: var(--space-s);
+    }
+
+    :host([placement="bottom"]) {
+      position-area: block-end;
+      margin-block-start: var(--space-s);
+    }
+
+    :host([placement="left"]) {
+      position-area: inline-start;
+      margin-inline-end: var(--space-s);
+    }
+
+    :host([placement="right"]) {
+      position-area: inline-end;
+      margin-inline-start: var(--space-s);
+    }
+  `
+		];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({ type: String })], SnackbarElement.prototype, "for", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "mode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SnackbarElement.prototype, "placement", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "dismiss", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `show-delay`
+})], SnackbarElement.prototype, "showDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `hide-delay`
+})], SnackbarElement.prototype, "hideDelay", void 0);
+__decorate([state()], SnackbarElement.prototype, "_isOpen", void 0);
+SnackbarElement = __decorate([safeCustomElement(`ixfx-snackbar`)], SnackbarElement);
+//#endregion
+export { SnackbarElement };
+
+//# sourceMappingURL=snackbar.js.map

package/dist/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","names":["customElement"],"sources":["../src/snackbar/snackbar.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { popupSurfaceStyles } from '../styles/popup.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type SnackbarMode = `explicit` | `manual` | `implicit`;\nexport type SnackbarPlacement = `top` | `bottom` | `left` | `right`;\nexport type SnackbarDismiss = `auto` | `manual`;\n\nlet _instanceCounter = 0;\n\n/**\n * `ixfx-snackbar` is itself the popover panel (`popover=\"auto\"` set on the host) -\n * unlike `ixfx-menu-trigger`/`ixfx-colour-picker-popup` there's no separate always-visible\n * trigger living inside the component to keep out of the top layer; the trigger is the\n * external `for` target, so the whole host can be the popover content.\n */\n@customElement(`ixfx-snackbar`)\nexport class SnackbarElement extends LitElement {\n  @property({ type: String }) for = ``;\n  @property({ type: String }) mode: SnackbarMode = `explicit`;\n  @property({ type: String, reflect: true }) placement: SnackbarPlacement = `top`;\n  @property({ type: String }) dismiss: SnackbarDismiss = `auto`;\n  @property({ type: Number, attribute: `show-delay` }) showDelay = 150;\n  @property({ type: Number, attribute: `hide-delay` }) hideDelay = 500;\n\n  @state() private _isOpen = false;\n\n  // When a close wasn't initiated by our own code (light-dismiss: click outside or\n  // Escape) the popover is already closed before the click that triggered it dispatches.\n  // toggle() consults this to avoid immediately re-opening via togglePopover(). The\n  // timestamp window is deliberately tiny — light-dismiss and the ensuing click happen\n  // in the same event dispatch, microseconds apart, so it can't swallow a later, real\n  // toggle (e.g. clicking a toggle button after having dismissed the popover earlier).\n  private _recentCloseAt: number | undefined;\n\n  private readonly _anchorName = `--ixfx-snackbar-anchor-${++_instanceCounter}`;\n\n  private _target: HTMLElement | undefined;\n  private _addedTabindex = false;\n  private _addedRole = false;\n  private _showTimeout: number | undefined;\n  private _hideTimeout: number | undefined;\n\n  private readonly _onTargetClick = (): void => this.toggle();\n  private readonly _onTargetKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== `Enter` && e.key !== ` `)\n      return;\n    e.preventDefault();\n    this.toggle();\n  };\n\n  // Shared by both the target and the panel itself - hovering/focusing either keeps it open.\n  private readonly _onTickleIn = (): void => this._scheduleShow();\n  private readonly _onTickleOut = (): void => this._scheduleHide();\n  private readonly _onPanelClick = (): void => {\n    if (this.dismiss === `auto`)\n      this.hide();\n  };\n\n  private readonly _onToggle = (e: Event): void => {\n    const { newState } = e as ToggleEvent;\n    this._isOpen = newState === `open`;\n    if (newState === `closed` && this.contains(document.activeElement)) {\n      this._target?.focus();\n    }\n  };\n\n  private readonly _onBeforeToggle = (e: Event): void => {\n    const { newState } = e as ToggleEvent;\n    this._recentCloseAt = newState === `closed` ? performance.now() : undefined;\n  };\n\n  get isOpen(): boolean {\n    return this._isOpen;\n  }\n\n  show(): void {\n    if (!this.popover)\n      return;\n    try {\n      this.showPopover();\n    } catch {\n      // already open, or popover API unsupported\n    }\n  }\n\n  hide(): void {\n    if (!this.popover)\n      return;\n    try {\n      this.hidePopover();\n    } catch {\n      // already closed\n    }\n  }\n\n  toggle(): void {\n    if (!this.popover)\n      return;\n    // If the popover was just closed by light-dismiss as part of this same click\n    // (click outside closes an `auto` popover before the click event dispatches),\n    // togglePopover() would re-open it. Honour the dismiss instead: the popover is\n    // already closed, so the toggle is a no-op.\n    if (this._recentCloseAt !== undefined && performance.now() - this._recentCloseAt < 50) {\n      this._recentCloseAt = undefined;\n      return;\n    }\n    try {\n      this.togglePopover();\n    } catch {\n      // popover API unsupported\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(`popover`))\n      this.popover = `auto`;\n    this.classList.add(`popup-surface`);\n    this.addEventListener(`toggle`, this._onToggle);\n    this.addEventListener(`beforetoggle`, this._onBeforeToggle);\n    this.addEventListener(`click`, this._onPanelClick);\n    this.style.setProperty(`position-anchor`, this._anchorName);\n    this._attachToTarget();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`toggle`, this._onToggle);\n    this.removeEventListener(`beforetoggle`, this._onBeforeToggle);\n    this.removeEventListener(`click`, this._onPanelClick);\n    this._detachFromTarget();\n    this._cancelShow();\n    this._cancelHide();\n  }\n\n  override updated(changed: Map<PropertyKey, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`for`) || changed.has(`mode`)) {\n      this._attachToTarget();\n    }\n  }\n\n  private _resolveTarget(): HTMLElement | undefined {\n    if (!this.for)\n      return undefined;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.getElementById(this.for) ?? undefined;\n  }\n\n  private _attachToTarget(): void {\n    this._detachFromTarget();\n\n    const target = this._resolveTarget();\n    if (!target) {\n      if (this.for)\n        console.warn(`ixfx-snackbar: no element found with id \"${this.for}\"`);\n      return;\n    }\n    this._target = target;\n    target.style.setProperty(`anchor-name`, this._anchorName);\n\n    if (this.mode === `explicit`) {\n      const alreadyFocusable = target.tabIndex >= 0;\n      if (!alreadyFocusable) {\n        target.setAttribute(`tabindex`, `0`);\n        this._addedTabindex = true;\n      }\n      if (!target.hasAttribute(`role`) && !alreadyFocusable) {\n        target.setAttribute(`role`, `button`);\n        this._addedRole = true;\n      }\n      target.setAttribute(`aria-haspopup`, `true`);\n      target.addEventListener(`click`, this._onTargetClick);\n      // Native interactive elements (button, a[href], ...) already turn Enter/Space into a\n      // click; a target we just made focusable via role=\"button\" does not get that for free.\n      if (!alreadyFocusable)\n        target.addEventListener(`keydown`, this._onTargetKeydown);\n    } else if (this.mode === `implicit`) {\n      target.addEventListener(`pointerenter`, this._onTickleIn);\n      target.addEventListener(`focus`, this._onTickleIn);\n      target.addEventListener(`pointerleave`, this._onTickleOut);\n      target.addEventListener(`blur`, this._onTickleOut);\n      this.addEventListener(`pointerenter`, this._onTickleIn);\n      this.addEventListener(`focusin`, this._onTickleIn);\n      this.addEventListener(`pointerleave`, this._onTickleOut);\n      this.addEventListener(`focusout`, this._onTickleOut);\n    }\n  }\n\n  private _detachFromTarget(): void {\n    const target = this._target;\n    if (!target)\n      return;\n\n    target.style.removeProperty(`anchor-name`);\n    if (this._addedTabindex) {\n      target.removeAttribute(`tabindex`);\n      this._addedTabindex = false;\n    }\n    if (this._addedRole) {\n      target.removeAttribute(`role`);\n      this._addedRole = false;\n    }\n    target.removeAttribute(`aria-haspopup`);\n    target.removeEventListener(`click`, this._onTargetClick);\n    target.removeEventListener(`keydown`, this._onTargetKeydown);\n    target.removeEventListener(`pointerenter`, this._onTickleIn);\n    target.removeEventListener(`focus`, this._onTickleIn);\n    target.removeEventListener(`pointerleave`, this._onTickleOut);\n    target.removeEventListener(`blur`, this._onTickleOut);\n    this.removeEventListener(`pointerenter`, this._onTickleIn);\n    this.removeEventListener(`focusin`, this._onTickleIn);\n    this.removeEventListener(`pointerleave`, this._onTickleOut);\n    this.removeEventListener(`focusout`, this._onTickleOut);\n    this._target = undefined;\n  }\n\n  private _scheduleShow(): void {\n    this._cancelHide();\n    this._cancelShow();\n    if (this.showDelay <= 0) {\n      this.show();\n      return;\n    }\n    this._showTimeout = window.setTimeout(() => this.show(), this.showDelay);\n  }\n\n  private _scheduleHide(): void {\n    this._cancelShow();\n    this._cancelHide();\n    if (this.hideDelay <= 0) {\n      this.hide();\n      return;\n    }\n    this._hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);\n  }\n\n  private _cancelShow(): void {\n    if (this._showTimeout !== undefined) {\n      window.clearTimeout(this._showTimeout);\n      this._showTimeout = undefined;\n    }\n  }\n\n  private _cancelHide(): void {\n    if (this._hideTimeout !== undefined) {\n      window.clearTimeout(this._hideTimeout);\n      this._hideTimeout = undefined;\n    }\n  }\n\n  static override styles = [\n    themeFallbacks,\n    popupSurfaceStyles,\n    css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      padding: var(--space-s);\n\n      position: fixed;\n      inset: unset;\n      margin: 0;\n      z-index: 100;\n      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;\n\n      opacity: 0;\n      scale: 0.97;\n      pointer-events: none;\n      transition: opacity 0.12s ease-out, scale 0.12s ease-out,\n                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;\n    }\n\n    :host(:popover-open) {\n      opacity: 1;\n      scale: 1;\n      pointer-events: auto;\n    }\n\n    @starting-style {\n      :host(:popover-open) {\n        opacity: 0;\n        scale: 0.97;\n      }\n    }\n\n    :host([placement=\"top\"]) {\n      position-area: block-start;\n      margin-block-end: var(--space-s);\n    }\n\n    :host([placement=\"bottom\"]) {\n      position-area: block-end;\n      margin-block-start: var(--space-s);\n    }\n\n    :host([placement=\"left\"]) {\n      position-area: inline-start;\n      margin-inline-end: var(--space-s);\n    }\n\n    :host([placement=\"right\"]) {\n      position-area: inline-end;\n      margin-inline-start: var(--space-s);\n    }\n  `,\n  ];\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-snackbar': SnackbarElement;\n  }\n}\n"],"mappings":"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"}

package/dist/snap-container.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, html } from "lit";
-
 //#region src/snap-container/snap-container.d.ts
 type SnapLogic = `centre` | `balanced`;
 type ClickSnapMode = `closest` | `step`;
@@ -43,7 +42,7 @@ declare global {
   interface HTMLElementTagNameMap {
     'ixfx-snap-container': SnapContainer;
   }
-} //# sourceMappingURL=snap-container.d.ts.map
+}
 //#endregion
 export { ClickSnapMode, SnapChangeDetail, SnapChangeEvent, SnapContainer, SnapInputDetail, SnapInputEvent, SnapLogic };
 //# sourceMappingURL=snap-container.d.ts.map

package/dist/snap-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snap-container.d.ts","names":[],"sources":["../src/snap-container/snap-container.ts"],"mappings":";;;KAIY,SAAA;AAAA,KACA,aAAA;AAAA,cAGC,aAAA,SAAsB,UAAA;EAAA,OACjB,MAAA,gBAAM,SAAA;EA0DtB,WAAA;EAGA,aAAA;EAGA,SAAA,EAAW,SAAA;EAGX,SAAA;EAGA,IAAA;EAAA,QAGQ,SAAA;EAAA,QAEA,UAAA;EAAA,QACA,cAAA;EAAA,QACA,iBAAA;EAAA,QACA,iBAAA;EAAA,QACA,MAAA;EAAA,YAEI,aAAA;EAAA,QAIJ,SAAA;EAAA,QAMA,qBAAA;EAAA,QAwCA,aAAA;EAAA,QA8BA,mBAAA;EAAA,QAWA,oBAAA;EAAA,QAwBA,cAAA;EAAA,QA0DA,cAAA;EAAA,QAyBA,YAAA;EAAA,QA2BA,UAAA;EAoCC,YAAA;EAKA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAM3B,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAc3B,gBAAA;EAAA,SACD,YAAA;EAAA,SACA,OAAO;AAAA;AAAA,KAGN,eAAA,GAAkB,WAAW,CAAC,gBAAA;AAAA,KAE9B,eAAA;EAAA,SACD,KAAK;AAAA;AAAA,KAGJ,cAAA,GAAiB,WAAW,CAAC,eAAA;AAAA,QAEjC,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAa;EAAA;AAAA"}
+{"version":3,"file":"snap-container.d.ts","names":[],"sources":["../src/snap-container/snap-container.ts"],"mappings":";;KAIY;KACA;cAGC,sBAAsB;SACjB,sBAAM;EA0DtB;EAGA;EAGA,WAAW;EAGX;EAGA;UAGQ;UAEA;UACA;UACA;UACA;UACA;cAEI;UAIJ;UAMA;UAwCA;UA8BA;UAWA;UAwBA;UA0DA;UAyBA;UA2BA;EAoCC;EAKA,QAAQ,mBAAmB;EAM3B,UAAU,kBAAkB;;KAc3B;WACD;WACA;;KAGC,kBAAkB,YAAY;KAE9B;WACD;;KAGC,iBAAiB,YAAY;QAEjC;YACI;IACR,uBAAuB"}

package/dist/snap-container.js

@@ -1,4 +1,4 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.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";
 //#region src/snap-container/snap-container.ts
@@ -95,10 +95,11 @@ let SnapContainer = class SnapContainer extends LitElement {
 		};
 		this._onKeyDown = (e) => {
 			let newSnap = this.snap;
-			if (this._isHorizontal) if (e.key === `ArrowLeft`) newSnap = Math.max(0, this.snap - 1);
-			else if (e.key === `ArrowRight`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
-			else return;
-			else if (e.key === `ArrowUp`) newSnap = Math.max(0, this.snap - 1);
+			if (this._isHorizontal) {
+				if (e.key === `ArrowLeft`) newSnap = Math.max(0, this.snap - 1);
+				else if (e.key === `ArrowRight`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
+				else return;
+			} else if (e.key === `ArrowUp`) newSnap = Math.max(0, this.snap - 1);
 			else if (e.key === `ArrowDown`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
 			else return;
 			e.preventDefault();

package/dist/snap-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"snap-container.js","names":["customElement"],"sources":["../src/snap-container/snap-container.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type SnapLogic = `centre` | `balanced`;\nexport type ClickSnapMode = `closest` | `step`;\n\n@customElement(`ixfx-snap-container`)\nexport class SnapContainer extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n      touch-action: none;\n      user-select: none;\n      --transition-duration: 200ms;\n    }\n    \n    :host([orientation=\"horizontal\"]) {\n      width: 100%;\n      height: auto;\n      min-height: 25px;\n    }\n    \n    :host([orientation=\"vertical\"]) {\n      height: 100%;\n      width: auto;\n      min-width: 25px;\n    }\n    \n    :host(:not([orientation])) {\n      width: 100%;\n      min-height: 25px;\n    }\n    \n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      min-height: inherit;\n      min-width: inherit;\n    }\n    \n    ::slotted(*) {\n      position: absolute;\n      transition: left var(--transition-duration) ease-out, \n                  top var(--transition-duration) ease-out;\n      cursor: grab;\n      will-change: left, top;\n    }\n    \n    ::slotted(*:active) {\n      cursor: grabbing;\n    }\n    \n    :host([orientation=\"vertical\"]) ::slotted(*) {\n      transition: top var(--transition-duration) ease-out,\n                  left var(--transition-duration) ease-out;\n    }\n    \n    .dragging {\n      transition: none !important;\n    }\n  `;\n\n  @property({ type: String, attribute: `orientation` })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Number, attribute: `snap-positions` })\n  snapPositions = 3;\n\n  @property({ type: String, attribute: `snap-logic` })\n  snapLogic: SnapLogic = `balanced`;\n\n  @property({ type: String, attribute: `click-snap` })\n  clickSnap: `closest` | `step` = `closest`;\n\n  @property({ type: Number })\n  snap = 0;\n\n  @state()\n  private _dragging = false;\n\n  private _dragStart = 0;\n  private _dragThreshold = 10;\n  private _thresholdReached = false;\n  private _currentDragIndex = 0;\n  private _child: HTMLElement | null = null;\n\n  private get _isHorizontal(): boolean {\n    return this.orientation !== `vertical`;\n  }\n\n  private _getChild(): HTMLElement | null {\n    if (this._child)\n      return this._child;\n    return this.firstElementChild as HTMLElement | null;\n  }\n\n  private _computeSnapPositions(): number[] {\n    const positions: number[] = [];\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    if (containerSize === 0 || childSize === 0)\n      return [];\n\n    const availableSpace = containerSize - childSize;\n\n    if (this.snapLogic === `centre`) {\n      for (let i = 0; i < this.snapPositions; i++) {\n        const fraction = i / (this.snapPositions - 1 || 1);\n        positions.push(fraction * availableSpace);\n      }\n    } else {\n      const firstPosition = 0;\n      const lastPosition = availableSpace;\n\n      if (this.snapPositions === 1) {\n        positions.push(availableSpace / 2);\n      } else if (this.snapPositions === 2) {\n        positions.push(firstPosition, lastPosition);\n      } else {\n        positions.push(firstPosition);\n        const middleCount = this.snapPositions - 2;\n        for (let i = 1; i <= middleCount; i++) {\n          const fraction = i / (middleCount + 1);\n          positions.push(firstPosition + fraction * (lastPosition - firstPosition));\n        }\n        positions.push(lastPosition);\n      }\n    }\n\n    return positions;\n  }\n\n  private _getSnapIndex(clientPos: number, containerRect: DOMRect): number {\n    const offsetInAxis = this._isHorizontal\n      ? clientPos - containerRect.left\n      : clientPos - containerRect.top;\n\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return 0;\n\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const halfChild = childSize / 2;\n    let closestIndex = 0;\n    let closestDistance = Infinity;\n\n    for (let i = 0; i < snapPositions.length; i++) {\n      const snapCenter = snapPositions[i] + halfChild;\n      const distance = Math.abs(offsetInAxis - snapCenter);\n      if (distance < closestDistance) {\n        closestDistance = distance;\n        closestIndex = i;\n      }\n    }\n\n    return closestIndex;\n  }\n\n  private _clampChildPosition(position: number): number {\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const maxPosition = containerSize - childSize;\n    return Math.max(0, Math.min(position, maxPosition));\n  }\n\n  private _updateChildPosition(index: number): void {\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return;\n\n    const clampedIndex = Math.max(0, Math.min(index, snapPositions.length - 1));\n    const position = snapPositions[clampedIndex];\n\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    if (this._isHorizontal) {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.left = `${clampedPosition}px`;\n      child.style.top = `0px`;\n    } else {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.top = `${clampedPosition}px`;\n      child.style.left = `0px`;\n    }\n    child.style.setProperty(`--snap-index`, String(clampedIndex));\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    const containerRect = this.getBoundingClientRect();\n    const newIndex = this._getSnapIndex(\n      this._isHorizontal ? e.clientX : e.clientY,\n      containerRect,\n    );\n\n    if (child.contains(e.target as Node)) {\n      e.preventDefault();\n      e.stopPropagation();\n      this._dragging = true;\n      this._thresholdReached = false;\n      this._dragStart = this._isHorizontal ? e.clientX : e.clientY;\n      this._currentDragIndex = newIndex;\n      child.classList.add(`dragging`);\n\n      document.addEventListener(`pointermove`, this._onPointerMove);\n      document.addEventListener(`pointerup`, this._onPointerUp);\n    } else {\n      let targetIndex: number;\n\n      if (this.clickSnap === `step`) {\n        targetIndex = this.snap;\n        const childRect = child.getBoundingClientRect();\n        const childCenter = this._isHorizontal\n          ? childRect.left + childRect.width / 2\n          : childRect.top + childRect.height / 2;\n        const clickPos = this._isHorizontal ? e.clientX : e.clientY;\n\n        if (clickPos > childCenter) {\n          targetIndex = Math.min(this.snapPositions - 1, this.snap + 1);\n        } else if (clickPos < childCenter) {\n          targetIndex = Math.max(0, this.snap - 1);\n        }\n      } else {\n        targetIndex = newIndex;\n      }\n\n      if (targetIndex !== this.snap) {\n        const previousSnap = this.snap;\n        this.snap = targetIndex;\n        this._updateChildPosition(this.snap);\n\n        this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n          detail: { previousSnap, newSnap: this.snap },\n          bubbles: true,\n          composed: true,\n        }));\n      } else {\n        this._updateChildPosition(this.snap);\n      }\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n\n    const currentPos = this._isHorizontal ? e.clientX : e.clientY;\n    const delta = currentPos - this._dragStart;\n    const containerRect = this.getBoundingClientRect();\n\n    if (!this._thresholdReached && Math.abs(delta) < this._dragThreshold) {\n      return;\n    }\n\n    this._thresholdReached = true;\n\n    const newIndex = this._getSnapIndex(currentPos, containerRect);\n    this._currentDragIndex = newIndex;\n    this._updateChildPosition(newIndex);\n\n    this.dispatchEvent(new CustomEvent<SnapInputDetail>(`snap-input`, {\n      detail: { index: newIndex },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onPointerUp = (): void => {\n    if (!this._dragging)\n      return;\n\n    this._dragging = false;\n    const child = this._getChild();\n    if (child)\n      child.classList.remove(`dragging`);\n\n    document.removeEventListener(`pointermove`, this._onPointerMove);\n    document.removeEventListener(`pointerup`, this._onPointerUp);\n\n    if (this._thresholdReached && this._currentDragIndex !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = this._currentDragIndex;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    } else {\n      this._updateChildPosition(this.snap);\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    let newSnap = this.snap;\n\n    if (this._isHorizontal) {\n      if (e.key === `ArrowLeft`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowRight`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    } else {\n      if (e.key === `ArrowUp`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowDown`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    }\n\n    e.preventDefault();\n\n    if (newSnap !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = newSnap;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  override firstUpdated(): void {\n    this._child = this.firstElementChild as HTMLElement | null;\n    this._updateChildPosition(this.snap);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`snap`) && !this._dragging) {\n      this._updateChildPosition(this.snap);\n    }\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div \n        class=\"container\"\n        @pointerdown=${this._onPointerDown}\n        tabindex=\"0\"\n        @keydown=${this._onKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport type SnapChangeDetail = {\n  readonly previousSnap: number;\n  readonly newSnap: number;\n};\n\nexport type SnapChangeEvent = CustomEvent<SnapChangeDetail>;\n\nexport type SnapInputDetail = {\n  readonly index: number;\n};\n\nexport type SnapInputEvent = CustomEvent<SnapInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-snap-container': SnapContainer;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"snap-container.js","names":["customElement"],"sources":["../src/snap-container/snap-container.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type SnapLogic = `centre` | `balanced`;\nexport type ClickSnapMode = `closest` | `step`;\n\n@customElement(`ixfx-snap-container`)\nexport class SnapContainer extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n      touch-action: none;\n      user-select: none;\n      --transition-duration: 200ms;\n    }\n    \n    :host([orientation=\"horizontal\"]) {\n      width: 100%;\n      height: auto;\n      min-height: 25px;\n    }\n    \n    :host([orientation=\"vertical\"]) {\n      height: 100%;\n      width: auto;\n      min-width: 25px;\n    }\n    \n    :host(:not([orientation])) {\n      width: 100%;\n      min-height: 25px;\n    }\n    \n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      min-height: inherit;\n      min-width: inherit;\n    }\n    \n    ::slotted(*) {\n      position: absolute;\n      transition: left var(--transition-duration) ease-out, \n                  top var(--transition-duration) ease-out;\n      cursor: grab;\n      will-change: left, top;\n    }\n    \n    ::slotted(*:active) {\n      cursor: grabbing;\n    }\n    \n    :host([orientation=\"vertical\"]) ::slotted(*) {\n      transition: top var(--transition-duration) ease-out,\n                  left var(--transition-duration) ease-out;\n    }\n    \n    .dragging {\n      transition: none !important;\n    }\n  `;\n\n  @property({ type: String, attribute: `orientation` })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Number, attribute: `snap-positions` })\n  snapPositions = 3;\n\n  @property({ type: String, attribute: `snap-logic` })\n  snapLogic: SnapLogic = `balanced`;\n\n  @property({ type: String, attribute: `click-snap` })\n  clickSnap: `closest` | `step` = `closest`;\n\n  @property({ type: Number })\n  snap = 0;\n\n  @state()\n  private _dragging = false;\n\n  private _dragStart = 0;\n  private _dragThreshold = 10;\n  private _thresholdReached = false;\n  private _currentDragIndex = 0;\n  private _child: HTMLElement | null = null;\n\n  private get _isHorizontal(): boolean {\n    return this.orientation !== `vertical`;\n  }\n\n  private _getChild(): HTMLElement | null {\n    if (this._child)\n      return this._child;\n    return this.firstElementChild as HTMLElement | null;\n  }\n\n  private _computeSnapPositions(): number[] {\n    const positions: number[] = [];\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    if (containerSize === 0 || childSize === 0)\n      return [];\n\n    const availableSpace = containerSize - childSize;\n\n    if (this.snapLogic === `centre`) {\n      for (let i = 0; i < this.snapPositions; i++) {\n        const fraction = i / (this.snapPositions - 1 || 1);\n        positions.push(fraction * availableSpace);\n      }\n    } else {\n      const firstPosition = 0;\n      const lastPosition = availableSpace;\n\n      if (this.snapPositions === 1) {\n        positions.push(availableSpace / 2);\n      } else if (this.snapPositions === 2) {\n        positions.push(firstPosition, lastPosition);\n      } else {\n        positions.push(firstPosition);\n        const middleCount = this.snapPositions - 2;\n        for (let i = 1; i <= middleCount; i++) {\n          const fraction = i / (middleCount + 1);\n          positions.push(firstPosition + fraction * (lastPosition - firstPosition));\n        }\n        positions.push(lastPosition);\n      }\n    }\n\n    return positions;\n  }\n\n  private _getSnapIndex(clientPos: number, containerRect: DOMRect): number {\n    const offsetInAxis = this._isHorizontal\n      ? clientPos - containerRect.left\n      : clientPos - containerRect.top;\n\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return 0;\n\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const halfChild = childSize / 2;\n    let closestIndex = 0;\n    let closestDistance = Infinity;\n\n    for (let i = 0; i < snapPositions.length; i++) {\n      const snapCenter = snapPositions[i] + halfChild;\n      const distance = Math.abs(offsetInAxis - snapCenter);\n      if (distance < closestDistance) {\n        closestDistance = distance;\n        closestIndex = i;\n      }\n    }\n\n    return closestIndex;\n  }\n\n  private _clampChildPosition(position: number): number {\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const maxPosition = containerSize - childSize;\n    return Math.max(0, Math.min(position, maxPosition));\n  }\n\n  private _updateChildPosition(index: number): void {\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return;\n\n    const clampedIndex = Math.max(0, Math.min(index, snapPositions.length - 1));\n    const position = snapPositions[clampedIndex];\n\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    if (this._isHorizontal) {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.left = `${clampedPosition}px`;\n      child.style.top = `0px`;\n    } else {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.top = `${clampedPosition}px`;\n      child.style.left = `0px`;\n    }\n    child.style.setProperty(`--snap-index`, String(clampedIndex));\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    const containerRect = this.getBoundingClientRect();\n    const newIndex = this._getSnapIndex(\n      this._isHorizontal ? e.clientX : e.clientY,\n      containerRect,\n    );\n\n    if (child.contains(e.target as Node)) {\n      e.preventDefault();\n      e.stopPropagation();\n      this._dragging = true;\n      this._thresholdReached = false;\n      this._dragStart = this._isHorizontal ? e.clientX : e.clientY;\n      this._currentDragIndex = newIndex;\n      child.classList.add(`dragging`);\n\n      document.addEventListener(`pointermove`, this._onPointerMove);\n      document.addEventListener(`pointerup`, this._onPointerUp);\n    } else {\n      let targetIndex: number;\n\n      if (this.clickSnap === `step`) {\n        targetIndex = this.snap;\n        const childRect = child.getBoundingClientRect();\n        const childCenter = this._isHorizontal\n          ? childRect.left + childRect.width / 2\n          : childRect.top + childRect.height / 2;\n        const clickPos = this._isHorizontal ? e.clientX : e.clientY;\n\n        if (clickPos > childCenter) {\n          targetIndex = Math.min(this.snapPositions - 1, this.snap + 1);\n        } else if (clickPos < childCenter) {\n          targetIndex = Math.max(0, this.snap - 1);\n        }\n      } else {\n        targetIndex = newIndex;\n      }\n\n      if (targetIndex !== this.snap) {\n        const previousSnap = this.snap;\n        this.snap = targetIndex;\n        this._updateChildPosition(this.snap);\n\n        this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n          detail: { previousSnap, newSnap: this.snap },\n          bubbles: true,\n          composed: true,\n        }));\n      } else {\n        this._updateChildPosition(this.snap);\n      }\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n\n    const currentPos = this._isHorizontal ? e.clientX : e.clientY;\n    const delta = currentPos - this._dragStart;\n    const containerRect = this.getBoundingClientRect();\n\n    if (!this._thresholdReached && Math.abs(delta) < this._dragThreshold) {\n      return;\n    }\n\n    this._thresholdReached = true;\n\n    const newIndex = this._getSnapIndex(currentPos, containerRect);\n    this._currentDragIndex = newIndex;\n    this._updateChildPosition(newIndex);\n\n    this.dispatchEvent(new CustomEvent<SnapInputDetail>(`snap-input`, {\n      detail: { index: newIndex },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onPointerUp = (): void => {\n    if (!this._dragging)\n      return;\n\n    this._dragging = false;\n    const child = this._getChild();\n    if (child)\n      child.classList.remove(`dragging`);\n\n    document.removeEventListener(`pointermove`, this._onPointerMove);\n    document.removeEventListener(`pointerup`, this._onPointerUp);\n\n    if (this._thresholdReached && this._currentDragIndex !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = this._currentDragIndex;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    } else {\n      this._updateChildPosition(this.snap);\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    let newSnap = this.snap;\n\n    if (this._isHorizontal) {\n      if (e.key === `ArrowLeft`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowRight`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    } else {\n      if (e.key === `ArrowUp`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowDown`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    }\n\n    e.preventDefault();\n\n    if (newSnap !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = newSnap;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  override firstUpdated(): void {\n    this._child = this.firstElementChild as HTMLElement | null;\n    this._updateChildPosition(this.snap);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`snap`) && !this._dragging) {\n      this._updateChildPosition(this.snap);\n    }\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div \n        class=\"container\"\n        @pointerdown=${this._onPointerDown}\n        tabindex=\"0\"\n        @keydown=${this._onKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport type SnapChangeDetail = {\n  readonly previousSnap: number;\n  readonly newSnap: number;\n};\n\nexport type SnapChangeEvent = CustomEvent<SnapChangeDetail>;\n\nexport type SnapInputDetail = {\n  readonly index: number;\n};\n\nexport type SnapInputEvent = CustomEvent<SnapInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-snap-container': SnapContainer;\n  }\n}\n"],"mappings":"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"}

package/dist/split-layout.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
-
 //#region src/split-layout/split-layout.d.ts
 /**
  * Lays out two elements within a container, with a bar to resize them
@@ -55,7 +54,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ixfx-split-layout": SplitLayoutElement;
   }
-} //# sourceMappingURL=split-layout.d.ts.map
+}
 //#endregion
 export { SplitLayoutElement };
 //# sourceMappingURL=split-layout.d.ts.map

package/dist/split-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;cACa,kBAAA,SAA2B,UAAA;EAAA;EAEtC,MAAA;EAGA,KAAA;EAGA,KAAA;EAGA,MAAA;EAGA,MAAA;EAGA,WAAA;EAGA,UAAA;EAGA,UAAA;EAGA,QAAA;EAGA,QAAA;EAGA,QAAA;EAGA,QAAA;EAAA,QAGQ,UAAA;EAAA,YAEI,cAAA;EAuBZ,oBAAA;EAKA,YAAA;EAIA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAgP3B,OAAA,IAAW,WAAA;EAsRX,MAAA,kBAAM,cAAA;EAAA,OAyCC,MAAA,gBAAM,SAAA;AAAA;AAAA,QA8IP,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,kBAAkB;EAAA;AAAA"}
+{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmCa,2BAA2B;;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;UAGQ;cAEI;EAuBZ;EAKA;EAIA,QAAQ,mBAAmB;EAgP3B,WAAW;EAsRX,wBAAM;SAyCC,sBAAM;;QA8IP;YACI;IACR,qBAAqB"}

package/dist/split-layout.js

@@ -1,5 +1,5 @@
 import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.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";
@@ -49,7 +49,8 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 			if (!bounds) return;
 			const threshold = 5;
 			if (this.layout === `horizontal`) {
-				const relativeY = clamp((event.y - bounds.y) / bounds.height);
+				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;
@@ -87,7 +88,8 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 					this.#collapsedBPointerAtCollapse = relativeY;
 				}
 			} else {
-				const relativeX = clamp((event.x - bounds.x) / bounds.width);
+				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;