@threadlabs/looma 0.6.2 → 0.6.4

package/package.json

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

package/styles/ui-tree-item.css

@@ -2,6 +2,7 @@
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
 :scope {
       --_tree-row-min-height: 32px;
+      --_tree-disclosure-size: 16px;
 
       position: relative;
       display: block;
@@ -12,7 +13,7 @@
     .row {
       position: relative;
       display: grid;
-      grid-template-columns: 20px auto minmax(0, 1fr) auto;
+      grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
       align-items: center;
       min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
@@ -60,13 +61,14 @@
     .disclosure-spacer {
       grid-column: 1;
       grid-row: 1;
-      inline-size: 20px;
+      inline-size: var(--_tree-disclosure-size);
       block-size: 28px;
     }
 
     .disclosure {
       display: grid;
-      place-items: center;
+      /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+      place-items: center start;
       padding: 0;
       color: var(--ui-text-muted);
       background: transparent;
@@ -87,18 +89,18 @@
     .disclosure-icon {
       display: grid;
       place-items: center;
-      inline-size: 14px;
-      block-size: 14px;
+      inline-size: 12px;
+      block-size: 12px;
       transform: rotate(-90deg);
       transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     .disclosure-icon::before {
       display: block;
-      inline-size: 0.45rem;
-      block-size: 0.45rem;
-      border-inline-end: 2px solid currentColor;
-      border-block-end: 2px solid currentColor;
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      border-inline-end: 1.5px solid currentColor;
+      border-block-end: 1.5px solid currentColor;
       content: "";
       /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
       transform: translateY(-20%) rotate(45deg);
@@ -148,12 +150,61 @@
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
 
+    /* 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 {
+      text-overflow: clip;
+      mask-image: linear-gradient(
+        to right,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row:hover > .label:dir(rtl),
+    .row:focus-within > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
     .actions {
-      grid-column: 4;
-      grid-row: 1;
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      inset-inline-end: 0;
       display: inline-flex;
       align-items: center;
       min-inline-size: 0;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .row:hover > .actions,
+    .row:focus-within > .actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* Without hover there is no reveal, so the controls keep their own column. */
+    @media (hover: none) {
+      .row {
+        grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      .actions {
+        position: static;
+        grid-column: 4;
+        grid-row: 1;
+        padding-inline-start: 0;
+        background: none;
+        opacity: 1;
+        pointer-events: auto;
+      }
     }
 
     .drag-handle {
@@ -281,6 +332,18 @@
       min-inline-size: 0;
     }
 
+    /* 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 > :where([data-slotted], [data-slotted] *):is(*),
+    .row:focus-within > .label > :where([data-slotted], [data-slotted] *):is(*) {
+      text-overflow: clip;
+    }
+
+    /* Without hover there is no reveal, so the controls keep their own column. */
+    @media (hover: none) {
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

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":""},"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":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"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"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"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","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","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":""},"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":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"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"}]},{"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","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","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 = {}, as, ...componentProps } = options;

package/vue/UiTreeItem.vue

@@ -56,6 +56,7 @@ const root = ref<HTMLElement | null>(null)
 const rowElement = useTemplateRef<HTMLElement>('row')
 const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
 const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const actionsElement = useTemplateRef<HTMLElement>('actions')
 const childrenElement = useTemplateRef<HTMLElement>('children')
 const internalExpanded = ref(false)
 const structuralLevel = ref(1)
@@ -145,6 +146,9 @@ const host = {
     get disclosure(): Element {
       return disclosureElement.value as Element
     },
+    get actions(): Element {
+      return actionsElement.value as Element
+    },
     get children(): Element {
       return childrenElement.value as Element
     },
@@ -263,7 +267,7 @@ onBeforeUnmount(() => {
       </button>
       <span class="leading"><slot name="leading" /></span>
       <span class="label"><slot name="label">{{ label }}</slot></span>
-      <span class="actions"><slot name="actions" /></span>
+      <span class="actions" ref="actions"><slot name="actions" /></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
     <div class="children" role="group" :hidden="!(isContainer && internalExpanded)" ref="children">
@@ -276,6 +280,7 @@ onBeforeUnmount(() => {
 <style scoped>
 [data-component~="ui-tree-item"] {
   --_tree-row-min-height: 32px;
+  --_tree-disclosure-size: 16px;
 
   position: relative;
   display: block;
@@ -286,7 +291,7 @@ onBeforeUnmount(() => {
 .row {
   position: relative;
   display: grid;
-  grid-template-columns: 20px auto minmax(0, 1fr) auto;
+  grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
@@ -334,13 +339,14 @@ onBeforeUnmount(() => {
 .disclosure-spacer {
   grid-column: 1;
   grid-row: 1;
-  inline-size: 20px;
+  inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
 
 .disclosure {
   display: grid;
-  place-items: center;
+  /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+  place-items: center start;
   padding: 0;
   color: var(--ui-text-muted);
   background: transparent;
@@ -361,18 +367,18 @@ onBeforeUnmount(() => {
 .disclosure-icon {
   display: grid;
   place-items: center;
-  inline-size: 14px;
-  block-size: 14px;
+  inline-size: 12px;
+  block-size: 12px;
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 .disclosure-icon::before {
   display: block;
-  inline-size: 0.45rem;
-  block-size: 0.45rem;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
   content: "";
   /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
   transform: translateY(-20%) rotate(45deg);
@@ -434,12 +440,66 @@ onBeforeUnmount(() => {
   min-inline-size: 0;
 }
 
+/* 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 {
+  text-overflow: clip;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label:dir(rtl),
+.row:focus-within > .label:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label > :slotted(*),
+.row:focus-within > .label > :slotted(*) {
+  text-overflow: clip;
+}
+
 .actions {
-  grid-column: 4;
-  grid-row: 1;
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-end: 0;
   display: inline-flex;
   align-items: center;
   min-inline-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.row:hover > .actions,
+.row:focus-within > .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Without hover there is no reveal, so the controls keep their own column. */
+@media (hover: none) {
+  .row {
+    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  }
+
+  .actions {
+    position: static;
+    grid-column: 4;
+    grid-row: 1;
+    padding-inline-start: 0;
+    background: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .drag-handle {

package/vue/chunks/UiTreeItem.js

@@ -23,7 +23,10 @@ var _hoisted_3 = ["aria-label"];
 var _hoisted_4 = ["disabled", "hidden"];
 var _hoisted_5 = { class: "leading" };
 var _hoisted_6 = { class: "label" };
-var _hoisted_7 = { class: "actions" };
+var _hoisted_7 = {
+	class: "actions",
+	ref: "actions"
+};
 var _hoisted_8 = ["hidden"];
 //#endregion
 //#region .build/vue/UiTreeItem.vue
@@ -67,6 +70,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const rowElement = useTemplateRef("row");
 		const dragHandleElement = useTemplateRef("dragHandle");
 		const disclosureElement = useTemplateRef("disclosure");
+		const actionsElement = useTemplateRef("actions");
 		const childrenElement = useTemplateRef("children");
 		const internalExpanded = ref(false);
 		const structuralLevel = ref(1);
@@ -142,6 +146,9 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				get disclosure() {
 					return disclosureElement.value;
 				},
+				get actions() {
+					return actionsElement.value;
+				},
 				get children() {
 					return childrenElement.value;
 				}
@@ -274,7 +281,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					}, null, -1)])], 8, _hoisted_4),
 					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")]),
 					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]),
-					createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "actions")]),
+					createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
 						"aria-hidden": "true"
@@ -293,6 +300,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b57a29c6"]]);
+}), [["__scopeId", "data-v-07ef6009"]]);
 //#endregion
 export { UiTreeItem_default as t };