@ixfx/components 0.2.5 → 0.3.0

package/dist/snap-container.js.map

@@ -1 +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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"}
+{"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,4 +1,3 @@
-import * as _$lit from "lit";
 import { LitElement } from "lit";
 
 //#region src/split-layout/split-layout.d.ts
@@ -43,8 +42,8 @@ declare class SplitLayoutElement extends LitElement {
   firstUpdated(): void;
   updated(changedProperties: Map<string, unknown>): void;
   getZone(): HTMLElement | undefined;
-  render(): _$lit.TemplateResult<1>;
-  static styles: _$lit.CSSResult;
+  render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
 }
 declare global {
   interface HTMLElementTagNameMap {

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":";;;;;;;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"}
+{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;AA4BA;;;;;;;;;;;;;;;;;;;;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,iBAAM,cAAA;EAAA,OA+BC,MAAA,gBAAM,SAAA;AAAA;AAAA,QAqFP,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,kBAAkB;EAAA;AAAA"}

package/dist/split-layout.js

@@ -1,7 +1,7 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import { t as clamp } from "./dist-D7kJgnSE.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { t as clamp } from "./dist-TAGYwaju.js";
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 //#region src/split-layout/split-layout.ts
 let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 	constructor(..._args) {
@@ -173,7 +173,7 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 			const cursorZoneLocalY = event.clientY - zoneBounds.top;
 			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
 				let newOuterFraction = cursorZoneLocalX / outerBounds.width;
-				let newNestedFraction = cursorZoneLocalY / outerBounds.height;
+				const newNestedFraction = cursorZoneLocalY / outerBounds.height;
 				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.width);
 				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);
 				this.sizeA = constrainedA;
@@ -189,7 +189,7 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
 				}
 			} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
-				let newNestedFraction = cursorZoneLocalX / outerBounds.width;
+				const newNestedFraction = cursorZoneLocalX / outerBounds.width;
 				let newOuterFraction = cursorZoneLocalY / outerBounds.height;
 				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.height);
 				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);
@@ -538,7 +538,7 @@ __decorate([property({ type: String })], SplitLayoutElement.prototype, "maxSizeA
 __decorate([property({ type: String })], SplitLayoutElement.prototype, "minSizeB", void 0);
 __decorate([property({ type: String })], SplitLayoutElement.prototype, "maxSizeB", void 0);
 __decorate([state()], SplitLayoutElement.prototype, "_hasCorner", void 0);
-SplitLayoutElement = __decorate([customElement(`ixfx-split-layout`)], SplitLayoutElement);
+SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
 //#endregion
 export { SplitLayoutElement };
 

package/dist/split-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-layout.js","names":["#elementBounds","#startSizeA","#startSizeB","#onResizeHandleUp","#onResizeHandleMove","#collapsedAPointerAtCollapse","#hysteresisThreshold","#dispatchCollapsedEvent","#applyConstraints","#collapsedBPointerAtCollapse","#cornerStartX","#cornerStartY","#getNestedSplit","#nestedSplitInitialSizeA","#nestedSplitBounds","#nestedHandleBounds","#onCornerResizeUp","#onCornerResizeMove","#parseSizeAsFraction","#pendingNestedUpdate","#applyPendingNestedUpdate","#observer","#setupNestedSplitObserver","#updateCornerPosition","#updateDataCollapsed","#checkForNestedSplit","#nestedSplit","#minSizeToFraction","#maxSizeToFraction","#parseSizeToPx","#getIntersectionPoint","#onCornerResizeDown","#onResizeHandleDown"],"sources":["../src/split-layout/split-layout.ts"],"sourcesContent":["import { clamp } from \"@ixfx/numbers\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\n// TODO: Fire event when panels have been resized\n/**\n * Lays out two elements within a container, with a bar to resize them\n * proportionally.\n *\n * Events\n * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.\n *   detail: { panel: 'A' | 'B', collapsed: boolean }\n *\n * Attributes\n * layout: `vertical`|`horizontal`\n * sizeA/B: CSS size of section A or B. Can use relative or absolute values\n * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole\n * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)\n * minSizeA/B: Minimum size for panel A or B (e.g., \"100px\" or \"20%\"). Default: none\n * maxSizeA/B: Maximum size for panel A or B (e.g., \"200px\" or \"80%\"). Default: none\n *\n * CSS variables\n * --handle-size: 2px;              // Width/height of resize handle\n * --handle-colour: var(--surface-5);     // Colour of handle\n * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering\n * --handle-active-colour: var(--accent);    // Colour of handle when being used\n */\n@customElement(`ixfx-split-layout`)\nexport class SplitLayoutElement extends LitElement {\n  @property({ type: String })\n  layout: `vertical` | `horizontal` = `vertical`;\n\n  @property({ type: String })\n  sizeA = ``;\n\n  @property({ type: String })\n  sizeB = ``;\n\n  @property({ type: Boolean })\n  fixedA = false;\n\n  @property({ type: Boolean })\n  fixedB = false;\n\n  @property({ type: Boolean })\n  collapsible = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedA = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedB = false;\n\n  @property({ type: String })\n  minSizeA = ``;\n\n  @property({ type: String })\n  maxSizeA = ``;\n\n  @property({ type: String })\n  minSizeB = ``;\n\n  @property({ type: String })\n  maxSizeB = ``;\n\n  @state()\n  private _hasCorner = false;\n\n  #elementBounds: DOMRect | undefined;\n  #startSizeA = ``;\n  #startSizeB = ``;\n  #cornerStartX = 0;\n  #cornerStartY = 0;\n  #nestedSplitInitialSizeA = ``;\n\n  #cornerZone: HTMLElement | undefined;\n  #nestedSplit: SplitLayoutElement | undefined;\n  #nestedSplitBounds: DOMRect | undefined;\n  #nestedHandleBounds: DOMRect | undefined;\n  #observer: MutationObserver | undefined;\n  #pendingNestedUpdate: { sizeA: number; sizeB: number } | null = null;\n  #collapsedAPointerAtCollapse: number | undefined;\n  #collapsedBPointerAtCollapse: number | undefined;\n  #hysteresisThreshold = 0.1;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observer?.disconnect();\n  }\n\n  firstUpdated() {\n    this.#setupNestedSplitObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)\n      || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) {\n      this.#updateCornerPosition();\n    }\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) {\n      this.#updateDataCollapsed();\n    }\n  }\n\n  #updateDataCollapsed() {\n    if (this.collapsedA) {\n      this.setAttribute(`data-collapsed-a`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-a`);\n    }\n    if (this.collapsedB) {\n      this.setAttribute(`data-collapsed-b`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-b`);\n    }\n  }\n\n  #dispatchCollapsedEvent(panel: `A` | `B`, collapsed: boolean) {\n    this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {\n      detail: { panel, collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #setupNestedSplitObserver() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    this.#observer = new MutationObserver(() => {\n      this.#checkForNestedSplit();\n    });\n\n    this.#observer.observe(slotA, { characterData: true, childList: true, subtree: true });\n    this.#checkForNestedSplit();\n  }\n\n  #checkForNestedSplit() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    const assignedElements = slotA.assignedElements();\n\n    const findNestedSplit = (elements: Element[]): SplitLayoutElement | undefined => {\n      for (const el of elements) {\n        if (el.tagName === `IXFX-SPLIT-LAYOUT`) {\n          return el as SplitLayoutElement;\n        }\n        const nested = findNestedSplit(Array.from(el.children));\n        if (nested)\n          return nested;\n      }\n      return undefined;\n    };\n\n    const nestedSplit = findNestedSplit(assignedElements);\n\n    if (nestedSplit) {\n      this.#nestedSplit = nestedSplit;\n      this._hasCorner = true;\n      requestAnimationFrame(() => this.#updateCornerPosition());\n    } else {\n      this.#nestedSplit = undefined;\n      this._hasCorner = false;\n    }\n  }\n\n  #getNestedSplit(): SplitLayoutElement | undefined {\n    if (this.#nestedSplit)\n      return this.#nestedSplit;\n\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return undefined;\n    const assignedElements = slotA.assignedElements();\n    return assignedElements.find(\n      el => el.tagName === `IXFX-SPLIT-LAYOUT`,\n    ) as SplitLayoutElement | undefined;\n  }\n\n  #parseSizeAsFraction(size: string, total: number): number {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``)) / total;\n    } else if (size.endsWith(`%`)) {\n      return Number.parseFloat(size.replace(`%`, ``)) / 100;\n    }\n    return 0.5;\n  }\n\n  #parseSizeToPx(size: string, total: number): number | null {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``));\n    } else if (size.endsWith(`%`)) {\n      return (Number.parseFloat(size.replace(`%`, ``)) / 100) * total;\n    }\n    return null;\n  }\n\n  #applyConstraints(sizeA: string, sizeB: string, total: number): { sizeA: string; sizeB: string } {\n    let fractionA = this.#parseSizeAsFraction(sizeA, total);\n    let fractionB = this.#parseSizeAsFraction(sizeB, total);\n\n    const minA = this.#minSizeToFraction(this.minSizeA, total);\n    const minB = this.#minSizeToFraction(this.minSizeB, total);\n    const maxA = this.#maxSizeToFraction(this.maxSizeA, total);\n    const maxB = this.#maxSizeToFraction(this.maxSizeB, total);\n\n    if (minA !== null || minB !== null) {\n      const minSum = (minA ?? 0) + (minB ?? 0);\n      if (minSum > 1) {\n        const scale = 1 / minSum;\n        if (minA !== null)\n          minA !== null ? fractionA = minA * scale : fractionA = 0;\n        if (minB !== null)\n          minB !== null ? fractionB = minB * scale : fractionB = 0;\n      }\n\n      if (fractionA < (minA ?? 0))\n        fractionA = minA ?? 0;\n      if (fractionB < (minB ?? 0))\n        fractionB = minB ?? 0;\n    }\n\n    if (maxA !== null) {\n      if (fractionA > maxA)\n        fractionA = maxA;\n    }\n    if (maxB !== null) {\n      if (fractionB > maxB)\n        fractionB = maxB;\n    }\n\n    fractionB = 1 - fractionA;\n\n    const isPercentA = !this.sizeA.endsWith(`px`);\n    const isPercentB = !this.sizeB.endsWith(`px`);\n\n    if (isPercentA) {\n      return { sizeA: `${fractionA * 100}%`, sizeB: `${fractionB * 100}%` };\n    } else {\n      return { sizeA: `${fractionA * total}px`, sizeB: `${fractionB * total}px` };\n    }\n  }\n\n  #minSizeToFraction(minSize: string, total: number): number | null {\n    if (minSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(minSize, total);\n    if (px !== null)\n      return px / total;\n    if (minSize.endsWith(`%`))\n      return Number.parseFloat(minSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #maxSizeToFraction(maxSize: string, total: number): number | null {\n    if (maxSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(maxSize, total);\n    if (px !== null)\n      return px / total;\n    if (maxSize.endsWith(`%`))\n      return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #getIntersectionPoint(): { x: number; y: number } | null {\n    const outerBounds = this.getBoundingClientRect();\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return null;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (!nestedSplit)\n      return null;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n\n    const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);\n\n    let x: number, y: number;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      x = outerFraction * outerBounds.width;\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height);\n      y = nestedFraction * outerBounds.height;\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width);\n      x = nestedFraction * outerBounds.width;\n      y = outerFraction * outerBounds.height;\n    } else {\n      return null;\n    }\n\n    return { x, y };\n  }\n\n  #updateCornerPosition() {\n    if (!this._hasCorner)\n      return;\n\n    const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n    if (!cornerZone)\n      return;\n\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return;\n\n    const intersection = this.#getIntersectionPoint();\n    if (!intersection) {\n      cornerZone.style.display = `none`;\n      return;\n    }\n\n    const cornerX = intersection.x - 6;\n    const cornerY = intersection.y - 6;\n\n    cornerZone.style.left = `${cornerX}px`;\n    cornerZone.style.top = `${cornerY}px`;\n    cornerZone.style.display = `block`;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n        cornerZone.style.cursor = `nwse-resize`;\n      } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n        cornerZone.style.cursor = `nesw-resize`;\n      }\n    }\n  }\n\n  getZone(): HTMLElement | undefined {\n    if (!this.shadowRoot)\n      return;\n    const el = this.shadowRoot.querySelector(`#zone`);\n    if (!el)\n      return undefined;\n    return el as HTMLElement;\n  }\n\n  #onResizeHandleDown = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n    window.addEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.addEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    window.removeEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.removeEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleMove = (event: PointerEvent) => {\n    const bounds = this.#elementBounds;\n    if (!bounds)\n      return;\n\n    const threshold = 5;\n\n    if (this.layout === `horizontal`) {\n      const y = event.y - bounds.y;\n      const relativeY = clamp(y / bounds.height);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeY > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeY;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeY * 100}%`,\n          `${(1 - relativeY) * 100}%`,\n          bounds.height,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeY < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeY > (1 - threshold / bounds.height)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeY;\n      }\n    } else {\n      const x = event.x - bounds.x;\n      const relativeX = clamp(x / bounds.width);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeX > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeX;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeX * 100}%`,\n          `${(1 - relativeX) * 100}%`,\n          bounds.width,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeX < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeX > (1 - threshold / bounds.width)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeX;\n      }\n    }\n    event.preventDefault();\n  };\n\n  #onCornerResizeDown = (event: PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#cornerStartX = event.clientX;\n    this.#cornerStartY = event.clientY;\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      this.#nestedSplitInitialSizeA = nestedSplit.sizeA;\n      const nestedBounds = nestedSplit.getBoundingClientRect();\n      const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`) as HTMLElement;\n      if (nestedHandle) {\n        this.#nestedSplitBounds = nestedBounds;\n        this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();\n      }\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.add(`user-resizing`);\n      }\n    }\n\n    window.addEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.addEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #onCornerResizeUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.remove(`user-resizing`);\n      }\n    }\n    window.removeEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.removeEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #applyPendingNestedUpdate() {\n    if (!this.#pendingNestedUpdate)\n      return;\n    const { sizeA, sizeB } = this.#pendingNestedUpdate;\n    const nested = this.#getNestedSplit();\n    if (nested) {\n      nested.sizeA = `${sizeA * 100}%`;\n      nested.sizeB = `${sizeB * 100}%`;\n    }\n    this.#pendingNestedUpdate = null;\n  }\n\n  #onCornerResizeMove = (event: PointerEvent) => {\n    const outerBounds = this.#elementBounds;\n    const zoneEl = this.getZone();\n    const nestedSplit = this.#getNestedSplit();\n    if (!outerBounds || !zoneEl || !nestedSplit)\n      return;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n    const cursorZoneLocalX = event.clientX - zoneBounds.left;\n    const cursorZoneLocalY = event.clientY - zoneBounds.top;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      let newOuterFraction = cursorZoneLocalX / outerBounds.width;\n      let newNestedFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.width,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      let newNestedFraction = cursorZoneLocalX / outerBounds.width;\n      let newOuterFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.height,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    }\n\n    event.preventDefault();\n  };\n\n  render() {\n    const sizePrefix = this.layout === `vertical` ? `width` : `height`;\n    let sizeA = this.sizeA;\n    let sizeB = this.sizeB;\n\n    if (this.collapsedA) {\n      sizeA = `0px`;\n    } else if (sizeA.length === 0 && sizeB.length === 0) {\n      sizeB = sizeA = `50%`;\n    } else if (sizeA.length === 0) {\n      sizeA = `auto`;\n    } else if (sizeB.length === 0) {\n      sizeB = `auto`;\n    }\n\n    if (this.collapsedB) {\n      sizeB = `0px`;\n    }\n\n    sizeA = `${sizePrefix}:${sizeA}`;\n    sizeB = `${sizePrefix}:${sizeB}`;\n\n    return html`\n    <div id=\"zone\">\n      <slot style=${sizeA} name=\"a\"></slot>\n      ${this._hasCorner ? html`<div class=\"corner-zone\" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}\n      <div @pointerdown=${this.#onResizeHandleDown} class=\"resize-handle\"></div>\n      <slot style=${sizeB} name=\"b\"></slot> \n    </div>`;\n  }\n\n  static styles = css`\n    :host {\n      --handle-size: 2px;\n      --handle-colour: var(--surface-5);\n      --handle-hover-colour: var(--surface-6);\n      --handle-active-colour: var(--accent);\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n    }\n    * {\n      box-sizing: border-box;\n    }\n    #zone {\n      display: flex;\n      height: 100%;\n      position: relative;\n    }\n    slot {\n      display: block;\n      overflow: hidden;\n    }\n    :slotted(*) {\n      width: 100%;\n      height: 100%;\n    }\n\n    .resize-handle {\n      background-color: var(--handle-colour);\n      width: var(--handle-size);\n      height: 100%;\n      cursor: ew-resize;\n      flex-shrink: 0;\n    }\n    #zone.user-resizing {\n      slot {\n        opacity: 0.5;\n      }\n      .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n    .resize-handle:hover {\n      background-color: var(--handle-hover-colour);\n    }\n\n    .corner-zone {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      z-index: 10;\n      border-radius: 50%;\n      background: transparent;\n    }\n    .corner-zone:hover {\n      background: transparent;\n    }\n\n    :host([layout='horizontal']) {\n      #zone {\n        flex-direction: column;\n      }\n      .resize-handle {\n        background-color: silver;\n        height: var(--handle-size);\n        width: 100%;\n        cursor: ns-resize;\n      }\n      .resize-handle:hover {\n        background-color: var(--handle-hover-colour);\n      }\n      #zone.user-resizing .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n\n    :host([data-collapsed-a]) slot[name=\"a\"],\n    :host([data-collapsed-b]) slot[name=\"b\"] {\n      display: none;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-split-layout\": SplitLayoutElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"split-layout.js","names":["#elementBounds","#startSizeA","#startSizeB","#onResizeHandleUp","#onResizeHandleMove","#collapsedAPointerAtCollapse","#hysteresisThreshold","#dispatchCollapsedEvent","#applyConstraints","#collapsedBPointerAtCollapse","#cornerStartX","#cornerStartY","#getNestedSplit","#nestedSplitInitialSizeA","#nestedSplitBounds","#nestedHandleBounds","#onCornerResizeUp","#onCornerResizeMove","#parseSizeAsFraction","#pendingNestedUpdate","#applyPendingNestedUpdate","#observer","#setupNestedSplitObserver","#updateCornerPosition","#updateDataCollapsed","#checkForNestedSplit","#nestedSplit","#minSizeToFraction","#maxSizeToFraction","#parseSizeToPx","#getIntersectionPoint","#onCornerResizeDown","#onResizeHandleDown","customElement"],"sources":["../src/split-layout/split-layout.ts"],"sourcesContent":["import { clamp } from \"@ixfx/numbers\";\nimport { css, html, LitElement } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n// TODO: Fire event when panels have been resized\n/**\n * Lays out two elements within a container, with a bar to resize them\n * proportionally.\n *\n * Events\n * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.\n *   detail: { panel: 'A' | 'B', collapsed: boolean }\n *\n * Attributes\n * layout: `vertical`|`horizontal`\n * sizeA/B: CSS size of section A or B. Can use relative or absolute values\n * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole\n * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)\n * minSizeA/B: Minimum size for panel A or B (e.g., \"100px\" or \"20%\"). Default: none\n * maxSizeA/B: Maximum size for panel A or B (e.g., \"200px\" or \"80%\"). Default: none\n *\n * CSS variables\n * --handle-size: 2px;              // Width/height of resize handle\n * --handle-colour: var(--surface-5);     // Colour of handle\n * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering\n * --handle-active-colour: var(--accent);    // Colour of handle when being used\n */\n@customElement(`ixfx-split-layout`)\nexport class SplitLayoutElement extends LitElement {\n  @property({ type: String })\n  layout: `vertical` | `horizontal` = `vertical`;\n\n  @property({ type: String })\n  sizeA = ``;\n\n  @property({ type: String })\n  sizeB = ``;\n\n  @property({ type: Boolean })\n  fixedA = false;\n\n  @property({ type: Boolean })\n  fixedB = false;\n\n  @property({ type: Boolean })\n  collapsible = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedA = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedB = false;\n\n  @property({ type: String })\n  minSizeA = ``;\n\n  @property({ type: String })\n  maxSizeA = ``;\n\n  @property({ type: String })\n  minSizeB = ``;\n\n  @property({ type: String })\n  maxSizeB = ``;\n\n  @state()\n  private _hasCorner = false;\n\n  #elementBounds: DOMRect | undefined;\n  #startSizeA = ``;\n  #startSizeB = ``;\n  #cornerStartX = 0;\n  #cornerStartY = 0;\n  #nestedSplitInitialSizeA = ``;\n\n  #cornerZone: HTMLElement | undefined;\n  #nestedSplit: SplitLayoutElement | undefined;\n  #nestedSplitBounds: DOMRect | undefined;\n  #nestedHandleBounds: DOMRect | undefined;\n  #observer: MutationObserver | undefined;\n  #pendingNestedUpdate: { sizeA: number; sizeB: number } | null = null;\n  #collapsedAPointerAtCollapse: number | undefined;\n  #collapsedBPointerAtCollapse: number | undefined;\n  #hysteresisThreshold = 0.1;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observer?.disconnect();\n  }\n\n  firstUpdated() {\n    this.#setupNestedSplitObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)\n      || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) {\n      this.#updateCornerPosition();\n    }\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) {\n      this.#updateDataCollapsed();\n    }\n  }\n\n  #updateDataCollapsed() {\n    if (this.collapsedA) {\n      this.setAttribute(`data-collapsed-a`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-a`);\n    }\n    if (this.collapsedB) {\n      this.setAttribute(`data-collapsed-b`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-b`);\n    }\n  }\n\n  #dispatchCollapsedEvent(panel: `A` | `B`, collapsed: boolean) {\n    this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {\n      detail: { panel, collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #setupNestedSplitObserver() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    this.#observer = new MutationObserver(() => {\n      this.#checkForNestedSplit();\n    });\n\n    this.#observer.observe(slotA, { characterData: true, childList: true, subtree: true });\n    this.#checkForNestedSplit();\n  }\n\n  #checkForNestedSplit() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    const assignedElements = slotA.assignedElements();\n\n    const findNestedSplit = (elements: Element[]): SplitLayoutElement | undefined => {\n      for (const el of elements) {\n        if (el.tagName === `IXFX-SPLIT-LAYOUT`) {\n          return el as SplitLayoutElement;\n        }\n        const nested = findNestedSplit(Array.from(el.children));\n        if (nested)\n          return nested;\n      }\n      return undefined;\n    };\n\n    const nestedSplit = findNestedSplit(assignedElements);\n\n    if (nestedSplit) {\n      this.#nestedSplit = nestedSplit;\n      this._hasCorner = true;\n      requestAnimationFrame(() => this.#updateCornerPosition());\n    } else {\n      this.#nestedSplit = undefined;\n      this._hasCorner = false;\n    }\n  }\n\n  #getNestedSplit(): SplitLayoutElement | undefined {\n    if (this.#nestedSplit)\n      return this.#nestedSplit;\n\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return undefined;\n    const assignedElements = slotA.assignedElements();\n    return assignedElements.find(\n      el => el.tagName === `IXFX-SPLIT-LAYOUT`,\n    ) as SplitLayoutElement | undefined;\n  }\n\n  #parseSizeAsFraction(size: string, total: number): number {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``)) / total;\n    } else if (size.endsWith(`%`)) {\n      return Number.parseFloat(size.replace(`%`, ``)) / 100;\n    }\n    return 0.5;\n  }\n\n  #parseSizeToPx(size: string, total: number): number | null {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``));\n    } else if (size.endsWith(`%`)) {\n      return (Number.parseFloat(size.replace(`%`, ``)) / 100) * total;\n    }\n    return null;\n  }\n\n  #applyConstraints(sizeA: string, sizeB: string, total: number): { sizeA: string; sizeB: string } {\n    let fractionA = this.#parseSizeAsFraction(sizeA, total);\n    let fractionB = this.#parseSizeAsFraction(sizeB, total);\n\n    const minA = this.#minSizeToFraction(this.minSizeA, total);\n    const minB = this.#minSizeToFraction(this.minSizeB, total);\n    const maxA = this.#maxSizeToFraction(this.maxSizeA, total);\n    const maxB = this.#maxSizeToFraction(this.maxSizeB, total);\n\n    if (minA !== null || minB !== null) {\n      const minSum = (minA ?? 0) + (minB ?? 0);\n      if (minSum > 1) {\n        const scale = 1 / minSum;\n        if (minA !== null)\n          minA !== null ? fractionA = minA * scale : fractionA = 0;\n        if (minB !== null)\n          minB !== null ? fractionB = minB * scale : fractionB = 0;\n      }\n\n      if (fractionA < (minA ?? 0))\n        fractionA = minA ?? 0;\n      if (fractionB < (minB ?? 0))\n        fractionB = minB ?? 0;\n    }\n\n    if (maxA !== null) {\n      if (fractionA > maxA)\n        fractionA = maxA;\n    }\n    if (maxB !== null) {\n      if (fractionB > maxB)\n        fractionB = maxB;\n    }\n\n    fractionB = 1 - fractionA;\n\n    const isPercentA = !this.sizeA.endsWith(`px`);\n    const isPercentB = !this.sizeB.endsWith(`px`);\n\n    if (isPercentA) {\n      return { sizeA: `${fractionA * 100}%`, sizeB: `${fractionB * 100}%` };\n    } else {\n      return { sizeA: `${fractionA * total}px`, sizeB: `${fractionB * total}px` };\n    }\n  }\n\n  #minSizeToFraction(minSize: string, total: number): number | null {\n    if (minSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(minSize, total);\n    if (px !== null)\n      return px / total;\n    if (minSize.endsWith(`%`))\n      return Number.parseFloat(minSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #maxSizeToFraction(maxSize: string, total: number): number | null {\n    if (maxSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(maxSize, total);\n    if (px !== null)\n      return px / total;\n    if (maxSize.endsWith(`%`))\n      return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #getIntersectionPoint(): { x: number; y: number } | null {\n    const outerBounds = this.getBoundingClientRect();\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return null;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (!nestedSplit)\n      return null;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n\n    const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);\n\n    let x: number, y: number;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      x = outerFraction * outerBounds.width;\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height);\n      y = nestedFraction * outerBounds.height;\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width);\n      x = nestedFraction * outerBounds.width;\n      y = outerFraction * outerBounds.height;\n    } else {\n      return null;\n    }\n\n    return { x, y };\n  }\n\n  #updateCornerPosition() {\n    if (!this._hasCorner)\n      return;\n\n    const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n    if (!cornerZone)\n      return;\n\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return;\n\n    const intersection = this.#getIntersectionPoint();\n    if (!intersection) {\n      cornerZone.style.display = `none`;\n      return;\n    }\n\n    const cornerX = intersection.x - 6;\n    const cornerY = intersection.y - 6;\n\n    cornerZone.style.left = `${cornerX}px`;\n    cornerZone.style.top = `${cornerY}px`;\n    cornerZone.style.display = `block`;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n        cornerZone.style.cursor = `nwse-resize`;\n      } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n        cornerZone.style.cursor = `nesw-resize`;\n      }\n    }\n  }\n\n  getZone(): HTMLElement | undefined {\n    if (!this.shadowRoot)\n      return;\n    const el = this.shadowRoot.querySelector(`#zone`);\n    if (!el)\n      return undefined;\n    return el as HTMLElement;\n  }\n\n  #onResizeHandleDown = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n    window.addEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.addEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    window.removeEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.removeEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleMove = (event: PointerEvent) => {\n    const bounds = this.#elementBounds;\n    if (!bounds)\n      return;\n\n    const threshold = 5;\n\n    if (this.layout === `horizontal`) {\n      const y = event.y - bounds.y;\n      const relativeY = clamp(y / bounds.height);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeY > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeY;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeY * 100}%`,\n          `${(1 - relativeY) * 100}%`,\n          bounds.height,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeY < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeY > (1 - threshold / bounds.height)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeY;\n      }\n    } else {\n      const x = event.x - bounds.x;\n      const relativeX = clamp(x / bounds.width);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeX > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeX;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeX * 100}%`,\n          `${(1 - relativeX) * 100}%`,\n          bounds.width,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeX < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeX > (1 - threshold / bounds.width)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeX;\n      }\n    }\n    event.preventDefault();\n  };\n\n  #onCornerResizeDown = (event: PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#cornerStartX = event.clientX;\n    this.#cornerStartY = event.clientY;\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      this.#nestedSplitInitialSizeA = nestedSplit.sizeA;\n      const nestedBounds = nestedSplit.getBoundingClientRect();\n      const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`) as HTMLElement;\n      if (nestedHandle) {\n        this.#nestedSplitBounds = nestedBounds;\n        this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();\n      }\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.add(`user-resizing`);\n      }\n    }\n\n    window.addEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.addEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #onCornerResizeUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.remove(`user-resizing`);\n      }\n    }\n    window.removeEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.removeEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #applyPendingNestedUpdate() {\n    if (!this.#pendingNestedUpdate)\n      return;\n    const { sizeA, sizeB } = this.#pendingNestedUpdate;\n    const nested = this.#getNestedSplit();\n    if (nested) {\n      nested.sizeA = `${sizeA * 100}%`;\n      nested.sizeB = `${sizeB * 100}%`;\n    }\n    this.#pendingNestedUpdate = null;\n  }\n\n  #onCornerResizeMove = (event: PointerEvent) => {\n    const outerBounds = this.#elementBounds;\n    const zoneEl = this.getZone();\n    const nestedSplit = this.#getNestedSplit();\n    if (!outerBounds || !zoneEl || !nestedSplit)\n      return;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n    const cursorZoneLocalX = event.clientX - zoneBounds.left;\n    const cursorZoneLocalY = event.clientY - zoneBounds.top;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      let newOuterFraction = cursorZoneLocalX / outerBounds.width;\n      const newNestedFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.width,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      const newNestedFraction = cursorZoneLocalX / outerBounds.width;\n      let newOuterFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.height,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    }\n\n    event.preventDefault();\n  };\n\n  render() {\n    const sizePrefix = this.layout === `vertical` ? `width` : `height`;\n    let sizeA = this.sizeA;\n    let sizeB = this.sizeB;\n\n    if (this.collapsedA) {\n      sizeA = `0px`;\n    } else if (sizeA.length === 0 && sizeB.length === 0) {\n      sizeB = sizeA = `50%`;\n    } else if (sizeA.length === 0) {\n      sizeA = `auto`;\n    } else if (sizeB.length === 0) {\n      sizeB = `auto`;\n    }\n\n    if (this.collapsedB) {\n      sizeB = `0px`;\n    }\n\n    sizeA = `${sizePrefix}:${sizeA}`;\n    sizeB = `${sizePrefix}:${sizeB}`;\n\n    return html`\n    <div id=\"zone\">\n      <slot style=${sizeA} name=\"a\"></slot>\n      ${this._hasCorner ? html`<div class=\"corner-zone\" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}\n      <div @pointerdown=${this.#onResizeHandleDown} class=\"resize-handle\"></div>\n      <slot style=${sizeB} name=\"b\"></slot> \n    </div>`;\n  }\n\n  static styles = css`\n    :host {\n      --handle-size: 2px;\n      --handle-colour: var(--surface-5);\n      --handle-hover-colour: var(--surface-6);\n      --handle-active-colour: var(--accent);\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n    }\n    * {\n      box-sizing: border-box;\n    }\n    #zone {\n      display: flex;\n      height: 100%;\n      position: relative;\n    }\n    slot {\n      display: block;\n      overflow: hidden;\n    }\n    :slotted(*) {\n      width: 100%;\n      height: 100%;\n    }\n\n    .resize-handle {\n      background-color: var(--handle-colour);\n      width: var(--handle-size);\n      height: 100%;\n      cursor: ew-resize;\n      flex-shrink: 0;\n    }\n    #zone.user-resizing {\n      slot {\n        opacity: 0.5;\n      }\n      .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n    .resize-handle:hover {\n      background-color: var(--handle-hover-colour);\n    }\n\n    .corner-zone {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      z-index: 10;\n      border-radius: 50%;\n      background: transparent;\n    }\n    .corner-zone:hover {\n      background: transparent;\n    }\n\n    :host([layout='horizontal']) {\n      #zone {\n        flex-direction: column;\n      }\n      .resize-handle {\n        background-color: silver;\n        height: var(--handle-size);\n        width: 100%;\n        cursor: ns-resize;\n      }\n      .resize-handle:hover {\n        background-color: var(--handle-hover-colour);\n      }\n      #zone.user-resizing .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n\n    :host([data-collapsed-a]) slot[name=\"a\"],\n    :host([data-collapsed-b]) slot[name=\"b\"] {\n      display: none;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-split-layout\": SplitLayoutElement;\n  }\n}\n"],"mappings":";;;;;AA6BO,IAAA,qBAAA,MAAM,2BAA2B,WAAW;;;gBAEb;eAG5B;eAGA;gBAGC;gBAGA;qBAGK;oBAGD;oBAGA;kBAGF;kBAGA;kBAGA;kBAGA;oBAGU;qBAGP;qBACA;uBACE;uBACA;kCACW;8BAOqC;8BAGzC;8BAoQA,UAAwB;GAC7C,MAAM,eAAe;GACrB,MAAM,SAAS,KAAK,QAAQ;GAC5B,IAAI,QACF,OAAO,UAAU,IAAI,eAAe;GAEtC,KAAKA,iBAAiB,KAAK,sBAAsB;GACjD,KAAKC,cAAc,KAAK;GACxB,KAAKC,cAAc,KAAK;GACxB,OAAO,iBAAiB,aAAa,KAAKC,iBAAiB;GAC3D,OAAO,iBAAiB,eAAe,KAAKC,mBAAmB;EACjE;4BAEqB,UAAwB;GAC3C,MAAM,eAAe;GACrB,MAAM,SAAS,KAAK,QAAQ;GAC5B,IAAI,QACF,OAAO,UAAU,OAAO,eAAe;GAEzC,OAAO,oBAAoB,aAAa,KAAKD,iBAAiB;GAC9D,OAAO,oBAAoB,eAAe,KAAKC,mBAAmB;EACpE;8BAEuB,UAAwB;GAC7C,MAAM,SAAS,KAAKJ;GACpB,IAAI,CAAC,QACH;GAEF,MAAM,YAAY;GAElB,IAAI,KAAK,WAAW,cAAc;IAEhC,MAAM,YAAY,OADR,MAAM,IAAI,OAAO,KACC,OAAO,MAAM;IAEzC,IAAI,KAAK,eAAe,KAAK;SACvB,aAAa,KAAKK,gCAAgC,OAAQ,KAAKC,sBAAsB;MACvF,KAAK,aAAa;MAClB,KAAKC,wBAAwB,KAAK,KAAK;MACvC,KAAKF,+BAA+B,KAAA;MACpC,MAAM,EAAE,OAAO,UAAU,KAAKG,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,MACT;MACA,KAAK,QAAQ;MACb,KAAK,QAAQ;KACf;WACK,IAAI,KAAK,eAAe,CAAC,KAAK,cAAc,YAAY,YAAY,OAAO,QAAQ;KACxF,KAAK,aAAa;KAClB,KAAKD,wBAAwB,KAAK,IAAI;KACtC,KAAK,QAAQ;KACb,KAAK,QAAQ;KACb,KAAKF,+BAA+B;IACtC,OAAO,IAAI,CAAC,KAAK,YAAY;KAC3B,MAAM,EAAE,OAAO,UAAU,KAAKG,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,MACT;KACA,KAAK,QAAQ;KACb,KAAK,QAAQ;IACf;IAEA,IAAI,KAAK,eAAe,KAAK;SACvB,aAAa,KAAKC,gCAAgC,OAAQ,KAAKH,sBAAsB;MACvF,KAAK,aAAa;MAClB,KAAKC,wBAAwB,KAAK,KAAK;MACvC,KAAKE,+BAA+B,KAAA;MACpC,MAAM,EAAE,OAAO,UAAU,KAAKD,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,MACT;MACA,KAAK,QAAQ;MACb,KAAK,QAAQ;KACf;WACK,IAAI,KAAK,eAAe,CAAC,KAAK,cAAc,YAAa,IAAI,YAAY,OAAO,QAAS;KAC9F,KAAK,aAAa;KAClB,KAAKD,wBAAwB,KAAK,IAAI;KACtC,KAAK,QAAQ;KACb,KAAK,QAAQ;KACb,KAAKE,+BAA+B;IACtC;GACF,OAAO;IAEL,MAAM,YAAY,OADR,MAAM,IAAI,OAAO,KACC,OAAO,KAAK;IAExC,IAAI,KAAK,eAAe,KAAK;SACvB,aAAa,KAAKJ,gCAAgC,OAAQ,KAAKC,sBAAsB;MACvF,KAAK,aAAa;MAClB,KAAKC,wBAAwB,KAAK,KAAK;MACvC,KAAKF,+BAA+B,KAAA;MACpC,MAAM,EAAE,OAAO,UAAU,KAAKG,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,KACT;MACA,KAAK,QAAQ;MACb,KAAK,QAAQ;KACf;WACK,IAAI,KAAK,eAAe,CAAC,KAAK,cAAc,YAAY,YAAY,OAAO,OAAO;KACvF,KAAK,aAAa;KAClB,KAAKD,wBAAwB,KAAK,IAAI;KACtC,KAAK,QAAQ;KACb,KAAK,QAAQ;KACb,KAAKF,+BAA+B;IACtC,OAAO,IAAI,CAAC,KAAK,YAAY;KAC3B,MAAM,EAAE,OAAO,UAAU,KAAKG,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,KACT;KACA,KAAK,QAAQ;KACb,KAAK,QAAQ;IACf;IAEA,IAAI,KAAK,eAAe,KAAK;SACvB,aAAa,KAAKC,gCAAgC,OAAQ,KAAKH,sBAAsB;MACvF,KAAK,aAAa;MAClB,KAAKC,wBAAwB,KAAK,KAAK;MACvC,KAAKE,+BAA+B,KAAA;MACpC,MAAM,EAAE,OAAO,UAAU,KAAKD,kBAC5B,GAAG,YAAY,IAAI,IACnB,IAAI,IAAI,aAAa,IAAI,IACzB,OAAO,KACT;MACA,KAAK,QAAQ;MACb,KAAK,QAAQ;KACf;WACK,IAAI,KAAK,eAAe,CAAC,KAAK,cAAc,YAAa,IAAI,YAAY,OAAO,OAAQ;KAC7F,KAAK,aAAa;KAClB,KAAKD,wBAAwB,KAAK,IAAI;KACtC,KAAK,QAAQ;KACb,KAAK,QAAQ;KACb,KAAKE,+BAA+B;IACtC;GACF;GACA,MAAM,eAAe;EACvB;8BAEuB,UAAwB;GAC7C,MAAM,eAAe;GACrB,MAAM,gBAAgB;GAEtB,MAAM,SAAS,KAAK,QAAQ;GAC5B,IAAI,QACF,OAAO,UAAU,IAAI,eAAe;GAGtC,KAAKT,iBAAiB,KAAK,sBAAsB;GACjD,KAAKU,gBAAgB,MAAM;GAC3B,KAAKC,gBAAgB,MAAM;GAC3B,KAAKV,cAAc,KAAK;GACxB,KAAKC,cAAc,KAAK;GAExB,MAAM,cAAc,KAAKU,gBAAgB;GACzC,IAAI,aAAa;IACf,KAAKC,2BAA2B,YAAY;IAC5C,MAAM,eAAe,YAAY,sBAAsB;IACvD,MAAM,eAAe,YAAY,YAAY,cAAc,gBAAgB;IAC3E,IAAI,cAAc;KAChB,KAAKC,qBAAqB;KAC1B,KAAKC,sBAAsB,aAAa,sBAAsB;IAChE;IACA,MAAM,eAAe,YAAY,QAAQ;IACzC,IAAI,cACF,aAAa,UAAU,IAAI,eAAe;GAE9C;GAEA,OAAO,iBAAiB,aAAa,KAAKC,iBAAiB;GAC3D,OAAO,iBAAiB,eAAe,KAAKC,mBAAmB;EACjE;4BAEqB,UAAwB;GAC3C,MAAM,eAAe;GACrB,MAAM,SAAS,KAAK,QAAQ;GAC5B,IAAI,QACF,OAAO,UAAU,OAAO,eAAe;GAEzC,MAAM,cAAc,KAAKL,gBAAgB;GACzC,IAAI,aAAa;IACf,MAAM,eAAe,YAAY,QAAQ;IACzC,IAAI,cACF,aAAa,UAAU,OAAO,eAAe;GAEjD;GACA,OAAO,oBAAoB,aAAa,KAAKI,iBAAiB;GAC9D,OAAO,oBAAoB,eAAe,KAAKC,mBAAmB;EACpE;8BAcuB,UAAwB;GAC7C,MAAM,cAAc,KAAKjB;GACzB,MAAM,SAAS,KAAK,QAAQ;GAC5B,MAAM,cAAc,KAAKY,gBAAgB;GACzC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,aAC9B;GAEF,MAAM,aAAa,OAAO,sBAAsB;GAChD,MAAM,mBAAmB,MAAM,UAAU,WAAW;GACpD,MAAM,mBAAmB,MAAM,UAAU,WAAW;GAEpD,IAAI,KAAK,WAAW,cAAc,YAAY,WAAW,cAAc;IACrE,IAAI,mBAAmB,mBAAmB,YAAY;IACtD,MAAM,oBAAoB,mBAAmB,YAAY;IAEzD,MAAM,EAAE,OAAO,cAAc,OAAO,iBAAiB,KAAKJ,kBACxD,GAAG,mBAAmB,IAAI,IAC1B,IAAI,IAAI,oBAAoB,IAAI,IAChC,YAAY,KACd;IACA,mBAAmB,KAAKU,qBAAqB,cAAc,YAAY,KAAK;IAE5E,KAAK,QAAQ;IACb,KAAK,QAAQ;IAEb,KAAKC,uBAAuB;KAC1B,OAAO;KACP,OAAO,IAAI;IACb;IACA,4BAA4B,KAAKC,0BAA0B,CAAC;IAE5D,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;IAChE,IAAI,YAAY;KACd,WAAW,MAAM,OAAO,GAAG,mBAAmB,EAAE;KAChD,WAAW,MAAM,MAAM,GAAG,mBAAmB,EAAE;IACjD;GACF,OAAO,IAAI,KAAK,WAAW,gBAAgB,YAAY,WAAW,YAAY;IAC5E,MAAM,oBAAoB,mBAAmB,YAAY;IACzD,IAAI,mBAAmB,mBAAmB,YAAY;IAEtD,MAAM,EAAE,OAAO,cAAc,OAAO,iBAAiB,KAAKZ,kBACxD,GAAG,mBAAmB,IAAI,IAC1B,IAAI,IAAI,oBAAoB,IAAI,IAChC,YAAY,MACd;IACA,mBAAmB,KAAKU,qBAAqB,cAAc,YAAY,MAAM;IAE7E,KAAK,QAAQ;IACb,KAAK,QAAQ;IAEb,KAAKC,uBAAuB;KAC1B,OAAO;KACP,OAAO,IAAI;IACb;IACA,4BAA4B,KAAKC,0BAA0B,CAAC;IAE5D,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;IAChE,IAAI,YAAY;KACd,WAAW,MAAM,OAAO,GAAG,mBAAmB,EAAE;KAChD,WAAW,MAAM,MAAM,GAAG,mBAAmB,EAAE;IACjD;GACF;GAEA,MAAM,eAAe;EACvB;;CA9hBA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAKC,WAAW,WAAW;CAC7B;CAEA,eAAe;EACb,KAAKC,0BAA0B;CACjC;CAEA,QAAQ,mBAAyC;EAC/C,IAAI,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,OAAO,KAC9D,kBAAkB,IAAI,YAAY,KAAK,kBAAkB,IAAI,YAAY,GAC5E,KAAKC,sBAAsB;EAE7B,IAAI,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,OAAO,GACjE,KAAKC,qBAAqB;CAE9B;CAEA,uBAAuB;EACrB,IAAI,KAAK,YACP,KAAK,aAAa,oBAAoB,EAAE;OAExC,KAAK,gBAAgB,kBAAkB;EAEzC,IAAI,KAAK,YACP,KAAK,aAAa,oBAAoB,EAAE;OAExC,KAAK,gBAAgB,kBAAkB;CAE3C;CAEA,wBAAwB,OAAkB,WAAoB;EAC5D,KAAK,cAAc,IAAI,YAAY,wBAAwB;GACzD,QAAQ;IAAE;IAAO;GAAU;GAC3B,SAAS;GACT,UAAU;EACZ,CAAC,CAAC;CACJ;CAEA,4BAA4B;EAC1B,MAAM,QAAQ,KAAK,YAAY,cAAc,gBAAgB;EAC7D,IAAI,CAAC,OACH;EAEF,KAAKH,YAAY,IAAI,uBAAuB;GAC1C,KAAKI,qBAAqB;EAC5B,CAAC;EAED,KAAKJ,UAAU,QAAQ,OAAO;GAAE,eAAe;GAAM,WAAW;GAAM,SAAS;EAAK,CAAC;EACrF,KAAKI,qBAAqB;CAC5B;CAEA,uBAAuB;EACrB,MAAM,QAAQ,KAAK,YAAY,cAAc,gBAAgB;EAC7D,IAAI,CAAC,OACH;EAEF,MAAM,mBAAmB,MAAM,iBAAiB;EAEhD,MAAM,mBAAmB,aAAwD;GAC/E,KAAK,MAAM,MAAM,UAAU;IACzB,IAAI,GAAG,YAAY,qBACjB,OAAO;IAET,MAAM,SAAS,gBAAgB,MAAM,KAAK,GAAG,QAAQ,CAAC;IACtD,IAAI,QACF,OAAO;GACX;EAEF;EAEA,MAAM,cAAc,gBAAgB,gBAAgB;EAEpD,IAAI,aAAa;GACf,KAAKC,eAAe;GACpB,KAAK,aAAa;GAClB,4BAA4B,KAAKH,sBAAsB,CAAC;EAC1D,OAAO;GACL,KAAKG,eAAe,KAAA;GACpB,KAAK,aAAa;EACpB;CACF;CAEA,kBAAkD;EAChD,IAAI,KAAKA,cACP,OAAO,KAAKA;EAEd,MAAM,QAAQ,KAAK,YAAY,cAAc,gBAAgB;EAC7D,IAAI,CAAC,OACH,OAAO,KAAA;EAET,OADyB,MAAM,iBACT,EAAE,MACtB,OAAM,GAAG,YAAY,mBACvB;CACF;CAEA,qBAAqB,MAAc,OAAuB;EACxD,IAAI,KAAK,SAAS,IAAI,GACpB,OAAO,OAAO,WAAW,KAAK,QAAQ,MAAM,EAAE,CAAC,IAAI;OAC9C,IAAI,KAAK,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW,KAAK,QAAQ,KAAK,EAAE,CAAC,IAAI;EAEpD,OAAO;CACT;CAEA,eAAe,MAAc,OAA8B;EACzD,IAAI,KAAK,SAAS,IAAI,GACpB,OAAO,OAAO,WAAW,KAAK,QAAQ,MAAM,EAAE,CAAC;OAC1C,IAAI,KAAK,SAAS,GAAG,GAC1B,OAAQ,OAAO,WAAW,KAAK,QAAQ,KAAK,EAAE,CAAC,IAAI,MAAO;EAE5D,OAAO;CACT;CAEA,kBAAkB,OAAe,OAAe,OAAiD;EAC/F,IAAI,YAAY,KAAKR,qBAAqB,OAAO,KAAK;EACtD,IAAI,YAAY,KAAKA,qBAAqB,OAAO,KAAK;EAEtD,MAAM,OAAO,KAAKS,mBAAmB,KAAK,UAAU,KAAK;EACzD,MAAM,OAAO,KAAKA,mBAAmB,KAAK,UAAU,KAAK;EACzD,MAAM,OAAO,KAAKC,mBAAmB,KAAK,UAAU,KAAK;EACzD,MAAM,OAAO,KAAKA,mBAAmB,KAAK,UAAU,KAAK;EAEzD,IAAI,SAAS,QAAQ,SAAS,MAAM;GAClC,MAAM,UAAU,QAAQ,MAAM,QAAQ;GACtC,IAAI,SAAS,GAAG;IACd,MAAM,QAAQ,IAAI;IAClB,IAAI,SAAS,MACX,SAAS,OAAO,YAAY,OAAO,QAAQ,YAAY;IACzD,IAAI,SAAS,MACX,SAAS,OAAO,YAAY,OAAO,QAAQ,YAAY;GAC3D;GAEA,IAAI,aAAa,QAAQ,IACvB,YAAY,QAAQ;GACtB,IAAI,aAAa,QAAQ,IACvB,YAAY,QAAQ;EACxB;EAEA,IAAI,SAAS;OACP,YAAY,MACd,YAAY;EAAA;EAEhB,IAAI,SAAS;OACP,YAAY,MACd,YAAY;EAAA;EAGhB,YAAY,IAAI;EAEhB,MAAM,aAAa,CAAC,KAAK,MAAM,SAAS,IAAI;EACzB,KAAM,MAAM,SAAS,IAAI;EAE5C,IAAI,YACF,OAAO;GAAE,OAAO,GAAG,YAAY,IAAI;GAAI,OAAO,GAAG,YAAY,IAAI;EAAG;OAEpE,OAAO;GAAE,OAAO,GAAG,YAAY,MAAM;GAAK,OAAO,GAAG,YAAY,MAAM;EAAI;CAE9E;CAEA,mBAAmB,SAAiB,OAA8B;EAChE,IAAI,QAAQ,WAAW,GACrB,OAAO;EACT,MAAM,KAAK,KAAKC,eAAe,SAAS,KAAK;EAC7C,IAAI,OAAO,MACT,OAAO,KAAK;EACd,IAAI,QAAQ,SAAS,GAAG,GACtB,OAAO,OAAO,WAAW,QAAQ,QAAQ,KAAK,EAAE,CAAC,IAAI;EACvD,OAAO;CACT;CAEA,mBAAmB,SAAiB,OAA8B;EAChE,IAAI,QAAQ,WAAW,GACrB,OAAO;EACT,MAAM,KAAK,KAAKA,eAAe,SAAS,KAAK;EAC7C,IAAI,OAAO,MACT,OAAO,KAAK;EACd,IAAI,QAAQ,SAAS,GAAG,GACtB,OAAO,OAAO,WAAW,QAAQ,QAAQ,KAAK,EAAE,CAAC,IAAI;EACvD,OAAO;CACT;CAEA,wBAAyD;EACvD,MAAM,cAAc,KAAK,sBAAsB;EAC/C,MAAM,SAAS,KAAK,QAAQ;EAC5B,IAAI,CAAC,QACH,OAAO;EAET,MAAM,cAAc,KAAKjB,gBAAgB;EACzC,IAAI,CAAC,aACH,OAAO;EAEU,OAAO,sBAAsB;EAEhD,MAAM,gBAAgB,KAAKM,qBAAqB,KAAK,SAAS,OAAO,YAAY,KAAK;EAEtF,IAAI,GAAW;EAEf,IAAI,KAAK,WAAW,cAAc,YAAY,WAAW,cAAc;GACrE,IAAI,gBAAgB,YAAY;GAEhC,IADuB,KAAKA,qBAAqB,YAAY,SAAS,OAAO,YAAY,MACxE,IAAI,YAAY;EACnC,OAAO,IAAI,KAAK,WAAW,gBAAgB,YAAY,WAAW,YAAY;GAE5E,IADuB,KAAKA,qBAAqB,YAAY,SAAS,OAAO,YAAY,KACxE,IAAI,YAAY;GACjC,IAAI,gBAAgB,YAAY;EAClC,OACE,OAAO;EAGT,OAAO;GAAE;GAAG;EAAE;CAChB;CAEA,wBAAwB;EACtB,IAAI,CAAC,KAAK,YACR;EAEF,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;EAChE,IAAI,CAAC,YACH;EAGF,IAAI,CADW,KAAK,QACV,GACR;EAEF,MAAM,eAAe,KAAKY,sBAAsB;EAChD,IAAI,CAAC,cAAc;GACjB,WAAW,MAAM,UAAU;GAC3B;EACF;EAEA,MAAM,UAAU,aAAa,IAAI;EACjC,MAAM,UAAU,aAAa,IAAI;EAEjC,WAAW,MAAM,OAAO,GAAG,QAAQ;EACnC,WAAW,MAAM,MAAM,GAAG,QAAQ;EAClC,WAAW,MAAM,UAAU;EAE3B,MAAM,cAAc,KAAKlB,gBAAgB;EACzC,IAAI;OACE,KAAK,WAAW,cAAc,YAAY,WAAW,cACvD,WAAW,MAAM,SAAS;QACrB,IAAI,KAAK,WAAW,gBAAgB,YAAY,WAAW,YAChE,WAAW,MAAM,SAAS;EAAA;CAGhC;CAEA,UAAmC;EACjC,IAAI,CAAC,KAAK,YACR;EACF,MAAM,KAAK,KAAK,WAAW,cAAc,OAAO;EAChD,IAAI,CAAC,IACH,OAAO,KAAA;EACT,OAAO;CACT;CAEA;CAaA;CAUA;CAqHA;CAkCA;CAiBA,4BAA4B;EAC1B,IAAI,CAAC,KAAKO,sBACR;EACF,MAAM,EAAE,OAAO,UAAU,KAAKA;EAC9B,MAAM,SAAS,KAAKP,gBAAgB;EACpC,IAAI,QAAQ;GACV,OAAO,QAAQ,GAAG,QAAQ,IAAI;GAC9B,OAAO,QAAQ,GAAG,QAAQ,IAAI;EAChC;EACA,KAAKO,uBAAuB;CAC9B;CAEA;CAkEA,SAAS;EACP,MAAM,aAAa,KAAK,WAAW,aAAa,UAAU;EAC1D,IAAI,QAAQ,KAAK;EACjB,IAAI,QAAQ,KAAK;EAEjB,IAAI,KAAK,YACP,QAAQ;OACH,IAAI,MAAM,WAAW,KAAK,MAAM,WAAW,GAChD,QAAQ,QAAQ;OACX,IAAI,MAAM,WAAW,GAC1B,QAAQ;OACH,IAAI,MAAM,WAAW,GAC1B,QAAQ;EAGV,IAAI,KAAK,YACP,QAAQ;EAGV,QAAQ,GAAG,WAAW,GAAG;EACzB,QAAQ,GAAG,WAAW,GAAG;EAEzB,OAAO,IAAI;;oBAEK,MAAM;QAClB,KAAK,aAAa,IAAI,yCAAyC,KAAKY,oBAAoB,WAAW,GAAG;0BACpF,KAAKC,oBAAoB;oBAC/B,MAAM;;CAExB;;gBAEgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFrB;YAzrBG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,UAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,UAAA,KAAA,CAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,UAAA,KAAA,CAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,eAAA,KAAA,CAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;YAGzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;YAGzC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,YAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,YAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,YAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,YAAA,KAAA,CAAA;YAGzB,MAAM,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;iCAtCRC,kBAAc,mBAAmB,CAAA,GAAA,kBAAA"}

package/dist/swipe.d.ts

@@ -9,8 +9,7 @@ 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;
+  addEventListener: (<K extends keyof SwipeElementEventMap>(type: K, listener: (this: SwipeElement, event: SwipeElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/swipe.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"swipe.d.ts","names":[],"sources":["../src/swipe/swipe.ts"],"mappings":";;;KA0BY,gBAAA;EAAA,SAA8B,KAAK;AAAA;AAAA,KACnC,eAAA,GAAkB,WAAW,CAAC,gBAAA;AAAA,UAEzB,oBAAA;EACf,KAAA,EAAO,eAAe;AAAA;AAAA,UAGP,YAAA;EACf,gBAAA,oBAAoC,oBAAA,EAClC,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,YAAA,EAAc,KAAA,EAAO,oBAAA,CAAqB,CAAA,YAC3D,OAAA,aAAoB,uBAAA,eAEpB,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA;AAAA,QAIhB,MAAA;EAAA,UACI,qBAAA;IACR,YAAA,EAAc,YAAY;EAAA;AAAA;AAAA,cAKjB,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

@@ -1,7 +1,7 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { t as prominenceStyles } from "./prominence--ic9uWBl.js";
 import { LitElement, css, html, svg } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 //#region src/swipe/swipe.ts
 let SwipeElement = class SwipeElement extends LitElement {
 	constructor(..._args) {
@@ -197,7 +197,7 @@ __decorate([property({ type: Number })], SwipeElement.prototype, "barSpacing", v
 __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);
+SwipeElement = __decorate([safeCustomElement(`ixfx-swipe`)], SwipeElement);
 //#endregion
 export { SwipeElement };
 

package/dist/swipe.js.map

@@ -1 +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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"}
+{"version":3,"file":"swipe.js","names":["#removeWindowListeners","#emitInput","#scheduleRetraction","#cancelAnimation","#onWindowPointerUp","#onWindowPointerCancel","#startRetraction","#renderBars","customElement"],"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 { property } from 'lit/decorators.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.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    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 → tab-list-BnqISNvO.d.ts}

@@ -1,4 +1,3 @@
-import * as _$lit from "lit";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 
@@ -23,9 +22,9 @@ declare class TabListItemElement extends LitElement {
   updated(changed: PropertyValues): void;
   private _syncTooltipAttrs;
   private _syncCommandListener;
-  render(): _$lit.TemplateResult<1>;
+  render(): import("lit").TemplateResult<1>;
   private _onCloseClick;
-  static styles: _$lit.CSSResult[];
+  static styles: import("lit").CSSResult[];
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,12 +48,12 @@ declare class TabListElement extends LitElement {
   orientation: `horizontal` | `vertical-stack` | `vertical-side`;
   flip: boolean;
   scrollable: boolean;
-  render(): _$lit.TemplateResult<1>;
+  render(): import("lit").TemplateResult<1>;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues): void;
   getSelectedElement(): TabListItemElement | undefined;
   selectElement(el: HTMLElement): void;
-  static styles: _$lit.CSSResult;
+  static styles: import("lit").CSSResult;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -63,4 +62,4 @@ declare global {
 } //# 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
+//# sourceMappingURL=tab-list-BnqISNvO.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-BnqISNvO.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;AAcA;;;;;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,iBAAM,cAAA;EAAA,QAsBP,aAAA;EAAA,OAWQ,MAAA,gBAAM,SAAA;AAAA;AAAA,QA6EhB,MAAA;EAAA,UACI,qBAAA;IACR,oBAAA,EAAsB,kBAAkB;EAAA;AAAA;;;;;AAlL5C;;KCJY,mBAAA;EAAA,SACD,QAAA;EAAA,SACA,QAAA;EAAA,SACA,GAAA;AAAA;AAAA,KAGC,kBAAA,GAAqB,WAAW,CAAC,mBAAA;AAAA,cAGhC,cAAA,SAAuB,UAAA;EAAA;EAElC,WAAA;EAGA,IAAA;EAGA,UAAA;EAYS,MAAA,CAAA,iBAAM,cAAA;EAqBN,YAAA,CAAA;EAQA,OAAA,CAAQ,iBAAA,EAAmB,cAAA;EA2CpC,kBAAA,CAAA,GAAkB,kBAAA;EAclB,aAAA,CAAc,EAAA,EAAI,WAAA;EAAA,OAkEX,MAAA,gBAAM,SAAA;AAAA;AAAA,QAuEP,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,cAAc;EAAA;AAAA"}

package/dist/tabs.d.ts

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

package/dist/tabs.js

@@ -1,6 +1,6 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 //#region src/tabs/tab-list.ts
 let TabListElement = class TabListElement extends LitElement {
 	constructor(..._args) {
@@ -68,7 +68,7 @@ let TabListElement = class TabListElement extends LitElement {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		this.classList.toggle("scrollable", this.scrollable);
+		this.classList.toggle(`scrollable`, this.scrollable);
 	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
@@ -196,7 +196,7 @@ let TabListElement = class TabListElement extends LitElement {
 __decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
-TabListElement = __decorate([customElement(`ixfx-tab-list`)], TabListElement);
+TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
 export { TabListElement };
 

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["#items","#syncIndicatorColors","#isVertical","#selectPrevious","#selectNext","#containerClass","#onKeyUp","#onSlotClick","#onSlotChange","#isSelected"],"sources":["../src/tabs/tab-list.ts"],"sourcesContent":["import type { TabListItemElement } from \"./tab-list-item.js\";\nimport type { PropertyValues } from \"lit\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\n/**\n * Events\n * 'change' - new tab selected { previous:string, selected:string, for:string }\n */\nexport type TabListChangeDetail = {\n  readonly previous: string | undefined;\n  readonly selected: string;\n  readonly for: string;\n};\n\nexport type TabListChangeEvent = CustomEvent<TabListChangeDetail>;\n\n@customElement(`ixfx-tab-list`)\nexport class TabListElement extends LitElement {\n  @property({ type: String })\n  orientation: `horizontal` | `vertical-stack` | `vertical-side` = `horizontal`;\n\n  @property({ type: Boolean })\n  flip = false;\n\n  @property({ type: Boolean })\n  scrollable = false;\n\n  #items: TabListItemElement[] = [];\n\n  get #isVertical(): boolean {\n    return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;\n  }\n\n  get #containerClass(): string {\n    return this.scrollable ? `${this.orientation} scrollable` : this.orientation;\n  }\n\n  override render() {\n    return html`\n    <div \n      tabindex=0 \n      @keyup=${this.#onKeyUp} \n      @click=${this.#onSlotClick} \n      id=\"container\" \n      class=${this.#containerClass}\n    >\n      <slot @slotchange=${this.#onSlotChange}></slot>\n    </div>`;\n  }\n\n  #onSlotChange = () => {\n    this.updateComplete.then(() => {\n      this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n        ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n      this.#syncIndicatorColors();\n    });\n  };\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      if (this.#items.length > 0) {\n        this.#syncIndicatorColors();\n      }\n    });\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    this.classList.toggle('scrollable', this.scrollable);\n  }\n\n  #syncIndicatorColors() {\n    for (const item of this.#items) {\n      item.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      item.style.setProperty(`--indicator-color-top`, `transparent`);\n      item.style.setProperty(`--indicator-color-left`, `transparent`);\n      item.style.setProperty(`--indicator-color-right`, `transparent`);\n\n      if (item.hasAttribute(`selected`)) {\n        if (this.orientation === `horizontal` && !this.flip) {\n          item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n        } else if (this.orientation === `horizontal` && this.flip) {\n          item.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n        } else if (this.#isVertical && !this.flip) {\n          item.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n        } else if (this.#isVertical && this.flip) {\n          item.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n        }\n      }\n    }\n  }\n\n  #onKeyUp = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (this.#isVertical) {\n      if (key === `ArrowUp`) {\n        this.#selectPrevious();\n      } else if (key === `ArrowDown`) {\n        this.#selectNext();\n      }\n    } else {\n      if (key === `ArrowRight`) {\n        this.#selectNext();\n      } else if (key === `ArrowLeft`) {\n        this.#selectPrevious();\n      }\n    }\n  };\n\n  getSelectedElement() {\n    for (const el of this.#items) {\n      if (this.#isSelected(el))\n        return el;\n    }\n  }\n\n  #isSelected(el: HTMLElement) {\n    const v = el.getAttribute(`selected`);\n    if (v === null)\n      return false;\n    return (el.hasAttribute(`selected`));\n  }\n\n  selectElement(el: HTMLElement) {\n    const existing = this.getSelectedElement();\n    if (existing) {\n      existing.removeAttribute(`selected`);\n      existing.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      existing.style.setProperty(`--indicator-color-top`, `transparent`);\n      existing.style.setProperty(`--indicator-color-left`, `transparent`);\n      existing.style.setProperty(`--indicator-color-right`, `transparent`);\n    }\n\n    el.setAttribute(`selected`, ``);\n\n    if (this.orientation === `horizontal` && !this.flip) {\n      el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n    } else if (this.orientation === `horizontal` && this.flip) {\n      el.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n    } else if (this.#isVertical && !this.flip) {\n      el.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n    } else if (this.#isVertical && this.flip) {\n      el.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n    }\n  }\n\n  #selectNext() {\n    let found = false;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && !found) {\n        found = true;\n      } else if (found) {\n        this.selectElement(el);\n        break;\n      }\n    }\n  }\n\n  #selectPrevious() {\n    let prev: HTMLElement | undefined;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && prev) {\n        this.selectElement(prev);\n      } else {\n        prev = el;\n      }\n    }\n  }\n\n  #onSlotClick = (event: MouseEvent) => {\n    this.focus();\n    const t = (event.target as HTMLElement).closest(`ixfx-tab-list-item`);\n    if (!t)\n      return;\n    const previous = this.getSelectedElement();\n    this.selectElement(t);\n\n    const forId = t.getAttribute(`for`);\n    const previousId = previous?.id;\n    this.dispatchEvent(new CustomEvent<TabListChangeDetail>(`change`, {\n      bubbles: true,\n      detail: {\n        previous: previousId,\n        selected: t.id,\n        for: forId ?? ``,\n      },\n    }));\n  };\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      --activated-colour: var(--accent);\n      --colour: var(--surface-4);\n      --scroll-max-height: 200px;\n      --allow-overflow: hidden;\n    }\n    :host(.scrollable) {\n      max-height: var(--scroll-max-height);\n    }\n    text {\n      user-select:none;\n    }\n    #container {\n      display:flex;\n    }\n    #container.horizontal {\n      flex-direction: row;\n      overflow: hidden;\n    }\n    #container.horizontal.scrollable {\n      overflow-x: auto;\n      --allow-overflow: visible;\n    }\n    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {\n      flex-shrink: 0;\n    }\n    #container.vertical-stack {\n      flex-direction: column;\n    }\n    #container.vertical-stack.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-stack.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n    #container.vertical-side {\n      flex-direction: column;\n    }\n    #container.vertical-side.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-side.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n\n    ::slotted(ixfx-tab-list-item) {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    #container.vertical-side ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-lr;\n      text-orientation: mixed;\n    }\n    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    ::slotted(.activated) {\n      --colour: var(--activated-colour);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-tab-list\": TabListElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["#items","#syncIndicatorColors","#isVertical","#selectPrevious","#selectNext","#containerClass","#onKeyUp","#onSlotClick","#onSlotChange","#isSelected","customElement"],"sources":["../src/tabs/tab-list.ts"],"sourcesContent":["import type { PropertyValues } from \"lit\";\nimport type { TabListItemElement } from \"./tab-list-item.js\";\nimport { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n/**\n * Events\n * 'change' - new tab selected { previous:string, selected:string, for:string }\n */\nexport type TabListChangeDetail = {\n  readonly previous: string | undefined;\n  readonly selected: string;\n  readonly for: string;\n};\n\nexport type TabListChangeEvent = CustomEvent<TabListChangeDetail>;\n\n@customElement(`ixfx-tab-list`)\nexport class TabListElement extends LitElement {\n  @property({ type: String })\n  orientation: `horizontal` | `vertical-stack` | `vertical-side` = `horizontal`;\n\n  @property({ type: Boolean })\n  flip = false;\n\n  @property({ type: Boolean })\n  scrollable = false;\n\n  #items: TabListItemElement[] = [];\n\n  get #isVertical(): boolean {\n    return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;\n  }\n\n  get #containerClass(): string {\n    return this.scrollable ? `${this.orientation} scrollable` : this.orientation;\n  }\n\n  override render() {\n    return html`\n    <div \n      tabindex=0 \n      @keyup=${this.#onKeyUp} \n      @click=${this.#onSlotClick} \n      id=\"container\" \n      class=${this.#containerClass}\n    >\n      <slot @slotchange=${this.#onSlotChange}></slot>\n    </div>`;\n  }\n\n  #onSlotChange = () => {\n    this.updateComplete.then(() => {\n      this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n        ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n      this.#syncIndicatorColors();\n    });\n  };\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      if (this.#items.length > 0) {\n        this.#syncIndicatorColors();\n      }\n    });\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    this.classList.toggle(`scrollable`, this.scrollable);\n  }\n\n  #syncIndicatorColors() {\n    for (const item of this.#items) {\n      item.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      item.style.setProperty(`--indicator-color-top`, `transparent`);\n      item.style.setProperty(`--indicator-color-left`, `transparent`);\n      item.style.setProperty(`--indicator-color-right`, `transparent`);\n\n      if (item.hasAttribute(`selected`)) {\n        if (this.orientation === `horizontal` && !this.flip) {\n          item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n        } else if (this.orientation === `horizontal` && this.flip) {\n          item.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n        } else if (this.#isVertical && !this.flip) {\n          item.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n        } else if (this.#isVertical && this.flip) {\n          item.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n        }\n      }\n    }\n  }\n\n  #onKeyUp = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (this.#isVertical) {\n      if (key === `ArrowUp`) {\n        this.#selectPrevious();\n      } else if (key === `ArrowDown`) {\n        this.#selectNext();\n      }\n    } else {\n      if (key === `ArrowRight`) {\n        this.#selectNext();\n      } else if (key === `ArrowLeft`) {\n        this.#selectPrevious();\n      }\n    }\n  };\n\n  getSelectedElement() {\n    for (const el of this.#items) {\n      if (this.#isSelected(el))\n        return el;\n    }\n  }\n\n  #isSelected(el: HTMLElement) {\n    const v = el.getAttribute(`selected`);\n    if (v === null)\n      return false;\n    return (el.hasAttribute(`selected`));\n  }\n\n  selectElement(el: HTMLElement) {\n    const existing = this.getSelectedElement();\n    if (existing) {\n      existing.removeAttribute(`selected`);\n      existing.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      existing.style.setProperty(`--indicator-color-top`, `transparent`);\n      existing.style.setProperty(`--indicator-color-left`, `transparent`);\n      existing.style.setProperty(`--indicator-color-right`, `transparent`);\n    }\n\n    el.setAttribute(`selected`, ``);\n\n    if (this.orientation === `horizontal` && !this.flip) {\n      el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n    } else if (this.orientation === `horizontal` && this.flip) {\n      el.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n    } else if (this.#isVertical && !this.flip) {\n      el.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n    } else if (this.#isVertical && this.flip) {\n      el.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n    }\n  }\n\n  #selectNext() {\n    let found = false;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && !found) {\n        found = true;\n      } else if (found) {\n        this.selectElement(el);\n        break;\n      }\n    }\n  }\n\n  #selectPrevious() {\n    let prev: HTMLElement | undefined;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && prev) {\n        this.selectElement(prev);\n      } else {\n        prev = el;\n      }\n    }\n  }\n\n  #onSlotClick = (event: MouseEvent) => {\n    this.focus();\n    const t = (event.target as HTMLElement).closest(`ixfx-tab-list-item`);\n    if (!t)\n      return;\n    const previous = this.getSelectedElement();\n    this.selectElement(t);\n\n    const forId = t.getAttribute(`for`);\n    const previousId = previous?.id;\n    this.dispatchEvent(new CustomEvent<TabListChangeDetail>(`change`, {\n      bubbles: true,\n      detail: {\n        previous: previousId,\n        selected: t.id,\n        for: forId ?? ``,\n      },\n    }));\n  };\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      --activated-colour: var(--accent);\n      --colour: var(--surface-4);\n      --scroll-max-height: 200px;\n      --allow-overflow: hidden;\n    }\n    :host(.scrollable) {\n      max-height: var(--scroll-max-height);\n    }\n    text {\n      user-select:none;\n    }\n    #container {\n      display:flex;\n    }\n    #container.horizontal {\n      flex-direction: row;\n      overflow: hidden;\n    }\n    #container.horizontal.scrollable {\n      overflow-x: auto;\n      --allow-overflow: visible;\n    }\n    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {\n      flex-shrink: 0;\n    }\n    #container.vertical-stack {\n      flex-direction: column;\n    }\n    #container.vertical-stack.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-stack.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n    #container.vertical-side {\n      flex-direction: column;\n    }\n    #container.vertical-side.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-side.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n\n    ::slotted(ixfx-tab-list-item) {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    #container.vertical-side ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-lr;\n      text-orientation: mixed;\n    }\n    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    ::slotted(.activated) {\n      --colour: var(--activated-colour);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-tab-list\": TabListElement;\n  }\n}\n"],"mappings":"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"}

package/dist/tickled-controller-Cq1Va0rR.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tickled-controller-Cq1Va0rR.d.ts","names":["Comparer","IsEqual","Result","LabelledValue","TValue","LabelledSingleValue","LabelledValues","label","value","values","TreeNode","ReadonlyArray","parent","childrenStore","SimplifiedNode","LabelledNode","TraversableTree","IterableIterator","children","getParent","getValue","getIdentity","TraverseObjectEntry","Readonly","name","sourceValue","leafValue","_kind","TraverseObjectEntryWithAncestors","ancestors","TraverseObjectEntryStatic","TraverseObjectPathOpts","separator","WrappedNode","T","wraps","remove","add","child","addValue","hasChild","queryValue","queryParentsValue","eq","findParentsValue","parentsValues","hasAnyChild","hasParent","hasAnyParent","DiffAnnotation","a","b","valueChanged","childChanged","added","removed","DiffNode","toString","compare$1","tree_mutable_d_exports","asDynamicTraversable$1","breadthFirst$2","children$2","childrenLength$1","childrenValues","compare","computeMaxDepth","createNode$1","depthFirst$3","findAnyChildByValue$2","findChildByValue$1","followValue$1","fromPlainObject","getRoot","hasAnyChild$1","hasAnyParent$1","hasChild$1","hasParent$1","nodeDepth","parents$1","queryByValue","remove$1","removeValuelessNodesFromChild","root$2","rootWrapped$1","setChildren","siblings$2","stripParentage","throwTreeTest","toStringDeep$4","treeTest","wrap$1","asDynamicTraversable","breadthFirst","childrenLength","createNode","depthFirst","findAnyChildByValue","findChildByValue","followValue","parents","root","rootWrapped","siblings","toStringDeep","wrap","node","n","Array","seen","ok","msg","prospectiveChild","prospectiveParent","Generator","Record","indent","nodeValue","depth","continuePredicate","pathed_d_exports","PathOpts","Pathed","addValueByPath","children$1","childrenLengthByPath","clearValuesByPath","findAnyChildByValue$1","hasValue","parentValues","removeValueByPath","siblings$1","siblingsValues","toStringDeep$3","valueByPath","valuesByPath","startsWithSeparator","duplicates","Partial","private","constructor","pathOpts","path","validate","prettyPrint","hasPath","getNode","getPath","includeNode","getValues","clearValues","searchStart","start","maxDepth","traverse_object_d_exports","ChildrenOptions","CreateOptions","create$1","createSimplified","createWrapped","depthFirst$2","getByPath","prettyPrintEntries","toStringDeep$2","traceByPath","create","entries","options","filter","Iterable","valuesAtLeaves","traversable_tree_d_exports","breadthFirst$1","couldAddChild","depthFirst$1","find$2","findAnyParentByValue","findByValue","findParentByValue","hasAnyChildValue","hasAnyParentValue","hasChildValue","hasParentValue","toStringDeep$1","find","tree","TV","possibleParent","possibleParentValue","possibleChild","possibleChildValue","possibleValue","predicate","order","nodes","binary_tree_d_exports","BinaryChildSide","WrappedBinaryNode","addLeft","addRight","balanceFactor","find$1","fromArray$1","getLeft","getRight","grandparent","hasLeft","hasRight","height","inOrder$1","isLeaf","isParentLeftChild","isParentRightChild","leftSubtreeHeightFn","parentChildSide","postOrder$1","preOrder$1","removeNode","rightSubtreeHeightFn","root$1","setLeft","setRight","sibling","toArray","uncle","fromArray","inOrder","postOrder","preOrder","left","right","leftSubtreeHeight","rightSubtreeHeight","has","array","binary_search_tree_d_exports","Bst","BstNode","insert","max","min","valuesInOrder","comparer","toArrayInOrder","isSingleValue","v","isMultiValue","index_d_exports","isTraversable","isTreeNode","toTraversable","BinarySearchTree","BinaryTree","FromObject","Mutable","Traverse","C","D","E","S","_","c","d","f","g","h","i","l","m","o","p","r","s","t","u","w","x","y"],"sources":["../node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/index-rrpZOWbs.d.ts","../src/interaction/tickled-controller.ts"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;KAgFKgB,eAAAA;ECyQgB;;;EDrQnBE,QAAAA,QAAgBD,gBAAAA,CAAiBD,eAAAA,CAAgBZ,MAAAA;ECsCpB;;;EDlC7Be,SAAAA,QAAiBH,eAAAA,CAAgBZ,MAAAA;ECqCzB;;;EDjCRgB,QAAAA,QAAgBhB,MAAAA;ECsCD;;;EDlCfiB,WAAAA;AAAAA;;;;;AAzBuD;KClE7C,WAAA;ED2EQjB;;;EAAAA,SCvET,EAAA,EAAI,CAAA;ED+EoBA;;;EAAAA,SC1ExB,OAAA;AAAA;;;;KAMC,SAAA;;;;KAKA,uBAAA;EDmEVgB;;;EC/DA,QAAA,QAAgB,aAAA,CAAc,WAAA,CAAY,CAAA;EDmE/B;;;;AC3Fb;EA+BE,QAAA,IAAY,EAAA,EAAI,CAAA;EA/BK;;;;;;;;AAevB;;;;;AAKA;;;;;;;;;EAmCE,aAAA;EAnCkC;;;EAwClC,gBAAA,GAAmB,SAAA;AAAA;;;;;;;;;AAyDrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,iBAAA,wBAAyC,kBAAA;EAAA,QAC5C,IAAA;EAAA,QACA,MAAA;EAAA,QACA,UAAA;EAAA,QACA,UAAA;EAAA,eAEO,iBAAA;EAAA,eACA,iBAAA;EAAA,eACA,wBAAA;EAAA,eACA,uBAAA;cAEH,IAAA,EAAM,sBAAA,EAAwB,MAAA,EAAQ,uBAAA,CAAwB,CAAA;EAO1E,aAAA,CAAA;EASA,gBAAA,CAAA;EAoMmB;;;EAAA,IA7Lf,SAAA,CAAA,GAAa,SAAA;;;;MAOb,SAAA,CAAA,GAAa,CAAA;;;;EAOjB,SAAA,CAAU,EAAA,EAAI,CAAA;;;;;;iBASC,uBAAA;;;;;aAiBJ,0BAAA,CAAA;;;;;;EASX,kBAAA,CAAmB,EAAA,EAAI,CAAA;;;;;;EAiCvB,kBAAA,CAAmB,EAAA,EAAI,YAAA;;;;;;;EAYvB,wBAAA,CAAyB,SAAA,2CAAoD,CAAA;;;;;EAyD7E,UAAA,CAAW,EAAA,EAAI,CAAA;;;;;;EAmBf,YAAA,CAAA;;;;;EAmBA,YAAA,CAAa,IAAA,EAAM,SAAA;AAAA"}
+{"version":3,"file":"tickled-controller-Cq1Va0rR.d.ts","names":["Comparer","IsEqual","Result","LabelledValue","TValue","LabelledSingleValue","LabelledValues","label","value","values","TreeNode","ReadonlyArray","parent","childrenStore","SimplifiedNode","LabelledNode","TraversableTree","IterableIterator","children","getParent","getValue","getIdentity","TraverseObjectEntry","Readonly","name","sourceValue","leafValue","_kind","TraverseObjectEntryWithAncestors","ancestors","TraverseObjectEntryStatic","TraverseObjectPathOpts","separator","WrappedNode","T","wraps","remove","add","child","addValue","hasChild","queryValue","queryParentsValue","eq","findParentsValue","parentsValues","hasAnyChild","hasParent","hasAnyParent","DiffAnnotation","a","b","valueChanged","childChanged","added","removed","DiffNode","toString","compare$1","tree_mutable_d_exports","asDynamicTraversable$1","breadthFirst$2","children$2","childrenLength$1","childrenValues","compare","computeMaxDepth","createNode$1","depthFirst$3","findAnyChildByValue$2","findChildByValue$1","followValue$1","fromPlainObject","getRoot","hasAnyChild$1","hasAnyParent$1","hasChild$1","hasParent$1","nodeDepth","parents$1","queryByValue","remove$1","removeValuelessNodesFromChild","root$2","rootWrapped$1","setChildren","siblings$2","stripParentage","throwTreeTest","toStringDeep$4","treeTest","wrap$1","asDynamicTraversable","breadthFirst","childrenLength","createNode","depthFirst","findAnyChildByValue","findChildByValue","followValue","parents","root","rootWrapped","siblings","toStringDeep","wrap","node","n","Array","seen","ok","msg","prospectiveChild","prospectiveParent","Generator","Record","indent","nodeValue","depth","continuePredicate","pathed_d_exports","PathOpts","Pathed","addValueByPath","children$1","childrenLengthByPath","clearValuesByPath","findAnyChildByValue$1","hasValue","parentValues","removeValueByPath","siblings$1","siblingsValues","toStringDeep$3","valueByPath","valuesByPath","startsWithSeparator","duplicates","Partial","private","constructor","pathOpts","path","validate","prettyPrint","hasPath","getNode","getPath","includeNode","getValues","clearValues","searchStart","start","maxDepth","traverse_object_d_exports","ChildrenOptions","CreateOptions","create$1","createSimplified","createWrapped","depthFirst$2","getByPath","prettyPrintEntries","toStringDeep$2","traceByPath","create","entries","options","filter","Iterable","valuesAtLeaves","traversable_tree_d_exports","breadthFirst$1","couldAddChild","depthFirst$1","find$2","findAnyParentByValue","findByValue","findParentByValue","hasAnyChildValue","hasAnyParentValue","hasChildValue","hasParentValue","toStringDeep$1","find","tree","TV","possibleParent","possibleParentValue","possibleChild","possibleChildValue","possibleValue","predicate","order","nodes","binary_tree_d_exports","BinaryChildSide","WrappedBinaryNode","addLeft","addRight","balanceFactor","find$1","fromArray$1","getLeft","getRight","grandparent","hasLeft","hasRight","height","inOrder$1","isLeaf","isParentLeftChild","isParentRightChild","leftSubtreeHeightFn","parentChildSide","postOrder$1","preOrder$1","removeNode","rightSubtreeHeightFn","root$1","setLeft","setRight","sibling","toArray","uncle","fromArray","inOrder","postOrder","preOrder","left","right","leftSubtreeHeight","rightSubtreeHeight","has","array","binary_search_tree_d_exports","Bst","BstNode","insert","max","min","valuesInOrder","comparer","toArrayInOrder","isSingleValue","v","isMultiValue","index_d_exports","isTraversable","isTreeNode","toTraversable","BinarySearchTree","BinaryTree","FromObject","Mutable","Traverse","C","D","E","S","_","c","d","f","g","h","i","l","m","o","p","r","s","t","u","w","x","y"],"sources":["../node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/index-rrpZOWbs.d.ts","../src/interaction/tickled-controller.ts"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;KAgFKgB,eAAAA;ECyQgB;;;EDrQnBE,QAAAA,QAAgBD,gBAAAA,CAAiBD,eAAAA,CAAgBZ,MAAAA;ECsCpB;;;EDlC7Be,SAAAA,QAAiBH,eAAAA,CAAgBZ,MAAAA;ECqCzB;;;EDjCRgB,QAAAA,QAAgBhB,MAAAA;ECsCD;;;EDlCfiB,WAAAA;AAAAA;;;;;AAzBuD;KClE7C,WAAA;ED2EQjB;;;EAAAA,SCvET,EAAA,EAAI,CAAC;ED+EmBA;;;EAAAA,SC1ExB,OAAA;AAAA;;;;KAMC,SAAA;;;;KAKA,uBAAA;EDmEVgB;;;EC/DA,QAAA,QAAgB,aAAA,CAAc,WAAA,CAAY,CAAA;EDmE/B;;;;AC3Fb;EA+BE,QAAA,IAAY,EAAA,EAAI,CAAA;EA/BK;;;;;;;AASL;AAMlB;;;;AAAqB;AAKrB;;;;;;;;;EAmCE,aAAA;EAnCkC;;;EAwClC,gBAAA,GAAmB,SAAA;AAAA;;;;;;;;AAAS;AAyD9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,iBAAA,wBAAyC,kBAAA;EAAA,QAC5C,IAAA;EAAA,QACA,MAAA;EAAA,QACA,UAAA;EAAA,QACA,UAAA;EAAA,eAEO,iBAAA;EAAA,eACA,iBAAA;EAAA,eACA,wBAAA;EAAA,eACA,uBAAA;cAEH,IAAA,EAAM,sBAAA,EAAwB,MAAA,EAAQ,uBAAA,CAAwB,CAAA;EAO1E,aAAA,CAAA;EASA,gBAAA,CAAA;EAoMmB;;;EAAA,IA7Lf,SAAA,CAAA,GAAa,SAAA;;;;MAOb,SAAA,CAAA,GAAa,CAAA;;;;EAOjB,SAAA,CAAU,EAAA,EAAI,CAAA;;;;;;iBASC,uBAAA;;;;;aAiBJ,0BAAA,CAAA;;;;;;EASX,kBAAA,CAAmB,EAAA,EAAI,CAAA;;;;;;EAiCvB,kBAAA,CAAmB,EAAA,EAAI,YAAA;;;;;;;EAYvB,wBAAA,CAAyB,SAAA,2CAAoD,CAAA;;;;;EAyD7E,UAAA,CAAW,EAAA,EAAI,CAAA;;;;;;EAmBf,YAAA,CAAA;;;;;EAmBA,YAAA,CAAa,IAAA,EAAM,SAAA;AAAA"}