@ixfx/components 0.5.5 → 0.5.7

package/bundle/index.js

@@ -1257,6 +1257,7 @@ __decorate([property({
 IxfxIconElement = __decorate([safeCustomElement(`ixfx-icon`)], IxfxIconElement);
 //#endregion
 //#region src/ac-text/ac-text.ts
+var _AcTextElement;
 const HIGHLIGHT_KEY$1 = `ac-text-highlight`;
 function makeLruCache$1(maxSize) {
 	const map = /* @__PURE__ */ new Map();
@@ -1272,11 +1273,18 @@ function makeLruCache$1(maxSize) {
 	};
 }
 let AcTextElement = class AcTextElement extends i {
+	static {
+		_AcTextElement = this;
+	}
+	static {
+		this._count = 0;
+	}
 	#cache;
 	#debounceTimer;
 	#abortController;
 	constructor() {
 		super();
+		this._anchorName = `--ac-text-anchor-${_AcTextElement._count++}`;
 		this.placeholder = ``;
 		this.cacheSize = 20;
 		this.debounceMs = 150;
@@ -1371,6 +1379,9 @@ let AcTextElement = class AcTextElement extends i {
 		this.#cancelPending();
 		clearHighlights({ key: HIGHLIGHT_KEY$1 });
 	}
+	firstUpdated() {
+		this.style.setProperty(`--anchor-name`, this._anchorName);
+	}
 	updated(changedProps) {
 		if (changedProps.has(`completionProvider`)) this.#cache.clear();
 		if (changedProps.has(`cacheSize`)) this.#cache = makeLruCache$1(this.cacheSize);
@@ -1379,6 +1390,18 @@ let AcTextElement = class AcTextElement extends i {
 			if (!input || document.activeElement !== input) this._query = this.value;
 		}
 		this.#applyHighlights();
+		this.#syncPopover();
+	}
+	/** Keep the native popover in sync with `_isOpen` (popup is lazily rendered). */
+	#syncPopover() {
+		if (!this.shadowRoot) return;
+		const popup = this.shadowRoot.querySelector(`.popup`);
+		if (!popup) return;
+		try {
+			if (this._isOpen) {
+				if (!popup.matches(`:popover-open`)) popup.showPopover();
+			} else if (popup.matches(`:popover-open`)) popup.hidePopover();
+		} catch {}
 	}
 	#applyHighlights() {
 		if (!this._isOpen || !this.shadowRoot) {
@@ -1533,6 +1556,7 @@ let AcTextElement = class AcTextElement extends i {
 		return b`
       <div
         class="popup"
+        popover="manual"
         role="listbox"
         aria-label="Suggestions"
         data-input-mode=${this.tickled.inputMode}
@@ -1586,6 +1610,7 @@ let AcTextElement = class AcTextElement extends i {
       display: flex;
       align-items: center;
       position: relative;
+      anchor-name: var(--anchor-name);
     }
 
     input {
@@ -1633,10 +1658,14 @@ let AcTextElement = class AcTextElement extends i {
     /* ---- Popup ---- */
 
     .popup {
-      position: absolute;
-      top: calc(100% + 2px);
-      left: 0;
-      right: 0;
+      position: fixed;
+      inset: unset;
+      margin: 0;
+      width: anchor-size(width);
+      position-anchor: var(--anchor-name);
+      position-area: block-end span-inline-start;
+      margin-block-start: 2px;
+      position-try-fallbacks: flip-block;
       z-index: 100;
       background: var(--surface-3, var(--surface-2));
       border: var(--border);
@@ -1732,7 +1761,7 @@ __decorate([state()], AcTextElement.prototype, "_query", void 0);
 __decorate([state()], AcTextElement.prototype, "_results", void 0);
 __decorate([state()], AcTextElement.prototype, "_isOpen", void 0);
 __decorate([state()], AcTextElement.prototype, "_isLoading", void 0);
-AcTextElement = __decorate([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
+AcTextElement = _AcTextElement = __decorate([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
 //#endregion
 //#region src/common/data-controller.ts
 function isAsyncIterable(v) {
@@ -3066,6 +3095,15 @@ const buttonStyles = i$3`
   :host([hide-icon]) .button-icon {
     display: none;
   }
+
+  :host([subtle]) button {
+    background: color-mix(in oklch, var(--surface-4, #ccc) 40%, transparent);
+  }
+
+  :host([subtle]) button:hover:not(:disabled),
+  :host([subtle]) button:focus-visible:not(:disabled) {
+    background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);
+  }
 `;
 //#endregion
 //#region src/button/button.ts
@@ -3075,6 +3113,7 @@ let ButtonElement = class ButtonElement extends i {
 		this.disabled = false;
 		this.hideIcon = false;
 		this.hideLabel = false;
+		this.subtle = false;
 	}
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return A;
@@ -3102,6 +3141,10 @@ __decorate([property({
 	attribute: `hide-label`,
 	reflect: true
 })], ButtonElement.prototype, "hideLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "subtle", void 0);
 ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 //#region src/button/radio-group.ts
@@ -3444,13 +3487,15 @@ RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 * Canonical surface styles for floating popup elements (menus, dropdowns,
 * colour picker, tooltips). Apply by adding `popupSurfaceStyles` to a
 * component's `static styles` array and the class `popup-surface` to the
-* popup container element.
+* popup container element - or to the host itself (via `this.classList.add`)
+* when the component's host element is the popup container.
 *
 * Intentionally omitted (remain per-component): positioning, padding,
 * dimensions, z-index, and open/close animations.
 */
 const popupSurfaceStyles = i$3`
-  .popup-surface {
+  .popup-surface,
+  :host(.popup-surface) {
     background: var(--surface-5);
     border: 1px solid var(--surface-6);
     border-radius: var(--radius-l);
@@ -4570,6 +4615,22 @@ let SplitButton = class SplitButton extends ButtonElement {
         outline-offset: -2px;
       }
 
+      :host([subtle]) button.primary,
+      :host([subtle]) button.caret,
+      :host([subtle]) button.primary:hover:not(:disabled),
+      :host([subtle]) button.caret:hover:not(:disabled) {
+        background: none;
+      }
+
+      :host([subtle]) .split {
+        background: color-mix(in oklch, var(--surface-3, #ccc) 40%, transparent);
+      }
+
+      :host([subtle]) .split:has(button:hover:not(:disabled)),
+      :host([subtle]) .split:has(button:focus-visible:not(:disabled)) {
+        background: color-mix(in oklch, var(--surface-3, #ccc) 70%, transparent);
+      }
+
       ixfx-menu-trigger {
         display: inline-flex;
         align-items: stretch;
@@ -5681,7 +5742,7 @@ __decorate([query(`.preview`)], ColourPicker.prototype, "_previewEl", void 0);
 ColourPicker = __decorate([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
 //#endregion
 //#region src/colour-picker/colour-picker-popup.ts
-let _instanceCounter = 0;
+let _instanceCounter$1 = 0;
 const PICKER_SIZES = {
 	small: {
 		width: 130,
@@ -5803,7 +5864,7 @@ let ColourPickerPopup = class ColourPickerPopup extends i {
 				this._popupEl.showPopover();
 			} catch {}
 		};
-		const id = ++_instanceCounter;
+		const id = ++_instanceCounter$1;
 		this._uid = `cp-popup-${id}`;
 		this._anchorName = `--cp-popup-anchor-${id}`;
 		this._popupId = `cp-popup-panel-${id}`;
@@ -22677,6 +22738,263 @@ __decorate([property({
 })], SliderInputElement.prototype, "disabled", void 0);
 SliderInputElement = __decorate([safeCustomElement(`ixfx-slider-input`)], SliderInputElement);
 //#endregion
+//#region src/snackbar/snackbar.ts
+let _instanceCounter = 0;
+let SnackbarElement = class SnackbarElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.for = ``;
+		this.mode = `explicit`;
+		this.placement = `top`;
+		this.dismiss = `auto`;
+		this.showDelay = 150;
+		this.hideDelay = 500;
+		this._isOpen = false;
+		this._anchorName = `--ixfx-snackbar-anchor-${++_instanceCounter}`;
+		this._addedTabindex = false;
+		this._addedRole = false;
+		this._onTargetClick = () => this.toggle();
+		this._onTargetKeydown = (e) => {
+			if (e.key !== `Enter` && e.key !== ` `) return;
+			e.preventDefault();
+			this.toggle();
+		};
+		this._onTickleIn = () => this._scheduleShow();
+		this._onTickleOut = () => this._scheduleHide();
+		this._onPanelClick = () => {
+			if (this.dismiss === `auto`) this.hide();
+		};
+		this._onToggle = (e) => {
+			const { newState } = e;
+			this._isOpen = newState === `open`;
+			if (newState === `closed` && this.contains(document.activeElement)) this._target?.focus();
+		};
+		this._onBeforeToggle = (e) => {
+			const { newState } = e;
+			this._recentCloseAt = newState === `closed` ? performance.now() : void 0;
+		};
+	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	show() {
+		if (!this.popover) return;
+		try {
+			this.showPopover();
+		} catch {}
+	}
+	hide() {
+		if (!this.popover) return;
+		try {
+			this.hidePopover();
+		} catch {}
+	}
+	toggle() {
+		if (!this.popover) return;
+		if (this._recentCloseAt !== void 0 && performance.now() - this._recentCloseAt < 50) {
+			this._recentCloseAt = void 0;
+			return;
+		}
+		try {
+			this.togglePopover();
+		} catch {}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`popover`)) this.popover = `auto`;
+		this.classList.add(`popup-surface`);
+		this.addEventListener(`toggle`, this._onToggle);
+		this.addEventListener(`beforetoggle`, this._onBeforeToggle);
+		this.addEventListener(`click`, this._onPanelClick);
+		this.style.setProperty(`position-anchor`, this._anchorName);
+		this._attachToTarget();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`toggle`, this._onToggle);
+		this.removeEventListener(`beforetoggle`, this._onBeforeToggle);
+		this.removeEventListener(`click`, this._onPanelClick);
+		this._detachFromTarget();
+		this._cancelShow();
+		this._cancelHide();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`for`) || changed.has(`mode`)) this._attachToTarget();
+	}
+	_resolveTarget() {
+		if (!this.for) return void 0;
+		return this.getRootNode().getElementById(this.for) ?? void 0;
+	}
+	_attachToTarget() {
+		this._detachFromTarget();
+		const target = this._resolveTarget();
+		if (!target) {
+			if (this.for) console.warn(`ixfx-snackbar: no element found with id "${this.for}"`);
+			return;
+		}
+		this._target = target;
+		target.style.setProperty(`anchor-name`, this._anchorName);
+		if (this.mode === `explicit`) {
+			const alreadyFocusable = target.tabIndex >= 0;
+			if (!alreadyFocusable) {
+				target.setAttribute(`tabindex`, `0`);
+				this._addedTabindex = true;
+			}
+			if (!target.hasAttribute(`role`) && !alreadyFocusable) {
+				target.setAttribute(`role`, `button`);
+				this._addedRole = true;
+			}
+			target.setAttribute(`aria-haspopup`, `true`);
+			target.addEventListener(`click`, this._onTargetClick);
+			if (!alreadyFocusable) target.addEventListener(`keydown`, this._onTargetKeydown);
+		} else if (this.mode === `implicit`) {
+			target.addEventListener(`pointerenter`, this._onTickleIn);
+			target.addEventListener(`focus`, this._onTickleIn);
+			target.addEventListener(`pointerleave`, this._onTickleOut);
+			target.addEventListener(`blur`, this._onTickleOut);
+			this.addEventListener(`pointerenter`, this._onTickleIn);
+			this.addEventListener(`focusin`, this._onTickleIn);
+			this.addEventListener(`pointerleave`, this._onTickleOut);
+			this.addEventListener(`focusout`, this._onTickleOut);
+		}
+	}
+	_detachFromTarget() {
+		const target = this._target;
+		if (!target) return;
+		target.style.removeProperty(`anchor-name`);
+		if (this._addedTabindex) {
+			target.removeAttribute(`tabindex`);
+			this._addedTabindex = false;
+		}
+		if (this._addedRole) {
+			target.removeAttribute(`role`);
+			this._addedRole = false;
+		}
+		target.removeAttribute(`aria-haspopup`);
+		target.removeEventListener(`click`, this._onTargetClick);
+		target.removeEventListener(`keydown`, this._onTargetKeydown);
+		target.removeEventListener(`pointerenter`, this._onTickleIn);
+		target.removeEventListener(`focus`, this._onTickleIn);
+		target.removeEventListener(`pointerleave`, this._onTickleOut);
+		target.removeEventListener(`blur`, this._onTickleOut);
+		this.removeEventListener(`pointerenter`, this._onTickleIn);
+		this.removeEventListener(`focusin`, this._onTickleIn);
+		this.removeEventListener(`pointerleave`, this._onTickleOut);
+		this.removeEventListener(`focusout`, this._onTickleOut);
+		this._target = void 0;
+	}
+	_scheduleShow() {
+		this._cancelHide();
+		this._cancelShow();
+		if (this.showDelay <= 0) {
+			this.show();
+			return;
+		}
+		this._showTimeout = window.setTimeout(() => this.show(), this.showDelay);
+	}
+	_scheduleHide() {
+		this._cancelShow();
+		this._cancelHide();
+		if (this.hideDelay <= 0) {
+			this.hide();
+			return;
+		}
+		this._hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
+	}
+	_cancelShow() {
+		if (this._showTimeout !== void 0) {
+			window.clearTimeout(this._showTimeout);
+			this._showTimeout = void 0;
+		}
+	}
+	_cancelHide() {
+		if (this._hideTimeout !== void 0) {
+			window.clearTimeout(this._hideTimeout);
+			this._hideTimeout = void 0;
+		}
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			i$3`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      padding: var(--space-s);
+
+      position: fixed;
+      inset: unset;
+      margin: 0;
+      z-index: 100;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+      opacity: 0;
+      scale: 0.97;
+      pointer-events: none;
+      transition: opacity 0.12s ease-out, scale 0.12s ease-out,
+                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
+    }
+
+    :host(:popover-open) {
+      opacity: 1;
+      scale: 1;
+      pointer-events: auto;
+    }
+
+    @starting-style {
+      :host(:popover-open) {
+        opacity: 0;
+        scale: 0.97;
+      }
+    }
+
+    :host([placement="top"]) {
+      position-area: block-start;
+      margin-block-end: var(--space-s);
+    }
+
+    :host([placement="bottom"]) {
+      position-area: block-end;
+      margin-block-start: var(--space-s);
+    }
+
+    :host([placement="left"]) {
+      position-area: inline-start;
+      margin-inline-end: var(--space-s);
+    }
+
+    :host([placement="right"]) {
+      position-area: inline-end;
+      margin-inline-start: var(--space-s);
+    }
+  `
+		];
+	}
+	render() {
+		return b`<slot></slot>`;
+	}
+};
+__decorate([property({ type: String })], SnackbarElement.prototype, "for", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "mode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SnackbarElement.prototype, "placement", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "dismiss", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `show-delay`
+})], SnackbarElement.prototype, "showDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `hide-delay`
+})], SnackbarElement.prototype, "hideDelay", void 0);
+__decorate([state()], SnackbarElement.prototype, "_isOpen", void 0);
+SnackbarElement = __decorate([safeCustomElement(`ixfx-snackbar`)], SnackbarElement);
+//#endregion
 //#region src/snap-container/snap-container.ts
 let SnapContainer = class SnapContainer extends i {
 	constructor(..._args) {
@@ -27541,6 +27859,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, 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, 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