@ixfx/components 0.2.3 → 0.2.5

package/dist/range-input.js

@@ -0,0 +1,459 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as tooltipValueStyles } from "./tooltip-DMxmBNky.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+//#region src/range-input/range-input.ts
+function normalize(value, min, max) {
+	return max === min ? 0 : (value - min) / (max - min);
+}
+let RangeInput = class RangeInput extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.min = 0;
+		this.max = 1;
+		this.value = 0;
+		this.step = .01;
+		this.orientation = `horizontal`;
+		this.swipeable = false;
+		this.tooltip = false;
+		this.tooltipOrientation = `top`;
+		this._swipeModified = false;
+		this._onPointerDown = (e) => {
+			if (!this.swipeable) return;
+			e.preventDefault();
+			this._swipeModified = false;
+			this._applySwipeValue(this._valueFromPointer(e));
+			window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });
+		};
+		this._onPointerMove = (e) => {
+			if (!this.swipeable || e.buttons === 0) return;
+			this._applySwipeValue(this._valueFromPointer(e));
+		};
+		this._onPointerEnter = (e) => {
+			if (!this.swipeable || e.buttons === 0) return;
+			this._swipeModified = false;
+			this._applySwipeValue(this._valueFromPointer(e));
+			window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });
+		};
+		this._onPointerLeave = (_e) => {
+			if (!this.swipeable || !this._swipeModified) return;
+			this._swipeModified = false;
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onWindowPointerUp = () => {
+			if (!this._swipeModified) return;
+			this._swipeModified = false;
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._handleInput = (e) => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			const target = e.target;
+			const value = Number.parseFloat(target.value);
+			this.value = value;
+			this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: { value },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._handleChange = () => {
+			const value = Number.parseFloat(this._inputEl.value);
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { value },
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`pointerdown`, this._onPointerDown);
+		this.addEventListener(`pointermove`, this._onPointerMove);
+		this.addEventListener(`pointerenter`, this._onPointerEnter);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerdown`, this._onPointerDown);
+		this.removeEventListener(`pointermove`, this._onPointerMove);
+		this.removeEventListener(`pointerenter`, this._onPointerEnter);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
+		window.removeEventListener(`pointerup`, this._onWindowPointerUp);
+	}
+	_valueFromPointer(e) {
+		const rect = this.getBoundingClientRect();
+		const normalized = this.orientation === `vertical` ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height)) : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		const raw = this.min + normalized * (this.max - this.min);
+		const snapped = Math.round((raw - this.min) / this.step) * this.step + this.min;
+		return Math.max(this.min, Math.min(this.max, snapped));
+	}
+	_applySwipeValue(value) {
+		this.value = value;
+		if (this._inputEl) this._inputEl.value = String(value);
+		this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: { value },
+			bubbles: true,
+			composed: true
+		}));
+		this._swipeModified = true;
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has(`value`) || changedProperties.has(`min`) || changedProperties.has(`max`)) this.style.setProperty(`--value`, String(normalize(this.value, this.min, this.max)));
+		if (this._tooltipEl) this._tooltipEl.valueFormatTooltip = (v) => {
+			const num = typeof v === `number` ? v : Number(v);
+			if (this.labelFormatter) return this.labelFormatter(num, normalize(num, this.min, this.max));
+			const decimals = this.step >= 1 ? 0 : this.step >= .1 ? 1 : 2;
+			return num.toFixed(decimals);
+		};
+	}
+	_formatTooltipLabel() {
+		const normalized = normalize(this.value, this.min, this.max);
+		if (this.labelFormatter) return this.labelFormatter(this.value, normalized);
+		const decimals = this.step >= 1 ? 0 : this.step >= .1 ? 1 : 2;
+		return this.value.toFixed(decimals);
+	}
+	render() {
+		const tooltipEl = this.tooltip ? html`
+      <ixfx-tooltip
+        style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)"
+        .orientation=${this.tooltipOrientation}
+        anchor="--ixfx-ri-thumb"
+        .value=${this.value}
+      ></ixfx-tooltip>
+    ` : nothing;
+		return html`
+      <div class="wrap">
+        <div class="range-bg"></div>
+        <input
+          type="range"
+          .min=${String(this.min)}
+          .max=${String(this.max)}
+          .step=${String(this.step)}
+          .value=${String(this.value)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >${tooltipEl}
+      </div>
+    `;
+	}
+	static {
+		this.styles = [tooltipValueStyles, css`
+    :host {
+      display: block;
+      container-type: size;
+      user-select: none;
+      touch-action: none;
+      -webkit-touch-action: none;
+      width: var(--width, 200px);
+      height: var(--height, 2em);
+
+      /*
+       * Internal resolved vars — read public vars and apply defaults here.
+       * Public vars are NOT defined in :host {}, only read via fallback.
+       * This lets inherited values from ancestor elements flow through.
+       */
+      --_track-thickness: var(--track-thickness, 100%);
+      --_thumb-thickness: var(--thumb-thickness, 2em);
+      --_thumb-color: var(--thumb-color, var(--surface-2-text));
+      --_thumb-color-active: var(--thumb-color-active, var(--surface-2-text));
+      --_thumb-opacity: var(--thumb-opacity, 0.7);
+      --_thumb-opacity-hover: var(--thumb-opacity-hover, 0.8);
+      --_thumb-opacity-active: var(--thumb-opacity-active, 1); 
+      --_thumb-size: var(--thumb-size, var(--_track-thickness));
+      --_thumb-radius: var(--thumb-radius, 0);
+      --_thumb-border: var(--thumb-border, none);
+      --_thumb-shadow: var(--thumb-shadow, none);
+      --_track-radius: var(--track-radius, none);
+      --_track-corner-shape: var(--track-corner-shape, none);
+      --_bg-track: var(--background-track, var(--surface-4));
+      --_bg-track-hover: var(--background-track-hover, var(--_bg-track));
+      --_bg-track-value: var(--background-track-value, var(--surface-6));
+      --_bg-track-value-hover: var(--background-track-value-hover, var(--accent));
+      --_bg-track-value-active: var(--background-track-value-active, var(--accent));
+
+      --value: 0;
+      --sx1: calc(var(--_thumb-thickness) + var(--value) * (100% - var(--_thumb-thickness)));
+      --track-avail: calc(100% - var(--_thumb-thickness));
+      --sx: calc(var(--_thumb-thickness) + (var(--value) * var(--track-avail)));
+      --track-mask: linear-gradient(to right, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);
+      --track-mask-vertical: linear-gradient(to top, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);
+    }
+
+    :host([orientation="vertical"]) {
+      width: var(--width, 2em);
+      height: var(--height, 200px);
+    }
+
+    .wrap {
+      display: grid;
+      width: 100%;
+      height: 100%;
+    }
+
+    .wrap > * {
+      grid-area: 1 / 1;
+    }
+
+    .range-bg {
+      background: var(--_bg-track);
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--_track-radius);
+      corner-shape: var(--_track-corner-shape);
+    }
+
+    .wrap:hover .range-bg {
+      background: var(--_bg-track-hover);
+    }
+
+    input[type=range] {
+      margin: 0;
+      padding: 0;
+      -webkit-appearance: none;
+      background: unset;
+      box-shadow: none;
+      width: 100%;
+      height: var(--_track-thickness);
+      align-self: center;
+    }
+
+    input[type=range]:focus {
+      outline: none;
+    }
+
+    /* Vertical layout */
+    :host([orientation="vertical"]) .range-bg {
+      background: var(--background-track-vertical, var(--_bg-track));
+      width: var(--_track-thickness);
+      height: 100%;
+      justify-self: center;
+    }
+
+    :host([orientation="vertical"]) .wrap:hover .range-bg {
+      background: var(--background-track-hover-vertical, var(--_bg-track-hover));
+    }
+
+    :host([orientation="vertical"]) input[type=range] {
+      writing-mode: vertical-rl;
+      direction: rtl;
+      width: var(--_track-thickness);
+      height: 100%;
+      justify-self: center;
+    }
+
+    /* ── Webkit thumb ── */
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      opacity: var(--_thumb-opacity);
+      box-sizing: border-box;
+      anchor-name: --ixfx-ri-thumb;
+      width: var(--_thumb-thickness);
+      height: var(--_thumb-size);
+      border-radius: var(--_thumb-radius);
+      background: var(--_thumb-color);
+      border: var(--_thumb-border);
+      box-shadow: var(--_thumb-shadow);
+      margin-top: calc(max((var(--_thumb-thickness) - 1px - 1px) * 0.5, 0px) - var(--_thumb-thickness) * 0.5);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-webkit-slider-thumb {
+      width: var(--_thumb-size);
+      height: var(--_thumb-thickness);
+      margin-top: 0;
+      margin-left: calc(max((1em - 1px - 1px) * 0.5, 0px) - 1.2em * 0.5);
+    }
+
+    input[type=range]::-webkit-slider-thumb:hover {
+      opacity: var(--_thumb-opacity-hover);
+    }
+
+    input[type=range]::-webkit-slider-thumb:active {
+      opacity: var(--_thumb-opacity-active);
+    }
+    input[type=range]::-webkit-slider-thumb:hover,
+    input[type=range]::-webkit-slider-thumb:active {
+      background: var(--_thumb-color-active);
+    }
+
+    /* ── Webkit track ── */
+    input[type=range]::-webkit-slider-runnable-track {
+      height: var(--_track-thickness);
+      background: var(--_bg-track-value);
+      mask-image: var(--track-mask);
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--_track-radius);
+      corner-shape: var(--_track-corner-shape);
+    }
+
+    input[type=range]:hover::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-hover);
+      mask-image: var(--track-mask);
+    }
+
+    input[type=range]:active::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-active);
+      mask-image: var(--track-mask);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-webkit-slider-runnable-track {
+      background: var(--background-track-value-vertical, var(--_bg-track-value));
+      mask-image: var(--track-mask-vertical);
+      width: var(--_track-thickness);
+      height: unset;
+    }
+
+    :host([orientation="vertical"]) input[type=range]:hover::-webkit-slider-runnable-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:active::-webkit-slider-runnable-track {
+      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    /* ── Mozilla thumb ── */
+    input[type=range]::-moz-range-thumb {
+      box-sizing: border-box;
+      width: var(--_thumb-thickness);
+      height: var(--_thumb-size);
+      border-radius: var(--_thumb-radius);
+      background: var(--_thumb-color);
+      border: var(--_thumb-border);
+      box-shadow: var(--_thumb-shadow);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-moz-range-thumb {
+      width: var(--_thumb-size);
+      height: var(--_thumb-thickness);
+    }
+
+    input[type=range]::-moz-range-thumb:hover,
+    input[type=range]::-moz-range-thumb:active {
+      background: var(--_thumb-color-active);
+    }
+
+    /* ── Mozilla track ── */
+    input[type=range]::-moz-range-track {
+      height: var(--_track-thickness);
+      background: var(--_bg-track-value);
+      mask-image: var(--track-mask);
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    input[type=range]:hover::-moz-range-track {
+      background: var(--_bg-track-value-hover);
+      mask-image: var(--track-mask);
+    }
+
+    input[type=range]:active::-moz-range-track {
+      background: var(--_bg-track-value-active);
+      mask-image: var(--track-mask);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-moz-range-track {
+      background: var(--background-track-value-vertical, var(--_bg-track-value));
+      mask-image: var(--track-mask-vertical);
+      height: unset;
+      width: var(--_track-thickness);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:hover::-moz-range-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:active::-moz-range-track {
+      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    /* ── Swipeable mode ── */
+    /* Disable native pointer capture so the cursor can move freely between sliders */
+    :host([swipeable]) input {
+      pointer-events: none;
+    }
+
+    /* In swipeable mode, disable pointer events on wrap so host receives hover */
+    :host([swipeable]) .wrap {
+      pointer-events: none;
+    }
+
+    /* In swipeable mode, use host hover to trigger track/thumb hover styles */
+    :host([swipeable]):hover input[type=range]::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-hover);
+    }
+
+    :host([swipeable]):hover input[type=range]::-webkit-slider-thumb {
+      background: var(--_thumb-color-active);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover input[type=range]::-webkit-slider-runnable-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+    }
+
+    :host([swipeable]):hover input[type=range]::-moz-range-track {
+      background: var(--_bg-track-value-hover);
+    }
+
+    :host([swipeable]):hover input[type=range]::-moz-range-thumb {
+      background: var(--_thumb-color-active);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover input[type=range]::-moz-range-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+    }
+
+    :host([swipeable]):hover .range-bg {
+      background: var(--_bg-track-hover);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover .range-bg {
+      background: var(--background-track-hover-vertical, var(--_bg-track-hover));
+    }
+  `];
+	}
+};
+__decorate([property({ type: Number })], RangeInput.prototype, "min", void 0);
+__decorate([property({ type: Number })], RangeInput.prototype, "max", void 0);
+__decorate([property({ type: Number })], RangeInput.prototype, "value", void 0);
+__decorate([property({ type: Number })], RangeInput.prototype, "step", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], RangeInput.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], RangeInput.prototype, "swipeable", void 0);
+__decorate([property({ type: Boolean })], RangeInput.prototype, "tooltip", void 0);
+__decorate([property({
+	type: String,
+	attribute: `tooltip-orientation`
+})], RangeInput.prototype, "tooltipOrientation", void 0);
+__decorate([property({ attribute: false })], RangeInput.prototype, "labelFormatter", void 0);
+__decorate([query(`input`)], RangeInput.prototype, "_inputEl", void 0);
+__decorate([query(`ixfx-tooltip`)], RangeInput.prototype, "_tooltipEl", void 0);
+RangeInput = __decorate([customElement(`ixfx-range-input`)], RangeInput);
+//#endregion
+export { RangeInput };
+
+//# sourceMappingURL=range-input.js.map

package/dist/range-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.js","names":[],"sources":["../src/range-input/range-input.ts"],"sourcesContent":["/**\n * <ixfx-range-input> — styled range input with no label.\n *\n * A thin wrapper around <input type=\"range\"> that adds the same\n * fancy track/thumb/fill styling as the linear-value components,\n * without the label display.\n *\n * Supports horizontal (default) and vertical orientation in a single element.\n * Set orientation=\"vertical\" attribute to switch.\n *\n * CSS Variables:\n *   --track-thickness            Track cross-axis size (default 1.5em)\n *   --thumb-color                Thumb fill (default var(--surface-2-text))\n *   --thumb-color-active         Thumb fill on hover/active (default var(--accent))\n *   --thumb-size                 Thumb cross-axis size (default var(--track-thickness))\n *   --thumb-thickness            Thumb inline size (default 2em)\n *   --thumb-radius               Thumb border-radius (default 0)\n *   --thumb-border               Thumb border (default none)\n *   --thumb-shadow               Thumb box-shadow (default none)\n *   --background-track           Unfilled track background (default var(--surface-4))\n *   --background-track-hover     Unfilled track on hover (default --background-track)\n *   --background-track-value     Filled track color (default var(--surface-6))\n *   --background-track-value-hover   Filled track on hover (default var(--accent))\n *   --background-track-value-active  Filled track on active (default var(--accent))\n *\n * Optional vertical-specific overrides (fall back to horizontal vars when unset):\n *   --background-track-vertical\n *   --background-track-value-vertical\n *   --background-track-value-hover-vertical\n *   --background-track-value-active-vertical\n *\n * Tooltip:\n *   tooltip               Boolean attribute — enables value tooltip on hover/focus\n *   tooltip-orientation   'top' (default) | 'right'\n *   labelFormatter        Function property (not attribute): (rawValue: number, scaledValue: number) => string\n *                         rawValue  = native input value within min..max\n *                         scaledValue = normalised 0..1 position\n *\n * Swipeable mode:\n *   swipeable   Boolean attribute — enables swipe-to-draw gesture.\n *               When active, pressing down on the slider or entering it while the\n *               pointer is pressed sets the value from the cursor coordinate.\n *               Pointer capture is NOT held, so the cursor can move to adjacent\n *               swipeable sliders and update them too (step-sequencer style).\n *               Kill-axis exit (above/below for horizontal, left/right for vertical)\n *               freezes the value; re-entering re-engages.\n *\n * Events:\n *   input  — CustomEvent<{ value: number }>\n *   change — CustomEvent<{ value: number }>\n *             In swipeable mode fires on pointerleave (or pointerup if released\n *             while still inside). In normal mode delegates to native change.\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { TooltipElement, TooltipOrientations } from '../util/tooltip.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { tooltipValueStyles } from '../styles/tooltip.js';\n\nfunction normalize(value: number, min: number, max: number): number {\n  return max === min ? 0 : (value - min) / (max - min);\n}\n\n@customElement(`ixfx-range-input`)\nexport class RangeInput extends LitElement {\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1;\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) step = 0.01;\n  @property({ type: String, reflect: true }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: Boolean, reflect: true }) swipeable = false;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: TooltipOrientations = `top`;\n  @property({ attribute: false }) labelFormatter?: (rawValue: number, scaledValue: number) => string;\n\n  @query(`input`)\n  _inputEl!: HTMLInputElement;\n\n  @query(`ixfx-tooltip`)\n  _tooltipEl?: TooltipElement | null;\n\n  /** True if this slider changed its value during the current pointer visit. */\n  private _swipeModified = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointerdown`, this._onPointerDown);\n    this.addEventListener(`pointermove`, this._onPointerMove);\n    this.addEventListener(`pointerenter`, this._onPointerEnter);\n    this.addEventListener(`pointerleave`, this._onPointerLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointerdown`, this._onPointerDown);\n    this.removeEventListener(`pointermove`, this._onPointerMove);\n    this.removeEventListener(`pointerenter`, this._onPointerEnter);\n    this.removeEventListener(`pointerleave`, this._onPointerLeave);\n    window.removeEventListener(`pointerup`, this._onWindowPointerUp);\n  }\n\n  private _valueFromPointer(e: PointerEvent): number {\n    const rect = this.getBoundingClientRect();\n    // vertical: top = max, bottom = min (writing-mode: vertical-rl; direction: rtl)\n    const normalized = this.orientation === `vertical`\n      ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))\n      : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const raw = this.min + normalized * (this.max - this.min);\n    const snapped = Math.round((raw - this.min) / this.step) * this.step + this.min;\n    return Math.max(this.min, Math.min(this.max, snapped));\n  }\n\n  private _applySwipeValue(value: number): void {\n    this.value = value;\n    if (this._inputEl)\n      this._inputEl.value = String(value);\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n    this._swipeModified = true;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (!this.swipeable)\n      return;\n    e.preventDefault();\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._applySwipeValue(this._valueFromPointer(e));\n  };\n\n  private _onPointerEnter = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerLeave = (_e: PointerEvent): void => {\n    if (!this.swipeable || !this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  private _onWindowPointerUp = (): void => {\n    if (!this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has(`value`) || changedProperties.has(`min`) || changedProperties.has(`max`)) {\n      this.style.setProperty(`--value`, String(normalize(this.value, this.min, this.max)));\n    }\n    if (this._tooltipEl) {\n      this._tooltipEl.valueFormatTooltip = (v: unknown) => {\n        const num = typeof v === `number` ? v : Number(v);\n        if (this.labelFormatter)\n          return this.labelFormatter(num, normalize(num, this.min, this.max));\n        const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n        return num.toFixed(decimals);\n      };\n    }\n  }\n\n  _handleInput = (e: Event): void => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    const target = e.target as HTMLInputElement;\n    const value = Number.parseFloat(target.value);\n    this.value = value;\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  _formatTooltipLabel(): string {\n    const normalized = normalize(this.value, this.min, this.max);\n    if (this.labelFormatter)\n      return this.labelFormatter(this.value, normalized);\n    const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n    return this.value.toFixed(decimals);\n  }\n\n  _handleChange = (): void => {\n    const value = Number.parseFloat(this._inputEl.value);\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  override render() {\n    const tooltipEl = this.tooltip\n      ? html`\n      <ixfx-tooltip\n        style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n        .orientation=${this.tooltipOrientation}\n        anchor=\"--ixfx-ri-thumb\"\n        .value=${this.value}\n      ></ixfx-tooltip>\n    `\n      : nothing;\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"range-bg\"></div>\n        <input\n          type=\"range\"\n          .min=${String(this.min)}\n          .max=${String(this.max)}\n          .step=${String(this.step)}\n          .value=${String(this.value)}\n          @input=${this._handleInput}\n          @change=${this._handleChange}\n        >${tooltipEl}\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = [tooltipValueStyles, css`\n    :host {\n      display: block;\n      container-type: size;\n      user-select: none;\n      touch-action: none;\n      -webkit-touch-action: none;\n      width: var(--width, 200px);\n      height: var(--height, 2em);\n\n      /*\n       * Internal resolved vars — read public vars and apply defaults here.\n       * Public vars are NOT defined in :host {}, only read via fallback.\n       * This lets inherited values from ancestor elements flow through.\n       */\n      --_track-thickness: var(--track-thickness, 100%);\n      --_thumb-thickness: var(--thumb-thickness, 2em);\n      --_thumb-color: var(--thumb-color, var(--surface-2-text));\n      --_thumb-color-active: var(--thumb-color-active, var(--surface-2-text));\n      --_thumb-opacity: var(--thumb-opacity, 0.7);\n      --_thumb-opacity-hover: var(--thumb-opacity-hover, 0.8);\n      --_thumb-opacity-active: var(--thumb-opacity-active, 1); \n      --_thumb-size: var(--thumb-size, var(--_track-thickness));\n      --_thumb-radius: var(--thumb-radius, 0);\n      --_thumb-border: var(--thumb-border, none);\n      --_thumb-shadow: var(--thumb-shadow, none);\n      --_track-radius: var(--track-radius, none);\n      --_track-corner-shape: var(--track-corner-shape, none);\n      --_bg-track: var(--background-track, var(--surface-4));\n      --_bg-track-hover: var(--background-track-hover, var(--_bg-track));\n      --_bg-track-value: var(--background-track-value, var(--surface-6));\n      --_bg-track-value-hover: var(--background-track-value-hover, var(--accent));\n      --_bg-track-value-active: var(--background-track-value-active, var(--accent));\n\n      --value: 0;\n      --sx1: calc(var(--_thumb-thickness) + var(--value) * (100% - var(--_thumb-thickness)));\n      --track-avail: calc(100% - var(--_thumb-thickness));\n      --sx: calc(var(--_thumb-thickness) + (var(--value) * var(--track-avail)));\n      --track-mask: linear-gradient(to right, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n      --track-mask-vertical: linear-gradient(to top, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n    }\n\n    :host([orientation=\"vertical\"]) {\n      width: var(--width, 2em);\n      height: var(--height, 200px);\n    }\n\n    .wrap {\n      display: grid;\n      width: 100%;\n      height: 100%;\n    }\n\n    .wrap > * {\n      grid-area: 1 / 1;\n    }\n\n    .range-bg {\n      background: var(--_bg-track);\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    .wrap:hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    input[type=range] {\n      margin: 0;\n      padding: 0;\n      -webkit-appearance: none;\n      background: unset;\n      box-shadow: none;\n      width: 100%;\n      height: var(--_track-thickness);\n      align-self: center;\n    }\n\n    input[type=range]:focus {\n      outline: none;\n    }\n\n    /* Vertical layout */\n    :host([orientation=\"vertical\"]) .range-bg {\n      background: var(--background-track-vertical, var(--_bg-track));\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    :host([orientation=\"vertical\"]) .wrap:hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range] {\n      writing-mode: vertical-rl;\n      direction: rtl;\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    /* ── Webkit thumb ── */\n    input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      opacity: var(--_thumb-opacity);\n      box-sizing: border-box;\n      anchor-name: --ixfx-ri-thumb;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n      margin-top: calc(max((var(--_thumb-thickness) - 1px - 1px) * 0.5, 0px) - var(--_thumb-thickness) * 0.5);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n      margin-top: 0;\n      margin-left: calc(max((1em - 1px - 1px) * 0.5, 0px) - 1.2em * 0.5);\n    }\n\n    input[type=range]::-webkit-slider-thumb:hover {\n      opacity: var(--_thumb-opacity-hover);\n    }\n\n    input[type=range]::-webkit-slider-thumb:active {\n      opacity: var(--_thumb-opacity-active);\n    }\n    input[type=range]::-webkit-slider-thumb:hover,\n    input[type=range]::-webkit-slider-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Webkit track ── */\n    input[type=range]::-webkit-slider-runnable-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      width: var(--_track-thickness);\n      height: unset;\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Mozilla thumb ── */\n    input[type=range]::-moz-range-thumb {\n      box-sizing: border-box;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n    }\n\n    input[type=range]::-moz-range-thumb:hover,\n    input[type=range]::-moz-range-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Mozilla track ── */\n    input[type=range]::-moz-range-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    input[type=range]:hover::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-moz-range-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      height: unset;\n      width: var(--_track-thickness);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-moz-range-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Swipeable mode ── */\n    /* Disable native pointer capture so the cursor can move freely between sliders */\n    :host([swipeable]) input {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, disable pointer events on wrap so host receives hover */\n    :host([swipeable]) .wrap {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, use host hover to trigger track/thumb hover styles */\n    :host([swipeable]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-webkit-slider-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-range-input': RangeInput;\n  }\n}\n"],"mappings":"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"}

package/dist/range.d.ts

@@ -0,0 +1,28 @@
+import { r as TooltipOrientations } from "./tooltip-kfUBWYVB.js";
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/range/range.d.ts
+declare class RangeElement extends LitElement {
+  #private;
+  tooltip: boolean;
+  tooltipOrientation: TooltipOrientations;
+  orientation: `horizontal` | `vertical`;
+  disabled: boolean;
+  min: number;
+  max: number;
+  set value(v: number);
+  get value(): number;
+  step: number;
+  onRangeInput(event: InputEvent): void;
+  protected render(): unknown;
+  static styles: _$lit.CSSResult[];
+}
+declare global {
+  interface HTMLElementMap {
+    "ixfx-range": RangeElement;
+  }
+} //# sourceMappingURL=range.d.ts.map
+//#endregion
+export { RangeElement };
+//# sourceMappingURL=range.d.ts.map

package/dist/range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","names":[],"sources":["../src/range/range.ts"],"mappings":";;;;;cAOa,YAAA,SAAqB,UAAA;EAAA;EAEhC,OAAA;EAGA,kBAAA,EAAoB,mBAAA;EAGpB,WAAA;EAGA,QAAA;EAGA,GAAA;EAGA,GAAA;EAAA,IAGI,KAAA,CAAM,CAAA;EAAA,IAIN,KAAA,CAAA;EAOJ,IAAA;EAEA,YAAA,CAAa,KAAA,EAAO,UAAA;EAAA,UAeV,MAAA,CAAA;EAAA,OAiBH,MAAA,EAhCuB,KAAA,CAgCjB,SAAA;AAAA;AAAA,QAkEP,MAAA;EAAA,UACI,cAAA;IACR,YAAA,EAAc,YAAA;EAAA;AAAA"}

package/dist/range.js

@@ -0,0 +1,136 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { t as tooltipValueStyles } from "./tooltip-DMxmBNky.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/range/range.ts
+let RangeElement = class RangeElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tooltip = true;
+		this.tooltipOrientation = `top`;
+		this.orientation = `horizontal`;
+		this.disabled = false;
+		this.min = 0;
+		this.max = 100;
+		this.#value = 0;
+		this.step = 0;
+	}
+	set value(v) {
+		this.#value = v;
+	}
+	get value() {
+		return this.#value;
+	}
+	#value;
+	onRangeInput(event) {
+		const valueNum = event.target.valueAsNumber;
+		const valueStr = event.target.value;
+		this.#value = valueNum;
+		if (this.tooltip) {
+			const o = this.shadowRoot?.querySelector(`output`);
+			if (o) o.value = valueStr;
+			else console.warn(`Output element not found`);
+		}
+	}
+	render() {
+		const tt = this.tooltip ? html`<ixfx-tooltip
+          style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)"
+          .orientation=${this.tooltipOrientation}
+          anchor="--thumb-tooltip"
+          .value=${this.value}></ixfx-tooltip>` : nothing;
+		const verticalStyle = this.orientation === `vertical` ? `writing-mode: vertical-lr; direction: rtl;` : nothing;
+		return html`
+      <input ?disabled=${this.disabled} step=${this.step} min=${this.min} max=${this.max} value=${this.value} @input=${this.onRangeInput} type="range" style=${verticalStyle}>
+      ${tt}
+    `;
+	}
+	static {
+		this.styles = [
+			prominenceStyles,
+			tooltipValueStyles,
+			css`
+    :host {
+      display: inline-block;
+      --value-label-color: unset;
+      --thumb-background: ButtonFace;
+      --thumb-radius: 50%;
+      --thumb-width: 1em;
+      --thumb-height: 1em;
+    }
+
+    :host([orientation="vertical"]) {
+      display: block;
+      width: 1.5em;
+      height: 200px;
+    }
+
+    [type="range"] {
+      width: 100%;
+      height: 1.5em;
+      accent-color: var(--accent, AccentColor);
+    }
+
+    :host([orientation="vertical"]) [type="range"] {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      width: 1.5em;
+      height: 100%;
+    }
+
+    [type="range"]::-webkit-slider-thumb {
+      width: var(--thumb-width);
+      height: var(--thumb-height);
+      border-radius: var(--thumb-radius);
+      background: var(--thumb-background);
+      anchor-name: --thumb-tooltip;
+    }
+
+    :host([orientation="vertical"]) [type="range"]::-webkit-slider-thumb {
+      width: var(--thumb-height);
+      height: var(--thumb-width);
+    }
+
+    [type="range"]::-moz-range-thumb {
+      width: var(--thumb-width);
+      height: var(--thumb-height);
+      border-radius: var(--thumb-radius);
+      background: var(--thumb-background);
+      box-shadow: var(--shadow-m);
+      anchor-name: --thumb-tooltip;
+    }
+
+    :host([orientation="vertical"]) [type="range"]::-moz-range-thumb {
+      width: var(--thumb-height);
+      height: var(--thumb-width);
+    }
+
+    [type="range"]:focus {
+      outline: none;
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: Boolean })], RangeElement.prototype, "tooltip", void 0);
+__decorate([property({
+	type: String,
+	attribute: `tooltip-orientation`
+})], RangeElement.prototype, "tooltipOrientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], RangeElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: true
+})], RangeElement.prototype, "disabled", void 0);
+__decorate([property({ type: Number })], RangeElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], RangeElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], RangeElement.prototype, "value", null);
+__decorate([property({ type: Number })], RangeElement.prototype, "step", void 0);
+RangeElement = __decorate([customElement(`ixfx-range`)], RangeElement);
+//#endregion
+export { RangeElement };
+
+//# sourceMappingURL=range.js.map