@threadlabs/looma 0.1.18 → 0.1.20

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 (47) hide show
  1. package/dist/{chunk-DTQVRGVL.js → chunk-RLSUA6N5.js} +29 -29
  2. package/dist/cjs/ui-tree-item.cjs.entry.js +2 -2
  3. package/dist/cjs/ui-tree.cjs.entry.js +44 -18
  4. package/dist/collection/components/ui-tree/ui-tree.js +44 -18
  5. package/dist/collection/components/ui-tree-item/ui-tree-item.css +2 -2
  6. package/dist/collection/components/ui-tree-item/ui-tree-item.js +1 -1
  7. package/dist/components/ui-tree-item.js +1 -1
  8. package/dist/components/ui-tree.js +1 -1
  9. package/dist/esm/ui-tree-item.entry.js +2 -2
  10. package/dist/esm/ui-tree.entry.js +44 -18
  11. package/dist/index.cjs +46 -20
  12. package/dist/index.js +1 -1
  13. package/dist/looma/looma.esm.js +1 -1
  14. package/dist/looma/{p-d01960c2.entry.js → p-54722713.entry.js} +1 -1
  15. package/dist/looma/p-979b8ab1.entry.js +1 -0
  16. package/dist/types/components/ui-tree/ui-tree.d.ts +2 -0
  17. package/dist/{ui-affordance-scope.entry-2W7ZKAGK.js → ui-affordance-scope.entry-TEYCR7NX.js} +1 -1
  18. package/dist/{ui-avatar-group.entry-SE5JG2FT.js → ui-avatar-group.entry-Z2JCVPMM.js} +1 -1
  19. package/dist/{ui-avatar.entry-46JDI25A.js → ui-avatar.entry-CDDUQV4B.js} +1 -1
  20. package/dist/{ui-badge.entry-U7G3MEC5.js → ui-badge.entry-ELFAXPKR.js} +1 -1
  21. package/dist/{ui-button.entry-DELD6KMH.js → ui-button.entry-S5GEJ55S.js} +1 -1
  22. package/dist/{ui-checkbox.entry-ZUG2P642.js → ui-checkbox.entry-NFXU5LDX.js} +1 -1
  23. package/dist/{ui-context-menu.entry-L4HTK3PV.js → ui-context-menu.entry-W5F6LBEC.js} +1 -1
  24. package/dist/{ui-dialog.entry-TQPYD2YI.js → ui-dialog.entry-G2K37IUH.js} +1 -1
  25. package/dist/{ui-disclosure.entry-23TII4YU.js → ui-disclosure.entry-JO3XAMCC.js} +1 -1
  26. package/dist/{ui-floating-action-button.entry-FOQYAFJI.js → ui-floating-action-button.entry-EXXENSSO.js} +1 -1
  27. package/dist/{ui-form-field.entry-SCPG4STY.js → ui-form-field.entry-L62S6Z62.js} +1 -1
  28. package/dist/{ui-icon-button.entry-U45ZVAC3.js → ui-icon-button.entry-D7I7BV27.js} +1 -1
  29. package/dist/{ui-input.entry-3AIA3G4C.js → ui-input.entry-YDFDXMZE.js} +1 -1
  30. package/dist/{ui-menu-item.entry-3QO5TG2J.js → ui-menu-item.entry-QH7UGDFX.js} +1 -1
  31. package/dist/{ui-menu.entry-JACWGDDG.js → ui-menu.entry-YIQOPJOS.js} +1 -1
  32. package/dist/{ui-popover.entry-2XP4H3S2.js → ui-popover.entry-XN2IOEYH.js} +1 -1
  33. package/dist/{ui-radio-group.entry-73IKFMDK.js → ui-radio-group.entry-C7ESTJSS.js} +1 -1
  34. package/dist/{ui-radio.entry-INJVXUKE.js → ui-radio.entry-AKVI5OUS.js} +1 -1
  35. package/dist/{ui-search-result-row.entry-4J732TDC.js → ui-search-result-row.entry-3BY6GUCL.js} +1 -1
  36. package/dist/{ui-search-shell.entry-3C2WRVE2.js → ui-search-shell.entry-2Z3GUR2I.js} +1 -1
  37. package/dist/{ui-select.entry-3ZLDGAKX.js → ui-select.entry-2YQLACCA.js} +1 -1
  38. package/dist/{ui-switch.entry-5MJRLR2P.js → ui-switch.entry-N5HDUJIW.js} +1 -1
  39. package/dist/{ui-tabs.entry-F5H7OPBO.js → ui-tabs.entry-FVOVVZOQ.js} +1 -1
  40. package/dist/{ui-textarea.entry-BNJ375JB.js → ui-textarea.entry-ZFGGCBLG.js} +1 -1
  41. package/dist/{ui-toast-region.entry-ZUIPJ2JH.js → ui-toast-region.entry-AA2DEUUZ.js} +1 -1
  42. package/dist/{ui-tooltip.entry-DZ4RMF35.js → ui-tooltip.entry-WN4PYNTZ.js} +1 -1
  43. package/dist/{ui-top-bar.entry-VKRXIUU6.js → ui-top-bar.entry-ZYYXC7OA.js} +1 -1
  44. package/dist/{ui-tree-item.entry-NFUQ45OL.js → ui-tree-item.entry-HWCNTX6N.js} +3 -3
  45. package/dist/{ui-tree.entry-H4CWDYI6.js → ui-tree.entry-6NPGKN5P.js} +45 -19
  46. package/package.json +1 -1
  47. package/dist/looma/p-95368dee.entry.js +0 -1
package/dist/{chunk-DTQVRGVL.js → chunk-RLSUA6N5.js} RENAMED
@@ -6,35 +6,35 @@ var __glob = (map) => (path) => {
6
6
 
7
7
  // import("./**/*.entry.js") in dist/esm/index-CEeiinfk.js
8
8
  var globImport_entry_js = __glob({
9
- "./ui-affordance-scope.entry.js": () => import("./ui-affordance-scope.entry-2W7ZKAGK.js"),
10
- "./ui-avatar-group.entry.js": () => import("./ui-avatar-group.entry-SE5JG2FT.js"),
11
- "./ui-avatar.entry.js": () => import("./ui-avatar.entry-46JDI25A.js"),
12
- "./ui-badge.entry.js": () => import("./ui-badge.entry-U7G3MEC5.js"),
13
- "./ui-button.entry.js": () => import("./ui-button.entry-DELD6KMH.js"),
14
- "./ui-checkbox.entry.js": () => import("./ui-checkbox.entry-ZUG2P642.js"),
15
- "./ui-context-menu.entry.js": () => import("./ui-context-menu.entry-L4HTK3PV.js"),
16
- "./ui-dialog.entry.js": () => import("./ui-dialog.entry-TQPYD2YI.js"),
17
- "./ui-disclosure.entry.js": () => import("./ui-disclosure.entry-23TII4YU.js"),
18
- "./ui-floating-action-button.entry.js": () => import("./ui-floating-action-button.entry-FOQYAFJI.js"),
19
- "./ui-form-field.entry.js": () => import("./ui-form-field.entry-SCPG4STY.js"),
20
- "./ui-icon-button.entry.js": () => import("./ui-icon-button.entry-U45ZVAC3.js"),
21
- "./ui-input.entry.js": () => import("./ui-input.entry-3AIA3G4C.js"),
22
- "./ui-menu-item.entry.js": () => import("./ui-menu-item.entry-3QO5TG2J.js"),
23
- "./ui-menu.entry.js": () => import("./ui-menu.entry-JACWGDDG.js"),
24
- "./ui-popover.entry.js": () => import("./ui-popover.entry-2XP4H3S2.js"),
25
- "./ui-radio-group.entry.js": () => import("./ui-radio-group.entry-73IKFMDK.js"),
26
- "./ui-radio.entry.js": () => import("./ui-radio.entry-INJVXUKE.js"),
27
- "./ui-search-result-row.entry.js": () => import("./ui-search-result-row.entry-4J732TDC.js"),
28
- "./ui-search-shell.entry.js": () => import("./ui-search-shell.entry-3C2WRVE2.js"),
29
- "./ui-select.entry.js": () => import("./ui-select.entry-3ZLDGAKX.js"),
30
- "./ui-switch.entry.js": () => import("./ui-switch.entry-5MJRLR2P.js"),
31
- "./ui-tabs.entry.js": () => import("./ui-tabs.entry-F5H7OPBO.js"),
32
- "./ui-textarea.entry.js": () => import("./ui-textarea.entry-BNJ375JB.js"),
33
- "./ui-toast-region.entry.js": () => import("./ui-toast-region.entry-ZUIPJ2JH.js"),
34
- "./ui-tooltip.entry.js": () => import("./ui-tooltip.entry-DZ4RMF35.js"),
35
- "./ui-top-bar.entry.js": () => import("./ui-top-bar.entry-VKRXIUU6.js"),
36
- "./ui-tree-item.entry.js": () => import("./ui-tree-item.entry-NFUQ45OL.js"),
37
- "./ui-tree.entry.js": () => import("./ui-tree.entry-H4CWDYI6.js")
9
+ "./ui-affordance-scope.entry.js": () => import("./ui-affordance-scope.entry-TEYCR7NX.js"),
10
+ "./ui-avatar-group.entry.js": () => import("./ui-avatar-group.entry-Z2JCVPMM.js"),
11
+ "./ui-avatar.entry.js": () => import("./ui-avatar.entry-CDDUQV4B.js"),
12
+ "./ui-badge.entry.js": () => import("./ui-badge.entry-ELFAXPKR.js"),
13
+ "./ui-button.entry.js": () => import("./ui-button.entry-S5GEJ55S.js"),
14
+ "./ui-checkbox.entry.js": () => import("./ui-checkbox.entry-NFXU5LDX.js"),
15
+ "./ui-context-menu.entry.js": () => import("./ui-context-menu.entry-W5F6LBEC.js"),
16
+ "./ui-dialog.entry.js": () => import("./ui-dialog.entry-G2K37IUH.js"),
17
+ "./ui-disclosure.entry.js": () => import("./ui-disclosure.entry-JO3XAMCC.js"),
18
+ "./ui-floating-action-button.entry.js": () => import("./ui-floating-action-button.entry-EXXENSSO.js"),
19
+ "./ui-form-field.entry.js": () => import("./ui-form-field.entry-L62S6Z62.js"),
20
+ "./ui-icon-button.entry.js": () => import("./ui-icon-button.entry-D7I7BV27.js"),
21
+ "./ui-input.entry.js": () => import("./ui-input.entry-YDFDXMZE.js"),
22
+ "./ui-menu-item.entry.js": () => import("./ui-menu-item.entry-QH7UGDFX.js"),
23
+ "./ui-menu.entry.js": () => import("./ui-menu.entry-YIQOPJOS.js"),
24
+ "./ui-popover.entry.js": () => import("./ui-popover.entry-XN2IOEYH.js"),
25
+ "./ui-radio-group.entry.js": () => import("./ui-radio-group.entry-C7ESTJSS.js"),
26
+ "./ui-radio.entry.js": () => import("./ui-radio.entry-AKVI5OUS.js"),
27
+ "./ui-search-result-row.entry.js": () => import("./ui-search-result-row.entry-3BY6GUCL.js"),
28
+ "./ui-search-shell.entry.js": () => import("./ui-search-shell.entry-2Z3GUR2I.js"),
29
+ "./ui-select.entry.js": () => import("./ui-select.entry-2YQLACCA.js"),
30
+ "./ui-switch.entry.js": () => import("./ui-switch.entry-N5HDUJIW.js"),
31
+ "./ui-tabs.entry.js": () => import("./ui-tabs.entry-FVOVVZOQ.js"),
32
+ "./ui-textarea.entry.js": () => import("./ui-textarea.entry-ZFGGCBLG.js"),
33
+ "./ui-toast-region.entry.js": () => import("./ui-toast-region.entry-AA2DEUUZ.js"),
34
+ "./ui-tooltip.entry.js": () => import("./ui-tooltip.entry-WN4PYNTZ.js"),
35
+ "./ui-top-bar.entry.js": () => import("./ui-top-bar.entry-ZYYXC7OA.js"),
36
+ "./ui-tree-item.entry.js": () => import("./ui-tree-item.entry-HWCNTX6N.js"),
37
+ "./ui-tree.entry.js": () => import("./ui-tree.entry-6NPGKN5P.js")
38
38
  });
39
39
 
40
40
  // dist/esm/index-CEeiinfk.js
package/dist/cjs/ui-tree-item.cjs.entry.js CHANGED
@@ -603,7 +603,7 @@ function loomaIconMarkup(name, className = 'looma-icon') {
603
603
  ].join('');
604
604
  }
605
605
 
606
- const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
606
+ const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
607
607
 
608
608
  const UITreeItem = class {
609
609
  constructor(hostRef) {
@@ -681,7 +681,7 @@ const UITreeItem = class {
681
681
  return (index.h(index.Host, { key: 'ea8ed538aa3883c87257a25614a066965364693f', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
682
682
  '--ui-tree-item-depth': String(level - 1),
683
683
  'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
684
- } }, index.h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (index.h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, index.h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (index.h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, index.h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : index.h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), index.h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, index.h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), index.h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, index.h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), index.h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, index.h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), index.h("span", { key: '7e40559d6c5ba56710bc705083ad2ede3046e0b1', class: "drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (index.h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, index.h("slot", { name: "children" }))) : null));
684
+ } }, index.h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (index.h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, index.h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (index.h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, index.h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : index.h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), index.h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, index.h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), index.h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, index.h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), index.h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, index.h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), index.h("span", { key: '9efc0e95588f1dd4527dade2b7ff9f2774462c2e', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (index.h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, index.h("slot", { name: "children" }))) : null, index.h("span", { key: '8893ec2c4082bb8af942ef563055a2910d0d4201', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
685
685
  }
686
686
  static get watchers() { return {
687
687
  "expanded": [{
package/dist/cjs/ui-tree.cjs.entry.js CHANGED
@@ -95,6 +95,17 @@ const UITree = class {
95
95
  rowFor(item) {
96
96
  return item.shadowRoot?.querySelector('[part="row"]') ?? null;
97
97
  }
98
+ itemAtPoint(clientX, clientY) {
99
+ let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
100
+ while (element) {
101
+ if (element.localName === 'ui-tree-item' && this.host.contains(element)) {
102
+ return element;
103
+ }
104
+ const root = element.getRootNode();
105
+ element = root instanceof ShadowRoot ? root.host : element.parentElement;
106
+ }
107
+ return null;
108
+ }
98
109
  acceptsChildren(item) {
99
110
  return Boolean(item.container ?? item.hasAttribute('container'))
100
111
  && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
@@ -205,29 +216,44 @@ const UITree = class {
205
216
  return;
206
217
  this.clearTarget();
207
218
  };
219
+ dispatchReorder(source, target, position) {
220
+ const sourceId = this.itemId(source);
221
+ const targetId = this.itemId(target);
222
+ if (!sourceId || !targetId)
223
+ return;
224
+ const sourceMeta = this.itemMetadata(source);
225
+ const targetMeta = this.itemMetadata(target);
226
+ events.dispatchDetail(this.host, 'reorder', {
227
+ sourceId,
228
+ targetId,
229
+ position,
230
+ sourceType: sourceMeta.type,
231
+ targetType: targetMeta.type,
232
+ sourceScope: sourceMeta.scope,
233
+ targetScope: targetMeta.scope,
234
+ trigger: 'pointer',
235
+ });
236
+ }
208
237
  onDrop = (event) => {
209
238
  if (!this.source || !this.target || !this.position)
210
239
  return;
211
240
  event.preventDefault();
212
- const sourceId = this.itemId(this.source);
213
- const targetId = this.itemId(this.target);
214
- if (sourceId && targetId) {
215
- const sourceMeta = this.itemMetadata(this.source);
216
- const targetMeta = this.itemMetadata(this.target);
217
- events.dispatchDetail(this.host, 'reorder', {
218
- sourceId,
219
- targetId,
220
- position: this.position,
221
- sourceType: sourceMeta.type,
222
- targetType: targetMeta.type,
223
- sourceScope: sourceMeta.scope,
224
- targetScope: targetMeta.scope,
225
- trigger: 'pointer',
226
- });
227
- }
241
+ this.dispatchReorder(this.source, this.target, this.position);
228
242
  this.finishDrag();
229
243
  };
230
- onDragEnd = () => {
244
+ onDragEnd = (event) => {
245
+ if (this.source) {
246
+ const target = this.itemAtPoint(event.clientX, event.clientY);
247
+ if (target && target !== this.source) {
248
+ const row = this.rowFor(target);
249
+ if (row) {
250
+ const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
251
+ if (this.permitsDrop(this.source, target, position)) {
252
+ this.dispatchReorder(this.source, target, position);
253
+ }
254
+ }
255
+ }
256
+ }
231
257
  this.finishDrag();
232
258
  };
233
259
  visibleItems() {
@@ -249,7 +275,7 @@ const UITree = class {
249
275
  next.focus();
250
276
  };
251
277
  render() {
252
- return (index.h(index.Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
278
+ return (index.h(index.Host, { key: '9668f6170cec944d7b993bf0f98637d8908f5962', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '93140b9a53ca3cddfdc1206e952ca713559dbc2f' })));
253
279
  }
254
280
  };
255
281
  UITree.style = uiTreeCss();
package/dist/collection/components/ui-tree/ui-tree.js CHANGED
@@ -36,6 +36,17 @@ export class UITree {
36
36
  rowFor(item) {
37
37
  return item.shadowRoot?.querySelector('[part="row"]') ?? null;
38
38
  }
39
+ itemAtPoint(clientX, clientY) {
40
+ let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
41
+ while (element) {
42
+ if (element.localName === 'ui-tree-item' && this.host.contains(element)) {
43
+ return element;
44
+ }
45
+ const root = element.getRootNode();
46
+ element = root instanceof ShadowRoot ? root.host : element.parentElement;
47
+ }
48
+ return null;
49
+ }
39
50
  acceptsChildren(item) {
40
51
  return Boolean(item.container ?? item.hasAttribute('container'))
41
52
  && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
@@ -146,29 +157,44 @@ export class UITree {
146
157
  return;
147
158
  this.clearTarget();
148
159
  };
160
+ dispatchReorder(source, target, position) {
161
+ const sourceId = this.itemId(source);
162
+ const targetId = this.itemId(target);
163
+ if (!sourceId || !targetId)
164
+ return;
165
+ const sourceMeta = this.itemMetadata(source);
166
+ const targetMeta = this.itemMetadata(target);
167
+ dispatchDetail(this.host, 'reorder', {
168
+ sourceId,
169
+ targetId,
170
+ position,
171
+ sourceType: sourceMeta.type,
172
+ targetType: targetMeta.type,
173
+ sourceScope: sourceMeta.scope,
174
+ targetScope: targetMeta.scope,
175
+ trigger: 'pointer',
176
+ });
177
+ }
149
178
  onDrop = (event) => {
150
179
  if (!this.source || !this.target || !this.position)
151
180
  return;
152
181
  event.preventDefault();
153
- const sourceId = this.itemId(this.source);
154
- const targetId = this.itemId(this.target);
155
- if (sourceId && targetId) {
156
- const sourceMeta = this.itemMetadata(this.source);
157
- const targetMeta = this.itemMetadata(this.target);
158
- dispatchDetail(this.host, 'reorder', {
159
- sourceId,
160
- targetId,
161
- position: this.position,
162
- sourceType: sourceMeta.type,
163
- targetType: targetMeta.type,
164
- sourceScope: sourceMeta.scope,
165
- targetScope: targetMeta.scope,
166
- trigger: 'pointer',
167
- });
168
- }
182
+ this.dispatchReorder(this.source, this.target, this.position);
169
183
  this.finishDrag();
170
184
  };
171
- onDragEnd = () => {
185
+ onDragEnd = (event) => {
186
+ if (this.source) {
187
+ const target = this.itemAtPoint(event.clientX, event.clientY);
188
+ if (target && target !== this.source) {
189
+ const row = this.rowFor(target);
190
+ if (row) {
191
+ const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
192
+ if (this.permitsDrop(this.source, target, position)) {
193
+ this.dispatchReorder(this.source, target, position);
194
+ }
195
+ }
196
+ }
197
+ }
172
198
  this.finishDrag();
173
199
  };
174
200
  visibleItems() {
@@ -190,7 +216,7 @@ export class UITree {
190
216
  next.focus();
191
217
  };
192
218
  render() {
193
- return (h(Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
219
+ return (h(Host, { key: '9668f6170cec944d7b993bf0f98637d8908f5962', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '93140b9a53ca3cddfdc1206e952ca713559dbc2f' })));
194
220
  }
195
221
  static get is() { return "ui-tree"; }
196
222
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/ui-tree-item/ui-tree-item.css CHANGED
@@ -186,12 +186,12 @@
186
186
  .drop-indicator::before { inset-inline-start: -1px; }
187
187
  .drop-indicator::after { inset-inline-end: -1px; }
188
188
 
189
- :host([data-drop-position='before']) .drop-indicator {
189
+ :host([data-drop-position='before']) .row-drop-indicator {
190
190
  display: block;
191
191
  inset-block-start: -1px;
192
192
  }
193
193
 
194
- :host([data-drop-position='after']) .drop-indicator {
194
+ :host([data-drop-position='after']) .subtree-drop-indicator {
195
195
  display: block;
196
196
  inset-block-end: -1px;
197
197
  }
package/dist/collection/components/ui-tree-item/ui-tree-item.js CHANGED
@@ -74,7 +74,7 @@ export class UITreeItem {
74
74
  return (h(Host, { key: 'ea8ed538aa3883c87257a25614a066965364693f', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
75
75
  '--ui-tree-item-depth': String(level - 1),
76
76
  'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
77
- } }, h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), h("span", { key: '7e40559d6c5ba56710bc705083ad2ede3046e0b1', class: "drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null));
77
+ } }, h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), h("span", { key: '9efc0e95588f1dd4527dade2b7ff9f2774462c2e', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null, h("span", { key: '8893ec2c4082bb8af942ef563055a2910d0d4201', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
78
78
  }
79
79
  static get is() { return "ui-tree-item"; }
80
80
  static get encapsulation() { return "shadow"; }
package/dist/components/ui-tree-item.js CHANGED
@@ -10,4 +10,4 @@ import{p as a,H as e,h as t,c as i,t as r}from"./p-CIA4RyEp.js";import{d,e as o}
10
10
  *
11
11
  * This source code is licensed under the ISC license.
12
12
  * See the LICENSE file in the root directory of this source tree.
13
- */function s(a){return(a+"").replaceAll("&","&amp;").replaceAll('"',"&quot;")}function c(a){const[e,t]=a;return`<${e}${function(a){return Object.entries(a).map((([a,e])=>` ${a}="${s(e)}"`)).join("")}(t)}></${e}>`}function p(a,e="looma-icon"){return`<svg class="${s(e)}" data-looma-icon="${a}" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`+n[a].map(c).join("")+"</svg>"}const h=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}get host(){return this}itemId="";label="";depth=1;container=!1;sortable=!1;dragType="item";dropScope="";accepts="";expanded=!1;defaultExpanded=!1;selected=!1;disabled=!1;internalExpanded=!1;syncExpandedFromProp(){this.internalExpanded=this.expanded}componentWillLoad(){this.internalExpanded=this.expanded||this.defaultExpanded}componentDidLoad(){this.host.addEventListener("ui-tree-auto-expand",this.onAutoExpand)}disconnectedCallback(){this.host.removeEventListener("ui-tree-auto-expand",this.onAutoExpand)}setExpanded(a,e){this.container&&!this.disabled&&this.internalExpanded!==a&&(this.internalExpanded=a,d(this.host,"expand",{id:this.itemId,expanded:a,trigger:e}))}onAutoExpand=()=>{this.setExpanded(!0,"pointer")};onDisclosureClick=a=>{a.stopPropagation(),this.setExpanded(!this.internalExpanded,o(a))};onDisclosureKeydown=a=>{"ArrowRight"!==a.key&&"ArrowLeft"!==a.key||(a.preventDefault(),a.stopPropagation(),this.setExpanded("ArrowRight"===a.key,"keyboard"))};onRowClick=a=>{this.container&&!this.disabled&&(a.composedPath().some((a=>a instanceof e&&(a.matches('a, button, input, select, textarea, [role="button"], [role="link"]')||"actions"===a.getAttribute("slot"))))||this.setExpanded(!this.internalExpanded,o(a)))};render(){const a=Math.max(1,Math.floor(this.depth)),e=`${this.internalExpanded?"Collapse":"Expand"} ${this.label||"item"}`,r=`Drag ${this.label||"item"} to reorder`;return t(i,{key:"ea8ed538aa3883c87257a25614a066965364693f",role:"treeitem","aria-level":a+"","aria-expanded":this.container?this.internalExpanded+"":void 0,"aria-selected":this.selected+"","aria-disabled":this.disabled?"true":void 0,"data-container":this.container?"":void 0,"data-selected":this.selected?"":void 0,"data-disabled":this.disabled?"":void 0,"data-drag-type":this.dragType||"item","data-drop-scope":this.dropScope||void 0,"data-accepts":this.accepts||void 0,tabIndex:this.disabled?-1:0,style:{"--ui-tree-item-depth":a-1+"","margin-inline-start":a>1?"var(--ui-tree-indent, 16px)":"0px"}},t("div",{key:"740b93aa47e65d8a1cb899d4b9c966d9ad1d456f",class:"row",part:"row",onClick:this.onRowClick},this.sortable&&!this.disabled?t("button",{class:"drag-handle",part:"drag-handle",type:"button",draggable:!0,"aria-label":r,title:r},t("span",{innerHTML:p("grip-vertical")})):null,this.container?t("button",{class:"disclosure",part:"disclosure",type:"button","aria-label":e,"aria-expanded":this.internalExpanded+"",disabled:this.disabled,onClick:this.onDisclosureClick,onKeyDown:this.onDisclosureKeydown},t("span",{class:{"disclosure-icon":!0,"disclosure-icon--expanded":this.internalExpanded},innerHTML:p("chevron-down")})):t("span",{class:"disclosure-spacer","aria-hidden":"true"}),t("span",{key:"37e1b7f1cdddf623734becef465ffde83d8b86f2",class:"leading",part:"leading"},t("slot",{key:"0ab3a60c98628f009918d0d720772154912d2709",name:"leading"})),t("span",{key:"defdd343f25a0f4354110e981f3889e1d09c27ee",class:"label",part:"label"},t("slot",{key:"bde46ccacc1a620348062fc300503c4f1736316b"})),t("span",{key:"caff9ada38c41be90aeb6e331f4c54a51f31d26c",class:"actions",part:"actions"},t("slot",{key:"e11704d6871445c91eaa29c99302d8b751be69d3",name:"actions"})),t("span",{key:"7e40559d6c5ba56710bc705083ad2ede3046e0b1",class:"drop-indicator",part:"drop-indicator","aria-hidden":"true"})),this.container?t("div",{class:"children",part:"children",role:"group",hidden:!this.internalExpanded},t("slot",{name:"children"})):null)}static get watchers(){return{expanded:[{syncExpandedFromProp:0}]}}static get style(){return":host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}"}},[769,"ui-tree-item",{itemId:[1,"item-id"],label:[1],depth:[2],container:[4],sortable:[4],dragType:[1,"drag-type"],dropScope:[1,"drop-scope"],accepts:[1],expanded:[4],defaultExpanded:[4,"default-expanded"],selected:[4],disabled:[4],internalExpanded:[32]},void 0,{expanded:[{syncExpandedFromProp:0}]}]),l=h,u=function(){"undefined"!=typeof customElements&&["ui-tree-item"].forEach((a=>{"ui-tree-item"===a&&(customElements.get(r(a))||customElements.define(r(a),h))}))};export{l as UiTreeItem,u as defineCustomElement}
13
+ */function s(a){return(a+"").replaceAll("&","&amp;").replaceAll('"',"&quot;")}function c(a){const[e,t]=a;return`<${e}${function(a){return Object.entries(a).map((([a,e])=>` ${a}="${s(e)}"`)).join("")}(t)}></${e}>`}function p(a,e="looma-icon"){return`<svg class="${s(e)}" data-looma-icon="${a}" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`+n[a].map(c).join("")+"</svg>"}const h=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}get host(){return this}itemId="";label="";depth=1;container=!1;sortable=!1;dragType="item";dropScope="";accepts="";expanded=!1;defaultExpanded=!1;selected=!1;disabled=!1;internalExpanded=!1;syncExpandedFromProp(){this.internalExpanded=this.expanded}componentWillLoad(){this.internalExpanded=this.expanded||this.defaultExpanded}componentDidLoad(){this.host.addEventListener("ui-tree-auto-expand",this.onAutoExpand)}disconnectedCallback(){this.host.removeEventListener("ui-tree-auto-expand",this.onAutoExpand)}setExpanded(a,e){this.container&&!this.disabled&&this.internalExpanded!==a&&(this.internalExpanded=a,d(this.host,"expand",{id:this.itemId,expanded:a,trigger:e}))}onAutoExpand=()=>{this.setExpanded(!0,"pointer")};onDisclosureClick=a=>{a.stopPropagation(),this.setExpanded(!this.internalExpanded,o(a))};onDisclosureKeydown=a=>{"ArrowRight"!==a.key&&"ArrowLeft"!==a.key||(a.preventDefault(),a.stopPropagation(),this.setExpanded("ArrowRight"===a.key,"keyboard"))};onRowClick=a=>{this.container&&!this.disabled&&(a.composedPath().some((a=>a instanceof e&&(a.matches('a, button, input, select, textarea, [role="button"], [role="link"]')||"actions"===a.getAttribute("slot"))))||this.setExpanded(!this.internalExpanded,o(a)))};render(){const a=Math.max(1,Math.floor(this.depth)),e=`${this.internalExpanded?"Collapse":"Expand"} ${this.label||"item"}`,r=`Drag ${this.label||"item"} to reorder`;return t(i,{key:"ea8ed538aa3883c87257a25614a066965364693f",role:"treeitem","aria-level":a+"","aria-expanded":this.container?this.internalExpanded+"":void 0,"aria-selected":this.selected+"","aria-disabled":this.disabled?"true":void 0,"data-container":this.container?"":void 0,"data-selected":this.selected?"":void 0,"data-disabled":this.disabled?"":void 0,"data-drag-type":this.dragType||"item","data-drop-scope":this.dropScope||void 0,"data-accepts":this.accepts||void 0,tabIndex:this.disabled?-1:0,style:{"--ui-tree-item-depth":a-1+"","margin-inline-start":a>1?"var(--ui-tree-indent, 16px)":"0px"}},t("div",{key:"740b93aa47e65d8a1cb899d4b9c966d9ad1d456f",class:"row",part:"row",onClick:this.onRowClick},this.sortable&&!this.disabled?t("button",{class:"drag-handle",part:"drag-handle",type:"button",draggable:!0,"aria-label":r,title:r},t("span",{innerHTML:p("grip-vertical")})):null,this.container?t("button",{class:"disclosure",part:"disclosure",type:"button","aria-label":e,"aria-expanded":this.internalExpanded+"",disabled:this.disabled,onClick:this.onDisclosureClick,onKeyDown:this.onDisclosureKeydown},t("span",{class:{"disclosure-icon":!0,"disclosure-icon--expanded":this.internalExpanded},innerHTML:p("chevron-down")})):t("span",{class:"disclosure-spacer","aria-hidden":"true"}),t("span",{key:"37e1b7f1cdddf623734becef465ffde83d8b86f2",class:"leading",part:"leading"},t("slot",{key:"0ab3a60c98628f009918d0d720772154912d2709",name:"leading"})),t("span",{key:"defdd343f25a0f4354110e981f3889e1d09c27ee",class:"label",part:"label"},t("slot",{key:"bde46ccacc1a620348062fc300503c4f1736316b"})),t("span",{key:"caff9ada38c41be90aeb6e331f4c54a51f31d26c",class:"actions",part:"actions"},t("slot",{key:"e11704d6871445c91eaa29c99302d8b751be69d3",name:"actions"})),t("span",{key:"9efc0e95588f1dd4527dade2b7ff9f2774462c2e",class:"drop-indicator row-drop-indicator",part:"drop-indicator","aria-hidden":"true"})),this.container?t("div",{class:"children",part:"children",role:"group",hidden:!this.internalExpanded},t("slot",{name:"children"})):null,t("span",{key:"8893ec2c4082bb8af942ef563055a2910d0d4201",class:"drop-indicator subtree-drop-indicator",part:"drop-indicator","aria-hidden":"true"}))}static get watchers(){return{expanded:[{syncExpandedFromProp:0}]}}static get style(){return":host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}"}},[769,"ui-tree-item",{itemId:[1,"item-id"],label:[1],depth:[2],container:[4],sortable:[4],dragType:[1,"drag-type"],dropScope:[1,"drop-scope"],accepts:[1],expanded:[4],defaultExpanded:[4,"default-expanded"],selected:[4],disabled:[4],internalExpanded:[32]},void 0,{expanded:[{syncExpandedFromProp:0}]}]),l=h,u=function(){"undefined"!=typeof customElements&&["ui-tree-item"].forEach((a=>{"ui-tree-item"===a&&(customElements.get(r(a))||customElements.define(r(a),h))}))};export{l as UiTreeItem,u as defineCustomElement}
package/dist/components/ui-tree.js CHANGED
@@ -1 +1 @@
1
- import{p as t,H as e,h as i,c as s,t as r}from"./p-CIA4RyEp.js";import{d as n}from"./p-JwSoedEO.js";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get host(){return this}label="Tree";hoverExpandDelay=700;source=null;target=null;position=null;hoverIntent=null;componentDidLoad(){this.hoverIntent=function(t,e){let i,s;function r(){i&&clearTimeout(i),i=void 0,s=void 0}return{schedule(n){s===n&&i||(r(),s=n,i=setTimeout((()=>{i=void 0;const t=s;s=void 0,t&&e(t)}),Math.max(0,t)))},cancel:r,destroy:r}}(this.hoverExpandDelay,this.expandTarget),this.host.addEventListener("dragstart",this.onDragStart),this.host.addEventListener("dragover",this.onDragOver),this.host.addEventListener("dragleave",this.onDragLeave),this.host.addEventListener("drop",this.onDrop),this.host.addEventListener("dragend",this.onDragEnd),this.host.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.hoverIntent?.destroy(),this.host.removeEventListener("dragstart",this.onDragStart),this.host.removeEventListener("dragover",this.onDragOver),this.host.removeEventListener("dragleave",this.onDragLeave),this.host.removeEventListener("drop",this.onDrop),this.host.removeEventListener("dragend",this.onDragEnd),this.host.removeEventListener("keydown",this.onKeyDown)}itemFromEvent(t){return t.composedPath().find((t=>t instanceof e&&"ui-tree-item"===t.localName))??null}itemId(t){return t.itemId||t.getAttribute("item-id")||""}rowFor(t){return t.shadowRoot?.querySelector('[part="row"]')??null}acceptsChildren(t){return!!(t.container??t.hasAttribute("container"))&&!(t.disabled??t.hasAttribute("disabled"))}itemMetadata(t){return{type:t.getAttribute("data-drag-type")||t.getAttribute("drag-type")||"item",scope:t.getAttribute("data-drop-scope")||t.getAttribute("drop-scope")||"",accepts:(t.getAttribute("data-accepts")||t.getAttribute("accepts")||"").split(",").map((t=>t.trim())).filter(Boolean)}}permitsDrop(t,e,i){if(t.contains(e))return!1;const s=this.itemMetadata(t),r=this.itemMetadata(e);return"inside"===i?this.acceptsChildren(e)&&(0===r.accepts.length||r.accepts.includes(s.type)):s.type===r.type}clearTarget(){this.target?.removeAttribute("data-drop-position"),this.target=null,this.position=null,this.hoverIntent?.cancel()}finishDrag(){this.source?.removeAttribute("data-dragging"),this.source=null,this.clearTarget()}expandTarget=t=>{const e=Array.from(this.host.querySelectorAll("ui-tree-item")).find((e=>this.itemId(e)===t));e&&"false"===e.getAttribute("aria-expanded")&&e.dispatchEvent(new CustomEvent("ui-tree-auto-expand"))};onDragStart=t=>{const i=this.itemFromEvent(t);if(!i||!(i.sortable??i.hasAttribute("sortable"))||(i.disabled??i.hasAttribute("disabled")))return;if(!t.composedPath().some((t=>t instanceof e&&"drag-handle"===t.getAttribute("part"))))return void t.preventDefault();const s=this.itemId(i),r=this.rowFor(i);s&&r?(this.source=i,i.setAttribute("data-dragging","true"),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",s)),function(t,e){if(!t||"function"!=typeof t.setDragImage)return;const{height:i}=e.getBoundingClientRect();t.setDragImage(e,16,Math.max(0,i/2))}(t.dataTransfer,r)):t.preventDefault()};onDragOver=t=>{if(!this.source)return;const e=this.itemFromEvent(t);if(!e||e===this.source)return void this.clearTarget();const i=this.rowFor(e);if(!i)return;const s=function(t,e,i){const s=t.height>0?Math.min(1,Math.max(0,(e-t.top)/t.height)):.5;return i?s<.25?"before":s>.75?"after":"inside":s<.5?"before":"after"}(i.getBoundingClientRect(),t.clientY,this.acceptsChildren(e));if(!this.permitsDrop(this.source,e,s))return t.dataTransfer&&(t.dataTransfer.dropEffect="none"),void this.clearTarget();t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.target===e&&this.position===s||(this.clearTarget(),this.target=e,this.position=s,e.setAttribute("data-drop-position",s)),"inside"===s&&"false"===e.getAttribute("aria-expanded")?this.hoverIntent?.schedule(this.itemId(e)):this.hoverIntent?.cancel()};onDragLeave=t=>{const e=t.relatedTarget;e instanceof Node&&this.host.contains(e)||this.clearTarget()};onDrop=t=>{if(!this.source||!this.target||!this.position)return;t.preventDefault();const e=this.itemId(this.source),i=this.itemId(this.target);if(e&&i){const t=this.itemMetadata(this.source),s=this.itemMetadata(this.target);n(this.host,"reorder",{sourceId:e,targetId:i,position:this.position,sourceType:t.type,targetType:s.type,sourceScope:t.scope,targetScope:s.scope,trigger:"pointer"})}this.finishDrag()};onDragEnd=()=>{this.finishDrag()};visibleItems(){return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((t=>t.getClientRects().length>0&&!t.hasAttribute("disabled")))}onKeyDown=t=>{const e=this.itemFromEvent(t);if(!e)return;const i=this.visibleItems(),s=i.indexOf(e);if(s<0)return;const r="ArrowDown"===t.key?i[s+1]:"ArrowUp"===t.key?i[s-1]:null;r&&(t.preventDefault(),r.focus())};render(){return i(s,{key:"5761d2840d2694340a4b937d46522f15f81973ac",role:"tree","aria-label":this.label||"Tree"},i("slot",{key:"08e5a7b489eed4f4eae9de6462104fd12defd336"}))}static get style(){return":host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}"}},[769,"ui-tree",{label:[1],hoverExpandDelay:[2,"hover-expand-delay"]}]),a=o,h=function(){"undefined"!=typeof customElements&&["ui-tree"].forEach((t=>{"ui-tree"===t&&(customElements.get(r(t))||customElements.define(r(t),o))}))};export{a as UiTree,h as defineCustomElement}
1
+ import{p as t,H as e,h as i,c as s,t as r}from"./p-CIA4RyEp.js";import{d as n}from"./p-JwSoedEO.js";function o(t,e,i){const s=t.height>0?Math.min(1,Math.max(0,(e-t.top)/t.height)):.5;return i?s<.25?"before":s>.75?"after":"inside":s<.5?"before":"after"}const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get host(){return this}label="Tree";hoverExpandDelay=700;source=null;target=null;position=null;hoverIntent=null;componentDidLoad(){this.hoverIntent=function(t,e){let i,s;function r(){i&&clearTimeout(i),i=void 0,s=void 0}return{schedule(n){s===n&&i||(r(),s=n,i=setTimeout((()=>{i=void 0;const t=s;s=void 0,t&&e(t)}),Math.max(0,t)))},cancel:r,destroy:r}}(this.hoverExpandDelay,this.expandTarget),this.host.addEventListener("dragstart",this.onDragStart),this.host.addEventListener("dragover",this.onDragOver),this.host.addEventListener("dragleave",this.onDragLeave),this.host.addEventListener("drop",this.onDrop),this.host.addEventListener("dragend",this.onDragEnd),this.host.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.hoverIntent?.destroy(),this.host.removeEventListener("dragstart",this.onDragStart),this.host.removeEventListener("dragover",this.onDragOver),this.host.removeEventListener("dragleave",this.onDragLeave),this.host.removeEventListener("drop",this.onDrop),this.host.removeEventListener("dragend",this.onDragEnd),this.host.removeEventListener("keydown",this.onKeyDown)}itemFromEvent(t){return t.composedPath().find((t=>t instanceof e&&"ui-tree-item"===t.localName))??null}itemId(t){return t.itemId||t.getAttribute("item-id")||""}rowFor(t){return t.shadowRoot?.querySelector('[part="row"]')??null}itemAtPoint(t,e){let i=this.host.ownerDocument.elementFromPoint(t,e);for(;i;){if("ui-tree-item"===i.localName&&this.host.contains(i))return i;const t=i.getRootNode();i=t instanceof ShadowRoot?t.host:i.parentElement}return null}acceptsChildren(t){return!!(t.container??t.hasAttribute("container"))&&!(t.disabled??t.hasAttribute("disabled"))}itemMetadata(t){return{type:t.getAttribute("data-drag-type")||t.getAttribute("drag-type")||"item",scope:t.getAttribute("data-drop-scope")||t.getAttribute("drop-scope")||"",accepts:(t.getAttribute("data-accepts")||t.getAttribute("accepts")||"").split(",").map((t=>t.trim())).filter(Boolean)}}permitsDrop(t,e,i){if(t.contains(e))return!1;const s=this.itemMetadata(t),r=this.itemMetadata(e);return"inside"===i?this.acceptsChildren(e)&&(0===r.accepts.length||r.accepts.includes(s.type)):s.type===r.type}clearTarget(){this.target?.removeAttribute("data-drop-position"),this.target=null,this.position=null,this.hoverIntent?.cancel()}finishDrag(){this.source?.removeAttribute("data-dragging"),this.source=null,this.clearTarget()}expandTarget=t=>{const e=Array.from(this.host.querySelectorAll("ui-tree-item")).find((e=>this.itemId(e)===t));e&&"false"===e.getAttribute("aria-expanded")&&e.dispatchEvent(new CustomEvent("ui-tree-auto-expand"))};onDragStart=t=>{const i=this.itemFromEvent(t);if(!i||!(i.sortable??i.hasAttribute("sortable"))||(i.disabled??i.hasAttribute("disabled")))return;if(!t.composedPath().some((t=>t instanceof e&&"drag-handle"===t.getAttribute("part"))))return void t.preventDefault();const s=this.itemId(i),r=this.rowFor(i);s&&r?(this.source=i,i.setAttribute("data-dragging","true"),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",s)),function(t,e){if(!t||"function"!=typeof t.setDragImage)return;const{height:i}=e.getBoundingClientRect();t.setDragImage(e,16,Math.max(0,i/2))}(t.dataTransfer,r)):t.preventDefault()};onDragOver=t=>{if(!this.source)return;const e=this.itemFromEvent(t);if(!e||e===this.source)return void this.clearTarget();const i=this.rowFor(e);if(!i)return;const s=o(i.getBoundingClientRect(),t.clientY,this.acceptsChildren(e));if(!this.permitsDrop(this.source,e,s))return t.dataTransfer&&(t.dataTransfer.dropEffect="none"),void this.clearTarget();t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.target===e&&this.position===s||(this.clearTarget(),this.target=e,this.position=s,e.setAttribute("data-drop-position",s)),"inside"===s&&"false"===e.getAttribute("aria-expanded")?this.hoverIntent?.schedule(this.itemId(e)):this.hoverIntent?.cancel()};onDragLeave=t=>{const e=t.relatedTarget;e instanceof Node&&this.host.contains(e)||this.clearTarget()};dispatchReorder(t,e,i){const s=this.itemId(t),r=this.itemId(e);if(!s||!r)return;const o=this.itemMetadata(t),a=this.itemMetadata(e);n(this.host,"reorder",{sourceId:s,targetId:r,position:i,sourceType:o.type,targetType:a.type,sourceScope:o.scope,targetScope:a.scope,trigger:"pointer"})}onDrop=t=>{this.source&&this.target&&this.position&&(t.preventDefault(),this.dispatchReorder(this.source,this.target,this.position),this.finishDrag())};onDragEnd=t=>{if(this.source){const e=this.itemAtPoint(t.clientX,t.clientY);if(e&&e!==this.source){const i=this.rowFor(e);if(i){const s=o(i.getBoundingClientRect(),t.clientY,this.acceptsChildren(e));this.permitsDrop(this.source,e,s)&&this.dispatchReorder(this.source,e,s)}}}this.finishDrag()};visibleItems(){return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((t=>t.getClientRects().length>0&&!t.hasAttribute("disabled")))}onKeyDown=t=>{const e=this.itemFromEvent(t);if(!e)return;const i=this.visibleItems(),s=i.indexOf(e);if(s<0)return;const r="ArrowDown"===t.key?i[s+1]:"ArrowUp"===t.key?i[s-1]:null;r&&(t.preventDefault(),r.focus())};render(){return i(s,{key:"9668f6170cec944d7b993bf0f98637d8908f5962",role:"tree","aria-label":this.label||"Tree"},i("slot",{key:"93140b9a53ca3cddfdc1206e952ca713559dbc2f"}))}static get style(){return":host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}"}},[769,"ui-tree",{label:[1],hoverExpandDelay:[2,"hover-expand-delay"]}]),h=a,d=function(){"undefined"!=typeof customElements&&["ui-tree"].forEach((t=>{"ui-tree"===t&&(customElements.get(r(t))||customElements.define(r(t),a))}))};export{h as UiTree,d as defineCustomElement}
package/dist/esm/ui-tree-item.entry.js CHANGED
@@ -601,7 +601,7 @@ function loomaIconMarkup(name, className = 'looma-icon') {
601
601
  ].join('');
602
602
  }
603
603
 
604
- const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
604
+ const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
605
605
 
606
606
  const UITreeItem = class {
607
607
  constructor(hostRef) {
@@ -679,7 +679,7 @@ const UITreeItem = class {
679
679
  return (h(Host, { key: 'ea8ed538aa3883c87257a25614a066965364693f', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
680
680
  '--ui-tree-item-depth': String(level - 1),
681
681
  'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
682
- } }, h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), h("span", { key: '7e40559d6c5ba56710bc705083ad2ede3046e0b1', class: "drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null));
682
+ } }, h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), h("span", { key: '9efc0e95588f1dd4527dade2b7ff9f2774462c2e', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null, h("span", { key: '8893ec2c4082bb8af942ef563055a2910d0d4201', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
683
683
  }
684
684
  static get watchers() { return {
685
685
  "expanded": [{
package/dist/esm/ui-tree.entry.js CHANGED
@@ -93,6 +93,17 @@ const UITree = class {
93
93
  rowFor(item) {
94
94
  return item.shadowRoot?.querySelector('[part="row"]') ?? null;
95
95
  }
96
+ itemAtPoint(clientX, clientY) {
97
+ let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
98
+ while (element) {
99
+ if (element.localName === 'ui-tree-item' && this.host.contains(element)) {
100
+ return element;
101
+ }
102
+ const root = element.getRootNode();
103
+ element = root instanceof ShadowRoot ? root.host : element.parentElement;
104
+ }
105
+ return null;
106
+ }
96
107
  acceptsChildren(item) {
97
108
  return Boolean(item.container ?? item.hasAttribute('container'))
98
109
  && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
@@ -203,29 +214,44 @@ const UITree = class {
203
214
  return;
204
215
  this.clearTarget();
205
216
  };
217
+ dispatchReorder(source, target, position) {
218
+ const sourceId = this.itemId(source);
219
+ const targetId = this.itemId(target);
220
+ if (!sourceId || !targetId)
221
+ return;
222
+ const sourceMeta = this.itemMetadata(source);
223
+ const targetMeta = this.itemMetadata(target);
224
+ dispatchDetail(this.host, 'reorder', {
225
+ sourceId,
226
+ targetId,
227
+ position,
228
+ sourceType: sourceMeta.type,
229
+ targetType: targetMeta.type,
230
+ sourceScope: sourceMeta.scope,
231
+ targetScope: targetMeta.scope,
232
+ trigger: 'pointer',
233
+ });
234
+ }
206
235
  onDrop = (event) => {
207
236
  if (!this.source || !this.target || !this.position)
208
237
  return;
209
238
  event.preventDefault();
210
- const sourceId = this.itemId(this.source);
211
- const targetId = this.itemId(this.target);
212
- if (sourceId && targetId) {
213
- const sourceMeta = this.itemMetadata(this.source);
214
- const targetMeta = this.itemMetadata(this.target);
215
- dispatchDetail(this.host, 'reorder', {
216
- sourceId,
217
- targetId,
218
- position: this.position,
219
- sourceType: sourceMeta.type,
220
- targetType: targetMeta.type,
221
- sourceScope: sourceMeta.scope,
222
- targetScope: targetMeta.scope,
223
- trigger: 'pointer',
224
- });
225
- }
239
+ this.dispatchReorder(this.source, this.target, this.position);
226
240
  this.finishDrag();
227
241
  };
228
- onDragEnd = () => {
242
+ onDragEnd = (event) => {
243
+ if (this.source) {
244
+ const target = this.itemAtPoint(event.clientX, event.clientY);
245
+ if (target && target !== this.source) {
246
+ const row = this.rowFor(target);
247
+ if (row) {
248
+ const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
249
+ if (this.permitsDrop(this.source, target, position)) {
250
+ this.dispatchReorder(this.source, target, position);
251
+ }
252
+ }
253
+ }
254
+ }
229
255
  this.finishDrag();
230
256
  };
231
257
  visibleItems() {
@@ -247,7 +273,7 @@ const UITree = class {
247
273
  next.focus();
248
274
  };
249
275
  render() {
250
- return (h(Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
276
+ return (h(Host, { key: '9668f6170cec944d7b993bf0f98637d8908f5962', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '93140b9a53ca3cddfdc1206e952ca713559dbc2f' })));
251
277
  }
252
278
  };
253
279
  UITree.style = uiTreeCss();