@threadlabs/looma 0.1.21 → 0.1.23

package/dist/collection/components/ui-tooltip/ui-tooltip.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { openOverlay, closeOverlay } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UITooltip {
@@ -12,6 +12,12 @@ export class UITooltip {
     showDelay = 500;
     /** Pointer leave grace period in milliseconds. */
     hideDelay = 100;
+    /** Click or tap pins the description; activate again to dismiss. */
+    toggleOnClick = false;
+    pinned = false;
+    focused = false;
+    opened;
+    closed;
     internalOpen = false;
     overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
@@ -45,11 +51,14 @@ export class UITooltip {
         }
     }
     componentDidLoad() {
+        if (!this.host.id)
+            this.host.id = this.overlayId;
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.syncTrigger();
         this.setupSurface();
-        this.host.addEventListener('keydown', this.onKeydown);
+        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.addEventListener('pointerleave', this.onTriggerLeave);
         this.syncOverlay();
     }
     componentDidUpdate() {
@@ -60,12 +69,13 @@ export class UITooltip {
         this.detachTriggerListeners();
         this.surface?.destroy();
         this.surface = null;
-        this.host.removeEventListener('keydown', this.onKeydown);
+        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
         closeOverlay(this.overlayId);
     }
     syncTrigger() {
         const next = this.for
-            ? this.host.ownerDocument.getElementById(this.for)
+            ? this.host.getRootNode().getElementById(this.for)
             : this.host.previousElementSibling;
         if (next === this.trigger)
             return;
@@ -85,6 +95,11 @@ export class UITooltip {
         this.detachTriggerListeners();
         if (!this.trigger)
             return;
+        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
+        ids.add(this.host.id);
+        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
+        this.trigger.addEventListener('click', this.onTriggerClick);
+        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
         this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
@@ -93,6 +108,13 @@ export class UITooltip {
     detachTriggerListeners() {
         if (!this.trigger)
             return;
+        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
+        if (ids.length)
+            this.trigger.setAttribute('aria-describedby', ids.join(' '));
+        else
+            this.trigger.removeAttribute('aria-describedby');
+        this.trigger.removeEventListener('click', this.onTriggerClick);
+        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
         this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
@@ -124,7 +146,21 @@ export class UITooltip {
             trigger,
         });
     }
-    onTriggerEnter = () => {
+    onSurfaceEnter = () => this.clearHideTimer();
+    onTriggerClick = (event) => {
+        if (!this.toggleOnClick)
+            return;
+        this.clearTimers();
+        this.pinned = !this.pinned;
+        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key === 'Escape')
+            this.clearTimers();
+    };
+    onTriggerEnter = (event) => {
+        if (event.pointerType === 'touch')
+            return;
         this.clearHideTimer();
         if (this.internalOpen || this.showTimer !== null)
             return;
@@ -135,7 +171,7 @@ export class UITooltip {
     };
     onTriggerLeave = () => {
         this.clearShowTimer();
-        if (!this.internalOpen || this.hideTimer !== null)
+        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
             return;
         this.hideTimer = setTimeout(() => {
             this.hideTimer = null;
@@ -143,6 +179,7 @@ export class UITooltip {
         }, Math.max(0, this.hideDelay));
     };
     onTriggerFocusIn = () => {
+        this.focused = true;
         this.clearTimers();
         this.setInteractionOpen(true, 'keyboard');
     };
@@ -150,28 +187,25 @@ export class UITooltip {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
             return;
+        this.focused = false;
+        this.pinned = false;
         this.clearTimers();
         this.setInteractionOpen(false, 'keyboard');
     };
     handleRequestClose(reason, trigger) {
-        if (reason === 'escape') {
+        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
+            this.pinned = false;
             this.clearTimers();
             this.internalOpen = false;
             dispatchDetail(this.host, 'close', {
                 open: false,
-                reason: 'escape',
+                reason,
                 trigger: trigger,
             });
-            this.trigger?.focus();
         }
     }
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            requestTopOverlayClose('escape', 'keyboard');
-        }
-    };
     render() {
-        return (h(Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
+        return (h(Host, { key: 'b0199c23316a707ae3e1e7c361f2838872f62221', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'd0c7822f2f47848a509bf8e310806edbdb320f02' })));
     }
     static get is() { return "ui-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -313,6 +347,26 @@ export class UITooltip {
                 "reflect": false,
                 "attribute": "hide-delay",
                 "defaultValue": "100"
+            },
+            "toggleOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Click or tap pins the description; activate again to dismiss."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-on-click",
+                "defaultValue": "false"
             }
         };
     }
@@ -321,6 +375,39 @@ export class UITooltip {
             "internalOpen": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ open: boolean; reason: string; trigger: string }",
+                    "resolved": "{ open: boolean; reason: string; trigger: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ open: boolean; reason: string; trigger: string }",
+                    "resolved": "{ open: boolean; reason: string; trigger: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/ui-top-bar/ui-top-bar.js

@@ -27,7 +27,7 @@ export class UITopBar {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (h(Host, { key: '15c840c082724df0ec39ab6ad4e55f99192df5be' }, h("header", { key: '790afaeecdb3e598b8365391f57ee1e2d8ca69a2', class: "top-bar", part: "base" }, h("div", { key: 'fab822f5875c7e3b8e267be42c075597d79374fa', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '0723013c4b674964e4029442b715daa9eb0036db', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '77fc006257b7fa6a191191d9969ea66445b8bc3e', class: "top-bar__title" }, h("slot", { key: 'e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe' })), h("div", { key: 'bde5cdf797ae898f68eddeab362b8395f89bdf28', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '8b059d6123e94f3b7e18c15c88828ee9c6436136', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'c262446cf29873903530ea3f840de4de9db3de82', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: 'f417dbc8cc0115a455a72ce0feb5f32b323ce68f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (h(Host, { key: '730e45232ab2b86c2ac99dba773f4ca15d7c3c51' }, h("header", { key: 'f94f9b4f3f5930fda950895d2eec01d3ec175479', class: "top-bar", part: "base" }, h("div", { key: '038f6a404b0f159b4b826ada73d3c920266354c8', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '2d415368310c319eca3f3eb9b2c885ef79bb4107', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'dfd78b02066a91e9c610e4655a70da704ad65327', class: "top-bar__title" }, h("slot", { key: '499e24a864a31f6e400fd02aab4a3f960c87e572' })), h("div", { key: '5aa94952996487651dffecd2e351548631fa29b6', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: 'eddad95f8acf787ee0cead2a46e7961a06375d5c', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'dc69d492aa221a8beb888350bf101f8beeceede9', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: '7cde7e062f487da8209738a32415636c7a6b72f0', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
     static get is() { return "ui-top-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-tree/ui-tree.js

@@ -5,13 +5,19 @@ export class UITree {
     host;
     label = 'Tree';
     hoverExpandDelay = 700;
+    /** Maximum resulting item depth accepted by pointer reordering. Zero is unlimited. */
+    maxDepth = 0;
     source = null;
     target = null;
     position = null;
+    rejectedTarget = null;
+    rejectedPosition = null;
+    rejection = null;
     hoverIntent = null;
     componentDidLoad() {
         this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
         this.host.addEventListener('dragstart', this.onDragStart);
+        this.host.addEventListener('drag', this.onDrag);
         this.host.addEventListener('dragenter', this.onDragOver);
         this.host.addEventListener('dragover', this.onDragOver);
         this.host.addEventListener('dragleave', this.onDragLeave);
@@ -22,6 +28,7 @@ export class UITree {
     disconnectedCallback() {
         this.hoverIntent?.destroy();
         this.host.removeEventListener('dragstart', this.onDragStart);
+        this.host.removeEventListener('drag', this.onDrag);
         this.host.removeEventListener('dragenter', this.onDragOver);
         this.host.removeEventListener('dragover', this.onDragOver);
         this.host.removeEventListener('dragleave', this.onDragLeave);
@@ -73,19 +80,42 @@ export class UITree {
                 .filter(Boolean),
         };
     }
-    permitsDrop(source, target, position) {
+    constraintDepth(item) {
+        if (item.dropDepth !== undefined)
+            return item.dropDepth;
+        const dropDepth = item.getAttribute('drop-depth');
+        if (dropDepth !== null)
+            return Number(dropDepth);
+        if (item.depth !== undefined)
+            return item.depth;
+        return Number(item.getAttribute('depth')) || 1;
+    }
+    dropRejection(source, target, position) {
         // A tree item can never move into (or beside) one of its own descendants.
         // Reject the target before showing any insertion affordance so the preview
         // stays truthful instead of promising a move the consumer must undo.
         if (source.contains(target))
-            return false;
+            return { reason: 'descendant' };
         const sourceMeta = this.itemMetadata(source);
         const targetMeta = this.itemMetadata(target);
         if (position === 'inside') {
-            return this.acceptsChildren(target)
-                && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+            if (!this.acceptsChildren(target)
+                || (targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type))) {
+                return { reason: 'incompatible' };
+            }
+        }
+        else if (sourceMeta.type !== targetMeta.type) {
+            return { reason: 'incompatible' };
         }
-        return sourceMeta.type === targetMeta.type;
+        const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+        if (maxDepth > 0 && source.subtreeDepth !== undefined) {
+            const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+            const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+            const resultingDepth = targetDepth + (position === 'inside' ? 1 : 0) + subtreeDepth;
+            if (resultingDepth > maxDepth)
+                return { reason: 'max-depth', maxDepth, resultingDepth };
+        }
+        return null;
     }
     clearTarget() {
         this.target?.removeAttribute('data-drop-position');
@@ -93,10 +123,16 @@ export class UITree {
         this.position = null;
         this.hoverIntent?.cancel();
     }
+    clearRejection() {
+        this.rejectedTarget = null;
+        this.rejectedPosition = null;
+        this.rejection = null;
+    }
     finishDrag() {
         this.source?.removeAttribute('data-dragging');
         this.source = null;
         this.clearTarget();
+        this.clearRejection();
     }
     expandTarget = (itemId) => {
         const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
@@ -129,27 +165,36 @@ export class UITree {
         }
         setElementDragImage(event.dataTransfer, row);
     };
-    onDragOver = (event) => {
+    updateTarget(target, clientY, dataTransfer) {
         if (!this.source)
-            return;
-        const target = this.itemFromEvent(event);
+            return false;
         if (!target || target === this.source) {
             this.clearTarget();
-            return;
+            this.clearRejection();
+            return false;
         }
         const row = this.rowFor(target);
         if (!row)
-            return;
-        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-        if (!this.permitsDrop(this.source, target, position)) {
-            if (event.dataTransfer)
-                event.dataTransfer.dropEffect = 'none';
+            return false;
+        const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
+        const rejection = this.dropRejection(this.source, target, position);
+        if (rejection) {
+            if (dataTransfer)
+                dataTransfer.dropEffect = 'none';
             this.clearTarget();
-            return;
+            if (rejection.reason === 'max-depth') {
+                this.rejectedTarget = target;
+                this.rejectedPosition = position;
+                this.rejection = rejection;
+            }
+            else {
+                this.clearRejection();
+            }
+            return false;
         }
-        event.preventDefault();
-        if (event.dataTransfer)
-            event.dataTransfer.dropEffect = 'move';
+        this.clearRejection();
+        if (dataTransfer)
+            dataTransfer.dropEffect = 'move';
         if (this.target !== target || this.position !== position) {
             this.clearTarget();
             this.target = target;
@@ -162,6 +207,26 @@ export class UITree {
         else {
             this.hoverIntent?.cancel();
         }
+        return true;
+    }
+    onDrag = (event) => {
+        if (!this.source || (event.clientX === 0 && event.clientY === 0))
+            return;
+        const target = this.itemAtPoint(event.clientX, event.clientY);
+        // Native dragenter does not fire when a nested source moves onto an
+        // ancestor row: the pointer was already inside that ancestor's host. The
+        // source drag event still carries the live pointer coordinates, so use it
+        // to keep ancestor/outdent feedback current.
+        if (target)
+            this.updateTarget(target, event.clientY, event.dataTransfer);
+    };
+    onDragOver = (event) => {
+        if (!this.source)
+            return;
+        const target = this.itemFromEvent(event);
+        if (this.updateTarget(target, event.clientY, event.dataTransfer)) {
+            event.preventDefault();
+        }
     };
     onDragLeave = (event) => {
         if (this.isWithinTree(event.relatedTarget))
@@ -169,12 +234,15 @@ export class UITree {
         if (this.itemAtPoint(event.clientX, event.clientY))
             return;
         this.clearTarget();
+        this.clearRejection();
     };
     dispatchReorder(source, target, position) {
         const sourceId = this.itemId(source);
         const targetId = this.itemId(target);
         if (!sourceId || !targetId)
             return;
+        if (position === 'inside')
+            this.expandTarget(targetId);
         const sourceMeta = this.itemMetadata(source);
         const targetMeta = this.itemMetadata(target);
         dispatchDetail(this.host, 'reorder', {
@@ -188,6 +256,21 @@ export class UITree {
             trigger: 'pointer',
         });
     }
+    dispatchReorderRejected(source, target, position, rejection) {
+        const sourceId = this.itemId(source);
+        const targetId = this.itemId(target);
+        if (!sourceId || !targetId)
+            return;
+        dispatchDetail(this.host, 'reorder-rejected', {
+            sourceId,
+            targetId,
+            position,
+            reason: 'max-depth',
+            maxDepth: rejection.maxDepth,
+            resultingDepth: rejection.resultingDepth,
+            trigger: 'pointer',
+        });
+    }
     onDrop = (event) => {
         if (!this.source || !this.target || !this.position)
             return;
@@ -197,14 +280,23 @@ export class UITree {
     };
     onDragEnd = (event) => {
         if (this.source) {
+            if (this.rejectedTarget && this.rejectedPosition && this.rejection) {
+                this.dispatchReorderRejected(this.source, this.rejectedTarget, this.rejectedPosition, this.rejection);
+                this.finishDrag();
+                return;
+            }
             const target = this.itemAtPoint(event.clientX, event.clientY);
             if (target && target !== this.source) {
                 const row = this.rowFor(target);
                 if (row) {
                     const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-                    if (this.permitsDrop(this.source, target, position)) {
+                    const rejection = this.dropRejection(this.source, target, position);
+                    if (!rejection) {
                         this.dispatchReorder(this.source, target, position);
                     }
+                    else if (rejection.reason === 'max-depth') {
+                        this.dispatchReorderRejected(this.source, target, position, rejection);
+                    }
                 }
             }
         }
@@ -229,7 +321,7 @@ export class UITree {
         next.focus();
     };
     render() {
-        return (h(Host, { key: 'b659635f6acdf09a3618c514f5bdd9bf173f9d98', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '0815f0eb0bfe766dd2f358385af1516fd4328e2e' })));
+        return (h(Host, { key: '474c2154d2abe3c76eee9c36bf552390089df6e8', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '93aedd02f984dd33b5efc811fef417d1199917bd' })));
     }
     static get is() { return "ui-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -284,6 +376,26 @@ export class UITree {
                 "reflect": false,
                 "attribute": "hover-expand-delay",
                 "defaultValue": "700"
+            },
+            "maxDepth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum resulting item depth accepted by pointer reordering. Zero is unlimited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-depth",
+                "defaultValue": "0"
             }
         };
     }

package/dist/collection/components/ui-tree-item/ui-tree-item.js

@@ -9,6 +9,10 @@ export class UITreeItem {
     label = '';
     /** One-based visual and semantic nesting level. */
     depth = 1;
+    /** Application hierarchy depth used for drop constraints. Defaults to visual depth. */
+    dropDepth;
+    /** Deepest descendant distance, used with the tree's max-depth drop constraint. */
+    subtreeDepth;
     /** Whether this item accepts children and exposes disclosure behavior. */
     container = false;
     /** Whether this item participates in pointer drag and drop. */
@@ -71,10 +75,10 @@ export class UITreeItem {
         const level = Math.max(1, Math.floor(this.depth));
         const disclosureLabel = `${this.internalExpanded ? 'Collapse' : 'Expand'} ${this.label || 'item'}`;
         const dragLabel = `Drag ${this.label || 'item'} to reorder`;
-        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: {
+        return (h(Host, { key: '606f5fdac8a95489d0c62cd7d4918c6d5d0c759e', 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: {
                 '--ui-tree-item-depth': String(level - 1),
                 'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
-            } }, 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" })));
+            } }, h("div", { key: '2b4bb03d4b24ef668f22b08e803f7f43c2d63ae5', 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: 'e7b935158e35cdc6518bdd73d54c42dcfa211aee', class: "leading", part: "leading" }, h("slot", { key: '8448462349fd23b8be0fb673fc6e101bf94beaa7', name: "leading" })), h("span", { key: 'e0b6338e1ec9ec043446e42c5f03724adf7e1862', class: "label", part: "label" }, h("slot", { key: 'ed44e6f2ce3466c28d2b87fc7511399ecc339255' })), h("span", { key: '2aea78227904fe23cfc4b8e14852a4601e3cc34b', class: "actions", part: "actions" }, h("slot", { key: '7c6549008c2a54c3ea6fcdf9e0fdbe445d379922', name: "actions" })), h("span", { key: '05166ba04765bc518d6b95ca7ae5a67c4394d1bf', 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: '7381d6e9e2a8f94695f29e73194b1603d79cefb9', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
     }
     static get is() { return "ui-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -150,6 +154,44 @@ export class UITreeItem {
                 "attribute": "depth",
                 "defaultValue": "1"
             },
+            "dropDepth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Application hierarchy depth used for drop constraints. Defaults to visual depth."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drop-depth"
+            },
+            "subtreeDepth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Deepest descendant distance, used with the tree's max-depth drop constraint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtree-depth"
+            },
             "container": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/field/combobox.js

@@ -0,0 +1,4 @@
+/** Map domain records at the boundary, preserving typed metadata for rich rows. */
+export function mapComboboxOptions(rows, map) {
+    return rows.map(row => ({ ...map(row), metadata: row }));
+}

package/dist/collection/field/valibot.js

@@ -0,0 +1,5 @@
+/** Valibot's Standard Schema implementation preserves async transforms and issue paths.
+ * Type-only Valibot imports keep the adapter free of a schema-library runtime. */
+export function valibotField(schema, options = {}) {
+    return { ...options, schema };
+}

package/dist/collection/field/validation.js

@@ -0,0 +1,62 @@
+/** Formatting is additive: every original character must survive in order.
+ * Normalization belongs to submitted output, never the visible editing buffer. */
+export function formatEditingValue(raw, selection, format) {
+    const unchanged = { display: raw, selection };
+    if (!format)
+        return unchanged;
+    let result;
+    try {
+        result = format(raw, selection);
+    }
+    catch {
+        return unchanged;
+    }
+    if (!result)
+        return unchanged;
+    const characters = Array.from(raw);
+    let cursor = 0;
+    for (const character of result.display)
+        if (character === characters[cursor])
+            cursor += 1;
+    if (!Number.isInteger(result.selection.start) || !Number.isInteger(result.selection.end) || cursor !== characters.length || result.selection.start < 0 || result.selection.end < result.selection.start
+        || result.selection.end > result.display.length)
+        return unchanged;
+    return result;
+}
+export async function validateField(request, config) {
+    let output = request.raw;
+    let issues = [];
+    const check = () => request.signal.throwIfAborted();
+    try {
+        check();
+        if (config.parse)
+            output = await config.parse(request.raw, request);
+        check();
+        if (config.schema) {
+            const result = await config.schema['~standard'].validate(output);
+            check();
+            if (result.issues)
+                issues = result.issues;
+            else if ('value' in result)
+                output = result.value;
+        }
+        if (!issues.some(issue => issue.severity !== 'warning')) {
+            if (config.normalize)
+                output = await config.normalize(output, request);
+            check();
+            if (config.validator) {
+                const result = await config.validator(output, request);
+                check();
+                issues = [...issues, ...(result.issues ?? [])];
+                if ('output' in result)
+                    output = result.output;
+            }
+        }
+    }
+    catch (error) {
+        check();
+        issues = [{ message: error instanceof Error ? error.message : 'Unable to validate this value.' }];
+    }
+    issues = [...issues, ...(config.issues ?? [])];
+    return { output: issues.some(issue => issue.severity !== 'warning') ? undefined : output, issues };
+}