@ixfx/components 0.2.3 → 0.2.5

package/dist/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","names":["#value"],"sources":["../src/range/range.ts"],"sourcesContent":["import type { TooltipOrientations } from \"../util/tooltip.js\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { tooltipValueStyles } from \"../styles/tooltip.js\";\n\n@customElement(`ixfx-range`)\nexport class RangeElement extends LitElement {\n  @property({ type: Boolean })\n  tooltip = true;\n\n  @property({ type: String, attribute: `tooltip-orientation` })\n  tooltipOrientation: TooltipOrientations = `top`;\n\n  @property({ type: String, reflect: true })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Boolean, attribute: true })\n  disabled = false;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  set value(v: number) {\n    this.#value = v;\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  #value = 0;\n\n  @property({ type: Number })\n  step = 0;\n\n  onRangeInput(event: InputEvent) {\n    const valueNum = (event.target as HTMLInputElement).valueAsNumber;\n    const valueStr = (event.target as HTMLInputElement).value;\n    this.#value = valueNum;\n\n    if (this.tooltip) {\n      const o = this.shadowRoot?.querySelector(`output`);\n      if (o) {\n        o.value = valueStr;\n      } else {\n        console.warn(`Output element not found`);\n      }\n    }\n  }\n\n  protected render(): unknown {\n    const tt = this.tooltip\n      ? html`<ixfx-tooltip\n          style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n          .orientation=${this.tooltipOrientation}\n          anchor=\"--thumb-tooltip\"\n          .value=${this.value}></ixfx-tooltip>`\n      : nothing;\n    const verticalStyle = this.orientation === `vertical`\n      ? `writing-mode: vertical-lr; direction: rtl;`\n      : nothing;\n    return html`\n      <input ?disabled=${this.disabled} step=${this.step} min=${this.min} max=${this.max} value=${this.value} @input=${this.onRangeInput} type=\"range\" style=${verticalStyle}>\n      ${tt}\n    `;\n  }\n\n  static styles = [\n    prominenceStyles,\n    tooltipValueStyles,\n    css`\n    :host {\n      display: inline-block;\n      --value-label-color: unset;\n      --thumb-background: ButtonFace;\n      --thumb-radius: 50%;\n      --thumb-width: 1em;\n      --thumb-height: 1em;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      display: block;\n      width: 1.5em;\n      height: 200px;\n    }\n\n    [type=\"range\"] {\n      width: 100%;\n      height: 1.5em;\n      accent-color: var(--accent, AccentColor);\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"] {\n      writing-mode: vertical-lr;\n      direction: rtl;\n      width: 1.5em;\n      height: 100%;\n    }\n\n    [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      box-shadow: var(--shadow-m);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]:focus {\n      outline: none;\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementMap {\n    \"ixfx-range\": RangeElement;\n  }\n}\n"],"mappings":";;;;;;AAOO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;iBAEjC;4BAGgC;qBAGD;kBAG9B;aAGL;aAGA;gBAWG;cAGF;;CAZP,IACI,MAAM,GAAW;AACnB,QAAA,QAAc;;CAGhB,IAAI,QAAQ;AACV,SAAO,MAAA;;CAGT;CAKA,aAAa,OAAmB;EAC9B,MAAM,WAAY,MAAM,OAA4B;EACpD,MAAM,WAAY,MAAM,OAA4B;AACpD,QAAA,QAAc;AAEd,MAAI,KAAK,SAAS;GAChB,MAAM,IAAI,KAAK,YAAY,cAAc,SAAS;AAClD,OAAI,EACF,GAAE,QAAQ;OAEV,SAAQ,KAAK,2BAA2B;;;CAK9C,SAA4B;EAC1B,MAAM,KAAK,KAAK,UACZ,IAAI;;yBAEa,KAAK,mBAAmB;;mBAE9B,KAAK,MAAM,oBACtB;EACJ,MAAM,gBAAgB,KAAK,gBAAgB,aACvC,+CACA;AACJ,SAAO,IAAI;yBACU,KAAK,SAAS,QAAQ,KAAK,KAAK,OAAO,KAAK,IAAI,OAAO,KAAK,IAAI,SAAS,KAAK,MAAM,UAAU,KAAK,aAAa,sBAAsB,cAAc;QACrK,GAAG;;;;gBAIO;GACd;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DJ;;;YA/HA,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,aAAA,WAAA,WAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,CAAC,CAAA,EAAA,aAAA,WAAA,sBAAA,KAAA,EAAA;YAG5D,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;YAGzC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,YAAA,KAAA,EAAA;YAG5C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,OAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,OAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,SAAA,KAAA;YAW1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,QAAA,KAAA,EAAA;2BA/B5B,cAAc,aAAa,CAAA,EAAA,aAAA"}

package/dist/registry-CZEB1YI9.js

@@ -0,0 +1,21 @@
+//#region src/icons/registry.ts
+const _registry = /* @__PURE__ */ new Map();
+const iconBus = new EventTarget();
+function registerIcon(name, svg) {
+	_registry.set(name, svg);
+	iconBus.dispatchEvent(new CustomEvent(`ixfx-icon-change`, { detail: { name } }));
+}
+function getIcon(name) {
+	return _registry.get(name);
+}
+function hasIcon(name) {
+	return _registry.has(name);
+}
+/** Converts an SVG string to a CSS data-URI value, e.g. for use as a mask-image. */
+function svgToDataUri(svg) {
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+//#endregion
+export { svgToDataUri as a, registerIcon as i, hasIcon as n, iconBus as r, getIcon as t };
+
+//# sourceMappingURL=registry-CZEB1YI9.js.map

package/dist/registry-CZEB1YI9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-CZEB1YI9.js","names":[],"sources":["../src/icons/registry.ts"],"sourcesContent":["const _registry = new Map<string, string>();\n\nexport const iconBus = new EventTarget();\n\nexport type IconChangedDetail = { readonly name: string };\nexport type IconChangedEvent = CustomEvent<IconChangedDetail>;\n\nexport function registerIcon(name: string, svg: string): void {\n  _registry.set(name, svg);\n  iconBus.dispatchEvent(new CustomEvent<IconChangedDetail>(`ixfx-icon-change`, { detail: { name } }));\n}\n\nexport function getIcon(name: string): string | undefined {\n  return _registry.get(name);\n}\n\nexport function hasIcon(name: string): boolean {\n  return _registry.has(name);\n}\n\n/** Converts an SVG string to a CSS data-URI value, e.g. for use as a mask-image. */\nexport function svgToDataUri(svg: string): string {\n  return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n}\n"],"mappings":";AAAA,MAAM,4BAAY,IAAI,KAAqB;AAE3C,MAAa,UAAU,IAAI,aAAa;AAKxC,SAAgB,aAAa,MAAc,KAAmB;AAC5D,WAAU,IAAI,MAAM,IAAI;AACxB,SAAQ,cAAc,IAAI,YAA+B,oBAAoB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;;AAGrG,SAAgB,QAAQ,MAAkC;AACxD,QAAO,UAAU,IAAI,KAAK;;AAG5B,SAAgB,QAAQ,MAAuB;AAC7C,QAAO,UAAU,IAAI,KAAK;;;AAI5B,SAAgB,aAAa,KAAqB;AAChD,QAAO,2BAA2B,mBAAmB,IAAI,CAAC"}

package/dist/selecthorizontal.d.ts

@@ -1,12 +1,17 @@
+import * as _$lit from "lit";
 import { LitElement } from "lit";
-export declare class SelectHorizontalElement extends LitElement {
-    editMode: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+
+//#region src/selecthorizontal.d.ts
+declare class SelectHorizontalElement extends LitElement {
+  editMode: boolean;
+  render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ixfx-selecthorizontal-element": SelectHorizontalElement;
-    }
-}
+  interface HTMLElementTagNameMap {
+    "ixfx-selecthorizontal-element": SelectHorizontalElement;
+  }
+} //# sourceMappingURL=selecthorizontal.d.ts.map
+//#endregion
+export { SelectHorizontalElement };
 //# sourceMappingURL=selecthorizontal.d.ts.map

package/dist/selecthorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selecthorizontal.d.ts","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,uBAAwB,SAAQ,UAAU;IAErD,QAAQ,UAAS;IAGjB,MAAM;IASN,MAAM,CAAC,MAAM,0BAed;CACA;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,uBAAuB,CAAC;KAC1D;CACF"}
+{"version":3,"file":"selecthorizontal.d.ts","names":[],"sources":["../src/selecthorizontal.ts"],"mappings":";;;;cAIa,uBAAA,SAAgC,UAAA;EAE3C,QAAA;EAEA,MAAA,CAAA,GAJmC,KAAA,CAI7B,cAAA;EAAA,OASC,MAAA,EATD,KAAA,CASO,SAAA;AAAA;AAAA,QAkBP,MAAA;EAAA,UACI,qBAAA;IACR,+BAAA,EAAiC,uBAAA;EAAA;AAAA"}

package/dist/selecthorizontal.js

@@ -1,25 +1,22 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement } from "lit";
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+//#region src/selecthorizontal.ts
 let SelectHorizontalElement = class SelectHorizontalElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.editMode = false;
-    }
-    render() {
-        console.log(`render`);
-        return html `
+	constructor(..._args) {
+		super(..._args);
+		this.editMode = false;
+	}
+	render() {
+		console.log(`render`);
+		return html`
     <option>pre</option>
     <slot></slot>
     <option>post</option>
     `;
-    }
-    static { this.styles = css `
+	}
+	static {
+		this.styles = css`
   :host {
     display: flex;
     overflow: scroll;
@@ -31,16 +28,15 @@ let SelectHorizontalElement = class SelectHorizontalElement extends LitElement {
   ::slotted(*),option {
     user-select: none;
     scroll-snap-align: start;
-    border: 1px solid silver;
-    color:red;
+    border: var(--border);
+    color: var(--accent);
   }
-`; }
+`;
+	}
 };
-__decorate([
-    property({ type: Boolean })
-], SelectHorizontalElement.prototype, "editMode", void 0);
-SelectHorizontalElement = __decorate([
-    customElement('ixfx-selecthorizontal-element')
-], SelectHorizontalElement);
+__decorate([property({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
+SelectHorizontalElement = __decorate([customElement(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
+//#endregion
 export { SelectHorizontalElement };
+
 //# sourceMappingURL=selecthorizontal.js.map

package/dist/selecthorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"selecthorizontal.js","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAEL,aAAQ,GAAG,KAAK,CAAC;IA4BnB,CAAC;IAzBC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAepB,AAfc,CAed;;AA3BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACX;AAFN,uBAAuB;IADnC,aAAa,CAAC,+BAA+B,CAAC;GAClC,uBAAuB,CA8BnC"}
+{"version":3,"file":"selecthorizontal.js","names":[],"sources":["../src/selecthorizontal.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\n@customElement(`ixfx-selecthorizontal-element`)\nexport class SelectHorizontalElement extends LitElement {\n  @property({ type: Boolean })\n  editMode = false;\n\n  render() {\n    console.log(`render`);\n    return html`\n    <option>pre</option>\n    <slot></slot>\n    <option>post</option>\n    `;\n  }\n\n  static styles = css`\n  :host {\n    display: flex;\n    overflow: scroll;\n    width: 100%;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n  }\n  \n  ::slotted(*),option {\n    user-select: none;\n    scroll-snap-align: start;\n    border: var(--border);\n    color: var(--accent);\n  }\n`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-selecthorizontal-element\": SelectHorizontalElement;\n  }\n}"],"mappings":";;;;AAIO,IAAA,0BAAA,MAAM,gCAAgC,WAAW;;;kBAE3C;;CAEX,SAAS;AACP,UAAQ,IAAI,SAAS;AACrB,SAAO,IAAI;;;;;;;gBAOG,GAAG;;;;;;;;;;;;;;;;;;YAZlB,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,YAAA,KAAA,EAAA;sCAF7B,cAAc,gCAAgC,CAAA,EAAA,wBAAA"}

package/dist/snap-container.d.ts

@@ -0,0 +1,50 @@
+import * as _$lit from "lit";
+import { LitElement, html } from "lit";
+
+//#region src/snap-container/snap-container.d.ts
+type SnapLogic = `centre` | `balanced`;
+type ClickSnapMode = `closest` | `step`;
+declare class SnapContainer extends LitElement {
+  static styles: _$lit.CSSResult;
+  orientation: `horizontal` | `vertical`;
+  snapPositions: number;
+  snapLogic: SnapLogic;
+  clickSnap: `closest` | `step`;
+  snap: number;
+  private _dragging;
+  private _dragStart;
+  private _dragThreshold;
+  private _thresholdReached;
+  private _currentDragIndex;
+  private _child;
+  private get _isHorizontal();
+  private _getChild;
+  private _computeSnapPositions;
+  private _getSnapIndex;
+  private _clampChildPosition;
+  private _updateChildPosition;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _onKeyDown;
+  firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  render(): ReturnType<typeof html>;
+}
+type SnapChangeDetail = {
+  readonly previousSnap: number;
+  readonly newSnap: number;
+};
+type SnapChangeEvent = CustomEvent<SnapChangeDetail>;
+type SnapInputDetail = {
+  readonly index: number;
+};
+type SnapInputEvent = CustomEvent<SnapInputDetail>;
+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

@@ -0,0 +1 @@
+{"version":3,"file":"snap-container.d.ts","names":[],"sources":["../src/snap-container/snap-container.ts"],"mappings":";;;;KAGY,SAAA;AAAA,KACA,aAAA;AAAA,cAGC,aAAA,SAAsB,UAAA;EAAA,OACjB,MAAA,EADS,KAAA,CACH,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,CAAA;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,CAAA;EAKA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAM3B,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAc3B,gBAAA;EAAA,SACD,YAAA;EAAA,SACA,OAAA;AAAA;AAAA,KAGC,eAAA,GAAkB,WAAA,CAAY,gBAAA;AAAA,KAE9B,eAAA;EAAA,SACD,KAAA;AAAA;AAAA,KAGC,cAAA,GAAiB,WAAA,CAAY,eAAA;AAAA,QAEjC,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAA;EAAA;AAAA"}

package/dist/snap-container.js

@@ -0,0 +1,297 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/snap-container/snap-container.ts
+let SnapContainer = class SnapContainer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.snapPositions = 3;
+		this.snapLogic = `balanced`;
+		this.clickSnap = `closest`;
+		this.snap = 0;
+		this._dragging = false;
+		this._dragStart = 0;
+		this._dragThreshold = 10;
+		this._thresholdReached = false;
+		this._currentDragIndex = 0;
+		this._child = null;
+		this._onPointerDown = (e) => {
+			const child = this._getChild();
+			if (!child) return;
+			const containerRect = this.getBoundingClientRect();
+			const newIndex = this._getSnapIndex(this._isHorizontal ? e.clientX : e.clientY, containerRect);
+			if (child.contains(e.target)) {
+				e.preventDefault();
+				e.stopPropagation();
+				this._dragging = true;
+				this._thresholdReached = false;
+				this._dragStart = this._isHorizontal ? e.clientX : e.clientY;
+				this._currentDragIndex = newIndex;
+				child.classList.add(`dragging`);
+				document.addEventListener(`pointermove`, this._onPointerMove);
+				document.addEventListener(`pointerup`, this._onPointerUp);
+			} else {
+				let targetIndex;
+				if (this.clickSnap === `step`) {
+					targetIndex = this.snap;
+					const childRect = child.getBoundingClientRect();
+					const childCenter = this._isHorizontal ? childRect.left + childRect.width / 2 : childRect.top + childRect.height / 2;
+					const clickPos = this._isHorizontal ? e.clientX : e.clientY;
+					if (clickPos > childCenter) targetIndex = Math.min(this.snapPositions - 1, this.snap + 1);
+					else if (clickPos < childCenter) targetIndex = Math.max(0, this.snap - 1);
+				} else targetIndex = newIndex;
+				if (targetIndex !== this.snap) {
+					const previousSnap = this.snap;
+					this.snap = targetIndex;
+					this._updateChildPosition(this.snap);
+					this.dispatchEvent(new CustomEvent(`snap-change`, {
+						detail: {
+							previousSnap,
+							newSnap: this.snap
+						},
+						bubbles: true,
+						composed: true
+					}));
+				} else this._updateChildPosition(this.snap);
+			}
+		};
+		this._onPointerMove = (e) => {
+			if (!this._dragging) return;
+			const currentPos = this._isHorizontal ? e.clientX : e.clientY;
+			const delta = currentPos - this._dragStart;
+			const containerRect = this.getBoundingClientRect();
+			if (!this._thresholdReached && Math.abs(delta) < this._dragThreshold) return;
+			this._thresholdReached = true;
+			const newIndex = this._getSnapIndex(currentPos, containerRect);
+			this._currentDragIndex = newIndex;
+			this._updateChildPosition(newIndex);
+			this.dispatchEvent(new CustomEvent(`snap-input`, {
+				detail: { index: newIndex },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onPointerUp = () => {
+			if (!this._dragging) return;
+			this._dragging = false;
+			const child = this._getChild();
+			if (child) child.classList.remove(`dragging`);
+			document.removeEventListener(`pointermove`, this._onPointerMove);
+			document.removeEventListener(`pointerup`, this._onPointerUp);
+			if (this._thresholdReached && this._currentDragIndex !== this.snap) {
+				const previousSnap = this.snap;
+				this.snap = this._currentDragIndex;
+				this._updateChildPosition(this.snap);
+				this.dispatchEvent(new CustomEvent(`snap-change`, {
+					detail: {
+						previousSnap,
+						newSnap: this.snap
+					},
+					bubbles: true,
+					composed: true
+				}));
+			} else this._updateChildPosition(this.snap);
+		};
+		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);
+			else if (e.key === `ArrowDown`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
+			else return;
+			e.preventDefault();
+			if (newSnap !== this.snap) {
+				const previousSnap = this.snap;
+				this.snap = newSnap;
+				this._updateChildPosition(this.snap);
+				this.dispatchEvent(new CustomEvent(`snap-change`, {
+					detail: {
+						previousSnap,
+						newSnap: this.snap
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      touch-action: none;
+      user-select: none;
+      --transition-duration: 200ms;
+    }
+    
+    :host([orientation="horizontal"]) {
+      width: 100%;
+      height: auto;
+      min-height: 25px;
+    }
+    
+    :host([orientation="vertical"]) {
+      height: 100%;
+      width: auto;
+      min-width: 25px;
+    }
+    
+    :host(:not([orientation])) {
+      width: 100%;
+      min-height: 25px;
+    }
+    
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+      min-width: inherit;
+    }
+    
+    ::slotted(*) {
+      position: absolute;
+      transition: left var(--transition-duration) ease-out, 
+                  top var(--transition-duration) ease-out;
+      cursor: grab;
+      will-change: left, top;
+    }
+    
+    ::slotted(*:active) {
+      cursor: grabbing;
+    }
+    
+    :host([orientation="vertical"]) ::slotted(*) {
+      transition: top var(--transition-duration) ease-out,
+                  left var(--transition-duration) ease-out;
+    }
+    
+    .dragging {
+      transition: none !important;
+    }
+  `;
+	}
+	get _isHorizontal() {
+		return this.orientation !== `vertical`;
+	}
+	_getChild() {
+		if (this._child) return this._child;
+		return this.firstElementChild;
+	}
+	_computeSnapPositions() {
+		const positions = [];
+		const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;
+		const child = this._getChild();
+		const childSize = child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0;
+		if (containerSize === 0 || childSize === 0) return [];
+		const availableSpace = containerSize - childSize;
+		if (this.snapLogic === `centre`) for (let i = 0; i < this.snapPositions; i++) {
+			const fraction = i / (this.snapPositions - 1 || 1);
+			positions.push(fraction * availableSpace);
+		}
+		else {
+			const firstPosition = 0;
+			const lastPosition = availableSpace;
+			if (this.snapPositions === 1) positions.push(availableSpace / 2);
+			else if (this.snapPositions === 2) positions.push(firstPosition, lastPosition);
+			else {
+				positions.push(firstPosition);
+				const middleCount = this.snapPositions - 2;
+				for (let i = 1; i <= middleCount; i++) {
+					const fraction = i / (middleCount + 1);
+					positions.push(firstPosition + fraction * (lastPosition - firstPosition));
+				}
+				positions.push(lastPosition);
+			}
+		}
+		return positions;
+	}
+	_getSnapIndex(clientPos, containerRect) {
+		const offsetInAxis = this._isHorizontal ? clientPos - containerRect.left : clientPos - containerRect.top;
+		const snapPositions = this._computeSnapPositions();
+		if (snapPositions.length === 0) return 0;
+		const child = this._getChild();
+		const halfChild = (child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0) / 2;
+		let closestIndex = 0;
+		let closestDistance = Infinity;
+		for (let i = 0; i < snapPositions.length; i++) {
+			const snapCenter = snapPositions[i] + halfChild;
+			const distance = Math.abs(offsetInAxis - snapCenter);
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closestIndex = i;
+			}
+		}
+		return closestIndex;
+	}
+	_clampChildPosition(position) {
+		const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;
+		const child = this._getChild();
+		const maxPosition = containerSize - (child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0);
+		return Math.max(0, Math.min(position, maxPosition));
+	}
+	_updateChildPosition(index) {
+		const snapPositions = this._computeSnapPositions();
+		if (snapPositions.length === 0) return;
+		const clampedIndex = Math.max(0, Math.min(index, snapPositions.length - 1));
+		const position = snapPositions[clampedIndex];
+		const child = this._getChild();
+		if (!child) return;
+		if (this._isHorizontal) {
+			const clampedPosition = this._clampChildPosition(position);
+			child.style.left = `${clampedPosition}px`;
+			child.style.top = `0px`;
+		} else {
+			const clampedPosition = this._clampChildPosition(position);
+			child.style.top = `${clampedPosition}px`;
+			child.style.left = `0px`;
+		}
+		child.style.setProperty(`--snap-index`, String(clampedIndex));
+	}
+	firstUpdated() {
+		this._child = this.firstElementChild;
+		this._updateChildPosition(this.snap);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`snap`) && !this._dragging) this._updateChildPosition(this.snap);
+	}
+	render() {
+		return html`
+      <div 
+        class="container"
+        @pointerdown=${this._onPointerDown}
+        tabindex="0"
+        @keydown=${this._onKeyDown}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `orientation`
+})], SnapContainer.prototype, "orientation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `snap-positions`
+})], SnapContainer.prototype, "snapPositions", void 0);
+__decorate([property({
+	type: String,
+	attribute: `snap-logic`
+})], SnapContainer.prototype, "snapLogic", void 0);
+__decorate([property({
+	type: String,
+	attribute: `click-snap`
+})], SnapContainer.prototype, "clickSnap", void 0);
+__decorate([property({ type: Number })], SnapContainer.prototype, "snap", void 0);
+__decorate([state()], SnapContainer.prototype, "_dragging", void 0);
+SnapContainer = __decorate([customElement(`ixfx-snap-container`)], SnapContainer);
+//#endregion
+export { SnapContainer };
+
+//# sourceMappingURL=snap-container.js.map

package/dist/snap-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-container.js","names":[],"sources":["../src/snap-container/snap-container.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.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}"],"mappings":"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"}

package/dist/split-layout.d.ts

@@ -0,0 +1,56 @@
+import * as _$lit from "lit";
+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
+ * proportionally.
+ *
+ * Events
+ * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.
+ *   detail: { panel: 'A' | 'B', collapsed: boolean }
+ *
+ * Attributes
+ * layout: `vertical`|`horizontal`
+ * sizeA/B: CSS size of section A or B. Can use relative or absolute values
+ * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)
+ * minSizeA/B: Minimum size for panel A or B (e.g., "100px" or "20%"). Default: none
+ * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
+ *
+ * CSS variables
+ * --handle-size: 2px;              // Width/height of resize handle
+ * --handle-colour: var(--surface-5);     // Colour of handle
+ * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
+ * --handle-active-colour: var(--accent);    // Colour of handle when being used
+ */
+declare class SplitLayoutElement extends LitElement {
+  #private;
+  layout: `vertical` | `horizontal`;
+  sizeA: string;
+  sizeB: string;
+  fixedA: boolean;
+  fixedB: boolean;
+  collapsible: boolean;
+  collapsedA: boolean;
+  collapsedB: boolean;
+  minSizeA: string;
+  maxSizeA: string;
+  minSizeB: string;
+  maxSizeB: string;
+  private _hasCorner;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  getZone(): HTMLElement | undefined;
+  render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
+}
+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

@@ -0,0 +1 @@
+{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;;;AA2BA;;;;;;;;;;;;;;;;;;;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;EAmBR,oBAAA,CAAA;EAKA,YAAA,CAAA;EAIA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAgP3B,OAAA,CAAA,GAAW,WAAA;EAsRX,MAAA,CAAA,GAtRsB,KAAA,CAsRhB,cAAA;EAAA,OA+BC,MAAA,EA/BD,KAAA,CA+BO,SAAA;AAAA;AAAA,QAqFP,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,kBAAA;EAAA;AAAA"}