@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,141 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+declare const LyraSlider_base: typeof LyraElement & (new (...args: any[]) => import("../../internal/form-associated.js").FormAssociatedInterface);
+/**
+ * `<lyra-slider>` — a numeric range control (e.g. an LLM "temperature"
+ * setting), form-associated. Mirrors native `<input type="range">`
+ * semantics: `value` is the string form-submitted via `FormAssociated`,
+ * `valueAsNumber` is the ergonomic numeric accessor (mirroring the native
+ * `<input type=range>` IDL attribute of the same name) kept in sync with it
+ * in both directions — reads parse `value`, writes stringify back to it.
+ *
+ * Unlike the mixin's other consumers, an unset `value` is eagerly defaulted
+ * — on connect, and again after `form.reset()` — to the midpoint of
+ * `[min, max]` snapped to `step`, the same "range sanitization algorithm"
+ * default a native range input applies. A slider always represents *some*
+ * number, so `required` (inherited from `FormAssociated`) only has a window
+ * to block submission before that default lands, matching how `required`
+ * isn't a meaningful constraint on a native range input either.
+ *
+ * Clicking anywhere on the track (not just the 16px thumb) jumps the thumb
+ * to that point and continues the same gesture as a drag, matching native
+ * `<input type=range>` click-to-seek.
+ *
+ * @customElement lyra-slider
+ * @event lyra-input - Fired continuously during an active drag or a
+ *   keyboard step (including OS key-repeat while a key is held), mirroring
+ *   native `<input type=range>`'s own `input` event. `detail: { value: number }`.
+ * @event lyra-change - Fired once an interaction commits: on pointerup for a
+ *   drag, or on keyup for a keyboard step — so a single Arrow/Home/End/
+ *   PageUp/PageDown press fires both `lyra-input` and `lyra-change`,
+ *   mirroring how native `<input type=range>` fires `change` on every
+ *   committed step too. `detail: { value: number }`.
+ * @csspart base - The row wrapping the track and the optional value readout.
+ * @csspart track - The full-width background line.
+ * @csspart fill - The filled portion of the track from `min` up to the current value.
+ * @csspart thumb - The draggable handle (`role="slider"`).
+ * @csspart value - The visible numeric readout, rendered when `show-value` is true.
+ */
+export declare class LyraSlider extends LyraSlider_base {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        min: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        step: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+    };
+    private _min;
+    private _max;
+    private _step;
+    private pendingValue;
+    get min(): number;
+    set min(next: number);
+    get max(): number;
+    set max(next: number);
+    get step(): number;
+    set step(next: number);
+    /** Accessible name for the slider, used when no visible label context
+     *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+     *  as `aria-label` on the interactive `role="slider"` element. A plain
+     *  `aria-label` attribute on the host itself is honored as a fallback when
+     *  this is left unset, matching `<lyra-checkbox>`/`<lyra-switch>`. */
+    label: string;
+    /** Whether to render the current numeric value as visible text next to
+     *  the track. Like `<lyra-markdown>`'s `sanitize`/`gfm`, this is a plain
+     *  `type: Boolean` property defaulting `true` — turn it off via the
+     *  `.showValue=${false}` property binding (a bare `show-value="false"`
+     *  content attribute is still truthy, since presence is all Lit's default
+     *  boolean converter checks). */
+    showValue: boolean;
+    private activePointers;
+    private changedPointers;
+    private keyboardChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The numeric counterpart of `value`, mirroring native `<input
+     *  type=range>.valueAsNumber`. Reading always returns a finite, clamped,
+     *  step-snapped number — even if `value` is momentarily `""` (e.g. right
+     *  after `form.reset()` restores an undeclared default) — by falling back
+     *  to the midpoint of `[min, max]`. Writing stringifies the clamped result
+     *  back into `value`. */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * `FormAssociated` provides the form plumbing; this override adds the
+     * slider's native-range sanitization at the IDL boundary so invalid direct
+     * assignments cannot briefly submit a literal `NaN`/`Infinity`.
+     */
+    get value(): string;
+    set value(next: string);
+    formResetCallback(): void;
+    /** If `value` is still unset, seed it with the sanitized default — the
+     *  midpoint of `[min, max]`, snapped to `step` — so `value`/`valueAsNumber`
+     *  and rendering never have to treat "" as a real, distinct state. */
+    private ensureValue;
+    /** Re-sanitize an already assigned value immediately after range settings change. */
+    private sanitizeCurrentValue;
+    private domain;
+    private defaultNumericValue;
+    private percentOf;
+    private clampValue;
+    private formatValue;
+    private setValue;
+    private onKeyDown;
+    private onKeyUp;
+    /** Start tracking `pointerId` as an active drag, transferring pointer
+     *  capture to `captureTarget` and wiring the shared window-level move/end
+     *  listeners. Shared by a pointerdown that starts on the thumb itself and
+     *  one that starts elsewhere on the track (see `onBasePointerDown`), so
+     *  both gestures continue identically from here on. */
+    private beginDrag;
+    private onPointerDown;
+    /** A pointerdown anywhere on `[part="base"]` other than the thumb itself
+     *  (the vast majority of the control's clickable area) jumps the thumb to
+     *  that point and continues the same gesture as a drag, mirroring native
+     *  `<input type=range>` click-to-seek. A pointerdown that started on the
+     *  thumb bubbles up to this same listener too — already fully handled by
+     *  `onPointerDown` above, so it's ignored here via the `e.target === thumb`
+     *  check. Unlike the two-handle `lyra-time-range` (where a track click is
+     *  ambiguous about which handle should move), a single thumb has no such
+     *  ambiguity. */
+    private onBasePointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
+    private endDrag;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-slider': LyraSlider;
+    }
+}
+export {};

package/dist/components/slider/slider.js

@@ -0,0 +1,467 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { FormAssociated } from '../../internal/form-associated.js';
+import { defineElement } from '../../internal/prefix.js';
+import { isRtl } from '../../internal/rtl.js';
+import { finiteNumber, finiteRange } from '../../internal/numbers.js';
+import { styles } from './slider.styles.js';
+/** PageUp/PageDown move by a larger increment than a single Arrow step,
+ *  matching the WAI-ARIA APG slider pattern's expected keyboard interactions
+ *  (and native `<input type=range>`). Mirrors lyra-time-range's identical
+ *  constant. */
+const PAGE_STEP_MULTIPLIER = 10;
+function isArrowKey(key) {
+    return key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowDown';
+}
+/** Keys that onKeyDown acts on and onKeyUp commits after. */
+function isSliderKey(key) {
+    return isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageUp' || key === 'PageDown';
+}
+/** Number of decimal places implied by `n`, including exponent notation.
+ *  `0.1` -> 1, `5` -> 0, and `1e-7` -> 7. Used to round a stepped value back
+ *  to the precision `step` itself implies, instead of leaving binary
+ *  floating-point noise in place. */
+function decimalPlaces(n) {
+    if (!Number.isFinite(n) || n === 0)
+        return 0;
+    const [mantissa, exponentText] = n.toExponential().split('e');
+    const mantissaPlaces = mantissa.includes('.') ? mantissa.length - mantissa.indexOf('.') - 1 : 0;
+    return Math.max(0, mantissaPlaces - Number(exponentText));
+}
+/**
+ * `<lyra-slider>` — a numeric range control (e.g. an LLM "temperature"
+ * setting), form-associated. Mirrors native `<input type="range">`
+ * semantics: `value` is the string form-submitted via `FormAssociated`,
+ * `valueAsNumber` is the ergonomic numeric accessor (mirroring the native
+ * `<input type=range>` IDL attribute of the same name) kept in sync with it
+ * in both directions — reads parse `value`, writes stringify back to it.
+ *
+ * Unlike the mixin's other consumers, an unset `value` is eagerly defaulted
+ * — on connect, and again after `form.reset()` — to the midpoint of
+ * `[min, max]` snapped to `step`, the same "range sanitization algorithm"
+ * default a native range input applies. A slider always represents *some*
+ * number, so `required` (inherited from `FormAssociated`) only has a window
+ * to block submission before that default lands, matching how `required`
+ * isn't a meaningful constraint on a native range input either.
+ *
+ * Clicking anywhere on the track (not just the 16px thumb) jumps the thumb
+ * to that point and continues the same gesture as a drag, matching native
+ * `<input type=range>` click-to-seek.
+ *
+ * @customElement lyra-slider
+ * @event lyra-input - Fired continuously during an active drag or a
+ *   keyboard step (including OS key-repeat while a key is held), mirroring
+ *   native `<input type=range>`'s own `input` event. `detail: { value: number }`.
+ * @event lyra-change - Fired once an interaction commits: on pointerup for a
+ *   drag, or on keyup for a keyboard step — so a single Arrow/Home/End/
+ *   PageUp/PageDown press fires both `lyra-input` and `lyra-change`,
+ *   mirroring how native `<input type=range>` fires `change` on every
+ *   committed step too. `detail: { value: number }`.
+ * @csspart base - The row wrapping the track and the optional value readout.
+ * @csspart track - The full-width background line.
+ * @csspart fill - The filled portion of the track from `min` up to the current value.
+ * @csspart thumb - The draggable handle (`role="slider"`).
+ * @csspart value - The visible numeric readout, rendered when `show-value` is true.
+ */
+export class LyraSlider extends FormAssociated(LyraElement) {
+    constructor() {
+        super(...arguments);
+        this._min = 0;
+        this._max = 100;
+        this._step = 1;
+        /** Accessible name for the slider, used when no visible label context
+         *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+         *  as `aria-label` on the interactive `role="slider"` element. A plain
+         *  `aria-label` attribute on the host itself is honored as a fallback when
+         *  this is left unset, matching `<lyra-checkbox>`/`<lyra-switch>`. */
+        this.label = '';
+        /** Whether to render the current numeric value as visible text next to
+         *  the track. Like `<lyra-markdown>`'s `sanitize`/`gfm`, this is a plain
+         *  `type: Boolean` property defaulting `true` — turn it off via the
+         *  `.showValue=${false}` property binding (a bare `show-value="false"`
+         *  content attribute is still truthy, since presence is all Lit's default
+         *  boolean converter checks). */
+        this.showValue = true;
+        // Keyed by pointerId (a Set, not a single scalar) purely for
+        // multi-touch/robustness parity with lyra-split and lyra-time-range, even
+        // though a single thumb has no per-pointer state of its own to track.
+        this.activePointers = new Set();
+        this.changedPointers = new Set();
+        this.keyboardChanged = false;
+        this.onKeyDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            const current = this.valueAsNumber;
+            // Under RTL, physical ArrowRight moves toward inset-inline-start, i.e. a
+            // lower value — swap which physical key counts as "forward", matching
+            // lyra-split/lyra-time-range's onKeyDown/onPointerMove convention.
+            // ArrowUp/ArrowDown are never swapped (direction only affects the
+            // horizontal inline axis).
+            const rtl = isRtl(this);
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            if (e.key === forwardKey || e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.keyboardChanged = this.setValue(current + this.step, false) || this.keyboardChanged;
+            }
+            else if (e.key === backwardKey || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.keyboardChanged = this.setValue(current - this.step, false) || this.keyboardChanged;
+            }
+            else if (e.key === 'PageUp') {
+                e.preventDefault();
+                this.keyboardChanged =
+                    this.setValue(current + this.step * PAGE_STEP_MULTIPLIER, false) || this.keyboardChanged;
+            }
+            else if (e.key === 'PageDown') {
+                e.preventDefault();
+                this.keyboardChanged =
+                    this.setValue(current - this.step * PAGE_STEP_MULTIPLIER, false) || this.keyboardChanged;
+            }
+            else if (e.key === 'Home') {
+                e.preventDefault();
+                this.keyboardChanged = this.setValue(this.domain().lo, false) || this.keyboardChanged;
+            }
+            else if (e.key === 'End') {
+                e.preventDefault();
+                this.keyboardChanged = this.setValue(this.domain().hi, false) || this.keyboardChanged;
+            }
+        };
+        this.onKeyUp = (e) => {
+            // Only commit on release of the keys onKeyDown acts on — releasing an
+            // unrelated key (Tab, Shift, ...) while the thumb happens to be focused
+            // must not emit a spurious lyra-change. For a single discrete press this
+            // pairs one onKeyDown (lyra-input) with one onKeyUp (lyra-change); OS
+            // key-repeat while a key is held re-fires onKeyDown (and thus
+            // lyra-input) repeatedly but still commits only once, on the eventual
+            // keyup — the same drag-like "continuous input, single final change"
+            // shape a pointer drag has.
+            if (this.effectiveDisabled || !isSliderKey(e.key))
+                return;
+            if (this.keyboardChanged) {
+                this.emit('lyra-change', { value: this.valueAsNumber });
+                this.keyboardChanged = false;
+            }
+        };
+        this.onPointerDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            this.beginDrag(e.pointerId, e.target);
+        };
+        /** A pointerdown anywhere on `[part="base"]` other than the thumb itself
+         *  (the vast majority of the control's clickable area) jumps the thumb to
+         *  that point and continues the same gesture as a drag, mirroring native
+         *  `<input type=range>` click-to-seek. A pointerdown that started on the
+         *  thumb bubbles up to this same listener too — already fully handled by
+         *  `onPointerDown` above, so it's ignored here via the `e.target === thumb`
+         *  check. Unlike the two-handle `lyra-time-range` (where a track click is
+         *  ambiguous about which handle should move), a single thumb has no such
+         *  ambiguity. */
+        this.onBasePointerDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            const thumb = this.renderRoot.querySelector('[part="thumb"]');
+            if (!thumb || e.target === thumb)
+                return;
+            const track = this.renderRoot.querySelector('[part="track"]');
+            if (!track)
+                return;
+            const rect = track.getBoundingClientRect();
+            const raw = rect.width === 0 ? 0 : (e.clientX - rect.left) / rect.width;
+            // Mirrors onPointerMove's own RTL handling below.
+            const ratio = Math.min(1, Math.max(0, isRtl(this) ? 1 - raw : raw));
+            const { lo, hi } = this.domain();
+            if (this.setValue(lo + ratio * (hi - lo), false))
+                this.changedPointers.add(e.pointerId);
+            this.beginDrag(e.pointerId, thumb);
+            // Keyboard interaction (arrow keys, Home/End, ...) can continue
+            // seamlessly right after the click, exactly as if the user had tabbed to
+            // the thumb and started dragging it directly.
+            thumb.focus();
+        };
+        this.onPointerMove = (e) => {
+            if (!this.activePointers.has(e.pointerId))
+                return;
+            if (this.effectiveDisabled) {
+                // These are window-level listeners driven by setPointerCapture, so
+                // they keep firing for this pointerId regardless of the `disabled`
+                // reflection — a drag already in progress would otherwise keep
+                // mutating `value` (and emitting lyra-input) after `disabled` flips
+                // true mid-drag. Abort the drag instead of continuing to process it.
+                this.endDrag(e.pointerId, false);
+                return;
+            }
+            const track = this.renderRoot.querySelector('[part="track"]');
+            if (!track)
+                return;
+            const rect = track.getBoundingClientRect();
+            const raw = rect.width === 0 ? 0 : (e.clientX - rect.left) / rect.width;
+            // The track is positioned with inset-inline-start (0% at the visual
+            // right edge under RTL), so the pointer ratio has to mirror that or a
+            // rightward drag would move the thumb the wrong way.
+            const ratio = Math.min(1, Math.max(0, isRtl(this) ? 1 - raw : raw));
+            const { lo, hi } = this.domain();
+            if (this.setValue(lo + ratio * (hi - lo), false))
+                this.changedPointers.add(e.pointerId);
+        };
+        this.onPointerUp = (e) => {
+            this.endDrag(e.pointerId, true);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    // These accessors sanitize the live value synchronously when a range
+    // setting changes. Keeping the properties `noAccessor` prevents Lit's
+    // default async field setter from leaving `.value`, `.valueAsNumber`, and
+    // ElementInternals' form value disagreeing until the next update flush.
+    static { this.properties = {
+        min: { type: Number, noAccessor: true },
+        max: { type: Number, noAccessor: true },
+        step: { type: Number, noAccessor: true },
+    }; }
+    get min() {
+        return this._min;
+    }
+    set min(next) {
+        const old = this._min;
+        this._min = finiteNumber(next, 0);
+        this.requestUpdate('min', old);
+        this.sanitizeCurrentValue();
+    }
+    get max() {
+        return this._max;
+    }
+    set max(next) {
+        const old = this._max;
+        this._max = finiteNumber(next, 100);
+        this.requestUpdate('max', old);
+        this.sanitizeCurrentValue();
+    }
+    get step() {
+        return this._step;
+    }
+    set step(next) {
+        const old = this._step;
+        // A zero/negative step is retained as an explicit "unstepped" mode;
+        // invalid/non-finite input follows the same safe path without poisoning
+        // the current value with NaN.
+        this._step = finiteRange(next, 0, 0);
+        this.requestUpdate('step', old);
+        this.sanitizeCurrentValue();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.pendingValue !== undefined) {
+            const pending = this.pendingValue;
+            this.pendingValue = undefined;
+            this.value = pending;
+        }
+        else {
+            this.ensureValue();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Mirror lyra-split/lyra-time-range's cleanup: if the element is removed
+        // mid-drag (or a pointercancel/alt-tab means pointerup never reaches
+        // `window`), these window-level listeners would otherwise leak.
+        this.activePointers.clear();
+        this.changedPointers.clear();
+        this.keyboardChanged = false;
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('pointercancel', this.onPointerUp);
+        window.removeEventListener('lostpointercapture', this.onPointerUp);
+    }
+    /** The numeric counterpart of `value`, mirroring native `<input
+     *  type=range>.valueAsNumber`. Reading always returns a finite, clamped,
+     *  step-snapped number — even if `value` is momentarily `""` (e.g. right
+     *  after `form.reset()` restores an undeclared default) — by falling back
+     *  to the midpoint of `[min, max]`. Writing stringifies the clamped result
+     *  back into `value`. */
+    get valueAsNumber() {
+        if (super.value === '')
+            return this.defaultNumericValue();
+        const n = Number(super.value);
+        return Number.isFinite(n) ? this.clampValue(n) : this.defaultNumericValue();
+    }
+    set valueAsNumber(next) {
+        this.value = String(Number.isFinite(next) ? this.clampValue(next) : this.defaultNumericValue());
+    }
+    /**
+     * `FormAssociated` provides the form plumbing; this override adds the
+     * slider's native-range sanitization at the IDL boundary so invalid direct
+     * assignments cannot briefly submit a literal `NaN`/`Infinity`.
+     */
+    get value() {
+        return super.value;
+    }
+    set value(next) {
+        const raw = next ?? '';
+        if (!this.isConnected) {
+            this.pendingValue = raw;
+            super.value = raw;
+            return;
+        }
+        const numeric = Number(raw);
+        const sanitized = raw === '' || !Number.isFinite(numeric) ? this.defaultNumericValue() : this.clampValue(numeric);
+        super.value = String(sanitized);
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this.value = String(this.valueAsNumber);
+    }
+    /** If `value` is still unset, seed it with the sanitized default — the
+     *  midpoint of `[min, max]`, snapped to `step` — so `value`/`valueAsNumber`
+     *  and rendering never have to treat "" as a real, distinct state. */
+    ensureValue() {
+        if (this.value === '')
+            this.value = String(this.defaultNumericValue());
+    }
+    /** Re-sanitize an already assigned value immediately after range settings change. */
+    sanitizeCurrentValue() {
+        if (!this.isConnected)
+            return;
+        const current = super.value;
+        if (current === '')
+            return;
+        const sanitized = String(this.clampValue(Number(current)));
+        if (sanitized !== current)
+            this.value = sanitized;
+    }
+    domain() {
+        // A caller-supplied min/max that fails Number attribute conversion
+        // arrives here as NaN, and a literal `min="Infinity"`/`max="Infinity"`
+        // arrives as +-Infinity; `isNaN(...)` alone only catches the former, so
+        // test finiteness instead -- otherwise Infinity propagates into every
+        // clampValue()/percentOf() caller (e.g. the midpoint default computing
+        // `0 + Infinity / 2`).
+        const min = finiteNumber(this.min, 0);
+        const max = finiteNumber(this.max, 100);
+        return { lo: Math.min(min, max), hi: Math.max(min, max) };
+    }
+    defaultNumericValue() {
+        const { lo, hi } = this.domain();
+        return this.clampValue(lo + (hi - lo) / 2);
+    }
+    percentOf(value) {
+        const { lo, hi } = this.domain();
+        const safeValue = finiteRange(value, lo, lo, hi);
+        const span = hi - lo || 1;
+        return ((safeValue - lo) / span) * 100;
+    }
+    clampValue(raw) {
+        const { lo, hi } = this.domain();
+        // A NaN/Infinity `raw` (e.g. `valueAsNumber = NaN`, or a `value` string
+        // that fails Number conversion) would otherwise propagate straight
+        // through the Math.round/Math.max/Math.min calls below and poison the
+        // submitted FormAssociated value with the literal "NaN"/"Infinity" —
+        // resolve it to a real, finite, in-domain number instead.
+        raw = finiteNumber(raw, lo);
+        // A non-positive or non-finite step would otherwise divide by zero/NaN
+        // below; treat it as "unstepped" instead of propagating NaN.
+        const step = finiteRange(this.step, 0, 0);
+        const hasStep = step > 0;
+        let stepped = raw;
+        if (hasStep) {
+            // Anchor the step grid at the domain's own `lo` (matching native
+            // `<input type=range>`) instead of absolute 0, and round back to
+            // `step`'s own decimal precision so repeated steps land on exact
+            // values like 0.7 instead of 0.7000000000000001.
+            const stepsFromLo = Math.round((raw - lo) / step);
+            const factor = 10 ** decimalPlaces(step);
+            stepped = Math.round((lo + stepsFromLo * step) * factor) / factor;
+        }
+        return Math.min(hi, Math.max(lo, stepped));
+    }
+    formatValue(v) {
+        return String(v);
+    }
+    setValue(raw, commit) {
+        const previous = this.valueAsNumber;
+        const clamped = this.clampValue(raw);
+        if (clamped === previous)
+            return false;
+        this.value = String(clamped);
+        this.emit('lyra-input', { value: clamped });
+        if (commit)
+            this.emit('lyra-change', { value: clamped });
+        return true;
+    }
+    /** Start tracking `pointerId` as an active drag, transferring pointer
+     *  capture to `captureTarget` and wiring the shared window-level move/end
+     *  listeners. Shared by a pointerdown that starts on the thumb itself and
+     *  one that starts elsewhere on the track (see `onBasePointerDown`), so
+     *  both gestures continue identically from here on. */
+    beginDrag(pointerId, captureTarget) {
+        this.activePointers.add(pointerId);
+        this.changedPointers.delete(pointerId);
+        captureTarget.setPointerCapture(pointerId);
+        window.addEventListener('pointermove', this.onPointerMove);
+        window.addEventListener('pointerup', this.onPointerUp);
+        // A drag can end without a pointerup: a system gesture / palm rejection
+        // can fire `pointercancel`, and losing capture (e.g. element removed)
+        // fires `lostpointercapture` — both need the same teardown as pointerup.
+        window.addEventListener('pointercancel', this.onPointerUp);
+        window.addEventListener('lostpointercapture', this.onPointerUp);
+    }
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
+    endDrag(pointerId, commit) {
+        if (!this.activePointers.has(pointerId))
+            return;
+        this.activePointers.delete(pointerId);
+        const changed = this.changedPointers.delete(pointerId);
+        if (commit && changed)
+            this.emit('lyra-change', { value: this.valueAsNumber });
+        // Only the last concurrent drag to end tears down the shared window
+        // listeners — an overlapping second pointer may still be down.
+        if (this.activePointers.size === 0) {
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+            window.removeEventListener('pointercancel', this.onPointerUp);
+            window.removeEventListener('lostpointercapture', this.onPointerUp);
+        }
+    }
+    render() {
+        const num = this.valueAsNumber;
+        const pct = this.percentOf(num);
+        const text = this.formatValue(num);
+        const { lo, hi } = this.domain();
+        const ariaLabel = this.label || this.getAttribute('aria-label') || nothing;
+        return html `
+      <div part="base" @pointerdown=${this.onBasePointerDown}>
+        <div part="track"></div>
+        <div part="fill" style=${`inline-size:${pct}%`}></div>
+        <div
+          part="thumb"
+          role="slider"
+          tabindex=${this.effectiveDisabled ? '-1' : '0'}
+          aria-valuemin=${lo}
+          aria-valuemax=${hi}
+          aria-valuenow=${num}
+          aria-valuetext=${text}
+          aria-label=${ariaLabel}
+          aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
+          style=${`inset-inline-start:${pct}%`}
+          @pointerdown=${this.onPointerDown}
+          @keydown=${this.onKeyDown}
+          @keyup=${this.onKeyUp}
+        ></div>
+      </div>
+      ${this.showValue ? html `<span part="value" aria-hidden="true">${text}</span>` : nothing}
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-value' })
+], LyraSlider.prototype, "showValue", void 0);
+defineElement('slider', LyraSlider);

package/dist/components/slider/slider.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;