@ixfx/components 0.10.4 → 0.10.6

package/bundle/index.js

@@ -19723,6 +19723,7 @@ let TabListElement = class TabListElement extends i {
 		this.flip = false;
 		this.scrollable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.shrink = false;
 		this.dragMode = `off`;
 		this.#items = [];
@@ -19730,9 +19731,10 @@ let TabListElement = class TabListElement extends i {
 		this.#suppressNextClick = false;
 		this.#onSlotChange = () => {
 			this.updateComplete.then(() => {
-				this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+				this.#refreshItems();
 				this.#syncIndicatorColors();
 				this.#syncHideLabels();
+				this.#syncLabelNogrow();
 			});
 		};
 		this.#onToolbarSlotChange = () => {
@@ -19891,13 +19893,21 @@ let TabListElement = class TabListElement extends i {
     </div>`;
 	}
 	#onSlotChange;
+	/**
+	* Re-read the assigned tab items. Some environments do not fire slotchange
+	* for a slot's initial assignment, so firstUpdated also calls this before
+	* syncing item attributes.
+	*/
+	#refreshItems() {
+		this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+	}
 	#onToolbarSlotChange;
 	firstUpdated() {
 		this.updateComplete.then(() => {
-			if (this.#items.length > 0) {
-				this.#syncIndicatorColors();
-				this.#syncHideLabels();
-			}
+			this.#refreshItems();
+			this.#syncIndicatorColors();
+			this.#syncHideLabels();
+			this.#syncLabelNogrow();
 			this.#onToolbarSlotChange();
 		});
 	}
@@ -19906,11 +19916,16 @@ let TabListElement = class TabListElement extends i {
 		this.classList.toggle(`scrollable`, this.scrollable);
 		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
 		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
+		if (changedProperties.has(`labelNogrow`)) this.#syncLabelNogrow();
 	}
 	#syncHideLabels() {
 		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
 		else item.removeAttribute(`hide-labels`);
 	}
+	#syncLabelNogrow() {
+		for (const item of this.#items) if (this.labelNogrow) item.setAttribute(`label-nogrow`, ``);
+		else item.removeAttribute(`label-nogrow`);
+	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
 			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
@@ -20329,6 +20344,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -20345,16 +20364,21 @@ let TabListItemElement = class TabListItemElement extends i {
 		super(..._args);
 		this.closeable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
 		this._hasToolbarContent = false;
+		this._hasStatusContent = false;
 		this._labelObserver = null;
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
+		this._onStatusSlotChange = () => {
+			this._updateStatusContent();
+		};
 		this._onLabelSlotChange = () => {
 			this._syncLabelSizer();
 		};
@@ -20365,13 +20389,18 @@ 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);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
-		this._labelObserver = new MutationObserver(() => this._syncLabelSizer());
+		this._wireSlotListeners();
+		this._labelObserver = new MutationObserver(() => {
+			this._syncLabelSizer();
+			this._updateToolbarContent();
+			this._updateStatusContent();
+		});
 		this._labelObserver.observe(this, {
 			childList: true,
 			characterData: true,
-			subtree: true
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`slot`]
 		});
 	}
 	disconnectedCallback() {
@@ -20382,8 +20411,7 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._commandCleanup = void 0;
 		this._labelObserver?.disconnect();
 		this._labelObserver = null;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+		this._unwireSlotListeners();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -20407,6 +20435,22 @@ let TabListItemElement = class TabListItemElement extends i {
 		});
 	}
 	/**
+	* Attach slotchange listeners. The shadow root is empty during the first
+	* connectedCallback (the template only exists once rendered), so this is
+	* called again from firstUpdated. addEventListener dedupes identical
+	* listener registrations, so double-wiring is harmless.
+	*/
+	_wireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.addEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	_unwireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.removeEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	/**
 	* Mirror the default-slot text into `.label[data-label]` for the `::after`
 	* width sizer. Slotted toolbar content is excluded.
 	*/
@@ -20419,11 +20463,20 @@ let TabListItemElement = class TabListItemElement extends i {
 		else label.removeAttribute(`data-label`);
 	}
 	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+		this._hasToolbarContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `toolbar`);
+	}
+	/**
+	* Named slots only render once content has been detected, so reading
+	* assignedElements() cannot bootstrap detection. Direct light-DOM children
+	* are exactly what a slot assigns, so scan those instead.
+	*/
+	_updateStatusContent() {
+		this._hasStatusContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `status`);
 	}
 	firstUpdated() {
+		this._wireSlotListeners();
 		this._updateToolbarContent();
+		this._updateStatusContent();
 		this._syncLabelSizer();
 	}
 	render() {
@@ -20433,6 +20486,7 @@ let TabListItemElement = class TabListItemElement extends i {
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${this._hasStatusContent ? b`<div class="status"><slot name="status"></slot></div>` : A}
         ${hasActions ? b`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
@@ -20585,6 +20639,28 @@ let TabListItemElement = class TabListItemElement extends i {
         display: contents;
       }
 
+      /* Persistent status slot (e.g. an ixfx-led). Unlike .toolbar it is
+         always visible, selection or not, and keeps its own size however
+         much the label truncates. --size inherits through slotted content,
+         so bare and button-wrapped LEDs both render smaller; consumers can
+         override per element. */
+      .status {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        --size: 0.75ex;
+      }
+
+      slot[name="status"] {
+        display: contents;
+      }
+
+      /* With label-nogrow, the label keeps its intrinsic width so status
+         content lands next to the label text instead of the far edge. */
+      :host([label-nogrow]) .label {
+        flex: 0 0 auto;
+      }
+
       /* Slotted buttons inherit these through the shadow boundary; keeps a
          toolbar button from inflating the strip height. */
       .toolbar ::slotted(ixfx-button) {
@@ -20628,6 +20704,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListItemElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListItemElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -20640,6 +20720,7 @@ __decorate([property({
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 __decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasStatusContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/dock/dock-panel.ts
@@ -32390,7 +32471,7 @@ function clamp$2(value, min, max) {
 /**
 * Scale a value from one range to another
 */
-function scale$1(value, fromMin, fromMax, toMin, toMax) {
+function scale$2(value, fromMin, fromMax, toMin, toMax) {
 	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
 }
 //#endregion
@@ -32449,7 +32530,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 			event.preventDefault();
 			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
 			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
-			const relativeValue = scale$1(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			const relativeValue = scale$2(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
 			this.#setValueFromRelative(clamp$2(relativeValue, 0, 1), true);
 		};
 		this.#onPointerUp = () => {
@@ -32533,7 +32614,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 		return this.#lanes.get(key);
 	}
 	#getRelativeValue() {
-		return scale$1(this.value, this.min, this.max, 0, 1);
+		return scale$2(this.value, this.min, this.max, 0, 1);
 	}
 	#getEffectiveMarkerStyle() {
 		if (this.valueMode === `unipolar` && this.markerStyle === `needle`) return `none`;
@@ -32547,7 +32628,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 		return value;
 	}
 	#setValueFromRelative(relativeValue, isUserInteraction = false) {
-		const newValue = scale$1(relativeValue, 0, 1, this.min, this.max);
+		const newValue = scale$2(relativeValue, 0, 1, this.min, this.max);
 		const clampedValue = this.#quantise(clamp$2(newValue, this.min, this.max));
 		if (clampedValue === this.value) return;
 		const previousValue = this.value;
@@ -33308,7 +33389,7 @@ function clamp$1(value, min, max) {
 /**
 * Linear-reinterpolate `value` from [fromMin, fromMax] to [toMin, toMax].
 */
-function scale(value, fromMin, fromMax, toMin, toMax) {
+function scale$1(value, fromMin, fromMax, toMin, toMax) {
 	if (fromMax === fromMin) return toMin;
 	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
 }
@@ -33316,7 +33397,7 @@ function scale(value, fromMin, fromMax, toMin, toMax) {
 * Convert an absolute value to a relative (0..1) position.
 */
 function valueToRelative(value, min, max) {
-	return scale(value, min, max, 0, 1);
+	return scale$1(value, min, max, 0, 1);
 }
 //#endregion
 //#region src/slider-input/slider-input.ts
@@ -33875,7 +33956,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		return value;
 	}
 	#setSingleValueFromRelative(relativeValue, isUserInteraction = false) {
-		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const newValue = scale$1(relativeValue, 0, 1, this.min, this.max);
 		const clampedValue = this.#quantise(clamp$1(newValue, this.min, this.max));
 		if (clampedValue === this.valueA) return;
 		const previousValue = this.valueA;
@@ -33891,7 +33972,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		this.#emitInputAndChange({ previousValue }, isUserInteraction);
 	}
 	#setDualOrTripleValueFromRelative(relativeValue, handle, isUserInteraction = false) {
-		const clamped = clamp$1(scale(relativeValue, 0, 1, this.min, this.max), this.min, this.max);
+		const clamped = clamp$1(scale$1(relativeValue, 0, 1, this.min, this.max), this.min, this.max);
 		const result = this.#resolvePoleChange(handle, clamped, this.#lastInteractedHandle);
 		if (!result) return;
 		const previous = { ...this.#poles() };
@@ -34431,7 +34512,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		if (handle === `c`) {
 			const lo = this.#low();
 			const hi = this.#high();
-			const clamped = clamp$1(scale(clamp$1(targetRelative, 0, 1), 0, 1, this.min, this.max), lo, hi);
+			const clamped = clamp$1(scale$1(clamp$1(targetRelative, 0, 1), 0, 1, this.min, this.max), lo, hi);
 			const q = this.#quantise(clamped);
 			if (q === this.#poleC) return;
 			const previous = this.#poles();
@@ -43196,6 +43277,289 @@ __decorate([property({
 __decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
 SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
 //#endregion
+//#region src/util/clamp.ts
+function clampValue(v, min, max) {
+	return Math.min(Math.max(v, min), max);
+}
+//#endregion
+//#region src/util/geometry.ts
+function scale(v, fromMin, fromMax, toMin, toMax) {
+	if (fromMax === fromMin) return toMin;
+	return toMin + (v - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/shapefill-value/shapefill-value.ts
+let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(i) {
+	constructor(..._args) {
+		super(..._args);
+		this.display = `circle`;
+		this.fillMode = `centre`;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.disabled = false;
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			svgEl?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svgEl) svgEl.setPointerCapture(event.pointerId);
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onPointerMove = (event) => {
+			if (!this.#dragging) return;
+			event.preventDefault();
+			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
+			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
+			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			this.#setValueFromRelative(clampValue(relativeValue, 0, 1), true);
+		};
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			if (svgEl && `hasPointerCapture` in svgEl && typeof svgEl.hasPointerCapture === `function`) {
+				if (svgEl.hasPointerCapture(1)) svgEl.releasePointerCapture(1);
+			}
+			window.removeEventListener(`pointermove`, this.#onPointerMove);
+			window.removeEventListener(`pointerup`, this.#onPointerUp);
+			window.removeEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onKeyDown = (event) => {
+			if (this.disabled) return;
+			const range = this.max - this.min;
+			const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#stepByRelativeDelta(effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#stepByRelativeDelta(-effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+			}
+			if (handled) event.preventDefault();
+		};
+	}
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
+	}
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return Math.round((value - this.min) / step) * step + this.min;
+		}
+		return value;
+	}
+	#setValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clampValue(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValue() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: {
+					value: this.value,
+					valueRelative: this.#getRelativeValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(previousValue);
+		} else this.#fireChangeEvent(previousValue);
+	}
+	#scheduleChangeEvent(previousValue) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(previousValue);
+			this.#changeDebounceTimer = void 0;
+		}, 150);
+	}
+	#fireChangeEvent(previousValue) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: this.value,
+				valueRelative: this.#getRelativeValue(),
+				previousValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onKeyDown;
+	/**
+	* Apply a relative-delta nudge to the current value, clamped to [min, max] and
+	* quantised. Shared between keyboard arrow keys and the wheel handler.
+	*/
+	#stepByRelativeDelta(relativeDelta, isUserInteraction) {
+		this.#setValueFromRelative(clampValue(this.#getRelativeValue() + relativeDelta, 0, 1), isUserInteraction);
+	}
+	_applyWheelDelta(direction, event) {
+		const range = this.max - this.min;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		this.#stepByRelativeDelta(direction * effectiveStep / range, true);
+	}
+	#renderCircle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerRadius = 45;
+		const innerRadius = outerRadius * relativeValue;
+		const outerCx = 50;
+		const outerCy = 50;
+		let cx = outerCx;
+		if (this.fillMode === `left`) cx = 5 + outerRadius * relativeValue;
+		else if (this.fillMode === `right`) cx = 95 - outerRadius * relativeValue;
+		return w`
+      <circle class="fill" cx="${cx}" cy="${outerCy}" r="${innerRadius}" />
+      <circle class="outline" cx="${outerCx}" cy="${outerCy}" r="${outerRadius}" fill="none" />
+    `;
+	}
+	#renderRectangle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerSize = 90;
+		const outerOffset = 5;
+		if (this.fillMode === `left` || this.fillMode === `right`) {
+			const innerWidth = outerSize * relativeValue;
+			const x = this.fillMode === `left` ? outerOffset : 95 - innerWidth;
+			return w`
+        <rect class="fill" x="${x}" y="${outerOffset}" width="${innerWidth}" height="${outerSize}" />
+        <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+      `;
+		}
+		const innerSize = outerSize * relativeValue;
+		const innerOffset = (100 - innerSize) / 2;
+		return w`
+      <rect class="fill" x="${innerOffset}" y="${innerOffset}" width="${innerSize}" height="${innerSize}" />
+      <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+    `;
+	}
+	render() {
+		const preserveAspectRatio = this.display === `rectangle` ? `none` : `xMidYMid meet`;
+		return b`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="${preserveAspectRatio}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${this.display === `rectangle` ? this.#renderRectangle() : this.#renderCircle()}
+      </svg>
+    `;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.style.setProperty(`--shapefill-value-relative`, this.#getRelativeValue().toString());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			i$3`
+    :host {
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      touch-action: none;
+      user-select: none;
+
+      /* Dynamic value - set by JS */
+      --shapefill-value-relative: 0;
+
+      /* Public styling variables — consumer customisable */
+      --shapefill-value-outline-color: var(--surface-4);
+      --shapefill-value-outline-width: 2;
+      --shapefill-value-fill-color: var(--accent);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      display: block;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--shapefill-value-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--shapefill-value-focus-outline-offset, 2px);
+    }
+
+    .outline {
+      stroke: var(--shapefill-value-outline-color, var(--surface-4));
+      stroke-width: var(--shapefill-value-outline-width, 2);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .fill {
+      fill: var(--shapefill-value-fill-color, var(--accent));
+      transition: var(--shapefill-value-fill-transition, none);
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: String })], ShapefillValueElement.prototype, "display", void 0);
+__decorate([property({
+	type: String,
+	attribute: `fill-mode`
+})], ShapefillValueElement.prototype, "fillMode", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "stops", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ShapefillValueElement.prototype, "disabled", void 0);
+ShapefillValueElement = __decorate([safeCustomElement(`ixfx-shapefill-value`)], ShapefillValueElement);
+//#endregion
 //#region src/sliding-number/sliding-number.ts
 const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
 const SECTION_RANK = {
@@ -46813,6 +47177,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		this.invisibleGroups = false;
 		this.allowReorder = false;
 		this._overflowCount = 0;
+		this._popoverOpen = false;
 		this._ro = null;
 		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
 		this._sizes = /* @__PURE__ */ new WeakMap();
@@ -46938,11 +47303,11 @@ let ToolbarElement = class ToolbarElement extends i {
     .overflow-btn[hidden] { display: none; }
     .overflow-popover {
       position: fixed;
-      top: anchor(bottom);
-      left: anchor(right);
+      inset: auto;
+      margin: 0;
       position-anchor: var(--anchor-name);
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-      margin: 8px;
+      position-visibility: anchors-visible;
       max-height: min(60vh, 400px);
       max-width: min(90vw, 320px);
       overflow: auto;
@@ -46952,6 +47317,18 @@ let ToolbarElement = class ToolbarElement extends i {
       flex-direction: column;
       gap: var(--space-s);
     }
+    :host([orientation="horizontal"]) .overflow-popover {
+      position-area: bottom span-left;
+      margin-top: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-left"]) .overflow-popover {
+      position-area: right span-bottom;
+      margin-left: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-right"]) .overflow-popover {
+      position-area: left span-bottom;
+      margin-right: var(--toolbar-overflow-gap, 8px);
+    }
     .overflow-popover:popover-open { display: flex; }
     .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
 
@@ -46990,6 +47367,9 @@ let ToolbarElement = class ToolbarElement extends i {
 		});
 		this._ro = new ResizeObserver(() => this._scheduleMeasure());
 		this._ro.observe(this._inner);
+		this._popover.addEventListener(`toggle`, () => {
+			this._popoverOpen = this._popover.matches(`:popover-open`);
+		});
 		this._scheduleMeasure();
 		this._updateGroups();
 	}
@@ -47330,7 +47710,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		return b`
       <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
         <slot @pointerdown=${this._onPointerDown} @keydown=${this._onKeyDown}></slot>
-        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popoverOpen}>⋯</ixfx-button>
       </div>
       <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
         <slot name="overflow"></slot>
@@ -47373,6 +47753,7 @@ __decorate([property({
 	reflect: true
 })], ToolbarElement.prototype, "allowReorder", void 0);
 __decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([state()], ToolbarElement.prototype, "_popoverOpen", void 0);
 __decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
 __decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
 __decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
@@ -50156,6 +50537,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map