@threadlabs/looma 0.10.2 → 0.10.3

package/package.json

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

package/styles/ui-tree-item.css

@@ -1,4 +1,13 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@keyframes ui-tree-item-marquee {
+      from {
+        transform: translateX(0);
+      }
+
+      to {
+        transform: translateX(var(--_marquee-distance));
+      }
+    }
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
 :scope {
       --_tree-row-min-height: 32px;
@@ -144,11 +153,63 @@
       display: flex;
       align-items: center;
       min-inline-size: 0;
+      /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+      overflow: hidden;
       padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
     }
 
     /* 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. */
+    .label-text {
+      display: flex;
+      align-items: center;
+      /* Stretches, so slotted content can still be the row's full-height hit area. */
+      align-self: stretch;
+      block-size: 100%;
+      min-inline-size: 0;
+      inline-size: 100%;
+      white-space: nowrap;
+    }
+
+    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
+       there, and comes back. Only when it actually overflows — the controller measures by how
+       much — after the controls have taken their place over its end — and hands over the distance
+       and a duration from it, so a longer name travels no faster. */
+    .row[data-ui-marquee] > .label > .label-text {
+      /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
+         and forth under the pointer is harder to read than one that arrives and holds. */
+      animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
+      will-change: transform;
+    }
+
+    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
+       edge beside the icon reads as a collision rather than as more text. */
+    .row[data-ui-marquee] > .label {
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--ui-space-2),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row[data-ui-marquee] > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        transparent 0,
+        #000 var(--ui-space-2),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    /* Reduced motion keeps the fade, which already says the name continues. */
+    @media (prefers-reduced-motion: reduce) {
+      .row[data-ui-marquee] > .label > .label-text {
+        animation: none;
+      }
+    }
 
     /* 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. */
@@ -327,11 +388,24 @@
 
     /* 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. */
-    .label > :where([data-slotted], [data-slotted] *):is(*) {
+
+    .label-text > :where([data-slotted], [data-slotted] *):is(*) {
       flex: 1 1 auto;
       min-inline-size: 0;
     }
 
+    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
+       there, and comes back. Only when it actually overflows — the controller measures by how
+       much — after the controls have taken their place over its end — and hands over the distance
+       and a duration from it, so a longer name travels no faster. */
+
+    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
+       edge beside the icon reads as a collision rather than as more text. */
+
+    /* Reduced motion keeps the fade, which already says the name continues. */
+    @media (prefers-reduced-motion: reduce) {
+    }
+
     /* 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. */
 

package/styles/ui-tree.css

@@ -1,6 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
-:scope[data-ui-tree-state~="density=compact"] {
+/* Reaches the items the way density does, so the setting lives on the tree the way a reader
+       thinks about it: this list scrolls its long names. */
+    :scope[data-ui-tree-state~="marquee"] {
+      --ui-tree-item-marquee: 1;
+    }
+
+    :scope[data-ui-tree-state~="density=compact"] {
       --ui-tree-item-min-block-size: var(--ui-control-size-sm);
       --ui-tree-item-font-size: var(--ui-font-size-sm);
       --ui-tree-item-label-padding-block: 0;
@@ -18,5 +24,8 @@
     }
 }
 @scope ([data-component~="ui-tree"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* Reaches the items the way density does, so the setting lives on the tree the way a reader
+       thinks about it: this list scrolls its long names. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiTree.d.ts

@@ -11,6 +11,7 @@ export interface UiTreeProps {
   density?: "comfortable" | "compact" | null;
   hoverExpandDelay?: number | null;
   label?: string | null;
+  marquee?: boolean | null;
   maxDepth?: number | 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":{"enum":["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"},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })","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":{"enum":["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}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })","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 = {}, as, ...componentProps } = options;

package/vanilla/UiTreeItem.d.ts

@@ -16,6 +16,7 @@ export interface UiTreeItemProps {
   expanded?: boolean | null;
   itemId?: string | null;
   label?: string | null;
+  marquee?: boolean | null;
   selected?: boolean | null;
   sortable?: boolean | null;
   subtreeDepth?: number | 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":""},"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:""};
+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":""},"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":"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":"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"}]},{"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;
@@ -113,49 +113,52 @@ export function createUiTreeItem(options = {}) {
   element0.append(element11);
   const element12 = document.createElement("span");
   element12.setAttribute("class", "label");
+  const element13 = document.createElement("span");
+  element13.setAttribute("class", "label-text");
   if (slots["label"] ?? [].length > 0) {
     for (const child of slots["label"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, "label"]);
-      element12.append(node);
+      element13.append(node);
     }
   } else {
-  const element13 = document.createElement("template");
-  element12.append(element13);
+  const element14 = document.createElement("template");
+  element13.append(element14);
   }
+  element12.append(element13);
   element0.append(element12);
-  const element14 = document.createElement("span");
-  element14.setAttribute("class", "actions");
+  const element15 = document.createElement("span");
+  element15.setAttribute("class", "actions");
   if (slots["actions"] ?? [].length > 0) {
     for (const child of slots["actions"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, "actions"]);
-      element14.append(node);
+      element15.append(node);
     }
   } else {
   }
-  element0.append(element14);
-  const element15 = document.createElement("span");
-  element15.setAttribute("class", "drop-indicator row-drop-indicator");
-  element15.setAttribute("aria-hidden", "true");
   element0.append(element15);
+  const element16 = document.createElement("span");
+  element16.setAttribute("class", "drop-indicator row-drop-indicator");
+  element16.setAttribute("aria-hidden", "true");
+  element0.append(element16);
   element.append(element0);
-  const element16 = document.createElement("div");
-  element16.setAttribute("class", "children");
-  element16.setAttribute("role", "group");
+  const element17 = document.createElement("div");
+  element17.setAttribute("class", "children");
+  element17.setAttribute("role", "group");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, ""]);
-      element16.append(node);
+      element17.append(node);
     }
   } else {
   }
-  element.append(element16);
-  const element17 = document.createElement("span");
-  element17.setAttribute("class", "drop-indicator subtree-drop-indicator");
-  element17.setAttribute("aria-hidden", "true");
   element.append(element17);
+  const element18 = document.createElement("span");
+  element18.setAttribute("class", "drop-indicator subtree-drop-indicator");
+  element18.setAttribute("aria-hidden", "true");
+  element.append(element18);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vue/UiTree.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     density?: 'comfortable' | 'compact';
     hoverExpandDelay?: number;
     label?: string;
+    marquee?: boolean;
     maxDepth?: number;
 };
 declare var __VLS_1: {};
@@ -52,6 +53,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any) | undefined;
 }>, {
     label: string;
+    marquee: boolean;
     density: "comfortable" | "compact";
     hoverExpandDelay: number;
     maxDepth: number;

package/vue/UiTree.vue

@@ -11,12 +11,14 @@ const props = withDefaults(
     density?: 'comfortable' | 'compact'
     hoverExpandDelay?: number
     label?: string
+    marquee?: boolean
     maxDepth?: number
   }>(),
   {
     density: 'comfortable',
     hoverExpandDelay: 700,
     label: 'Tree',
+    marquee: false,
     maxDepth: 0,
   },
 )
@@ -52,6 +54,7 @@ const root = ref<HTMLElement | null>(null)
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.marquee && 'marquee',
     props.density && `density density=${props.density}`,
   ].filter(Boolean).join(' ')
 )
@@ -127,6 +130,12 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* Reaches the items the way density does, so the setting lives on the tree the way a reader
+       thinks about it: this list scrolls its long names. */
+[data-component~="ui-tree"][data-ui-tree-state~="marquee"] {
+  --ui-tree-item-marquee: 1;
+}
+
 [data-component~="ui-tree"][data-ui-tree-state~="density=compact"] {
   --ui-tree-item-min-block-size: var(--ui-control-size-sm);
   --ui-tree-item-font-size: var(--ui-font-size-sm);

package/vue/UiTreeItem.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     expanded?: boolean;
     itemId?: string;
     label?: string;
+    marquee?: boolean;
     selected?: boolean;
     sortable?: boolean;
     subtreeDepth?: number;
@@ -38,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any) | undefined;
 }>, {
     label: string;
+    marquee: boolean;
     disabled: boolean;
     selected: boolean;
     expanded: boolean;

package/vue/UiTreeItem.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     expanded?: boolean
     itemId?: string
     label?: string
+    marquee?: boolean
     selected?: boolean
     sortable?: boolean
     subtreeDepth?: number
@@ -30,6 +31,7 @@ const props = withDefaults(
     expanded: false,
     itemId: '',
     label: '',
+    marquee: false,
     selected: false,
     sortable: false,
   },
@@ -49,6 +51,7 @@ const root = ref<HTMLElement | null>(null)
 const rowElement = useTemplateRef<HTMLElement>('row')
 const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
 const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const labelTextElement = useTemplateRef<HTMLElement>('labelText')
 const actionsElement = useTemplateRef<HTMLElement>('actions')
 const childrenElement = useTemplateRef<HTMLElement>('children')
 const internalExpanded = ref(false)
@@ -88,6 +91,7 @@ useComponentHost(controllerModule.default, {
     row: rowElement,
     dragHandle: dragHandleElement,
     disclosure: disclosureElement,
+    labelText: labelTextElement,
     actions: actionsElement,
     children: childrenElement,
   },
@@ -150,7 +154,9 @@ useComponentHost(controllerModule.default, {
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
       <span class="leading"><slot name="leading" /></span>
-      <span class="label"><slot name="label">{{ label }}</slot></span>
+      <span class="label"><span class="label-text" ref="labelText"><slot name="label">{{
+            label
+          }}</slot></span></span>
       <span class="actions" ref="actions"><slot name="actions" /></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
@@ -313,17 +319,80 @@ useComponentHost(controllerModule.default, {
   display: flex;
   align-items: center;
   min-inline-size: 0;
+  /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+  overflow: hidden;
   padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
     var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
 }
 
 /* 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. */
-.label > :slotted(*) {
+.label-text {
+  display: flex;
+  align-items: center;
+  /* Stretches, so slotted content can still be the row's full-height hit area. */
+  align-self: stretch;
+  block-size: 100%;
+  min-inline-size: 0;
+  inline-size: 100%;
+  white-space: nowrap;
+}
+
+.label-text > :slotted(*) {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 
+/* A hovered row reads its whole name: the label slides far enough to show the end, waits
+   there, and comes back. Only when it actually overflows — the controller measures by how
+   much — after the controls have taken their place over its end — and hands over the distance
+   and a duration from it, so a longer name travels no faster. */
+.row[data-ui-marquee] > .label > .label-text {
+  /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
+     and forth under the pointer is harder to read than one that arrives and holds. */
+  animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  will-change: transform;
+}
+
+/* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
+   edge beside the icon reads as a collision rather than as more text. */
+.row[data-ui-marquee] > .label {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--ui-space-2),
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row[data-ui-marquee] > .label:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--ui-space-2),
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+@keyframes ui-tree-item-marquee {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--_marquee-distance));
+  }
+}
+
+/* Reduced motion keeps the fade, which already says the name continues. */
+@media (prefers-reduced-motion: reduce) {
+  .row[data-ui-marquee] > .label > .label-text {
+    animation: none;
+  }
+}
+
 /* 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,

package/vue/chunks/UiTree.js

@@ -13,6 +13,10 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		density: { default: "comfortable" },
 		hoverExpandDelay: { default: 700 },
 		label: { default: "Tree" },
+		marquee: {
+			type: Boolean,
+			default: false
+		},
 		maxDepth: { default: 0 }
 	},
 	emits: [
@@ -25,7 +29,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const emit = __emit;
 		const root = ref(null);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.density && `density density=${props.density}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.marquee && "marquee", props.density && `density density=${props.density}`].filter(Boolean).join(" "));
 		const isReorderDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && typeof detail["sourceType"] === "string" && typeof detail["targetType"] === "string" && typeof detail["sourceScope"] === "string" && typeof detail["targetScope"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"sourceId",
 			"targetId",
@@ -68,6 +72,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a2bb2dca"]]);
+}), [["__scopeId", "data-v-5c1143dd"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -25,10 +25,14 @@ var _hoisted_4 = ["disabled", "hidden"];
 var _hoisted_5 = { class: "leading" };
 var _hoisted_6 = { class: "label" };
 var _hoisted_7 = {
+	class: "label-text",
+	ref: "labelText"
+};
+var _hoisted_8 = {
 	class: "actions",
 	ref: "actions"
 };
-var _hoisted_8 = ["hidden"];
+var _hoisted_9 = ["hidden"];
 //#endregion
 //#region .build/vue/UiTreeItem.vue
 var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -53,6 +57,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		},
 		itemId: { default: "" },
 		label: { default: "" },
+		marquee: {
+			type: Boolean,
+			default: false
+		},
 		selected: {
 			type: Boolean,
 			default: false
@@ -71,6 +79,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const rowElement = useTemplateRef("row");
 		const dragHandleElement = useTemplateRef("dragHandle");
 		const disclosureElement = useTemplateRef("disclosure");
+		const labelTextElement = useTemplateRef("labelText");
 		const actionsElement = useTemplateRef("actions");
 		const childrenElement = useTemplateRef("children");
 		const internalExpanded = ref(false);
@@ -101,6 +110,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				row: rowElement,
 				dragHandle: dragHandleElement,
 				disclosure: disclosureElement,
+				labelText: labelTextElement,
 				actions: actionsElement,
 				children: childrenElement
 			},
@@ -190,8 +200,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"aria-hidden": "true"
 					}, 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")], 512),
+					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)]),
+					createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
 						"aria-hidden": "true"
@@ -202,7 +212,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					role: "group",
 					hidden: !(isContainer.value && internalExpanded.value),
 					ref: "children"
-				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_8),
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_9),
 				_cache[3] || (_cache[3] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
 					"aria-hidden": "true"
@@ -210,6 +220,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-48465a46"]]);
+}), [["__scopeId", "data-v-171d033f"]]);
 //#endregion
 export { UiTreeItem_default as t };