@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/model-select/model-select.styles.js

@@ -0,0 +1,203 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: relative;
+    display: inline-block;
+    inline-size: 100%;
+    max-inline-size: 24rem;
+  }
+  :host(:disabled) {
+    cursor: not-allowed;
+  }
+
+  [part='form-control-label'] {
+    display: block;
+    margin-block-end: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  /* :empty never matches here -- the part always renders a literal label
+     element regardless of label content -- so real emptiness is tracked via
+     the label property length and reflected through the hidden attribute
+     instead (same fix as lyra-select's own form-control-label). */
+  [part='form-control-label'][hidden] {
+    display: none;
+  }
+
+  [part='trigger'],
+  [part='combobox'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    box-sizing: border-box;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font: inherit;
+  }
+  [part='trigger'] {
+    cursor: pointer;
+    text-align: start;
+  }
+  [part='combobox'] {
+    cursor: text;
+  }
+  [part='trigger']:focus-visible,
+  [part='combobox']:focus-within {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([open]) [part='trigger'] {
+    border-color: var(--lyra-color-brand);
+  }
+  :host(:disabled) [part='trigger'],
+  :host(:disabled) [part='combobox'] {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  [part='provider-badge'] {
+    flex: 0 0 auto;
+    padding-inline-end: var(--lyra-space-xs);
+    margin-inline-end: var(--lyra-space-xs);
+    border-inline-end: 1px solid var(--lyra-color-border);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+    white-space: nowrap;
+  }
+
+  .trigger-label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .trigger-label[data-placeholder] {
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='combobox-input'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part='expand-icon'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lyra-color-text-quiet);
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    line-height: 1;
+  }
+  [part='expand-icon'] svg {
+    transform: rotate(90deg);
+  }
+
+  [part='listbox'] {
+    position: fixed;
+    z-index: 900;
+    box-sizing: border-box;
+    max-block-size: 18rem;
+    overflow-y: auto;
+    inline-size: max-content;
+    min-inline-size: 12rem;
+    max-inline-size: min(92vw, 28rem);
+    padding: var(--lyra-space-xs);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    /* Closed state: invisible + slightly raised. visibility (not
+       display:none) so opacity/transform can actually transition; hit-testing
+       and a11y exposure stay off since this part is already position:fixed. */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
+  }
+  :host([open]) [part='listbox'] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='listbox'] {
+      transition: none !important;
+    }
+  }
+
+  [part='option'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid transparent;
+    border-radius: var(--lyra-radius);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='option']:hover,
+  [part='option'][data-active] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='option'][aria-selected='true'] {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+    font-weight: 600;
+  }
+  [part='option-label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Stale-value row: a previously-saved value that no longer appears in the
+     catalog. Marked with a dashed border + italic label (instead of the
+     solid border every real row uses) so it visually reads as "remembered,
+     not offered" rather than a normal selectable catalog entry. */
+  [part='option'][data-synthetic] {
+    border-style: dashed;
+    border-color: var(--lyra-color-border);
+  }
+  [part='option'][data-synthetic] [part='option-label'] {
+    font-style: italic;
+  }
+  [part='option-badge'] {
+    flex: 0 0 auto;
+    font-size: 0.6875rem;
+    font-style: normal;
+    font-weight: 400;
+    color: var(--lyra-color-text-quiet);
+    white-space: nowrap;
+  }
+
+  .empty {
+    padding: var(--lyra-space-m);
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+  }
+`;

package/dist/components/model-settings-panel/model-settings-panel.d.ts

@@ -0,0 +1,93 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import type { LyraModelCatalog } from '../model-select/model-select.js';
+import '../model-select/model-select.js';
+import '../slider/slider.js';
+export type ModelSettingsPanelLayout = 'vertical' | 'compact';
+/** The full current settings shape, re-emitted on every `lyra-change`
+ *  regardless of which child control actually triggered it. */
+export interface ModelSettingsChangeDetail {
+    modelValue: string;
+    inCatalog: boolean;
+    temperature: number;
+}
+/**
+ * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
+ * and `<lyra-slider>` into one agent-configuration card: pick a provider's
+ * model, then tune its sampling temperature. Not a generic layout shell (no
+ * slots) — it exists so a consumer doesn't have to re-wire the same two
+ * child `lyra-change` events into one combined settings object by hand every
+ * time this pairing comes up.
+ *
+ * Every prop here is a plain pass-through to (or mirror of) the matching
+ * child control's own prop of the same/similar name; see the child
+ * components themselves for the exact semantics of `catalog`/`allowCustom`
+ * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
+ *
+ * The panel's own `temperature` readout mirrors the slider's *live* value —
+ * updated on every `lyra-input` (drag/key-repeat), not just the committed
+ * `lyra-change` — and is re-clamped into `[temperatureMin, temperatureMax]`
+ * (snapped to `temperatureStep`) whenever those three properties change, so
+ * it can never drift from what the nested `lyra-slider` itself shows.
+ *
+ * @customElement lyra-model-settings-panel
+ * @event lyra-change - Either child control changed. `detail: { modelValue: string; inCatalog: boolean; temperature: number }` — always the full current settings, not just whatever changed.
+ * @csspart base - The outermost wrapping container.
+ * @csspart model-row - The row wrapping the internal `lyra-model-select`.
+ * @csspart temperature-row - The row wrapping the temperature label/slider/value.
+ * @csspart temperature-label - The visible "Temperature" caption.
+ * @csspart temperature-value - The visible current temperature readout.
+ */
+export declare class LyraModelSettingsPanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Informational provider badge, passed straight through to the internal `lyra-model-select`. */
+    provider: string;
+    /** The model list, passed straight through to the internal `lyra-model-select`. */
+    catalog?: LyraModelCatalog;
+    /** The current model id. */
+    modelValue: string;
+    /** Let the model control accept a value outside `catalog`; passed straight through. */
+    allowCustom: boolean;
+    /** The current sampling temperature. */
+    temperature: number;
+    temperatureMin: number;
+    temperatureMax: number;
+    temperatureStep: number;
+    /** `vertical` stacks full-width rows with visible labels; `compact` runs
+     *  the same two rows side by side with a smaller temperature caption, for
+     *  toolbars/sidebars where the vertical layout's height doesn't fit. */
+    layout: ModelSettingsPanelLayout;
+    /** Disables the panel as a unit by forwarding to both the internal
+     *  `lyra-model-select` and `lyra-slider` — a wrapping `<fieldset disabled>`
+     *  alone would not reach either, since a form-associated control's own
+     *  `disabled` IDL property/attribute is never mutated by fieldset cascading. */
+    disabled: boolean;
+    /** Whether `modelValue` is present in `catalog` — recomputed fresh from
+     *  scratch (like `lyra-model-select`'s own `effectiveEntries`) rather than
+     *  cached from the last child event, so it's still correct when
+     *  `modelValue` was assigned directly instead of via the child's own
+     *  `lyra-change`. */
+    private get inCatalog();
+    /** Clamps `raw` into `[temperatureMin, temperatureMax]`, snapped to
+     *  `temperatureStep`'s grid anchored at the low end -- exactly mirroring
+     *  `lyra-slider`'s own private `clampValue`/`domain` math -- so the
+     *  mirrored `temperature` readout can never disagree with what the nested
+     *  slider itself would clamp the same raw number to. */
+    private clampTemperature;
+    private emitChange;
+    private onModelChange;
+    private onTemperatureChange;
+    /** Mirrors the slider's *live* (uncommitted) value into the panel's own
+     *  `temperature` readout -- display only, no `emitChange()` -- mirroring
+     *  native `input` (continuous) vs. `change` (committed) semantics so the
+     *  readout tracks an in-progress drag/key-repeat instead of only updating
+     *  once the interaction commits. */
+    private onTemperatureInput;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-model-settings-panel': LyraModelSettingsPanel;
+    }
+}

package/dist/components/model-settings-panel/model-settings-panel.js

@@ -0,0 +1,209 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { finiteNumber, finiteRange } from '../../internal/numbers.js';
+import { styles } from './model-settings-panel.styles.js';
+import '../model-select/model-select.js';
+import '../slider/slider.js';
+const DEFAULT_TEMPERATURE_MIN = 0;
+const DEFAULT_TEMPERATURE_MAX = 2;
+const DEFAULT_TEMPERATURE_STEP = 0.1;
+// Midpoint of the default [0, 2] range -- a reasonable provider-agnostic
+// starting point. Reassign `temperature` yourself if your provider's own
+// default differs (OpenAI and Anthropic both default to 1, which this matches).
+const DEFAULT_TEMPERATURE = 1;
+/** Number of decimal digits in `n`'s shortest string representation, e.g.
+ *  `0.1` -> 1, `5` -> 0. Mirrors lyra-slider's identical helper so the
+ *  panel's own re-clamping of `temperature` lands on the exact same
+ *  step-grid values the nested slider itself would compute. */
+function decimalPlaces(n) {
+    const str = n.toString();
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
+/**
+ * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
+ * and `<lyra-slider>` into one agent-configuration card: pick a provider's
+ * model, then tune its sampling temperature. Not a generic layout shell (no
+ * slots) — it exists so a consumer doesn't have to re-wire the same two
+ * child `lyra-change` events into one combined settings object by hand every
+ * time this pairing comes up.
+ *
+ * Every prop here is a plain pass-through to (or mirror of) the matching
+ * child control's own prop of the same/similar name; see the child
+ * components themselves for the exact semantics of `catalog`/`allowCustom`
+ * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
+ *
+ * The panel's own `temperature` readout mirrors the slider's *live* value —
+ * updated on every `lyra-input` (drag/key-repeat), not just the committed
+ * `lyra-change` — and is re-clamped into `[temperatureMin, temperatureMax]`
+ * (snapped to `temperatureStep`) whenever those three properties change, so
+ * it can never drift from what the nested `lyra-slider` itself shows.
+ *
+ * @customElement lyra-model-settings-panel
+ * @event lyra-change - Either child control changed. `detail: { modelValue: string; inCatalog: boolean; temperature: number }` — always the full current settings, not just whatever changed.
+ * @csspart base - The outermost wrapping container.
+ * @csspart model-row - The row wrapping the internal `lyra-model-select`.
+ * @csspart temperature-row - The row wrapping the temperature label/slider/value.
+ * @csspart temperature-label - The visible "Temperature" caption.
+ * @csspart temperature-value - The visible current temperature readout.
+ */
+export class LyraModelSettingsPanel extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Informational provider badge, passed straight through to the internal `lyra-model-select`. */
+        this.provider = '';
+        /** The current model id. */
+        this.modelValue = '';
+        /** Let the model control accept a value outside `catalog`; passed straight through. */
+        this.allowCustom = false;
+        /** The current sampling temperature. */
+        this.temperature = DEFAULT_TEMPERATURE;
+        this.temperatureMin = DEFAULT_TEMPERATURE_MIN;
+        this.temperatureMax = DEFAULT_TEMPERATURE_MAX;
+        this.temperatureStep = DEFAULT_TEMPERATURE_STEP;
+        /** `vertical` stacks full-width rows with visible labels; `compact` runs
+         *  the same two rows side by side with a smaller temperature caption, for
+         *  toolbars/sidebars where the vertical layout's height doesn't fit. */
+        this.layout = 'vertical';
+        /** Disables the panel as a unit by forwarding to both the internal
+         *  `lyra-model-select` and `lyra-slider` — a wrapping `<fieldset disabled>`
+         *  alone would not reach either, since a form-associated control's own
+         *  `disabled` IDL property/attribute is never mutated by fieldset cascading. */
+        this.disabled = false;
+        this.onModelChange = (e) => {
+            this.modelValue = e.detail.value;
+            this.emitChange();
+        };
+        this.onTemperatureChange = (e) => {
+            this.temperature = e.detail.value;
+            this.emitChange();
+        };
+        /** Mirrors the slider's *live* (uncommitted) value into the panel's own
+         *  `temperature` readout -- display only, no `emitChange()` -- mirroring
+         *  native `input` (continuous) vs. `change` (committed) semantics so the
+         *  readout tracks an in-progress drag/key-repeat instead of only updating
+         *  once the interaction commits. */
+        this.onTemperatureInput = (e) => {
+            this.temperature = e.detail.value;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** Whether `modelValue` is present in `catalog` — recomputed fresh from
+     *  scratch (like `lyra-model-select`'s own `effectiveEntries`) rather than
+     *  cached from the last child event, so it's still correct when
+     *  `modelValue` was assigned directly instead of via the child's own
+     *  `lyra-change`. */
+    get inCatalog() {
+        const catalog = this.catalog;
+        if (!catalog || catalog.length === 0)
+            return false;
+        return catalog.some((entry) => (typeof entry === 'string' ? entry === this.modelValue : entry.id === this.modelValue));
+    }
+    /** Clamps `raw` into `[temperatureMin, temperatureMax]`, snapped to
+     *  `temperatureStep`'s grid anchored at the low end -- exactly mirroring
+     *  `lyra-slider`'s own private `clampValue`/`domain` math -- so the
+     *  mirrored `temperature` readout can never disagree with what the nested
+     *  slider itself would clamp the same raw number to. */
+    clampTemperature(raw) {
+        const rawMin = this.temperatureMin;
+        const rawMax = this.temperatureMax;
+        const min = finiteNumber(rawMin, DEFAULT_TEMPERATURE_MIN);
+        const max = finiteNumber(rawMax, DEFAULT_TEMPERATURE_MAX);
+        const lo = Math.min(min, max);
+        const hi = Math.max(min, max);
+        const step = finiteRange(this.temperatureStep, 0, 0);
+        const hasStep = step > 0;
+        let stepped = finiteNumber(raw, lo);
+        if (hasStep) {
+            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));
+    }
+    emitChange() {
+        this.emit('lyra-change', {
+            modelValue: this.modelValue,
+            inCatalog: this.inCatalog,
+            temperature: this.temperature,
+        });
+    }
+    willUpdate(changed) {
+        if (changed.has('temperatureMin') || changed.has('temperatureMax') || changed.has('temperatureStep')) {
+            const clamped = this.clampTemperature(this.temperature);
+            if (clamped !== this.temperature)
+                this.temperature = clamped;
+        }
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="model-row">
+          <lyra-model-select
+            .provider=${this.provider}
+            .catalog=${this.catalog}
+            .value=${this.modelValue}
+            .allowCustom=${this.allowCustom}
+            .disabled=${this.disabled}
+            placeholder="Select a model…"
+            @lyra-change=${this.onModelChange}
+          ></lyra-model-select>
+        </div>
+        <div part="temperature-row">
+          <span part="temperature-label">Temperature</span>
+          <lyra-slider
+            .label=${'Temperature'}
+            .min=${this.temperatureMin}
+            .max=${this.temperatureMax}
+            .step=${this.temperatureStep}
+            .valueAsNumber=${this.temperature}
+            .showValue=${false}
+            .disabled=${this.disabled}
+            @lyra-input=${this.onTemperatureInput}
+            @lyra-change=${this.onTemperatureChange}
+          ></lyra-slider>
+          <span part="temperature-value" aria-hidden="true">${this.temperature}</span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraModelSettingsPanel.prototype, "provider", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraModelSettingsPanel.prototype, "catalog", void 0);
+__decorate([
+    property({ attribute: 'model-value' })
+], LyraModelSettingsPanel.prototype, "modelValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-custom' })
+], LyraModelSettingsPanel.prototype, "allowCustom", void 0);
+__decorate([
+    property({ type: Number })
+], LyraModelSettingsPanel.prototype, "temperature", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-min' })
+], LyraModelSettingsPanel.prototype, "temperatureMin", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-max' })
+], LyraModelSettingsPanel.prototype, "temperatureMax", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-step' })
+], LyraModelSettingsPanel.prototype, "temperatureStep", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraModelSettingsPanel.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSettingsPanel.prototype, "disabled", void 0);
+defineElement('model-settings-panel', LyraModelSettingsPanel);

package/dist/components/model-settings-panel/model-settings-panel.styles.d.ts

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

package/dist/components/model-settings-panel/model-settings-panel.styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 28rem;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-l);
+    box-sizing: border-box;
+    padding: var(--lyra-space-l);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+
+  [part='model-row'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    min-inline-size: 0;
+  }
+  /* The nested control's own max-inline-size (24rem, sized for a standalone
+     dropdown) would otherwise clip a full-width row inside this card. */
+  [part='model-row'] lyra-model-select {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+
+  [part='temperature-row'] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    min-inline-size: 0;
+  }
+  [part='temperature-row'] lyra-slider {
+    min-inline-size: 0;
+  }
+  [part='temperature-label'] {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--lyra-color-text);
+    white-space: nowrap;
+  }
+  [part='temperature-value'] {
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 2.5ch;
+    text-align: end;
+  }
+
+  /* Compact layout: the two rows sit side by side instead of stacked, and
+     the temperature caption shrinks to an uppercase micro-label -- a denser
+     treatment for toolbars/sidebars where the vertical layout's full-height
+     rows don't fit. */
+  :host([layout='compact']) {
+    max-inline-size: none;
+  }
+  :host([layout='compact']) [part='base'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--lyra-space-m);
+    padding: var(--lyra-space-m);
+  }
+  :host([layout='compact']) [part='model-row'],
+  :host([layout='compact']) [part='temperature-row'] {
+    flex: 1 1 12rem;
+    min-inline-size: 10rem;
+  }
+  :host([layout='compact']) [part='temperature-label'] {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+`;

package/dist/components/playback/playback.d.ts

@@ -9,14 +9,25 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @event lyra-play - Fired when playback starts.
  * @event lyra-pause - Fired when playback stops (including auto-pause).
  * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
- * @csspart base, play-button, slider
+ * @csspart base - The playback controls wrapper.
+ * @csspart play-button - The play/pause button.
+ * @csspart slider - The playback position slider.
  */
 export declare class LyraPlayback extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        playing: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+        };
+    };
     length: number;
     index: number;
     intervalMs: number;
-    playing: boolean;
     loop: boolean;
     /**
      * Re-declared as a Lit reactive property (shadowing the inherited plain
@@ -27,7 +38,12 @@ export declare class LyraPlayback extends LyraElement {
      */
     hidden: boolean;
     private timer?;
-    /** Largest index reachable at the current `length` (never negative). */
+    private _playing;
+    get playing(): boolean;
+    set playing(next: boolean);
+    /** Largest index reachable at the current `length` (never negative, and
+     * never NaN — a non-finite `length` falls back to 0 rather than leaking a
+     * literal "NaN" into the rendered slider's `max` attribute). */
     private get maxIndex();
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;