@aceshooting/lyra-ui 4.1.0 → 5.0.0

package/dist/components/forms/emoji-picker/emoji-data-loader.d.ts

@@ -0,0 +1,14 @@
+import type { OptionalPeerApi } from '../../../internal/optional-peer-types.js';
+import type { EmojiPickerGroup } from './emoji-picker.class.js';
+export type EmojiDataApi = OptionalPeerApi;
+/**
+ * Loads the optional peer dependency `emoji-picker-element-data` and adapts its JSON export into
+ * this component's own `EmojiPickerGroup[]` shape via `adaptEmojiPickerElementData()` below. Never
+ * throws — resolves `null` (with a one-time `console.warn`) if the peer isn't installed or the
+ * import otherwise fails, mirroring `pdf-loader.ts`'s `loadPdfJsDeps()` exact shape. `importData` is
+ * an injectable seam for tests (see `emoji-data-loader.test.ts`).
+ */
+export declare function loadEmojiData(importData?: () => Promise<OptionalPeerApi>): Promise<EmojiPickerGroup[] | null>;
+/** Cached per page, mirroring `pdf-loader.ts`'s `loadPdfJs()` single-flight shape. */
+export declare function loadEmojiDataCached(): Promise<EmojiPickerGroup[] | null>;
+//# sourceMappingURL=emoji-data-loader.d.ts.map

package/dist/components/forms/emoji-picker/emoji-data-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-data-loader.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/emoji-picker/emoji-data-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAI3C;;;;;;GAMG;AACH,wBAAsB,aAAa,CACjC,UAAU,GAAE,MAAM,OAAO,CAAC,eAAe,CAC2E,GACnH,OAAO,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,CAapC;AAED,sFAAsF;AACtF,wBAAgB,mBAAmB,IAAI,OAAO,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,CAGxE"}

package/dist/components/forms/emoji-picker/emoji-data-loader.js

@@ -0,0 +1,78 @@
+let cached;
+/**
+ * Loads the optional peer dependency `emoji-picker-element-data` and adapts its JSON export into
+ * this component's own `EmojiPickerGroup[]` shape via `adaptEmojiPickerElementData()` below. Never
+ * throws — resolves `null` (with a one-time `console.warn`) if the peer isn't installed or the
+ * import otherwise fails, mirroring `pdf-loader.ts`'s `loadPdfJsDeps()` exact shape. `importData` is
+ * an injectable seam for tests (see `emoji-data-loader.test.ts`).
+ */
+export async function loadEmojiData(importData = () => import('emoji-picker-element-data/en/emojibase/data.json', { with: { type: 'json' } })) {
+    try {
+        const raw = await importData();
+        return adaptEmojiPickerElementData(raw);
+    }
+    catch (error) {
+        console.warn('<lr-emoji-picker> needs the optional peer dependency `emoji-picker-element-data` to show a ' +
+            'default emoji set — install it with `pnpm add emoji-picker-element-data`, or supply `groups` ' +
+            'directly:', error);
+        return null;
+    }
+}
+/** Cached per page, mirroring `pdf-loader.ts`'s `loadPdfJs()` single-flight shape. */
+export function loadEmojiDataCached() {
+    if (!cached)
+        cached = loadEmojiData();
+    return cached;
+}
+/** @internal Test-only cache reset. */
+export function clearEmojiDataCache() {
+    cached = undefined;
+}
+// Group id -> label, mirroring emojibase's own canonical grouping (verified 2026-07-17 against
+// `emojibase-data`'s published `meta/groups.json` and `emoji-picker-element`'s own
+// `src/picker/groups.js` + `src/picker/i18n/en.js`, since `emoji-picker-element-data`'s flat
+// `data.json` entries carry only a numeric `group` id with no label of their own). Id 2
+// ("component") covers skin-tone/hair-style modifier swatches, which are intentionally included
+// here for completeness even though this component has no skin-tone UI of its own (see the class
+// doc on `LyraEmojiPicker`) -- entries in that group are rare in practice and simply render under a
+// "Component" heading like any other group if present in a consumer's raw payload.
+const GROUP_LABELS = {
+    0: 'Smileys & Emotion',
+    1: 'People & Body',
+    2: 'Component',
+    3: 'Animals & Nature',
+    4: 'Food & Drink',
+    5: 'Travel & Places',
+    6: 'Activities',
+    7: 'Objects',
+    8: 'Symbols',
+    9: 'Flags',
+};
+/**
+ * Adapts `emoji-picker-element-data`'s raw JSON export (e.g. `en/emojibase/data.json`) into
+ * `EmojiPickerGroup[]`.
+ *
+ * VERIFIED SHAPE (2026-07-17, fetched the real published `emoji-picker-element-data@latest/en/
+ * emojibase/data.json` from unpkg since the package isn't installed anywhere in this monorepo): a
+ * flat array of entries, each carrying `emoji` (the glyph -- NOT `unicode`), `group` (a numeric
+ * category id per emojibase's `meta/groups.json`), `annotation` (the human-readable name), and an
+ * optional `shortcodes` array (plus other fields this adapter ignores: `tags`, `order`, `version`,
+ * `emoticon`, `skins`). Entries are bucketed by `group`, and each bucket's label comes from the
+ * `GROUP_LABELS` lookup above (the raw entries carry no label of their own).
+ */
+function adaptEmojiPickerElementData(raw) {
+    const entries = Array.isArray(raw) ? raw : [];
+    const byGroup = new Map();
+    for (const entry of entries) {
+        if (!entry.emoji || !entry.annotation || entry.group === undefined)
+            continue;
+        let bucket = byGroup.get(entry.group);
+        if (!bucket) {
+            bucket = { key: String(entry.group), label: GROUP_LABELS[entry.group] ?? `Group ${entry.group}`, emojis: [] };
+            byGroup.set(entry.group, bucket);
+        }
+        bucket.emojis.push({ emoji: entry.emoji, name: entry.annotation, shortcodes: entry.shortcodes });
+    }
+    return [...byGroup.entries()].sort(([a], [b]) => a - b).map(([, group]) => group);
+}
+//# sourceMappingURL=emoji-data-loader.js.map

package/dist/components/forms/emoji-picker/emoji-data-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-data-loader.js","sourceRoot":"","sources":["../../../../src/components/forms/emoji-picker/emoji-data-loader.ts"],"names":[],"mappings":"AAKA,IAAI,MAAsD,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,UAAU,GAAmC,GAAG,EAAE,CAChD,MAAM,CAAC,kDAAkD,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAA6B;IAEpH,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,MAAM,UAAU,EAAE,CAAC;QAC/B,OAAO,2BAA2B,CAAC,GAAG,CAAC,CAAC;IAC1C,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CACV,6FAA6F;YAC3F,+FAA+F;YAC/F,WAAW,EACb,KAAK,CACN,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,mBAAmB;IACjC,IAAI,CAAC,MAAM;QAAE,MAAM,GAAG,aAAa,EAAE,CAAC;IACtC,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,uCAAuC;AACvC,MAAM,UAAU,mBAAmB;IACjC,MAAM,GAAG,SAAS,CAAC;AACrB,CAAC;AAED,+FAA+F;AAC/F,mFAAmF;AACnF,6FAA6F;AAC7F,wFAAwF;AACxF,gGAAgG;AAChG,iGAAiG;AACjG,oGAAoG;AACpG,mFAAmF;AACnF,MAAM,YAAY,GAA2B;IAC3C,CAAC,EAAE,mBAAmB;IACtB,CAAC,EAAE,eAAe;IAClB,CAAC,EAAE,WAAW;IACd,CAAC,EAAE,kBAAkB;IACrB,CAAC,EAAE,cAAc;IACjB,CAAC,EAAE,iBAAiB;IACpB,CAAC,EAAE,YAAY;IACf,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,OAAO;CACX,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,SAAS,2BAA2B,CAAC,GAAoB;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAI,GAAG,EAA4B,CAAC;IACpD,KAAK,MAAM,KAAK,IAAI,OAKlB,EAAE,CAAC;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;YAAE,SAAS;QAC7E,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;YAC9G,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACnC,CAAC;QACD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IACnG,CAAC;IACD,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AACpF,CAAC"}

package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts

@@ -0,0 +1,115 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../../internal/lyra-element.js';
+export interface EmojiPickerItem {
+    emoji: string;
+    /** Accessible/searchable name (e.g. 'grinning face'). Used for the picked button's `aria-label`
+     *  and as one of the two fields `queryText` matches against. */
+    name: string;
+    /** Additional searchable aliases (e.g. `['grinning']`). Matched the same way `name` is. */
+    shortcodes?: string[];
+}
+export interface EmojiPickerGroup {
+    key: string;
+    label: string;
+    emojis: EmojiPickerItem[];
+}
+export interface LyraEmojiPickerEventMap {
+    input: CustomEvent<undefined>;
+    change: CustomEvent<undefined>;
+    blur: CustomEvent<undefined>;
+    focus: CustomEvent<undefined>;
+    /** Fired when an emoji is picked (click, or Enter/Space on the active grid cell). `detail: {
+     *  emoji: string }` — the picked glyph, same value `this.value` is set to. */
+    'lr-change': CustomEvent<{
+        emoji: string;
+    }>;
+}
+declare class EmojiPickerBase extends LyraElement<LyraEmojiPickerEventMap> {
+}
+declare const LyraEmojiPicker_base: typeof EmojiPickerBase & (new (...args: any[]) => import("../../../lyra.js").FormAssociatedInterface);
+/**
+ * `<lr-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the
+ * same "zero/optional-peer dependency" spirit as `<lr-lite-chart>`/`<lr-heatmap>`: `groups` is
+ * fully consumer-suppliable (this component ships no emoji data of its own), with an *optional*
+ * convenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for
+ * exactly what that covers.
+ *
+ * Keyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji
+ * is tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap
+ * under RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to
+ * the first/last option, and Enter/Space picks. The search input doubles as a `role="combobox"`
+ * over the same listbox: the arrow keys and Enter also work there while focus stays in the input,
+ * with `aria-activedescendant` tracking the active option. Large data sets automatically window
+ * their visible rows so scrolling does not create one button per supplied emoji in the DOM.
+ *
+ * @customElement lr-emoji-picker
+ * @event lr-change - An emoji was picked. `detail: { emoji: string }`.
+ * @csspart base - The root wrapper.
+ * @csspart search - The search/filter `<input>` (`role="combobox"` over the grid).
+ * @csspart grid - The keyboard-navigable emoji grid.
+ * @csspart group-label - Each group's heading, rendered above its emojis.
+ * @csspart emoji - Each emoji's own `<button>`; meets the shared minimum tappable size
+ *   (`--lr-icon-button-size`) without enlarging the rendered emoji glyph itself.
+ * @csspart empty - The empty-state message, shown when the search matches nothing.
+ */
+export declare class LyraEmojiPicker extends LyraEmojiPicker_base {
+    static styles: import("lit").CSSResultGroup[];
+    /** The full, ungrouped data set to search/render. Consumer-supplied — this component ships no
+     *  emoji data of its own. Empty (the default) renders no groups/emojis at all, just the search
+     *  input and an empty state. See `emoji-data-loader.ts` for an optional convenience loader. */
+    groups: EmojiPickerGroup[];
+    /** Accessible name forwarded from the host to the internal emoji listbox. Empty falls back to
+     *  the localized default grid label. */
+    accessibleLabel: string;
+    /** Injectable loader seam -- overridden directly by tests with a synchronous fake instead of
+     *  needing the real `emoji-picker-element-data` package to load in the test browser (mirrors
+     *  `LyraPdfViewer`'s `loadLibrary` field / `LyraQrCode`'s `loadLibrary` field). */
+    private loadGroups;
+    connectedCallback(): void;
+    private queryText;
+    private activeIndex;
+    /** The large-data path keeps only visible rows in the DOM. The regular path remains unchanged
+     * for small sets so consumers keep the simple grouped light-DOM shape they already receive. */
+    private virtualScrollTop;
+    private virtualScrollRaf?;
+    private observedGrid?;
+    private observedGridVirtualized;
+    private gridResizeObserver?;
+    private searchEl?;
+    private readonly gridId;
+    private readonly haystacks;
+    private haystackFor;
+    private get filteredGroups();
+    private get flatItems();
+    private get isVirtualized();
+    private cssPixelValue;
+    private virtualRowHeight;
+    private virtualRows;
+    private optionButtons;
+    /** Options in the first rendered row. Measured from live layout at call time because the
+     *  flex-wrap column count is fluid (container width, emoji font metrics). */
+    private columnsPerRow;
+    /** Moves the active option (clamped), updating only the affected buttons plus the combobox's
+     *  `aria-activedescendant` — no re-render. `focusTarget` distinguishes the grid's roving-focus
+     *  idiom (focus follows the active option) from the search input's combobox idiom (focus stays
+     *  in the input). */
+    private setActiveIndex;
+    private onSearchInput;
+    private pick;
+    private onNavigationKeyDown;
+    private onGridFocusIn;
+    private onGridScroll;
+    private syncGridObserver;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private renderEmojiButton;
+    private renderVirtualRows;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lr-emoji-picker': LyraEmojiPicker;
+    }
+}
+export {};
+//# sourceMappingURL=emoji-picker.class.d.ts.map

package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.class.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/emoji-picker/emoji-picker.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAehE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd;oEACgE;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;kFAC8E;IAC9E,WAAW,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,cAAM,eAAgB,SAAQ,WAAW,CAAC,uBAAuB,CAAC;CAAG;;AAErE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,eAAgB,SAAQ,oBAA+B;IAClE,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;mGAE+F;IAC/D,MAAM,EAAE,gBAAgB,EAAE,CAAM;IAEhE;4CACwC;IACD,eAAe,SAAM;IAE5D;;uFAEmF;IACnF,OAAO,CAAC,UAAU,CAAiE;IAEnF,iBAAiB,IAAI,IAAI,CAWxB;IAEQ,OAAO,CAAC,SAAS,CAAM;IAOhC,OAAO,CAAC,WAAW,CAAK;IAExB;mGAC+F;IAC/F,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,kBAAkB,CAAC,CAAiB;IAElB,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAE9D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IAMtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0C;IAEpE,OAAO,CAAC,WAAW;IASnB,OAAO,KAAK,cAAc,GASzB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,aAAa;IAIrB;iFAC6E;IAC7E,OAAO,CAAC,aAAa;IAmBrB;;;yBAGqB;IACrB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,mBAAmB,CA2BzB;IAKF,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,gBAAgB;IAcxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAa/C;IAED,oBAAoB,IAAI,IAAI,CAW3B;IAED,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,iBAAiB;IAwBzB,MAAM,IAAI,cAAc,CAyCvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF"}

package/dist/components/forms/emoji-picker/emoji-picker.class.js

@@ -0,0 +1,409 @@
+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 } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { LyraElement } from '../../../internal/lyra-element.js';
+import { FormAssociated } from '../../../internal/form-associated.js';
+import { nextId } from '../../../internal/a11y.js';
+import { styles } from './emoji-picker.styles.js';
+import { loadEmojiDataCached } from './emoji-data-loader.js';
+const VIRTUALIZE_AT = 200;
+const VIRTUAL_ROW_HEIGHT_FALLBACK = 64;
+const MAX_VIRTUAL_COLUMNS = 20;
+class EmojiPickerBase extends LyraElement {
+}
+/**
+ * `<lr-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the
+ * same "zero/optional-peer dependency" spirit as `<lr-lite-chart>`/`<lr-heatmap>`: `groups` is
+ * fully consumer-suppliable (this component ships no emoji data of its own), with an *optional*
+ * convenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for
+ * exactly what that covers.
+ *
+ * Keyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji
+ * is tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap
+ * under RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to
+ * the first/last option, and Enter/Space picks. The search input doubles as a `role="combobox"`
+ * over the same listbox: the arrow keys and Enter also work there while focus stays in the input,
+ * with `aria-activedescendant` tracking the active option. Large data sets automatically window
+ * their visible rows so scrolling does not create one button per supplied emoji in the DOM.
+ *
+ * @customElement lr-emoji-picker
+ * @event lr-change - An emoji was picked. `detail: { emoji: string }`.
+ * @csspart base - The root wrapper.
+ * @csspart search - The search/filter `<input>` (`role="combobox"` over the grid).
+ * @csspart grid - The keyboard-navigable emoji grid.
+ * @csspart group-label - Each group's heading, rendered above its emojis.
+ * @csspart emoji - Each emoji's own `<button>`; meets the shared minimum tappable size
+ *   (`--lr-icon-button-size`) without enlarging the rendered emoji glyph itself.
+ * @csspart empty - The empty-state message, shown when the search matches nothing.
+ */
+export class LyraEmojiPicker extends FormAssociated(EmojiPickerBase) {
+    constructor() {
+        super(...arguments);
+        /** The full, ungrouped data set to search/render. Consumer-supplied — this component ships no
+         *  emoji data of its own. Empty (the default) renders no groups/emojis at all, just the search
+         *  input and an empty state. See `emoji-data-loader.ts` for an optional convenience loader. */
+        this.groups = [];
+        /** Accessible name forwarded from the host to the internal emoji listbox. Empty falls back to
+         *  the localized default grid label. */
+        this.accessibleLabel = '';
+        /** Injectable loader seam -- overridden directly by tests with a synchronous fake instead of
+         *  needing the real `emoji-picker-element-data` package to load in the test browser (mirrors
+         *  `LyraPdfViewer`'s `loadLibrary` field / `LyraQrCode`'s `loadLibrary` field). */
+        this.loadGroups = loadEmojiDataCached;
+        this.queryText = '';
+        // Deliberately non-reactive: pointer hover and arrow keys retarget the active option many times
+        // a second, and a reactive property here would re-render the entire (potentially ~2000-button)
+        // grid on every step. `setActiveIndex()` patches only the affected buttons imperatively instead;
+        // the `live()` bindings in `render()` reconcile the template against that imperative state
+        // whenever a real re-render (a query/groups change) happens.
+        this.activeIndex = 0;
+        /** The large-data path keeps only visible rows in the DOM. The regular path remains unchanged
+         * for small sets so consumers keep the simple grouped light-DOM shape they already receive. */
+        this.virtualScrollTop = 0;
+        this.observedGridVirtualized = false;
+        this.gridId = nextId('emoji-picker-grid');
+        // Lowercased search haystack per item, computed once per item object -- re-joining and
+        // re-lowercasing every item on every keystroke dominates filter cost for large sets. Keyed by
+        // item identity in a WeakMap, so replacing `groups` invalidates naturally (stale entries are
+        // simply collected).
+        this.haystacks = new WeakMap();
+        this.onSearchInput = (event) => {
+            this.queryText = event.target.value;
+            this.activeIndex = 0;
+        };
+        // Shared between the search input (combobox idiom: focus stays in the input while
+        // `aria-activedescendant` tracks the active option) and the grid itself (roving tabindex: focus
+        // follows the active option).
+        this.onNavigationKeyDown = (event) => {
+            const items = this.flatItems;
+            if (items.length === 0)
+                return;
+            const inSearch = event.currentTarget === this.searchEl;
+            // "Forward" follows reading direction: the wrapped flex grid mirrors under RTL, so the arrow
+            // that moves visually toward the line end swaps with it.
+            const forwardKey = this.effectiveDirection === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = this.effectiveDirection === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+            let target;
+            if (event.key === forwardKey)
+                target = this.activeIndex + 1;
+            else if (event.key === backwardKey)
+                target = this.activeIndex - 1;
+            else if (event.key === 'ArrowDown')
+                target = this.activeIndex + this.columnsPerRow();
+            else if (event.key === 'ArrowUp')
+                target = this.activeIndex - this.columnsPerRow();
+            // In the input, Home/End keep their native caret meaning.
+            else if (event.key === 'Home' && !inSearch)
+                target = 0;
+            else if (event.key === 'End' && !inSearch)
+                target = items.length - 1;
+            else if (event.key === 'Enter' || (event.key === ' ' && !inSearch)) {
+                // Space only picks from the grid -- in the search input it types a literal space.
+                event.preventDefault();
+                const item = items[this.activeIndex];
+                if (item)
+                    this.pick(item);
+                return;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            this.setActiveIndex(target, !inSearch);
+        };
+        // Keeps the active option in lockstep with real focus, so Enter/Space always activates the
+        // focused button -- focus can land on any option without passing through the arrow-key path
+        // (Shift+Tab back into the grid, a consumer's own `focus()` call).
+        this.onGridFocusIn = (event) => {
+            const button = event.target;
+            if (!(button instanceof HTMLButtonElement))
+                return;
+            const indexed = Number(button.dataset.index);
+            const index = Number.isInteger(indexed) ? indexed : this.optionButtons().indexOf(button);
+            if (index >= 0 && index !== this.activeIndex)
+                this.setActiveIndex(index, false);
+        };
+        this.onGridScroll = (event) => {
+            if (!this.isVirtualized)
+                return;
+            const grid = event.currentTarget;
+            this.virtualScrollTop = grid.scrollTop;
+            if (this.virtualScrollRaf !== undefined)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = undefined;
+                if (this.isConnected)
+                    this.requestUpdate();
+            });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Only auto-loads when the consumer hasn't already supplied groups directly -- an explicit
+        // `groups` (even an empty array set intentionally) always wins, matching the "consumer-supplied
+        // data takes precedence over any built-in default" convention this library uses elsewhere (e.g.
+        // <lr-lite-chart>'s pointText falling back to a built-in template only when unset).
+        if (this.groups.length > 0)
+            return;
+        void this.loadGroups().then((loaded) => {
+            if (!this.isConnected || !loaded || this.groups.length > 0)
+                return;
+            this.groups = loaded;
+        });
+    }
+    haystackFor(item) {
+        let haystack = this.haystacks.get(item);
+        if (haystack === undefined) {
+            haystack = [item.name, ...(item.shortcodes ?? [])].join(' ').toLowerCase();
+            this.haystacks.set(item, haystack);
+        }
+        return haystack;
+    }
+    get filteredGroups() {
+        const q = this.queryText.trim().toLowerCase();
+        if (!q)
+            return this.groups;
+        return this.groups
+            .map((group) => ({
+            ...group,
+            emojis: group.emojis.filter((item) => this.haystackFor(item).includes(q)),
+        }))
+            .filter((group) => group.emojis.length > 0);
+    }
+    get flatItems() {
+        return this.filteredGroups.flatMap((group) => group.emojis);
+    }
+    get isVirtualized() {
+        return this.flatItems.length >= VIRTUALIZE_AT;
+    }
+    cssPixelValue(name, fallback) {
+        const value = Number.parseFloat(getComputedStyle(this).getPropertyValue(name));
+        return Number.isFinite(value) && value > 0 ? value : fallback;
+    }
+    virtualRowHeight() {
+        return this.cssPixelValue('--lr-emoji-picker-row-height', VIRTUAL_ROW_HEIGHT_FALLBACK);
+    }
+    virtualRows() {
+        const columns = this.columnsPerRow();
+        let index = 0;
+        const rows = [];
+        for (const group of this.filteredGroups) {
+            for (let offset = 0; offset < group.emojis.length; offset += columns) {
+                rows.push({
+                    label: offset === 0 ? group.label : undefined,
+                    items: group.emojis.slice(offset, offset + columns).map((item) => ({ item, index: index++ })),
+                });
+            }
+        }
+        return rows;
+    }
+    optionButtons() {
+        return [...this.renderRoot.querySelectorAll('[part="emoji"]')];
+    }
+    /** Options in the first rendered row. Measured from live layout at call time because the
+     *  flex-wrap column count is fluid (container width, emoji font metrics). */
+    columnsPerRow() {
+        if (this.isVirtualized) {
+            const grid = this.renderRoot.querySelector('[part="grid"]');
+            const width = grid?.clientWidth ?? 0;
+            const itemSize = this.cssPixelValue('--lr-emoji-picker-item-size', 40);
+            const gap = this.cssPixelValue('--lr-emoji-picker-gap', 4);
+            return Math.min(MAX_VIRTUAL_COLUMNS, Math.max(1, Math.floor((Math.max(width, itemSize) + gap) / (itemSize + gap))));
+        }
+        const buttons = this.optionButtons();
+        if (buttons.length === 0)
+            return 1;
+        const firstTop = buttons[0].offsetTop;
+        let columns = 0;
+        for (const button of buttons) {
+            if (button.offsetTop !== firstTop)
+                break;
+            columns += 1;
+        }
+        return Math.max(1, columns);
+    }
+    /** Moves the active option (clamped), updating only the affected buttons plus the combobox's
+     *  `aria-activedescendant` — no re-render. `focusTarget` distinguishes the grid's roving-focus
+     *  idiom (focus follows the active option) from the search input's combobox idiom (focus stays
+     *  in the input). */
+    setActiveIndex(next, focusTarget) {
+        const buttons = this.optionButtons();
+        if (buttons.length === 0 && !this.isVirtualized)
+            return;
+        this.activeIndex = Math.max(0, Math.min(next, this.flatItems.length - 1));
+        const target = this.isVirtualized
+            ? this.renderRoot.querySelector(`[part="emoji"][data-index="${this.activeIndex}"]`)
+            : buttons[this.activeIndex];
+        const previous = this.renderRoot.querySelector('[part="emoji"][data-active]');
+        if (previous && previous !== target) {
+            previous.tabIndex = -1;
+            previous.setAttribute('aria-selected', 'false');
+            previous.removeAttribute('data-active');
+        }
+        if (target) {
+            target.tabIndex = 0;
+            target.setAttribute('aria-selected', 'true');
+            target.setAttribute('data-active', '');
+            this.searchEl?.setAttribute('aria-activedescendant', target.id);
+            target.scrollIntoView({ block: 'nearest' });
+        }
+        else if (this.isVirtualized) {
+            this.searchEl?.setAttribute('aria-activedescendant', `${this.gridId}-item-${this.activeIndex}`);
+            const rowIndex = this.virtualRows().findIndex((row) => row.items.some(({ index }) => index === this.activeIndex));
+            const grid = this.renderRoot.querySelector('[part="grid"]');
+            if (rowIndex >= 0 && grid) {
+                grid.scrollTop = rowIndex * this.virtualRowHeight();
+                this.virtualScrollTop = grid.scrollTop;
+                this.requestUpdate();
+            }
+        }
+        if (focusTarget)
+            target?.focus();
+    }
+    pick(item) {
+        this.value = item.emoji;
+        this.emit('lr-change', { emoji: item.emoji });
+    }
+    syncGridObserver() {
+        const grid = this.renderRoot.querySelector('[part="grid"]');
+        const virtualized = this.isVirtualized;
+        if (grid === this.observedGrid && virtualized === this.observedGridVirtualized)
+            return;
+        this.observedGrid?.removeEventListener('scroll', this.onGridScroll);
+        this.gridResizeObserver?.disconnect();
+        this.observedGrid = grid ?? undefined;
+        this.observedGridVirtualized = virtualized;
+        if (!grid || !virtualized)
+            return;
+        grid.addEventListener('scroll', this.onGridScroll, { passive: true });
+        this.gridResizeObserver = new ResizeObserver(() => this.requestUpdate());
+        this.gridResizeObserver.observe(grid);
+    }
+    updated(changed) {
+        this.syncGridObserver();
+        if (!changed.has('queryText') && !changed.has('groups'))
+            return;
+        const buttons = this.optionButtons();
+        if (buttons.length === 0) {
+            // No options: the combobox must not reference a nonexistent descendant.
+            this.searchEl?.removeAttribute('aria-activedescendant');
+            return;
+        }
+        if (!this.isVirtualized && this.activeIndex >= buttons.length)
+            this.activeIndex = 0;
+        // The grid just re-rendered: re-assert the active option's imperative state (tabindex,
+        // aria-selected, aria-activedescendant) against the fresh DOM and keep it scrolled into view.
+        this.setActiveIndex(this.activeIndex, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observedGrid?.removeEventListener('scroll', this.onGridScroll);
+        this.gridResizeObserver?.disconnect();
+        this.gridResizeObserver = undefined;
+        this.observedGrid = undefined;
+        this.observedGridVirtualized = false;
+        if (this.virtualScrollRaf !== undefined) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = undefined;
+        }
+    }
+    renderEmojiButton(item, itemIndex, total) {
+        return html `<button
+      type="button"
+      part="emoji"
+      id=${`${this.gridId}-item-${itemIndex}`}
+      data-index=${itemIndex}
+      role="option"
+      tabindex=${live(itemIndex === this.activeIndex ? '0' : '-1')}
+      aria-selected=${live(itemIndex === this.activeIndex ? 'true' : 'false')}
+      aria-setsize=${total}
+      aria-posinset=${itemIndex + 1}
+      aria-label=${item.name}
+      ?data-active=${live(itemIndex === this.activeIndex)}
+      @click=${() => this.pick(item)}
+      @focusin=${this.onGridFocusIn}
+      @mouseenter=${() => this.setActiveIndex(itemIndex, false)}
+    >${item.emoji}</button>`;
+    }
+    renderVirtualRows() {
+        const rows = this.virtualRows();
+        const rowHeight = this.virtualRowHeight();
+        const grid = this.renderRoot.querySelector('[part="grid"]');
+        const viewportHeight = grid?.clientHeight || 256;
+        const start = Math.max(0, Math.floor(this.virtualScrollTop / rowHeight) - 3);
+        const end = Math.min(rows.length, Math.ceil((this.virtualScrollTop + viewportHeight) / rowHeight) + 3);
+        const total = this.flatItems.length;
+        return html `
+      <div part="virtual-spacer" style=${`block-size: ${rows.length * rowHeight}px`}>
+        ${rows.slice(start, end).map((row, offset) => html `
+            <div part="virtual-row" style=${`transform: translateY(${(start + offset) * rowHeight}px)`}>
+              ${row.label ? html `<div part="group-label">${row.label}</div>` : html `<div part="virtual-label" aria-hidden="true"></div>`}
+              <div part="virtual-items">
+                ${row.items.map(({ item, index }) => this.renderEmojiButton(item, index, total))}
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    render() {
+        const items = this.flatItems;
+        let index = -1;
+        return html `
+      <div part="base">
+        <input
+          part="search"
+          type="search"
+          role="combobox"
+          aria-expanded="true"
+          aria-autocomplete="list"
+          .value=${this.queryText}
+          aria-label=${this.localize('emojiPickerSearchLabel')}
+          aria-controls=${this.gridId}
+          @input=${this.onSearchInput}
+          @keydown=${this.onNavigationKeyDown}
+        />
+        <div
+          part="grid"
+          id=${this.gridId}
+          role="listbox"
+          aria-label=${this.accessibleLabel || this.localize('emojiPickerGridLabel')}
+          @keydown=${this.onNavigationKeyDown}
+          @focusin=${this.onGridFocusIn}
+        >
+          ${items.length === 0
+            ? html `<div part="empty">${this.localize('emojiPickerEmpty')}</div>`
+            : this.isVirtualized
+                ? this.renderVirtualRows()
+                : this.filteredGroups.map((group) => html `
+                  <div part="group-label">${group.label}</div>
+                  ${group.emojis.map((item) => {
+                    index++;
+                    return this.renderEmojiButton(item, index, items.length);
+                })}
+                `)}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraEmojiPicker.prototype, "groups", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraEmojiPicker.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], LyraEmojiPicker.prototype, "queryText", void 0);
+__decorate([
+    query('[part="search"]')
+], LyraEmojiPicker.prototype, "searchEl", void 0);
+//# sourceMappingURL=emoji-picker.class.js.map