@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/slider/slider.js

@@ -10,6 +10,7 @@ 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
@@ -23,15 +24,16 @@ function isArrowKey(key) {
 function isSliderKey(key) {
     return isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageUp' || key === 'PageDown';
 }
-/** Number of decimal digits in `n`'s shortest string representation, e.g.
- *  `0.1` -> 1, `5` -> 0. Used to round a stepped value back to the precision
- *  `step` itself implies, instead of leaving binary floating-point noise in
- *  place (e.g. `20.200000000000003`). Mirrors lyra-time-range's identical
- *  helper. */
+/** 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) {
-    const str = n.toString();
-    const dot = str.indexOf('.');
-    return dot === -1 ? 0 : str.length - dot - 1;
+    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"
@@ -49,6 +51,10 @@ function decimalPlaces(n) {
  * 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
@@ -67,9 +73,9 @@ function decimalPlaces(n) {
 export class LyraSlider extends FormAssociated(LyraElement) {
     constructor() {
         super(...arguments);
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
+        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
@@ -87,6 +93,8 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         // 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;
@@ -101,27 +109,29 @@ export class LyraSlider extends FormAssociated(LyraElement) {
             const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
             if (e.key === forwardKey || e.key === 'ArrowUp') {
                 e.preventDefault();
-                this.setValue(current + this.step, false);
+                this.keyboardChanged = this.setValue(current + this.step, false) || this.keyboardChanged;
             }
             else if (e.key === backwardKey || e.key === 'ArrowDown') {
                 e.preventDefault();
-                this.setValue(current - this.step, false);
+                this.keyboardChanged = this.setValue(current - this.step, false) || this.keyboardChanged;
             }
             else if (e.key === 'PageUp') {
                 e.preventDefault();
-                this.setValue(current + this.step * PAGE_STEP_MULTIPLIER, false);
+                this.keyboardChanged =
+                    this.setValue(current + this.step * PAGE_STEP_MULTIPLIER, false) || this.keyboardChanged;
             }
             else if (e.key === 'PageDown') {
                 e.preventDefault();
-                this.setValue(current - this.step * PAGE_STEP_MULTIPLIER, false);
+                this.keyboardChanged =
+                    this.setValue(current - this.step * PAGE_STEP_MULTIPLIER, false) || this.keyboardChanged;
             }
             else if (e.key === 'Home') {
                 e.preventDefault();
-                this.setValue(this.domain().lo, false);
+                this.keyboardChanged = this.setValue(this.domain().lo, false) || this.keyboardChanged;
             }
             else if (e.key === 'End') {
                 e.preventDefault();
-                this.setValue(this.domain().hi, false);
+                this.keyboardChanged = this.setValue(this.domain().hi, false) || this.keyboardChanged;
             }
         };
         this.onKeyUp = (e) => {
@@ -135,20 +145,46 @@ export class LyraSlider extends FormAssociated(LyraElement) {
             // shape a pointer drag has.
             if (this.effectiveDisabled || !isSliderKey(e.key))
                 return;
-            this.emit('lyra-change', { value: this.valueAsNumber });
+            if (this.keyboardChanged) {
+                this.emit('lyra-change', { value: this.valueAsNumber });
+                this.keyboardChanged = false;
+            }
         };
         this.onPointerDown = (e) => {
             if (this.effectiveDisabled)
                 return;
-            this.activePointers.add(e.pointerId);
-            e.target.setPointerCapture(e.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);
+            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))
@@ -172,16 +208,63 @@ export class LyraSlider extends FormAssociated(LyraElement) {
             // 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();
-            this.setValue(lo + ratio * (hi - lo), false);
+            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();
-        this.ensureValue();
+        if (this.pendingValue !== undefined) {
+            const pending = this.pendingValue;
+            this.pendingValue = undefined;
+            this.value = pending;
+        }
+        else {
+            this.ensureValue();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -189,6 +272,8 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         // 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);
@@ -201,13 +286,36 @@ export class LyraSlider extends FormAssociated(LyraElement) {
      *  to the midpoint of `[min, max]`. Writing stringifies the clamped result
      *  back into `value`. */
     get valueAsNumber() {
-        if (this.value === '')
+        if (super.value === '')
             return this.defaultNumericValue();
-        const n = Number(this.value);
+        const n = Number(super.value);
         return Number.isFinite(n) ? this.clampValue(n) : this.defaultNumericValue();
     }
     set valueAsNumber(next) {
-        this.value = String(this.clampValue(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`
@@ -216,12 +324,26 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         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; fall back to this property's own default rather
-        // than propagating NaN into every clampValue()/percentOf() caller.
-        const min = isNaN(this.min) ? 0 : this.min;
-        const max = isNaN(this.max) ? 100 : this.max;
+        // 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() {
@@ -229,26 +351,32 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         return this.clampValue(lo + (hi - lo) / 2);
     }
     percentOf(value) {
-        if (isNaN(value))
-            return 0;
         const { lo, hi } = this.domain();
+        const safeValue = finiteRange(value, lo, lo, hi);
         const span = hi - lo || 1;
-        return ((value - lo) / span) * 100;
+        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 hasStep = Number.isFinite(this.step) && this.step > 0;
+        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) / this.step);
-            const factor = 10 ** decimalPlaces(this.step);
-            stepped = Math.round((lo + stepsFromLo * this.step) * factor) / factor;
+            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));
     }
@@ -256,18 +384,40 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         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);
-        if (commit)
+        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.
@@ -278,32 +428,6 @@ export class LyraSlider extends FormAssociated(LyraElement) {
             window.removeEventListener('lostpointercapture', this.onPointerUp);
         }
     }
-    willUpdate(changed) {
-        // `formResetCallback` (inherited from `FormAssociated`, restoring
-        // `value` to whatever default the mixin captured — "" when no `value`
-        // attribute was ever declared) isn't part of the mixin's exported
-        // `FormAssociatedInterface` type, so it can't be overridden here with a
-        // `super` call the way `connectedCallback`/`disconnectedCallback` above
-        // are. Catching the resulting empty `value` here instead, in the same
-        // pre-render pass that already re-clamps a changed min/max/step below,
-        // covers `form.reset()` the same way `connectedCallback` covers first
-        // mount — and doing it in `willUpdate` (not `updated`) folds the fix-up
-        // into this same update cycle instead of scheduling a second one.
-        if (changed.has('value') && this.value === '') {
-            this.ensureValue();
-            return;
-        }
-        if ((changed.has('min') || changed.has('max') || changed.has('step')) && this.value !== '') {
-            // A narrowed/shifted domain (or a changed step grid) after mount must
-            // not leave `value` — and the rendered thumb position it drives —
-            // outside the current bounds or off the step grid. `min`/`max`/`step`
-            // already hold their new values by this point, so the getter itself
-            // (which clamps against the live domain) computes the corrected value.
-            const next = String(this.valueAsNumber);
-            if (next !== this.value)
-                this.value = next;
-        }
-    }
     render() {
         const num = this.valueAsNumber;
         const pct = this.percentOf(num);
@@ -311,7 +435,7 @@ export class LyraSlider extends FormAssociated(LyraElement) {
         const { lo, hi } = this.domain();
         const ariaLabel = this.label || this.getAttribute('aria-label') || nothing;
         return html `
-      <div part="base">
+      <div part="base" @pointerdown=${this.onBasePointerDown}>
         <div part="track"></div>
         <div part="fill" style=${`inline-size:${pct}%`}></div>
         <div
@@ -334,15 +458,6 @@ export class LyraSlider extends FormAssociated(LyraElement) {
     `;
     }
 }
-__decorate([
-    property({ type: Number })
-], LyraSlider.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], LyraSlider.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], LyraSlider.prototype, "step", void 0);
 __decorate([
     property()
 ], LyraSlider.prototype, "label", void 0);

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

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 export interface SourceCardExpandDetail {
     sourceId: string;
@@ -24,10 +24,12 @@ export interface SourceCardOpenDetail {
  * card's `id`/`source-id`. See the `@example` below.
  *
  * @customElement lyra-source-card
- * @slot excerpt - A short preview, always visible.
+ * @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.
+ * 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 }` —
@@ -38,7 +40,7 @@ export interface SourceCardOpenDetail {
  * viewer, etc).
  * @csspart base - The outer container.
  * @csspart title - The clickable title/page heading (`<button>`).
- * @csspart excerpt - The wrapper around the `excerpt` slot.
+ * @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.
  *
@@ -67,7 +69,12 @@ 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. */
+    /** 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. */
@@ -75,11 +82,16 @@ export declare class LyraSourceCard extends LyraElement {
     /** 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;

package/dist/components/source-card/source-card.js

@@ -26,10 +26,12 @@ import { styles } from './source-card.styles.js';
  * card's `id`/`source-id`. See the `@example` below.
  *
  * @customElement lyra-source-card
- * @slot excerpt - A short preview, always visible.
+ * @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.
+ * 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 }` —
@@ -40,7 +42,7 @@ import { styles } from './source-card.styles.js';
  * viewer, etc).
  * @csspart base - The outer container.
  * @csspart title - The clickable title/page heading (`<button>`).
- * @csspart excerpt - The wrapper around the `excerpt` slot.
+ * @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.
  *
@@ -70,17 +72,35 @@ export class LyraSourceCard extends LyraElement {
         super(...arguments);
         /** Stable identifier matching a `<lyra-citation-badge>` elsewhere on the page. */
         this.sourceId = '';
-        /** The source's display title, e.g. a filename. */
+        /** 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. */
         this.title = '';
         // See `<lyra-widget>`'s `hasActionsSlot` for the identical
         // presence-tracking convention -- a `[part]` always contains a literal
         // `<slot>` child regardless of assigned content, so CSS `:empty` never
         // matches; real emptiness is tracked in JS instead.
         this.hasFullSlot = false;
+        this.hasExcerptSlot = false;
         this.fullExpanded = false;
         this.fullId = nextId('source-card-full');
+        // Guards the `removeAttribute('title')` call in `updated()` below: removing
+        // an observed attribute fires `attributeChangedCallback` synchronously just
+        // like setting one does, and without this flag Lit would treat the removal
+        // as a fresh (empty) attribute value and reset the `title` property right
+        // back to `null`, losing the value it just finished syncing in.
+        this.stripHostTitleAttr = false;
         this.onFullSlotChange = (e) => {
-            this.hasFullSlot = e.target.assignedElements({ flatten: true }).length > 0;
+            const count = e.target.assignedElements({ flatten: true }).length;
+            this.hasFullSlot = count > 0;
+            if (count === 0)
+                this.fullExpanded = false;
+        };
+        this.onExcerptSlotChange = (e) => {
+            this.hasExcerptSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
         this.onTitleClick = () => {
             this.emit('lyra-open', { sourceId: this.sourceId, href: this.href });
@@ -94,11 +114,33 @@ export class LyraSourceCard extends LyraElement {
     willUpdate() {
         if (!this.hasUpdated) {
             this.hasFullSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'full');
+            this.hasExcerptSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'excerpt');
         }
     }
     firstUpdated() {
-        const slot = this.shadowRoot.querySelector('slot[name="full"]');
-        this.hasFullSlot = slot.assignedElements({ flatten: true }).length > 0;
+        const fullSlot = this.shadowRoot.querySelector('slot[name="full"]');
+        const fullCount = fullSlot.assignedElements({ flatten: true }).length;
+        this.hasFullSlot = fullCount > 0;
+        if (fullCount === 0)
+            this.fullExpanded = false;
+        const excerptSlot = this.shadowRoot.querySelector('slot[name="excerpt"]');
+        this.hasExcerptSlot = excerptSlot.assignedElements({ flatten: true }).length > 0;
+    }
+    attributeChangedCallback(name, old, value) {
+        if (name === 'title' && this.stripHostTitleAttr)
+            return;
+        super.attributeChangedCallback(name, old, value);
+    }
+    updated(changed) {
+        if (changed.has('title') && this.hasAttribute('title')) {
+            // The attribute has already been converted into the `title` property
+            // by this point (that's how it got here), so the DOM attribute itself
+            // is now redundant -- and, left in place, would make the whole card
+            // show a native tooltip repeating the title text on hover.
+            this.stripHostTitleAttr = true;
+            this.removeAttribute('title');
+            this.stripHostTitleAttr = false;
+        }
     }
     get titleText() {
         const base = this.title || 'Untitled source';
@@ -108,7 +150,9 @@ export class LyraSourceCard extends LyraElement {
         return html `
       <div part="base">
         <button part="title" type="button" @click=${this.onTitleClick}>${this.titleText}</button>
-        <div part="excerpt"><slot name="excerpt"></slot></div>
+        <div part="excerpt" ?hidden=${!this.hasExcerptSlot}>
+          <slot name="excerpt" @slotchange=${this.onExcerptSlotChange}></slot>
+        </div>
         ${this.hasFullSlot
             ? html `<button
               part="toggle"
@@ -142,6 +186,9 @@ __decorate([
 __decorate([
     state()
 ], LyraSourceCard.prototype, "hasFullSlot", void 0);
+__decorate([
+    state()
+], LyraSourceCard.prototype, "hasExcerptSlot", void 0);
 __decorate([
     state()
 ], LyraSourceCard.prototype, "fullExpanded", void 0);

package/dist/components/source-card/source-card.styles.js

@@ -38,7 +38,7 @@ export const styles = css `
     font-size: 0.8125rem;
     line-height: 1.4;
   }
-  [part='excerpt']:empty {
+  [part='excerpt'][hidden] {
     display: none;
   }
   [part='toggle'] {

package/dist/components/source-list/source-list.js

@@ -69,7 +69,15 @@ export class LyraSourceList extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     willUpdate() {
         if (!this.hasUpdated) {
-            this.slottedCount = this.children.length;
+            // Must count only children assigned to the *default* slot -- same rule
+            // `firstUpdated`/`onSlotChange` apply via `assignedElements()` below --
+            // otherwise a direct child carrying a foreign `slot` attribute makes
+            // this pre-count disagree with the authoritative one, which schedules
+            // a wasted second update (and Lit's dev-mode change-in-update warning).
+            // An explicit `slot=""` still assigns to the default slot per the HTML
+            // slot algorithm, so check the attribute's value rather than its mere
+            // presence.
+            this.slottedCount = Array.from(this.children).filter((el) => !el.getAttribute('slot')).length;
         }
     }
     firstUpdated() {