@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/chat-composer/chat-composer.js

@@ -60,7 +60,12 @@ function stopIcon() {
  * border at runtime (`resizeTextarea()`) rather than assuming a fixed
  * px-per-row constant, so it stays correct under a consumer's own font-size/
  * line-height overrides. It grows between `min-rows` and `max-rows`, then
- * switches to internal scrolling.
+ * switches to internal scrolling. A `ResizeObserver` on the textarea itself
+ * re-runs the same fit whenever its *width* changes (a responsive
+ * breakpoint, a sidebar toggling, a window resize, an orientation change)
+ * even though `value`/`min-rows`/`max-rows` never did -- a narrower box
+ * wraps the same text across more lines, so the previously-fitted height
+ * would otherwise go stale and clip content with no scrollbar to reveal it.
  *
  * Enter-to-send (only active while `submit-on-enter` is true, the default):
  * plain Enter submits and is prevented from inserting a newline; Shift+Enter
@@ -97,8 +102,9 @@ function stopIcon() {
  * @csspart action-button - The built-in send/stop button. Absent from the accessibility tree's meaningful content whenever `trailing` has assigned content. Style its busy treatment via `:host([status='sending'])`/`:host([status='streaming'])`.
  */
 export class LyraChatComposer extends FormAssociated(LyraElement) {
+    static { this.styles = [LyraElement.styles, styles]; }
     constructor() {
-        super(...arguments);
+        super();
         this.placeholder = '';
         this.minRows = 1;
         this.maxRows = 8;
@@ -107,6 +113,7 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
         this.hasLeadingSlot = false;
         this.hasChipsSlot = false;
         this.hasTrailingSlot = false;
+        this.touched = false;
         this.onTextareaInput = (e) => {
             this.value = e.target.value;
             this.emit('lyra-input', { value: this.value });
@@ -154,8 +161,13 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
         this.onTrailingSlotChange = (e) => {
             this.hasTrailingSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
+        this.onTextareaBlur = () => {
+            this.touched = true;
+        };
+        this.addEventListener('invalid', () => {
+            this.touched = true;
+        });
     }
-    static { this.styles = [LyraElement.styles, styles]; }
     willUpdate() {
         if (!this.hasUpdated) {
             this.hasLeadingSlot = this.hasSlotted('leading');
@@ -166,6 +178,14 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.resizeTextarea();
+        this.armTextareaResizeObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.textareaResizeObserver?.disconnect();
+        if (this.textareaResizeRaf !== undefined)
+            cancelAnimationFrame(this.textareaResizeRaf);
+        this.textareaResizeRaf = undefined;
     }
     updated(changed) {
         super.updated(changed);
@@ -173,6 +193,10 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
             this.resizeTextarea();
         }
     }
+    formResetCallback() {
+        super.formResetCallback();
+        this.touched = false;
+    }
     hasSlotted(name) {
         return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
     }
@@ -209,6 +233,56 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
         ta.style.height = `${next}px`;
         ta.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';
     }
+    /**
+     * Re-fits the textarea whenever its own box *width* changes, independent
+     * of any `value`/`min-rows`/`max-rows` update -- `updated()` above only
+     * reacts to those, so a pure layout change (a responsive breakpoint, a
+     * sidebar collapsing/expanding, a window resize, an orientation change)
+     * would otherwise leave the height pinned at whatever it last was, even
+     * though the same text now wraps across a different number of lines.
+     * Mirrors split.ts's `collapseResizeObserver`/virtual-list.ts's
+     * `containerResizeObserver`/lite-chart.ts's `resizeObserver`.
+     *
+     * Only reacts to an actual inline-size change rather than calling
+     * `resizeTextarea()` unconditionally on every callback: `resizeTextarea()`
+     * itself sets `ta.style.height`, a *block*-size change on the very element
+     * being observed, which would otherwise re-trigger this same observer
+     * every tick. Diffing against the last-seen width (same technique as
+     * split.ts keying its collapse state off `contentBoxSize[0].inlineSize`)
+     * keeps a same-width, height-only callback from doing anything.
+     *
+     * The actual recompute is deferred one animation frame rather than run
+     * synchronously inside the callback: `ResizeObserver`'s spec re-delivers,
+     * within the same notification pass, to any observed element resized by
+     * its own callback -- mutating `ta.style.height` synchronously here would
+     * do exactly that to the very box just observed, and the browser reports
+     * it as "ResizeObserver loop completed with undelivered notifications"
+     * (a real, user-visible console error, not just noise). Deferring the
+     * mutation to the next frame -- outside that notification pass -- avoids
+     * ever resizing the observed element from inside its own callback.
+     */
+    armTextareaResizeObserver() {
+        const ta = this.textareaEl;
+        if (!ta || this.textareaResizeObserver)
+            return;
+        let lastWidth = ta.getBoundingClientRect().width;
+        this.textareaResizeObserver = new ResizeObserver((entries) => {
+            const box = entries[0]?.contentBoxSize?.[0];
+            const width = box ? box.inlineSize : (entries[0]?.contentRect.width ?? lastWidth);
+            // A sub-pixel-only difference (common with fractional layout/zoom)
+            // isn't worth a recompute.
+            if (Math.abs(width - lastWidth) < 0.5)
+                return;
+            lastWidth = width;
+            if (this.textareaResizeRaf !== undefined)
+                cancelAnimationFrame(this.textareaResizeRaf);
+            this.textareaResizeRaf = requestAnimationFrame(() => {
+                this.textareaResizeRaf = undefined;
+                this.resizeTextarea();
+            });
+        });
+        this.textareaResizeObserver.observe(ta);
+    }
     submit() {
         this.emit('lyra-submit', { value: this.value });
     }
@@ -239,12 +313,16 @@ export class LyraChatComposer extends FormAssociated(LyraElement) {
           <textarea
             part="textarea"
             aria-label=${this.placeholder || 'Message'}
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
             .value=${this.value}
             placeholder=${this.placeholder}
             rows=${Math.max(1, this.minRows || 1)}
+            ?required=${this.required}
             ?disabled=${this.effectiveDisabled}
             @input=${this.onTextareaInput}
             @keydown=${this.onTextareaKeyDown}
+            @blur=${this.onTextareaBlur}
           ></textarea>
           <span part="trailing">
             <slot name="trailing" @slotchange=${this.onTrailingSlotChange}></slot>
@@ -279,6 +357,9 @@ __decorate([
 __decorate([
     state()
 ], LyraChatComposer.prototype, "hasTrailingSlot", void 0);
+__decorate([
+    state()
+], LyraChatComposer.prototype, "touched", void 0);
 __decorate([
     query('textarea')
 ], LyraChatComposer.prototype, "textareaEl", void 0);

package/dist/components/chat-composer/chat-composer.styles.js

@@ -17,7 +17,17 @@ export const styles = css `
   [part='base']:focus-within {
     border-color: var(--lyra-color-brand);
   }
-  :host([disabled]) [part='base'] {
+  /* :host(:disabled), not :host([disabled]) -- this is a form-associated
+     custom element (FormAssociated mixin -> static formAssociated = true),
+     so the UA computes its disabled state (and therefore :disabled/:enabled
+     matching) the same way it does for a native form control: from its own
+     disabled content attribute *or* an ancestor <fieldset disabled>'s
+     cascade. Keying this off the attribute selector only ever matched the
+     first case -- a composer disabled purely via an ancestor fieldset had
+     effectiveDisabled correctly gating the textarea/button underneath, but
+     the card around them still rendered at full opacity with a normal
+     cursor. */
+  :host(:disabled) [part='base'] {
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }

package/dist/components/chat-message/chat-message.d.ts

@@ -49,7 +49,7 @@ export type ChatMessageStatus = 'sending' | 'sent' | 'failed' | 'streaming';
  * @slot attachments - File/image attachment chips, rendered below the message body.
  * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
  * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
- * @csspart bubble - The message bubble root.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
  * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
  * @csspart avatar - The wrapper around the `avatar` slot.
  * @csspart badges - The wrapper around the `badges` slot.
@@ -65,11 +65,14 @@ export type ChatMessageStatus = 'sending' | 'sent' | 'failed' | 'streaming';
  */
 export declare class LyraChatMessage extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        status: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
     /** Who authored the message. Reflects to `data-role` — see the class doc. */
     role: ChatMessageRole;
-    /** Delivery/generation state. Drives the footer's status dot/text and, for
-     *  `"failed"`, the bubble's danger treatment and the built-in retry button. */
-    status: ChatMessageStatus;
     /** When the message was sent/received. Accepts a `Date` or anything
      *  `new Date()` can parse (e.g. an ISO 8601 string); invalid input is
      *  treated the same as unset (no timestamp rendered). */
@@ -91,7 +94,32 @@ export declare class LyraChatMessage extends LyraElement {
     private hasAttachmentsSlot;
     private hasActionsSlot;
     private liveRegion?;
+    private bubbleEl?;
     private readonly bodyId;
+    private _status;
+    /** The value `status` held immediately before its current one, recorded
+     *  at the point of assignment in the setter below -- *not* derived from
+     *  Lit's `changed`/`changedProperties`, which only ever remembers the
+     *  single oldest value seen since the last completed update. Without this,
+     *  setting `status` to `"streaming"` and then immediately overwriting it
+     *  (e.g. to `"sent"`) within the same task, with no render in between,
+     *  would silently lose the `"streaming"` intermediate value before
+     *  `announceStatusChange` ever gets to see it. */
+    private previousStatus;
+    /** True only until the component's first completed update -- gates the
+     *  status-change announcement below so a message never announces
+     *  whatever status it happens to mount with (mirrors the same "not on
+     *  first paint" intent `willUpdate`'s `!this.hasUpdated` check has for the
+     *  slot-presence flags, except `this.hasUpdated` itself is already `true`
+     *  by the time `updated()` runs for the first time, so it can't be reused
+     *  here). */
+    private isMounting;
+    /** Delivery/generation state. Drives the footer's status dot/text and,
+     *  for `"failed"`, the bubble's danger treatment and the built-in retry
+     *  button. Declared via `static properties` above with a hand-written
+     *  accessor (see `previousStatus`). */
+    get status(): ChatMessageStatus;
+    set status(value: ChatMessageStatus);
     protected willUpdate(): void;
     protected updated(changed: PropertyValues): void;
     private hasSlotted;

package/dist/components/chat-message/chat-message.js

@@ -95,7 +95,7 @@ const STATUS_TEXT = {
  * @slot attachments - File/image attachment chips, rendered below the message body.
  * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
  * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
- * @csspart bubble - The message bubble root.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
  * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
  * @csspart avatar - The wrapper around the `avatar` slot.
  * @csspart badges - The wrapper around the `badges` slot.
@@ -114,9 +114,6 @@ export class LyraChatMessage extends LyraElement {
         super(...arguments);
         /** Who authored the message. Reflects to `data-role` — see the class doc. */
         this.role = 'assistant';
-        /** Delivery/generation state. Drives the footer's status dot/text and, for
-         *  `"failed"`, the bubble's danger treatment and the built-in retry button. */
-        this.status = 'sent';
         /** Shows the built-in collapse/expand toggle in the header. */
         this.collapsible = false;
         /** Whether the message body is currently hidden. Effective whenever set,
@@ -129,6 +126,24 @@ export class LyraChatMessage extends LyraElement {
         this.hasAttachmentsSlot = false;
         this.hasActionsSlot = false;
         this.bodyId = nextId('chat-message-body');
+        this._status = 'sent';
+        /** The value `status` held immediately before its current one, recorded
+         *  at the point of assignment in the setter below -- *not* derived from
+         *  Lit's `changed`/`changedProperties`, which only ever remembers the
+         *  single oldest value seen since the last completed update. Without this,
+         *  setting `status` to `"streaming"` and then immediately overwriting it
+         *  (e.g. to `"sent"`) within the same task, with no render in between,
+         *  would silently lose the `"streaming"` intermediate value before
+         *  `announceStatusChange` ever gets to see it. */
+        this.previousStatus = 'sent';
+        /** True only until the component's first completed update -- gates the
+         *  status-change announcement below so a message never announces
+         *  whatever status it happens to mount with (mirrors the same "not on
+         *  first paint" intent `willUpdate`'s `!this.hasUpdated` check has for the
+         *  slot-presence flags, except `this.hasUpdated` itself is already `true`
+         *  by the time `updated()` runs for the first time, so it can't be reused
+         *  here). */
+        this.isMounting = true;
         this.onAvatarSlotChange = (e) => {
             this.hasAvatarSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
@@ -146,10 +161,39 @@ export class LyraChatMessage extends LyraElement {
             this.emit('lyra-collapse-toggle', this.collapsed);
         };
         this.onRetryClick = () => {
+            // A `lyra-retry` listener is documented to respond by flipping `status`
+            // away from `"failed"`, which removes this very button on the next
+            // render. Move focus to the always-rendered bubble first, synchronously,
+            // so it lands somewhere stable inside the message instead of silently
+            // reverting to `<body>` once the button it was on disappears.
+            this.bubbleEl?.focus();
             this.emit('lyra-retry');
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    // `status` needs a hand-written accessor (see `previousStatus` below) so
+    // it's declared via `static properties` + `noAccessor` rather than
+    // `@property()` directly -- the same pattern `lyra-playback`'s `playing`
+    // uses for the identical reason (a property whose setter must run real
+    // logic on every assignment, not just on the next completed render).
+    static { this.properties = {
+        status: { reflect: true, noAccessor: true },
+    }; }
+    /** Delivery/generation state. Drives the footer's status dot/text and,
+     *  for `"failed"`, the bubble's danger treatment and the built-in retry
+     *  button. Declared via `static properties` above with a hand-written
+     *  accessor (see `previousStatus`). */
+    get status() {
+        return this._status;
+    }
+    set status(value) {
+        const old = this._status;
+        if (value === old)
+            return;
+        this.previousStatus = old;
+        this._status = value;
+        this.requestUpdate('status', old);
+    }
     willUpdate() {
         if (!this.hasUpdated) {
             this.hasAvatarSlot = this.hasSlotted('avatar');
@@ -158,15 +202,11 @@ export class LyraChatMessage extends LyraElement {
             this.hasActionsSlot = this.hasSlotted('actions');
         }
     }
-    // `changed.get('status')` is `undefined` on the very first update (Lit
-    // only records the *first* old value seen since the last completed
-    // update, and the constructor's own field-initializer assignment is that
-    // first change, from the truly-unset internal slot) -- so this naturally
-    // skips announcing whatever status a message happens to mount with, and
-    // only ever fires for a real, later transition.
     updated(changed) {
-        if (changed.has('status')) {
-            this.announceStatusChange(changed.get('status'));
+        const wasMounting = this.isMounting;
+        this.isMounting = false;
+        if (!wasMounting && changed.has('status')) {
+            this.announceStatusChange(this.previousStatus);
         }
     }
     hasSlotted(name) {
@@ -182,7 +222,7 @@ export class LyraChatMessage extends LyraElement {
         return this.status === 'sent' ? undefined : STATUS_TEXT[this.status];
     }
     announceStatusChange(previous) {
-        if (previous === undefined || previous === this.status)
+        if (previous === this.status)
             return;
         const region = this.liveRegion;
         if (!region)
@@ -205,7 +245,7 @@ export class LyraChatMessage extends LyraElement {
         // alone covers that case here too.
         const showFooter = Boolean(statusText) || Boolean(ts) || this.hasActionsSlot;
         return html `
-      <div part="bubble">
+      <div part="bubble" tabindex="-1">
         <div part="header" ?hidden=${!showHeader}>
           <span part="avatar" ?hidden=${!this.hasAvatarSlot}
             ><slot name="avatar" @slotchange=${this.onAvatarSlotChange}></slot
@@ -258,9 +298,6 @@ export class LyraChatMessage extends LyraElement {
 __decorate([
     property({ reflect: true, attribute: 'data-role' })
 ], LyraChatMessage.prototype, "role", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraChatMessage.prototype, "status", void 0);
 __decorate([
     property({ attribute: false })
 ], LyraChatMessage.prototype, "timestamp", void 0);
@@ -288,4 +325,7 @@ __decorate([
 __decorate([
     query('lyra-live-region')
 ], LyraChatMessage.prototype, "liveRegion", void 0);
+__decorate([
+    query('[part="bubble"]')
+], LyraChatMessage.prototype, "bubbleEl", void 0);
 defineElement('chat-message', LyraChatMessage);

package/dist/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
+import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 /**
  * `<lyra-checkbox>` — a boolean form control. Structurally the same idea as
@@ -27,22 +27,78 @@ import { LyraElement } from '../../internal/lyra-element.js';
 export declare class LyraCheckbox extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     static formAssociated: boolean;
-    checked: boolean;
-    indeterminate: boolean;
-    disabled: boolean;
-    required: boolean;
-    name: string;
-    value: string;
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        indeterminate: {
+            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 touched;
     private internals;
+    private validityController;
+    private labelObserver?;
     private _defaultChecked;
     private _defaultCaptured;
+    private _fieldsetDisabled;
+    private _name;
+    private _checked;
+    private _indeterminate;
+    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 indeterminate(): boolean;
+    set indeterminate(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;
+    disconnectedCallback(): void;
     protected willUpdate(): void;
     private updateValidity;
-    protected updated(changed: PropertyValues): void;
+    private reflectInvalid;
+    private syncFormState;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
     formDisabledCallback(disabled: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
@@ -50,6 +106,8 @@ export declare class LyraCheckbox extends LyraElement {
     private onClick;
     private onKeyDown;
     private onSlotChange;
+    private recomputeHasLabelSlot;
+    private onBlur;
     render(): TemplateResult;
 }
 declare global {