@nexxtmove/ui 1.44.0 → 1.45.0

package/dist/index.js

@@ -9354,7 +9354,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 }, yf = ["aria-label"], bf = {
 	key: 0,
 	"aria-hidden": "true",
-	class: "mb-0.5",
+	class: "mb-1.5",
 	"data-tree-ghost": ""
 }, xf = {
 	"data-tree-ghost-content": "",
@@ -9377,7 +9377,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 ], wf = ["onClick"], Tf = {
 	key: 1,
 	class: "size-5 shrink-0"
-}, Ef = ["id"], Df = 22, Of = "bg-cornflower-blue-50 outline-1 -outline-offset-1 outline-cornflower-blue-600 outline-dashed", kf = "transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms", Af = "opacity 80ms linear 120ms", jf = /* @__PURE__ */ p({
+}, Ef = ["id"], Df = ["inert"], Of = 8, kf = "bg-cornflower-blue-50 outline-1 -outline-offset-1 outline-cornflower-blue-600 outline-dashed", Af = "transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms", jf = "opacity 80ms linear 120ms", Mf = /* @__PURE__ */ p({
 	name: "NexxtTree",
 	__name: "Tree",
 	props: /*@__PURE__*/ _({
@@ -9492,7 +9492,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				n ? "text-cornflower-blue-600" : "text-gray-800",
 				!n && !T.value && "hover:bg-gray-100",
 				re.value.has(t) && "opacity-40",
-				G.value === t && Of
+				G.value === t && kf
 			];
 		}, ae = null, J = (e) => {
 			g.value?.contains(e.target) || P(null);
@@ -9621,12 +9621,12 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			let n = Ne(t);
 			if (n) {
-				n.style.transition = "none", n.style.opacity = "0", n.getBoundingClientRect(), n.style.transition = Af, n.style.opacity = "";
+				n.style.transition = "none", n.style.opacity = "0", n.getBoundingClientRect(), n.style.transition = jf, n.style.opacity = "";
 				return;
 			}
 			Me.add(t.dataset.treeId);
 			let r = Oe(v.value.find((e) => e.node.id === t.dataset.treeId)?.parentId), i = r ? t.offsetTop - (r.offsetTop + r.offsetHeight) : 0;
-			t.style.transition = "none", t.style.transform = `translateY(${-i}px)`, t.style.opacity = "0", t.style.pointerEvents = "none", t.getBoundingClientRect(), t.style.transition = kf, t.style.transform = "", t.style.opacity = "";
+			t.style.transition = "none", t.style.transform = `translateY(${-i}px)`, t.style.opacity = "0", t.style.pointerEvents = "none", t.getBoundingClientRect(), t.style.transition = Af, t.style.transform = "", t.style.opacity = "";
 		}, Fe = null, Ie = (e) => {
 			let t = e, n = Ne(t);
 			if (n) {
@@ -9728,7 +9728,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 		}, {
 			default: W(() => [(E(!0), s(e, null, k(ne.value, (t) => (E(), s(e, { key: t.key }, [t.ghost ? (E(), s("div", bf, [c("div", {
 				class: "flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none",
-				style: S({ marginLeft: `${t.depth * Df}px` })
+				style: S({ marginLeft: `${t.depth * Of}px` })
 			}, [c("span", xf, [
 				i[3] ||= c("span", { class: "size-5 shrink-0" }, null, -1),
 				t.node.icon ? (E(), a(Q, {
@@ -9750,8 +9750,8 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				"data-tree-id": t.row.node.id,
 				"data-tree-drop": G.value === t.row.node.id ? "inside" : void 0,
 				draggable: t.row.draggable,
-				class: b(["group mb-0.5 flex items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none", ie(t.row)]),
-				style: S({ paddingLeft: `${t.row.depth * Df + 4}px` }),
+				class: b(["group mb-1.5 flex items-center gap-1.5 overflow-x-clip rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none", ie(t.row)]),
+				style: S({ paddingLeft: `${t.row.depth * Of + 4}px` }),
 				onClick: (e) => Se(t.row.node.id),
 				onFocus: (e) => _.value = t.row.node.id,
 				onPointerdown: (e) => fe(e, t.row),
@@ -9777,42 +9777,47 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				}, null, 8, ["name", "class"])) : o("", !0),
 				c("span", {
 					id: Be(t.row.node.id),
-					class: "truncate"
+					"data-tree-label": "",
+					class: "min-w-0 flex-1 truncate"
 				}, M(t.row.node.label), 9, Ef),
 				d["node-actions"] ? (E(), s("div", {
 					key: 3,
 					"data-tree-actions": "",
-					class: "-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100",
+					class: b(["-my-0.5 -ml-1.5 grid shrink-0 transition-[grid-template-columns] duration-200 ease-in-out-strong [clip-path:inset(-0.5rem_-0.25rem)] motion-reduce:transition-none", m.value === t.row.node.id ? "grid-cols-[minmax(0,1fr)]" : "grid-cols-[minmax(0,0fr)]"]),
+					inert: m.value !== t.row.node.id || void 0,
 					onClick: i[1] ||= q(() => {}, ["stop"]),
 					onKeydown: i[2] ||= q(() => {}, ["stop"])
+				}, [c("div", {
+					"data-tree-actions-content": "",
+					class: b(["flex w-max items-center pl-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none", m.value === t.row.node.id ? "opacity-100" : "opacity-0"])
 				}, [f(Ve, {
 					node: t.row.node,
 					tabindex: Re(t.row.node.id)
-				}, null, 8, ["node", "tabindex"])], 32)) : o("", !0)
+				}, null, 8, ["node", "tabindex"])], 2)], 42, Df)) : o("", !0)
 			], 46, Cf))], 64))), 128))]),
 			_: 1
 		})], 40, yf));
 	}
-}), Mf = [
+}), Nf = [
 	"src",
 	"loop",
 	"aria-label"
-], Nf = {
+], Pf = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Pf = { class: "heading-4" }, Ff = { class: "max-w-xs truncate extra-small-normal text-white/50" }, If = {
+}, Ff = { class: "heading-4" }, If = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Lf = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Lf = {
+}, Rf = {
 	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, Rf = [
+}, zf = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], zf = { class: "flex items-center gap-2" }, Bf = ["aria-label"], Vf = { class: "extra-small-normal text-white/70 tabular-nums" }, Hf = ["aria-label"], Uf = ["aria-label"], Wf = /* @__PURE__ */ p({
+], Bf = { class: "flex items-center gap-2" }, Vf = ["aria-label"], Hf = { class: "extra-small-normal text-white/70 tabular-nums" }, Uf = ["aria-label"], Wf = ["aria-label"], Gf = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -9893,15 +9898,15 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => C.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : F()
-			}, null, 42, Mf),
-			C.value ? (E(), s("div", Nf, [
+			}, null, 42, Nf),
+			C.value ? (E(), s("div", Pf, [
 				f(Q, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", Pf, M(a.value.error), 1),
-				c("p", Ff, M(e.src), 1)
+				c("p", Ff, M(a.value.error), 1),
+				c("p", If, M(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -9909,7 +9914,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: W(() => [e.showControls !== !1 && T.value && !C.value ? (E(), s("div", If, [c("div", Lf, [f(Q, {
+				default: W(() => [e.showControls !== !1 && T.value && !C.value ? (E(), s("div", Lf, [c("div", Rf, [f(Q, {
 					name: T.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -9952,7 +9957,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 					class: "absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100",
 					style: S({ left: `${B.value}%` })
 				}, null, 4)
-			], 40, Rf), c("div", zf, [
+			], 40, zf), c("div", Bf, [
 				c("button", {
 					type: "button",
 					"aria-label": P(u) ? a.value.pause : a.value.play,
@@ -9962,8 +9967,8 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 					name: P(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Bf),
-				c("span", Vf, M(N(V.value)) + " / " + M(N(P(m))), 1),
+				}, null, 8, ["name"])], 8, Vf),
+				c("span", Hf, M(N(V.value)) + " / " + M(N(P(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -9974,7 +9979,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 					name: P(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Hf),
+				}, null, 8, ["name"])], 8, Uf),
 				c("button", {
 					type: "button",
 					"aria-label": P(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -9984,10 +9989,10 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 					name: P(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Uf)
+				}, null, 8, ["name"])], 8, Wf)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { zt as EDITOR_ALIGN_ITEMS_OPTIONS, Ht as EDITOR_BACKGROUND_SIZE_OPTIONS, An as EDITOR_BORDER_STEPS, mi as EDITOR_DIMENSION_LIMITS, Gt as EDITOR_FLEX_DIRECTION_OPTIONS, dr as EDITOR_FONT_SIZE_STEPS, en as EDITOR_GAP_STEPS, Un as EDITOR_HEADING_TYPE_OPTIONS, er as EDITOR_JUSTIFY_CONTENT_OPTIONS, Er as EDITOR_LETTER_SPACING_STEPS, vr as EDITOR_LINE_HEIGHT_STEPS, ar as EDITOR_MAX_WIDTH_STEPS, Zr as EDITOR_PADDING_STEPS, Jn as EDITOR_RADIUS_STEPS, xi as EDITOR_SIZE_OPTIONS, Zn as EDITOR_TEXT_ALIGN_OPTIONS, yr as EDITOR_TEXT_LINE_HEIGHT_RATIOS, gt as EVENT_CONFIG_MAP, wi as NexxtAnimatedNumber, Ei as NexxtAnnouncement, ji as NexxtAvatar, Ni as NexxtButton, da as NexxtCalendar, ma as NexxtCard, ga as NexxtCheckbox, _a as NexxtChip, En as NexxtColorPicker, Ua as NexxtCombobox, Ha as NexxtComboboxPanel, Ya as NexxtContactInfoCard, co as NexxtCountrySelect, po as NexxtCustomerJourneyTile, mo as NexxtDatePicker, So as NexxtDoughnutChart, Do as NexxtDropdownButton, Vt as NexxtEditorAlignItems, Wt as NexxtEditorBackgroundSize, Nn as NexxtEditorBorder, Ro as NexxtEditorColor, vi as NexxtEditorDimensionField, qt as NexxtEditorFlexDirection, hr as NexxtEditorFontSize, nn as NexxtEditorGap, Gn as NexxtEditorHeadingType, nr as NexxtEditorJustifyContent, jr as NexxtEditorLetterSpacing, Cr as NexxtEditorLineHeight, sr as NexxtEditorMaxWidth, si as NexxtEditorPadding, Xn as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, Ci as NexxtEditorSize, Vo as NexxtEditorSizeLimit, $n as NexxtEditorTextAlign, Wo as NexxtEnergyLabel, ln as NexxtFloatingPanel, Ys as NexxtFontPicker, $s as NexxtHeader, Q as NexxtIcon, tc as NexxtInfoBlock, wa as NexxtInputField, lc as NexxtInputSelect, dc as NexxtLoader, hc as NexxtModal, _c as NexxtModalFooter, qc as NexxtPageCard, Qc as NexxtPageContainer, Hc as NexxtPageMockup, el as NexxtPageTypeTile, tl as NexxtPagination, $o as NexxtPickerGroup, ds as NexxtPickerItem, xs as NexxtPickerList, Ds as NexxtPickerPanel, ss as NexxtPickerPreview, ol as NexxtPlaceholderInput, ul as NexxtPresenceIndicator, Sl as NexxtProgressBar, Nl as NexxtPropertyCard, Ol as NexxtPropertyListing, Yl as NexxtReferenceCard, Hn as NexxtSelect, Ql as NexxtSelectableOption, iu as NexxtSidebarMenuItem, Ko as NexxtSkeleton, cu as NexxtSkeletonPropertyCard, Zt as NexxtSlider, du as NexxtSocialIcons, hu as NexxtSocialMediaCustomTemplate, wu as NexxtSocialMediaTemplate, Ru as NexxtSocialMediaType, Zu as NexxtSource, Oi as NexxtSquircle, Qu as NexxtStepperHeader, Ct as NexxtSwitch, ad as NexxtTabbedContent, vd as NexxtTable, td as NexxtTabs, Md as NexxtTemplateCard, Id as NexxtTextarea, Ud as NexxtTimelineEvent, Xd as NexxtTimelineLanes, tf as NexxtTimelinePhaseblock, rf as NexxtTimelineTrack, df as NexxtToast, ff as NexxtToaster, Rt as NexxtToggleGroup, At as NexxtTooltip, jf as NexxtTree, Wf as NexxtVideoPlayer, _t as PHASE_MAP, Ju as SOURCE_MAP };
+export { zt as EDITOR_ALIGN_ITEMS_OPTIONS, Ht as EDITOR_BACKGROUND_SIZE_OPTIONS, An as EDITOR_BORDER_STEPS, mi as EDITOR_DIMENSION_LIMITS, Gt as EDITOR_FLEX_DIRECTION_OPTIONS, dr as EDITOR_FONT_SIZE_STEPS, en as EDITOR_GAP_STEPS, Un as EDITOR_HEADING_TYPE_OPTIONS, er as EDITOR_JUSTIFY_CONTENT_OPTIONS, Er as EDITOR_LETTER_SPACING_STEPS, vr as EDITOR_LINE_HEIGHT_STEPS, ar as EDITOR_MAX_WIDTH_STEPS, Zr as EDITOR_PADDING_STEPS, Jn as EDITOR_RADIUS_STEPS, xi as EDITOR_SIZE_OPTIONS, Zn as EDITOR_TEXT_ALIGN_OPTIONS, yr as EDITOR_TEXT_LINE_HEIGHT_RATIOS, gt as EVENT_CONFIG_MAP, wi as NexxtAnimatedNumber, Ei as NexxtAnnouncement, ji as NexxtAvatar, Ni as NexxtButton, da as NexxtCalendar, ma as NexxtCard, ga as NexxtCheckbox, _a as NexxtChip, En as NexxtColorPicker, Ua as NexxtCombobox, Ha as NexxtComboboxPanel, Ya as NexxtContactInfoCard, co as NexxtCountrySelect, po as NexxtCustomerJourneyTile, mo as NexxtDatePicker, So as NexxtDoughnutChart, Do as NexxtDropdownButton, Vt as NexxtEditorAlignItems, Wt as NexxtEditorBackgroundSize, Nn as NexxtEditorBorder, Ro as NexxtEditorColor, vi as NexxtEditorDimensionField, qt as NexxtEditorFlexDirection, hr as NexxtEditorFontSize, nn as NexxtEditorGap, Gn as NexxtEditorHeadingType, nr as NexxtEditorJustifyContent, jr as NexxtEditorLetterSpacing, Cr as NexxtEditorLineHeight, sr as NexxtEditorMaxWidth, si as NexxtEditorPadding, Xn as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, Ci as NexxtEditorSize, Vo as NexxtEditorSizeLimit, $n as NexxtEditorTextAlign, Wo as NexxtEnergyLabel, ln as NexxtFloatingPanel, Ys as NexxtFontPicker, $s as NexxtHeader, Q as NexxtIcon, tc as NexxtInfoBlock, wa as NexxtInputField, lc as NexxtInputSelect, dc as NexxtLoader, hc as NexxtModal, _c as NexxtModalFooter, qc as NexxtPageCard, Qc as NexxtPageContainer, Hc as NexxtPageMockup, el as NexxtPageTypeTile, tl as NexxtPagination, $o as NexxtPickerGroup, ds as NexxtPickerItem, xs as NexxtPickerList, Ds as NexxtPickerPanel, ss as NexxtPickerPreview, ol as NexxtPlaceholderInput, ul as NexxtPresenceIndicator, Sl as NexxtProgressBar, Nl as NexxtPropertyCard, Ol as NexxtPropertyListing, Yl as NexxtReferenceCard, Hn as NexxtSelect, Ql as NexxtSelectableOption, iu as NexxtSidebarMenuItem, Ko as NexxtSkeleton, cu as NexxtSkeletonPropertyCard, Zt as NexxtSlider, du as NexxtSocialIcons, hu as NexxtSocialMediaCustomTemplate, wu as NexxtSocialMediaTemplate, Ru as NexxtSocialMediaType, Zu as NexxtSource, Oi as NexxtSquircle, Qu as NexxtStepperHeader, Ct as NexxtSwitch, ad as NexxtTabbedContent, vd as NexxtTable, td as NexxtTabs, Md as NexxtTemplateCard, Id as NexxtTextarea, Ud as NexxtTimelineEvent, Xd as NexxtTimelineLanes, tf as NexxtTimelinePhaseblock, rf as NexxtTimelineTrack, df as NexxtToast, ff as NexxtToaster, Rt as NexxtToggleGroup, At as NexxtTooltip, Mf as NexxtTree, Gf as NexxtVideoPlayer, _t as PHASE_MAP, Ju as SOURCE_MAP };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/molecules/Tree/Tree.vue

@@ -80,7 +80,7 @@ const selected = defineModel<string | null>('selected', { default: null })
 /** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
 const collapsed = defineModel<string[]>('collapsed', { default: () => [] })
 
-const INDENT = 22
+const INDENT = 8
 
 const root = useTemplateRef<HTMLElement>('root')
 const focusedId = ref<string | null>(null)
@@ -890,7 +890,7 @@ defineExpose({ focusNode })
         <!-- The drop indicator: where the dragged node lands, at the depth it lands on. Out of
              the accessibility tree and without `data-tree-id`, so it is no row to the keyboard,
              the tab stop or the highlight. One element for the whole drag, that changes spots. -->
-        <div v-if="item.ghost" aria-hidden="true" class="mb-0.5" data-tree-ghost>
+        <div v-if="item.ghost" aria-hidden="true" class="mb-1.5" data-tree-ghost>
           <div
             class="flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none"
             :style="{ marginLeft: `${item.depth * INDENT}px` }"
@@ -918,7 +918,7 @@ defineExpose({ focusNode })
           :data-tree-id="item.row.node.id"
           :data-tree-drop="collapsedTargetId === item.row.node.id ? 'inside' : undefined"
           :draggable="item.row.draggable"
-          class="group mb-0.5 flex items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+          class="group mb-1.5 flex items-center gap-1.5 overflow-x-clip rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
           :class="rowClasses(item.row)"
           :style="{ paddingLeft: `${item.row.depth * INDENT + 4}px` }"
           @click="onRowClick(item.row.node.id)"
@@ -955,19 +955,39 @@ defineExpose({ focusNode })
             class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
             :class="selected === item.row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
           />
-          <span :id="labelId(item.row.node.id)" class="truncate">{{ item.row.node.label }}</span>
-
-          <!-- Revealed by opacity rather than removed, so the row keeps its layout while it
-               appears. Pulled into the row's padding so a 24px button leaves the row at 28px.
-               Stopping here keeps the row's click and the tree's keys away from the actions. -->
+          <span :id="labelId(item.row.node.id)" data-tree-label class="min-w-0 flex-1 truncate">{{
+            item.row.node.label
+          }}</span>
+
+          <!-- Only the selected row has actions: the track grows from 0 to their width and pushes
+               its label in, while their start, pinned to it, slides them in from the row's end.
+               The clip hides what has not slid in yet; the row's `overflow-x-clip` keeps them out
+               of the panel's scroll width meanwhile. Inert on every other row, so what cannot be
+               seen cannot be focused or read either; `undefined` rather than `false`, so no
+               `inert="false"` lands where the DOM has no such property. Pulled into the row's padding so a 24px
+               button leaves the row at 28px, and into the row's gap so a label without actions
+               runs to the row's end. Stopping here keeps the row's click and the tree's keys away
+               from the actions. -->
           <div
             v-if="slots['node-actions']"
             data-tree-actions
-            class="-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100"
+            class="-my-0.5 -ml-1.5 grid shrink-0 transition-[grid-template-columns] duration-200 ease-in-out-strong [clip-path:inset(-0.5rem_-0.25rem)] motion-reduce:transition-none"
+            :class="
+              selected === item.row.node.id
+                ? 'grid-cols-[minmax(0,1fr)]'
+                : 'grid-cols-[minmax(0,0fr)]'
+            "
+            :inert="selected !== item.row.node.id || undefined"
             @click.stop
             @keydown.stop
           >
-            <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            <div
+              data-tree-actions-content
+              class="flex w-max items-center pl-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none"
+              :class="selected === item.row.node.id ? 'opacity-100' : 'opacity-0'"
+            >
+              <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            </div>
           </div>
         </div>
       </template>