@threadlabs/looma 0.23.9 → 0.23.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.9",
+  "version": "0.23.10",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-disclosure.css

@@ -174,9 +174,6 @@
       background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
-    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"] .trigger {
-      color: var(--ui-selection-text);
-    }
     :scope[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
       inline-size: var(--ui-nav-icon-size);
       font-size: var(--ui-nav-icon-size);

package/styles/ui-tree-item.css

@@ -86,7 +86,12 @@
       background: var(--ui-disabled-surface);
     }
 
-    :scope[data-dragging] .row {
+    :scope[data-dragging]:not([data-move-source]) .row {
+      opacity: 0.42;
+    }
+
+    :scope[data-move-source] > .row > .label,
+    :scope[data-move-source] > .row > .leading {
       opacity: 0.42;
     }
 
@@ -247,7 +252,8 @@
     /* The controls sit over the label's end, so the text fades out where they begin. The fade is
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
-    .row:focus-within > .label {
+    .row:focus-within > .label,
+    :scope[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
         to right,
@@ -257,7 +263,8 @@
     }
 
     .row:hover > .label:dir(rtl),
-    .row:focus-within > .label:dir(rtl) {
+    .row:focus-within > .label:dir(rtl),
+    :scope[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -323,7 +330,8 @@
     }
 
     .row:hover > .actions,
-    .row:focus-within > .actions {
+    .row:focus-within > .actions,
+    :scope[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
     }

package/vanilla/UiTree.d.ts

@@ -15,6 +15,7 @@ export interface UiTreeProps {
   label?: string | null;
   marquee?: boolean | null;
   maxDepth?: number | null;
+  moveActivation?: "click" | "keyboard-touch" | null;
   selection?: "none" | "single" | "multiple" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiTree.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";
 
-const definition = {...{"contract":{"tag":"ui-tree","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0},"selection":{"type":{"kind":"terminal","name":"keyword"},"values":["none","single","multiple"],"required":false,"target":{"attribute":"selection"},"default":"none"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"sourceType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"sourceScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["max-depth"]},"optional":false},{"name":"maxDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"resultingDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"activate","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object","shape":{"kind":"object","fields":[{"name":"ids","type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0},"moveActivation":{"type":{"kind":"terminal","name":"keyword"},"values":["click","keyboard-touch"],"required":false,"target":{"attribute":"moveactivation"},"default":"click"},"selection":{"type":{"kind":"terminal","name":"keyword"},"values":["none","single","multiple"],"required":false,"target":{"attribute":"selection"},"default":"none"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"sourceType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"sourceScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["max-depth"]},"optional":false},{"name":"maxDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"resultingDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"activate","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object","shape":{"kind":"object","fields":[{"name":"ids","type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTree(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiTreeItem.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
 
-const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"lazy":{"type":"boolean","required":false,"target":{"attribute":"lazy"},"default":false},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"selection-hit"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"selection-checkbox"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"checked","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-label","expression":"format('Select %s', label)","expressionPlan":{"source":"format('Select %s', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Select %s"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}],"ref":"leading"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","type":"integer","value":"1","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"expanded","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"lazy":{"type":"boolean","required":false,"target":{"attribute":"lazy"},"default":false},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"{ true: format('Cancel moving %s', label), false: format('Drag %s to reorder', label) }[format('%s', moving)]","expressionPlan":{"source":"{ true: format('Cancel moving %s', label), false: format('Drag %s to reorder', label) }[format('%s', moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Cancel moving %s"},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"moving"}]}},"dependencies":["label","moving"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"selection-hit"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"selection-checkbox"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"checked","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-label","expression":"format('Select %s', label)","expressionPlan":{"source":"format('Select %s', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Select %s"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}],"ref":"leading"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"ui-button","attributes":[{"kind":"literal","name":"data-tree-cancel-move","value":""},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"literal","name":"tone","value":"neutral"},{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"aria-label","value":"Cancel move"}],"children":[{"kind":"text","value":"Cancel"}],"flow":{"kind":"if","test":"moving","testPlan":{"source":"moving","ast":{"kind":"id","name":"moving"},"dependencies":["moving"]}}},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"flow":{"kind":"else"}}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","type":"integer","value":"1","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"moving","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"expanded","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTreeItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -145,38 +145,48 @@ export function createUiTreeItem(options = {}) {
   element0.append(element14);
   const element17 = document.createElement("span");
   element17.setAttribute("class", "actions");
+  const element18 = document.createElement("ui-button");
+  element18.setAttribute("data-tree-cancel-move", "");
+  element18.setAttribute("variant", "ghost");
+  element18.setAttribute("tone", "neutral");
+  element18.setAttribute("size", "sm");
+  element18.setAttribute("aria-label", "Cancel move");
+  element18.append("Cancel");
+  element17.append(element18);
+  const element19 = document.createElement("span");
   if (slots["actions"] ?? [].length > 0) {
     for (const child of slots["actions"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, "actions"]);
-      element17.append(node);
+      element19.append(node);
     }
   } else {
   }
+  element17.append(element19);
   element0.append(element17);
-  const element18 = document.createElement("span");
-  element18.setAttribute("class", "drop-indicator row-drop-indicator");
-  element18.setAttribute("aria-hidden", "true");
-  element0.append(element18);
+  const element20 = document.createElement("span");
+  element20.setAttribute("class", "drop-indicator row-drop-indicator");
+  element20.setAttribute("aria-hidden", "true");
+  element0.append(element20);
   element.append(element0);
-  const element19 = document.createElement("div");
-  element19.setAttribute("class", "children");
-  element19.setAttribute("role", "group");
+  const element21 = document.createElement("div");
+  element21.setAttribute("class", "children");
+  element21.setAttribute("role", "group");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
-      element19.append(node);
+      element21.append(node);
     }
   } else {
   }
-  element.append(element19);
-  const element20 = document.createElement("span");
-  element20.setAttribute("class", "drop-indicator subtree-drop-indicator");
-  element20.setAttribute("aria-hidden", "true");
-  element.append(element20);
+  element.append(element21);
+  const element22 = document.createElement("span");
+  element22.setAttribute("class", "drop-indicator subtree-drop-indicator");
+  element22.setAttribute("aria-hidden", "true");
+  element.append(element22);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vue/UiDisclosure.vue

@@ -78,7 +78,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.',
+        'Navigation shares icon columns, spacing, type, hover, and corners with Nav Item, while keeping expanded sections neutral: opening content is not route\n      selection. Plain retains the standard disclosure treatment.',
       values: ['plain', 'navigation'],
       default: 'plain',
     },
@@ -582,10 +582,6 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   background: var(--ui-nav-hover-surface);
   color: var(--ui-text-primary);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"]
-  .trigger {
-  color: var(--ui-selection-text);
-}
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
   :is(.leading, .indicator) {
   inline-size: var(--ui-nav-icon-size);

package/vue/UiTree.d.ts

@@ -24,6 +24,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<number | null>;
         default: number;
     };
+    moveActivation: {
+        type: PropType<"click" | "keyboard-touch" | null>;
+        default: string;
+    };
     selection: {
         type: PropType<"none" | "single" | "multiple" | null>;
         default: string;
@@ -78,6 +82,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<number | null>;
         default: number;
     };
+    moveActivation: {
+        type: PropType<"click" | "keyboard-touch" | null>;
+        default: string;
+    };
     selection: {
         type: PropType<"none" | "single" | "multiple" | null>;
         default: string;
@@ -118,6 +126,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     density: "comfortable" | "compact" | null;
     hoverExpandDelay: number | null;
     maxDepth: number | null;
+    moveActivation: "click" | "keyboard-touch" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiTree.vue

@@ -49,6 +49,15 @@ const propValidityContract = {
         'The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is\n      refused and reported as reorder-rejected. 0 means no limit.',
       default: 0,
     },
+    moveActivation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'moveactivation' },
+      description:
+        'Which handle activations start guided moving. click preserves two-click moving with any pointer. keyboard-touch leaves ordinary mouse and pen clicks inert\n      while retaining keyboard activation and touch taps. Actual pointer dragging works in either mode. Guided moves show Cancel on the source row; Escape or\n      reactivating that source handle also cancels without requesting a reorder.',
+      values: ['click', 'keyboard-touch'],
+      default: 'click',
+    },
     selection: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -69,6 +78,10 @@ const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'Tree' },
   marquee: { type: null as unknown as PropType<boolean | null>, default: false },
   maxDepth: { type: null as unknown as PropType<number | null>, default: 0 },
+  moveActivation: {
+    type: null as unknown as PropType<'click' | 'keyboard-touch' | null>,
+    default: 'click',
+  },
   selection: {
     type: null as unknown as PropType<'none' | 'single' | 'multiple' | null>,
     default: 'none',
@@ -80,6 +93,7 @@ const acceptedProps: Record<string, unknown> = {
   label: 'Tree',
   marquee: false,
   maxDepth: 0,
+  moveActivation: 'click',
   selection: 'none',
 }
 const checkedProps = computed(() => ({
@@ -118,6 +132,13 @@ const checkedProps = computed(() => ({
     'maxDepth',
     acceptedProps,
   ) as number,
+  moveActivation: checkedProp<'click' | 'keyboard-touch'>(
+    props['moveActivation'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'moveActivation',
+    acceptedProps,
+  ) as 'click' | 'keyboard-touch',
   selection: checkedProp<'none' | 'single' | 'multiple'>(
     props['selection'],
     { kind: 'terminal', name: 'keyword' },
@@ -312,7 +333,15 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'hoverExpandDelay', 'label', 'marquee', 'maxDepth', 'selection'],
+  propNames: [
+    'density',
+    'hoverExpandDelay',
+    'label',
+    'marquee',
+    'maxDepth',
+    'moveActivation',
+    'selection',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -335,6 +364,7 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
     :data-max-depth="reflectedProp('maxDepth', 'max-depth', checkedProps.maxDepth, undefined, false)"
+    :data-move-activation="reflectedProp('moveActivation', 'move-activation', checkedProps.moveActivation, undefined, false)"
     :data-selection="reflectedProp('selection', 'selection', checkedProps.selection, undefined, false)"
     :data-ui-tree-state="hostState || undefined"
     ref="root"

package/vue/UiTreeItem.d.ts

@@ -1,13 +1,13 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_11: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
 } & {
     label?: (props: typeof __VLS_3) => any;
 } & {
-    actions?: (props: typeof __VLS_5) => any;
+    actions?: (props: typeof __VLS_11) => any;
 } & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     accepts: {

package/vue/UiTreeItem.vue

@@ -4,6 +4,7 @@ import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEf
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiButton from './UiButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -109,7 +110,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'sortable' },
       description:
-        'Gives the item a move handle. Drag it, or activate it and choose a target by a second click or the keyboard. The tree reports reorder and leaves moving the\n      item to you. Needs itemId; disabled items show no handle.',
+        'Gives the item a move handle. Drag it, or activate it according to the tree\'s moveActivation and choose a target by a second click or the keyboard. A\n      guided move exposes Cancel on this row. The tree reports reorder and leaves moving the item to you. Needs itemId; disabled items show no handle.',
       default: false,
     },
     subtreeDepth: {
@@ -316,6 +317,7 @@ const internalExpanded = ref(false)
 const structuralLevel = ref(1)
 const tabStop = ref(false)
 const isContainer = ref(false)
+const moving = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
   if (!(structuralLevel.value == null || Number.isInteger(structuralLevel.value))) {
@@ -342,6 +344,7 @@ provide('html-next:ui-tree-item:internalExpanded', internalExpanded)
 provide('html-next:ui-tree-item:structuralLevel', structuralLevel)
 provide('html-next:ui-tree-item:tabStop', tabStop)
 provide('html-next:ui-tree-item:isContainer', isContainer)
+provide('html-next:ui-tree-item:moving', moving)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -427,8 +430,21 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     actions: actionsElement,
     children: childrenElement,
   },
-  state: { internalExpanded, structuralLevel, tabStop, isContainer },
+  state: { internalExpanded, structuralLevel, tabStop, isContainer, moving },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
@@ -464,7 +480,22 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
         class="drag-handle"
         type="button"
         draggable="true"
-        :aria-label="`Drag ${checkedProps.label ?? ''} to reorder`"
+        :aria-label="typeof ((({
+          true: `Cancel moving ${checkedProps.label ?? ''}`,
+          false: `Drag ${checkedProps.label ?? ''} to reorder`,
+        }) as Record<string, any>)[`${moving}`]) === 'boolean'
+        ? String(
+          (({
+            true: `Cancel moving ${checkedProps.label ?? ''}`,
+            false: `Drag ${checkedProps.label ?? ''} to reorder`,
+          }) as Record<string, any>)[`${moving}`],
+        )
+        : attribute(
+          (({
+            true: `Cancel moving ${checkedProps.label ?? ''}`,
+            false: `Drag ${checkedProps.label ?? ''} to reorder`,
+          }) as Record<string, any>)[`${moving}`],
+        )"
         ref="dragHandle"
       >
         <svg
@@ -506,7 +537,15 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
       <span class="label" ref="label"><span class="label-text" ref="labelText"><slot name="label">{{
             checkedProps.label
           }}</slot></span></span>
-      <span class="actions" ref="actions"><slot name="actions" /></span>
+      <span class="actions" ref="actions"><UiButton
+          v-if="moving"
+          data-tree-cancel-move=""
+          variant="ghost"
+          tone="neutral"
+          size="sm"
+          aria-label="Cancel move"
+        >Cancel</UiButton>
+        <span><slot name="actions" /></span></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
     <div class="children" role="group" :hidden="guardedBinding2" ref="children"><slot /></div>
@@ -600,7 +639,12 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   background: var(--ui-disabled-surface);
 }
 
-[data-component~="ui-tree-item"][data-dragging] .row {
+[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row {
+  opacity: 0.42;
+}
+
+[data-component~="ui-tree-item"][data-move-source] > .row > .label,
+[data-component~="ui-tree-item"][data-move-source] > .row > .leading {
   opacity: 0.42;
 }
 
@@ -775,7 +819,8 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 /* The controls sit over the label's end, so the text fades out where they begin. The fade is
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
 .row:hover > .label,
-.row:focus-within > .label {
+.row:focus-within > .label,
+[data-component~="ui-tree-item"][data-move-source] > .row > .label {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -785,7 +830,8 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 }
 
 .row:hover > .label:dir(rtl),
-.row:focus-within > .label:dir(rtl) {
+.row:focus-within > .label:dir(rtl),
+[data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -872,7 +918,8 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 }
 
 .row:hover > .actions,
-.row:focus-within > .actions {
+.row:focus-within > .actions,
+[data-component~="ui-tree-item"][data-move-source] > .row > .actions {
   opacity: 1;
   pointer-events: auto;
 }

package/vue/chunks/UiDisclosure.js

@@ -167,7 +167,7 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.",
+				description: "Navigation shares icon columns, spacing, type, hover, and corners with Nav Item, while keeping expanded sections neutral: opening content is not route\n      selection. Plain retains the standard disclosure treatment.",
 				values: ["plain", "navigation"],
 				default: "plain"
 			}
@@ -385,6 +385,6 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a0b99707"]]);
+}), [["__scopeId", "data-v-a6fee58b"]]);
 //#endregion
 export { UiDisclosure_default as t };