luxen-ui 0.9.0 → 0.9.2

package/cdn/styles/elements/button.css

@@ -75,6 +75,10 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     */
 
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
     &:disabled {
       cursor: not-allowed;
       opacity: 0.4;

package/dist/css/elements/button.css

@@ -75,6 +75,10 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     */
 
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
     &:disabled {
       cursor: not-allowed;
       opacity: 0.4;

package/dist/custom-elements.json

@@ -172,127 +172,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/badge/badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant | undefined"
-              },
-              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Display as pill shape",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "BadgeSize | undefined"
-              },
-              "description": "Badge size: `sm`, `lg`. Default is md.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "BadgeAppearance | undefined"
-              },
-              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
-              "attribute": "appearance",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant | undefined"
-              },
-              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
-              "fieldName": "variant"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Display as pill shape",
-              "fieldName": "pill"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "BadgeSize | undefined"
-              },
-              "description": "Badge size: `sm`, `lg`. Default is md.",
-              "fieldName": "size"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "BadgeAppearance | undefined"
-              },
-              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
-              "fieldName": "appearance"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-badge",
-          "customElement": true,
-          "summary": "A badge component for displaying small status indicators."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/html/elements/badge/badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/badge/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button/button.meta.ts",
@@ -446,6 +325,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/badge/badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Badge",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant | undefined"
+              },
+              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display as pill shape",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "BadgeSize | undefined"
+              },
+              "description": "Badge size: `sm`, `lg`. Default is md.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "BadgeAppearance | undefined"
+              },
+              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
+              "attribute": "appearance",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant | undefined"
+              },
+              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
+              "fieldName": "variant"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display as pill shape",
+              "fieldName": "pill"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "BadgeSize | undefined"
+              },
+              "description": "Badge size: `sm`, `lg`. Default is md.",
+              "fieldName": "size"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "BadgeAppearance | undefined"
+              },
+              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
+              "fieldName": "appearance"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-badge",
+          "customElement": true,
+          "summary": "A badge component for displaying small status indicators."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/html/elements/badge/badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/badge/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button-group/button-group.ts",
@@ -6040,7 +6040,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A hierarchical tree view composed of `<l-tree-item>` children.",
+          "description": "A hierarchical tree view composed of `<l-tree-item>` children.\n\nThe host carries `role=\"tree\"`, so give it an accessible name with\n`aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label=\"Files\">`).",
           "name": "Tree",
           "cssProperties": [
             {
@@ -6357,6 +6357,31 @@
                 "text": "number"
               }
             },
+            {
+              "kind": "method",
+              "name": "setPosition",
+              "parameters": [
+                {
+                  "name": "level",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "posInSet",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "setSize",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,\n`posInSet`/`setSize` describe the item's rank among its siblings. These let\nscreen readers announce \"level 2, 3 of 5\" even when `lazy` children keep the\nfull set out of the DOM."
+            },
             {
               "kind": "field",
               "name": "hasChildren",
@@ -6405,7 +6430,7 @@
             {
               "kind": "method",
               "name": "toggle",
-              "description": "Toggle expand state. Emits `lazy-load` the first time a lazy item opens."
+              "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
             }
           ],
           "events": [

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

@@ -19,6 +19,7 @@
   line-height: 1.5;
   color: var(--l-color-text-primary, CanvasText);
   white-space: nowrap;
+  text-align: start;
 }
 
 .item:focus-visible {

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

@@ -58,9 +58,10 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
     accessor autofocus: boolean;
     /** Placeholder shown when the editor is empty. */
     accessor placeholder: string;
-    accessor _emojiPickerActive: boolean;
     private _editorRoot?;
     private _emojiPicker?;
+    private _emojiPickerPromise?;
+    private _emojiOpenAtPointerDown;
     get validationTarget(): HTMLElement | undefined;
     private get _toolbar();
     firstUpdated(): void;
@@ -103,7 +104,28 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
     private _createEditorRoot;
     private _onFocus;
     private _onKeyDown;
-    private _toggleEmojiPicker;
+    /**
+     * 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.)
+     *
+     * 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.
+     */
+    private _onEmojiButtonPointerDown;
+    private _onEmojiButtonClick;
+    private _ensureEmojiPicker;
     /**
      * The element the emoji picker is appended to. Inside a modal `<l-dialog>` the
      * picker must live within the dialog's flat-tree subtree, otherwise the modal's

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;IAG1B,QAAQ,CAAC,kBAAkB,UAAS;IAEpC,OAAO,CAAC,WAAW,CAAC,CAAiB;IACrC,OAAO,CAAC,YAAY,CAAC,CAAc;IAEnC,IAAa,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAEvD;IAED,OAAO,KAAK,QAAQ,GAEnB;IAEQ,YAAY;IA4BZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IASrC,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,CAEhB;YAIY,kBAAkB;IAwChC;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAe1B,OAAO,KAAK,YAAY,GAEvB;YAEa,oBAAoB;IAwBlC,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,kBAAkB;IAwIjB,MAAM;CAyBhB"}
+{"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"}

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

@@ -15,11 +15,11 @@ 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, _ProseEditor__emojiPickerActive_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;
 import { unsafeCSS } from 'lit';
 import { html } from 'lit/static-html.js';
 import { staticTag } from '../../static-tag.js';
-import { property, state } from 'lit/decorators.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';
@@ -102,15 +102,42 @@ 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__emojiPickerActive_accessor_storage.set(this, false);
+        this._emojiOpenAtPointerDown = false;
         this._onFocus = () => {
             if (!this.disabled && document.activeElement !== this.editor?.view.dom) {
                 this.focus();
             }
         };
         this._onKeyDown = (event) => {
-            if (event.key === 'Escape')
-                this._emojiPickerActive = false;
+            if (event.key !== 'Escape' || !this._emojiPicker?.matches(':popover-open'))
+                return;
+            this._emojiPicker.hidePopover();
+            // Consume the Escape so it dismisses only the picker, not the host dialog.
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // --- 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.)
+         *
+         * 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.
+         */
+        this._onEmojiButtonPointerDown = () => {
+            this._emojiOpenAtPointerDown = !!this._emojiPicker?.matches(':popover-open');
         };
     }
     /** Initial HTML content. */
@@ -137,8 +164,6 @@ 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"); }
-    get _emojiPickerActive() { return __classPrivateFieldGet(this, _ProseEditor__emojiPickerActive_accessor_storage, "f"); }
-    set _emojiPickerActive(value) { __classPrivateFieldSet(this, _ProseEditor__emojiPickerActive_accessor_storage, value, "f"); }
     get validationTarget() {
         return this._editorRoot;
     }
@@ -166,8 +191,14 @@ export class ProseEditor extends LuxenFormAssociatedElement {
             onTransaction: () => this.requestUpdate(),
             onSelectionUpdate: () => this.requestUpdate(),
         });
-        document.addEventListener('keydown', this._onKeyDown);
         this.addEventListener('focus', this._onFocus);
+        // Escape is handled in JS, not by the popover's native close watcher:
+        // ProseMirror `preventDefault()`s Escape while the editor is focused, which
+        // cancels the native close (popover and dialog alike). Capture phase on
+        // `document` runs before that, can't be defeated by descendant
+        // `stopPropagation()`, and only needs the event to propagate — not its
+        // default action.
+        document.addEventListener('keydown', this._onKeyDown, true);
         this._syncValue();
         this.requestUpdate();
     }
@@ -175,14 +206,11 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         if (changed.has('disabled') && this.editor) {
             this.editor.setEditable(!this.disabled);
         }
-        if (changed.has('_emojiPickerActive')) {
-            void this._positionEmojiPicker();
-        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('keydown', this._onKeyDown);
         this.removeEventListener('focus', this._onFocus);
+        document.removeEventListener('keydown', this._onKeyDown, true);
         this.editor?.destroy();
         this._editorRoot?.remove();
         this._emojiPicker?.remove();
@@ -304,36 +332,45 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         this._editorRoot = root;
         return root;
     }
-    // --- Emoji picker (lazy-loaded) ---
-    async _toggleEmojiPicker() {
-        if (!this._emojiPicker) {
+    async _onEmojiButtonClick(event) {
+        const picker = await this._ensureEmojiPicker();
+        const wasOpen = event.detail === 0 ? picker.matches(':popover-open') : this._emojiOpenAtPointerDown;
+        if (wasOpen) {
+            if (picker.matches(':popover-open'))
+                picker.hidePopover();
+        }
+        else if (!picker.matches(':popover-open')) {
+            picker.showPopover();
+        }
+    }
+    _ensureEmojiPicker() {
+        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;
-            this._emojiPicker = new Picker({
+            const picker = new Picker({
                 parent: this._topLayerContainer(),
                 data,
                 theme: dark ? 'dark' : 'light',
                 onEmojiSelect: ({ native }) => {
                     this.editor.chain().focus().insertContent(native).run();
-                    this._emojiPickerActive = false;
-                },
-                onClickOutside: (event) => {
-                    if (!event.composedPath().includes(this._emojiButton)) {
-                        this._emojiPickerActive = false;
-                    }
+                    picker.hidePopover();
                 },
             });
-            // A popover promotes the picker into the top-layer, so it paints above a
-            // modal <l-dialog> and escapes any ancestor overflow clipping. 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 below.
-            this._emojiPicker.setAttribute('popover', 'manual');
-            Object.assign(this._emojiPicker.style, {
+            // 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.
+            picker.setAttribute('popover', 'auto');
+            Object.assign(picker.style, {
                 position: 'fixed',
                 inset: 'auto',
                 margin: '0',
@@ -341,8 +378,13 @@ export class ProseEditor extends LuxenFormAssociatedElement {
                 border: '0',
                 background: 'transparent',
             });
-        }
-        this._emojiPickerActive = !this._emojiPickerActive;
+            picker.addEventListener('toggle', (event) => {
+                if (event.newState === 'open')
+                    void this._positionEmojiPicker();
+            });
+            this._emojiPicker = picker;
+            return picker;
+        })()));
     }
     /**
      * The element the emoji picker is appended to. Inside a modal `<l-dialog>` the
@@ -373,18 +415,11 @@ export class ProseEditor extends LuxenFormAssociatedElement {
     }
     async _positionEmojiPicker() {
         const button = this._emojiButton;
-        if (!button || !this._emojiPicker)
-            return;
         const picker = this._emojiPicker;
-        if (!this._emojiPickerActive) {
-            if (picker.matches(':popover-open'))
-                picker.hidePopover();
+        // 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.
+        if (!button || !picker || !picker.matches(':popover-open'))
             return;
-        }
-        // Show first so the picker is laid out (and in the top-layer) before we
-        // measure it; a closed popover is display:none and would size to 0.
-        if (!picker.matches(':popover-open'))
-            picker.showPopover();
         const { x, y } = await computePosition(button, picker, {
             strategy: 'fixed',
             placement: 'bottom',
@@ -393,7 +428,7 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         Object.assign(picker.style, { left: `${x}px`, top: `${y}px` });
     }
     // --- Rendering ---
-    _renderButton(command, label, icon, onClick, active = false) {
+    _renderButton(command, label, icon, onClick, active = false, onPointerDown) {
         const iconTag = staticTag('icon');
         return html `
       <button
@@ -404,6 +439,7 @@ export class ProseEditor extends LuxenFormAssociatedElement {
         aria-label=${label}
         aria-pressed=${active}
         title=${label}
+        @pointerdown=${onPointerDown}
         @click=${onClick}
       >
         <${iconTag} name=${icon}></${iconTag}>
@@ -447,7 +483,7 @@ export class ProseEditor extends LuxenFormAssociatedElement {
             case 'link':
                 return this._renderButton('link', 'Link', 'ri:link', () => this.toggleLink(), editor.isActive('link'));
             case 'emoji':
-                return this._renderButton('emoji', 'Emoji', 'ri:emotion-line', () => void this._toggleEmojiPicker());
+                return this._renderButton('emoji', 'Emoji', 'ri:emotion-line', (event) => void this._onEmojiButtonClick(event), false, this._onEmojiButtonPointerDown);
             case 'attachment':
                 return this._renderButton('attachment', 'Attach file', 'ri:attachment-2', () => this.emit('add-file'));
             case 'undo':
@@ -484,7 +520,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__emojiPickerActive_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.styles = [hostStyles, styles];
 __decorate([
     property({ attribute: 'initial-html' })
@@ -515,6 +551,3 @@ __decorate([
 __decorate([
     property()
 ], ProseEditor.prototype, "placeholder", null);
-__decorate([
-    state()
-], ProseEditor.prototype, "_emojiPickerActive", null);

package/dist/elements/tree/tree.css

@@ -20,7 +20,7 @@
 }
 
 .tree:focus-visible {
-  outline: 2px solid var(--l-focus-ring, Highlight);
+  outline: 2px solid var(--l-focus-ring);
   outline-offset: 2px;
   border-radius: 0.375rem;
 }