@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/streaming-text/streaming-text.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, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { Announcer } from '../../internal/announcer.js';
+import '../markdown/markdown.js';
+import { styles } from './streaming-text.styles.js';
+const DEFAULT_COALESCE_MS = 50;
+/**
+ * Lightweight, deliberately-imperfect signals that the currently-displayed
+ * text contains Markdown syntax worth routing through `<lyra-markdown>`
+ * rather than a plain `white-space: pre-wrap` node. Checked in order against
+ * the whole string; the first match short-circuits. None of these need to be
+ * airtight -- a false positive just renders ordinary prose through
+ * `<lyra-markdown>` (which renders plain prose fine); a false negative just
+ * renders literal `**`/backticks/etc. as plain text until more of the stream
+ * arrives.
+ */
+const MARKDOWN_PATTERNS = [
+    /^ {0,3}#{1,6}\s+\S/m, // ATX heading: "# Heading"
+    /```/, // fenced code block
+    /\*\*[^*\n]+\*\*/, // **bold**
+    /(?:^|[^\w])_[^_\n]+_(?:[^\w]|$)/, // _italic_
+    /`[^`\n]+`/, // inline code
+    /^ {0,3}[-*+]\s+\S/m, // bullet list item
+    /^ {0,3}\d+\.\s+\S/m, // numbered list item
+    /\[[^\]]+\]\([^)\s]+\)/, // [text](url)
+    /^ {0,3}>\s?\S/m, // blockquote
+];
+/** Runs {@link MARKDOWN_PATTERNS} against `text`, used whenever `markdown`
+ *  is left unset (auto-detect). Exported so the heuristic is directly
+ *  testable without going through the component's render cycle. */
+export function looksLikeMarkdown(text) {
+    if (!text)
+        return false;
+    return MARKDOWN_PATTERNS.some((pattern) => pattern.test(text));
+}
+/**
+ * Tri-state boolean attribute converter for `markdown`. Lit's built-in
+ * `type: Boolean` converter is presence-based and can only ever represent
+ * two states (attribute present -> `true`, absent -> `false`) -- there's no
+ * way for it to also represent "not specified, auto-detect instead", which
+ * is the actual default this property needs. `markdown` (no value, or
+ * `="true"`) -> `true`; `markdown="false"` -> `false`; attribute entirely
+ * absent -> `undefined`.
+ */
+const optionalBooleanConverter = {
+    fromAttribute(value) {
+        if (value === null)
+            return undefined;
+        return value !== 'false';
+    },
+    toAttribute(value) {
+        if (value === undefined)
+            return null;
+        return value ? '' : 'false';
+    },
+};
+/**
+ * `<lyra-streaming-text>` — a token-coalescing incremental text renderer for
+ * streaming assistant output, with an optional blinking cursor and
+ * auto-detected Markdown rendering.
+ *
+ * The host is expected to assign the *entire* current text on every update
+ * to `content`, not a delta -- this component does no accumulation or
+ * ordering of its own. That matches how most streaming-UI state (SSE/
+ * WebSocket token accumulation into a growing string in application state)
+ * is already managed.
+ *
+ * Token-by-token streaming can update `content` far faster than a human can
+ * usefully perceive a re-render -- dozens of times a second for a fast
+ * model. Re-rendering on every single assignment thrashes layout for no
+ * visible benefit, so updates funnel through `Announcer`
+ * (`../../internal/announcer.js`), reused here purely as the generic
+ * "coalesce rapid calls, flush the latest" timing primitive its own class
+ * doc says other components should reuse -- with none of its usual
+ * DOM/ARIA plumbing (that's `<lyra-live-region>`'s job, not this
+ * component's). Within any `coalesce-ms` window, only the *last* `content`
+ * value assigned actually reaches the rendered DOM. Two cases always bypass
+ * the throttle and flush immediately instead of waiting out the window: the
+ * very first `content` assignment after mount (so an already-complete
+ * message never shows an artificial startup delay), and any transition of
+ * `streaming` from `true` to `false` (so the final chunk of a finished
+ * stream can never be left stranded mid-window).
+ *
+ * `markdown` is a tri-state property, not a plain boolean: left unset (the
+ * default), it auto-detects via a lightweight regex heuristic (see
+ * `looksLikeMarkdown`) run against whatever text is currently displayed --
+ * good enough to route obviously-Markdown output through `<lyra-markdown>`
+ * without the host needing to know or declare it up front, at the cost of
+ * an occasional one-time mode flip if Markdown syntax only appears partway
+ * through a stream. Explicitly setting `markdown` to `true`/`false` always
+ * wins over the heuristic. Rendering itself is never reimplemented here:
+ * Markdown mode composes `<lyra-markdown>` (`../markdown/markdown.js`)
+ * directly, forwarding this component's own `streaming` through as that
+ * component's own forward-compatible `streaming` hint prop; plain-text mode
+ * renders into a `white-space: pre-wrap` span instead.
+ *
+ * The blinking cursor (shown only while `streaming` is `true`) degrades to
+ * a static, always-visible bar under `prefers-reduced-motion: reduce`
+ * rather than disabling the animation into an invisible frozen frame --
+ * the same pattern `<lyra-typing-indicator>`'s own `cursor` variant uses. In
+ * plain-text mode the cursor sits inline at the tail of the final
+ * character, since the text is one continuous inline flow; in Markdown
+ * mode it renders as its own trailing block below the rendered content
+ * instead of attempting to splice into whatever nested block Markdown
+ * happens to end with (a paragraph, a table cell, a list item, a fenced
+ * code block, …) -- genuinely interleaving into arbitrary rendered Markdown
+ * without reaching across `<lyra-markdown>`'s own shadow boundary isn't a
+ * tractable general solution, so this component doesn't attempt it.
+ *
+ * Purely presentational: no events, driven entirely by its properties. It
+ * also doesn't announce anything to assistive tech itself -- a host that
+ * needs streamed text announced already has `<lyra-live-region>` for that
+ * (composed, for example, inside `<lyra-chat-message>`).
+ *
+ * @customElement lyra-streaming-text
+ * @csspart base - The root container.
+ * @csspart cursor - The blinking (or, under reduced motion, static) cursor bar. Only rendered while `streaming` is `true`.
+ */
+export class LyraStreamingText extends LyraElement {
+    static { this.styles = [LyraElement.styles, styles]; }
+    constructor() {
+        super();
+        /** The full current text so far -- always the complete string, never a
+         *  delta to append. */
+        this.content = '';
+        /** Shows the blinking cursor after the rendered text. Reflects, so a host
+         *  can also target `lyra-streaming-text[streaming]` in CSS. */
+        this.streaming = false;
+        /** Trailing-edge coalesce window, in ms, for `content` updates -- see the
+         *  class doc. */
+        this.coalesceMs = DEFAULT_COALESCE_MS;
+        // The coalesced value actually rendered -- lags `content` by up to
+        // `coalesceMs` (or zero, for the immediate-flush cases documented above).
+        this.displayedContent = '';
+        // Built in the constructor (not a class-field initializer) so it reads
+        // `this.coalesceMs` only after that property's own field initializer has
+        // already run and set the declared default -- same ordering rationale as
+        // lyra-live-region's identical constructor-built Announcer.
+        this.coalescer = new Announcer({
+            throttleMs: this.coalesceMs,
+            onFlush: (text) => {
+                this.displayedContent = text;
+            },
+        });
+    }
+    willUpdate(changed) {
+        if (changed.has('coalesceMs')) {
+            this.coalescer.throttleMs = this.coalesceMs;
+        }
+        if (changed.has('content')) {
+            // The very first content assignment after mount always flushes
+            // immediately -- an already-complete message (or the first chunk of a
+            // new one) shouldn't show an artificial startup delay just because a
+            // coalescing window technically applies to it.
+            this.coalescer.announce(this.content, { force: !this.hasUpdated });
+        }
+        // A stream finishing must never leave its final chunk stranded inside an
+        // in-progress coalescing window -- force whatever `content` currently
+        // holds through immediately. `changed.get('streaming')` is only defined
+        // for a real transition (never the initial mount value, per Lit's
+        // documented first-change semantics), so this can't misfire on connect.
+        if (changed.has('streaming') && changed.get('streaming') === true && !this.streaming) {
+            this.coalescer.announce(this.content, { force: true });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.coalescer.cancel();
+    }
+    /** Whether Markdown mode is actually in effect right now, resolving the
+     *  tri-state `markdown` property against `looksLikeMarkdown`. */
+    get effectiveMarkdown() {
+        return this.markdown ?? looksLikeMarkdown(this.displayedContent);
+    }
+    render() {
+        return html `
+      <div part="base">
+        ${this.effectiveMarkdown
+            ? html `<lyra-markdown .content=${this.displayedContent} .streaming=${this.streaming}></lyra-markdown>`
+            : html `<span class="plain">${this.displayedContent}</span>`}
+        ${this.streaming ? html `<span part="cursor" aria-hidden="true"></span>` : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraStreamingText.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStreamingText.prototype, "streaming", void 0);
+__decorate([
+    property({ type: Number, attribute: 'coalesce-ms' })
+], LyraStreamingText.prototype, "coalesceMs", void 0);
+__decorate([
+    property({ attribute: 'markdown', converter: optionalBooleanConverter })
+], LyraStreamingText.prototype, "markdown", void 0);
+__decorate([
+    state()
+], LyraStreamingText.prototype, "displayedContent", void 0);
+defineElement('streaming-text', LyraStreamingText);

package/dist/components/streaming-text/streaming-text.styles.d.ts

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

package/dist/components/streaming-text/streaming-text.styles.js

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    overflow-wrap: break-word;
+    /* Not derived from any --lyra-* token in tokens.styles.ts -- there's no
+       shared "inline cursor bar" token to resolve through, so this component
+       defines its own scoped custom property, exactly the way
+       lyra-typing-indicator's --lyra-typing-cursor-width/-height do for its
+       own (near-identical) blinking cursor. */
+    --lyra-streaming-text-cursor-width: 0.125rem;
+  }
+
+  [part='base'] {
+    line-height: 1.6;
+  }
+
+  /* Plain-text path only (Markdown mode never renders this element) -- see
+     the class doc for why Markdown content can't share this same
+     white-space treatment. */
+  .plain {
+    white-space: pre-wrap;
+  }
+
+  /* inline-block (not inline) so it participates in text layout on the same
+     line as the preceding content while still accepting a fixed block-size
+     for the bar -- in plain-text mode this sits at the visual tail of the
+     final wrapped line, immediately after the last character. */
+  [part='cursor'] {
+    display: inline-block;
+    vertical-align: text-bottom;
+    inline-size: var(--lyra-streaming-text-cursor-width);
+    block-size: 1em;
+    margin-inline-start: var(--lyra-space-xs);
+    background: currentColor;
+    border-radius: var(--lyra-streaming-text-cursor-width);
+    animation: lyra-streaming-text-cursor-blink var(--lyra-transition-base) infinite;
+  }
+
+  /* Two adjacent keyframe stops (49% / 50%) either side of an instant flip,
+     same shape as lyra-typing-indicator's cursor variant, so the blink still
+     reads as a sharp on/off even under the token's own ease-out timing. */
+  @keyframes lyra-streaming-text-cursor-blink {
+    0%,
+    49% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  /* Degrades to a static, fully-visible bar -- never a frozen mid-blink
+     (invisible) frame. */
+  @media (prefers-reduced-motion: reduce) {
+    [part='cursor'] {
+      animation: none !important;
+      opacity: 1;
+    }
+  }
+`;

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,58 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-switch>` — a boolean toggle-switch form control. Structurally the
+ * same idea as a checkbox (form-associated via `ElementInternals`, click and
+ * Space/Enter both toggle) but with switch semantics: `role="switch"` +
+ * `aria-checked` read to assistive tech as an on/off state rather than a
+ * checked/unchecked one, and there is no indeterminate state.
+ *
+ * `checked` is not a plain string, so this attaches `ElementInternals`
+ * directly and implements its own `updateValidity()` rather than using the
+ * `FormAssociated` mixin (that mixin's `value` accessor assumes a string —
+ * see `<lyra-combobox>` for the same direct-`ElementInternals` shape with a
+ * non-string value).
+ *
+ * @customElement lyra-switch
+ * @slot - Label text, rendered next to the track. Clicking it toggles the
+ * switch, the same as clicking a checkbox's associated `<label>`. If left
+ * empty, set `aria-label` on the host so the control still has an
+ * accessible name.
+ * @event lyra-change - The user toggled the switch (click or Space/Enter). `detail: { checked }`.
+ * @csspart base - The whole interactive control (`role="switch"`); wraps the track and label.
+ * @csspart track - The pill-shaped background.
+ * @csspart thumb - The circular knob that slides across the track.
+ * @csspart label - The wrapper around the default slot.
+ */
+export declare class LyraSwitch extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    static formAssociated: boolean;
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    private hasLabelSlot;
+    private internals;
+    private _defaultChecked;
+    private _defaultCaptured;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    private updateValidity;
+    protected updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private toggle;
+    private onClick;
+    private onKeyDown;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-switch': LyraSwitch;
+    }
+}

package/dist/components/switch/switch.js

@@ -0,0 +1,179 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './switch.styles.js';
+/**
+ * `<lyra-switch>` — a boolean toggle-switch form control. Structurally the
+ * same idea as a checkbox (form-associated via `ElementInternals`, click and
+ * Space/Enter both toggle) but with switch semantics: `role="switch"` +
+ * `aria-checked` read to assistive tech as an on/off state rather than a
+ * checked/unchecked one, and there is no indeterminate state.
+ *
+ * `checked` is not a plain string, so this attaches `ElementInternals`
+ * directly and implements its own `updateValidity()` rather than using the
+ * `FormAssociated` mixin (that mixin's `value` accessor assumes a string —
+ * see `<lyra-combobox>` for the same direct-`ElementInternals` shape with a
+ * non-string value).
+ *
+ * @customElement lyra-switch
+ * @slot - Label text, rendered next to the track. Clicking it toggles the
+ * switch, the same as clicking a checkbox's associated `<label>`. If left
+ * empty, set `aria-label` on the host so the control still has an
+ * accessible name.
+ * @event lyra-change - The user toggled the switch (click or Space/Enter). `detail: { checked }`.
+ * @csspart base - The whole interactive control (`role="switch"`); wraps the track and label.
+ * @csspart track - The pill-shaped background.
+ * @csspart thumb - The circular knob that slides across the track.
+ * @csspart label - The wrapper around the default slot.
+ */
+export class LyraSwitch extends LyraElement {
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.formAssociated = true; }
+    constructor() {
+        super();
+        this.checked = false;
+        this.disabled = false;
+        this.required = false;
+        this.name = '';
+        this.value = 'on';
+        // Tracks whether the default slot carries any real (non-whitespace)
+        // content, so the label wrapper — and the `gap` next to the track — can
+        // collapse to nothing for an icon-only/aria-label-only switch instead of
+        // leaving a stray empty gap. See combobox/date-input's `hasHintSlot`-style
+        // state fields; this one checks `assignedNodes` rather than
+        // `assignedElements` because a plain slotted text label (the expected
+        // common case here, e.g. `<lyra-switch>Enable notifications</lyra-switch>`)
+        // is a text node, which `assignedElements` would silently ignore.
+        this.hasLabelSlot = false;
+        // What `form.reset()` restores to — captured once, from whatever the
+        // `checked` property reads at first connect (i.e. whatever the declarative
+        // `checked` attribute parsed to, since attribute parsing happens before
+        // `connectedCallback`). `checked` reflects, so unlike
+        // `FormAssociated`'s non-reflecting `value` this can't be captured from
+        // `attributeChangedCallback` alone — that would also fire (and wrongly
+        // redefine the default) every time the property setter itself reflects a
+        // later user toggle back into the attribute. Guarding with a one-shot flag
+        // instead mirrors `<lyra-combobox>`'s `_defaultCaptured`/`_defaultSelected`.
+        this._defaultChecked = false;
+        this._defaultCaptured = false;
+        this.onClick = () => {
+            this.toggle();
+        };
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Space/Enter both activate, matching `<lyra-table>`'s sortable
+            // header/row convention (`table.ts`'s `onHeaderKeyDown`/`onRowKeyDown`)
+            // for role-based clickable elements — bound to `keydown` rather than
+            // `keyup`/native `click`-forwarding like the rest of this library.
+            if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        this.onSlotChange = (e) => {
+            const nodes = e.target.assignedNodes({ flatten: true });
+            this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
+        };
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._defaultCaptured) {
+            this._defaultCaptured = true;
+            this._defaultChecked = this.checked;
+        }
+        this.updateValidity();
+    }
+    willUpdate() {
+        // Seed `hasLabelSlot` from the light-DOM children synchronously before
+        // the very first render (same `!hasUpdated` guard as combobox/date-input's
+        // `hasHintSlot` etc.) so declaratively-provided label text doesn't flash
+        // hidden for one frame while waiting on the first `slotchange` event.
+        if (!this.hasUpdated) {
+            this.hasLabelSlot = Array.from(this.childNodes).some((n) => (n.textContent ?? '').trim().length > 0);
+        }
+    }
+    updateValidity() {
+        if (this.required && !this.checked) {
+            this.internals.setValidity({ valueMissing: true }, 'Please turn this on.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    updated(changed) {
+        if (changed.has('checked') || changed.has('value')) {
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+        if (changed.has('checked') || changed.has('required')) {
+            this.updateValidity();
+        }
+    }
+    formResetCallback() {
+        this.checked = this._defaultChecked;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.emit('lyra-change', { checked: this.checked });
+    }
+    render() {
+        return html `
+      <span
+        part="base"
+        role="switch"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-checked=${this.checked ? 'true' : 'false'}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-label=${this.getAttribute('aria-label') || nothing}
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+      >
+        <span part="track">
+          <span part="thumb"></span>
+        </span>
+        <span part="label" ?hidden=${!this.hasLabelSlot}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </span>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSwitch.prototype, "required", void 0);
+__decorate([
+    property()
+], LyraSwitch.prototype, "name", void 0);
+__decorate([
+    property()
+], LyraSwitch.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraSwitch.prototype, "hasLabelSlot", void 0);
+defineElement('switch', LyraSwitch);

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

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

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    /* Component-local geometry knobs (same "define your own on :host"
+       pattern as lyra-toast's --gap/--width) — a fully-rounded pill/thumb
+       needs a radius well past --lyra-radius's small 0.375rem default, so
+       it's expressed here rather than bent onto that shared token. */
+    --track-inline-size: 2.25rem;
+    --track-block-size: 1.25rem;
+    --thumb-offset: 2px;
+  }
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([disabled]) [part='base'] {
+    cursor: not-allowed;
+    opacity: var(--lyra-opacity-disabled);
+  }
+
+  [part='track'] {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: var(--track-inline-size);
+    block-size: var(--track-block-size);
+    border-radius: 999px;
+    background: var(--lyra-color-border);
+    transition: background-color var(--lyra-transition-fast);
+  }
+  :host([checked]) [part='track'] {
+    background: var(--lyra-color-brand);
+  }
+
+  [part='thumb'] {
+    position: absolute;
+    inset-block-start: var(--thumb-offset);
+    inset-inline-start: var(--thumb-offset);
+    inline-size: calc(var(--track-block-size) - (var(--thumb-offset) * 2));
+    block-size: calc(var(--track-block-size) - (var(--thumb-offset) * 2));
+    border-radius: 50%;
+    background: var(--lyra-color-surface);
+    /* Animates the logical 'inset-inline-start' rather than a physical
+       'transform: translateX()' so the slide direction mirrors correctly
+       under dir="rtl" — consistent with this library's CSS-logical-
+       properties approach to RTL (see internal/lyra-element.ts). */
+    transition: inset-inline-start var(--lyra-transition-fast);
+  }
+  :host([checked]) [part='thumb'] {
+    inset-inline-start: calc(var(--track-inline-size) - var(--track-block-size) + var(--thumb-offset));
+  }
+
+  /* No explicit "display" here (unlike e.g. lyra-combobox's
+     [part='form-control-label']), so the UA stylesheet's default
+     "[hidden] { display: none }" rule needs no author-side override to
+     take effect when hasLabelSlot is false. */
+  [part='label'] {
+    font-size: 0.875rem;
+    color: var(--lyra-color-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='track'],
+    [part='thumb'] {
+      transition: none !important;
+    }
+  }
+`;