@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/slider/slider.js

@@ -1,467 +1,5 @@
-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';
+export * from './slider.class.js';
+import { LyraSlider } from './slider.class.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);
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=slider.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqFlB,CAAC"}

package/dist/components/slider/slider.styles.js

@@ -9,34 +9,34 @@ export const styles = css `
   [part='base'] {
     position: relative;
     flex: 1 1 auto;
-    block-size: 1.5rem;
+    block-size: var(--lyra-size-1-5rem);
   }
   [part='track'] {
     position: absolute;
     inset-inline: 0;
     inset-block-start: 50%;
-    block-size: 4px;
+    block-size: var(--lyra-size-4px);
     transform: translateY(-50%);
-    border-radius: 2px;
+    border-radius: var(--lyra-size-2px);
     background: var(--lyra-color-border);
   }
   [part='fill'] {
     position: absolute;
     inset-inline-start: 0;
     inset-block-start: 50%;
-    block-size: 4px;
+    block-size: var(--lyra-size-4px);
     transform: translateY(-50%);
-    border-radius: 2px;
+    border-radius: var(--lyra-size-2px);
     background: var(--lyra-color-brand);
   }
   [part='thumb'] {
     position: absolute;
     inset-block-start: 50%;
-    inline-size: 16px;
-    block-size: 16px;
+    inline-size: var(--lyra-size-16px);
+    block-size: var(--lyra-size-16px);
     border-radius: 50%;
     background: var(--lyra-color-brand);
-    border: 2px solid var(--lyra-color-surface);
+    border: var(--lyra-border-width-medium) solid var(--lyra-color-surface);
     box-shadow: var(--lyra-shadow);
     transform: translate(-50%, -50%);
     cursor: grab;
@@ -55,8 +55,8 @@ export const styles = css `
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--lyra-size-28px);
+    block-size: var(--lyra-size-28px);
     transform: translate(-50%, -50%);
     border-radius: 50%;
   }
@@ -69,19 +69,20 @@ export const styles = css `
   }
   [part='value'] {
     flex: 0 0 auto;
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
     /* Numeric readout ticks as the thumb moves; tabular-nums keeps its own
        inline-size stable instead of jittering the layout next to it. */
     font-variant-numeric: tabular-nums;
-    min-inline-size: 2.5ch;
+    min-inline-size: var(--lyra-size-2-5ch);
     text-align: end;
   }
-  :host([disabled]) {
+  :host(:disabled) {
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
-  :host([disabled]) [part='thumb'] {
+  :host(:disabled) [part='thumb'] {
     cursor: not-allowed;
   }
 `;
+//# sourceMappingURL=slider.styles.js.map

package/dist/components/slider/slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFxB,CAAC"}

package/dist/components/source-card/source-card.class.d.ts

@@ -0,0 +1,105 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface SourceCardExpandDetail {
+    sourceId: string;
+    expanded: boolean;
+}
+export interface SourceCardOpenDetail {
+    sourceId: string;
+    href?: string;
+}
+/**
+ * `<lyra-source-card>` — one citation/source entry, meant to be a direct
+ * light-DOM child of `<lyra-source-list>` (though it renders and functions
+ * fine standalone). Shows a title/page heading, an always-visible `excerpt`
+ * slot, and an optional `full` slot revealed behind its own independent
+ * "Show more" toggle — unrelated to the parent `<lyra-source-list>`'s own
+ * expand/collapse, which only ever hides/shows the *set* of cards, never a
+ * single card's own content.
+ *
+ * `source-id` is this card's stable identity, meant to match a
+ * `<lyra-citation-badge>` (a sibling component) elsewhere on the page. This
+ * component doesn't implement any scroll-to/highlight behavior itself — that
+ * lives at the app level, wiring a citation badge's activation event to this
+ * card's `id`/`source-id`. See the `@example` below.
+ *
+ * @customElement lyra-source-card
+ * @slot excerpt - A short preview. When left empty, the `excerpt` part
+ * collapses away entirely rather than leaving an empty gap in the card.
+ * @slot full - The complete source text/chunk, hidden behind the "Show
+ * more"/"Show less" toggle. When left empty, no toggle renders at all — a
+ * card with no `full` content simply has no expand affordance. Removing all
+ * `full`-slotted content while expanded automatically collapses it back.
+ * @event lyra-expand - The per-card "Show more"/"Show less" toggle was
+ * activated. `detail: { sourceId, expanded }`.
+ * @event lyra-open - The title was activated. `detail: { sourceId, href }` —
+ * `href` may be `undefined`. This component never navigates on its own
+ * (staying a controlled component, the same convention
+ * `<lyra-tool-call-chip>`'s `lyra-tool-chip-select` follows); a listener
+ * decides what "open" means (open `href` in a new tab, open an in-app
+ * viewer, etc).
+ * @csspart base - The outer container.
+ * @csspart title - The clickable title/page heading (`<button>`).
+ * @csspart excerpt - The wrapper around the `excerpt` slot, `hidden` when the slot has no assigned content.
+ * @csspart full - The wrapper around the `full` slot, `hidden` while collapsed.
+ * @csspart toggle - The "Show more"/"Show less" button. Only rendered when the `full` slot has content.
+ *
+ * @example
+ * ```html
+ * <lyra-source-list label-plural="2 sources">
+ *   <lyra-source-card source-id="doc-1" title="annual_report.pdf" page="12">
+ *     <span slot="excerpt">Revenue grew 12% year over year...</span>
+ *     <span slot="full">Revenue grew 12% year over year, driven primarily by...</span>
+ *   </lyra-source-card>
+ * </lyra-source-list>
+ * ```
+ * ```js
+ * // Elsewhere, a <lyra-citation-badge>'s activation handler can scroll to
+ * // and highlight the matching card -- this component needs no extra API
+ * // surface for that, only its existing source-id to be targeted by:
+ * document.addEventListener('lyra-citation-activate', (e) => {
+ *   const card = document.querySelector(`lyra-source-card[source-id="${e.detail.sourceId}"]`);
+ *   card?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ *   card?.classList.add('is-highlighted'); // consumer-defined CSS, e.g. a brief background flash
+ *   setTimeout(() => card?.classList.remove('is-highlighted'), 2000);
+ * });
+ * ```
+ */
+export declare class LyraSourceCard extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Stable identifier matching a `<lyra-citation-badge>` elsewhere on the page. */
+    sourceId: string;
+    /** The source's display title, e.g. a filename. Rendered only as the
+     *  title button's own text -- a bare host-level `title` attribute (the
+     *  browser's global tooltip attribute) is actively stripped once Lit has
+     *  synced it into this property, so the card never grows an unsolicited
+     *  native tooltip repeating the same text. See `attributeChangedCallback`
+     *  and `updated` below. */
+    title: string;
+    /** Optional page reference, e.g. `12` or `"iv"` — rendered as-is (never
+     *  parsed/validated as a number), so a non-numeric page label works too. */
+    page?: string | number;
+    /** Optional URL, echoed back (unopened) in `lyra-open`'s detail. */
+    href?: string;
+    private hasFullSlot;
+    private hasExcerptSlot;
+    private fullExpanded;
+    private readonly fullId;
+    private stripHostTitleAttr;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onFullSlotChange;
+    private onExcerptSlotChange;
+    private get titleText();
+    private onTitleClick;
+    private toggleFull;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-source-card': LyraSourceCard;
+    }
+}
+//# sourceMappingURL=source-card.class.d.ts.map