@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/code-block/code-loader.js

@@ -0,0 +1,142 @@
+/**
+ * The two bundled themes every highlighter instance is seeded with, so a
+ * single `codeToHtml()` call can emit a light *and* dark rendering at once
+ * (shiki's "dual themes" feature — https://shiki.style/guide/dual-themes —
+ * rather than maintaining two separately-highlighted copies). `github-light`/
+ * `github-dark` are well-known, reasonably neutral, and already part of
+ * shiki's bundled theme set, so picking them costs no extra install. See the
+ * `prefers-color-scheme` block in `code-block.styles.ts` for how the dark
+ * variant actually activates.
+ */
+export const SHIKI_LIGHT_THEME = 'github-light';
+export const SHIKI_DARK_THEME = 'github-dark';
+/** Passed directly as `codeToHtml()`'s `themes` option — see `tokenize()` in `code-block.ts`. */
+export const SHIKI_THEMES = {
+    light: SHIKI_LIGHT_THEME,
+    dark: SHIKI_DARK_THEME,
+};
+let highlighter;
+/** Language ids that have already failed `loadLanguage()` once — avoids
+ *  retrying (and re-throwing on) the same unrecognized `language` value on
+ *  every re-render of every `<lyra-code-block>` that requests it. Shared
+ *  across every highlighter instance the page ever creates (there's only
+ *  ever one, see `loadShikiHighlighter()` below), so this never needs
+ *  resetting alongside it. */
+const unsupportedLanguages = new Set();
+/**
+ * Lazily loads the optional peer dependency `shiki` once per page and builds
+ * (and caches) a single `Highlighter` instance seeded with `SHIKI_THEMES` and
+ * *zero* language grammars. Creating the highlighter — compiling its regex
+ * engine, parsing the seed themes — is the expensive part, not the dynamic
+ * `import()` itself, so the created instance is what's cached here rather
+ * than just the resolved module (one level deeper than `map-loader.ts`'s
+ * single-dependency cached-promise shape, which this otherwise mirrors).
+ * Resolves to `null` (with a one-time `console.warn`) if shiki isn't
+ * installed — `<lyra-code-block>` falls back to plain unhighlighted text in
+ * that case, which is a fully supported default, not a degraded mode. No
+ * language grammar is loaded up front; `loadShikiLanguage()` below loads each
+ * one incrementally the first time a `language` value actually requests it.
+ */
+export function loadShikiHighlighter() {
+    if (!highlighter) {
+        highlighter = import('shiki')
+            .then((mod) => mod.createHighlighter({ themes: [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME], langs: [] }))
+            .catch((err) => {
+            console.warn('<lyra-code-block> needs the optional peer dependency `shiki` for syntax highlighting — install it ' +
+                'with `pnpm add shiki`. Code still renders, just unhighlighted, without it:', err);
+            return null;
+        });
+    }
+    return highlighter;
+}
+/**
+ * Ensures `lang` is loaded into `hl`, loading it on demand the first time
+ * it's requested rather than bundling every possible grammar up front —
+ * shiki supports this incrementally via `Highlighter.loadLanguage()`, which
+ * is what keeps this lazy instead of defeating the point of lazy-loading the
+ * peer at all. Resolves `false` (and remembers not to retry) when `lang`
+ * isn't a shiki-recognized grammar id or alias at all, so a caller can fall
+ * back to plain-text rendering instead of retrying an id that can never
+ * succeed on every future render.
+ */
+export async function loadShikiLanguage(hl, lang) {
+    if (hl.getLoadedLanguages().includes(lang))
+        return true;
+    if (unsupportedLanguages.has(lang))
+        return false;
+    try {
+        await hl.loadLanguage(lang);
+        return true;
+    }
+    catch {
+        // Not a shiki-recognized grammar id/alias, or the grammar failed to
+        // load for some other reason — either way, <lyra-code-block> treats an
+        // unrecognized language the same as an unset one (plain text), and
+        // there's nothing more specific a caller could do with the reason.
+        unsupportedLanguages.add(lang);
+        return false;
+    }
+}
+/** One cached `ShikiHighlighterCore` promise per distinct `languages` object
+ *  a caller has passed in — keyed by object identity (not content), so a
+ *  consumer that keeps passing the *same* `languages` map reference (the
+ *  normal case: a module-level constant, not a fresh object literal on every
+ *  render) only ever builds one highlighter for it, same "the highlighter
+ *  itself is the expensive part" rationale as `loadShikiHighlighter()`'s
+ *  single cached instance above. A `WeakMap` lets an abandoned `languages`
+ *  object (and its highlighter) be garbage-collected once nothing else
+ *  references it. */
+const highlighterCores = new WeakMap();
+/**
+ * Builds (and caches — see `highlighterCores` above) a fine-grained
+ * `HighlighterCore` seeded with `SHIKI_THEMES` and *only* the grammars in
+ * `languages`, via shiki's own "fine-grained bundle" recipe:
+ * `createHighlighterCore()` (`shiki/core`) plus an explicit oniguruma engine
+ * (`shiki/engine/oniguruma` + the `shiki/wasm` binary) instead of
+ * `loadShikiHighlighter()`'s `createHighlighter()` (plain `shiki`).
+ *
+ * The point isn't runtime cost — `loadShikiHighlighter()`'s per-language
+ * `loadLanguage()` dynamic import is already well-optimized for that (see its
+ * doc comment). It's *build output*: `shiki`'s main entry point (what
+ * `loadShikiHighlighter()` imports) bundles a lookup table of dynamic
+ * `import()` calls, one per shiki-supported language (~200 of them), because
+ * `loadLanguage(lang: string)` resolves that string against the table at
+ * runtime — a bundler can't statically narrow which of those ~200 entries a
+ * given app will ever actually request, so it conservatively emits a
+ * build-output chunk for every one of them. `shiki/core` has no such
+ * table — a bundler only ever sees the exact grammar modules a caller
+ * `import`s for `languages` itself, so a consumer with a known, fixed
+ * language set gets a build output scoped to just those languages instead of
+ * shiki's full bundled set.
+ *
+ * This is *only* ever consulted for languages present in `languages` — see
+ * `<lyra-code-block>`'s `syncHighlight()`. A language absent from it still
+ * falls back to the ordinary `loadShikiHighlighter()` + `loadShikiLanguage()`
+ * dynamic-import path entirely unchanged, so a caller can pin its own known
+ * set while still letting an unexpected language through. Resolves to `null`
+ * (with a one-time `console.warn`, same convention as `loadShikiHighlighter()`)
+ * if building the fine-grained highlighter fails for any reason.
+ */
+export function loadShikiHighlighterCore(languages) {
+    let cached = highlighterCores.get(languages);
+    if (!cached) {
+        cached = Promise.all([
+            import('shiki/core'),
+            import('shiki/engine/oniguruma'),
+            import('shiki/themes/github-light.mjs'),
+            import('shiki/themes/github-dark.mjs'),
+        ])
+            .then(([{ createHighlighterCore }, { createOnigurumaEngine }, light, dark]) => createHighlighterCore({
+            themes: [light.default, dark.default],
+            langs: Object.values(languages),
+            engine: createOnigurumaEngine(import('shiki/wasm')),
+        }))
+            .catch((err) => {
+            console.warn("<lyra-code-block>'s `languages` property failed to build a fine-grained shiki highlighter — " +
+                'falling back to plain unhighlighted text for the languages it covers:', err);
+            return null;
+        });
+        highlighterCores.set(languages, cached);
+    }
+    return cached;
+}

package/dist/components/combobox/combobox.d.ts

@@ -24,8 +24,11 @@ export type ComboboxSource = (query: string) => Promise<ComboboxSourceRow[]>;
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
  * @slot error - Custom error content.
- * @event change - The selection changed.
- * @event input - The user typed in the filter or changed the selection.
+ * @event {Event} change - The selection changed through user interaction. A bubbling,
+ * composed, non-cancelable Event.
+ * @event {InputEvent | Event} input - The user typed in the filter or changed the selection. Text
+ * edits expose the original InputEvent; selection changes emit a bubbling,
+ * composed, non-cancelable Event.
  * @event lyra-show - The listbox opened.
  * @event lyra-hide - The listbox closed.
  * @event lyra-clear - The value was cleared.
@@ -51,15 +54,30 @@ export declare class LyraCombobox extends LyraElement {
     static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
     static properties: {
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
         value: {
             noAccessor: boolean;
         };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
     };
-    multiple: boolean;
     placeholder: string;
-    disabled: boolean;
-    required: boolean;
-    name: string;
     label: string;
     hint: string;
     errorText: string;
@@ -67,6 +85,10 @@ export declare class LyraCombobox extends LyraElement {
     withClear: boolean;
     maxOptionsVisible: number;
     emptyText: string;
+    /** Status copy shown in the listbox while a `source` fetch is in flight. */
+    loadingText: string;
+    /** Status copy shown when `maxRender` caps the row list; `{n}` is replaced with the hidden count. */
+    overflowText: string;
     filter: OptionFilter | null;
     source: ComboboxSource | null;
     maxRender: number;
@@ -81,30 +103,63 @@ export declare class LyraCombobox extends LyraElement {
     private asyncRows;
     private sourceTimer?;
     private sourceToken;
+    private _sourceWarmed;
     private _selectedLabelCache;
     private _rowsByValue;
     private internals;
+    private validityController;
+    private _fieldsetDisabled;
     private listId;
     private inputId;
     private cleanup?;
     private _isFirstUpdate;
     private _selected;
+    private _multiple;
+    private _disabled;
+    private _required;
     private _defaultSelected;
     private _defaultCaptured;
+    private _restoredStateActive;
+    private _name;
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     connectedCallback(): void;
     protected willUpdate(): void;
+    get name(): string;
+    set name(next: string);
+    get multiple(): boolean;
+    set multiple(next: boolean);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    get required(): boolean;
+    set required(next: boolean);
     /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
     get value(): string | string[];
     set value(next: string | string[]);
     private updateValidity;
     private syncFormValue;
+    /** Effective disabled state: this element's own `disabled` OR an ancestor
+     *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
+     *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
+    get effectiveDisabled(): boolean;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
+    /**
+     * 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.
+     */
     formDisabledCallback(disabled: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
     disconnectedCallback(): void;
     private collectOptions;
+    private onOptionChange;
     private reflectSelected;
     private labelFor;
     /** The current row set in a source-agnostic shape, before capping. */
@@ -117,6 +172,10 @@ export declare class LyraCombobox extends LyraElement {
     private hide;
     private onDocPointer;
     protected updated(changed: PropertyValues): void;
+    /** Dispatches the platform-style value-event pair used by non-text user
+     * interactions. Text editing keeps and exposes the original InputEvent
+     * from the shadow input so its data/inputType metadata is not lost. */
+    private emitValueEvents;
     private pickRow;
     private removeValue;
     private clear;