@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/checkbox/checkbox.js

@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, svg, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
 import { styles } from './checkbox.styles.js';
 // Mirrors the shared icon set's viewBox/stroke conventions
 // (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without importing
@@ -77,18 +78,85 @@ function indeterminateGlyph() {
 export class LyraCheckbox extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     static { this.formAssociated = true; }
+    static { this.properties = {
+        checked: { type: Boolean, reflect: true, noAccessor: true },
+        indeterminate: { type: Boolean, reflect: true, noAccessor: true },
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+        name: { reflect: true, noAccessor: true },
+        required: { type: Boolean, reflect: true, noAccessor: true },
+        value: { noAccessor: true },
+    }; }
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(next) {
+        const old = this._checked;
+        this._checked = Boolean(next);
+        this.syncFormState();
+        this.requestUpdate('checked', old);
+    }
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(next) {
+        const old = this._indeterminate;
+        this._indeterminate = Boolean(next);
+        this.syncFormState();
+        this.requestUpdate('indeterminate', old);
+    }
+    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);
+    }
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(next) {
+        const old = this._required;
+        this._required = Boolean(next);
+        this.toggleAttribute('required', this._required);
+        this.updateValidity();
+        this.requestUpdate('required', old);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? 'on';
+        this.syncFormState();
+        this.requestUpdate('value', old);
+    }
     constructor() {
         super();
-        this.checked = false;
         // Visual-only mixed state, matching native `<input type="checkbox">`
         // semantics: it does not affect `checked`'s own value, and a user
         // interaction (click/keyboard) clears it back to `false`, exactly like the
         // native control does.
-        this.indeterminate = 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 box — can
         // collapse to nothing for an icon-only/aria-label-only checkbox instead of
@@ -96,10 +164,14 @@ export class LyraCheckbox extends LyraElement {
         // `assignedNodes` (not `assignedElements`) is checked — the common case is
         // a bare slotted text label, e.g. `<lyra-checkbox>Accept terms</lyra-checkbox>`.
         this.hasLabelSlot = false;
-        // What `form.reset()` restores to — captured once, from whatever `checked`
-        // 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
+        // Set on the control's first `blur`; gates the `data-invalid`/`aria-invalid`
+        // reflection below so validity styling never flashes on first render,
+        // mirroring `<lyra-combobox>`/`<lyra-select>`'s identical `touched` field.
+        this.touched = false;
+        // What `form.reset()` restores to — captured once from the declarative
+        // `checked` content attribute at first connect. A pre-connect `.checked`
+        // property assignment changes live state but not the reset default, matching
+        // native `checked`/`defaultChecked` semantics. `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 reflects a later
@@ -108,11 +180,18 @@ export class LyraCheckbox extends LyraElement {
         // and `<lyra-switch>`'s identical `_defaultChecked`.
         this._defaultChecked = false;
         this._defaultCaptured = false;
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._checked = false;
+        this._indeterminate = false;
+        this._disabled = false;
+        this._required = false;
+        this._value = 'on';
         this.onClick = () => {
             this.toggle();
         };
         this.onKeyDown = (e) => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             // Space/Enter both activate, matching lyra-switch's onKeyDown (and
             // lyra-table's sortable-header/row convention) for role-based clickable
@@ -123,19 +202,50 @@ export class LyraCheckbox extends LyraElement {
                 this.toggle();
             }
         };
-        this.onSlotChange = (e) => {
-            const nodes = e.target.assignedNodes({ flatten: true });
-            this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
+        this.onSlotChange = () => {
+            this.recomputeHasLabelSlot();
+        };
+        this.onBlur = () => {
+            this.touched = true;
+            this.reflectInvalid();
         };
         this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.syncFormState();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        return this.renderRoot?.querySelector('[part="base"]') ?? null;
     }
     connectedCallback() {
         super.connectedCallback();
         if (!this._defaultCaptured) {
             this._defaultCaptured = true;
-            this._defaultChecked = this.checked;
+            this._defaultChecked = this.hasAttribute('checked');
         }
         this.updateValidity();
+        this.labelObserver = new MutationObserver(() => this.recomputeHasLabelSlot());
+        this.labelObserver.observe(this, { childList: true, subtree: true, characterData: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.labelObserver?.disconnect();
+        this.labelObserver = undefined;
     }
     willUpdate() {
         // Seed `hasLabelSlot` from the light-DOM children synchronously before
@@ -148,28 +258,44 @@ export class LyraCheckbox extends LyraElement {
     }
     updateValidity() {
         if (this.required && !this.checked) {
-            this.internals.setValidity({ valueMissing: true }, 'Please check this box if you want to continue.');
+            this.validityController.setValidity({ valueMissing: true }, 'Please check this box if you want to continue.');
         }
         else {
-            this.internals.setValidity({});
+            this.validityController.setValidity({});
         }
+        this.reflectInvalid();
     }
-    updated(changed) {
-        if (changed.has('checked') || changed.has('value')) {
-            // A native checkbox submits its `value` content attribute (default
-            // "on") only while checked, and contributes nothing at all — not even
-            // an empty string — while unchecked.
-            this.internals.setFormValue(this.checked ? this.value : null);
-        }
-        if (changed.has('checked') || changed.has('required')) {
-            this.updateValidity();
-        }
+    // Keeps `data-invalid` (styling hook) in lockstep with `aria-invalid`
+    // (rendered from the same expression in `render()`) any time validity
+    // could have changed, rather than waiting on Lit's async `updated()` --
+    // consistent with this component's already-synchronous
+    // `syncFormState()`/setter shape.
+    reflectInvalid() {
+        this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+    }
+    syncFormState() {
+        // A native checkbox submits its `value` content attribute (default
+        // "on") only while checked, and contributes nothing at all — not even
+        // an empty string — while unchecked.
+        const state = `${this.checked ? 'checked' : 'unchecked'}${this.indeterminate ? '/indeterminate' : ''}`;
+        this.internals.setFormValue(this.checked ? this.value : null, state);
+        this.updateValidity();
     }
     formResetCallback() {
         this.checked = this._defaultChecked;
     }
+    formStateRestoreCallback(state, _mode) {
+        const oldChecked = this._checked;
+        const oldIndeterminate = this._indeterminate;
+        this._checked = state === 'checked' || state === 'checked/indeterminate';
+        this._indeterminate = state === 'checked/indeterminate' || state === 'unchecked/indeterminate';
+        this.syncFormState();
+        this.requestUpdate('checked', oldChecked);
+        this.requestUpdate('indeterminate', oldIndeterminate);
+    }
     formDisabledCallback(disabled) {
-        this.disabled = disabled;
+        this._fieldsetDisabled = disabled;
+        this.requestUpdate();
     }
     checkValidity() {
         return this.internals.checkValidity();
@@ -178,25 +304,37 @@ export class LyraCheckbox extends LyraElement {
         return this.internals.reportValidity();
     }
     toggle() {
-        if (this.disabled)
+        if (this.effectiveDisabled)
             return;
         this.checked = !this.checked;
         this.indeterminate = false;
         this.emit('lyra-change', { checked: this.checked });
     }
+    // Shared by `onSlotChange` (the "set of distributed nodes changed" case)
+    // and `labelObserver` (the "an already-slotted node mutated in place"
+    // case) so both paths agree on what counts as real label content.
+    recomputeHasLabelSlot() {
+        const slot = this.renderRoot.querySelector('slot');
+        if (!slot)
+            return;
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
+    }
     render() {
         const mixed = this.indeterminate;
         return html `
       <span
         part="base"
         role="checkbox"
-        tabindex=${this.disabled ? '-1' : '0'}
+        tabindex=${this.effectiveDisabled ? '-1' : '0'}
         aria-checked=${mixed ? 'mixed' : this.checked ? 'true' : 'false'}
         aria-required=${this.required ? 'true' : nothing}
-        aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+        aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
         aria-label=${this.getAttribute('aria-label') || nothing}
         @click=${this.onClick}
         @keydown=${this.onKeyDown}
+        @blur=${this.onBlur}
       >
         <span part="box"> ${mixed ? indeterminateGlyph() : this.checked ? checkmarkGlyph() : nothing} </span>
         <span part="label" ?hidden=${!this.hasLabelSlot}>
@@ -206,25 +344,10 @@ export class LyraCheckbox extends LyraElement {
     `;
     }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCheckbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCheckbox.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCheckbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCheckbox.prototype, "required", void 0);
-__decorate([
-    property()
-], LyraCheckbox.prototype, "name", void 0);
-__decorate([
-    property()
-], LyraCheckbox.prototype, "value", void 0);
 __decorate([
     state()
 ], LyraCheckbox.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], LyraCheckbox.prototype, "touched", void 0);
 defineElement('checkbox', LyraCheckbox);

package/dist/components/checkbox/checkbox.styles.js

@@ -14,7 +14,7 @@ export const styles = css `
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);
   }
-  :host([disabled]) [part='base'] {
+  :host(:disabled) [part='base'] {
     cursor: not-allowed;
     opacity: var(--lyra-opacity-disabled);
   }
@@ -40,7 +40,7 @@ export const styles = css `
       background-color var(--lyra-transition-fast),
       border-color var(--lyra-transition-fast);
   }
-  :host(:not([disabled])) [part='base']:hover [part='box'] {
+  :host(:not(:disabled)) [part='base']:hover [part='box'] {
     border-color: var(--lyra-color-brand);
   }
   :host([checked]) [part='box'],
@@ -48,6 +48,13 @@ export const styles = css `
     background: var(--lyra-color-brand);
     border-color: var(--lyra-color-brand);
   }
+  /* Gives a required-but-unmet checkbox a persistent visible affordance --
+     matching lyra-combobox/lyra-select's data-invalid styling hook --
+     beyond the transient native validation-bubble popup, which only shows
+     momentarily around reportValidity()/form submission. */
+  :host([data-invalid]) [part='box'] {
+    border-color: var(--lyra-color-danger);
+  }
 
   [part='checkmark'] {
     display: block;

package/dist/components/chip/chip-group.js

@@ -72,10 +72,16 @@ export class LyraChipGroup extends LyraElement {
     firstUpdated() {
         // Fallback reconciliation for slot-forwarding / engines that don't fire
         // `slotchange` for content present at parse time — same idiom as
-        // `<lyra-source-list>`'s identical `firstUpdated`.
+        // `<lyra-source-list>`'s identical `firstUpdated`. This can't move to
+        // `willUpdate` (the `<slot>` doesn't exist in the shadow DOM until after
+        // the first render), so when it actually corrects `childCount` (the
+        // slot-forwarding case, where `this.children.length` under-counts) it
+        // unavoidably schedules a second update pass — `updated()` (below) always
+        // runs right after this and already recomputes visibility from this same
+        // corrected count, so there's nothing left for an explicit call here to
+        // do.
         const slot = this.shadowRoot.querySelector('slot');
         this.childCount = slot.assignedElements({ flatten: true }).length;
-        this.syncChildVisibility();
     }
     updated() {
         this.syncChildVisibility();

package/dist/components/chip/chip.js

@@ -72,10 +72,17 @@ export class LyraChip extends LyraElement {
     }
     // Only the default slot's own content counts toward the remove button's
     // accessible name — text incidentally living inside the (decorative)
-    // `icon` slot shouldn't leak into "Remove {text}".
+    // `icon` slot shouldn't leak into "Remove {text}". Restricting to Text and
+    // Element nodes also excludes Comment nodes: when a consumer interpolates
+    // the label via a lit-html expression (`html\`<lyra-chip>${label}</lyra-chip>\``,
+    // the ordinary way a data-driven label gets bound) rather than a static
+    // string, lit-html inserts a marker Comment node alongside the Text node in
+    // the light DOM. That comment's own (non-empty) data is internal
+    // bookkeeping, not label content, so it must never reach `textContent`.
     get labelText() {
         return Array.from(this.childNodes)
-            .filter((n) => !(n instanceof Element && n.getAttribute('slot') === 'icon'))
+            .filter((n) => (n.nodeType === Node.TEXT_NODE || n instanceof Element) &&
+            !(n instanceof Element && n.getAttribute('slot') === 'icon'))
             .map((n) => n.textContent ?? '')
             .join('')
             .trim();

package/dist/components/citation-badge/citation-badge.js

@@ -29,6 +29,17 @@ const STATUS_LABEL = {
 // keyboard blur — those are intentional dismissals, not transient pointer
 // travel, so they close immediately.
 const HIDE_DELAY_MS = 200;
+// The default slot's preview content is often plain text (see the Statuses
+// story: "No source has confirmed this yet.") with no wrapping element at
+// all, so an Element-only check (e.g. Array.from(children)/assignedElements)
+// never counts it. Mirrors result-field.ts's hasRealContent: a node counts as
+// real preview content if it's an element not assigned to some other named
+// slot, or non-whitespace text.
+function isRealPreviewNode(n) {
+    return n.nodeType === Node.ELEMENT_NODE
+        ? !n.hasAttribute('slot')
+        : (n.textContent ?? '').trim().length > 0;
+}
 /**
  * `<lyra-citation-badge>` — an inline `[n]` citation marker with a hover/
  * focus preview popover and confidence/verification-status coloring. Used
@@ -113,7 +124,7 @@ export class LyraCitationBadge extends LyraElement {
         this.hovering = false;
         this.focused = false;
         this.onSlotChange = (e) => {
-            this.hasPreviewSlot = e.target.assignedElements({ flatten: true }).length > 0;
+            this.hasPreviewSlot = e.target.assignedNodes({ flatten: true }).some(isRealPreviewNode);
             // The slot can be emptied out from under an already-open popover (e.g. a
             // consumer clearing preview content asynchronously) — nothing left to
             // show, so don't leave an empty panel floating open.
@@ -183,7 +194,7 @@ export class LyraCitationBadge extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     willUpdate() {
         if (!this.hasUpdated) {
-            this.hasPreviewSlot = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+            this.hasPreviewSlot = Array.from(this.childNodes).some(isRealPreviewNode);
         }
     }
     updated(changed) {
@@ -214,10 +225,17 @@ export class LyraCitationBadge extends LyraElement {
     // method names on every HTMLElement subclass, so reusing them here would
     // be a same-name-different-signature override error.
     showPreview() {
-        if (!this.hasPreviewSlot || this.popoverOpen)
+        if (!this.hasPreviewSlot)
             return;
+        // Cancel any pending hide unconditionally -- including when the popover
+        // is already open -- so hover/focus returning within the grace period
+        // (pointerenter -> pointerleave -> pointerenter before HIDE_DELAY_MS)
+        // actually cancels the scheduled hide instead of leaving it armed to
+        // fire later regardless of the now-restored hover/focus state.
         clearTimeout(this.hideTimer);
         this.hideTimer = undefined;
+        if (this.popoverOpen)
+            return;
         this.popoverOpen = true;
     }
     scheduleHidePreview() {

package/dist/components/code-block/code-block.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+import { type ShikiLanguageInput } from './code-loader.js';
 import '../skeleton/skeleton.js';
 /**
  * `<lyra-code-block>` — fenced code display with optional lazy syntax
@@ -21,11 +22,35 @@ import '../skeleton/skeleton.js';
  * is already a perfectly readable placeholder for it, so a second
  * loading-chrome state would add complexity for little practical benefit.
  *
+ * `languages` is an additive, opt-in escape hatch from that default path for
+ * a consumer whose language set is fixed and known ahead of time: a map of
+ * language id to an already-imported shiki grammar module (e.g. `import bash
+ * from 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,
+ * this component seeds a fine-grained `createHighlighterCore()` highlighter
+ * with *only* the pre-supplied grammars (see `code-loader.ts`'s
+ * `loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`
+ * and its dynamic per-language `loadLanguage()` import. The payoff isn't
+ * runtime cost — the default dynamic-import path is already well-optimized
+ * for that — it's *build output*: shiki's main entry point bundles a dynamic
+ * `import()` per bundled language (~200 of them) because a bundler can't
+ * statically narrow which of those a `loadLanguage(lang: string)` call might
+ * request at runtime, so it conservatively emits a build-output chunk for
+ * every one of them. `shiki/core`'s fine-grained API has no such table — a
+ * bundler only ever sees the exact grammar modules `languages` itself
+ * `import`s, so a consumer who pins its full language set this way trades a
+ * hand-maintained list for a build output scoped to just those languages
+ * instead of shiki's entire bundled set. A language requested but absent
+ * from `languages` still falls back to the ordinary dynamic-import path
+ * unchanged, so this is a partial opt-in, not a replacement for it.
+ *
  * @customElement lyra-code-block
  * @event lyra-copy - The copy button was activated. `detail: { text }` is
  *   always the raw `code` value (never the highlighted HTML), and always
  *   fires regardless of whether the actual OS clipboard write succeeded —
  *   same convention as `<lyra-json-viewer>`'s own copy button.
+ * @event lyra-toggle - The collapse/expand header button was activated.
+ *   `detail: { collapsed }` — same event name and shape convention as
+ *   `<lyra-thinking-panel>`'s own `lyra-toggle`.
  * @csspart base - The outer container.
  * @csspart header - The row above the code (filename/language/copy/toggle),
  *   present whenever there's anything to put in it.
@@ -63,6 +88,18 @@ export declare class LyraCodeBlock extends LyraElement {
     /** A CSS length (e.g. `"20rem"`); once set, the code scrolls internally
      *  past this height instead of growing the page. */
     maxHeight: string;
+    /** A map of language id to an already-imported shiki grammar module's
+     *  default export (e.g. `{ bash: bashGrammar }` where `bashGrammar` came
+     *  from a module-scope `import bash from 'shiki/langs/bash.mjs'`). When
+     *  `language` matches a key here, highlighting for it is seeded from
+     *  exactly this pre-supplied grammar via a fine-grained
+     *  `createHighlighterCore()` highlighter, bypassing the default
+     *  `loadShikiHighlighter()` singleton and its dynamic per-language
+     *  `loadLanguage()` import entirely for that language — see the class doc
+     *  above for the build-output rationale. A `language` value absent from
+     *  this map (or left unset, or when `languages` itself is unset) falls
+     *  back to that default dynamic-import path unchanged. */
+    languages?: Record<string, ShikiLanguageInput>;
     private highlightedHtml;
     private shikiReady;
     private justCopied;
@@ -72,6 +109,7 @@ export declare class LyraCodeBlock extends LyraElement {
     private readonly bodyId;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private preSuppliedGrammar;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(): void;
     private syncHighlight;