@aceshooting/lyra-ui 3.7.0 → 3.8.0

package/dist/components/browser-frame/browser-frame.class.d.ts

@@ -0,0 +1,70 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface BrowserPing {
+    id: string;
+    x: number;
+    y: number;
+    kind: 'click' | 'type' | 'scroll' | 'move';
+}
+export interface LyraBrowserFrameEventMap {
+    'lyra-take-over': CustomEvent<{
+        controller: 'agent' | 'user';
+    }>;
+    'lyra-stop': CustomEvent<undefined>;
+}
+/**
+ * `<lyra-browser-frame>` — presentational "agent computer" viewport: a screenshot/frame stream (or
+ * slotted live media), read-only URL display, action-ping overlays, and take-over/stop affordances.
+ * No automation transport, no input relay — take-over is an event; the host swaps in its own
+ * interactive element.
+ *
+ * @customElement lyra-browser-frame
+ * @event lyra-take-over - `detail: { controller }` — the *requested* controller.
+ * @event lyra-stop - Stop the agent's browser session.
+ * @slot - Host-owned live element (e.g. `<video>` or an interactive `<iframe>`), replacing the
+ *   `frame-src` image.
+ * @slot actions - Extra toolbar controls.
+ * @csspart base - The root wrapper (`role="group"`).
+ * @csspart toolbar - The header row.
+ * @csspart url - The read-only address text.
+ * @csspart status - The visible status text (`role="status"`).
+ * @csspart controller-badge - The current controller indicator.
+ * @csspart actions - The `actions` slot wrapper.
+ * @csspart take-over-button - The take-over/hand-back button.
+ * @csspart stop-button - The stop button.
+ * @csspart viewport - The frame/media container.
+ * @csspart frame - The `frame-src` `<img>` (absent once the default slot is populated).
+ * @csspart ping - One action-ping marker; carries `data-kind`.
+ * @cssprop [--lyra-browser-frame-aspect-ratio=16 / 9] - The viewport's aspect ratio.
+ */
+export declare class LyraBrowserFrame extends LyraElement<LyraBrowserFrameEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    frameSrc: string;
+    url: string;
+    status: 'idle' | 'connecting' | 'streaming' | 'stalled';
+    controller: 'agent' | 'user';
+    pings: BrowserPing[];
+    controls: boolean;
+    private hasDefaultSlotContent;
+    /** The measured `object-fit: contain` content box of the `frame-src` `<img>`, in pixels relative
+     *  to `[part='viewport']` -- `null` until the image has loaded and the viewport has a real size
+     *  (e.g. no `frameSrc`, or the default slot is in use instead). Pings fall back to plain
+     *  percent-of-viewport when `null`. */
+    private contentRect;
+    private viewportResizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private observeViewport;
+    private recomputeContentRect;
+    private pingStyle;
+    private onSlotChange;
+    private onFrameLoad;
+    private onTakeOver;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-browser-frame': LyraBrowserFrame;
+    }
+}
+//# sourceMappingURL=browser-frame.class.d.ts.map

package/dist/components/browser-frame/browser-frame.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-frame.class.d.ts","sourceRoot":"","sources":["../../../src/components/browser-frame/browser-frame.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA2B7D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC5C;AASD,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,WAAW,CAAC;QAAE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,gBAAiB,SAAQ,WAAW,CAAC,wBAAwB,CAAC;IACzE,MAAM,CAAC,MAAM,iCAAwC;IAEf,QAAQ,SAAM;IACxC,GAAG,SAAM;IACQ,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAU;IACjE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAW;IACpC,KAAK,EAAE,WAAW,EAAE,CAAM;IACd,QAAQ,UAAQ;IAE5D,OAAO,CAAC,qBAAqB,CAAS;IACtC;;;2CAGuC;IAC9B,OAAO,CAAC,WAAW,CAA6E;IAEzG,OAAO,CAAC,sBAAsB,CAAC,CAAiB;IAEhD,iBAAiB,IAAI,IAAI,CASxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,UAAU,CAGhB;IAEF,MAAM,IAAI,cAAc,CA4CvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/browser-frame/browser-frame.class.js

@@ -0,0 +1,196 @@
+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 { safeMediaSrc } from '../../internal/safe-url.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './browser-frame.styles.js';
+/** The `object-fit: contain` content box (in pixels, relative to the container's own top-left) for
+ *  an image of `naturalW`x`naturalH` shown inside a `containerW`x`containerH` box -- ping
+ *  coordinates are percentages *of this box*, not of the (possibly letterboxed) outer container. */
+function containRect(containerW, containerH, naturalW, naturalH) {
+    if (naturalW === 0 || naturalH === 0 || containerW === 0 || containerH === 0) {
+        return { left: 0, top: 0, width: containerW, height: containerH };
+    }
+    const containerRatio = containerW / containerH;
+    const naturalRatio = naturalW / naturalH;
+    if (naturalRatio > containerRatio) {
+        const height = containerW / naturalRatio;
+        return { left: 0, top: (containerH - height) / 2, width: containerW, height };
+    }
+    const width = containerH * naturalRatio;
+    return { left: (containerW - width) / 2, top: 0, width, height: containerH };
+}
+const STATUS_KEY = {
+    idle: 'browserFrameStatusIdle',
+    connecting: 'browserFrameStatusConnecting',
+    streaming: 'browserFrameStatusLive',
+    stalled: 'browserFrameStatusStalled',
+};
+/**
+ * `<lyra-browser-frame>` — presentational "agent computer" viewport: a screenshot/frame stream (or
+ * slotted live media), read-only URL display, action-ping overlays, and take-over/stop affordances.
+ * No automation transport, no input relay — take-over is an event; the host swaps in its own
+ * interactive element.
+ *
+ * @customElement lyra-browser-frame
+ * @event lyra-take-over - `detail: { controller }` — the *requested* controller.
+ * @event lyra-stop - Stop the agent's browser session.
+ * @slot - Host-owned live element (e.g. `<video>` or an interactive `<iframe>`), replacing the
+ *   `frame-src` image.
+ * @slot actions - Extra toolbar controls.
+ * @csspart base - The root wrapper (`role="group"`).
+ * @csspart toolbar - The header row.
+ * @csspart url - The read-only address text.
+ * @csspart status - The visible status text (`role="status"`).
+ * @csspart controller-badge - The current controller indicator.
+ * @csspart actions - The `actions` slot wrapper.
+ * @csspart take-over-button - The take-over/hand-back button.
+ * @csspart stop-button - The stop button.
+ * @csspart viewport - The frame/media container.
+ * @csspart frame - The `frame-src` `<img>` (absent once the default slot is populated).
+ * @csspart ping - One action-ping marker; carries `data-kind`.
+ * @cssprop [--lyra-browser-frame-aspect-ratio=16 / 9] - The viewport's aspect ratio.
+ */
+export class LyraBrowserFrame extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.frameSrc = '';
+        this.url = '';
+        this.status = 'idle';
+        this.controller = 'agent';
+        this.pings = [];
+        this.controls = true;
+        this.hasDefaultSlotContent = false;
+        /** The measured `object-fit: contain` content box of the `frame-src` `<img>`, in pixels relative
+         *  to `[part='viewport']` -- `null` until the image has loaded and the viewport has a real size
+         *  (e.g. no `frameSrc`, or the default slot is in use instead). Pings fall back to plain
+         *  percent-of-viewport when `null`. */
+        this.contentRect = null;
+        this.onSlotChange = (e) => {
+            this.hasDefaultSlotContent = e.target.assignedElements({ flatten: true }).length > 0;
+            this.requestUpdate();
+        };
+        this.onFrameLoad = () => {
+            this.observeViewport();
+            this.recomputeContentRect();
+        };
+        this.onTakeOver = () => {
+            const requested = this.controller === 'agent' ? 'user' : 'agent';
+            this.emit('lyra-take-over', { controller: requested });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // The viewport observer is torn down on disconnect, and a reattached, already-rendered frame
+        // <img> fires no new load event -- re-arm and re-measure here so the content rect keeps
+        // tracking resizes after a move within the DOM.
+        if (this.hasUpdated) {
+            this.observeViewport();
+            this.recomputeContentRect();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.viewportResizeObserver?.disconnect();
+        this.viewportResizeObserver = undefined;
+    }
+    observeViewport() {
+        const viewport = this.renderRoot.querySelector('[part="viewport"]');
+        if (!viewport || this.viewportResizeObserver)
+            return;
+        this.viewportResizeObserver = new ResizeObserver(() => this.recomputeContentRect());
+        this.viewportResizeObserver.observe(viewport);
+    }
+    recomputeContentRect() {
+        const viewport = this.renderRoot.querySelector('[part="viewport"]');
+        const img = this.renderRoot.querySelector('[part="frame"]');
+        if (!viewport || !img || !img.naturalWidth || !img.naturalHeight) {
+            this.contentRect = null;
+            return;
+        }
+        this.contentRect = containRect(viewport.clientWidth, viewport.clientHeight, img.naturalWidth, img.naturalHeight);
+    }
+    // Ping coordinates are physical percent-of-frame over a screenshot that never mirrors, so
+    // position with physical left/top -- logical inset-inline-start would flip the markers under
+    // RTL while the screenshot underneath stays put.
+    pingStyle(ping) {
+        const rect = this.contentRect;
+        if (!rect)
+            return `left:${ping.x}%;top:${ping.y}%`;
+        const left = rect.left + (ping.x / 100) * rect.width;
+        const top = rect.top + (ping.y / 100) * rect.height;
+        return `left:${left}px;top:${top}px`;
+    }
+    render() {
+        const safeSrc = safeMediaSrc(this.frameSrc);
+        return html `
+      <div part="base" role="group" aria-label=${this.getAttribute('aria-label') || this.localize('browserFrameLabel')}>
+        <div part="toolbar">
+          <span class="sr-only">${this.localize('browserFrameUrlLabel')}</span>
+          <span part="url" dir="ltr" title=${this.url}>${this.url}</span>
+          <span part="status" role="status">${this.localize(STATUS_KEY[this.status])}</span>
+          <span part="controller-badge">${this.controller}</span>
+          <slot name="actions" part="actions"></slot>
+          ${this.controls
+            ? html `
+                <button part="take-over-button" type="button" @click=${this.onTakeOver}>
+                  ${this.controller === 'user'
+                ? this.localize('browserFrameHandBack')
+                : this.localize('browserFrameTakeOver')}
+                </button>
+                <button part="stop-button" type="button" @click=${() => this.emit('lyra-stop')}>
+                  ${this.localize('browserFrameStop')}
+                </button>
+              `
+            : nothing}
+        </div>
+        <div part="viewport">
+          <slot @slotchange=${this.onSlotChange}></slot>
+          ${!this.hasDefaultSlotContent && safeSrc
+            ? html `<img
+                part="frame"
+                src=${safeSrc}
+                alt=${this.localize('browserFrameViewOf', undefined, { url: this.url })}
+                @load=${this.onFrameLoad}
+              />`
+            : nothing}
+          ${this.pings.map((ping) => html `<span
+              part="ping"
+              data-kind=${ping.kind}
+              aria-hidden="true"
+              style=${this.pingStyle(ping)}
+            ></span>`)}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: 'frame-src' })
+], LyraBrowserFrame.prototype, "frameSrc", void 0);
+__decorate([
+    property()
+], LyraBrowserFrame.prototype, "url", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraBrowserFrame.prototype, "status", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraBrowserFrame.prototype, "controller", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraBrowserFrame.prototype, "pings", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraBrowserFrame.prototype, "controls", void 0);
+__decorate([
+    state()
+], LyraBrowserFrame.prototype, "contentRect", void 0);
+//# sourceMappingURL=browser-frame.class.js.map

package/dist/components/browser-frame/browser-frame.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-frame.class.js","sourceRoot":"","sources":["../../../src/components/browser-frame/browser-frame.class.ts"],"names":[],"mappings":"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"}

package/dist/components/browser-frame/browser-frame.d.ts

@@ -0,0 +1,2 @@
+export * from './browser-frame.class.js';
+//# sourceMappingURL=browser-frame.d.ts.map

package/dist/components/browser-frame/browser-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-frame.d.ts","sourceRoot":"","sources":["../../../src/components/browser-frame/browser-frame.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/components/browser-frame/browser-frame.js

@@ -0,0 +1,5 @@
+export * from './browser-frame.class.js';
+import { LyraBrowserFrame } from './browser-frame.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('browser-frame', LyraBrowserFrame);
+//# sourceMappingURL=browser-frame.js.map

package/dist/components/browser-frame/browser-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-frame.js","sourceRoot":"","sources":["../../../src/components/browser-frame/browser-frame.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC"}

package/dist/components/browser-frame/browser-frame.styles.d.ts

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

package/dist/components/browser-frame/browser-frame.styles.d.ts.map

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

package/dist/components/browser-frame/browser-frame.styles.js

@@ -0,0 +1,88 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    border: var(--lyra-size-1px) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    overflow: hidden;
+  }
+  [part='toolbar'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-block-end: var(--lyra-size-1px) solid var(--lyra-color-border);
+    font-size: var(--lyra-font-size-sm);
+  }
+  [part='url'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='status'] {
+    font-size: var(--lyra-font-size-xs);
+  }
+  [part='controller-badge'] {
+    font-size: var(--lyra-font-size-xs);
+    padding: var(--lyra-space-2xs) var(--lyra-space-xs);
+    border-radius: var(--lyra-radius-pill);
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='take-over-button'],
+  [part='stop-button'] {
+    font: inherit;
+    font-size: var(--lyra-font-size-xs);
+    background: none;
+    border: var(--lyra-size-1px) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius-xs);
+    padding: var(--lyra-space-2xs) var(--lyra-space-s);
+    cursor: pointer;
+  }
+  [part='viewport'] {
+    position: relative;
+    aspect-ratio: var(--lyra-browser-frame-aspect-ratio, 16 / 9);
+    background: var(--lyra-color-surface-raised);
+  }
+  [part='frame'] {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+  }
+  ::slotted(*) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+  }
+  [part='ping'] {
+    position: absolute;
+    inline-size: var(--lyra-size-16px);
+    block-size: var(--lyra-size-16px);
+    translate: -50% -50%;
+    border-radius: var(--lyra-radius-pill);
+    border: var(--lyra-size-2px) solid var(--lyra-color-brand);
+    pointer-events: none;
+  }
+  [part='ping'][data-kind='click'] {
+    border-color: var(--lyra-color-brand);
+  }
+  [part='ping'][data-kind='type'] {
+    border-color: var(--lyra-color-success);
+  }
+  [part='ping'][data-kind='scroll'] {
+    border-color: var(--lyra-color-warning);
+  }
+  [part='ping'][data-kind='move'] {
+    border-color: var(--lyra-color-text-quiet);
+  }
+`;
+//# sourceMappingURL=browser-frame.styles.js.map

package/dist/components/browser-frame/browser-frame.styles.js.map

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

package/dist/components/button/button.class.d.ts

@@ -1,8 +1,8 @@
 import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 export type ButtonVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
-export type ButtonAppearance = 'accent' | 'filled' | 'outlined' | 'plain' | 'link';
-export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type ButtonAppearance = 'accent' | 'filled' | 'outlined' | 'plain' | 'link' | 'quiet';
+export type ButtonSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 export type ButtonType = 'button' | 'submit' | 'reset';
 /**
  * `<lyra-button>` — a generic action-button primitive. Renders an internal native
@@ -36,6 +36,19 @@ export type ButtonType = 'button' | 'submit' | 'reset';
 export declare class LyraButton extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     static formAssociated: boolean;
+    static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
+    private _fieldsetDisabled;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** Whether the button is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
     constructor();
     /** Tone vocabulary shared with `<lyra-chip>`/`<lyra-avatar>`'s own `tone` property, named
      *  `variant` here (not `tone`) to keep the component's semantic tone vocabulary consistent. */
@@ -46,8 +59,14 @@ export declare class LyraButton extends LyraElement {
      *  variant, including `neutral`. `'link'` is zero-chrome inline text — no padding, border, or
      *  min-height, underlined, colored from `--lyra-button-accent` (the same token `'plain'` uses)
      *  and inheriting the surrounding font — for a text link that flows inline in a sentence rather
-     *  than a button-shaped control. */
+     *  than a button-shaped control. `'quiet'` is a bordered, transparent-until-hover tier for a
+     *  toolbar-style icon+label action — its border/text read fixed `--lyra-color-border`/`--lyra-color-text-quiet`
+     *  tokens regardless of `variant`, unlike `'outlined'`'s variant-tinted text, so it stays
+     *  visually muted at rest. */
     appearance: ButtonAppearance;
+    /** Visual size, `'2xs'`–`'xl'`. `'2xs'` is the tightest tier — a sub-`xs` size for dense,
+     *  toolbar-embedded controls (e.g. beside a native `<input type="search">` in a compact dialog
+     *  header). `'m'` (the default) is the standard size. */
     size: ButtonSize;
     /** Forwarded to this component's own submit/reset handling — see the class doc comment above
      *  for why this component (not the shadow-internal `<button>`) owns that behavior. */
@@ -56,13 +75,19 @@ export declare class LyraButton extends LyraElement {
      *  clearing `disabled` — a consumer's own `disabled` state and a transient `loading` state are
      *  independent (mirrors `<lyra-export-button>`'s own `loading`/`disabled` pair). */
     loading: boolean;
-    disabled: boolean;
     private buttonEl?;
     /** Activates the internal native button, including submit/reset behavior. */
     click(): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     private onClick;
+    /**
+     * Called by the browser when an ancestor `<fieldset disabled>` toggles. Tracked separately
+     * from the consumer's own `disabled` (see `effectiveDisabled`) so a consumer's explicit
+     * `disabled` survives the fieldset re-enabling instead of being permanently overwritten --
+     * mirrors `<lyra-checkbox>`'s/`<lyra-switch>`'s identical `_fieldsetDisabled` pattern.
+     */
+    formDisabledCallback(disabled: boolean): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/button/button.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.class.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,iCAAgC;IAI7C,MAAM,CAAC,cAAc,UAAQ;IAE7B,cAGC;IAED;mGAC+F;IAClE,OAAO,EAAE,aAAa,CAAa;IAChE;;;;;;wCAMoC;IACP,UAAU,EAAE,gBAAgB,CAAY;IACxC,IAAI,EAAE,UAAU,CAAO;IACpD;0FACsF;IAC1E,IAAI,EAAE,UAAU,CAAY;IACxC;;wFAEoF;IACxC,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE5C,OAAO,CAAC,QAAQ,CAAC,CAAoB;IAEtD,6EAA6E;IACpE,KAAK,IAAI,IAAI,CAErB;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAEQ,IAAI,IAAI,IAAI,CAEpB;IAED,OAAO,CAAC,OAAO,CAMb;IAEF,MAAM,IAAI,cAAc,CAiBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"button.class.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7F,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,iCAAgC;IAO7C,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,UAAU;QACf,QAAQ;YAAI,IAAI;YAAW,OAAO;YAAQ,UAAU;;MACpD;IAEF,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,SAAS,CAAS;IAE1B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,IAAI,EAAE,OAAO,EAKzB;IAED,4EAA4E;IAC5E,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAED,cAGC;IAED;mGAC+F;IAClE,OAAO,EAAE,aAAa,CAAa;IAChE;;;;;;;;;kCAS8B;IACD,UAAU,EAAE,gBAAgB,CAAY;IACrE;;6DAEyD;IAC5B,IAAI,EAAE,UAAU,CAAO;IACpD;0FACsF;IAC1E,IAAI,EAAE,UAAU,CAAY;IACxC;;wFAEoF;IACxC,OAAO,UAAS;IAE3C,OAAO,CAAC,QAAQ,CAAC,CAAoB;IAEtD,6EAA6E;IACpE,KAAK,IAAI,IAAI,CAErB;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAEQ,IAAI,IAAI,IAAI,CAEpB;IAED,OAAO,CAAC,OAAO,CAMb;IAEF;;;;;OAKG;IACH,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAG5C;IAED,MAAM,IAAI,cAAc,CAiBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/button/button.class.js

@@ -42,10 +42,31 @@ export class LyraButton extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     // A button is form-associated so it is discoverable through form.elements. The generic
     // FormAssociated mixin is intentionally not used: action buttons do not have its value,
-    // name, or required semantics.
+    // name, or required semantics. `disabled` is still hardened the same way the mixin-based
+    // controls are (synchronous accessor + `formDisabledCallback`), since an ancestor
+    // `<fieldset disabled>` must still cascade into this component the same way it would a
+    // native `<button>` -- see `effectiveDisabled` below.
     static { this.formAssociated = true; }
+    static { this.properties = {
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+    }; }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        this.requestUpdate('disabled', old);
+    }
+    /** Whether the button is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this._disabled || this._fieldsetDisabled;
+    }
     constructor() {
         super();
+        this._fieldsetDisabled = false;
+        this._disabled = false;
         /** Tone vocabulary shared with `<lyra-chip>`/`<lyra-avatar>`'s own `tone` property, named
          *  `variant` here (not `tone`) to keep the component's semantic tone vocabulary consistent. */
         this.variant = 'neutral';
@@ -55,8 +76,14 @@ export class LyraButton extends LyraElement {
          *  variant, including `neutral`. `'link'` is zero-chrome inline text — no padding, border, or
          *  min-height, underlined, colored from `--lyra-button-accent` (the same token `'plain'` uses)
          *  and inheriting the surrounding font — for a text link that flows inline in a sentence rather
-         *  than a button-shaped control. */
+         *  than a button-shaped control. `'quiet'` is a bordered, transparent-until-hover tier for a
+         *  toolbar-style icon+label action — its border/text read fixed `--lyra-color-border`/`--lyra-color-text-quiet`
+         *  tokens regardless of `variant`, unlike `'outlined'`'s variant-tinted text, so it stays
+         *  visually muted at rest. */
         this.appearance = 'filled';
+        /** Visual size, `'2xs'`–`'xl'`. `'2xs'` is the tightest tier — a sub-`xs` size for dense,
+         *  toolbar-embedded controls (e.g. beside a native `<input type="search">` in a compact dialog
+         *  header). `'m'` (the default) is the standard size. */
         this.size = 'm';
         /** Forwarded to this component's own submit/reset handling — see the class doc comment above
          *  for why this component (not the shadow-internal `<button>`) owns that behavior. */
@@ -65,7 +92,6 @@ export class LyraButton extends LyraElement {
          *  clearing `disabled` — a consumer's own `disabled` state and a transient `loading` state are
          *  independent (mirrors `<lyra-export-button>`'s own `loading`/`disabled` pair). */
         this.loading = false;
-        this.disabled = false;
         this.onClick = () => {
             if (this.type === 'submit') {
                 this.closest('form')?.requestSubmit();
@@ -86,6 +112,16 @@ export class LyraButton extends LyraElement {
     blur() {
         this.buttonEl?.blur();
     }
+    /**
+     * Called by the browser when an ancestor `<fieldset disabled>` toggles. Tracked separately
+     * from the consumer's own `disabled` (see `effectiveDisabled`) so a consumer's explicit
+     * `disabled` survives the fieldset re-enabling instead of being permanently overwritten --
+     * mirrors `<lyra-checkbox>`'s/`<lyra-switch>`'s identical `_fieldsetDisabled` pattern.
+     */
+    formDisabledCallback(disabled) {
+        this._fieldsetDisabled = disabled;
+        this.requestUpdate();
+    }
     render() {
         const ariaLabel = this.getAttribute('aria-label');
         return html `
@@ -94,7 +130,7 @@ export class LyraButton extends LyraElement {
         type="button"
         aria-label=${ariaLabel || nothing}
         aria-busy=${this.loading ? 'true' : 'false'}
-        ?disabled=${this.disabled || this.loading}
+        ?disabled=${this.effectiveDisabled || this.loading}
         @click=${this.onClick}
       >
         <span part="start"><slot name="start"></slot></span>
@@ -120,9 +156,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraButton.prototype, "loading", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraButton.prototype, "disabled", void 0);
 __decorate([
     query('button')
 ], LyraButton.prototype, "buttonEl", void 0);

package/dist/components/button/button.class.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.class.js","sourceRoot":"","sources":["../../../src/components/button/button.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAO5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;aAClC,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAC7C,uFAAuF;IACvF,wFAAwF;IACxF,+BAA+B;aACxB,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B;QACE,KAAK,EAAE,CAAC;QAIV;uGAC+F;QAClE,YAAO,GAAkB,SAAS,CAAC;QAChE;;;;;;4CAMoC;QACP,eAAU,GAAqB,QAAQ,CAAC;QACxC,SAAI,GAAe,GAAG,CAAC;QACpD;8FACsF;QAC1E,SAAI,GAAe,QAAQ,CAAC;QACxC;;4FAEoF;QACxC,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QAiBrD,YAAO,GAAG,GAAS,EAAE;YAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;YACxC,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QA7CA,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAyBD,6EAA6E;IACpE,KAAK;QACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAEQ,KAAK,CAAC,OAAsB;QACnC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAEQ,IAAI;QACX,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;IACxB,CAAC;IAUD,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAClD,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBAC/B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;iBAChC,IAAI,CAAC,OAAO;;;;;UAKnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;CACF;AA5D8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoC;AAQnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAyC;AACxC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwB;AAGxC;IAAX,QAAQ,EAAE;wCAA6B;AAII;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAEpC;IAAxB,KAAK,CAAC,QAAQ,CAAC;4CAAsC"}
+{"version":3,"file":"button.class.js","sourceRoot":"","sources":["../../../src/components/button/button.class.ts"],"names":[],"mappings":"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"}

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

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

package/dist/components/button/button.styles.js

@@ -6,6 +6,7 @@ export const styles = css `
        button follows it. The variable keeps the contract opt-out-able for
        compact inline compositions. */
     --lyra-button-width: 100%;
+    --lyra-button-size-2xs: var(--lyra-size-1-25rem);
     --lyra-button-size-xs: var(--lyra-size-1-5rem);
     --lyra-button-size-s: var(--lyra-size-1-75rem);
     --lyra-button-size-m: var(--lyra-size-2rem);
@@ -16,6 +17,8 @@ export const styles = css `
     --lyra-button-on-fill: var(--lyra-color-text);
     --lyra-button-border: var(--lyra-color-border);
     --lyra-button-outlined-border: var(--lyra-color-border-strong);
+    --lyra-button-quiet-border: var(--lyra-color-border);
+    --lyra-button-quiet-text: var(--lyra-color-text-quiet);
     /* appearance="accent"'s loud fill for the neutral variant -- every other variant's own
        --lyra-button-fill/-on-fill (below) already reads its semantic loud Lyra token, so those
        variants' accent-fill/-on-fill blocks reuse it. Only neutral needs a dedicated loud fill. */
@@ -86,6 +89,14 @@ export const styles = css `
     color: var(--lyra-button-accent);
     border-color: transparent;
   }
+  :host([appearance='quiet']) [part='base'] {
+    background: transparent;
+    color: var(--lyra-button-quiet-text);
+    border-color: var(--lyra-button-quiet-border);
+  }
+  :host([appearance='quiet']) [part='base']:not(:disabled):hover {
+    background: var(--lyra-color-surface);
+  }
   [part='base']:disabled {
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
@@ -117,6 +128,12 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
   }
+  :host([size='2xs']) [part='base'] {
+    padding-inline: var(--lyra-space-2xs);
+    padding-block: var(--lyra-space-2xs);
+    font-size: var(--lyra-font-size-2xs);
+    min-block-size: var(--lyra-button-size-2xs);
+  }
   :host([size='xs']) [part='base'] {
     padding-inline: var(--lyra-space-xs);
     padding-block: var(--lyra-space-2xs);

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

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