@ixfx/components 0.5.18 → 0.5.19

package/dist/split-layout.d.ts

@@ -17,10 +17,15 @@ import { LitElement } from "lit";
  * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
  *
  * CSS variables
- * --handle-size: 2px;              // Width/height of resize handle
+ * --handle-size: 2px;              // Width/height of split bar
  * --handle-colour: var(--surface-5);     // Colour of handle
  * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
  * --handle-active-colour: var(--accent);    // Colour of handle when being used
+ * --handle-bg: var(--handle-colour); // Background of grab handle rectangle
+ * --handle-grab-colour: var(--surface-muted-text); // Colour of grab handle dots
+ * --handle-grab-dot-size: 3px;      // Diameter of grab handle dots
+ * --handle-grab-size: 16px;         // Length of grab handle
+ * --handle-grab-thickness: 8px;     // Thickness of grab handle
  */
 declare class SplitLayoutElement extends LitElement {
   #private;
@@ -37,6 +42,7 @@ declare class SplitLayoutElement extends LitElement {
   minSizeB: string;
   maxSizeB: string;
   private _hasCorner;
+  private get showGrabHandle();
   disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: Map<string, unknown>): void;

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

@@ -1 +1 @@
-{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;cA8Ba,2BAA2B;;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;UAGQ;EAmBR;EAKA;EAIA,QAAQ,mBAAmB;EAgP3B,WAAW;EAsRX,wBAAM;SA+BC,sBAAM;;QAqFP;YACI;IACR,qBAAqB"}
+{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmCa,2BAA2B;;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;UAGQ;cAEI;EAuBZ;EAKA;EAIA,QAAQ,mBAAmB;EAgP3B,WAAW;EAsRX,wBAAM;SAyCC,sBAAM;;QA8IP;YACI;IACR,qBAAqB"}

package/dist/split-layout.js

@@ -143,7 +143,7 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 			if (nestedSplit) {
 				this.#nestedSplitInitialSizeA = nestedSplit.sizeA;
 				const nestedBounds = nestedSplit.getBoundingClientRect();
-				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`);
+				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.split-bar`);
 				if (nestedHandle) {
 					this.#nestedSplitBounds = nestedBounds;
 					this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();
@@ -212,6 +212,11 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
 			event.preventDefault();
 		};
 	}
+	get showGrabHandle() {
+		const size = getComputedStyle(this).getPropertyValue(`--handle-size`).trim();
+		const num = Number.parseFloat(size);
+		return !Number.isNaN(num) && num > 3;
+	}
 	#elementBounds;
 	#startSizeA;
 	#startSizeB;
@@ -432,17 +437,30 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
     <div id="zone">
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? html`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
-      <div @pointerdown=${this.#onResizeHandleDown} class="resize-handle"></div>
-      <slot style=${sizeB} name="b"></slot> 
+      <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
+        ${this.showGrabHandle ? html`
+          <div class="grab-handle">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        ` : ``}
+      </div>
+      <slot style=${sizeB} name="b"></slot>
     </div>`;
 	}
 	static {
 		this.styles = [themeFallbacks, css`
   :host {
       --handle-size: 2px;
-      --handle-colour: var(--surface-5);
+      --handle-colour: transparent;
       --handle-hover-colour: var(--surface-6);
       --handle-active-colour: var(--accent);
+      --handle-bg: var(--handle-colour);
+      --handle-grab-colour: var(--border-subtle-color);
+      --handle-grab-dot-size: 3px;
+      --handle-grab-size: 16px;
+      --handle-grab-thickness: 8px;
 
       display: block;
       box-sizing: border-box;
@@ -460,29 +478,80 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
     slot {
       display: block;
       overflow: hidden;
+      border: var(--border-subtle);
+      border-radius: var(--radius-m);
     }
     :slotted(*) {
       width: 100%;
       height: 100%;
     }
 
-    .resize-handle {
+    .split-bar {
+      position: relative;
       background-color: var(--handle-colour);
+      transition: background-color 0.3s ease 0s;
       width: var(--handle-size);
       height: 100%;
       cursor: ew-resize;
       flex-shrink: 0;
+      border-radius: var(--radius-m);
+
+    }
+
+    @keyframes handle-hover {
+      from { background-color: var(--handle-colour); }
+      to { background-color: var(--handle-hover-colour); }
+    }
+
+    .grab-handle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--handle-grab-dot-size);
+      background: var(--handle-bg);
+      border-radius: var(--radius-s);
+    }
+
+    .grab-handle .dot {
+      width: var(--handle-grab-dot-size);
+      height: var(--handle-grab-dot-size);
+      border-radius: 50%;
+      background: var(--handle-grab-colour);
+      flex-shrink: 0;
+    }
+
+    :host([layout="vertical"]) .grab-handle {
+      flex-direction: column;
+      width: var(--handle-grab-thickness);
+      height: var(--handle-grab-size);
+    }
+
+    :host([layout="horizontal"]) .grab-handle {
+      flex-direction: row;
+      width: var(--handle-grab-size);
+      height: var(--handle-grab-thickness);
+    }
+
+    #zone.user-resizing .grab-handle {
+      display: none;
     }
     #zone.user-resizing {
       slot {
         opacity: 0.5;
       }
-      .resize-handle {
+      .split-bar {
         background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
       }
     }
-    .resize-handle:hover {
-      background-color: var(--handle-hover-colour);
+
+    #zone:not(.user-resizing) .split-bar:hover {
+      animation: handle-hover 0.001s ease-out 0.7s both;
     }
 
     .corner-zone {
@@ -501,17 +570,18 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
       #zone {
         flex-direction: column;
       }
-      .resize-handle {
-        background-color: silver;
+      .split-bar {
+        position: relative;
+        background-color: var(--handle-colour);
+        transition: background-color 0.3s ease 0s;
         height: var(--handle-size);
         width: 100%;
         cursor: ns-resize;
       }
-      .resize-handle:hover {
-        background-color: var(--handle-hover-colour);
-      }
-      #zone.user-resizing .resize-handle {
+      #zone.user-resizing .split-bar {
         background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
       }
     }
 

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 split bar\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 * --handle-bg: var(--handle-colour); // Background of grab handle rectangle\n * --handle-grab-colour: var(--surface-muted-text); // Colour of grab handle dots\n * --handle-grab-dot-size: 3px;      // Diameter of grab handle dots\n * --handle-grab-size: 16px;         // Length of grab handle\n * --handle-grab-thickness: 8px;     // Thickness of grab handle\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  private get showGrabHandle(): boolean {\n    const size = getComputedStyle(this).getPropertyValue(`--handle-size`).trim();\n    const num = Number.parseFloat(size);\n    return !Number.isNaN(num) && num > 3;\n  }\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(`.split-bar`) 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=\"split-bar\">\n        ${this.showGrabHandle\n          ? html`\n          <div class=\"grab-handle\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        `\n          : ``}\n      </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: transparent;\n      --handle-hover-colour: var(--surface-6);\n      --handle-active-colour: var(--accent);\n      --handle-bg: var(--handle-colour);\n      --handle-grab-colour: var(--border-subtle-color);\n      --handle-grab-dot-size: 3px;\n      --handle-grab-size: 16px;\n      --handle-grab-thickness: 8px;\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      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n    }\n    :slotted(*) {\n      width: 100%;\n      height: 100%;\n    }\n\n    .split-bar {\n      position: relative;\n      background-color: var(--handle-colour);\n      transition: background-color 0.3s ease 0s;\n      width: var(--handle-size);\n      height: 100%;\n      cursor: ew-resize;\n      flex-shrink: 0;\n      border-radius: var(--radius-m);\n\n    }\n\n    @keyframes handle-hover {\n      from { background-color: var(--handle-colour); }\n      to { background-color: var(--handle-hover-colour); }\n    }\n\n    .grab-handle {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--handle-grab-dot-size);\n      background: var(--handle-bg);\n      border-radius: var(--radius-s);\n    }\n\n    .grab-handle .dot {\n      width: var(--handle-grab-dot-size);\n      height: var(--handle-grab-dot-size);\n      border-radius: 50%;\n      background: var(--handle-grab-colour);\n      flex-shrink: 0;\n    }\n\n    :host([layout=\"vertical\"]) .grab-handle {\n      flex-direction: column;\n      width: var(--handle-grab-thickness);\n      height: var(--handle-grab-size);\n    }\n\n    :host([layout=\"horizontal\"]) .grab-handle {\n      flex-direction: row;\n      width: var(--handle-grab-size);\n      height: var(--handle-grab-thickness);\n    }\n\n    #zone.user-resizing .grab-handle {\n      display: none;\n    }\n    #zone.user-resizing {\n      slot {\n        opacity: 0.5;\n      }\n      .split-bar {\n        background-color: var(--handle-active-colour);\n        transition: none;\n        animation: none !important;\n      }\n    }\n\n    #zone:not(.user-resizing) .split-bar:hover {\n      animation: handle-hover 0.001s ease-out 0.7s both;\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      .split-bar {\n        position: relative;\n        background-color: var(--handle-colour);\n        transition: background-color 0.3s ease 0s;\n        height: var(--handle-size);\n        width: 100%;\n        cursor: ns-resize;\n      }\n      #zone.user-resizing .split-bar {\n        background-color: var(--handle-active-colour);\n        transition: none;\n        animation: none !important;\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/style.css

@@ -36,7 +36,8 @@
   --space-xl: 16px;
   --space-2xl: 20px;
   --border: 1px solid oklch(25% .02 240);
-  --border-subtle: 1px solid oklch(18% .02 240);
+  --border-subtle-color: oklch(18% .02 240);
+  --border-subtle: 1px solid var(--border-subtle-color);
   --radius-s: 3px;
   --radius-m: 4px;
   --radius-l: 6px;
@@ -106,7 +107,8 @@
     --error: oklch(55% .15 20);
     --error-text: #fff;
     --border: 1px solid oklch(80% .01 240);
-    --border-subtle: 1px solid oklch(88% .01 240);
+    --border-subtle-color: oklch(88% .01 240);
+    --border-subtle: 1px solid var(--border-subtle-color);
     --shadow-m: 0 2px 8px #0000001a;
     --shadow-l: 0 4px 16px #00000026;
     --prominence-idle-opacity: .55;

package/dist/{tab-list-CLqlPnX-.d.ts → tab-list-Beuh2nom.d.ts}

@@ -6,15 +6,18 @@ import { CommandRegistry } from "@clinth/ui-commands";
  * CSS vars (can be overridden per-instance):
  * --selected-colour: text colour when selected
  * --selected-border-width: border width
- * --ixfx-tab-padding: padding for the tab content (default: var(--space-m))
+ * --ixfx-tab-padding: vertical padding for the tab content (default: var(--space-m))
+ * --ixfx-tab-padding-horizontal: horizontal padding (default: same as --ixfx-tab-padding)
  */
 declare class TabListItemElement extends LitElement {
   closeable: boolean;
+  hideLabels: boolean;
   iconName: string | undefined;
   description: string | undefined;
   commandActive: string | undefined;
   registry: CommandRegistry<unknown> | undefined;
   private _compact;
+  private _hasToolbarContent;
   private _resizeObserver?;
   private _commandCleanup?;
   connectedCallback(): void;
@@ -22,6 +25,9 @@ declare class TabListItemElement extends LitElement {
   updated(changed: PropertyValues): void;
   private _syncTooltipAttrs;
   private _syncCommandListener;
+  private _onToolbarSlotChange;
+  private _updateToolbarContent;
+  firstUpdated(): void;
   render(): import("lit").TemplateResult<1>;
   private _onCloseClick;
   static styles: import("lit").CSSResult[];
@@ -56,6 +62,7 @@ declare class TabListElement extends LitElement {
   orientation: `horizontal` | `vertical-stack` | `vertical-side`;
   flip: boolean;
   scrollable: boolean;
+  hideLabels: boolean;
   dragMode: TabListDragMode;
   render(): import("lit").TemplateResult<1>;
   firstUpdated(): void;
@@ -71,4 +78,4 @@ declare global {
 }
 //#endregion
 export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
-//# sourceMappingURL=tab-list-CLqlPnX-.d.ts.map
+//# sourceMappingURL=tab-list-Beuh2nom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-Beuh2nom.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;EAEC;EAUA;EAUA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;EAKC;EAIA,wBAAM;UA8BP;SAWQ,sBAAM;;QA+GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnPd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA6BN;EASA,QAAQ,mBAAmB;EA2GpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAoGP;YACI;IACR,iBAAiB"}

package/dist/{tab-list-6W5CgXix.js → tab-list-mAoD6L0e.js}

@@ -93,6 +93,7 @@ let TabListElement = class TabListElement extends LitElement {
 		this.orientation = `horizontal`;
 		this.flip = false;
 		this.scrollable = false;
+		this.hideLabels = false;
 		this.dragMode = `off`;
 		this.#items = [];
 		this.#dragState = null;
@@ -101,6 +102,7 @@ let TabListElement = class TabListElement extends LitElement {
 			this.updateComplete.then(() => {
 				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
 				this.#syncIndicatorColors();
+				this.#syncHideLabels();
 			});
 		};
 		this.#onKeyUp = (event) => {
@@ -242,13 +244,21 @@ let TabListElement = class TabListElement extends LitElement {
 	#onSlotChange;
 	firstUpdated() {
 		this.updateComplete.then(() => {
-			if (this.#items.length > 0) this.#syncIndicatorColors();
+			if (this.#items.length > 0) {
+				this.#syncIndicatorColors();
+				this.#syncHideLabels();
+			}
 		});
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		this.classList.toggle(`scrollable`, this.scrollable);
 		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
+		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
+	}
+	#syncHideLabels() {
+		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
+		else item.removeAttribute(`hide-labels`);
 	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
@@ -503,6 +513,10 @@ let TabListElement = class TabListElement extends LitElement {
     :host(.scrollable) {
       max-height: var(--scroll-max-height);
     }
+    :host([hide-labels]) {
+      display: inline-flex;
+      width: auto;
+    }
     text {
       user-select:none;
     }
@@ -586,6 +600,10 @@ let TabListElement = class TabListElement extends LitElement {
 __decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListElement.prototype, "hideLabels", void 0);
 __decorate([property({
 	type: String,
 	attribute: `drag-mode`
@@ -594,4 +612,4 @@ TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement
 //#endregion
 export { TabListElement as t };
 
-//# sourceMappingURL=tab-list-6W5CgXix.js.map
+//# sourceMappingURL=tab-list-mAoD6L0e.js.map

package/dist/tab-list-mAoD6L0e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-mAoD6L0e.js","names":["#items","#syncIndicatorColors","#syncHideLabels","#isVertical","#selectPrevious","#selectNext","#dragState","#abortDrag","#endDrag","#containerEl","#suppressNextClick","#findDragTarget","#onPointerMove","#onPointerUp","#onPointerCancel","#beginDrag","#computeGapIndex","#commitDrag","#containerClass","#computeCaretStyle","#onKeyUp","#onSlotClick","#onPointerDown","#onKeyDown","#onWheel","#onSlotChange","#isSelected","#createGhost","customElement"],"sources":["../src/util/drag-ghost.ts","../src/tabs/tab-list.ts"],"sourcesContent":["/**\n * Theme-aware floating element helper.\n *\n * Creates a `position: fixed`, `pointer-events: none` element anchored to a\n * source element's theme container, then exposes imperative `move` / `destroy`\n * hooks. Used by `ixfx-tab-list` for its drag-ghost; intended to be reusable\n * by future drag/detach features.\n *\n * Theme container lookup mirrors `tooltip-controller.ts` so the floating\n * element still inherits the right CSS custom properties when the source lives\n * inside a `.theme-dark` / `.theme-light` subtree (used by the loader iframes).\n */\nlet stylesInjected = false;\n\nfunction injectGhostStyles(): void {\n  if (stylesInjected)\n    return;\n  stylesInjected = true;\n  const style = document.createElement(`style`);\n  style.textContent = `\n    .ixfx-drag-ghost {\n      position: fixed;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      z-index: 10000;\n      will-change: transform;\n      opacity: 0.9;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-xs, 4px);\n      padding: var(--padding, var(--space-m, 8px)) calc(2 * var(--padding, var(--space-m, 8px)));\n      background: var(--surface-4);\n      color: var(--surface-4-text);\n      border: 1px solid var(--border-subtle);\n      border-radius: var(--radius-m, 6px);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      white-space: nowrap;\n      max-width: 240px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      box-shadow: var(--shadow-m);\n    }\n    .ixfx-drag-ghost ixfx-icon {\n      flex-shrink: 0;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nexport interface DragGhost {\n  /** Position the ghost at (x, y) viewport coords, anchored around the source center. */\n  move: (x: number, y: number) => void;\n  /** Remove the ghost from the DOM. Idempotent. */\n  destroy: () => void;\n  /** The underlying ghost element (rarely needed outside this module). */\n  readonly element: HTMLElement;\n}\n\nexport interface CreateDragGhostOptions {\n  /** Content element to mount inside the ghost. Will be appended on create. */\n  content: HTMLElement;\n  /**\n   * Anchor element — used to find the theme container and to compute the\n   * initial offset so the ghost appears centered under the source on first move.\n   */\n  anchor: HTMLElement;\n  /** Optional class name appended to the ghost wrapper for custom styling. */\n  className?: string;\n}\n\n/**\n * Create a theme-aware floating ghost element.\n *\n * The ghost is appended to the closest `.theme-dark` / `.theme-light` ancestor\n * of `anchor`, falling back to `document.body`. This preserves CSS variable\n * inheritance for theming.\n */\nexport function createDragGhost(opts: CreateDragGhostOptions): DragGhost {\n  injectGhostStyles();\n\n  const ghost = document.createElement(`div`);\n  ghost.className = `ixfx-drag-ghost`;\n  if (opts.className)\n    ghost.classList.add(opts.className);\n  ghost.appendChild(opts.content);\n\n  // Place ghost off-screen until first `move()` call\n  ghost.style.transform = `translate3d(-9999px, -9999px, 0)`;\n\n  const targetDoc = opts.anchor.ownerDocument;\n  const themeContainer = opts.anchor.closest(`.theme-dark, .theme-light`);\n  if (themeContainer) {\n    themeContainer.appendChild(ghost);\n  } else {\n    targetDoc.body.appendChild(ghost);\n  }\n\n  // Anchor offset: distance from the source's top-left to its center.\n  const anchorRect = opts.anchor.getBoundingClientRect();\n  const offsetX = anchorRect.width / 2;\n  const offsetY = anchorRect.height / 2;\n\n  return {\n    element: ghost,\n    move(x: number, y: number): void {\n      ghost.style.transform = `translate3d(${x - offsetX}px, ${y - offsetY}px, 0)`;\n    },\n    destroy(): void {\n      ghost.remove();\n    },\n  };\n}\n","import type { PropertyValues } from \"lit\";\nimport type { DragGhost } from \"../util/drag-ghost.js\";\nimport type { TabListItemElement } from \"./tab-list-item.js\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { themeFallbacks } from \"../styles/fallbacks.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { createDragGhost } from \"../util/drag-ghost.js\";\n\n/**\n * Events\n * 'change' - new tab selected { previous:string, selected:string, for:string }\n * 'reorder' - tab moved within the list { id:string, fromIndex:number, toIndex:number }\n */\nexport type TabListChangeDetail = {\n  readonly previous: string | undefined;\n  readonly selected: string;\n  readonly for: string;\n};\n\nexport type TabListChangeEvent = CustomEvent<TabListChangeDetail>;\n\nexport type TabListReorderDetail = {\n  readonly id: string;\n  readonly fromIndex: number;\n  readonly toIndex: number;\n};\n\nexport type TabListReorderEvent = CustomEvent<TabListReorderDetail>;\n\nexport type TabListDragMode = `off` | `reorder`;\n\n/** Pointer movement threshold (px) before a press becomes a drag. */\nconst DRAG_THRESHOLD_PX = 5;\n\n@customElement(`ixfx-tab-list`)\nexport class TabListElement extends LitElement {\n  @property({ type: String })\n  orientation: `horizontal` | `vertical-stack` | `vertical-side` = `horizontal`;\n\n  @property({ type: Boolean })\n  flip = false;\n\n  @property({ type: Boolean })\n  scrollable = false;\n\n  @property({ type: Boolean, attribute: `hide-labels` })\n  hideLabels = false;\n\n  @property({ type: String, attribute: `drag-mode` })\n  dragMode: TabListDragMode = `off`;\n\n  #items: TabListItemElement[] = [];\n\n  // ── Drag state (not reactive) ────────────────────────────────────────\n  #dragState: {\n    pointerId: number;\n    source: TabListItemElement;\n    fromIndex: number;\n    startX: number;\n    startY: number;\n    active: boolean;\n    ghost: DragGhost | null;\n    gapIndex: number | undefined;\n  } | null = null;\n\n  #suppressNextClick = false;\n\n  get #isVertical(): boolean {\n    return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;\n  }\n\n  get #containerClass(): string {\n    const base = this.scrollable ? `${this.orientation} scrollable` : this.orientation;\n    return this.dragMode === `reorder` ? `${base} reorder` : base;\n  }\n\n  override render() {\n    const caretStyle = this.#computeCaretStyle();\n    return html`\n    <div\n      tabindex=0\n      @keyup=${this.#onKeyUp}\n      @click=${this.#onSlotClick}\n      @pointerdown=${this.#onPointerDown}\n      @keydown=${this.#onKeyDown}\n      @wheel=${this.#onWheel}\n      id=\"container\"\n      class=${this.#containerClass}\n    >\n      <slot @slotchange=${this.#onSlotChange}></slot>\n      ${caretStyle\n        ? html`<div class=\"drop-caret\" style=${caretStyle}></div>`\n        : nothing}\n    </div>`;\n  }\n\n  #onSlotChange = () => {\n    this.updateComplete.then(() => {\n      this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n        ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n      this.#syncIndicatorColors();\n      this.#syncHideLabels();\n    });\n  };\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      if (this.#items.length > 0) {\n        this.#syncIndicatorColors();\n        this.#syncHideLabels();\n      }\n    });\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    this.classList.toggle(`scrollable`, this.scrollable);\n    if (changedProperties.has(`dragMode`)) {\n      this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);\n    }\n    if (changedProperties.has(`hideLabels`)) {\n      this.#syncHideLabels();\n    }\n  }\n\n  #syncHideLabels() {\n    for (const item of this.#items) {\n      if (this.hideLabels) {\n        item.setAttribute(`hide-labels`, ``);\n      } else {\n        item.removeAttribute(`hide-labels`);\n      }\n    }\n  }\n\n  #syncIndicatorColors() {\n    for (const item of this.#items) {\n      item.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      item.style.setProperty(`--indicator-color-top`, `transparent`);\n      item.style.setProperty(`--indicator-color-left`, `transparent`);\n      item.style.setProperty(`--indicator-color-right`, `transparent`);\n\n      if (item.hasAttribute(`selected`)) {\n        if (this.orientation === `horizontal` && !this.flip) {\n          item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n        } else if (this.orientation === `horizontal` && this.flip) {\n          item.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n        } else if (this.#isVertical && !this.flip) {\n          item.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n        } else if (this.#isVertical && this.flip) {\n          item.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n        }\n      }\n    }\n  }\n\n  #onKeyUp = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (this.#isVertical) {\n      if (key === `ArrowUp`) {\n        this.#selectPrevious();\n      } else if (key === `ArrowDown`) {\n        this.#selectNext();\n      }\n    } else {\n      if (key === `ArrowRight`) {\n        this.#selectNext();\n      } else if (key === `ArrowLeft`) {\n        this.#selectPrevious();\n      }\n    }\n  };\n\n  // Escape during drag aborts it (and tears down listeners / releases capture)\n  #onKeyDown = (event: KeyboardEvent): void => {\n    const state = this.#dragState;\n    if (event.key !== `Escape` || !state?.active)\n      return;\n    event.preventDefault();\n    const pointerId = state.pointerId;\n    this.#abortDrag();\n    this.#endDrag(pointerId);\n  };\n\n  /**\n   * Translate vertical wheel deltas into horizontal scroll on a scrollable\n   * horizontal list (and vice-versa for vertical lists). Without this, the\n   * default browser behaviour only scrolls horizontally with Shift+wheel or a\n   * physical horizontal wheel — neither of which most users reach for on a\n   * VS Code-style tab strip.\n   *\n   * Only kicks in when the list is actually scrollable (overflow content\n   * present), and is a no-op when nothing is scrollable in that direction.\n   */\n  #onWheel = (event: WheelEvent): void => {\n    if (!this.scrollable)\n      return;\n    const el = this.#containerEl;\n    if (!el)\n      return;\n\n    if (!this.#isVertical) {\n      // Horizontal list: vertical wheel → horizontal scroll.\n      if (event.deltaY === 0 || el.scrollWidth <= el.clientWidth)\n        return;\n      const prev = el.scrollLeft;\n      el.scrollLeft = prev + event.deltaY;\n      if (el.scrollLeft !== prev)\n        event.preventDefault();\n    } else {\n      // Vertical list: vertical wheel is already native; only intervene when\n      // a horizontal wheel is supplied (e.g. trackpad two-finger horizontal).\n      if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight)\n        return;\n      const prev = el.scrollTop;\n      el.scrollTop = prev + event.deltaX;\n      if (el.scrollTop !== prev)\n        event.preventDefault();\n    }\n  };\n\n  getSelectedElement() {\n    for (const el of this.#items) {\n      if (this.#isSelected(el))\n        return el;\n    }\n    // Fallback: #items may not be populated yet (slotchange hasn't fired).\n    // Query the slot directly to find the selected element.\n    const slot = this.shadowRoot?.querySelector(`slot`);\n    if (slot) {\n      const els = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of els) {\n        if (this.#isSelected(el as HTMLElement))\n          return el as TabListItemElement;\n      }\n    }\n  }\n\n  #isSelected(el: HTMLElement) {\n    const v = el.getAttribute(`selected`);\n    if (v === null)\n      return false;\n    return (el.hasAttribute(`selected`));\n  }\n\n  selectElement(el: HTMLElement) {\n    const existing = this.getSelectedElement();\n    if (existing) {\n      existing.removeAttribute(`selected`);\n      existing.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      existing.style.setProperty(`--indicator-color-top`, `transparent`);\n      existing.style.setProperty(`--indicator-color-left`, `transparent`);\n      existing.style.setProperty(`--indicator-color-right`, `transparent`);\n    }\n\n    el.setAttribute(`selected`, ``);\n\n    if (this.orientation === `horizontal` && !this.flip) {\n      el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n    } else if (this.orientation === `horizontal` && this.flip) {\n      el.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n    } else if (this.#isVertical && !this.flip) {\n      el.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n    } else if (this.#isVertical && this.flip) {\n      el.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n    }\n  }\n\n  #selectNext() {\n    let found = false;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && !found) {\n        found = true;\n      } else if (found) {\n        this.selectElement(el);\n        break;\n      }\n    }\n  }\n\n  #selectPrevious() {\n    let prev: HTMLElement | undefined;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && prev) {\n        this.selectElement(prev);\n      } else {\n        prev = el;\n      }\n    }\n  }\n\n  #onSlotClick = (event: MouseEvent) => {\n    if (this.#suppressNextClick) {\n      this.#suppressNextClick = false;\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.focus();\n    const t = (event.target as HTMLElement).closest(`ixfx-tab-list-item`);\n    if (!t)\n      return;\n    const previous = this.getSelectedElement();\n    this.selectElement(t);\n\n    const forId = t.getAttribute(`for`);\n    const previousId = previous?.id;\n    this.dispatchEvent(new CustomEvent<TabListChangeDetail>(`change`, {\n      bubbles: true,\n      detail: {\n        previous: previousId,\n        selected: t.id,\n        for: forId ?? ``,\n      },\n    }));\n  };\n\n  // ── Drag handling ────────────────────────────────────────────────────\n\n  /**\n   * Walk composedPath looking for the nearest ancestor tab-list-item, but bail\n   * if the path goes through a `.close-btn` or `.toolbar` (so close/toolbar\n   * buttons always win — same delegation pattern used by tooltip-controller).\n   */\n  #findDragTarget(event: PointerEvent): TabListItemElement | null {\n    if (this.dragMode === `off`)\n      return null;\n\n    const path = event.composedPath();\n    let item: TabListItemElement | null = null;\n    for (const node of path) {\n      if (!(node instanceof HTMLElement))\n        continue;\n      if (node.classList.contains(`close-btn`) || node.classList.contains(`toolbar`)) {\n        return null;\n      }\n      if (!item && node.tagName === `IXFX-TAB-LIST-ITEM`) {\n        item = node as TabListItemElement;\n      }\n    }\n    return item;\n  }\n\n  #onPointerDown = (event: PointerEvent): void => {\n    if (this.dragMode !== `reorder`)\n      return;\n    if (event.button !== 0)\n      return;\n    const target = this.#findDragTarget(event);\n    if (!target)\n      return;\n\n    const fromIndex = this.#items.indexOf(target);\n    if (fromIndex < 0)\n      return;\n\n    // Don't capture the pointer yet — doing so on pointerdown would redirect\n    // the trailing click event to the capture target (the container), so the\n    // click handler would see a container DIV as its target instead of the\n    // tab-list-item and `closest('ixfx-tab-list-item')` would return null.\n    // We capture only once the drag actually activates (#beginDrag). Until\n    // then, an ordinary press still produces a normal click on the tab.\n\n    this.#dragState = {\n      pointerId: event.pointerId,\n      source: target,\n      fromIndex,\n      startX: event.clientX,\n      startY: event.clientY,\n      active: false,\n      ghost: null,\n      gapIndex: undefined,\n    };\n\n    // Listen at window level for move/up so we don't lose events if the\n    // pointer exits the host before pointerup fires.\n    window.addEventListener(`pointermove`, this.#onPointerMove);\n    window.addEventListener(`pointerup`, this.#onPointerUp);\n    window.addEventListener(`pointercancel`, this.#onPointerCancel);\n  };\n\n  #onPointerMove = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n\n    const dx = event.clientX - state.startX;\n    const dy = event.clientY - state.startY;\n    const distance = Math.hypot(dx, dy);\n\n    if (!state.active) {\n      if (distance < DRAG_THRESHOLD_PX)\n        return;\n      this.#beginDrag(event);\n    }\n\n    state.ghost?.move(event.clientX, event.clientY);\n\n    const gap = this.#computeGapIndex(event.clientX, event.clientY);\n    if (gap !== state.gapIndex) {\n      state.gapIndex = gap;\n      this.requestUpdate();\n    }\n  };\n\n  #onPointerUp = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n\n    if (state.active) {\n      const gap = this.#computeGapIndex(event.clientX, event.clientY);\n      this.#commitDrag(state.source, state.fromIndex, gap);\n    }\n    this.#endDrag(event.pointerId);\n  };\n\n  #onPointerCancel = (event: PointerEvent): void => {\n    const state = this.#dragState;\n    if (!state || event.pointerId !== state.pointerId)\n      return;\n    this.#abortDrag();\n    this.#endDrag(event.pointerId);\n  };\n\n  #beginDrag(event: PointerEvent): void {\n    const state = this.#dragState;\n    if (!state || state.active)\n      return;\n\n    // Now that we know we're dragging, capture the pointer so pointermove/up\n    // events keep flowing even if the pointer leaves the host element.\n    try {\n      this.#containerEl?.setPointerCapture(event.pointerId);\n    } catch {\n      // setPointerCapture can throw if pointer is already captured elsewhere;\n      // fall through — window listeners still catch move/up.\n    }\n\n    state.active = true;\n    state.source.setAttribute(`drag-source`, ``);\n\n    state.ghost = this.#createGhost(state.source);\n    if (state.ghost) {\n      state.ghost.move(event.clientX, event.clientY);\n    }\n  }\n\n  #abortDrag(): void {\n    const state = this.#dragState;\n    if (!state)\n      return;\n    state.source.removeAttribute(`drag-source`);\n    if (state.gapIndex !== undefined) {\n      state.gapIndex = undefined;\n      this.requestUpdate();\n    }\n    // Caller is responsible for invoking #endDrag to release pointer capture,\n    // tear down listeners, and destroy the ghost.\n  }\n\n  #endDrag(pointerId: number): void {\n    const state = this.#dragState;\n    if (!state)\n      return;\n\n    state.ghost?.destroy();\n    state.ghost = null;\n    this.#dragState = null;\n\n    window.removeEventListener(`pointermove`, this.#onPointerMove);\n    window.removeEventListener(`pointerup`, this.#onPointerUp);\n    window.removeEventListener(`pointercancel`, this.#onPointerCancel);\n\n    try {\n      this.#containerEl?.releasePointerCapture(pointerId);\n    } catch { /* already released */ }\n\n    // #dragState is a private field, not a Lit-reactive property — setting it\n    // to null doesn't trigger a re-render on its own. Without this, the caret\n    // (and any other drag-time UI) would remain in the DOM after the drag\n    // ends, even though the next render would clear them.\n    this.requestUpdate();\n  }\n\n  #commitDrag(source: TabListItemElement, fromIndex: number, gapIndex: number | undefined): void {\n    source.removeAttribute(`drag-source`);\n\n    // gapIndex is an index into the without-source siblings array: 0 = before\n    // the first sibling, siblings.length = after the last. The siblings array\n    // already excludes source, so we can insert directly at that position\n    // using siblings[gapIndex] as the reference (or null to append).\n    const siblings = this.#items.filter(el => el !== source);\n    const target = gapIndex === undefined\n      ? siblings.length\n      : Math.max(0, Math.min(gapIndex, siblings.length));\n\n    const parent = source.parentNode;\n    if (!parent)\n      return;\n\n    const ref = siblings[target] ?? null;\n    parent.insertBefore(source, ref);\n\n    const toIndex = Array.prototype.indexOf.call(parent.children, source);\n    if (toIndex === fromIndex) {\n      // Dropped in the same gap the item already occupies — no reorder, and no\n      // click suppression (a real click on the same tab is still meaningful).\n      return;\n    }\n\n    // Refresh cached #items so subsequent drags / queries see the new order\n    // (slotchange does NOT fire on reorder, only on add/remove).\n    this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n      ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n    this.#syncIndicatorColors();\n\n    // A real reorder just happened. The trailing click event (which the\n    // browser still fires after pointerup) would re-select whatever is under\n    // the release point — not what the user wanted. Suppress it.\n    this.#suppressNextClick = true;\n\n    this.dispatchEvent(new CustomEvent<TabListReorderDetail>(`reorder`, {\n      bubbles: true,\n      detail: {\n        id: source.id,\n        fromIndex,\n        toIndex,\n      },\n    }));\n  }\n\n  #createGhost(source: TabListItemElement): DragGhost | null {\n    const content = document.createElement(`span`);\n    content.style.display = `inline-flex`;\n    content.style.alignItems = `center`;\n    content.style.gap = `var(--space-xs, 4px)`;\n    content.style.minWidth = `0`;\n\n    const iconName = source.iconName;\n    if (iconName) {\n      const icon = document.createElement(`ixfx-icon`) as HTMLElement & { name: string };\n      icon.name = iconName;\n      content.appendChild(icon);\n    }\n\n    // Reconstruct label text from light-DOM children that aren't slotted.\n    // We want the text content of the source item, excluding `slot=\"toolbar\"`\n    // descendants (the close button lives inside the item's shadow DOM, not\n    // its light DOM, so it isn't part of childNodes here).\n    const label = document.createElement(`span`);\n    label.textContent = (source.textContent ?? ``).trim();\n    label.style.overflow = `hidden`;\n    label.style.textOverflow = `ellipsis`;\n    label.style.whiteSpace = `nowrap`;\n    content.appendChild(label);\n\n    try {\n      return createDragGhost({ anchor: source, content });\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Compute the index of the gap nearest the pointer, ignoring the source item.\n   * Returns 0..#items.length-1; undefined if no siblings.\n   *\n   * Per the plan: drag-mode=\"reorder\" has \"no sense of breaking out\", so the\n   * perpendicular axis is ignored — the pointer always resolves to some gap.\n   */\n  #computeGapIndex(clientX: number, clientY: number): number | undefined {\n    const state = this.#dragState;\n    if (!state)\n      return undefined;\n    const siblings = this.#items.filter(el => el !== state.source);\n    if (siblings.length === 0)\n      return 0;\n\n    const useX = !this.#isVertical;\n\n    let bestGap = 0;\n    let bestDist = Infinity;\n\n    // For each sibling, decide: gap is \"before this sibling\" or \"after\" based\n    // on which side of the midpoint the pointer is on. Pick the gap whose\n    // position (the midpoint if \"before\", the edge if \"after\") is closest to\n    // the pointer on the relevant axis.\n    for (let i = 0; i < siblings.length; i++) {\n      const rect = siblings[i].getBoundingClientRect();\n      const start = useX ? rect.left : rect.top;\n      const end = useX ? rect.right : rect.bottom;\n      const mid = (start + end) / 2;\n      const pos = useX ? clientX : clientY;\n\n      // Two candidate gaps: before this sibling (at `start`) and after (at `end`).\n      // \"Before\" gap index = i; \"after\" gap index = i + 1.\n      const dStart = Math.abs(pos - start);\n      const dMid = Math.abs(pos - mid);\n      const dEnd = Math.abs(pos - end);\n\n      // Heuristic: if pointer is left/above midpoint, prefer the \"before\" gap;\n      // otherwise prefer the \"after\" gap. Within those, the closer edge wins.\n      const preferBefore = pos < mid;\n      if (preferBefore) {\n        // Gap i (before this sibling)\n        if (dStart < bestDist) {\n          bestDist = dStart;\n          bestGap = i;\n        }\n      } else {\n        // Gap i+1 (after this sibling)\n        if (dEnd < bestDist) {\n          bestDist = dEnd;\n          bestGap = i + 1;\n        }\n      }\n      // The midpoint-distance is mostly redundant with the above but handles\n      // ties near the boundary cleanly — no-op for the chosen gap.\n      void dMid;\n    }\n\n    return bestGap;\n  }\n\n  #computeCaretStyle(): string | undefined {\n    const state = this.#dragState;\n    if (!state?.active || state.gapIndex === undefined)\n      return undefined;\n\n    const siblings = this.#items.filter(el => el !== state.source);\n    if (siblings.length === 0)\n      return undefined;\n\n    const useX = !this.#isVertical;\n    const containerRect = this.#containerEl?.getBoundingClientRect();\n    if (!containerRect)\n      return undefined;\n\n    const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));\n    let rect: DOMRect | null = null;\n    if (gap < siblings.length) {\n      rect = siblings[gap].getBoundingClientRect();\n    } else {\n      // After the last sibling: use its trailing edge\n      const last = siblings[siblings.length - 1].getBoundingClientRect();\n      rect = last;\n    }\n\n    if (useX) {\n      const x = (gap < siblings.length ? rect.left : rect.right) - containerRect.left;\n      const y = 0;\n      const h = containerRect.height;\n      const w = 2;\n      return `transform: translate(${x - w / 2}px, ${y}px); width: ${w}px; height: ${h}px;`;\n    } else {\n      const y = (gap < siblings.length ? rect.top : rect.bottom) - containerRect.top;\n      const x = 0;\n      const w = containerRect.width;\n      const h = 2;\n      return `transform: translate(${x}px, ${y - h / 2}px); width: ${w}px; height: ${h}px;`;\n    }\n  }\n\n  get #containerEl(): HTMLElement | null {\n    return this.shadowRoot?.getElementById(`container`) ?? null;\n  }\n\n  static styles = [themeFallbacks, css`\n  :host {\n      display: inline-block;\n      --activated-colour: var(--accent);\n      --colour: var(--surface-3-text);\n      --scroll-max-height: 200px;\n      --allow-overflow: hidden;\n      color: var(--colour);\n      border: var(--border, none);\n      border-color: var(--surface-5);\n      border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;\n\n    }\n    :host(.scrollable) {\n      max-height: var(--scroll-max-height);\n    }\n    :host([hide-labels]) {\n      display: inline-flex;\n      width: auto;\n    }\n    text {\n      user-select:none;\n    }\n    #container {\n      display:flex;\n      position: relative;\n    }\n    #container.horizontal {\n      flex-direction: row;\n      overflow: hidden;\n    }\n    #container.horizontal.scrollable {\n      overflow-x: auto;\n      --allow-overflow: visible;\n    }\n    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {\n      flex-shrink: 0;\n    }\n    #container.vertical-stack {\n      flex-direction: column;\n    }\n    #container.vertical-stack.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-stack.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n    #container.vertical-side {\n      flex-direction: column;\n    }\n    #container.vertical-side.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-side.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n\n    ::slotted(ixfx-tab-list-item) {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    #container.vertical-side ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-lr;\n      text-orientation: mixed;\n    }\n    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    /* Drag affordances — opt-in via drag-mode=\"reorder\" on the host (list). */\n    #container.reorder ::slotted(ixfx-tab-list-item) {\n      cursor: grab;\n    }\n    :host([drag-mode]) ::slotted(ixfx-tab-list-item[drag-source]) {\n      cursor: grabbing;\n      opacity: 0.4;\n      transition: opacity var(--transition, 0.15s ease-out);\n    }\n\n    /* Insertion caret shown during an active drag. */\n    .drop-caret {\n      position: absolute;\n      background: var(--accent);\n      border-radius: 1px;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    ::slotted(.activated) {\n      --colour: var(--activated-colour);\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-tab-list\": TabListElement;\n  }\n}\n"],"mappings":"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"}

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-CLqlPnX-.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-Beuh2nom.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import { t as TabListElement } from "./tab-list-6W5CgXix.js";
+import { t as TabListElement } from "./tab-list-mAoD6L0e.js";
 export { TabListElement };

package/docs-user/crumbs.md

@@ -36,6 +36,8 @@ nav.model = {
 | `caretEmbedded`       | `boolean`                      | `true`      | Embed carets within segments                    |
 | `hideRoot`            | `boolean`                      | `false`     | Hide the root node                               |
 | `inputMode`           | `string`                       | `''`        | Input mode for styling (`'keyboard'`, etc.)      |
+| `padEnding`           | `boolean`                      | `false`     | Pad trailing space to enable left-align scroll   |
+| `withUp`              | `boolean`                      | `false`     | Show an Up button to navigate to parent         |
 
 ### Events
 
@@ -85,6 +87,8 @@ Variables use the bridge pattern: internal `--crumb-*` variables fall back to ge
 | `exclusivity` | `TreeExclusivity` | `'none'` | Selection exclusivity mode. |
 | `selection-filter` | `TreeSelectionFilter` | `'leaf'` | Which nodes can be selected. |
 | `input-mode` | `string` | `''` | Input mode for styling (`'keyboard'`, etc.). |
+| `pad-ending` | `boolean` | `false` | Pad trailing space so the selected item can scroll to the far left. |
+| `with-up` | `boolean` | `false` | Show an Up button to navigate to the parent node. |
 
 ### CSS parts