@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/stream-status/stream-status.styles.d.ts

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

package/dist/components/stream-status/stream-status.styles.js

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    /* Swapped per-phase by the :host([phase]) rules below, rather than
+       repeating color/opacity per rule -- same one-custom-property-per-tone
+       shape as lyra-tool-call-chip's --lyra-tool-call-chip-accent. */
+    --lyra-stream-status-dot-color: var(--lyra-color-text-quiet);
+    --lyra-stream-status-dot-opacity: 0.35;
+  }
+
+  /* 'connecting' gets a dimmer, static brand dot -- present but deliberately
+     quieter than 'streaming' so the two are never confused at a glance. */
+  :host([phase='connecting']) {
+    --lyra-stream-status-dot-color: var(--lyra-color-brand);
+    --lyra-stream-status-dot-opacity: 0.6;
+  }
+  :host([phase='streaming']) {
+    --lyra-stream-status-dot-color: var(--lyra-color-brand);
+    --lyra-stream-status-dot-opacity: 1;
+  }
+  /* Warning, not danger -- see the class doc's "Visual" section for why a
+     stall defaults to the recoverable/actionable tone. */
+  :host([phase='stalled']) {
+    --lyra-stream-status-dot-color: var(--lyra-color-warning);
+    --lyra-stream-status-dot-opacity: 1;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    border-radius: var(--lyra-radius);
+    transition:
+      background-color var(--lyra-transition-base),
+      border-color var(--lyra-transition-base);
+  }
+
+  /* The one "unmistakable" treatment the spec calls for: a stall tints the
+     whole row, not just the dot, so the message/actions read as one alert
+     unit rather than a plain dot next to unrelated-looking text. */
+  :host([phase='stalled']) [part='base'] {
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    background: var(--lyra-color-warning-quiet);
+    border: 1px solid var(--lyra-color-warning);
+  }
+
+  [part='indicator'] {
+    flex: 0 0 auto;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    background: var(--lyra-stream-status-dot-color);
+    opacity: var(--lyra-stream-status-dot-opacity);
+    transition:
+      background-color var(--lyra-transition-base),
+      opacity var(--lyra-transition-base);
+  }
+
+  /* Only 'streaming' pulses -- a moving dot reads as "actively receiving
+     data right now"; every other phase (including 'stalled', which wants
+     steady attention via color/tint, not extra motion) stays static. Same
+     transition-cycle token/rationale as lyra-typing-indicator's pulse
+     variant -- see that component's styles for the full explanation of why
+     --lyra-transition-base (not -fast) is the right length for an ambient
+     loop. */
+  :host([phase='streaming']) [part='indicator'] {
+    animation: lyra-stream-status-pulse var(--lyra-transition-base) infinite;
+  }
+  @keyframes lyra-stream-status-pulse {
+    0%,
+    100% {
+      transform: scale(0.85);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='indicator'] {
+      animation: none !important;
+    }
+  }
+
+  [part='message'] {
+    color: var(--lyra-color-warning);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  [part='actions'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+  }
+  [part='actions'][hidden] {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,104 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../markdown/markdown.js';
+/** 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 declare function looksLikeMarkdown(text: string): boolean;
+/**
+ * `<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` between `true` and `false` in either direction (so the final
+ * chunk of a finished stream can never be left stranded mid-window, and a
+ * stream restarting on a reused element can never keep showing the
+ * previous stream's stale final content for the length of the 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 declare class LyraStreamingText extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The full current text so far -- always the complete string, never a
+     *  delta to append. */
+    content: string;
+    /** Shows the blinking cursor after the rendered text. Reflects, so a host
+     *  can also target `lyra-streaming-text[streaming]` in CSS. */
+    streaming: boolean;
+    /** Trailing-edge coalesce window, in ms, for `content` updates -- see the
+     *  class doc. */
+    coalesceMs: number;
+    /** `undefined` (default) auto-detects via `looksLikeMarkdown`; `true`/
+     *  `false` force that rendering mode regardless of content. */
+    markdown?: boolean;
+    private displayedContent;
+    private lastScannedContent?;
+    private lastScannedResult;
+    private readonly coalescer;
+    constructor();
+    protected willUpdate(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    /** Whether Markdown mode is actually in effect right now, resolving the
+     *  tri-state `markdown` property against the memoized `looksLikeMarkdown`
+     *  result for the currently-displayed content (see `lastScannedContent`/
+     *  `lastScannedResult` above). */
+    private get effectiveMarkdown();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-streaming-text': LyraStreamingText;
+    }
+}

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

@@ -0,0 +1,224 @@
+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` between `true` and `false` in either direction (so the final
+ * chunk of a finished stream can never be left stranded mid-window, and a
+ * stream restarting on a reused element can never keep showing the
+ * previous stream's stale final content for the length of the 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 = '';
+        this.lastScannedResult = false;
+        // 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 });
+        }
+        // Neither a stream finishing nor a stream (re)starting on a reused
+        // element may leave stale content stranded inside an in-progress
+        // coalescing window -- force whatever `content` currently holds through
+        // immediately in both directions. Without the restart side of this, a
+        // reused element would keep showing the *previous* stream's final
+        // content for up to a full coalesce-ms window after a new stream had
+        // already begun. `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') !== undefined &&
+            changed.get('streaming') !== this.streaming) {
+            this.coalescer.announce(this.content, { force: true });
+        }
+        if (changed.has('displayedContent') && this.displayedContent !== this.lastScannedContent) {
+            this.lastScannedContent = this.displayedContent;
+            this.lastScannedResult = looksLikeMarkdown(this.displayedContent);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.coalescer.cancel();
+    }
+    /** Whether Markdown mode is actually in effect right now, resolving the
+     *  tri-state `markdown` property against the memoized `looksLikeMarkdown`
+     *  result for the currently-displayed content (see `lastScannedContent`/
+     *  `lastScannedResult` above). */
+    get effectiveMarkdown() {
+        return this.markdown ?? this.lastScannedResult;
+    }
+    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,63 @@
+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 properties, 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;
+    --lyra-streaming-text-cursor-height: 1em;
+  }
+
+  [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: var(--lyra-streaming-text-cursor-height);
+    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,103 @@
+import { type TemplateResult } 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;
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        value: {
+            noAccessor: boolean;
+        };
+    };
+    private hasLabelSlot;
+    private internals;
+    private validityController;
+    private _defaultChecked;
+    private _defaultCaptured;
+    private _fieldsetDisabled;
+    private _name;
+    private _checked;
+    private _disabled;
+    private _required;
+    private _value;
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
+    get checked(): boolean;
+    set checked(next: boolean);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name(): string;
+    set name(next: string);
+    get required(): boolean;
+    set required(next: boolean);
+    get value(): string;
+    set value(next: string);
+    constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    private updateValidity;
+    private syncFormState;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): 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;
+    }
+}