@ixfx/components 0.4.1 → 0.4.2

package/dist/menu.d.ts

@@ -1,3 +1,3 @@
 import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-COx-Azgj.js";
-import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-CWpNcQKE.js";
+import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-_RTQSKHi.js";
 export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };

package/dist/miller.d.ts

@@ -1,5 +1,5 @@
 import { n as TraversableTree, t as TickledController } from "./tickled-controller-BjYCzGrU.js";
-import { C as TreeNode, S as TreeItem, a as TreeComponent, b as TreeFilterPredicate, c as TreeExpandEvent, d as TreeSearchHost, f as TreeSelectDetail, g as TreeDataModel, h as TreeTickleEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeTickleDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent, v as LoadChildrenCallback, w as TreeSelectionFilter, y as TreeExclusivity } from "./tree-component-BcO26Xvt.js";
+import { C as TreeNode, S as TreeItem, a as TreeComponent, b as TreeFilterPredicate, c as TreeExpandEvent, d as TreeSearchHost, f as TreeSelectDetail, g as TreeDataModel, h as TreeTickleEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeTickleDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent, v as LoadChildrenCallback, w as TreeSelectionFilter, y as TreeExclusivity } from "./tree-component-BaCSPWg1.js";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 
 //#region src/miller/types.d.ts

package/dist/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;KAMY,gBAAA;AAAA,KACA,YAAA;AAAA,KACA,sBAAA;AAAA,UAEK,iBAAA;EAAA,SACN,SAAS;AAAA;AAAA,KAGR,gBAAA,GAAmB,WAAW,CAAC,iBAAA;AAAA,KAC/B,eAAA,GAAkB,WAAW;AAAA,UAExB,oBAAA;EACf,MAAA,EAAQ,gBAAA;EACR,KAAA,EAAO,eAAe;AAAA;AAAA,cAIX,YAAA,SAAqB,UAAA;EACY,SAAA;EACyB,WAAA,EAAa,gBAAA;EACrD,QAAA;EACD,KAAA;EACwB,QAAA;EACS,iBAAA,EAAmB,sBAAA;EACf,OAAA,EAAS,YAAA;EAAA,QAEzD,WAAA;EAAA,QAET,cAAA;EAAA,QAWA,aAAA;EAAA,QAUA,aAAA;EAAA,UAIW,OAAA,CAAQ,OAAA,EAAS,GAAA;EAAA,UAOjB,MAAA,kBAAM,cAAA;EAAA,OAyDT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAkShB,MAAA;EAAA,UACI,qBAAA;IACR,YAAA,EAAc,YAAY;EAAA;AAAA;AAAA,UAIb,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"}
+{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;KAOY,gBAAA;AAAA,KACA,YAAA;AAAA,KACA,sBAAA;AAAA,UAEK,iBAAA;EAAA,SACN,SAAS;AAAA;AAAA,KAGR,gBAAA,GAAmB,WAAW,CAAC,iBAAA;AAAA,KAC/B,eAAA,GAAkB,WAAW;AAAA,UAExB,oBAAA;EACf,MAAA,EAAQ,gBAAA;EACR,KAAA,EAAO,eAAe;AAAA;AAAA,cAIX,YAAA,SAAqB,UAAA;EACY,SAAA;EACyB,WAAA,EAAa,gBAAA;EACrD,QAAA;EACD,KAAA;EACwB,QAAA;EACS,iBAAA,EAAmB,sBAAA;EACf,OAAA,EAAS,YAAA;EAAA,QAEzD,WAAA;EAAA,QAET,cAAA;EAAA,QAWA,aAAA;EAAA,QAUA,aAAA;EAAA,UAIW,OAAA,CAAQ,OAAA,EAAS,GAAA;EAAA,UAOjB,MAAA,kBAAM,cAAA;EAAA,OAyDT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAkShB,MAAA;EAAA,UACI,qBAAA;IACR,YAAA,EAAc,YAAY;EAAA;AAAA;AAAA,UAIb,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"}

package/dist/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type PanelOrientation = `horizontal` | `vertical`;\nexport type PanelVariant = `titlebar` | `midline`;\nexport type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface PanelToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type PanelToggleEvent = CustomEvent<PanelToggleDetail>;\nexport type PanelCloseEvent = CustomEvent<void>;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n\n  @state() private _isVertical = false;\n\n  private _onToggleClick() {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`orientation`)) {\n      this._isVertical = this.orientation === `vertical`;\n    }\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const showCaret = this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.toggleInteraction === `implicit`;\n\n    const caretRotation = this._isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"titlebar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    .titlebar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      flex-shrink: 0;\n    }\n\n    :host([orientation=\"vertical\"]) .titlebar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([toggle-interaction=\"implicit\"]) .titlebar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n     \n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-m);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height:100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    .title-text-wrapper {\n      display:flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .titlebar,\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .titlebar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AAuBO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;mBACa;qBAC6C;kBAC7D;eACJ;kBAC2B;2BAC0C;iBAChB;qBAE1D;;CAE/B,iBAAyB;EACvB,KAAK,YAAY,CAAC,KAAK;EACvB,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,gBAAgC;EAC9B,OAAO;CACT;CAEA,QAA2B,SAAqC;EAC9D,MAAM,QAAQ,OAAO;EACrB,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,cAAc,KAAK,gBAAgB;CAE5C;CAEA,SAA4B;EAC1B,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,YAAY,KAAK,sBAAsB;EAC7C,MAAM,iBAAiB,KAAK,sBAAsB;EAElD,MAAM,gBAAgB,KAAK,cACtB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;EAEjC,OAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,gBAAgB,EAAE;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;+CAIyB,CAAC,KAAK,UAAU;;;;;;CAM7D;;gBAEyB,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+R5C;;AACH;YAnYG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;YACzC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;YAClE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;YACzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YACjD,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;YAC1D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;YAE9D,MAAM,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;2BAVRA,kBAAc,YAAY,CAAA,GAAA,YAAA"}
+{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type PanelOrientation = `horizontal` | `vertical`;\nexport type PanelVariant = `titlebar` | `midline`;\nexport type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface PanelToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type PanelToggleEvent = CustomEvent<PanelToggleDetail>;\nexport type PanelCloseEvent = CustomEvent<void>;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n\n  @state() private _isVertical = false;\n\n  private _onToggleClick() {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`orientation`)) {\n      this._isVertical = this.orientation === `vertical`;\n    }\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const showCaret = this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.toggleInteraction === `implicit`;\n\n    const caretRotation = this._isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"titlebar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    .titlebar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      flex-shrink: 0;\n    }\n\n    :host([orientation=\"vertical\"]) .titlebar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([toggle-interaction=\"implicit\"]) .titlebar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n     \n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-m);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height:100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    .title-text-wrapper {\n      display:flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .titlebar,\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .titlebar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AAwBO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;mBACa;qBAC6C;kBAC7D;eACJ;kBAC2B;2BAC0C;iBAChB;qBAE1D;;CAE/B,iBAAyB;EACvB,KAAK,YAAY,CAAC,KAAK;EACvB,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,gBAAgC;EAC9B,OAAO;CACT;CAEA,QAA2B,SAAqC;EAC9D,MAAM,QAAQ,OAAO;EACrB,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,cAAc,KAAK,gBAAgB;CAE5C;CAEA,SAA4B;EAC1B,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,YAAY,KAAK,sBAAsB;EAC7C,MAAM,iBAAiB,KAAK,sBAAsB;EAElD,MAAM,gBAAgB,KAAK,cACtB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;EAEjC,OAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,gBAAgB,EAAE;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;+CAIyB,CAAC,KAAK,UAAU;;;;;;CAM7D;;gBAEyB,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+R5C;;AACH;YAnYG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;YACzC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;YAClE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;YACzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YACjD,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;YAC1D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;YAE9D,MAAM,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;2BAVRA,kBAAc,YAAY,CAAA,GAAA,YAAA"}

package/dist/plots.d.ts

@@ -1,2 +1,2 @@
-import { C as ColourMode, D as parseColourScaleAttr, E as computeColour, O as readBaseColour, S as ColourMapConfig, T as applyAgeModification, _ as PlotMultiAxisDataPointClickEvent, a as PlotSingleAxisElementEventMap, b as PlotDataSeries, c as SingleAxisAgeStyle, d as PlotHistogramBucketClickDetail, f as PlotHistogramBucketClickEvent, g as PlotMultiAxisDataPointClickDetail, h as PlotMultiAxis, i as PlotSingleAxis, l as SingleAxisDrawStyle, m as PlotHistogramOrientation, n as XyAgeStyle, o as PlotSingleAxisPointerMoveDetail, p as PlotHistogramElementEventMap, r as XyDrawStyle, s as PlotSingleAxisPointerMoveEvent, t as PlotXyAxis, u as PlotHistogram, v as PlotMultiAxisElementEventMap, w as ColourResult, x as PlotDataSeriesOptions, y as PlotMultiAxisLayout } from "./xy-axis-McdUpcYr.js";
+import { C as ColourMode, D as parseColourScaleAttr, E as computeColour, O as readBaseColour, S as ColourMapConfig, T as applyAgeModification, _ as PlotSingleAxisPointerMoveEvent, a as PlotHistogramBucketClickDetail, b as PlotDataSeries, c as PlotHistogramOrientation, d as PlotMultiAxisDataPointClickEvent, f as PlotMultiAxisElementEventMap, g as PlotSingleAxisPointerMoveDetail, h as PlotSingleAxisElementEventMap, i as PlotHistogram, l as PlotMultiAxis, m as PlotSingleAxis, n as XyAgeStyle, o as PlotHistogramBucketClickEvent, p as PlotMultiAxisLayout, r as XyDrawStyle, s as PlotHistogramElementEventMap, t as PlotXyAxis, u as PlotMultiAxisDataPointClickDetail, v as SingleAxisAgeStyle, w as ColourResult, x as PlotDataSeriesOptions, y as SingleAxisDrawStyle } from "./xy-axis-CEI7ojks.js";
 export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/plots.js

@@ -1,2 +1,2 @@
-import { a as PlotDataSeries, c as parseColourScaleAttr, i as PlotMultiAxis, l as readBaseColour, n as PlotSingleAxis, o as applyAgeModification, r as PlotHistogram, s as computeColour, t as PlotXyAxis } from "./xy-axis-CK64haaK.js";
+import { a as PlotDataSeries, c as parseColourScaleAttr, i as PlotMultiAxis, l as readBaseColour, n as PlotSingleAxis, o as applyAgeModification, r as PlotHistogram, s as computeColour, t as PlotXyAxis } from "./xy-axis-DbPezP6A.js";
 export { PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

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","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 { themeFallbacks } from \"../styles/fallbacks.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 = [themeFallbacks, 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 { themeFallbacks } from \"../styles/fallbacks.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 = [themeFallbacks, 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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"}

package/dist/swipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swipe.d.ts","names":[],"sources":["../src/swipe/swipe.ts"],"mappings":";;;KA2BY,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;EAaA,oBAAA;EAAA,QAUD,cAAA;EAAA,QAcA,cAAA;EAAA,OAoFQ,MAAA,EAAQ,cAAA;EA8Bf,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA"}
+{"version":3,"file":"swipe.d.ts","names":[],"sources":["../src/swipe/swipe.ts"],"mappings":";;;KA4BY,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;EAaA,oBAAA;EAAA,QAUD,cAAA;EAAA,QAcA,cAAA;EAAA,OAoFQ,MAAA,EAAQ,cAAA;EA8Bf,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA"}

package/dist/swipe.js.map

@@ -1 +1 @@
-{"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 { themeFallbacks } from '../styles/fallbacks.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 = [themeFallbacks, 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":["/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\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 { themeFallbacks } from '../styles/fallbacks.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 = [themeFallbacks, 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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"}