@ixfx/components 0.5.17 → 0.5.19

package/dist/{crumb-navigation-DFqTzElw.js → crumb-navigation-BrB0r14u.js}

@@ -2,7 +2,7 @@ import { n as tickledStyles, r as TickledController, t as tickledItemStyles } fr
 import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./interaction-D6efrBLo.js";
-import "./menu-item-BYRvfyXK.js";
+import "./menu-item-CrmUwIoJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import "./narrowed-text.js";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
@@ -90,6 +90,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		this.leadingCaret = false;
 		this.caretEmbedded = true;
 		this.hideRoot = false;
+		this.padEnding = false;
+		this.withUp = false;
 		this.#previousSelectionKey = ``;
 		this.#menuOpenedByKeyboard = false;
 		this.#currentOpenTrigger = null;
@@ -127,7 +129,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 					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`);
@@ -140,13 +142,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 			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();
@@ -166,8 +168,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 					}
 					break;
 				case `Enter`:
+				case ` `:
 					e.preventDefault();
-					this.#handleEnter();
+					this.#activateTickled();
 					break;
 				case `Escape`:
 					e.preventDefault();
@@ -175,16 +178,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 					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 = () => {
@@ -236,7 +235,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 					enabled: true
 				});
 			});
-			if (this.#hasChildOptions()) items.push({
+			if (this.#canFocusSuggestions()) items.push({
 				id: pathNodes.length,
 				enabled: true
 			});
@@ -272,8 +271,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		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`,
@@ -286,6 +285,10 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		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() {
@@ -298,26 +301,18 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		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() {
@@ -330,40 +325,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 	#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();
 		}
@@ -491,6 +470,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 			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 ?? ``;
@@ -498,11 +495,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		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);
 				});
 			}
@@ -519,7 +519,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 	#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,
@@ -633,6 +633,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 			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;
@@ -680,6 +689,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 		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) => {
@@ -710,7 +722,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
             ${showLeadingCaret ? html`
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? html`<span class="loading-spinner"></span>` : html`
-                  <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>
@@ -722,7 +734,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
             ${showTrailingCaret ? html`
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? html`<span class="loading-spinner"></span>` : html`
-                  <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>
@@ -744,7 +756,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
             >
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? html`<span class="loading-spinner"></span>` : html`
-                  <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>
@@ -779,7 +791,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
             >
               <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
                 ${isPending ? html`<span class="loading-spinner"></span>` : html`
-                  <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>
@@ -793,18 +805,29 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 			}
 		});
 		return html`
-      <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 ? html`
+            <button
+              class="up-button"
+              ?disabled=${isAtRoot}
+              aria-label="Go up one level"
+              @click=${this.#onUpClick}
+            >
+              <ixfx-icon name="folder-up"></ixfx-icon>
+            </button>
+          ` : nothing}
+        <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;
@@ -825,8 +848,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 				composed: true
 			}));
 		}}
-        >${parts}<div class="trailing"></div></div>
-        ${this.showSuggestions ? this.#renderChildOptions() : nothing}
+          >${parts}${this.padEnding ? html`<div class="trailing"></div>` : nothing}</div>
+          ${this.showSuggestions ? this.#renderChildOptions() : nothing}
+        </div>
       </div>
     `;
 	}
@@ -887,7 +911,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       --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);
@@ -896,24 +920,65 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       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 {
@@ -922,9 +987,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
     }
 
     .trailing {
-      flex: 1;
-      min-width: 1em;
-      cursor: pointer;
+      flex-shrink: 0;
     }
 
     .crumb-segment {
@@ -934,6 +997,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       background: var(--crumb-item-bg);
       border: var(--crumb-item-border);
       border-radius: var(--crumb-item-border-radius);
+      padding:0;
     }
 
     .crumb-segment.leading-caret {
@@ -962,6 +1026,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
     }
 
     .label {
+      padding: var(--crumb-item-padding);
       cursor: pointer;
       white-space: nowrap;
       color: inherit;
@@ -982,15 +1047,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
     }
 
     .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;
@@ -1017,7 +1079,6 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       background: none;
       border: none;
       color: inherit;
-      padding: 0;
       cursor: pointer;
       font-size: inherit;
       line-height: 1;
@@ -1142,8 +1203,18 @@ __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
 export { scrollFadeStyles as n, CrumbNavigationElement as t };
 
-//# sourceMappingURL=crumb-navigation-DFqTzElw.js.map
+//# sourceMappingURL=crumb-navigation-BrB0r14u.js.map