luxen-ui 0.9.2 → 0.10.0

package/dist/custom-elements.json

@@ -11,6 +11,11 @@
           "description": "",
           "name": "Avatar",
           "cssProperties": [
+            {
+              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
+              "name": "--size",
+              "default": "40px"
+            },
             {
               "description": "Background fill color for initials and the default icon.",
               "name": "--color"
@@ -1144,6 +1149,55 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/carousel-item/carousel-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single slide inside an `<l-carousel>`.",
+          "name": "CarouselItem",
+          "cssProperties": [
+            {
+              "description": "Aspect ratio of the slide.",
+              "name": "--aspect-ratio"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-carousel-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CarouselItem",
+          "declaration": {
+            "name": "CarouselItem",
+            "module": "src/html/elements/carousel-item/carousel-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/carousel-item/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/carousel-item/carousel-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/checkbox/checkbox.meta.ts",
@@ -1248,55 +1302,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/carousel-item/carousel-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A single slide inside an `<l-carousel>`.",
-          "name": "CarouselItem",
-          "cssProperties": [
-            {
-              "description": "Aspect ratio of the slide.",
-              "name": "--aspect-ratio"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-carousel-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselItem",
-          "declaration": {
-            "name": "CarouselItem",
-            "module": "src/html/elements/carousel-item/carousel-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/carousel-item/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/carousel-item/carousel-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/close-button/close-button.meta.ts",
@@ -3803,6 +3808,16 @@
               "description": "Placeholder shown when the editor is empty.",
               "attribute": "placeholder"
             },
+            {
+              "kind": "field",
+              "name": "emojiDataSource",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source.",
+              "attribute": "emoji-data-source"
+            },
             {
               "kind": "field",
               "name": "validationTarget",
@@ -3997,6 +4012,15 @@
               "default": "''",
               "description": "Placeholder shown when the editor is empty.",
               "fieldName": "placeholder"
+            },
+            {
+              "name": "emoji-data-source",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source.",
+              "fieldName": "emojiDataSource"
             }
           ],
           "superclass": {

package/dist/elements/avatar/avatar.css

@@ -1,13 +1,13 @@
 :host {
-  --_size: 40px;
-  --_font-size: 1rem;
+  --size: 40px;
+  --_font-size: calc(var(--size) * 0.4);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  width: var(--_size);
-  height: var(--_size);
-  border-radius: calc(var(--_size) * 0.15);
+  width: var(--size);
+  height: var(--size);
+  border-radius: calc(var(--size) * 0.15);
   isolation: isolate;
   vertical-align: middle;
   flex-shrink: 0;
@@ -15,19 +15,19 @@
 }
 
 :host([size='xs']) {
-  --_size: 24px;
+  --size: 24px;
   --_font-size: 0.75rem;
 }
 :host([size='sm']) {
-  --_size: 32px;
+  --size: 32px;
   --_font-size: 0.875rem;
 }
 :host([size='lg']) {
-  --_size: 48px;
+  --size: 48px;
   --_font-size: 1.25rem;
 }
 :host([size='xl']) {
-  --_size: 56px;
+  --size: 56px;
   --_font-size: 1.25rem;
 }
 
@@ -91,7 +91,7 @@ img {
   width: 100%;
   height: 100%;
   border: none;
-  border-radius: calc(var(--_size) * 0.15);
+  border-radius: calc(var(--size) * 0.15);
   background-color: var(--color, var(--l-color-bg-fill-neutral-soft));
   /*
    * Text over --color, decided by the background's own luminance — never the

package/dist/elements/avatar/avatar.d.ts

@@ -3,6 +3,7 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @summary An avatar component for displaying user images, initials, or a default icon.
  * @customElement l-avatar
  *
+ * @cssproperty [--size=40px] - Box size (any length). Set it inline (e.g. `style="--size: 20px"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.
  * @cssproperty --color - Background fill color for initials and the default icon.
  * @cssproperty --text-color - Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).
  * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).

package/dist/elements/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;GAWG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}

package/dist/elements/avatar/avatar.js

@@ -26,6 +26,7 @@ const defaultIcon = svg `<svg class="icon" viewBox="0 0 24 24" fill="currentColo
  * @summary An avatar component for displaying user images, initials, or a default icon.
  * @customElement l-avatar
  *
+ * @cssproperty [--size=40px] - Box size (any length). Set it inline (e.g. `style="--size: 20px"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.
  * @cssproperty --color - Background fill color for initials and the default icon.
  * @cssproperty --text-color - Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).
  * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).

package/dist/elements/prose-editor/prose-editor.d.ts

@@ -58,10 +58,17 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
     accessor autofocus: boolean;
     /** Placeholder shown when the editor is empty. */
     accessor placeholder: string;
+    /**
+     * URL the emoji picker fetches its data from. Point this at a locally served
+     * `emojibase-data` JSON to run fully offline (no CDN). Defaults to the
+     * picker's bundled CDN source.
+     */
+    accessor emojiDataSource: string;
     private _editorRoot?;
     private _emojiPicker?;
     private _emojiPickerPromise?;
     private _emojiOpenAtPointerDown;
+    private _emojiAutoUpdateCleanup?;
     get validationTarget(): HTMLElement | undefined;
     private get _toolbar();
     firstUpdated(): void;
@@ -105,23 +112,34 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
     private _onFocus;
     private _onKeyDown;
     /**
-     * The picker is a `popover="auto"`, so the platform owns outside-click
-     * dismissal: native light-dismiss in the top layer, which survives
-     * `stopPropagation()` from an ancestor (modal `<l-dialog>`, ProseMirror, Vue
-     * delegation), unlike emoji-mart's `document` click listener. (`Escape` is
-     * handled by `_onKeyDown` instead — ProseMirror `preventDefault()`s it, which
-     * would cancel the native close.)
+     * Capture-phase outside-click dismissal — the robust fallback the platform's
+     * native light-dismiss can't be trusted to provide (see `firstUpdated`).
+     * Dismiss when the picker is open and the pointer landed on neither the
+     * picker nor the emoji toolbar button (re-clicking the button is handled by
+     * the toggle in `_onEmojiButtonClick`). `composedPath()` crosses shadow
+     * boundaries, so a click inside the picker's shadow tree still resolves to
+     * the host element here.
+     */
+    private _onDocumentPointerDown;
+    /**
+     * The picker is a `popover="auto"` parented into the top layer; outside-click
+     * dismissal is owned by `_onDocumentPointerDown` (capture phase), which
+     * survives `stopPropagation()`/`preventDefault()` from an ancestor (modal
+     * `<l-dialog>`, ProseMirror, Vue delegation). (`Escape` is handled by
+     * `_onKeyDown` instead — ProseMirror `preventDefault()`s it, which would
+     * cancel the native close.)
      *
      * We can't wire the button as a native popover invoker (`popoverTargetElement`
      * / `popovertarget`) because the picker is parented into another shadow tree
      * (the open `<dialog>` — see `_topLayerContainer`) while the button lives in
      * this element's shadow root; a cross-tree invoker reference doesn't resolve.
      * So the toggle is hand-rolled here. The catch: a pointer click on the button
-     * is "outside" the popover, so native light-dismiss has already closed an open
-     * picker by the time this `click` fires (light-dismiss runs on `pointerup`).
-     * We therefore read the open state captured at `pointerdown` to know whether
-     * this click should re-open or stay closed. Keyboard activation (`detail === 0`)
-     * has no pointer light-dismiss, so it reads the live state and toggles directly.
+     * is "outside" the popover, so native light-dismiss (where it works) has
+     * already closed an open picker by the time this `click` fires (light-dismiss
+     * runs on `pointerup`). We therefore read the open state captured at
+     * `pointerdown` to know whether this click should re-open or stay closed.
+     * Keyboard activation (`detail === 0`) has no pointer light-dismiss, so it
+     * reads the live state and toggles directly.
      */
     private _onEmojiButtonPointerDown;
     private _onEmojiButtonClick;
@@ -135,6 +153,16 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
      */
     private _topLayerContainer;
     private get _emojiButton();
+    /**
+     * Keep the picker pinned to the emoji button while it is open. Floating UI's
+     * `autoUpdate` re-runs `_positionEmojiPicker` on scroll (including ancestor
+     * scroll), resize, and layout shifts, so the picker stays anchored to the
+     * button — the cross-tree equivalent of CSS anchor positioning, which can't be
+     * used here because the button lives in this element's shadow root while the
+     * picker is parented to the top-layer container (a different tree scope).
+     */
+    private _startEmojiAutoUpdate;
+    private _stopEmojiAutoUpdate;
     private _positionEmojiPicker;
     private _renderButton;
     private _renderToolbarItem;

package/dist/elements/prose-editor/prose-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prose-editor.d.ts","sourceRoot":"","sources":["../../../src/html/elements/prose-editor/prose-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,kBAAkB,CAAC;AAK1B,KAAK,kBAAkB,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,MAAM,GACN,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,iBAAiB,GACjB,MAAM,GACN,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,CAAC;AA2Bd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,WAAY,SAAQ,0BAA0B;IACzD,OAAgB,MAAM,4BAAwB;IAE9C,oEAAoE;IACpE,MAAM,EAAG,MAAM,CAAC;IAEhB,4BAA4B;IAE5B,QAAQ,CAAC,WAAW,SAAM;IAE1B,+DAA+D;IAE/D,QAAQ,CAAC,WAAW,SAAM;IAE1B,mGAAmG;IAEnG,QAAQ,CAAC,WAAW,SAAW;IAE/B,8EAA8E;IAO9E,QAAQ,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAM;IAE5C,8DAA8D;IAE9D,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,SAAS,CAAa;IAE1D,sDAAsD;IAEtD,QAAQ,CAAC,gBAAgB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAEpD,oCAAoC;IAEpC,QAAQ,CAAC,SAAS,UAAS;IAE3B,kDAAkD;IAElD,QAAQ,CAAC,WAAW,SAAM;IAE1B,OAAO,CAAC,WAAW,CAAC,CAAiB;IACrC,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,mBAAmB,CAAC,CAAuB;IACnD,OAAO,CAAC,uBAAuB,CAAS;IAExC,IAAa,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAEvD;IAED,OAAO,KAAK,QAAQ,GAEnB;IAEQ,YAAY;IAkCZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAMrC,oBAAoB;IAW7B,mFAAmF;IACnF,OAAO,IAAI,MAAM;IAMjB,mDAAmD;IACnD,OAAO,IAAI,WAAW;IAItB,0BAA0B;IAC1B,KAAK;IAII,KAAK;IAIL,IAAI;IAIb,UAAU;IAIV,YAAY;IAIZ,eAAe;IAIf,YAAY;IAIZ,eAAe;IAIf,aAAa,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;IAI9B,gBAAgB;IAIhB,iBAAiB;IAIjB,gBAAgB;IAIhB,eAAe;IAIf,iBAAiB;IAIjB,IAAI;IAIJ,IAAI;IAIJ,UAAU;IAaD,iBAAiB;IAK1B,mFAAmF;IACnF,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,eAAe;IAQvB;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,QAAQ,CAId;IAEF,OAAO,CAAC,UAAU,CAMhB;IAIF;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,yBAAyB,CAE/B;YAEY,mBAAmB;IAWjC,OAAO,CAAC,kBAAkB;IA0C1B;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAe1B,OAAO,KAAK,YAAY,GAEvB;YAEa,oBAAoB;IAiBlC,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,kBAAkB;IA0IjB,MAAM;CAyBhB"}
+{"version":3,"file":"prose-editor.d.ts","sourceRoot":"","sources":["../../../src/html/elements/prose-editor/prose-editor.ts"],"names":[],"mappings":"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"}

package/dist/elements/prose-editor/prose-editor.js

@@ -15,14 +15,14 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ProseEditor_initialHtml_accessor_storage, _ProseEditor_initialJson_accessor_storage, _ProseEditor_editorClass_accessor_storage, _ProseEditor_toolbar_accessor_storage, _ProseEditor_toolbarPreset_accessor_storage, _ProseEditor_toolbarPlacement_accessor_storage, _ProseEditor_autofocus_accessor_storage, _ProseEditor_placeholder_accessor_storage;
+var _ProseEditor_initialHtml_accessor_storage, _ProseEditor_initialJson_accessor_storage, _ProseEditor_editorClass_accessor_storage, _ProseEditor_toolbar_accessor_storage, _ProseEditor_toolbarPreset_accessor_storage, _ProseEditor_toolbarPlacement_accessor_storage, _ProseEditor_autofocus_accessor_storage, _ProseEditor_placeholder_accessor_storage, _ProseEditor_emojiDataSource_accessor_storage;
 import { unsafeCSS } from 'lit';
 import { html } from 'lit/static-html.js';
 import { staticTag } from '../../static-tag.js';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Highlight from '@tiptap/extension-highlight';
@@ -102,6 +102,7 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         _ProseEditor_toolbarPlacement_accessor_storage.set(this, 'top');
         _ProseEditor_autofocus_accessor_storage.set(this, false);
         _ProseEditor_placeholder_accessor_storage.set(this, '');
+        _ProseEditor_emojiDataSource_accessor_storage.set(this, '');
         this._emojiOpenAtPointerDown = false;
         this._onFocus = () => {
             if (!this.disabled && document.activeElement !== this.editor?.view.dom) {
@@ -116,25 +117,44 @@ export class ProseEditor extends LuxenFormAssociatedElement {
             event.preventDefault();
             event.stopPropagation();
         };
+        /**
+         * Capture-phase outside-click dismissal — the robust fallback the platform's
+         * native light-dismiss can't be trusted to provide (see `firstUpdated`).
+         * Dismiss when the picker is open and the pointer landed on neither the
+         * picker nor the emoji toolbar button (re-clicking the button is handled by
+         * the toggle in `_onEmojiButtonClick`). `composedPath()` crosses shadow
+         * boundaries, so a click inside the picker's shadow tree still resolves to
+         * the host element here.
+         */
+        this._onDocumentPointerDown = (event) => {
+            const picker = this._emojiPicker;
+            if (!picker?.matches(':popover-open'))
+                return;
+            const path = event.composedPath();
+            if (path.includes(picker) || (this._emojiButton && path.includes(this._emojiButton)))
+                return;
+            picker.hidePopover();
+        };
         // --- Emoji picker (lazy-loaded) ---
         /**
-         * The picker is a `popover="auto"`, so the platform owns outside-click
-         * dismissal: native light-dismiss in the top layer, which survives
-         * `stopPropagation()` from an ancestor (modal `<l-dialog>`, ProseMirror, Vue
-         * delegation), unlike emoji-mart's `document` click listener. (`Escape` is
-         * handled by `_onKeyDown` instead — ProseMirror `preventDefault()`s it, which
-         * would cancel the native close.)
+         * The picker is a `popover="auto"` parented into the top layer; outside-click
+         * dismissal is owned by `_onDocumentPointerDown` (capture phase), which
+         * survives `stopPropagation()`/`preventDefault()` from an ancestor (modal
+         * `<l-dialog>`, ProseMirror, Vue delegation). (`Escape` is handled by
+         * `_onKeyDown` instead — ProseMirror `preventDefault()`s it, which would
+         * cancel the native close.)
          *
          * We can't wire the button as a native popover invoker (`popoverTargetElement`
          * / `popovertarget`) because the picker is parented into another shadow tree
          * (the open `<dialog>` — see `_topLayerContainer`) while the button lives in
          * this element's shadow root; a cross-tree invoker reference doesn't resolve.
          * So the toggle is hand-rolled here. The catch: a pointer click on the button
-         * is "outside" the popover, so native light-dismiss has already closed an open
-         * picker by the time this `click` fires (light-dismiss runs on `pointerup`).
-         * We therefore read the open state captured at `pointerdown` to know whether
-         * this click should re-open or stay closed. Keyboard activation (`detail === 0`)
-         * has no pointer light-dismiss, so it reads the live state and toggles directly.
+         * is "outside" the popover, so native light-dismiss (where it works) has
+         * already closed an open picker by the time this `click` fires (light-dismiss
+         * runs on `pointerup`). We therefore read the open state captured at
+         * `pointerdown` to know whether this click should re-open or stay closed.
+         * Keyboard activation (`detail === 0`) has no pointer light-dismiss, so it
+         * reads the live state and toggles directly.
          */
         this._onEmojiButtonPointerDown = () => {
             this._emojiOpenAtPointerDown = !!this._emojiPicker?.matches(':popover-open');
@@ -164,6 +184,13 @@ export class ProseEditor extends LuxenFormAssociatedElement {
     /** Placeholder shown when the editor is empty. */
     get placeholder() { return __classPrivateFieldGet(this, _ProseEditor_placeholder_accessor_storage, "f"); }
     set placeholder(value) { __classPrivateFieldSet(this, _ProseEditor_placeholder_accessor_storage, value, "f"); }
+    /**
+     * URL the emoji picker fetches its data from. Point this at a locally served
+     * `emojibase-data` JSON to run fully offline (no CDN). Defaults to the
+     * picker's bundled CDN source.
+     */
+    get emojiDataSource() { return __classPrivateFieldGet(this, _ProseEditor_emojiDataSource_accessor_storage, "f"); }
+    set emojiDataSource(value) { __classPrivateFieldSet(this, _ProseEditor_emojiDataSource_accessor_storage, value, "f"); }
     get validationTarget() {
         return this._editorRoot;
     }
@@ -199,6 +226,15 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         // `stopPropagation()`, and only needs the event to propagate — not its
         // default action.
         document.addEventListener('keydown', this._onKeyDown, true);
+        // Outside-click dismissal does NOT rely on native popover light-dismiss:
+        // at least one shipping Chromium skips light-dismiss when the underlying
+        // `pointerdown`'s default action is prevented — which ProseMirror does for
+        // every click inside the editor (it drives its own selection). A
+        // capture-phase `document` listener runs before any descendant
+        // `preventDefault()`/`stopPropagation()` and doesn't depend on the default
+        // action, so it dismisses on every browser, real or synthetic input, modal
+        // or page. Native light-dismiss then becomes a redundant enhancement.
+        document.addEventListener('pointerdown', this._onDocumentPointerDown, true);
         this._syncValue();
         this.requestUpdate();
     }
@@ -211,6 +247,8 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         super.disconnectedCallback();
         this.removeEventListener('focus', this._onFocus);
         document.removeEventListener('keydown', this._onKeyDown, true);
+        document.removeEventListener('pointerdown', this._onDocumentPointerDown, true);
+        this._stopEmojiAutoUpdate();
         this.editor?.destroy();
         this._editorRoot?.remove();
         this._emojiPicker?.remove();
@@ -347,28 +385,31 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         if (this._emojiPicker)
             return Promise.resolve(this._emojiPicker);
         return (this._emojiPickerPromise ?? (this._emojiPickerPromise = (async () => {
-            const [{ Picker }, { default: data }] = await Promise.all([
-                import('emoji-mart'),
-                import('@emoji-mart/data'),
-            ]);
-            const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            const picker = new Picker({
-                parent: this._topLayerContainer(),
-                data,
-                theme: dark ? 'dark' : 'light',
-                onEmojiSelect: ({ native }) => {
-                    this.editor.chain().focus().insertContent(native).run();
-                    picker.hidePopover();
-                },
+            // `emoji-picker-element` is a framework-agnostic web component with no
+            // `document`-level click listener of its own to fight the platform.
+            // Importing it registers <emoji-picker> and gives us the constructor.
+            const { default: Picker } = await import('emoji-picker-element/picker.js');
+            const picker = new Picker(this.emojiDataSource ? { dataSource: this.emojiDataSource } : undefined);
+            // Theme follows the system color scheme automatically (the element ships
+            // a `prefers-color-scheme` media query); a `.light`/`.dark` class would
+            // only be needed to override that.
+            picker.addEventListener('emoji-click', (event) => {
+                const unicode = event.detail.unicode;
+                if (!unicode)
+                    return;
+                this.editor.chain().focus().insertContent(unicode).run();
+                picker.hidePopover();
             });
+            this._topLayerContainer().append(picker);
             // A popover="auto" promotes the picker into the top-layer (so it paints
-            // above a modal <l-dialog> and escapes ancestor overflow clipping) and
-            // hands outside-click dismissal to the platform's native light-dismiss.
-            // Top-layer alone isn't enough inside a modal: showModal()
-            // makes everything outside the dialog's flat-tree subtree inert (visible
-            // but unclickable), so the picker is parented to the nearest open <dialog>
-            // — see _topLayerContainer. Neutralize the UA popover box; Floating UI
-            // drives the position in _positionEmojiPicker.
+            // above a modal <l-dialog> and escapes ancestor overflow clipping). Outside
+            // -click dismissal is driven by `_onDocumentPointerDown`, with native
+            // light-dismiss as a redundant enhancement. Top-layer alone isn't enough
+            // inside a modal: showModal() makes everything outside the dialog's
+            // flat-tree subtree inert (visible but unclickable), so the picker is
+            // parented to the nearest open <dialog> — see _topLayerContainer.
+            // Neutralize the UA popover box (the picker draws its own card in its
+            // shadow root); Floating UI drives the position in _positionEmojiPicker.
             picker.setAttribute('popover', 'auto');
             Object.assign(picker.style, {
                 position: 'fixed',
@@ -377,10 +418,22 @@ export class ProseEditor extends LuxenFormAssociatedElement {
                 padding: '0',
                 border: '0',
                 background: 'transparent',
+                // emoji-picker-element ships `:host { display: flex }` (author origin),
+                // which overrides the UA `[popover]:not(:popover-open) { display: none }`
+                // rule — so a *closed* popover would otherwise stay laid out and visible.
+                // Drive `display` from the popover state via inline style (which beats the
+                // shadow `:host` rule) so the picker is truly hidden when closed, on every
+                // dismissal path (light-dismiss, Escape, re-click, select).
+                display: 'none',
             });
+            picker.style.setProperty('--border-radius', '0.5rem');
             picker.addEventListener('toggle', (event) => {
-                if (event.newState === 'open')
-                    void this._positionEmojiPicker();
+                const open = event.newState === 'open';
+                picker.style.display = open ? 'flex' : 'none';
+                if (open)
+                    this._startEmojiAutoUpdate();
+                else
+                    this._stopEmojiAutoUpdate();
             });
             this._emojiPicker = picker;
             return picker;
@@ -413,11 +466,31 @@ export class ProseEditor extends LuxenFormAssociatedElement {
     get _emojiButton() {
         return this.shadowRoot?.querySelector('[data-command="emoji"]') ?? null;
     }
+    /**
+     * Keep the picker pinned to the emoji button while it is open. Floating UI's
+     * `autoUpdate` re-runs `_positionEmojiPicker` on scroll (including ancestor
+     * scroll), resize, and layout shifts, so the picker stays anchored to the
+     * button — the cross-tree equivalent of CSS anchor positioning, which can't be
+     * used here because the button lives in this element's shadow root while the
+     * picker is parented to the top-layer container (a different tree scope).
+     */
+    _startEmojiAutoUpdate() {
+        const button = this._emojiButton;
+        const picker = this._emojiPicker;
+        if (!button || !picker)
+            return;
+        this._stopEmojiAutoUpdate();
+        this._emojiAutoUpdateCleanup = autoUpdate(button, picker, () => void this._positionEmojiPicker());
+    }
+    _stopEmojiAutoUpdate() {
+        this._emojiAutoUpdateCleanup?.();
+        this._emojiAutoUpdateCleanup = undefined;
+    }
     async _positionEmojiPicker() {
         const button = this._emojiButton;
         const picker = this._emojiPicker;
-        // Runs from the picker's `toggle` event once it is open, so it is already
-        // laid out in the top-layer and can be measured.
+        // Driven by `autoUpdate` while the picker is open, so it is already laid out
+        // in the top-layer and can be measured.
         if (!button || !picker || !picker.matches(':popover-open'))
             return;
         const { x, y } = await computePosition(button, picker, {
@@ -520,7 +593,7 @@ export class ProseEditor extends LuxenFormAssociatedElement {
     `;
     }
 }
-_ProseEditor_initialHtml_accessor_storage = new WeakMap(), _ProseEditor_initialJson_accessor_storage = new WeakMap(), _ProseEditor_editorClass_accessor_storage = new WeakMap(), _ProseEditor_toolbar_accessor_storage = new WeakMap(), _ProseEditor_toolbarPreset_accessor_storage = new WeakMap(), _ProseEditor_toolbarPlacement_accessor_storage = new WeakMap(), _ProseEditor_autofocus_accessor_storage = new WeakMap(), _ProseEditor_placeholder_accessor_storage = new WeakMap();
+_ProseEditor_initialHtml_accessor_storage = new WeakMap(), _ProseEditor_initialJson_accessor_storage = new WeakMap(), _ProseEditor_editorClass_accessor_storage = new WeakMap(), _ProseEditor_toolbar_accessor_storage = new WeakMap(), _ProseEditor_toolbarPreset_accessor_storage = new WeakMap(), _ProseEditor_toolbarPlacement_accessor_storage = new WeakMap(), _ProseEditor_autofocus_accessor_storage = new WeakMap(), _ProseEditor_placeholder_accessor_storage = new WeakMap(), _ProseEditor_emojiDataSource_accessor_storage = new WeakMap();
 ProseEditor.styles = [hostStyles, styles];
 __decorate([
     property({ attribute: 'initial-html' })
@@ -551,3 +624,6 @@ __decorate([
 __decorate([
     property()
 ], ProseEditor.prototype, "placeholder", null);
+__decorate([
+    property({ attribute: 'emoji-data-source' })
+], ProseEditor.prototype, "emojiDataSource", null);

package/dist/elements/tree-item/tree-item.css

@@ -86,7 +86,13 @@
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  overflow: hidden;
+  /* `clip` (not `hidden`) so the label still truncates long text to an ellipsis
+     while `overflow-clip-margin` lets a slotted interactive control's hover/focus
+     decoration (a row-action button, an `<l-dropdown>` trigger) bleed past the
+     row-height label box instead of being cut on its top/bottom/left edges. The
+     margin is kept small so the bleed stays imperceptible for text. */
+  overflow: clip;
+  overflow-clip-margin: 0.375rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/dist/metadata/avatar.json

@@ -72,6 +72,11 @@
     }
   ],
   "cssProperties": [
+    {
+      "name": "--size",
+      "default": "40px",
+      "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token."
+    },
     {
       "name": "--color",
       "default": null,

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.2",
+  "version": "0.10.0",
   "elements": [
     {
       "name": "avatar",
@@ -75,6 +75,11 @@
         }
       ],
       "cssProperties": [
+        {
+          "name": "--size",
+          "default": "40px",
+          "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token."
+        },
         {
           "name": "--color",
           "default": null,
@@ -2415,6 +2420,14 @@
           "reflects": false,
           "description": "Placeholder shown when the editor is empty."
         },
+        {
+          "name": "emojiDataSource",
+          "attribute": "emoji-data-source",
+          "type": "string",
+          "default": "''",
+          "reflects": false,
+          "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source."
+        },
         {
           "name": "validationTarget",
           "attribute": null,