@ixfx/components 0.10.4 → 0.10.6

package/dist/index.js

@@ -38,6 +38,8 @@ 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-BJEU1W0d.js";
 import { TabListElement } from "./tabs.js";
 import { EditableLabel } from "./editable-label.js";
+import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CF2RtzgG.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
 import { t as GridListElement } from "./grid-list-CaMcdpFJ.js";
@@ -63,7 +65,7 @@ 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-BP1Ux2EV.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html, nothing, svg } 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";
@@ -3173,16 +3175,21 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		super(..._args);
 		this.closeable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
 		this._hasToolbarContent = false;
+		this._hasStatusContent = false;
 		this._labelObserver = null;
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
+		this._onStatusSlotChange = () => {
+			this._updateStatusContent();
+		};
 		this._onLabelSlotChange = () => {
 			this._syncLabelSizer();
 		};
@@ -3193,13 +3200,18 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
-		this._labelObserver = new MutationObserver(() => this._syncLabelSizer());
+		this._wireSlotListeners();
+		this._labelObserver = new MutationObserver(() => {
+			this._syncLabelSizer();
+			this._updateToolbarContent();
+			this._updateStatusContent();
+		});
 		this._labelObserver.observe(this, {
 			childList: true,
 			characterData: true,
-			subtree: true
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`slot`]
 		});
 	}
 	disconnectedCallback() {
@@ -3210,8 +3222,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		this._commandCleanup = void 0;
 		this._labelObserver?.disconnect();
 		this._labelObserver = null;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+		this._unwireSlotListeners();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -3235,6 +3246,22 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		});
 	}
 	/**
+	* Attach slotchange listeners. The shadow root is empty during the first
+	* connectedCallback (the template only exists once rendered), so this is
+	* called again from firstUpdated. addEventListener dedupes identical
+	* listener registrations, so double-wiring is harmless.
+	*/
+	_wireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.addEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	_unwireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.removeEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	/**
 	* Mirror the default-slot text into `.label[data-label]` for the `::after`
 	* width sizer. Slotted toolbar content is excluded.
 	*/
@@ -3247,11 +3274,20 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		else label.removeAttribute(`data-label`);
 	}
 	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+		this._hasToolbarContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `toolbar`);
+	}
+	/**
+	* Named slots only render once content has been detected, so reading
+	* assignedElements() cannot bootstrap detection. Direct light-DOM children
+	* are exactly what a slot assigns, so scan those instead.
+	*/
+	_updateStatusContent() {
+		this._hasStatusContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `status`);
 	}
 	firstUpdated() {
+		this._wireSlotListeners();
 		this._updateToolbarContent();
+		this._updateStatusContent();
 		this._syncLabelSizer();
 	}
 	render() {
@@ -3261,6 +3297,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
       <div>
         ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
         ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
+        ${this._hasStatusContent ? html`<div class="status"><slot name="status"></slot></div>` : nothing}
         ${hasActions ? html`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
@@ -3413,6 +3450,28 @@ let TabListItemElement = class TabListItemElement extends LitElement {
         display: contents;
       }
 
+      /* Persistent status slot (e.g. an ixfx-led). Unlike .toolbar it is
+         always visible, selection or not, and keeps its own size however
+         much the label truncates. --size inherits through slotted content,
+         so bare and button-wrapped LEDs both render smaller; consumers can
+         override per element. */
+      .status {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        --size: 0.75ex;
+      }
+
+      slot[name="status"] {
+        display: contents;
+      }
+
+      /* With label-nogrow, the label keeps its intrinsic width so status
+         content lands next to the label text instead of the far edge. */
+      :host([label-nogrow]) .label {
+        flex: 0 0 auto;
+      }
+
       /* Slotted buttons inherit these through the shadow boundary; keeps a
          toolbar button from inflating the strip height. */
       .toolbar ::slotted(ixfx-button) {
@@ -3456,6 +3515,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListItemElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListItemElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -3468,6 +3531,7 @@ __decorate([property({
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 __decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasStatusContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/dock/dock-panel.ts
@@ -8853,6 +8917,289 @@ __decorate([property({ type: String })], RatingElement.prototype, "variant", voi
 __decorate([state()], RatingElement.prototype, "_preview", void 0);
 RatingElement = __decorate([customElement(`ixfx-rating`)], RatingElement);
 //#endregion
+//#region src/util/clamp.ts
+function clampValue(v, min, max) {
+	return Math.min(Math.max(v, min), max);
+}
+//#endregion
+//#region src/util/geometry.ts
+function scale(v, fromMin, fromMax, toMin, toMax) {
+	if (fromMax === fromMin) return toMin;
+	return toMin + (v - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/shapefill-value/shapefill-value.ts
+let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.display = `circle`;
+		this.fillMode = `centre`;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.disabled = false;
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			svgEl?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svgEl) svgEl.setPointerCapture(event.pointerId);
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onPointerMove = (event) => {
+			if (!this.#dragging) return;
+			event.preventDefault();
+			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
+			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
+			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			this.#setValueFromRelative(clampValue(relativeValue, 0, 1), true);
+		};
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			if (svgEl && `hasPointerCapture` in svgEl && typeof svgEl.hasPointerCapture === `function`) {
+				if (svgEl.hasPointerCapture(1)) svgEl.releasePointerCapture(1);
+			}
+			window.removeEventListener(`pointermove`, this.#onPointerMove);
+			window.removeEventListener(`pointerup`, this.#onPointerUp);
+			window.removeEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onKeyDown = (event) => {
+			if (this.disabled) return;
+			const range = this.max - this.min;
+			const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#stepByRelativeDelta(effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#stepByRelativeDelta(-effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+			}
+			if (handled) event.preventDefault();
+		};
+	}
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
+	}
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return Math.round((value - this.min) / step) * step + this.min;
+		}
+		return value;
+	}
+	#setValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clampValue(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValue() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: {
+					value: this.value,
+					valueRelative: this.#getRelativeValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(previousValue);
+		} else this.#fireChangeEvent(previousValue);
+	}
+	#scheduleChangeEvent(previousValue) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(previousValue);
+			this.#changeDebounceTimer = void 0;
+		}, 150);
+	}
+	#fireChangeEvent(previousValue) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: this.value,
+				valueRelative: this.#getRelativeValue(),
+				previousValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onKeyDown;
+	/**
+	* Apply a relative-delta nudge to the current value, clamped to [min, max] and
+	* quantised. Shared between keyboard arrow keys and the wheel handler.
+	*/
+	#stepByRelativeDelta(relativeDelta, isUserInteraction) {
+		this.#setValueFromRelative(clampValue(this.#getRelativeValue() + relativeDelta, 0, 1), isUserInteraction);
+	}
+	_applyWheelDelta(direction, event) {
+		const range = this.max - this.min;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		this.#stepByRelativeDelta(direction * effectiveStep / range, true);
+	}
+	#renderCircle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerRadius = 45;
+		const innerRadius = outerRadius * relativeValue;
+		const outerCx = 50;
+		const outerCy = 50;
+		let cx = outerCx;
+		if (this.fillMode === `left`) cx = 5 + outerRadius * relativeValue;
+		else if (this.fillMode === `right`) cx = 95 - outerRadius * relativeValue;
+		return svg`
+      <circle class="fill" cx="${cx}" cy="${outerCy}" r="${innerRadius}" />
+      <circle class="outline" cx="${outerCx}" cy="${outerCy}" r="${outerRadius}" fill="none" />
+    `;
+	}
+	#renderRectangle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerSize = 90;
+		const outerOffset = 5;
+		if (this.fillMode === `left` || this.fillMode === `right`) {
+			const innerWidth = outerSize * relativeValue;
+			const x = this.fillMode === `left` ? outerOffset : 95 - innerWidth;
+			return svg`
+        <rect class="fill" x="${x}" y="${outerOffset}" width="${innerWidth}" height="${outerSize}" />
+        <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+      `;
+		}
+		const innerSize = outerSize * relativeValue;
+		const innerOffset = (100 - innerSize) / 2;
+		return svg`
+      <rect class="fill" x="${innerOffset}" y="${innerOffset}" width="${innerSize}" height="${innerSize}" />
+      <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+    `;
+	}
+	render() {
+		const preserveAspectRatio = this.display === `rectangle` ? `none` : `xMidYMid meet`;
+		return html`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="${preserveAspectRatio}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${this.display === `rectangle` ? this.#renderRectangle() : this.#renderCircle()}
+      </svg>
+    `;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.style.setProperty(`--shapefill-value-relative`, this.#getRelativeValue().toString());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
+    :host {
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      touch-action: none;
+      user-select: none;
+
+      /* Dynamic value - set by JS */
+      --shapefill-value-relative: 0;
+
+      /* Public styling variables — consumer customisable */
+      --shapefill-value-outline-color: var(--surface-4);
+      --shapefill-value-outline-width: 2;
+      --shapefill-value-fill-color: var(--accent);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      display: block;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--shapefill-value-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--shapefill-value-focus-outline-offset, 2px);
+    }
+
+    .outline {
+      stroke: var(--shapefill-value-outline-color, var(--surface-4));
+      stroke-width: var(--shapefill-value-outline-width, 2);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .fill {
+      fill: var(--shapefill-value-fill-color, var(--accent));
+      transition: var(--shapefill-value-fill-transition, none);
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: String })], ShapefillValueElement.prototype, "display", void 0);
+__decorate([property({
+	type: String,
+	attribute: `fill-mode`
+})], ShapefillValueElement.prototype, "fillMode", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "stops", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ShapefillValueElement.prototype, "disabled", void 0);
+ShapefillValueElement = __decorate([safeCustomElement(`ixfx-shapefill-value`)], ShapefillValueElement);
+//#endregion
 //#region src/sliding-number/sliding-number.ts
 const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
 const SECTION_RANK = {
@@ -9953,6 +10300,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		this.invisibleGroups = false;
 		this.allowReorder = false;
 		this._overflowCount = 0;
+		this._popoverOpen = false;
 		this._ro = null;
 		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
 		this._sizes = /* @__PURE__ */ new WeakMap();
@@ -10078,11 +10426,11 @@ let ToolbarElement = class ToolbarElement extends LitElement {
     .overflow-btn[hidden] { display: none; }
     .overflow-popover {
       position: fixed;
-      top: anchor(bottom);
-      left: anchor(right);
+      inset: auto;
+      margin: 0;
       position-anchor: var(--anchor-name);
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-      margin: 8px;
+      position-visibility: anchors-visible;
       max-height: min(60vh, 400px);
       max-width: min(90vw, 320px);
       overflow: auto;
@@ -10092,6 +10440,18 @@ let ToolbarElement = class ToolbarElement extends LitElement {
       flex-direction: column;
       gap: var(--space-s);
     }
+    :host([orientation="horizontal"]) .overflow-popover {
+      position-area: bottom span-left;
+      margin-top: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-left"]) .overflow-popover {
+      position-area: right span-bottom;
+      margin-left: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-right"]) .overflow-popover {
+      position-area: left span-bottom;
+      margin-right: var(--toolbar-overflow-gap, 8px);
+    }
     .overflow-popover:popover-open { display: flex; }
     .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
 
@@ -10130,6 +10490,9 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		});
 		this._ro = new ResizeObserver(() => this._scheduleMeasure());
 		this._ro.observe(this._inner);
+		this._popover.addEventListener(`toggle`, () => {
+			this._popoverOpen = this._popover.matches(`:popover-open`);
+		});
 		this._scheduleMeasure();
 		this._updateGroups();
 	}
@@ -10470,7 +10833,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		return html`
       <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
         <slot @pointerdown=${this._onPointerDown} @keydown=${this._onKeyDown}></slot>
-        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popoverOpen}>⋯</ixfx-button>
       </div>
       <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
         <slot name="overflow"></slot>
@@ -10513,6 +10876,7 @@ __decorate([property({
 	reflect: true
 })], ToolbarElement.prototype, "allowReorder", void 0);
 __decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([state()], ToolbarElement.prototype, "_popoverOpen", void 0);
 __decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
 __decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
 __decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
@@ -12499,6 +12863,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-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, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, 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, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, 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, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, 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, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map