fluentui-svelte 0.3.0 → 0.5.0

package/dist/components/top-nav/top-nav.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import { setTopNavContext, TABSPOT_ITEMS, TABSPOT_SKIP } from './top-nav.svelte.js';
+	import type { TopNavContext, TopNavProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		selectedValue = $bindable(''),
+		onTabSelect,
+		appearance = 'transparent',
+		size = 'medium',
+		vertical = false,
+		disabled = false,
+		selectTabOnFocus = false,
+		reserveSelectedTabSpace = true,
+		disableTabspot = false,
+		class: classes,
+		children,
+		...attributes
+	}: TopNavProps = $props();
+
+	const context: TopNavContext = $state({
+		config: {
+			get appearance() {
+				return appearance;
+			},
+			get size() {
+				return size;
+			},
+			get vertical() {
+				return vertical;
+			},
+			get disabled() {
+				return disabled;
+			},
+			get selectTabOnFocus() {
+				return selectTabOnFocus;
+			},
+			get reserveSelectedTabSpace() {
+				return reserveSelectedTabSpace;
+			}
+		},
+		state: {
+			get selectedValue() {
+				return selectedValue;
+			},
+			set selectedValue(value: string) {
+				selectedValue = value;
+			}
+		},
+		events: null,
+		methods: {
+			selectTab: (event: Event, value: string) => {
+				if (selectedValue === value) return;
+				selectedValue = value;
+				onTabSelect?.(event, value);
+			}
+		}
+	});
+
+	setTopNavContext(context);
+
+	/**
+	 * A single tab stop for the whole strip: the arrows walk the items along the axis they are laid
+	 * out on, and `Home`/`End` jump to the ends.
+	 */
+	const tabspotAttributes = $derived(
+		!disableTabspot &&
+			getTabspotAttributes({
+				root: { manageSpecialKeys: { Home: true, End: true } },
+				mover: {
+					axis: vertical ? 'vertical' : 'horizontal',
+					items: TABSPOT_ITEMS,
+					skip: TABSPOT_SKIP
+				}
+			})
+	);
+
+	/** The circular appearances fill the selected item instead of underlining it. */
+	const hasIndicator = $derived(appearance === 'transparent' || appearance === 'subtle');
+
+	/** Where the bar sits along the axis, and how far it reaches. Both are read off the DOM. */
+	let offset = $state(0);
+	let extent = $state(0);
+	let measured = $state(false);
+
+	/**
+	 * The bar belongs to the strip rather than to the selected item, which is what lets it travel:
+	 * one element that stays mounted and moves, instead of one per item appearing and disappearing.
+	 * That costs a measurement, since only the DOM knows where an item ended up.
+	 *
+	 * It spans the content of the item rather than its whole box, so the padding is taken off both
+	 * ends — the same padding the item lays its own hover bar within.
+	 */
+	const measure = () => {
+		const root = ref;
+		if (!root) return;
+
+		const item = [...root.querySelectorAll<HTMLElement>(TABSPOT_ITEMS)].find(
+			(el) => el.dataset.value === selectedValue
+		);
+		if (!item) {
+			measured = false;
+			return;
+		}
+
+		const style = getComputedStyle(item);
+		const before = parseFloat(vertical ? style.paddingTop : style.paddingLeft) || 0;
+		const after = parseFloat(vertical ? style.paddingBottom : style.paddingRight) || 0;
+
+		offset = (vertical ? item.offsetTop : item.offsetLeft) + before;
+		extent = Math.max(0, (vertical ? item.offsetHeight : item.offsetWidth) - before - after);
+		measured = true;
+	};
+
+	// The selection and the axis are what move the bar; both are read through `measure`.
+	$effect(() => {
+		measure();
+	});
+
+	/**
+	 * Everything else that moves it does so through the layout: a label that rewrapped, a font that
+	 * finished loading, an item that was added or removed. The observers are what catch those, since
+	 * none of them is a change to a prop.
+	 */
+	$effect(() => {
+		const root = ref;
+		if (!root || !hasIndicator) return;
+
+		const resize = new ResizeObserver(measure);
+		const watch = () => {
+			resize.disconnect();
+			resize.observe(root);
+			for (const item of root.querySelectorAll(TABSPOT_ITEMS)) resize.observe(item);
+		};
+		const mutations = new MutationObserver(() => {
+			watch();
+			measure();
+		});
+
+		watch();
+		mutations.observe(root, { childList: true, subtree: true });
+
+		return () => {
+			resize.disconnect();
+			mutations.disconnect();
+		};
+	});
+</script>
+
+<!--
+	@component
+	A top nav gives a single selection from a row of items, with a bar that travels to whichever one
+	is selected. It owns the selection alone: what an item opens is rendered by the consumer.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TopNav, TopNavItem } from 'fluentui-svelte';
+
+		let selectedValue = $state('arrivals');
+	</script>
+
+	<TopNav bind:selectedValue aria-label="Flights">
+		<TopNavItem value="arrivals">Arrivals</TopNavItem>
+		<TopNavItem value="departures">Departures</TopNavItem>
+	</TopNav>
+
+	{#if selectedValue === 'arrivals'}
+		<p>Arrivals</p>
+	{/if}
+	```
+-->
+<div
+	bind:this={ref}
+	role="tablist"
+	aria-orientation={vertical ? 'vertical' : undefined}
+	class={['fs-top-nav', appearance, size, { vertical }, classes]}
+	{...tabspotAttributes}
+	{...attributes}
+>
+	{@render children?.()}
+	{#if hasIndicator && measured}
+		<span
+			class="fs-top-nav-indicator"
+			aria-hidden="true"
+			style:--fs-top-nav-indicator-offset="{offset}px"
+			style:--fs-top-nav-indicator-extent="{extent}px"
+		></span>
+	{/if}
+</div>
+
+<style>
+	.fs-top-nav {
+		position: relative;
+		display: flex;
+		align-items: stretch;
+		font-family: var(--fs-font-family-base);
+		color: var(--fs-text-primary);
+		/* Read by every item, so a size change ripples out of the strip alone. */
+		--fs-top-nav-item-padding-inline: 0.625rem;
+		--fs-top-nav-item-padding-block: 0.375rem;
+		--fs-top-nav-item-font-size: var(--fs-body2-font-size);
+		--fs-top-nav-item-line-height: var(--fs-body2-line-height);
+		--fs-top-nav-item-gap: 0.5rem;
+		--fs-top-nav-item-icon-size: 1.25rem;
+		--fs-top-nav-bar-thickness: 0.1875rem;
+		&.small {
+			--fs-top-nav-item-padding-inline: 0.5rem;
+			--fs-top-nav-item-padding-block: 0.375rem;
+			--fs-top-nav-item-font-size: var(--fs-caption-font-size);
+			--fs-top-nav-item-line-height: var(--fs-caption-line-height);
+			--fs-top-nav-item-gap: 0.375rem;
+			--fs-top-nav-item-icon-size: 1rem;
+			--fs-top-nav-bar-thickness: 0.125rem;
+		}
+		&.large {
+			--fs-top-nav-item-padding-block: 0.875rem;
+			--fs-top-nav-item-font-size: var(--fs-body-font-size);
+			--fs-top-nav-item-line-height: var(--fs-body-line-height);
+		}
+		&.vertical {
+			flex-direction: column;
+			align-items: stretch;
+		}
+	}
+
+	/*
+	 * The bar. It is placed from the measurement rather than laid out, so moving it is a transform
+	 * the compositor can carry — and a transform is what keeps it on screen the whole way across,
+	 * instead of leaving one item and arriving at the next.
+	 */
+	.fs-top-nav-indicator {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: var(--fs-top-nav-indicator-extent, 0);
+		height: var(--fs-top-nav-bar-thickness);
+		border-radius: var(--fs-top-nav-bar-thickness);
+		background: var(--fs-accent-fill-default);
+		/* `offsetLeft` is measured from the left whichever way the strip is written. */
+		transform: translateX(var(--fs-top-nav-indicator-offset, 0));
+		transition:
+			transform var(--fs-normal-duration) var(--fs-point-to-point),
+			width var(--fs-normal-duration) var(--fs-point-to-point),
+			height var(--fs-normal-duration) var(--fs-point-to-point);
+		pointer-events: none;
+	}
+	.fs-top-nav.vertical .fs-top-nav-indicator {
+		top: 0;
+		bottom: auto;
+		/* The leading edge, so a strip written right to left grows its bar on the right. */
+		left: auto;
+		inset-inline-start: 0;
+		width: var(--fs-top-nav-bar-thickness);
+		height: var(--fs-top-nav-indicator-extent, 0);
+		transform: translateY(var(--fs-top-nav-indicator-offset, 0));
+	}
+</style>

package/dist/components/top-nav/top-nav.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TopNavProps } from './types.ts';
+/**
+ * A top nav gives a single selection from a row of items, with a bar that travels to whichever one
+ * is selected. It owns the selection alone: what an item opens is rendered by the consumer.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TopNav, TopNavItem } from 'fluentui-svelte';
+ *
+ * 	let selectedValue = $state('arrivals');
+ * </script>
+ *
+ * <TopNav bind:selectedValue aria-label="Flights">
+ * 	<TopNavItem value="arrivals">Arrivals</TopNavItem>
+ * 	<TopNavItem value="departures">Departures</TopNavItem>
+ * </TopNav>
+ *
+ * {#if selectedValue === 'arrivals'}
+ * 	<p>Arrivals</p>
+ * {/if}
+ * ```
+ */
+declare const TopNav: import("svelte").Component<TopNavProps, {}, "ref" | "selectedValue">;
+type TopNav = ReturnType<typeof TopNav>;
+export default TopNav;

package/dist/components/top-nav/top-nav.svelte.js

@@ -0,0 +1,18 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+export const COMPONENT_NAME = `${PREFIX}-top-nav`;
+export const [getTopNavContext, setTopNavContext] = createFSContext();
+/** The items a mover lands on, and what the bar is measured against. */
+export const TABSPOT_ITEMS = '.fs-top-nav-item';
+/**
+ * Items the cursor passes over instead of landing on: a disabled item answers nothing once reached.
+ * A button says so with the attribute of its own; an anchor, which has none, says it to ARIA.
+ */
+export const TABSPOT_SKIP = '[disabled], [aria-disabled="true"]';
+/** Reads the top nav context, or fails loudly when an item is rendered outside a `TopNav`. */
+export const requireTopNavContext = () => {
+    const context = getTopNavContext();
+    if (!context)
+        throw new Error(`No TopNavContext found for ${COMPONENT_NAME}.`);
+    return context;
+};

package/dist/components/top-nav/types.d.ts

@@ -0,0 +1,89 @@
+import type { FSContext } from '../../internal/index.js';
+import type { PolymorphicProps, Sizes } from '../../types/index.js';
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** How the strip and every item in it is painted. */
+export type TopNavAppearance = 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+/** An item is a button by default, and an anchor when it goes somewhere. */
+export type TopNavItemGenerics = 'button' | 'a';
+export type TopNavItemElementDOMType = {
+    button: HTMLButtonElement;
+    a: HTMLAnchorElement;
+};
+export type TopNavContext = FSContext<{
+    appearance: TopNavAppearance;
+    size: Sizes;
+    vertical: boolean;
+    disabled: boolean;
+    selectTabOnFocus: boolean;
+    reserveSelectedTabSpace: boolean;
+}, {
+    selectedValue: string;
+}, null, {
+    selectTab: (event: Event, value: string) => void;
+}>;
+/** @propsmith TopNavProps */
+export type TopNavProps = {
+    /** The DOM reference of the strip.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The value of the selected item.
+     * @bindable
+     */
+    selectedValue?: string;
+    /** Fired when an item is selected. */
+    onTabSelect?: (event: Event, value: string) => void;
+    /** How the strip is painted: `transparent` has no background of its own, `subtle` fills an item
+     * while it is engaged, and the two circular appearances trade the moving bar for a pill.
+     * @default 'transparent'
+     */
+    appearance?: TopNavAppearance;
+    /** The size of every item of the strip.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** Arranges the items in a column, with the bar down their leading edge.
+     * @default false
+     */
+    vertical?: boolean;
+    /** Disables the user interaction on every item.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Selects an item as soon as the focus reaches it, rather than waiting to be asked.
+     * @default false
+     */
+    selectTabOnFocus?: boolean;
+    /** A selected item sets its label in semibold, which is wider than the same label at rest. This
+     * holds that width from the start, so selecting an item never shifts the ones beside it.
+     * @default true
+     */
+    reserveSelectedTabSpace?: boolean;
+    /** Opts the strip out of the tabspot focus management, to wire your own.
+     * @default false
+     */
+    disableTabspot?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+/** @propsmith TopNavItemProps */
+export type TopNavItemProps<T extends TopNavItemGenerics = 'button'> = {
+    /** The DOM reference of the item.
+     * @type TopNavItemElementDOMType[T]
+     * @bindable
+     */
+    ref?: TopNavItemElementDOMType[T];
+    /** The DOM element to render. An anchor takes the attributes of one, `href` among them, and is
+     * what an item that navigates should be.
+     * @type 'button' | 'a'
+     * @default 'button'
+     */
+    as?: T;
+    /** The value that identifies the item. Defaults to a generated id. */
+    value?: string;
+    /** The icon to display before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+} & PolymorphicProps<T>;

package/dist/components/top-nav/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tree-view/docs/llms.md

@@ -35,7 +35,7 @@ Nesting a TreeView inside a TreeViewItem of type='branch' creates a subtree. Use
 
 ### Checkable Items
 
-Set `selectionMode="multiple"` to render checkboxes on selectable items.
+Set `selectionMode` to `"multiple" | "single"` to render checkboxes on selectable items.
 
 ```svelte
 <TreeView selectionMode="multiple">
@@ -50,6 +50,132 @@ Set `selectionMode="multiple"` to render checkboxes on selectable items.
 </TreeView>
 ```
 
+### Single selection
+
+Set `selectionMode` to `single` so checking an item unchecks the previous one, and branches no longer cascade to their children.
+
+```svelte
+<script>
+	let checked = $state([]);
+</script>
+
+<TreeView selectionMode="single" bind:checkedItems={checked}>
+	<TreeViewItem id="fruits" type="branch" open>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="banana">
+				<TreeViewItemContent>Banana</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+	<TreeViewItem id="vegetables">
+		<TreeViewItemContent>Vegetables</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+
+<p>Checked: {checked.join(', ')}</p>
+```
+
+### Icons
+
+Use `iconBefore` and `iconAfter` to render icons around the label. Every item reserves the space of the expand chevron, so checkboxes and icons stay aligned between branches and leaves.
+
+```svelte
+<script>
+	import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
+	import FolderRegular from 'fluentui-icons-svelte/FolderRegular.svelte';
+	import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
+	import ImageRegular from 'fluentui-icons-svelte/ImageRegular.svelte';
+	import StarRegular from 'fluentui-icons-svelte/StarRegular.svelte';
+	import LockClosedRegular from 'fluentui-icons-svelte/LockClosedRegular.svelte';
+</script>
+
+{#snippet folder()}<FolderRegular width="1.25rem" />{/snippet}
+{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
+{#snippet image()}<ImageRegular width="1.25rem" />{/snippet}
+{#snippet star()}<StarRegular width="1rem" />{/snippet}
+{#snippet lock()}<LockClosedRegular width="1rem" />{/snippet}
+
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="documents" type="branch" open>
+		<TreeViewItemContent iconBefore={folder}>Documents</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="report">
+				<TreeViewItemContent iconBefore={document} iconAfter={star}>Report</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="photo">
+				<TreeViewItemContent iconBefore={image}>Photo</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+	<TreeViewItem id="notes">
+		<TreeViewItemContent iconBefore={document} iconAfter={lock}>Notes</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+```
+
+### Aside and actions
+
+`aside` is pinned to the end of the row. `actions` comes after it and is revealed when the row is hovered or focused.
+
+```svelte
+<script>
+	import { TreeView, TreeViewItem, TreeViewItemContent, Button } from 'fluentui-svelte';
+	import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
+	import MoreHorizontalRegular from 'fluentui-icons-svelte/MoreHorizontalRegular.svelte';
+</script>
+
+{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
+{#snippet fileSize()}<span>2 KB</span>{/snippet}
+{#snippet more()}
+	<Button appearance="subtle" onclick={(e) => e.stopPropagation()} aria-label="More actions"
+		><MoreHorizontalRegular width="1rem" /></Button
+	>
+{/snippet}
+
+<TreeView>
+	<TreeViewItem id="report">
+		<TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Report</TreeViewItemContent>
+	</TreeViewItem>
+	<TreeViewItem id="annual-summary">
+		<TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Annual summary</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+```
+
+### Sizes
+
+Set `size` to `small`, `medium` or `large` on the root `TreeView`.
+
+```svelte
+<TreeView size="small">...</TreeView>
+<TreeView size="medium">...</TreeView>
+<TreeView size="large">...</TreeView>
+```
+
+### Disabled items
+
+A disabled item can't be opened or checked, and it is skipped when its parent checks its children, which leaves the parent in its mixed state.
+
+```svelte
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="fruits" type="branch" open>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="banana" disabled>
+				<TreeViewItemContent>Banana</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+</TreeView>
+```
+
 ### Controlling Open and Checked State
 
 Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to control state programmatically.
@@ -70,6 +196,45 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 		</TreeView>
 	</TreeViewItem>
 </TreeView>
+
+<p>Open: {openItems.join(', ')}</p>
+<p>Checked: {checkedItems.join(', ')}</p>
+```
+
+### Events
+
+`onCheckedChange` and `onOpenChange` on the TreeView receive the resulting ids. The same props on a TreeViewItem receive the item and its new state, including the children a branch cascades to.
+
+```svelte
+<script>
+	let treeEvent = $state('');
+	let itemEvent = $state('');
+</script>
+
+<TreeView
+	selectionMode="multiple"
+	onCheckedChange={(e, checkedItems) => (treeEvent = 'Checked: ' + checkedItems.join(', '))}
+	onOpenChange={(e, openItems) => (treeEvent = 'Open: ' + openItems.join(', '))}
+>
+	<TreeViewItem
+		id="fruits"
+		type="branch"
+		onOpenChange={(e, { id, open }) => (itemEvent = id + (open ? ' opened' : ' closed'))}
+	>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem
+				id="apple"
+				onCheckedChange={(e, { id, checked }) => (itemEvent = id + (checked ? ' checked' : ' unchecked'))}
+			>
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+</TreeView>
+
+<p>Tree: {treeEvent}</p>
+<p>Item: {itemEvent}</p>
 ```
 
 ## Component Props (TreeView)

package/dist/components/tree-view/tree-view-item-content.svelte

@@ -47,10 +47,8 @@
 		wrapperAttributes={{
 			onclick: (e) => {
 				e.stopPropagation();
-				if (ITEM_CONTEXT.disabled) {
-					e.preventDefault();
-					return;
-				}
+				e.preventDefault();
+				if (ITEM_CONTEXT.disabled) return;
 				handleCheck(e, ITEM_CONTEXT.id, !ITEM_CONTEXT.checked);
 			}
 		}}
@@ -87,9 +85,12 @@
 
 <style>
 	.fs-tree-view-item-content {
+		--chevron-width: 1.2rem;
+		--gap: 0.75rem;
+		box-sizing: border-box;
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: var(--gap);
 		position: relative;
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body-font-size);
@@ -100,20 +101,26 @@
 		width: 100%;
 		text-align: left;
 		user-select: none;
+		&:not(:has(:global(.branch-indicator))) {
+			--leaf-offset: calc(var(--chevron-width) + var(--gap) + 0rem);
+		}
 		&.size-small {
 			font-size: var(--fs-body2-font-size);
 			padding: 0.125rem 0.5rem;
-			padding-left: calc(0.5rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.5rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 1.75rem;
 		}
 		&.size-medium {
 			font-size: var(--fs-body-font-size);
 			padding: 0.25rem 0.625rem;
-			padding-left: calc(0.625rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.625rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 2rem;
 		}
 		&.size-large {
 			font-size: var(--fs-subtitle2-font-size);
 			padding: 0.375rem 0.75rem;
-			padding-left: calc(0.75rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.75rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 2.25rem;
 		}
 
 		&::after {
@@ -155,4 +162,30 @@
 			fill: currentColor;
 		}
 	}
+	.fs-tree-view-item-icon-before,
+	.fs-tree-view-item-icon-after,
+	.fs-tree-view-item-aside,
+	.fs-tree-view-item-actions {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.fs-tree-view-item-aside,
+	.fs-tree-view-item-actions {
+		margin-left: auto;
+	}
+	.fs-tree-view-item-aside + .fs-tree-view-item-actions {
+		margin-left: 0;
+	}
+	.fs-tree-view-item-actions {
+		opacity: 0;
+		@media (hover: none) {
+			opacity: 1;
+		}
+	}
+	.fs-tree-view-item-content:hover .fs-tree-view-item-actions,
+	.fs-tree-view-item-content:focus-within .fs-tree-view-item-actions,
+	:global(.fs-tree-view-item:focus-visible) > .fs-tree-view-item-content .fs-tree-view-item-actions {
+		opacity: 1;
+	}
 </style>