@threadlabs/looma 0.25.6 → 0.25.7

package/package.json

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

package/styles/ui-tree-item.css

@@ -253,6 +253,7 @@
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
     .row:focus-within > .label,
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label,
     :scope[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
@@ -264,6 +265,7 @@
 
     .row:hover > .label:dir(rtl),
     .row:focus-within > .label:dir(rtl),
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl),
     :scope[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
@@ -331,6 +333,7 @@
 
     .row:hover > .actions,
     .row:focus-within > .actions,
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
     :scope[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
@@ -367,6 +370,14 @@
         );
       }
 
+      /* Persistent content has its own column on touch. Fade only the label's end. */
+      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+        mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl) {
+        mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+
       .row[data-ui-marquee] > .label:dir(rtl) {
         mask-image: linear-gradient(
           to left,
@@ -620,6 +631,8 @@
 
     /* Without hover there is no reveal, so the controls keep their own column. */
     @media (hover: none), (pointer: coarse) {
+
+      /* Persistent content has its own column on touch. Fade only the label's end. */
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that

package/vanilla/UiTreeItem.d.ts

@@ -8,6 +8,7 @@ export interface UiTreeItemElement extends HTMLDivElement {
 }
 export interface UiTreeItemProps {
   accepts?: string | null;
+  actionsVisible?: boolean | null;
   container?: boolean | null;
   disabled?: boolean | null;
   dragType?: string | null;

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":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","expressionPlan":{"source":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Cancel moving "},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Drag "},{"kind":"id","name":"label"},{"kind":"literal","value":" to reorder"}]}}]},"index":{"kind":"call","fn":"concat","args":[{"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":"concat('Select ', label)","expressionPlan":{"source":"concat('Select ', label)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Select "},{"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":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"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:""};
+const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"actionsVisible":{"type":"boolean","required":false,"target":{"attribute":"actionsvisible"},"default":false},"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: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","expressionPlan":{"source":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Cancel moving "},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Drag "},{"kind":"id","name":"label"},{"kind":"literal","value":" to reorder"}]}}]},"index":{"kind":"call","fn":"concat","args":[{"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":"concat('Select ', label)","expressionPlan":{"source":"concat('Select ', label)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Select "},{"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":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"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;

package/vue/UiTreeItem.d.ts

@@ -6,6 +6,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    actionsVisible: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     container: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -70,6 +74,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    actionsVisible: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     container: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -136,6 +144,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     disabled: boolean | null;
     expanded: boolean | null;
     accepts: string | null;
+    actionsVisible: boolean | null;
     container: boolean | null;
     dragType: string | null;
     dropDepth: number | null;

package/vue/UiTreeItem.vue

@@ -30,6 +30,14 @@ const propValidityContract = {
         'A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.',
       default: '',
     },
+    actionsVisible: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'actionsvisible' },
+      description:
+        'Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;\n      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.',
+      default: false,
+    },
     container: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -136,6 +144,7 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   accepts: { type: null as unknown as PropType<string | null>, default: '' },
+  actionsVisible: { type: null as unknown as PropType<boolean | null>, default: false },
   container: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   dragType: { type: null as unknown as PropType<string | null>, default: 'item' },
@@ -152,6 +161,7 @@ const props = defineProps({
 })
 const acceptedProps: Record<string, unknown> = {
   accepts: '',
+  actionsVisible: false,
   container: false,
   disabled: false,
   dragType: 'item',
@@ -174,6 +184,13 @@ const checkedProps = computed(() => ({
     'accepts',
     acceptedProps,
   ) as string,
+  actionsVisible: checkedProp<boolean>(
+    props['actionsVisible'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'actionsVisible',
+    acceptedProps,
+  ) as boolean,
   container: checkedProp<boolean>(
     props['container'],
     { kind: 'terminal', name: 'boolean' },
@@ -486,6 +503,7 @@ const hostState = computed(() =>
   [
     checkedProps.value.selected && 'selected',
     checkedProps.value.disabled && 'disabled',
+    checkedProps.value.actionsVisible && 'actionsVisible',
     isContainer.value && 'isContainer',
   ].filter(Boolean).join(' ')
 )
@@ -536,6 +554,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   },
   propNames: [
     'accepts',
+    'actionsVisible',
     'container',
     'disabled',
     'dragType',
@@ -608,6 +627,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :aria-disabled="checkedProps.disabled ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, true)"
+    :data-actions-visible="reflectedProp('actionsVisible', 'actions-visible', checkedProps.actionsVisible, undefined, false)"
     :data-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-drag-type="reflectedProp('dragType', 'drag-type', checkedProps.dragType, undefined, true)"
@@ -957,6 +977,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
 .row:hover > .label,
 .row:focus-within > .label,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label,
 [data-component~="ui-tree-item"][data-move-source] > .row > .label {
   text-overflow: clip;
   mask-image: linear-gradient(
@@ -968,6 +989,9 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 .row:hover > .label:dir(rtl),
 .row:focus-within > .label:dir(rtl),
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
+  > .row
+  > .label:dir(rtl),
 [data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
@@ -1056,6 +1080,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 .row:hover > .actions,
 .row:focus-within > .actions,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
 [data-component~="ui-tree-item"][data-move-source] > .row > .actions {
   opacity: 1;
   pointer-events: auto;
@@ -1094,6 +1119,16 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     );
   }
 
+  /* Persistent content has its own column on touch. Fade only the label's end. */
+  [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+    mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+  }
+  [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:dir(rtl) {
+    mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+  }
+
   .row[data-ui-marquee] > .label:dir(rtl) {
     mask-image: linear-gradient(
       to left,

package/vue/chunks/UiTreeItem.js

@@ -10,6 +10,7 @@ var _hoisted_1 = [
 	"aria-selected",
 	"aria-disabled",
 	"data-accepts",
+	"data-actions-visible",
 	"data-container",
 	"data-disabled",
 	"data-drag-type",
@@ -52,6 +53,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: ""
 		},
+		actionsVisible: {
+			type: null,
+			default: false
+		},
 		container: {
 			type: null,
 			default: false
@@ -118,6 +123,16 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.",
 				default: ""
 			},
+			actionsVisible: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "actionsvisible" },
+				description: "Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;\n      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.",
+				default: false
+			},
 			container: {
 				type: {
 					kind: "terminal",
@@ -250,6 +265,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const props = __props;
 		const acceptedProps = {
 			accepts: "",
+			actionsVisible: false,
 			container: false,
 			disabled: false,
 			dragType: "item",
@@ -269,6 +285,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "string"
 			}, false, "accepts", acceptedProps),
+			actionsVisible: checkedProp(props["actionsVisible"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "actionsVisible", acceptedProps),
 			container: checkedProp(props["container"], {
 				kind: "terminal",
 				name: "boolean"
@@ -422,6 +442,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const hostState = computed(() => [
 			checkedProps.value.selected && "selected",
 			checkedProps.value.disabled && "disabled",
+			checkedProps.value.actionsVisible && "actionsVisible",
 			isContainer.value && "isContainer"
 		].filter(Boolean).join(" "));
 		const isExpandDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -475,6 +496,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			},
 			propNames: [
 				"accepts",
+				"actionsVisible",
 				"container",
 				"disabled",
 				"dragType",
@@ -535,6 +557,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-selected": checkedProps.value.selected ?? void 0,
 				"aria-disabled": checkedProps.value.disabled ?? void 0,
 				"data-accepts": reflectedProp("accepts", "accepts", checkedProps.value.accepts, void 0, true),
+				"data-actions-visible": reflectedProp("actionsVisible", "actions-visible", checkedProps.value.actionsVisible, void 0, false),
 				"data-container": reflectedProp("container", "container", checkedProps.value.container, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-drag-type": reflectedProp("dragType", "drag-type", checkedProps.value.dragType, void 0, true),
@@ -676,6 +699,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f2ec0a81"]]);
+}), [["__scopeId", "data-v-dc15f210"]]);
 //#endregion
 export { UiTreeItem_default as t };