@ixfx/components 0.5.17 → 0.5.19

package/bundle/index.js

@@ -2979,6 +2979,11 @@ const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="
 * fill="currentColor" so it inherits CSS color.
 */
 const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+/**
+* Folder with up arrow. Angled line style for navigating up one level.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
 function registerDefaults() {
 	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
 	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
@@ -2986,6 +2991,7 @@ function registerDefaults() {
 	registerIcon(`check`, ICON_CHECK);
 	registerIcon(`close`, ICON_CLOSE);
 	registerIcon(`error`, ICON_ERROR);
+	registerIcon(`folder-up`, ICON_FOLDER_UP);
 	registerIcon(`info`, ICON_INFO);
 	registerIcon(`warning`, ICON_WARNING);
 }
@@ -3843,6 +3849,7 @@ let MenuTrigger = class MenuTrigger extends i {
 		this.mode = `trigger`;
 		this.label = `⋮`;
 		this.placement = `bottom-start`;
+		this.tabStop = true;
 		this._isOpen = false;
 		this._hasMenu = false;
 		this._hasTriggerSlot = false;
@@ -4105,7 +4112,7 @@ let MenuTrigger = class MenuTrigger extends i {
         @click=${this._handleTriggerClick}
         @contextmenu=${this._handleContextMenu}
       >
-        ${showButton ? b`<button class="trigger-btn" part="base">${this.label}</button>` : null}
+        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.label}</button>` : null}
         <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
       </div>
       <div
@@ -4123,6 +4130,10 @@ __decorate([property({ type: String })], MenuTrigger.prototype, "label", void 0)
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
 __decorate([property({ type: String })], MenuTrigger.prototype, "placement", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `tab-stop`
+})], MenuTrigger.prototype, "tabStop", void 0);
 __decorate([state()], MenuTrigger.prototype, "_isOpen", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
@@ -7100,6 +7111,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		this.leadingCaret = false;
 		this.caretEmbedded = true;
 		this.hideRoot = false;
+		this.padEnding = false;
+		this.withUp = false;
 		this.#previousSelectionKey = ``;
 		this.#menuOpenedByKeyboard = false;
 		this.#currentOpenTrigger = null;
@@ -7137,7 +7150,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					const r = this.root;
 					const sel = this.selectedNode;
 					if (!r || !sel) break;
-					const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+					const totalItems = this.#getTickledItems().length;
 					const currentTickled = this.tickled.tickledId ?? -1;
 					if (e.key === `ArrowLeft`) {
 						if (currentTickled > 0) this.tickled.handleKeyboardNavigation(`previous`);
@@ -7150,13 +7163,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			const r = this.root;
 			const sel = this.selectedNode;
 			if (!r || !sel) return;
-			const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+			const totalItems = this.#getTickledItems().length;
 			const currentTickled = this.tickled.tickledId ?? -1;
 			switch (e.key) {
 				case `ArrowRight`:
 					e.preventDefault();
 					if (currentTickled < totalItems - 1) this.tickled.handleKeyboardNavigation(`next`);
-					else if (currentTickled === totalItems - 1) this.#shiftFocusToNarrowedText();
+					else if (currentTickled === totalItems - 1 && this.#canFocusSuggestions()) this.#shiftFocusToNarrowedText();
 					break;
 				case `ArrowLeft`:
 					e.preventDefault();
@@ -7176,8 +7189,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					}
 					break;
 				case `Enter`:
+				case ` `:
 					e.preventDefault();
-					this.#handleEnter();
+					this.#activateTickled();
 					break;
 				case `Escape`:
 					e.preventDefault();
@@ -7185,16 +7199,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					this.tickled.clearTickled();
 					this.blur();
 					break;
-				case `Tab`: if (e.shiftKey) {
-					e.preventDefault();
-					this.#shiftFocusToPath();
-				} else if (currentTickled === totalItems - 1) {
-					e.preventDefault();
-					this._menuOpen = false;
-					this._focusOnNarrowedText = true;
-					const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
-					if (narrowedText) narrowedText.focus();
-				}
+				case `Tab`:
+					if (e.shiftKey) break;
+					if (currentTickled === totalItems - 1 && this.#canFocusSuggestions()) {
+						e.preventDefault();
+						this.#shiftFocusToNarrowedText();
+					}
 			}
 		};
 		this.#onNarrowedTextBlur = () => {
@@ -7246,7 +7256,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					enabled: true
 				});
 			});
-			if (this.#hasChildOptions()) items.push({
+			if (this.#canFocusSuggestions()) items.push({
 				id: pathNodes.length,
 				enabled: true
 			});
@@ -7282,8 +7292,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		if (!r || !sel) return;
 		const pathNodes = this.#findPath(r, sel) ?? [r];
 		let el = null;
-		if (index < pathNodes.length) el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
-		else if (index === pathNodes.length) el = this.shadowRoot?.querySelector(`#child-options-trigger`) ?? null;
+		if (this.caretEmbedded && this.#canFocusSuggestions() && index === pathNodes.length) el = this.shadowRoot?.querySelector(`ixfx-narrowed-text`) ?? null;
+		else el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
 		el?.scrollIntoView({
 			inline: `nearest`,
 			block: `nearest`,
@@ -7296,6 +7306,10 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const isPending = this.#pendingNode === s;
 		return (s.children ?? []).length > 0 || isPending;
 	}
+	/** True when the suggestions (narrowed-text) sub-part is renderable and focusable. */
+	#canFocusSuggestions() {
+		return this.showSuggestions && this.#hasChildOptions();
+	}
 	#onFocus;
 	#onBlur;
 	#getHostContainer() {
@@ -7308,26 +7322,18 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const r = this.root;
 		const sel = this.selectedNode;
 		if (!r || !sel) return;
-		if (currentTickled < (this.#findPath(r, sel) ?? [r]).length - 1) {
-			const trigger = (this.shadowRoot?.querySelectorAll(`.crumb-segment`))?.[currentTickled]?.querySelector(`.caret ixfx-menu-trigger`);
-			if (trigger) {
-				this.#menuOpenedByKeyboard = true;
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-				return;
-			}
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
 		}
-		if (this.#hasChildOptions()) {
-			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
-			if (trigger) {
-				this.#menuOpenedByKeyboard = true;
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-			}
+		const trigger = (this.shadowRoot?.querySelectorAll(`.crumb-segment`))?.[currentTickled]?.querySelector(`.caret ixfx-menu-trigger`);
+		if (trigger) {
+			this.#menuOpenedByKeyboard = true;
+			this.#currentOpenTrigger = trigger;
+			document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+			trigger.openMenu();
+			this.#propagateInputModeToMenu();
 		}
 	}
 	#propagateInputModeToMenu() {
@@ -7340,40 +7346,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	#onMenuTriggerClose;
 	#onMenuKeyNav;
 	#onKeyDown;
-	#handleEnter() {
+	/** Activates the currently tickled item, as if it had been clicked. */
+	#activateTickled() {
+		const currentTickled = this.tickled.tickledId;
+		if (currentTickled === void 0) return;
 		const r = this.root;
 		const sel = this.selectedNode;
 		if (!r || !sel) return;
 		const pathNodes = this.#findPath(r, sel) ?? [r];
-		const hasChildOptions = this.#hasChildOptions();
-		const currentTickled = this.tickled.tickledId ?? -1;
-		if (currentTickled < pathNodes.length) {
-			const node = pathNodes[currentTickled];
-			this.#setSelected(node);
-			this._menuOpen = false;
-			this.dispatchEvent(new CustomEvent(`item-click`, {
-				detail: {
-					node,
-					depth: currentTickled
-				},
-				bubbles: true,
-				composed: true
-			}));
-		} else if (hasChildOptions && currentTickled === pathNodes.length) {
-			this._menuOpen = true;
-			this.#menuOpenedByKeyboard = true;
-			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
-			if (trigger) {
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-			}
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
 		}
+		(this.shadowRoot?.querySelector(`.crumb-segment[data-segment-id="${currentTickled}"]`))?.click();
 	}
 	#shiftFocusToNarrowedText() {
 		const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
 		if (narrowedText) {
+			this._menuOpen = false;
 			this._focusOnNarrowedText = true;
 			narrowedText.focus();
 		}
@@ -7501,6 +7491,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			inline: `start`
 		});
 	}
+	#updateTrailingWidth() {
+		if (!this.padEnding || !this.shadowRoot) return;
+		const hostContainer = this.shadowRoot.querySelector(`.host-container`);
+		const trailing = this.shadowRoot.querySelector(`.trailing`);
+		if (!hostContainer || !trailing) return;
+		const segments = this.shadowRoot.querySelectorAll(`.crumb-segment`);
+		const lastSegment = segments[segments.length - 1];
+		if (!lastSegment) return;
+		const containerWidth = hostContainer.getBoundingClientRect().width;
+		const itemWidth = lastSegment.getBoundingClientRect().width;
+		if (itemWidth < containerWidth) {
+			trailing.style.width = `${containerWidth - itemWidth - 5}px`;
+			requestAnimationFrame(() => {
+				if (hostContainer.scrollWidth <= hostContainer.clientWidth) hostContainer.style.setProperty(`--scroll-fade-x-start`, `0px`, `important`);
+				else hostContainer.style.removeProperty(`--scroll-fade-x-start`);
+			});
+		} else trailing.style.width = ``;
+	}
 	#setSelected(node) {
 		const previous = this.selectedNode;
 		if (previous) this.#previousSelectionKey = previous.item?.key ?? ``;
@@ -7508,11 +7516,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const previousSet = previous ? /* @__PURE__ */ new Set([previous]) : /* @__PURE__ */ new Set();
 		this.selectedNode = node;
 		this._selectedNodes = /* @__PURE__ */ new Set([node]);
-		if (this.leadingCaret && this.root) {
+		if (this.root) {
 			const path = this.#findPath(this.root, node);
 			if (path) {
 				const depth = this.hideRoot && path.length > 1 ? path.length - 2 : path.length - 1;
 				requestAnimationFrame(() => {
+					this.#updateTrailingWidth();
+					const hostContainer = this.#getHostContainer();
+					if (hostContainer) hostContainer.scrollLeft = 0;
 					this.#scrollSegmentIntoView(depth);
 				});
 			}
@@ -7529,7 +7540,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	#onLabelClick(node, depth) {
 		this._openIdx = -1;
 		this.#setSelected(node);
-		if (this.leadingCaret) this.#scrollSegmentIntoView(depth);
+		this.#scrollSegmentIntoView(depth);
 		this.dispatchEvent(new CustomEvent(`item-click`, {
 			detail: {
 				node,
@@ -7643,6 +7654,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			composed: true
 		}));
 	}
+	#onUpClick() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const path = this.#findPath(r, sel);
+		if (!path || path.length <= 1) return;
+		const parent = path[path.length - 2];
+		this.#setSelected(parent);
+	}
 	/** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */
 	navigateTo(keys) {
 		if (!this.root?.children) return false;
@@ -7690,6 +7710,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		let pathNodes = this.#findPath(r, sel) ?? [r];
 		if (this.hideRoot && pathNodes.length > 1) pathNodes = pathNodes.slice(1);
 		this.#hasChildOptions();
+		const isAtRoot = (() => {
+			return (this.#findPath(r, sel) ?? [r]).length <= 1;
+		})();
 		const parts = [];
 		let segmentId = 0;
 		pathNodes.forEach((node, i) => {
@@ -7720,7 +7743,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             ${showLeadingCaret ? b`
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? b`<span class="loading-spinner"></span>` : b`
-                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                  <ixfx-menu-trigger mode="trigger" label="›" .tabStop=${false} @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${siblingMenuItems}
                     </ixfx-menu-container>
@@ -7732,7 +7755,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             ${showTrailingCaret ? b`
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? b`<span class="loading-spinner"></span>` : b`
-                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                  <ixfx-menu-trigger mode="trigger" label="›" .tabStop=${false} placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${childMenuItems}
                     </ixfx-menu-container>
@@ -7754,7 +7777,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             >
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? b`<span class="loading-spinner"></span>` : b`
-                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                  <ixfx-menu-trigger mode="trigger" label="›" .tabStop=${false} placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${siblingMenuItems}
                     </ixfx-menu-container>
@@ -7789,7 +7812,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             >
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? b`<span class="loading-spinner"></span>` : b`
-                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                  <ixfx-menu-trigger mode="trigger" label="›" .tabStop=${false} @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${childMenuItems}
                     </ixfx-menu-container>
@@ -7803,18 +7826,29 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			}
 		});
 		return b`
-      <div
-        class="host-container scroll-fade-x"
-        tabindex="0"
-        @focus=${this.#onFocus}
-        @blur=${this.#onBlur}
-        @keydown=${this.#onKeyDown}
-        @click=${this.#onHostClick}
-        @menu-trigger-close=${this.#onMenuTriggerClose}
-        @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
-      >
-        <div class="parts"
-          @mouseover=${(e) => {
+      <div class="crumb-wrapper">
+        ${this.withUp ? b`
+            <button
+              class="up-button"
+              ?disabled=${isAtRoot}
+              aria-label="Go up one level"
+              @click=${this.#onUpClick}
+            >
+              <ixfx-icon name="folder-up"></ixfx-icon>
+            </button>
+          ` : A}
+        <div
+          class="host-container scroll-fade-x"
+          tabindex="0"
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+          @keydown=${this.#onKeyDown}
+          @click=${this.#onHostClick}
+          @menu-trigger-close=${this.#onMenuTriggerClose}
+          @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
+        >
+          <div class="parts"
+            @mouseover=${(e) => {
 			if (this.#isWheelScrolling) return;
 			const target = e.target;
 			if (!(target instanceof HTMLElement)) return;
@@ -7835,8 +7869,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				composed: true
 			}));
 		}}
-        >${parts}<div class="trailing"></div></div>
-        ${this.showSuggestions ? this.#renderChildOptions() : A}
+          >${parts}${this.padEnding ? b`<div class="trailing"></div>` : A}</div>
+          ${this.showSuggestions ? this.#renderChildOptions() : A}
+        </div>
       </div>
     `;
 	}
@@ -7897,7 +7932,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       --crumb-item-text-tickled: var(--item-text-tickled);
       --crumb-item-border: var(--item-border);
       --crumb-item-border-tickled: var(--item-border-tickled);
-      --crumb-item-padding: var(--item-padding, var(--space-xs));
+      --crumb-item-padding: var(--space-s, 2px);
       --crumb-item-border-radius: var(--item-border-radius);
       --crumb-item-gap: var(--item-gap, var(--space-xs));
       --crumb-separator: var(--surface-muted-text);
@@ -7906,24 +7941,65 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       width: 100%;
     }
 
-    :host(.focused) {
-      outline: none;
-    }
-
-    :host(:focus-within) .host-container {
+    /* Outline goes on :host, not .host-container: .host-container carries the
+     * scroll-fade mask-image, and CSS masks clip everything painted outside
+     * the masked box - including an outline, which paints outside the border edge. */
+    :host(:focus-within) {
       outline: 2px solid var(--accent);
       outline-offset: 2px;
     }
 
+    .crumb-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--crumb-item-gap);
+      width: 100%;
+    }
+
+    .up-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      background: var(--crumb-item-bg);
+      border: var(--crumb-item-border);
+      border-radius: var(--crumb-item-border-radius);
+      padding: var(--crumb-item-padding);
+      cursor: pointer;
+      color: inherit;
+    }
+
+    .up-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .up-button:hover:not(:disabled) {
+      background: var(--crumb-item-bg-tickled);
+      border-color: var(--crumb-item-border-tickled);
+    }
+
+    .up-button ixfx-icon {
+      width: 1em;
+      height: 1em;
+      pointer-events: none;
+    }
+
     /* Edge fade (shows/hides based on scroll position) comes from the
      * shared .scroll-fade-x class - see ../styles/scroll-fade.ts */
     .host-container {
       display: flex;
-      width: 100%;
+      flex: 1;
+      min-width: 0;
       outline: none;
       overflow: scroll;
       scroll-snap-type: x mandatory;
       scrollbar-width: none;
+      overscroll-behavior: none;
+    }
+
+    .host-container::-webkit-scrollbar {
+      display: none;
     }
 
     .parts {
@@ -7932,9 +8008,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .trailing {
-      flex: 1;
-      min-width: 1em;
-      cursor: pointer;
+      flex-shrink: 0;
     }
 
     .crumb-segment {
@@ -7944,6 +8018,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       background: var(--crumb-item-bg);
       border: var(--crumb-item-border);
       border-radius: var(--crumb-item-border-radius);
+      padding:0;
     }
 
     .crumb-segment.leading-caret {
@@ -7972,6 +8047,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .label {
+      padding: var(--crumb-item-padding);
       cursor: pointer;
       white-space: nowrap;
       color: inherit;
@@ -7992,15 +8068,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .crumb-segment ixfx-menu-trigger {
-      --ixfx-button-padding: var(--space-xs) 8px;
+      --ixfx-button-padding: var(--space-s, 2px);
     }
 
     .caret {
       position: relative;
       cursor: pointer;
-      padding: var(--crumb-item-padding);
-      margin-left: var(--crumb-item-gap);
-      margin-right: var(--crumb-item-gap);
       color: var(--crumb-separator);
       display: inline-flex;
       align-items: center;
@@ -8027,7 +8100,6 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       background: none;
       border: none;
       color: inherit;
-      padding: 0;
       cursor: pointer;
       font-size: inherit;
       line-height: 1;
@@ -8152,6 +8224,16 @@ __decorate([property({
 	reflect: true,
 	attribute: `hide-root`
 })], CrumbNavigationElement.prototype, "hideRoot", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `pad-ending`
+})], CrumbNavigationElement.prototype, "padEnding", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `with-up`
+})], CrumbNavigationElement.prototype, "withUp", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
@@ -21661,6 +21743,258 @@ __decorate([property({ type: Number })], RangeElement.prototype, "value", null);
 __decorate([property({ type: Number })], RangeElement.prototype, "step", void 0);
 RangeElement = __decorate([safeCustomElement(`ixfx-range`)], RangeElement);
 //#endregion
+//#region src/select-horiz/select-horiz.ts
+let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(i) {
+	constructor(..._args) {
+		super(..._args);
+		this._selectedIndex = -1;
+		this._slottedItems = [];
+		this.tickled = new TickledController(this, {
+			getItems: () => this._slottedItems.map((_, i) => ({
+				id: i,
+				enabled: true
+			})),
+			onStateChange: () => this._syncTickled()
+		});
+		this._onSlotChange = () => {
+			this._slottedItems = Array.from(this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? []);
+			const declaredIndex = this._slottedItems.findIndex((item) => item.hasAttribute(`selected`));
+			let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;
+			if (resolvedIndex >= this._slottedItems.length) resolvedIndex = this._slottedItems.length - 1;
+			if (resolvedIndex < 0 && this._slottedItems.length > 0) resolvedIndex = 0;
+			this.selectedIndex = resolvedIndex;
+		};
+		this._syncTickled = () => {
+			this._slottedItems.forEach((item, i) => {
+				const isTickled = this.tickled.isTickled(i);
+				item.classList.toggle(`tickled`, isTickled);
+				item.tabIndex = isTickled && this.tickled.inputMode === `keyboard` ? 0 : -1;
+			});
+		};
+		this._findSlottedItem = (target) => {
+			let el = target instanceof Element ? target : null;
+			while (el) {
+				if (this._slottedItems.includes(el)) return el;
+				el = el.parentElement;
+			}
+		};
+		this._handlePointerOver = (e) => {
+			const item = this._findSlottedItem(e.target);
+			if (item) this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));
+		};
+		this._handleKeyDown = (e) => {
+			if (e.key === `ArrowLeft`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+				this._applyTickledSelection();
+			} else if (e.key === `ArrowRight`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+				this._applyTickledSelection();
+			} else if (e.key === `Home`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`first`);
+				this._applyTickledSelection();
+			} else if (e.key === `End`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`last`);
+				this._applyTickledSelection();
+			}
+		};
+		this._applyTickledSelection = () => {
+			const id = this.tickled.tickledId;
+			if (id !== void 0 && id !== this._selectedIndex) this.selectedIndex = id;
+		};
+		this._wheelCooldown = false;
+		this._handleClick = (e) => {
+			e.currentTarget.focus();
+			const item = this._findSlottedItem(e.target);
+			const index = item ? this._slottedItems.indexOf(item) : -1;
+			if (index >= 0 && index !== this._selectedIndex) this.selectedIndex = index;
+		};
+		this._updateSelectedAttribute = () => {
+			this._slottedItems.forEach((item, i) => {
+				if (i === this._selectedIndex) item.setAttribute(`selected`, ``);
+				else item.removeAttribute(`selected`);
+			});
+		};
+		this._scrollSelectedIntoView = () => {
+			const item = this._slottedItems[this._selectedIndex];
+			if (item) item.scrollIntoView({
+				inline: `center`,
+				behavior: `smooth`
+			});
+		};
+		this._emitChange = () => {
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					selectedIndex: this._selectedIndex,
+					selectedItem: this.selectedItem,
+					selectedValue: this.selectedValue
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			i$3`
+      :host {
+        --select-horiz-item-width: 80%;
+        --select-horiz-gap: var(--space-s);
+        --select-horiz-bg: var(--surface-3);
+        --select-horiz-border: var(--border);
+        --select-horiz-radius: var(--radius-l);
+        display: flex;
+        width: 100%;
+              background: var(--select-horiz-bg);
+        border: var(--select-horiz-border);
+        border-radius: var(--select-horiz-radius);
+      }
+
+      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on
+       * the element that actually scrolls - its mask is sized to this element's own
+       * box, and content overflowing a *different*, non-scrolling ancestor gets the
+       * mask tiled across it instead of fading correctly. */
+      .items {
+        display: flex;
+        align-items: center;
+        gap: var(--select-horiz-gap);
+        padding: var(--space-xs) var(--scroll-fade-width, 30px);
+        width: 100%;
+        min-height: 48px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        cursor: grab;
+  
+        box-sizing: border-box;
+      }
+
+      .items:focus-within {
+        cursor: default;
+      }
+
+      .spacer {
+        flex: 0 0 var(--select-horiz-spacer-width, 10%);
+        pointer-events: none;
+        user-select: none;
+      }
+
+      ::slotted(*) {
+        flex: 0 0 var(--select-horiz-item-width);
+        scroll-snap-align: center;
+        user-select: none;
+        min-height: 100%;
+        box-sizing: border-box;
+        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
+        background: var(--item-bg);
+        border: var(--item-border);
+        border-radius: var(--item-border-radius);
+        padding: var(--item-padding);
+        display: grid;
+        align-content: center;
+        justify-content: center;
+      }
+
+      ::slotted(.tickled) {
+        background: var(--item-bg-tickled);
+        border-color: var(--item-border-tickled);
+        color: var(--item-text-tickled);
+      }
+
+      ::slotted([selected]) {
+        background: var(--item-bg-selected);
+        border-color: var(--item-border-selected);
+        color: var(--item-text-selected);
+      }
+
+      ::slotted([selected].tickled) {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    `
+		];
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		const oldValue = this._selectedIndex;
+		if (value < -1 || this._slottedItems.length > 0 && value >= this._slottedItems.length) return;
+		this._selectedIndex = value;
+		this._updateSelectedAttribute();
+		this._scrollSelectedIntoView();
+		this.tickled.setTickled(value === -1 ? void 0 : value);
+		if (oldValue !== value) this._emitChange();
+	}
+	get selectedValue() {
+		return this._slottedItems[this._selectedIndex]?.getAttribute(`value`) ?? null;
+	}
+	set selectedValue(value) {
+		if (value === null) return;
+		const index = this._slottedItems.findIndex((item) => item.getAttribute(`value`) === value);
+		if (index >= 0) this.selectedIndex = index;
+	}
+	get selectedItem() {
+		return this._slottedItems[this._selectedIndex] ?? null;
+	}
+	get items() {
+		return this._slottedItems;
+	}
+	render() {
+		return b`
+      <div
+        class="items scroll-fade-x"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @pointerover=${this._handlePointerOver}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        @keydown=${this._handleKeyDown}
+        @click=${this._handleClick}
+      >
+        <div class="spacer"></div>
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="spacer"></div>
+      </div>
+    `;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_applyWheelDelta(direction, _event) {
+		if (this._wheelCooldown) return;
+		this._wheelCooldown = true;
+		this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);
+		this._applyTickledSelection();
+		setTimeout(() => {
+			this._wheelCooldown = false;
+		}, 250);
+	}
+};
+__decorate([state()], SelectHorizElement.prototype, "_selectedIndex", void 0);
+__decorate([state()], SelectHorizElement.prototype, "_slottedItems", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: `selected-index`
+})], SelectHorizElement.prototype, "selectedIndex", null);
+__decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
+SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
+//#endregion
 //#region src/selecthorizontal.ts
 let SelectHorizontalElement = class SelectHorizontalElement extends i {
 	constructor(..._args) {
@@ -23967,7 +24301,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			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();
@@ -24036,6 +24370,11 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			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;
@@ -24256,17 +24595,30 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
     <div id="zone">
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? b`<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 ? b`
+          <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, i$3`
   :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;
@@ -24284,29 +24636,80 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
     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 {
@@ -24325,17 +24728,18 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
       #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;
       }
     }
 
@@ -24591,11 +24995,16 @@ let TabListItemElement = class TabListItemElement extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.closeable = false;
+		this.hideLabels = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
+		this._hasToolbarContent = false;
+		this._onToolbarSlotChange = () => {
+			this._updateToolbarContent();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -24603,6 +25012,7 @@ let TabListItemElement = class TabListItemElement extends i {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -24610,6 +25020,7 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._resizeObserver = void 0;
 		this._commandCleanup?.();
 		this._commandCleanup = void 0;
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -24632,12 +25043,21 @@ let TabListItemElement = class TabListItemElement extends i {
 			if (id === this.commandActive) this.click();
 		});
 	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+	}
 	render() {
-		const showLabel = !this._compact || !this.iconName;
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
 		return b`
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${hasActions ? b`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
           ${this.closeable ? b`
@@ -24651,6 +25071,7 @@ let TabListItemElement = class TabListItemElement extends i {
             </button>
           ` : A}
         </div>
+        ` : A}
       </div>
     `;
 	}
@@ -24677,17 +25098,19 @@ let TabListItemElement = class TabListItemElement extends i {
         min-width: 0;
         user-select: none;
         box-sizing: border-box;
+        height:fit-content;
       }
 
       :host > div {
         display: flex;
         align-items: center;
-        gap: var(--space-s, 4px);
-        padding: var(--tab-padding) calc(2 * var(--tab-padding));
+        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
         min-width: 0;
         width: 100%;
         font-weight: 500;
         border: var(--selected-tab-border-width) solid transparent;
+        gap: var(--space-s);
+
       }
 
       :host([selected]) > div {
@@ -24698,6 +25121,7 @@ let TabListItemElement = class TabListItemElement extends i {
         border-right-color: var(--indicator-color-right, transparent);
         background: var(--selected-background);
         font-weight: var(--selected-tab-weight);
+        border-radius:var(--radius-m);
       }
 
       .label {
@@ -24772,6 +25196,10 @@ let TabListItemElement = class TabListItemElement extends i {
 	}
 };
 __decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListItemElement.prototype, "hideLabels", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -24783,6 +25211,7 @@ __decorate([property({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
@@ -25201,6 +25630,7 @@ let TabListElement = class TabListElement extends i {
 		this.orientation = `horizontal`;
 		this.flip = false;
 		this.scrollable = false;
+		this.hideLabels = false;
 		this.dragMode = `off`;
 		this.#items = [];
 		this.#dragState = null;
@@ -25209,6 +25639,7 @@ let TabListElement = class TabListElement extends i {
 			this.updateComplete.then(() => {
 				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
 				this.#syncIndicatorColors();
+				this.#syncHideLabels();
 			});
 		};
 		this.#onKeyUp = (event) => {
@@ -25350,13 +25781,21 @@ let TabListElement = class TabListElement extends i {
 	#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) {
@@ -25611,6 +26050,10 @@ let TabListElement = class TabListElement extends i {
     :host(.scrollable) {
       max-height: var(--scroll-max-height);
     }
+    :host([hide-labels]) {
+      display: inline-flex;
+      width: auto;
+    }
     text {
       user-select:none;
     }
@@ -25694,6 +26137,10 @@ let TabListElement = class TabListElement extends i {
 __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`
@@ -28401,6 +28848,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map