@ixfx/components 0.5.4 → 0.5.6

package/bundle/index.js

@@ -3066,6 +3066,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 +3084,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 +3112,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 +3458,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);
@@ -3939,6 +3955,7 @@ let MenuTrigger = class MenuTrigger extends i {
       color: var(--surface-3-text);
       cursor: pointer;
       padding: var(--space-s) var(--space-m);
+      font-family: var(--font-family, inherit);
       font-size: var(--text-m);
       font-weight: 600;
       border-radius: var(--radius-s);
@@ -4229,7 +4246,6 @@ let SplitButton = class SplitButton extends ButtonElement {
 		super(..._args);
 		this.mode = `default`;
 		this.defaultValue = ``;
-		this._compact = false;
 		this._selectedCommand = ``;
 		this._selectedLabel = ``;
 		this._selectedIcon = ``;
@@ -4237,7 +4253,6 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._dynamicItems = [];
 		this._loadingItems = false;
 		this._menuHasItems = false;
-		this._widthNeeded = 0;
 		this._onDefaultMenuSlotChange = (e) => {
 			const slot = e.target;
 			this._menuHasItems = slot.assignedElements({ flatten: true }).length > 0;
@@ -4311,19 +4326,8 @@ let SplitButton = class SplitButton extends ButtonElement {
 			}
 		};
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			if (this._compact) {
-				if (this._widthNeeded > 0 && entry.contentRect.width >= this._widthNeeded) this._compact = false;
-			} else this._checkOverflow();
-		});
-		this._resizeObserver.observe(this);
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
 		this._menuTrigger?.removeEventListener(`menu-command`, this._handleSwitcherMenuCommand);
 	}
 	firstUpdated() {
@@ -4333,19 +4337,8 @@ let SplitButton = class SplitButton extends ButtonElement {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		this._checkOverflow();
 		if ((changedProperties.has(`items`) || changedProperties.has(`mode`)) && this.items && !this.itemsProvider) this._applyItems(this.items);
 	}
-	_checkOverflow() {
-		if (this._compact) return;
-		const primary = this.shadowRoot?.querySelector(`button.primary`);
-		if (!primary) return;
-		if (primary.scrollWidth > primary.offsetWidth + 1) {
-			const caret = this.shadowRoot?.querySelector(`button.caret`);
-			this._widthNeeded = primary.scrollWidth + (caret?.offsetWidth ?? 32) + 4;
-			this._compact = true;
-		}
-	}
 	_applyItems(items) {
 		if (this.mode === `switcher`) this._applySwitcherItems(items.map((i) => ({
 			command: i.command,
@@ -4415,7 +4408,7 @@ let SplitButton = class SplitButton extends ButtonElement {
     `);
 	}
 	_renderDefault() {
-		const label = !this.hideLabel && !this._compact ? b`<span class="button-label"><slot></slot></span>` : A;
+		const label = this.hideLabel ? A : b`<span class="button-label"><slot></slot></span>`;
 		const menuContent = this.itemsProvider ? b`
           <ixfx-menu-container slot="menu">
             ${this._renderLoadingOrItems(this._dynamicItems)}
@@ -4439,9 +4432,8 @@ let SplitButton = class SplitButton extends ButtonElement {
     `;
 	}
 	_renderSwitcher() {
-		const showLabel = !this.hideLabel && !this._compact;
 		const primaryIcon = this._selectedIcon ? b`<ixfx-icon class="button-icon" name="${this._selectedIcon}"></ixfx-icon>` : A;
-		const primaryLabel = showLabel ? b`<span class="button-label">${this._selectedLabel}</span>` : A;
+		const primaryLabel = this.hideLabel ? A : b`<span class="button-label">${this._selectedLabel}</span>`;
 		const popupItems = this.itemsProvider ? this._renderLoadingOrItems(this._dynamicItems) : this._switcherItems.filter((i) => i.command !== this._selectedCommand).map((i) => b`
             <ixfx-menu-item
               command=${i.command}
@@ -4480,6 +4472,7 @@ let SplitButton = class SplitButton extends ButtonElement {
       :host {
         display: inline-flex;
         max-width: 100%;
+        min-width: var(--ixfx-split-button-min-width, 0);
         vertical-align: middle;
       }
 
@@ -4549,12 +4542,20 @@ let SplitButton = class SplitButton extends ButtonElement {
 
       button.primary {
         flex: 1;
+        min-width: 0;
         padding: var(--space-m, 8px) var(--space-l, 12px);
         gap: 0.5em;
         overflow: hidden;
         white-space: nowrap;
       }
 
+      button.primary .button-label {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       button.caret {
         padding: var(--space-m, 8px) var(--space-s, 6px);
         border-inline-start: var(--border, 1px solid #999);
@@ -4585,6 +4586,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;
@@ -4603,7 +4620,6 @@ __decorate([property({
 __decorate([property({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "items", void 0);
 __decorate([query(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
-__decorate([state()], SplitButton.prototype, "_compact", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedCommand", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedLabel", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedIcon", void 0);
@@ -5697,7 +5713,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,
@@ -5819,7 +5835,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}`;
@@ -11633,7 +11649,7 @@ function createTreeListAdapter(toTreeItem, options) {
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li, [data-list-item]`;
 function isMultiMode(mode) {
-	return mode === `checked` || mode === `vscode` || mode === `standard`;
+	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
 }
 let VerticalListElement = class VerticalListElement extends i {
 	constructor(..._args2) {
@@ -11894,7 +11910,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	_toggleItem(item) {
 		if (!this._isCheckable(item)) return;
 		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
-		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
 		const previous = this._selectedItems;
 		const next = new Set(this._selectedItems);
 		if (next.has(item)) next.delete(item);
@@ -11959,7 +11975,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	_handleClickSelection(item, e) {
 		const mode = this.interactionMode;
 		if (mode === `manual`) return;
-		if (this.selectionMode === `none` && mode !== `checked`) return;
+		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
 		switch (mode) {
 			case `implicit`:
 				this._replaceSelection(item);
@@ -11971,7 +11987,8 @@ let VerticalListElement = class VerticalListElement extends i {
 				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
 				else this._replaceSelection(item);
 				break;
-			case `checked`:
+			case `checked`: break;
+			case `sticky`: this._toggleItem(item);
 		}
 	}
 	_handleSpaceKey(item) {
@@ -22692,6 +22709,253 @@ __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();
+		};
+	}
+	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;
+		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(`click`, this._onPanelClick);
+		this.style.setProperty(`position-anchor`, this._anchorName);
+		this._attachToTarget();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`toggle`, this._onToggle);
+		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) {
@@ -27556,6 +27820,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