@ixfx/components 0.5.18 → 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);
 }
@@ -7105,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;
@@ -7483,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 ?? ``;
@@ -7495,6 +7521,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			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);
 				});
 			}
@@ -7625,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;
@@ -7672,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) => {
@@ -7785,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;
@@ -7817,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>
     `;
 	}
@@ -7896,15 +7949,57 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       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 {
@@ -7913,9 +8008,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .trailing {
-      flex: 1;
-      min-width: 1em;
-      cursor: pointer;
+      flex-shrink: 0;
     }
 
     .crumb-segment {
@@ -8131,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
@@ -24198,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();
@@ -24267,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;
@@ -24487,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;
@@ -24515,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 {
@@ -24556,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;
       }
     }
 
@@ -24822,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();
@@ -24834,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();
@@ -24841,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);
@@ -24863,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`
@@ -24882,6 +25071,7 @@ let TabListItemElement = class TabListItemElement extends i {
             </button>
           ` : A}
         </div>
+        ` : A}
       </div>
     `;
 	}
@@ -24908,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 {
@@ -24929,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 {
@@ -25003,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`
@@ -25014,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
@@ -25432,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;
@@ -25440,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) => {
@@ -25581,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) {
@@ -25842,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;
     }
@@ -25925,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`