@ixfx/components 0.8.2 → 0.8.3

package/dist/index.js

@@ -1,50 +1,51 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { a as iconBus, c as setIconFont, i as hasIcon, l as svgToDataUri, n as getIconEntry, o as registerFontIcon, r as getIconFont, s as registerIcon, t as getIcon } from "./registry-BEtb8_wB.js";
-import { t as IxfxIconElement } from "./icon-DcEEGQa_.js";
+import { t as IxfxIconElement } from "./icon-Dy33gu4Z.js";
 import { AcTextElement } from "./ac-text.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
 import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, l as KeyedElementIndex, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-C05WjbZh.js";
 import { AcTokenElement } from "./ac-token.js";
+import { t as handleStyles } from "./handle-BPOxBOKf.js";
+import { TitlebarElement } from "./titlebar.js";
 import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BJwDsMH4.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-DsFbV4XD.js";
+import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-DuiwgN3l.js";
-import { n as isMultiMode, t as ListSelectionController } from "./list-selection-controller-DTFI40li.js";
 import "./interaction-B9AAlsFO.js";
-import "./menu-item-B6pKg2Qq.js";
+import "./menu-item-BQDYxk5A.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-Ddsk-7E_.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-CSxwUmtE.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-4Jv28Nig.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-DTQon838.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as menu_exports } from "./menu-BDrTh6oo.js";
+import { t as menu_exports } from "./menu-HMoxCPY2.js";
 import { DataGridElement } from "./data-grid.js";
 import { DetailListElement } from "./detail-list.js";
-import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BFSbUZQv.js";
+import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-CA5jbNbG.js";
 import { TabListElement } from "./tabs.js";
-import { TitlebarElement } from "./titlebar.js";
 import { EditableLabel } from "./editable-label.js";
-import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-BInB5GKL.js";
+import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-BCH9968c.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-bmBWq6P-.js";
+import { n as PanTextElement, t as GridListElement } from "./grid-list-BXfY3XXX.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-BiRfwTz1.js";
-import { t as RadialInputElement } from "./radial-input-BfA3GO0H.js";
+import { t as RadialInputElement } from "./radial-input-DyxfbNzD.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
-import { t as SliderInputElement } from "./slider-input-Bl1hFE89.js";
+import { t as SliderInputElement } from "./slider-input-WR8_RwHg.js";
 import { LedElement } from "./led.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { NotificationPillElement } from "./notifier.js";
@@ -57,16 +58,518 @@ import { SelectHorizElement } from "./select-horiz.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
 import { SwipeElement } from "./swipe.js";
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-THyvH8xy.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { classMap } from "lit/directives/class-map.js";
+//#region src/bottom-drawer/bottom-drawer.ts
+/** Builds the command id for a named drawer's command, e.g. `inspector.expand`. */
+function bottomDrawerCommandId(name, command) {
+	return `${name.trim()}.${command}`;
+}
+function clampRange(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+let BottomDrawerElement = class BottomDrawerElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.height = 320;
+		this.minHeight = 160;
+		this.dismissThreshold = 96;
+		this.maxHeightRatio = .85;
+		this.label = `Drawer`;
+		this.iconName = ``;
+		this.closable = true;
+		this.collapsible = true;
+		this.maintainHandle = false;
+		this.name = ``;
+		this.#dragStartY = 0;
+		this.#dragStartHeight = 0;
+		this.#collapsedDragging = false;
+		this.#commandName = ``;
+		this.#commandIds = [];
+		this.#onResizeStart = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const edge = event.currentTarget;
+			edge.setPointerCapture(event.pointerId);
+			if (!this.open) {
+				this.#collapsedDragging = false;
+				this.#dragStartY = event.clientY;
+				this.#dragStartHeight = this.dismissThreshold;
+				edge.addEventListener(`pointermove`, this.#onTabPointerMove);
+				edge.addEventListener(`pointerup`, this.#onTabPointerUp, { once: true });
+				edge.addEventListener(`pointercancel`, this.#onTabPointerUp, { once: true });
+				return;
+			}
+			this.#dragStartY = event.clientY;
+			this.#dragStartHeight = this.#displayHeight();
+			this._dragHeight = this.#dragStartHeight;
+			this.toggleAttribute(`resizing`, true);
+			edge.addEventListener(`pointermove`, this.#onResizeMove);
+			edge.addEventListener(`pointerup`, this.#onResizeEnd, { once: true });
+			edge.addEventListener(`pointercancel`, this.#onResizeEnd, { once: true });
+		};
+		this.#onResizeMove = (event) => {
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onResizeEnd = (event) => {
+			const edge = event.currentTarget;
+			edge.removeEventListener(`pointermove`, this.#onResizeMove);
+			edge.removeEventListener(`pointerup`, this.#onResizeEnd);
+			edge.removeEventListener(`pointercancel`, this.#onResizeEnd);
+			if (edge.hasPointerCapture(event.pointerId)) edge.releasePointerCapture(event.pointerId);
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onResizeKeyDown = (event) => {
+			if (!this.open) {
+				if (event.key === `ArrowUp` || event.key === `Enter` || event.key === ` ` || event.key === `Home` || event.key === `End`) {
+					event.preventDefault();
+					this.show();
+				}
+				return;
+			}
+			const delta = event.shiftKey ? 64 : 16;
+			if (event.key === `ArrowUp`) {
+				event.preventDefault();
+				this.#setHeight(this.height + delta);
+			} else if (event.key === `ArrowDown`) {
+				event.preventDefault();
+				if (this.height - delta < this.dismissThreshold) this.close();
+				else this.#setHeight(this.height - delta);
+			} else if (event.key === `Home`) {
+				event.preventDefault();
+				this.#setHeight(this.minHeight);
+			} else if (event.key === `End`) {
+				event.preventDefault();
+				this.#setHeight(this.#maxHeight());
+			}
+		};
+		this.#onTabPointerMove = (event) => {
+			const delta = this.#dragStartY - event.clientY;
+			if (!this.#collapsedDragging) {
+				if (delta < 4) return;
+				this.#collapsedDragging = true;
+				this.show();
+				this.toggleAttribute(`resizing`, true);
+			}
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onTabPointerUp = (event) => {
+			const target = event.currentTarget;
+			target.removeEventListener(`pointermove`, this.#onTabPointerMove);
+			target.removeEventListener(`pointerup`, this.#onTabPointerUp);
+			target.removeEventListener(`pointercancel`, this.#onTabPointerUp);
+			if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+			if (!this.#collapsedDragging) {
+				this.show();
+				return;
+			}
+			this.#collapsedDragging = false;
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onDrawerKeyDown = (event) => {
+			if (event.key !== `Escape`) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.close();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
+    :host {
+      --bottom-drawer-background: color-mix(in srgb, var(--surface-2) 84%, transparent);
+      --bottom-drawer-border: 1px solid color-mix(in srgb, var(--surface-2-text) 14%, transparent);
+      --bottom-drawer-radius: var(--radius-l);
+      --bottom-drawer-blur: 18px;
+      --bottom-drawer-shadow: var(--shadow-l);
+      --bottom-drawer-collapsed-width: 96px;
+
+      display: block;
+      position: relative;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .content {
+      position: absolute;
+      inset: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+    .content ::slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+    .drawer {
+      --m: 0;
+      position: absolute;
+      z-index: 2;
+      right: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      bottom: 0;
+      left: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      height: var(--bottom-drawer-height);
+      max-height: 100%;
+      min-height: 0;
+      color: var(--surface-2-text);
+      background: var(--bottom-drawer-background);
+      border: var(--bottom-drawer-border);
+      border-bottom: 0;
+      border-radius: var(--bottom-drawer-radius) var(--bottom-drawer-radius) 0 0;
+      box-shadow: var(--bottom-drawer-shadow);
+      backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      -webkit-backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      opacity: 0;
+      transform: translateY(100%);
+      visibility: hidden;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition),
+        visibility 0s linear 0.16s;
+      will-change: transform, opacity;
+    }
+    :host([open]) .drawer {
+      opacity: var(--bottom-drawer-opacity, 1);
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([resizing]) {
+      cursor: ns-resize;
+      user-select: none;
+    }
+    :host([resizing]) .drawer {
+      transition: none;
+    }
+    .resize-edge {
+      position: absolute;
+      z-index: 1;
+      top: -5px;
+      right: 0;
+      left: 0;
+      height: 11px;
+      cursor: ns-resize;
+      touch-action: none;
+      outline: none;
+    }
+    .resize-edge .ixfx-handle {
+      position: absolute;
+      top: 7px;
+      left: 50%;
+      transform: translateX(-50%);
+      --ixfx-handle-length: 44px;
+      --ixfx-handle-thickness: 3px;
+      --ixfx-handle-radius: 999px;
+    }
+    /* Inner content fades as the drawer morphs into its collapsed tab. */
+    ixfx-titlebar,
+    .body {
+      opacity: calc(1 - var(--m, 0));
+      transition: opacity var(--transition);
+    }
+    :host([resizing]) ixfx-titlebar,
+    :host([resizing]) .body {
+      transition: none;
+    }
+    /* Collapsed tab: docked to the bottom edge, narrowed to handle width. */
+    :host([maintain-handle]:not([open])) .drawer {
+      --m: 1;
+      height: 20px;
+      opacity: 1;
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([maintain-handle]:not([open])) ixfx-titlebar,
+    :host([maintain-handle]:not([open])) .body {
+      display: none;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge {
+      top: 0;
+      height: 100%;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge .ixfx-handle {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    ixfx-titlebar {
+      flex: none;
+      --titlebar-background: var(--bottom-drawer-title-background, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--surface-2-text) 10%, transparent);
+    }
+    .body {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+    .body ::slotted(*) {
+      box-sizing: border-box;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .drawer,
+      ixfx-titlebar,
+      .body {
+        transition-duration: 0s;
+      }
+    }
+  `
+		];
+	}
+	#dragStartY;
+	#dragStartHeight;
+	#collapsedDragging;
+	#ownedRegistry;
+	#commandTarget;
+	#commandName;
+	#commandIds;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#syncCommands();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#teardownCommands();
+		if (this.#ownedRegistry !== void 0) {
+			if (this.registry === this.#ownedRegistry) this.registry = void 0;
+			this.#ownedRegistry = void 0;
+		}
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`name`) || changed.has(`registry`)) this.#syncCommands();
+	}
+	show() {
+		this.open = true;
+	}
+	close() {
+		if (!this.open) return;
+		this.open = false;
+		this.dispatchEvent(new CustomEvent(`drawer-close`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	toggle() {
+		if (this.open) this.close();
+		else this.show();
+	}
+	#syncCommands() {
+		const name = this.name.trim();
+		const target = this.registry ?? this.#ownedRegistry;
+		if (name !== `` && this.isConnected && target !== void 0 && this.#commandTarget === target && this.#commandName === name) return;
+		this.#teardownCommands();
+		if (name === `` || !this.isConnected) return;
+		const resolved = this.registry ?? (this.#ownedRegistry ??= createCommandRegistry());
+		if (this.#ownedRegistry !== void 0 && resolved !== this.#ownedRegistry) this.#ownedRegistry = void 0;
+		if (this.registry === void 0) this.registry = resolved;
+		const registered = [];
+		const commands = [
+			{
+				command: `expand`,
+				label: `Expand ${this.label}`,
+				description: `Open the ${this.label} drawer`,
+				execute: () => this.show()
+			},
+			{
+				command: `collapse`,
+				label: `Collapse ${this.label}`,
+				description: `Close the ${this.label} drawer`,
+				execute: () => this.close()
+			},
+			{
+				command: `toggle`,
+				label: `Toggle ${this.label}`,
+				description: `Open the ${this.label} drawer if closed, close it if open`,
+				execute: () => this.toggle()
+			}
+		];
+		for (const { command, label, description, execute } of commands) {
+			const id = bottomDrawerCommandId(name, command);
+			if (resolved.has(id)) continue;
+			resolved.register({
+				id,
+				label,
+				description,
+				execute
+			});
+			registered.push(id);
+		}
+		this.#commandTarget = resolved;
+		this.#commandName = name;
+		this.#commandIds = registered;
+	}
+	#teardownCommands() {
+		if (this.#commandTarget !== void 0) {
+			for (const id of this.#commandIds) this.#commandTarget.unregister(id);
+			this.#commandTarget = void 0;
+			this.#commandName = ``;
+			this.#commandIds = [];
+		}
+	}
+	_onTitlebarToggle(event) {
+		event.stopPropagation();
+		if (event.detail.collapsed) this.close();
+		else this.open = true;
+	}
+	_onTitlebarClose(event) {
+		event.stopPropagation();
+		this.close();
+	}
+	render() {
+		const raw = this.#displayHeight();
+		const max = this.#maxHeight();
+		const morph = this.#morphProgress(raw);
+		const height = this.open ? raw * (1 - morph) + 20 * morph : 20;
+		const opacity = this.maintainHandle && this.open ? 1 : this.#dragOpacity(raw);
+		return html`
+      <div class="content"><slot></slot></div>
+      <section
+        class="drawer"
+        style=${`--bottom-drawer-height: ${height}px; --bottom-drawer-opacity: ${opacity}; --m: ${morph}`}
+        role="region"
+        aria-label=${this.label}
+        @keydown=${this.#onDrawerKeyDown}
+      >
+        <div
+          class="resize-edge"
+          role="separator"
+          tabindex="0"
+          aria-label=${`${this.open ? `Resize` : `Expand`} ${this.label}`}
+          aria-orientation="horizontal"
+          aria-valuemin=${this.minHeight}
+          aria-valuemax=${max}
+          aria-valuenow=${Math.round(raw)}
+          @pointerdown=${this.#onResizeStart}
+          @keydown=${this.#onResizeKeyDown}
+        ><span class="ixfx-handle" data-handle="dimpled" data-shape="horizontal" part="handle"></span></div>
+        <ixfx-titlebar
+          .title=${this.label}
+          .iconName=${this.iconName}
+          .closable=${this.closable}
+          .collapsible=${this.collapsible}
+          .collapsed=${!this.open}
+          ?inert=${!this.open}
+          @toggle=${this._onTitlebarToggle}
+          @close=${this._onTitlebarClose}
+        >
+          <slot name="toolbar" slot="toolbar"></slot>
+        </ixfx-titlebar>
+        <div class="body" ?inert=${!this.open}><slot name="drawer"></slot></div>
+      </section>
+    `;
+	}
+	#maxHeight() {
+		const availableHeight = this.clientHeight || this.height;
+		return Math.max(this.minHeight, availableHeight * clampRange(this.maxHeightRatio, 0, 1));
+	}
+	#displayHeight() {
+		return clampRange(this._dragHeight ?? this.height, 0, this.#maxHeight());
+	}
+	#dragOpacity(height) {
+		if (this._dragHeight === void 0 || height >= this.minHeight) return 1;
+		const fadeRange = this.minHeight - this.dismissThreshold;
+		if (fadeRange <= 0) return height >= this.dismissThreshold ? 1 : 0;
+		return clampRange((height - this.dismissThreshold) / fadeRange, 0, 1);
+	}
+	#morphProgress(raw) {
+		if (!this.open) return this.maintainHandle ? 1 : 0;
+		if (this._dragHeight === void 0 || !this.maintainHandle) return 0;
+		const range = this.minHeight - this.dismissThreshold;
+		if (range <= 0) return raw < this.dismissThreshold ? 1 : 0;
+		return clampRange((this.minHeight - raw) / range, 0, 1);
+	}
+	#setHeight(height) {
+		this.height = clampRange(height, this.minHeight, this.#maxHeight());
+		this.dispatchEvent(new CustomEvent(`drawer-resize`, {
+			detail: { height: this.height },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onResizeStart;
+	#onResizeMove;
+	#onResizeEnd;
+	#onResizeKeyDown;
+	#onTabPointerMove;
+	#onTabPointerUp;
+	#onDrawerKeyDown;
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], BottomDrawerElement.prototype, "open", void 0);
+__decorate([property({ type: Number })], BottomDrawerElement.prototype, "height", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-height`
+})], BottomDrawerElement.prototype, "minHeight", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `dismiss-threshold`
+})], BottomDrawerElement.prototype, "dismissThreshold", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-height-ratio`
+})], BottomDrawerElement.prototype, "maxHeightRatio", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], BottomDrawerElement.prototype, "iconName", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "closable", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `maintain-handle`,
+	reflect: true
+})], BottomDrawerElement.prototype, "maintainHandle", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "name", void 0);
+__decorate([property({ attribute: false })], BottomDrawerElement.prototype, "registry", void 0);
+__decorate([state()], BottomDrawerElement.prototype, "_dragHeight", void 0);
+BottomDrawerElement = __decorate([safeCustomElement(`ixfx-bottom-drawer`)], BottomDrawerElement);
+//#endregion
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends LitElement {
 	constructor(..._args) {
@@ -4180,7 +4683,7 @@ let DockHostElement = class DockHostElement extends LitElement {
           role="separator"
           aria-label="Resize adjacent panels"
           @pointerdown=${(e) => this._onJunctionPointerDown(e, junction)}
-        ></div>
+        ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="junction-handle"></span></div>
       `)}
       </div>
       <slot @slotchange=${this._onPoolSlotChange}></slot>
@@ -4274,7 +4777,10 @@ let DockHostElement = class DockHostElement extends LitElement {
 		};
 	}
 	static {
-		this.styles = [themeFallbacks, css`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
       :host {
         display: block;
         width: 100%;
@@ -4402,26 +4908,23 @@ let DockHostElement = class DockHostElement extends LitElement {
         border-radius: 50%;
         cursor: nwse-resize;
         pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-      .junction-handle::after {
-        content: '';
-        position: absolute;
-        inset: 4px;
-        border-radius: 50%;
-        background: var(--dock-junction-color, var(--accent));
-        opacity: 0;
-        transition: opacity var(--transition);
-      }
-
-      .junction-handle:hover::after {
-        opacity: 0.9;
+      .junction-handle .ixfx-handle {
+        --ixfx-handle-spot-size: 12px;
+        --ixfx-handle-dot-size: 3px;
+        --ixfx-handle-opacity: 0;
+        --ixfx-handle-opacity-active: 0.9;
       }
 
       slot:not([name]) {
         display: none;
       }
-    `];
+    `
+		];
 	}
 };
 __decorate([property({
@@ -5160,136 +5663,6 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
-//#region src/pan-text/pan-text.ts
-const SPEED = 45;
-const END_PADDING = 4;
-const START_DELAY = 300;
-const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
-let PanTextElement = class PanTextElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.direction = `end`;
-		this.disabled = false;
-		this._isOverflowing = false;
-		this._isHovering = false;
-		this._overflow = 0;
-		this._resizeObserver = null;
-		this._onMouseEnter = () => {
-			this._isHovering = true;
-		};
-		this._onMouseLeave = () => {
-			this._isHovering = false;
-		};
-		this._measure = () => {
-			if (this._isHovering) return;
-			const el = this._textEl;
-			if (!el) return;
-			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
-			const overflowing = this._overflow > 0;
-			this.classList.toggle(`is-overflowing`, overflowing);
-			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(() => this._measure());
-		this.addEventListener(`mouseenter`, this._onMouseEnter);
-		this.addEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = null;
-		this.removeEventListener(`mouseenter`, this._onMouseEnter);
-		this.removeEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	firstUpdated() {
-		this._measure();
-		this._resizeObserver?.observe(this);
-		document.fonts?.ready.then(() => this._measure());
-	}
-	updated() {
-		this._measure();
-	}
-	_textStyle() {
-		if (!this._isOverflowing) return ``;
-		const distance = this._overflow + END_PADDING;
-		const duration = Math.max(1.5, distance / SPEED);
-		const revealEnd = this.direction === `end`;
-		const restX = revealEnd ? 0 : -distance;
-		const hoverX = revealEnd ? -distance : 0;
-		if (this._isHovering) return [
-			`transform: translateX(${hoverX}px)`,
-			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
-			`overflow: visible`,
-			`text-overflow: clip`
-		].join(`; `);
-		return [
-			`transform: translateX(${restX}px)`,
-			`transition: transform 400ms ${PAN_EASING}`,
-			revealEnd ? `` : `overflow: visible; text-overflow: clip`
-		].filter(Boolean).join(`; `);
-	}
-	render() {
-		const textClasses = {
-			"is-overflowing": this._isOverflowing,
-			"is-hovering": this._isHovering
-		};
-		return html`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-    /* Renders like plain inline text: no colours, border, padding or margin
-       of its own — it only adds the clipping needed to pan on hover. */
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 100%;
-      box-sizing: border-box;
-      font: inherit;
-      color: inherit;
-    }
-
-    :host([disabled]) {
-      opacity: var(--disabled-opacity, 0.5);
-      pointer-events: none;
-    }
-
-    .text {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      will-change: transform;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .text {
-        transition: none !important;
-        transform: none !important;
-      }
-    }
-  `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `direction`
-})], PanTextElement.prototype, "direction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `disabled`
-})], PanTextElement.prototype, "disabled", void 0);
-__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
-__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
-__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
-PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
-//#endregion
 //#region src/panel/panel-group.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
 const DRAG_THRESHOLD_PX = 5;
@@ -8075,29 +8448,29 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? html`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
       <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>
-        ` : ``}
+        ${this.showGrabHandle ? html`<span
+              class="ixfx-handle"
+              part="grip"
+              data-handle="dimpled"
+              data-shape=${this.layout === `horizontal` ? `horizontal` : `vertical`}
+            ></span>` : ``}
       </div>
       <slot style=${sizeB} name="b"></slot>
     </div>`;
 	}
 	static {
-		this.styles = [themeFallbacks, css`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
   :host {
       --handle-size: 2px;
       --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;
+      /* Grip — shared handle primitive (docs/infra-handle.md). */
+      --ixfx-handle-length: 16px;
+      --ixfx-handle-thickness: 8px;
 
       display: block;
       box-sizing: border-box;
@@ -8140,40 +8513,14 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
       to { background-color: var(--handle-hover-colour); }
     }
 
-    .grab-handle {
+    .split-bar .ixfx-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 {
+    #zone.user-resizing .ixfx-handle {
       display: none;
     }
     #zone.user-resizing {
@@ -8226,7 +8573,8 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
     :host([data-collapsed-b]) slot[name="b"] {
       display: none;
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "layout", void 0);
@@ -8307,6 +8655,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map