fluentui-svelte 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,3 +1,10 @@
+// Start AppSurface Component
+export { default as AppSurface } from './components/app-surface/app-surface.svelte';
+// End AppSurface Component
+// Start AppWindow Component
+export { default as AppWindow } from './components/app-window/app-window.svelte';
+export { getAppWindowContext } from "./components/app-window/app-window.js";
+// End AppWindow Component
 // Start AutoSuggestBox Component
 export { default as AutoSuggestBox } from './components/auto-suggest-box/auto-suggest-box.svelte';
 export { default as AutoSuggestBoxOption } from './components/auto-suggest-box/option.svelte';
@@ -80,6 +87,7 @@ export { default as Label } from './components/label/label.svelte';
 // Start ListView Component
 export { default as ListView } from './components/list-view/list-view.svelte';
 export { default as ListViewItem } from './components/list-view/list-view-item.svelte';
+export { default as ListViewItemBranch } from './components/list-view/list-view-item-branch.svelte';
 // End ListView Component
 // Start Menu Component
 export { default as Menu } from './components/menu/menu.svelte';
@@ -92,6 +100,8 @@ export { default as MenuList } from './components/menu/menu-list.svelte';
 export { default as MenuItemCheckbox } from './components/menu/menu-item-checkbox.svelte';
 export { default as MenuItemRadio } from './components/menu/menu-item-radio.svelte';
 export { default as MenuItemSwitch } from './components/menu/menu-item-switch.svelte';
+export { default as MenuCommandBar } from './components/menu/menu-command-bar.svelte';
+export { default as MenuCommandBarItem } from './components/menu/menu-command-bar-item.svelte';
 export { default as ContextMenuTrigger } from './components/menu/context-menu-trigger.svelte';
 // End Menu Component
 // Start NumberBox Component
@@ -109,6 +119,9 @@ export { default as ProgressRing } from './components/progress-ring/progress-rin
 // Start RadioButton Component
 export { default as RadioButton } from './components/radio-button/radio-button.svelte';
 // End RadioButton Component
+// Start Rating Component
+export { default as Rating } from './components/rating/rating.svelte';
+// End Rating Component
 // Start Skeleton Component
 export { default as Skeleton } from './components/skeleton/skeleton.svelte';
 // End Skeleton Component
@@ -130,6 +143,15 @@ export { default as TableCellActions } from './components/table/table-cell-actio
 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 Tag Component
+export { default as Tag } from './components/tag/tag.svelte';
+export { default as TagGroup } from './components/tag/tag-group.svelte';
+// End Tag Component
+// Start TagPicker Component
+export { default as TagPicker } from './components/tag-picker/tag-picker.svelte';
+export { default as TagPickerOption } from './components/tag-picker/option.svelte';
+export { default as TagPickerOptionGroup } from './components/tag-picker/option-group.svelte';
+// End TagPicker Component
 // Start TextArea Component
 export { default as TextArea } from './components/textarea/textarea.svelte';
 // End TextArea Component
@@ -140,6 +162,16 @@ export { default as TextBoxButton } from './components/text-box/text-box-button.
 // Start TimePicker Component
 export { default as TimePicker } from './components/time-picker/time-picker.svelte';
 // End TimePicker Component
+// Start SideNav Component
+export { default as SideNav } from './components/side-nav/side-nav.svelte';
+export { default as SideNavItem } from './components/side-nav/side-nav-item.svelte';
+export { default as SideNavBranch } from './components/side-nav/side-nav-branch.svelte';
+// End SideNav Component
+// Start TitleBar Component
+export { default as TitleBar } from './components/title-bar/title-bar.svelte';
+export { default as TitleBarLeftControls } from './components/title-bar/title-bar-left-controls.svelte';
+export { default as TitleBarRightControls } from './components/title-bar/title-bar-right-controls.svelte';
+// End TitleBar Component
 // Start ToggleSwitch Component
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
 // End ToggleSwitch Component

package/dist/internal/components/dynamic-carousel/dynamic-carousel.svelte

@@ -3,9 +3,11 @@
 	import CaretDownFilled from 'fluentui-icons-svelte/CaretDownFilled.svelte';
 	import CaretUpFilled from 'fluentui-icons-svelte/CaretUpFilled.svelte';
 	import { Button } from '../../../index.js';
+	import { PREFIX } from '../../constants.js';
 	import { on } from 'svelte/events';
 
 	let {
+		label,
 		values = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0')),
 		selectedIndex = $bindable(0),
 		disabledIndices = [],
@@ -16,6 +18,8 @@
 		inertia = true,
 		children
 	}: {
+		/** The accessible name of the listbox, such as the field it picks. */
+		label: string;
 		values?: string[];
 		selectedIndex?: number;
 		/** Real (0-based, unwrapped) indices the carousel must never rest on. */
@@ -30,6 +34,10 @@
 		children?: Snippet<[{ value: string; index: number; selected: boolean }]>;
 	} = $props();
 
+	// Picker columns render side by side, so the option ids need a prefix of their own.
+	const UID = $props.id();
+	const ITEM_ID = `${PREFIX}carousel-${UID}-item`;
+
 	// Reactive state — read by the template and deriveds.
 	let scrolling = $state(false);
 	// Continuous position for smooth scrolling (in item units, unbounded for infinite scroll).
@@ -301,7 +309,14 @@
 </script>
 
 <div class="fs-dynamic-carousel" style:--item-height="{itemHeight}px" style:--container-height="{containerHeight}px">
-	<Button class="fs-dynamic-carousel-btn" appearance="subtle" aria-label="Previous" onclick={() => moveBy(-1)}>
+	<!-- The arrows are for the pointer: the listbox moves with ArrowUp/ArrowDown. -->
+	<Button
+		class="fs-dynamic-carousel-btn"
+		appearance="subtle"
+		tabindex={-1}
+		aria-hidden="true"
+		onclick={() => moveBy(-1)}
+	>
 		<CaretUpFilled />
 	</Button>
 	<div
@@ -310,13 +325,13 @@
 		onkeydown={handleKeydown}
 		role="listbox"
 		tabindex="0"
-		aria-label="Selector"
-		aria-activedescendant="carousel-item-{centerIndex}"
+		aria-label={label}
+		aria-activedescendant="{ITEM_ID}-{centerIndex}"
 	>
 		<div class="fs-dynamic-carousel-track">
 			{#each virtualItems as item (item.key)}
 				<div
-					id="carousel-item-{item.key}"
+					id="{ITEM_ID}-{item.key}"
 					class={[
 						'fs-dynamic-carousel-item',
 						item.realIndex === currentSelectedIndex && 'selected',
@@ -352,7 +367,13 @@
 			{/each}
 		</div>
 	</div>
-	<Button class="fs-dynamic-carousel-btn" appearance="subtle" aria-label="Next" onclick={() => moveBy(1)}>
+	<Button
+		class="fs-dynamic-carousel-btn"
+		appearance="subtle"
+		tabindex={-1}
+		aria-hidden="true"
+		onclick={() => moveBy(1)}
+	>
 		<CaretDownFilled />
 	</Button>
 </div>

package/dist/internal/components/dynamic-carousel/dynamic-carousel.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** The accessible name of the listbox, such as the field it picks. */
+    label: string;
     values?: string[];
     selectedIndex?: number;
     /** Real (0-based, unwrapped) indices the carousel must never rest on. */

package/dist/internal/constants.d.ts

@@ -20,7 +20,3 @@ export declare const DIRECTION: {
 export declare const PREFIX = "fs";
 export declare const DEFAULT_OFFSET = 8;
 export declare const VIRTUAL_ELEMENT: VirtualElement;
-export declare const fake: {
-    id: string;
-    name: string;
-}[];