fluentui-svelte 0.3.0 → 0.5.0

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

@@ -32,6 +32,8 @@
 		type = 'item',
 		open = (openItems instanceof Set ? openItems.has(id) : openItems.includes(id)) || undefined,
 		checked = (checkedItems instanceof Set ? checkedItems.has(id) : checkedItems.includes(id)) || undefined,
+		onCheckedChange,
+		onOpenChange,
 		children,
 		...attributes
 	}: TreeViewItemProps = $props();
@@ -61,6 +63,12 @@
 		get parentId() {
 			return itemContext?.id;
 		},
+		get onCheckedChange() {
+			return onCheckedChange;
+		},
+		get onOpenChange() {
+			return onOpenChange;
+		},
 		get open() {
 			return open;
 		},
@@ -190,7 +198,8 @@
 			outline: 2px solid var(--fs-focus-stroke-outer);
 			outline-offset: 2px;
 		}
-		&.open :global(.branch-indicator) {
+		/* Only the chevron of this item's own row, not the ones of the branches nested inside it. */
+		&.open > :global(.fs-tree-view-item-content .branch-indicator) {
 			rotate: 90deg;
 		}
 	}

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

@@ -89,12 +89,21 @@
 					await tick();
 				}
 
+				const wasChecked = new Map(state.TREE_NODES.entries().map(([nodeId, node]) => [nodeId, !!node.checked]));
+
 				if (selectionMode === 'single') {
 					traversalSyncSingleSelection(id, state.TREE_NODES, checkedItems);
-					return;
+				} else {
+					traversalSync(id, state.TREE_NODES, checkedItems, checked);
 				}
 
-				traversalSync(id, state.TREE_NODES, checkedItems, checked);
+				// Every item the click reached reports its own change, the tree reports the resulting set.
+				for (const node of state.TREE_NODES.values()) {
+					if (!!node.checked !== wasChecked.get(node.id)) {
+						node.onCheckedChange?.(e as Event, { id: node.id, checked: !!node.checked });
+					}
+				}
+				treeViewContext.events.onCheckedChange(e as Event, Array.from(checkedItems));
 			},
 			openItem: (e, id) => {
 				if (openItems instanceof SvelteSet) {
@@ -105,6 +114,9 @@
 				const node = treeViewContext.state.TREE_NODES.get(id)!;
 
 				node.open = true;
+
+				node.onOpenChange?.(e as Event, { id, open: true });
+				treeViewContext.events.onOpenChange(e as Event, Array.from(openItems));
 			},
 			closeItem: (e, id) => {
 				const { state } = treeViewContext;
@@ -122,6 +134,9 @@
 				if (virtualizer && state.forceVirtualRender) {
 					state.forceVirtualRender = false;
 				}
+
+				node.onOpenChange?.(e as Event, { id, open: false });
+				treeViewContext.events.onOpenChange(e as Event, Array.from(openItems));
 			},
 			registerItem: (node) => {
 				treeViewContext.state.TREE_NODES.set(node.id, node);

package/dist/components/tree-view/tree-view.svelte.js

@@ -102,10 +102,12 @@ export function traversalSyncSingleSelection(itemId, state, iterable) {
     node.indeterminate = false;
     if (iterable instanceof Set) {
         iterable.clear();
-        iterable.add(node.id);
+        if (node.checked)
+            iterable.add(node.id);
     }
     else if (Array.isArray(iterable)) {
         iterable.length = 0;
-        iterable.push(node.id);
+        if (node.checked)
+            iterable.push(node.id);
     }
 }

package/dist/components/tree-view/types.d.ts

@@ -14,6 +14,8 @@ export type TreeViewNode = {
     checked?: boolean;
     indeterminate?: boolean;
     open?: boolean;
+    onCheckedChange?: TreeViewItemProps['onCheckedChange'];
+    onOpenChange?: TreeViewItemProps['onOpenChange'];
 };
 export type TreeViewEvent<T extends Record<string, unknown> | Iterable<unknown>> = (e: Event, data: T) => void;
 /**
@@ -179,6 +181,8 @@ export type TreeViewItemContext = {
     readonly id: string;
     readonly type: TreeViewItemType;
     readonly parentId?: string;
+    readonly onCheckedChange?: TreeViewItemProps['onCheckedChange'];
+    readonly onOpenChange?: TreeViewItemProps['onOpenChange'];
     open?: boolean;
     checked?: boolean;
     indeterminate?: boolean;

package/dist/css/class-darkmode.css

@@ -140,7 +140,7 @@
 
 	/* System */
 	--fs-system-attention: rgb(var(--fs-accent-light-3));
-	--fs-system-attetion-bg: #f6f6f608;
+	--fs-system-attention-bg: #f6f6f608;
 	--fs-system-attention-solid-bg: #2e2e2e;
 
 	--fs-system-success: #6ccb5f;

package/dist/css/media-darkmode.css

@@ -141,7 +141,7 @@
 
 		/* System */
 		--fs-system-attention: rgb(var(--fs-accent-light-3));
-		--fs-system-attetion-bg: #f6f6f608;
+		--fs-system-attention-bg: #f6f6f608;
 		--fs-system-attention-solid-bg: #2e2e2e;
 
 		--fs-system-success: #6ccb5f;

package/dist/css/theme.css

@@ -158,7 +158,7 @@
 	/* System */
 	--fs-system-attention: rgb(var(--fs-accent-base));
 	/* 👇 changed from original #f6f6f608 to color mix with 75% white */
-	--fs-system-attetion-bg: color-mix(in srgb, rgb(var(--fs-accent-base)), white 75%);
+	--fs-system-attention-bg: color-mix(in srgb, rgb(var(--fs-accent-base)), white 85%);
 	--fs-system-attention-solid-bg: #f7f7f7;
 
 	--fs-system-success: #0f7b0f;

package/dist/index.d.ts

@@ -3,6 +3,10 @@ export { default as AutoSuggestBoxOption } from './components/auto-suggest-box/o
 export { default as Avatar } from './components/avatar/avatar.svelte';
 export { default as Badge } from './components/badge/badge.svelte';
 export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
+export { default as Breadcrumb } from './components/breadcrumb/breadcrumb.svelte';
+export { default as BreadcrumbItem } from './components/breadcrumb/breadcrumb-item.svelte';
+export { default as BreadcrumbButton } from './components/breadcrumb/breadcrumb-button.svelte';
+export { default as BreadcrumbDivider } from './components/breadcrumb/breadcrumb-divider.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
 export { default as Card } from './components/card/card.svelte';
@@ -64,11 +68,15 @@ export { default as TableCell } from './components/table/table-cell.svelte';
 export { default as TableSelectionCell } from './components/table/table-selection-cell.svelte';
 export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
 export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
+export { default as TabView } from './components/tab-view/tab-view.svelte';
+export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
 export { default as TextArea } from './components/textarea/textarea.svelte';
 export { default as TextBox } from './components/text-box/text-box.svelte';
 export { default as TextBoxButton } from './components/text-box/text-box-button.svelte';
 export { default as TimePicker } from './components/time-picker/time-picker.svelte';
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
+export { default as TopNav } from './components/top-nav/top-nav.svelte';
+export { default as TopNavItem } from './components/top-nav/top-nav-item.svelte';
 export { default as Tooltip } from './components/tooltip/tooltip.svelte';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { default as TreeViewItem } from './components/tree-view/tree-view-item.svelte';

package/dist/index.js

@@ -9,6 +9,12 @@ export { default as Avatar } from './components/avatar/avatar.svelte';
 export { default as Badge } from './components/badge/badge.svelte';
 export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
 // End Badge Component
+// Start Breadcrumb Component
+export { default as Breadcrumb } from './components/breadcrumb/breadcrumb.svelte';
+export { default as BreadcrumbItem } from './components/breadcrumb/breadcrumb-item.svelte';
+export { default as BreadcrumbButton } from './components/breadcrumb/breadcrumb-button.svelte';
+export { default as BreadcrumbDivider } from './components/breadcrumb/breadcrumb-divider.svelte';
+// End Breadcrumb Component
 // Start Button Component
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
@@ -120,6 +126,10 @@ export { default as TableSelectionCell } from './components/table/table-selectio
 export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
 export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
 // End Table Component
+// Start TabView Component
+export { default as TabView } from './components/tab-view/tab-view.svelte';
+export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
+// End TabView Component
 // Start TextArea Component
 export { default as TextArea } from './components/textarea/textarea.svelte';
 // End TextArea Component
@@ -133,6 +143,10 @@ export { default as TimePicker } from './components/time-picker/time-picker.svel
 // Start ToggleSwitch Component
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
 // End ToggleSwitch Component
+// Start TopNav Component
+export { default as TopNav } from './components/top-nav/top-nav.svelte';
+export { default as TopNavItem } from './components/top-nav/top-nav-item.svelte';
+// End TopNav Component
 // Start Tooltip Component
 export { default as Tooltip } from './components/tooltip/tooltip.svelte';
 // End Tooltip Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",
@@ -83,6 +83,7 @@
     "@humanspeak/svelte-virtual-list": "^0.5.14",
     "@inlang/paraglide-js": "^2.24.1",
     "@inlang/paraglide-js-svelte": "^1.0.4",
+    "@jlacostaec/paraglide-markup-svelte": "0.1.0",
     "@jlacostaec/propsmith": "^0.2.0",
     "@playwright/test": "^1.62.1",
     "@sveltejs/adapter-auto": "^7.0.1",