luxen-ui 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/cdn/custom-elements.json +148 -123
  2. package/cdn/elements/dropdown-item/dropdown-item.js +1 -1
  3. package/cdn/elements/dropdown-item/dropdown-item.js.map +1 -1
  4. package/cdn/elements/prose-editor/prose-editor.d.ts +24 -2
  5. package/cdn/elements/prose-editor/prose-editor.d.ts.map +1 -1
  6. package/cdn/elements/prose-editor/prose-editor.js +40 -39
  7. package/cdn/elements/prose-editor/prose-editor.js.map +1 -1
  8. package/cdn/elements/tree/tree.d.ts +11 -1
  9. package/cdn/elements/tree/tree.d.ts.map +1 -1
  10. package/cdn/elements/tree/tree.js +1 -3
  11. package/cdn/elements/tree/tree.js.map +1 -1
  12. package/cdn/elements/tree-item/tree-item.d.ts +17 -1
  13. package/cdn/elements/tree-item/tree-item.d.ts.map +1 -1
  14. package/cdn/elements/tree-item/tree-item.js +2 -1
  15. package/cdn/elements/tree-item/tree-item.js.map +1 -1
  16. package/cdn/standalone.css +4 -0
  17. package/cdn/standalone.js +99 -50
  18. package/cdn/standalone.js.map +1 -1
  19. package/cdn/styles/elements/button.css +4 -0
  20. package/dist/css/elements/button.css +4 -0
  21. package/dist/custom-elements.json +148 -123
  22. package/dist/elements/dropdown-item/dropdown-item.css +1 -0
  23. package/dist/elements/prose-editor/prose-editor.d.ts +24 -2
  24. package/dist/elements/prose-editor/prose-editor.d.ts.map +1 -1
  25. package/dist/elements/prose-editor/prose-editor.js +81 -48
  26. package/dist/elements/tree/tree.css +1 -1
  27. package/dist/elements/tree/tree.d.ts +11 -1
  28. package/dist/elements/tree/tree.d.ts.map +1 -1
  29. package/dist/elements/tree/tree.js +37 -11
  30. package/dist/elements/tree-item/tree-item.css +5 -1
  31. package/dist/elements/tree-item/tree-item.d.ts +17 -1
  32. package/dist/elements/tree-item/tree-item.d.ts.map +1 -1
  33. package/dist/elements/tree-item/tree-item.js +51 -10
  34. package/dist/metadata/index.json +22 -3
  35. package/dist/metadata/tree-item.json +20 -1
  36. package/dist/metadata/tree.json +1 -1
  37. package/dist/templates/elements/tree.md +18 -0
  38. package/package.json +4 -2
  39. package/postcss-plugin-prefix.js +43 -1
@@ -172,127 +172,6 @@
172
172
  }
173
173
  ]
174
174
  },
175
- {
176
- "kind": "javascript-module",
177
- "path": "src/html/elements/badge/badge.ts",
178
- "declarations": [
179
- {
180
- "kind": "class",
181
- "description": "",
182
- "name": "Badge",
183
- "members": [
184
- {
185
- "kind": "field",
186
- "name": "variant",
187
- "type": {
188
- "text": "BadgeVariant | undefined"
189
- },
190
- "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
191
- "attribute": "variant",
192
- "reflects": true
193
- },
194
- {
195
- "kind": "field",
196
- "name": "pill",
197
- "type": {
198
- "text": "boolean"
199
- },
200
- "default": "false",
201
- "description": "Display as pill shape",
202
- "attribute": "pill",
203
- "reflects": true
204
- },
205
- {
206
- "kind": "field",
207
- "name": "size",
208
- "type": {
209
- "text": "BadgeSize | undefined"
210
- },
211
- "description": "Badge size: `sm`, `lg`. Default is md.",
212
- "attribute": "size",
213
- "reflects": true
214
- },
215
- {
216
- "kind": "field",
217
- "name": "appearance",
218
- "type": {
219
- "text": "BadgeAppearance | undefined"
220
- },
221
- "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
222
- "attribute": "appearance",
223
- "reflects": true
224
- }
225
- ],
226
- "attributes": [
227
- {
228
- "name": "variant",
229
- "type": {
230
- "text": "BadgeVariant | undefined"
231
- },
232
- "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
233
- "fieldName": "variant"
234
- },
235
- {
236
- "name": "pill",
237
- "type": {
238
- "text": "boolean"
239
- },
240
- "default": "false",
241
- "description": "Display as pill shape",
242
- "fieldName": "pill"
243
- },
244
- {
245
- "name": "size",
246
- "type": {
247
- "text": "BadgeSize | undefined"
248
- },
249
- "description": "Badge size: `sm`, `lg`. Default is md.",
250
- "fieldName": "size"
251
- },
252
- {
253
- "name": "appearance",
254
- "type": {
255
- "text": "BadgeAppearance | undefined"
256
- },
257
- "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
258
- "fieldName": "appearance"
259
- }
260
- ],
261
- "superclass": {
262
- "name": "LuxenElement",
263
- "module": "/src/html/shared/luxen-element.js"
264
- },
265
- "tagName": "l-badge",
266
- "customElement": true,
267
- "summary": "A badge component for displaying small status indicators."
268
- }
269
- ],
270
- "exports": [
271
- {
272
- "kind": "js",
273
- "name": "Badge",
274
- "declaration": {
275
- "name": "Badge",
276
- "module": "src/html/elements/badge/badge.ts"
277
- }
278
- }
279
- ]
280
- },
281
- {
282
- "kind": "javascript-module",
283
- "path": "src/html/elements/badge/index.ts",
284
- "declarations": [],
285
- "exports": [
286
- {
287
- "kind": "js",
288
- "name": "*",
289
- "declaration": {
290
- "name": "*",
291
- "module": "src/html/elements/badge/badge.js"
292
- }
293
- }
294
- ]
295
- },
296
175
  {
297
176
  "kind": "javascript-module",
298
177
  "path": "src/html/elements/button/button.meta.ts",
@@ -446,6 +325,127 @@
446
325
  }
447
326
  ]
448
327
  },
328
+ {
329
+ "kind": "javascript-module",
330
+ "path": "src/html/elements/badge/badge.ts",
331
+ "declarations": [
332
+ {
333
+ "kind": "class",
334
+ "description": "",
335
+ "name": "Badge",
336
+ "members": [
337
+ {
338
+ "kind": "field",
339
+ "name": "variant",
340
+ "type": {
341
+ "text": "BadgeVariant | undefined"
342
+ },
343
+ "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
344
+ "attribute": "variant",
345
+ "reflects": true
346
+ },
347
+ {
348
+ "kind": "field",
349
+ "name": "pill",
350
+ "type": {
351
+ "text": "boolean"
352
+ },
353
+ "default": "false",
354
+ "description": "Display as pill shape",
355
+ "attribute": "pill",
356
+ "reflects": true
357
+ },
358
+ {
359
+ "kind": "field",
360
+ "name": "size",
361
+ "type": {
362
+ "text": "BadgeSize | undefined"
363
+ },
364
+ "description": "Badge size: `sm`, `lg`. Default is md.",
365
+ "attribute": "size",
366
+ "reflects": true
367
+ },
368
+ {
369
+ "kind": "field",
370
+ "name": "appearance",
371
+ "type": {
372
+ "text": "BadgeAppearance | undefined"
373
+ },
374
+ "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
375
+ "attribute": "appearance",
376
+ "reflects": true
377
+ }
378
+ ],
379
+ "attributes": [
380
+ {
381
+ "name": "variant",
382
+ "type": {
383
+ "text": "BadgeVariant | undefined"
384
+ },
385
+ "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
386
+ "fieldName": "variant"
387
+ },
388
+ {
389
+ "name": "pill",
390
+ "type": {
391
+ "text": "boolean"
392
+ },
393
+ "default": "false",
394
+ "description": "Display as pill shape",
395
+ "fieldName": "pill"
396
+ },
397
+ {
398
+ "name": "size",
399
+ "type": {
400
+ "text": "BadgeSize | undefined"
401
+ },
402
+ "description": "Badge size: `sm`, `lg`. Default is md.",
403
+ "fieldName": "size"
404
+ },
405
+ {
406
+ "name": "appearance",
407
+ "type": {
408
+ "text": "BadgeAppearance | undefined"
409
+ },
410
+ "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
411
+ "fieldName": "appearance"
412
+ }
413
+ ],
414
+ "superclass": {
415
+ "name": "LuxenElement",
416
+ "module": "/src/html/shared/luxen-element.js"
417
+ },
418
+ "tagName": "l-badge",
419
+ "customElement": true,
420
+ "summary": "A badge component for displaying small status indicators."
421
+ }
422
+ ],
423
+ "exports": [
424
+ {
425
+ "kind": "js",
426
+ "name": "Badge",
427
+ "declaration": {
428
+ "name": "Badge",
429
+ "module": "src/html/elements/badge/badge.ts"
430
+ }
431
+ }
432
+ ]
433
+ },
434
+ {
435
+ "kind": "javascript-module",
436
+ "path": "src/html/elements/badge/index.ts",
437
+ "declarations": [],
438
+ "exports": [
439
+ {
440
+ "kind": "js",
441
+ "name": "*",
442
+ "declaration": {
443
+ "name": "*",
444
+ "module": "src/html/elements/badge/badge.js"
445
+ }
446
+ }
447
+ ]
448
+ },
449
449
  {
450
450
  "kind": "javascript-module",
451
451
  "path": "src/html/elements/button-group/button-group.ts",
@@ -6040,7 +6040,7 @@
6040
6040
  "declarations": [
6041
6041
  {
6042
6042
  "kind": "class",
6043
- "description": "A hierarchical tree view composed of `<l-tree-item>` children.",
6043
+ "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\">`).",
6044
6044
  "name": "Tree",
6045
6045
  "cssProperties": [
6046
6046
  {
@@ -6357,6 +6357,31 @@
6357
6357
  "text": "number"
6358
6358
  }
6359
6359
  },
6360
+ {
6361
+ "kind": "method",
6362
+ "name": "setPosition",
6363
+ "parameters": [
6364
+ {
6365
+ "name": "level",
6366
+ "type": {
6367
+ "text": "number"
6368
+ }
6369
+ },
6370
+ {
6371
+ "name": "posInSet",
6372
+ "type": {
6373
+ "text": "number"
6374
+ }
6375
+ },
6376
+ {
6377
+ "name": "setSize",
6378
+ "type": {
6379
+ "text": "number"
6380
+ }
6381
+ }
6382
+ ],
6383
+ "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."
6384
+ },
6360
6385
  {
6361
6386
  "kind": "field",
6362
6387
  "name": "hasChildren",
@@ -6405,7 +6430,7 @@
6405
6430
  {
6406
6431
  "kind": "method",
6407
6432
  "name": "toggle",
6408
- "description": "Toggle expand state. Emits `lazy-load` the first time a lazy item opens."
6433
+ "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
6409
6434
  }
6410
6435
  ],
6411
6436
  "events": [
@@ -1,4 +1,4 @@
1
- import{i as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/lit-html.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{cursor:pointer;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
1
+ import{i as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/lit-html.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{cursor:pointer;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;text-align:start;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
2
2
  <div
3
3
  class="item"
4
4
  role=${e?`menuitemcheckbox`:`menuitem`}
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../src/html/elements/dropdown-item/dropdown-item.css?inline","../../../src/html/elements/dropdown-item/dropdown-item.ts"],"sourcesContent":[":host {\n display: block;\n}\n\n:host([disabled]) {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n outline: none;\n border-radius: 4px;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--l-color-text-primary, CanvasText);\n white-space: nowrap;\n}\n\n.item:focus-visible {\n background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n .item:hover {\n background: var(--l-color-bg-state-hover);\n }\n}\n\n.check {\n display: flex;\n width: 16px;\n flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n display: flex;\n flex-shrink: 0;\n}\n\n.label {\n flex: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './dropdown-item.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A menu item for use inside `<l-dropdown>`.\n *\n * @slot - Label text.\n * @slot prefix - Leading content (e.g. icon).\n * @slot suffix - Trailing content.\n *\n * @cssproperty --color - Text color.\n *\n * @customElement l-dropdown-item\n */\nexport class DropdownItem extends LuxenElement {\n static override styles = [hostStyles, styles];\n\n /** The value associated with this item. */\n @property()\n accessor value = '';\n\n /** Disables the item. */\n @property({ type: Boolean, reflect: true })\n accessor disabled = false;\n\n /** The type of item: `normal` or `checkbox`. */\n @property()\n accessor type: 'normal' | 'checkbox' = 'normal';\n\n /** Whether the checkbox item is checked. */\n @property({ type: Boolean, reflect: true })\n accessor checked = false;\n\n /** Returns the text label of this item. */\n getTextLabel(): string {\n return (this.textContent ?? '').trim();\n }\n\n override render() {\n const isCheckbox = this.type === 'checkbox';\n\n return html`\n <div\n class=\"item\"\n role=${isCheckbox ? 'menuitemcheckbox' : 'menuitem'}\n aria-checked=${isCheckbox ? String(this.checked) : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=\"-1\"\n >\n ${isCheckbox\n ? html`\n <span\n class=\"check\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n `\n : html` <slot name=\"prefix\"></slot> `}\n <span class=\"label\"><slot></slot></span>\n <slot name=\"suffix\"></slot>\n </div>\n `;\n }\n}\n"],"mappings":"0PCMA,IAAM,EAAS,EAAU,gmBAAU,CAatB,EAAb,cAAkC,CAAa,oBACpB,CAAC,EAAY,EAAO,IAI5B,OAAR,OAAA,0CAIW,OAAX,UAAA,6CAI8B,aAA9B,MAAA,yCAIU,OAAV,SAAA,yCAGT,cAAuB,CACrB,OAAQ,KAAK,aAAe,IAAI,MAAM,CAGxC,QAAkB,CAChB,IAAM,EAAa,KAAK,OAAS,WAEjC,MAAO,EAAI;;;eAGA,EAAa,mBAAqB,WAAW;uBACrC,EAAa,OAAO,KAAK,QAAQ,CAAG,EAAQ;wBAC3C,KAAK,SAAW,OAAS,EAAQ;;;UAG/C,EACE,CAAI;;;;;;;;;;;;;;;;;;;;cAqBJ,CAAI,gCAAgC;;;;WArD7C,GAAU,CAAA,CAAA,EAAA,UAAA,QAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,WAAA,KAAA,IAI1C,GAAU,CAAA,CAAA,EAAA,UAAA,OAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,UAAA,KAAA"}
1
+ {"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../src/html/elements/dropdown-item/dropdown-item.css?inline","../../../src/html/elements/dropdown-item/dropdown-item.ts"],"sourcesContent":[":host {\n display: block;\n}\n\n:host([disabled]) {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n outline: none;\n border-radius: 4px;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--l-color-text-primary, CanvasText);\n white-space: nowrap;\n text-align: start;\n}\n\n.item:focus-visible {\n background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n .item:hover {\n background: var(--l-color-bg-state-hover);\n }\n}\n\n.check {\n display: flex;\n width: 16px;\n flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n display: flex;\n flex-shrink: 0;\n}\n\n.label {\n flex: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './dropdown-item.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A menu item for use inside `<l-dropdown>`.\n *\n * @slot - Label text.\n * @slot prefix - Leading content (e.g. icon).\n * @slot suffix - Trailing content.\n *\n * @cssproperty --color - Text color.\n *\n * @customElement l-dropdown-item\n */\nexport class DropdownItem extends LuxenElement {\n static override styles = [hostStyles, styles];\n\n /** The value associated with this item. */\n @property()\n accessor value = '';\n\n /** Disables the item. */\n @property({ type: Boolean, reflect: true })\n accessor disabled = false;\n\n /** The type of item: `normal` or `checkbox`. */\n @property()\n accessor type: 'normal' | 'checkbox' = 'normal';\n\n /** Whether the checkbox item is checked. */\n @property({ type: Boolean, reflect: true })\n accessor checked = false;\n\n /** Returns the text label of this item. */\n getTextLabel(): string {\n return (this.textContent ?? '').trim();\n }\n\n override render() {\n const isCheckbox = this.type === 'checkbox';\n\n return html`\n <div\n class=\"item\"\n role=${isCheckbox ? 'menuitemcheckbox' : 'menuitem'}\n aria-checked=${isCheckbox ? String(this.checked) : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=\"-1\"\n >\n ${isCheckbox\n ? html`\n <span\n class=\"check\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n `\n : html` <slot name=\"prefix\"></slot> `}\n <span class=\"label\"><slot></slot></span>\n <slot name=\"suffix\"></slot>\n </div>\n `;\n }\n}\n"],"mappings":"0PCMA,IAAM,EAAS,EAAU,inBAAU,CAatB,EAAb,cAAkC,CAAa,oBACpB,CAAC,EAAY,EAAO,IAI5B,OAAR,OAAA,0CAIW,OAAX,UAAA,6CAI8B,aAA9B,MAAA,yCAIU,OAAV,SAAA,yCAGT,cAAuB,CACrB,OAAQ,KAAK,aAAe,IAAI,MAAM,CAGxC,QAAkB,CAChB,IAAM,EAAa,KAAK,OAAS,WAEjC,MAAO,EAAI;;;eAGA,EAAa,mBAAqB,WAAW;uBACrC,EAAa,OAAO,KAAK,QAAQ,CAAG,EAAQ;wBAC3C,KAAK,SAAW,OAAS,EAAQ;;;UAG/C,EACE,CAAI;;;;;;;;;;;;;;;;;;;;cAqBJ,CAAI,gCAAgC;;;;WArD7C,GAAU,CAAA,CAAA,EAAA,UAAA,QAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,WAAA,KAAA,IAI1C,GAAU,CAAA,CAAA,EAAA,UAAA,OAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,UAAA,KAAA"}
@@ -57,9 +57,10 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
57
57
  accessor autofocus: boolean;
58
58
  /** Placeholder shown when the editor is empty. */
59
59
  accessor placeholder: string;
60
- accessor _emojiPickerActive: boolean;
61
60
  private _editorRoot?;
62
61
  private _emojiPicker?;
62
+ private _emojiPickerPromise?;
63
+ private _emojiOpenAtPointerDown;
63
64
  get validationTarget(): HTMLElement | undefined;
64
65
  private get _toolbar();
65
66
  firstUpdated(): void;
@@ -102,7 +103,28 @@ export declare class ProseEditor extends LuxenFormAssociatedElement {
102
103
  private _createEditorRoot;
103
104
  private _onFocus;
104
105
  private _onKeyDown;
105
- private _toggleEmojiPicker;
106
+ /**
107
+ * The picker is a `popover="auto"`, so the platform owns outside-click
108
+ * dismissal: native light-dismiss in the top layer, which survives
109
+ * `stopPropagation()` from an ancestor (modal `<l-dialog>`, ProseMirror, Vue
110
+ * delegation), unlike emoji-mart's `document` click listener. (`Escape` is
111
+ * handled by `_onKeyDown` instead — ProseMirror `preventDefault()`s it, which
112
+ * would cancel the native close.)
113
+ *
114
+ * We can't wire the button as a native popover invoker (`popoverTargetElement`
115
+ * / `popovertarget`) because the picker is parented into another shadow tree
116
+ * (the open `<dialog>` — see `_topLayerContainer`) while the button lives in
117
+ * this element's shadow root; a cross-tree invoker reference doesn't resolve.
118
+ * So the toggle is hand-rolled here. The catch: a pointer click on the button
119
+ * is "outside" the popover, so native light-dismiss has already closed an open
120
+ * picker by the time this `click` fires (light-dismiss runs on `pointerup`).
121
+ * We therefore read the open state captured at `pointerdown` to know whether
122
+ * this click should re-open or stay closed. Keyboard activation (`detail === 0`)
123
+ * has no pointer light-dismiss, so it reads the live state and toggles directly.
124
+ */
125
+ private _onEmojiButtonPointerDown;
126
+ private _onEmojiButtonClick;
127
+ private _ensureEmojiPicker;
106
128
  /**
107
129
  * The element the emoji picker is appended to. Inside a modal `<l-dialog>` the
108
130
  * picker must live within the dialog's flat-tree subtree, otherwise the modal's
@@ -1 +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"}
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"}