@ixfx/components 0.6.2 → 0.7.0

package/dist/labelled-slider-input-DzigjMwP.js

@@ -0,0 +1,808 @@
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as prominenceStyles } from "./prominence-DlFShic3.js";
+import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
+import { EditableLabel } from "./editable-label.js";
+import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import "./slider-input-De4eoT11.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/editable-label/editable-number.ts
+const DRAG_THRESHOLD_PX = 3;
+let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel) {
+	#dragStartY;
+	#dragStartValue;
+	#dragging;
+	#hasDragged;
+	#dragCurrentValue;
+	#lastInputValue;
+	#firstUpdateComplete;
+	constructor() {
+		super();
+		this.dragSensitivity = 1;
+		this.noDrag = false;
+		this.precision = 0;
+		this.#dragStartY = 0;
+		this.#dragStartValue = 0;
+		this.#dragging = false;
+		this.#hasDragged = false;
+		this.#dragCurrentValue = 0;
+		this.#lastInputValue = ``;
+		this.#firstUpdateComplete = false;
+		this._stopNativeInput = (e) => {
+			e.stopPropagation();
+		};
+		this._handleMouseEnter = () => {
+			if (this.displayTextLogic !== `transient` || this._editing) return;
+			this._hovering = true;
+			this._clearTransientTimer();
+			this._transientTimer = window.setTimeout(() => {
+				this._transientShowingValue = true;
+				this._requestDisplayUpdate();
+			}, this.appearDelay);
+		};
+		this._handleMouseLeave = () => {
+			if (this.displayTextLogic !== `transient` || this._editing) return;
+			this._hovering = false;
+			this._clearTransientTimer();
+			if (this._transientShowingValue) this._transientTimer = window.setTimeout(() => {
+				if (!this._hovering) {
+					this._transientShowingValue = false;
+					this._requestDisplayUpdate();
+				}
+			}, this.disappearDelay);
+		};
+		this._handleClick = () => {
+			if (this.disabled) return;
+			this.renderRoot?.querySelector(`.number`)?.focus();
+		};
+		this._handleFocus = () => {};
+		this._handleBeforeInput = (e) => {
+			if (e.inputType !== `insertText` || !e.data) return;
+			if (!this._isAllowedInput(e.data)) {
+				e.preventDefault();
+				return;
+			}
+			const contentEl = this._contentEl;
+			if (!contentEl) return;
+			const currentContent = contentEl.textContent ?? ``;
+			const insertPosition = contentEl.selectionStart ?? currentContent.length;
+			const newValue = currentContent.slice(0, insertPosition) + e.data + currentContent.slice(insertPosition);
+			if (newValue !== this.#lastInputValue) {
+				this.#lastInputValue = newValue;
+				this.dispatchEvent(new CustomEvent(`input`, {
+					detail: { value: newValue },
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this._handleKeydown = (e) => {
+			if (!this._editing) return;
+			if (e.key === `Enter`) {
+				e.preventDefault();
+				this._tryCommit();
+				if (this.mode === `editor`) this._contentEl?.blur();
+			} else if (e.key === `Escape`) {
+				e.preventDefault();
+				this.dispatchEvent(new CustomEvent(`cancelled`, {
+					detail: { value: this._prevValue },
+					bubbles: true,
+					composed: true
+				}));
+				this._cancelEdit();
+				this.dispatchEvent(new CustomEvent(`change`, {
+					detail: { value: this._prevValue },
+					bubbles: true,
+					composed: true
+				}));
+				if (this.mode === `editor`) this._contentEl?.blur();
+			}
+		};
+		this._onKeyDown = (e) => {
+			if (this._editing || this.disabled) return;
+			if (this._handleArrowKey(e)) return;
+			if (e.key.length === 1) {
+				this._onUserInteraction();
+				this._beginEdit();
+			}
+		};
+		this._onPointerDown = (e) => {
+			if (e.button !== 0) return;
+			if (this._editing) return;
+			if (this.disabled || this.noDrag) return;
+			e.preventDefault();
+			this.renderRoot?.querySelector(`.number`)?.focus();
+			this.#dragStartY = e.clientY;
+			this.#dragStartValue = this._parseValue();
+			this.#dragCurrentValue = this.#dragStartValue;
+			this.#dragging = false;
+			this.#hasDragged = false;
+			this.setPointerCapture(e.pointerId);
+		};
+		this._onPointerMove = (e) => {
+			if (!(e.buttons & 1)) return;
+			if (this._editing) return;
+			if (this.disabled || this.noDrag) return;
+			const deltaY = this.#dragStartY - e.clientY;
+			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX) return;
+			this.#dragging = true;
+			this.#hasDragged = true;
+			this.toggleAttribute(`dragging`, true);
+			this._onUserInteraction();
+			const raw = this.#dragStartValue + deltaY * this.dragSensitivity * (this.step || 1);
+			const snapped = this._clamp(this._snap(raw));
+			this.#dragCurrentValue = this.step !== void 0 ? snapped : Number.parseFloat(snapped.toFixed(this.precision));
+			const dragValueStr = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
+			if (dragValueStr !== this.#lastInputValue) {
+				this.#lastInputValue = dragValueStr;
+				this.dispatchEvent(new CustomEvent(`input`, {
+					detail: { value: dragValueStr },
+					bubbles: true,
+					composed: true
+				}));
+			}
+			this._requestDisplayUpdate();
+			this._updateValueCss(this._normalizedValue(this.#dragCurrentValue));
+		};
+		this._onPointerUp = (e) => {
+			if (this.hasPointerCapture(e.pointerId)) this.releasePointerCapture(e.pointerId);
+			if (!this.#dragging) return;
+			if (this.disabled || this.noDrag) return;
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const finalStr = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
+			const prev = this.value;
+			this.value = finalStr;
+			if (finalStr !== prev) this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { value: finalStr },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._interceptClick = (e) => {
+			if (this.#hasDragged) {
+				e.stopImmediatePropagation();
+				this.#hasDragged = false;
+			}
+		};
+		this.mode = `editor`;
+		this.entryMode = `number`;
+		this.value = `0`;
+	}
+	render() {
+		return html`
+      ${this.fillStyle ? html`<div class="track"></div>` : ``}
+      ${this.fillStyle ? html`<div class="value"><div class="bar"></div></div>` : ``}
+      <div
+        class="number"
+        part="content"
+        tabindex="${this.disabled ? -1 : 0}"
+        contenteditable="${this._editing ? `plaintext-only` : `false`}"
+        data-placeholder="${this.placeholder}"
+        @click=${this._handleClick}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+        @keydown=${this._handleKeydown}
+        @beforeinput=${this._handleBeforeInput}
+        @input=${this._stopNativeInput}
+      ></div>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`pointerdown`, this._onPointerDown);
+		this.addEventListener(`pointermove`, this._onPointerMove);
+		this.addEventListener(`pointerup`, this._onPointerUp);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`click`, this._interceptClick, { capture: true });
+		this.addEventListener(`mouseenter`, this._handleMouseEnter);
+		this.addEventListener(`mouseleave`, this._handleMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerdown`, this._onPointerDown);
+		this.removeEventListener(`pointermove`, this._onPointerMove);
+		this.removeEventListener(`pointerup`, this._onPointerUp);
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`click`, this._interceptClick);
+		this.removeEventListener(`mouseenter`, this._handleMouseEnter);
+		this.removeEventListener(`mouseleave`, this._handleMouseLeave);
+	}
+	/** Override to use .number instead of .content for text display */
+	get _contentEl() {
+		return this.renderRoot?.querySelector(`.number`) ?? void 0;
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		if (this.displayTextLogic === `show`) this._showModeWaitingToHide = true;
+		this._updateValueCss(this._normalizedValue());
+		this._requestDisplayUpdate();
+	}
+	_onUserInteraction() {
+		if (this.displayTextLogic === `show` && !this._editing) {
+			this._clearTransientTimer();
+			this._showModeWaitingToHide = false;
+			this._requestDisplayUpdate();
+			this._transientTimer = window.setTimeout(() => {
+				this._showModeWaitingToHide = true;
+				this._requestDisplayUpdate();
+			}, this.disappearDelay);
+			return;
+		}
+		if (this.displayTextLogic === `transient` && !this._editing) {
+			this._clearTransientTimer();
+			this._transientShowingValue = true;
+			this._requestDisplayUpdate();
+			this._transientTimer = window.setTimeout(() => {
+				if (!this._hovering) {
+					this._transientShowingValue = false;
+					this._requestDisplayUpdate();
+				}
+			}, this.disappearDelay);
+			return;
+		}
+		super._onUserInteraction();
+	}
+	_onValueChange() {
+		if (this.displayTextLogic !== `show` || this._editing) return;
+		this._clearTransientTimer();
+		this._showModeWaitingToHide = false;
+		this._requestDisplayUpdate();
+		this._transientTimer = window.setTimeout(() => {
+			this._showModeWaitingToHide = true;
+			this._requestDisplayUpdate();
+		}, this.disappearDelay);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (!this._editing) this._updateValueCss(this._normalizedValue());
+	}
+	_updateValueCss(normalized) {
+		this.style.setProperty(`--value`, String(normalized));
+		let valueStart = 0;
+		let valueEnd = normalized;
+		if (this.linearStyle === `bipolar`) {
+			if (normalized <= .5) {
+				valueStart = normalized;
+				valueEnd = .5;
+			} else {
+				valueStart = .5;
+				valueEnd = normalized;
+			}
+		} else if (this.linearStyle === `unipolar`) {
+			valueStart = .5 - normalized * .5;
+			valueEnd = .5 + normalized * .5;
+		}
+		this.style.setProperty(`--value-start`, String(valueStart));
+		this.style.setProperty(`--value-end`, String(valueEnd));
+		if (this.fillStyle === `circular` && this.circularStyle === `offset`) {
+			const h = this.offsetHeight;
+			const w = this.offsetWidth;
+			const r = h / 2 - 2;
+			const leftEdge = 2;
+			const rightEdge = w - 2;
+			const valueCenterPx = leftEdge + r + normalized * (rightEdge - leftEdge - 2 * r);
+			this.style.setProperty(`--radius`, `${r}px`);
+			this.style.setProperty(`--value-center-px`, `${valueCenterPx}px`);
+			this.style.setProperty(`--component-width-px`, `${w}px`);
+			this.style.setProperty(`--component-height-px`, `${h}px`);
+		}
+	}
+	_getDisplayText() {
+		if (this._shouldUseDisplayText()) return this.displayText ?? ``;
+		if (this.#dragging) {
+			const formatted = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
+			return this.formatter ? this.formatter(formatted) : formatted;
+		}
+		if (this.formatter) {
+			const raw = Number.parseFloat(this.value);
+			return this.formatter(Number.isNaN(raw) ? this.value : String(raw));
+		}
+		return this._formatDisplay();
+	}
+	_tryCommit() {
+		const el = this.renderRoot?.querySelector(`.number`);
+		if (el) {
+			const n = Number.parseFloat(el.textContent?.trim() ?? ``);
+			if (!Number.isNaN(n)) el.textContent = this._formatNumber(this._clamp(this._snap(n)));
+		}
+		super._tryCommit();
+	}
+	_handleArrowKey(e) {
+		const range = (this.max ?? 100) - (this.min ?? 0);
+		if (range === 0) return false;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, e.shiftKey);
+		let delta = 0;
+		let handled = false;
+		switch (e.key) {
+			case `ArrowUp`:
+			case `ArrowRight`:
+				delta = effectiveStep;
+				handled = true;
+				break;
+			case `ArrowDown`:
+			case `ArrowLeft`:
+				delta = -effectiveStep;
+				handled = true;
+				break;
+			case `Home`:
+				delta = -(this._parseValue() - (this.min ?? 0));
+				handled = true;
+				break;
+			case `End`:
+				delta = (this.max ?? 0) - this._parseValue();
+				handled = true;
+		}
+		if (handled) {
+			e.preventDefault();
+			this._applyDelta(delta);
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Apply a signed delta to the current value, clamp/snap/format, and fire
+	* `input`/`change`. Shared between arrow-key handler and the wheel handler.
+	*/
+	_applyDelta(delta) {
+		const prev = this.value;
+		const current = this._parseValue();
+		const newValue = this._clamp(this._snap(current + delta));
+		const newValueStr = this.step !== void 0 ? this._formatNumber(newValue) : newValue.toFixed(this.precision);
+		this.value = newValueStr;
+		this._requestDisplayUpdate();
+		this._updateValueCss(this._normalizedValue(newValue));
+		if (newValueStr !== prev) this.dispatchEvent(new CustomEvent(`input`, {
+			detail: { value: newValueStr },
+			bubbles: true,
+			composed: true
+		}));
+		requestAnimationFrame(() => {
+			if (this.value !== prev) this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true
+			}));
+		});
+	}
+	_shouldHandleWheel() {
+		if (this._editing) return false;
+		return super._shouldHandleWheel();
+	}
+	_applyWheelDelta(direction, event) {
+		const range = (this.max ?? 100) - (this.min ?? 0);
+		if (range === 0) return;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		this._applyDelta(direction * effectiveStep);
+	}
+	_parseValue() {
+		return Number.parseFloat(this.value) || 0;
+	}
+	/**
+	* Formats the stored value for display, inferring decimal places from the value
+	* string itself. This preserves typed precision (e.g. "0.1234" stays "0.1234")
+	* and also respects trailing zeros written by drag storage (e.g. "5.0" stays "5.0").
+	*/
+	_formatDisplay() {
+		const n = Number.parseFloat(this.value);
+		if (Number.isNaN(n)) return this.value;
+		if (this.precision !== void 0) return n.toFixed(this.precision);
+		const dot = this.value.indexOf(`.`);
+		const dp = dot >= 0 ? this.value.length - dot - 1 : 0;
+		return n.toFixed(dp);
+	}
+	_clamp(n) {
+		if (this.min !== void 0) n = Math.max(this.min, n);
+		if (this.max !== void 0) n = Math.min(this.max, n);
+		return n;
+	}
+	_snap(n) {
+		if (this.stops && this.stops > 1) {
+			const min = this.min ?? 0;
+			const stopStep = ((this.max ?? 100) - min) / this.stops;
+			return Math.round((n - min) / stopStep) * stopStep + min;
+		}
+		if (!this.step) return n;
+		return Math.round(n / this.step) * this.step;
+	}
+	_inferDecimals(n) {
+		if (this.step !== void 0) {
+			const s = String(this.step);
+			const dot = s.indexOf(`.`);
+			return dot >= 0 ? s.length - dot - 1 : 0;
+		}
+		const s = String(n ?? this._parseValue());
+		const dot = s.indexOf(`.`);
+		return dot >= 0 ? s.length - dot - 1 : 0;
+	}
+	_formatNumber(n) {
+		return n.toFixed(this._inferDecimals(n));
+	}
+	/** Returns a 0..1 fraction for the given value within [min, max]. */
+	_normalizedValue(n = this._parseValue()) {
+		if (this.min === void 0 || this.max === void 0) return 0;
+		if (this.max === this.min) return 0;
+		return Math.max(0, Math.min(1, (n - this.min) / (this.max - this.min)));
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			...EditableLabel.styles,
+			css`
+    :host {
+      font-size: var(--text-s,11px);
+      --value: 0;
+      --value-start: 0;
+      --value-end: 0;
+      --_fill-color-alpha: color-mix(
+        in oklch,
+        var(--fill-color, var(--accent, oklch(60% 0.15 140))) calc(var(--fill-opacity, 0.25) * 100%),
+        transparent
+      );
+    }
+
+    /* ── Layout (when fill-style is enabled) ── */
+    :host([fill-style]) {
+      display: grid;
+      position: relative;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+      min-height: 1.5em;
+      min-width: 5em;
+    }
+
+    :host([fill-style]) .track,
+    :host([fill-style]) .value {
+      grid-area: 1 / 1;
+      position: absolute;
+      inset: 0;
+    }
+
+    /* Track background styling */
+    :host([fill-style]) .track {
+      z-index: 0;
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+    }
+
+    :host([fill-style]) .value {
+      z-index: 1;
+    }
+
+    :host([fill-style="linear"]) .track {
+      border-radius: var(--radius-s, 3px);
+    }
+
+    :host([fill-style="circular"]) .track {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    /* Linear: all linear-styles use .bar positioned via --value-start and --value-end */
+    :host([fill-style="linear"]) .value {
+      overflow: hidden;
+    }
+
+    :host([fill-style="linear"]) .bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(var(--value-start, 0) * 100%);
+      width: calc((var(--value-end, 0) - var(--value-start, 0)) * 100%);
+      background: var(--fill-image, var(--_fill-color-alpha));
+    }
+
+    /* Circular grow: filled circle growing from center */
+    :host([fill-style="circular"][circular-style="grow"]) .value,
+    :host([fill-style="circular"]:not([circular-style])) .value {
+      background: var(--fill-image, var(--_fill-color-alpha));
+      clip-path: circle(calc(var(--value) * 50%) at 50% 50%);
+    }
+
+    /* Circular offset: value circle slides left/right from center.
+       Track circle is centered, filling the height.
+       Value circle is same size, offset by --value-offset-px.
+       At value=0.5: value circle centered on track (invisible when overlaid)
+       At value=0: value circle at far left
+       At value=1: value circle at far right
+    */
+    :host([fill-style="circular"][circular-style="offset"]) {
+      min-width: 80px;
+      min-height: 26px;
+      overflow: hidden;
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .track {
+      position: absolute;
+      top: 50%;
+      border-radius: 50%;
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+      width: calc(var(--radius, 11px) * 2);
+      height: calc(var(--radius, 11px) * 2);
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .value {
+      position: absolute;
+      top: 50%;
+      background: var(--fill-image, var(--_fill-color-alpha));
+      border-radius: 50%;
+      width: calc(var(--radius, 11px) * 2);
+      height: calc(var(--radius, 11px) * 2);
+      transform: translate(calc(var(--value-center-px, 13px) - var(--radius, 11px)), -50%);
+    }
+
+    :host([fill-style="circular"][circular-style="offset"]) .number {
+      border-radius: 0;
+    }
+
+    /* Circular dot: full circle */
+    :host([fill-style="circular"][circular-style="dot"]) .value {
+      background: var(--fill-image, var(--_fill-color-alpha));
+    }
+
+    /* ── Number (top layer - text display) ── */
+    :host([fill-style]) .number {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: inherit;
+      font-size: inherit;
+      color: inherit;
+      padding: var(--space-xs, 3px) var(--space-s, 4px);
+    }
+
+    :host([fill-style="circular"]) .number {
+      border-radius: 50%;
+    }
+
+    /* Drag cursor + no text selection while not in text-edit mode */
+    :host(:not([disabled]):not([no-drag])) .number:not([contenteditable="plaintext-only"]) {
+      cursor: ns-resize;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: none;
+    }
+
+    /* Focus outline */
+    :host .number {
+      outline: none;
+    }
+
+    :host .number:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    /* ── Circular host sizing ── */
+    :host([fill-style="circular"][circular-style="grow"]),
+    :host([fill-style="circular"]:not([circular-style])) {
+      aspect-ratio: 1;
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: Number })], EditableNumber.prototype, "min", void 0);
+__decorate([property({ type: Number })], EditableNumber.prototype, "max", void 0);
+__decorate([property({ type: Number })], EditableNumber.prototype, "step", void 0);
+__decorate([property({ type: Number })], EditableNumber.prototype, "stops", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `drag-sensitivity`
+})], EditableNumber.prototype, "dragSensitivity", void 0);
+__decorate([property({ attribute: `fill-style` })], EditableNumber.prototype, "fillStyle", void 0);
+__decorate([property({ attribute: `linear-style` })], EditableNumber.prototype, "linearStyle", void 0);
+__decorate([property({ attribute: `circular-style` })], EditableNumber.prototype, "circularStyle", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `no-drag`
+})], EditableNumber.prototype, "noDrag", void 0);
+__decorate([property({ type: Number })], EditableNumber.prototype, "precision", void 0);
+EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
+//#endregion
+//#region src/labelled-slider-input/labelled-slider-input.ts
+let LabelledSliderInput = class LabelledSliderInput extends LabelledInputBase {
+	constructor(..._args) {
+		super(..._args);
+		this.inputSelector = `ixfx-slider-input`;
+		this.orientation = `horizontal`;
+		this.singleStyle = `range`;
+		this.markerStyle = `needle`;
+		this.stops = void 0;
+		this.disabled = false;
+		this.swipeable = false;
+		this.lighttouch = false;
+		this.switchHeight = 80;
+	}
+	_renderEditableNumber() {
+		if (this._isMini) return html``;
+		return html`
+      <ixfx-editable-number
+        class="number"
+        mode="label"
+        no-drag
+        ?lighttouch=${this.lighttouch}
+        .value=${String(this.value)}
+        .min=${this.min}
+        .max=${this.max}
+        .step=${this.step}
+        .dragSensitivity=${this.dragSensitivity}
+        .precision=${this.precision}
+        .displayText=${this.label}
+        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}
+        .formatter=${this._formatter}
+        @change=${this._handleNumberChange}
+      ></ixfx-editable-number>
+    `;
+	}
+	_syncValue(v) {
+		super._syncValue(v);
+		const input = this.renderRoot?.querySelector(this.inputSelector);
+		if (input && typeof input.valueA === `number` && input.valueA !== v) input.valueA = v;
+	}
+	render() {
+		return html`
+      <div class="wrap ${this._isMini ? `mini` : ``}">
+        ${this._renderEditableNumber()}
+        <ixfx-slider-input
+          class="slider"
+          ?lighttouch=${this.lighttouch}
+          ?disabled=${this.disabled}
+          ?swipeable=${this.swipeable}
+          .valueA=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          .step=${this.step}
+          .stops=${this.stops}
+          .orientation=${this.orientation}
+          .singleStyle=${this.singleStyle}
+          .markerStyle=${this.markerStyle}
+          @input=${this._handleSliderInput}
+          @change=${this._handleInputChange}
+        ></ixfx-slider-input>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      container-type: size;
+      min-height: var(--min-height, 20px);
+      min-width: var(--min-width, 50px);
+      width: var(--width, auto);
+      height: var(--height, 100px);
+    }
+
+    /* One focus ring for the whole control: the inner slider's own ring is
+       suppressed (see ixfx-slider-input below) and re-drawn here so it wraps
+       the label + slider group instead of just the track. */
+    :host(:focus-within) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .wrap {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+    }
+
+    ixfx-editable-number {
+      flex-shrink: 0;
+    }
+
+    ixfx-slider-input {
+      flex: 1;
+      min-width: 0;
+      /* Suppress the slider's own focus ring; the wrapper draws one around
+         the whole control via :host(:focus-within) above. */
+      --slider-input-svg-focus-outline: none;
+      --slider-input-svg-focus-outline-offset: 0;
+    }
+
+    /* Default (compact): horizontal — label beside slider */
+    .wrap {
+      flex-direction: var(--flow, row);
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    ixfx-editable-number {
+      --label-align: left;
+      width: var(--label-width, 5ch);
+      --label-min-width: var(--label-width, 5ch);
+      /* Block fill/background variables from reaching editable-number */
+      --fill-color: initial;
+      --fill-opacity: initial;
+      --fill-image: initial;
+    }
+
+    /* Vertically-stacked layout: applied when the container is tall enough
+       to fit label + slider, OR when the author forces it with --flow:
+       column (a style query, so an explicit --flow: column brings the
+       label/slider companion rules too — not just the flex direction — and
+       therefore works at any --height, not only >= 80px). */
+    @container (height >= 80px) or style(--flow: column) {
+      .wrap {
+        flex-direction: var(--flow, column);
+        /* Centre the label+slider group so any height the component is
+           given beyond what the two need is split evenly above and below,
+           rather than dumped into a stretched slider. */
+        justify-content: center;
+        align-items: center;
+      }
+
+      ixfx-editable-number {
+        --label-align: center;
+        /* Stretch (not width: 100%): in the normal stacked column this is
+           visually identical (full-width centered label), but a hardcoded
+           100% width would also apply when --flow forces a row at this
+           height — eating the whole row and squeezing the slider to zero. */
+        align-self: stretch;
+        width: auto;
+      }
+
+      ixfx-slider-input {
+        width: 100%;
+        /* Don't stretch to fill the column. The slider paints its bar
+           thickness as a fraction of the height it's handed, so a fat
+           lane-track-width in a tall slot leaves most of that slot as
+           dead space. Cap it to a sensible band (override with
+           --slider-thickness) and let the centred group absorb the rest. */
+        flex: 0 1 auto;
+        height: var(--slider-thickness, 2.5em);
+        max-height: 100%;
+      }
+    }
+
+    /* Mini mode: slider fills the full component */
+    .wrap.mini {
+      gap: 0;
+    }
+
+    .wrap.mini ixfx-slider-input {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+	}
+};
+__decorate([property({ type: String })], LabelledSliderInput.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `single-style`
+})], LabelledSliderInput.prototype, "singleStyle", void 0);
+__decorate([property({
+	type: String,
+	attribute: `marker-style`
+})], LabelledSliderInput.prototype, "markerStyle", void 0);
+__decorate([property({ type: Number })], LabelledSliderInput.prototype, "stops", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LabelledSliderInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LabelledSliderInput.prototype, "swipeable", void 0);
+__decorate([property({ type: Boolean })], LabelledSliderInput.prototype, "lighttouch", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `switch-height`
+})], LabelledSliderInput.prototype, "switchHeight", void 0);
+LabelledSliderInput = __decorate([safeCustomElement(`ixfx-labelled-slider-input`)], LabelledSliderInput);
+//#endregion
+export { EditableNumber as n, LabelledSliderInput as t };
+
+//# sourceMappingURL=labelled-slider-input-DzigjMwP.js.map