fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/time-picker/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { NativeFieldAttributes } from '../../internal/index.js';
 /** @propsmith TimePickerProps */
 export type TimePickerProps = {
     /** Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).
@@ -27,28 +28,37 @@ export type TimePickerProps = {
      * @default false
      */
     hideSeconds?: boolean;
-    /** The DOM reference of the trigger button.
+    /** The DOM reference of the native time input that holds the value. The other attributes of the picker are applied to it.
      * @bindable
      */
-    element?: HTMLButtonElement;
-    /** The DOM reference of the element wrapping the trigger and its input.
+    ref?: HTMLInputElement | null;
+    /** The DOM reference of the button that opens the picker.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
-    /** The attributes to spread on the wrapper element.
-     * @type HTMLAttributes
+    buttonRef?: HTMLButtonElement | null;
+    /** The attributes to spread on the button that opens the picker.
+     * @type HTMLButtonAttributes
      */
-    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
-    /** The DOM reference of the underlying input element.
+    buttonAttributes?: HTMLButtonAttributes;
+    /** The DOM reference of the element wrapping the button and the native input.
      * @bindable
      */
-    inputElement?: HTMLInputElement;
-    /** HTML attributes for the underlying input element. Give it a `name` to submit the
-     * value with a form.
+    wrapperRef?: HTMLDivElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    inputProps?: HTMLInputAttributes;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The accessible name of the popup, which is announced as a dialog.
      * @default 'Choose a time'
      */
     popupLabel?: string;
-} & HTMLButtonAttributes;
+    /** The names of the hour, minute, second and AM/PM columns: shown on the trigger while there is no time, and given to the lists of the popup.
+     * @default { hour: 'Hour', minute: 'Minute', second: 'Second', meridiem: 'AM/PM' }
+     */
+    columnLabels?: {
+        hour?: string;
+        minute?: string;
+        second?: string;
+        meridiem?: string;
+    };
+} & NativeFieldAttributes<HTMLInputAttributes>;

package/dist/components/title-bar/docs/llms.md

@@ -0,0 +1,382 @@
+# TitleBar
+
+A title bar is the top bar of an app shell, laid out like the one of a Windows 11 app: the identity of the app and its navigation at the start, a search that grows and shrinks at the center, and the person picture and window controls at the end. It paints no background of its own, since it sits on the component that renders the window.
+
+To create a title bar, you will need to use the following components:
+
+- `TitleBar`: The root component. It lays the three areas out, keeps the search between its width limits and collapses it when asked.
+- `TitleBarLeftControls`: The controls at the start of the bar: a back button, a global navigation button, and the icon, the name and the release tag of the app.
+- `TitleBarRightControls`: The controls at the end of the bar: custom menus, the person picture, and the minimize, maximize and close buttons of the window.
+
+## Usage
+
+Compose the bar from its three areas through the `leftControls`, `search` and `rightControls` snippets. Every area is optional. `TitleBarLeftControls` and `TitleBarRightControls` follow the settings of the bar when they are rendered inside a `TitleBar`, and also work on their own. The window buttons only report the press, since minimizing, maximizing and closing the window is up to the host of your app.
+
+```svelte
+<script>
+	import { TitleBar, TitleBarLeftControls, TitleBarRightControls } from 'fluentui-svelte';
+	import { AppsRegular } from 'fluentui-icons-svelte';
+	import { getCurrentWindow } from '@tauri-apps/api/window';
+
+	const appWindow = getCurrentWindow();
+	let maximized = $state(false);
+	appWindow.isMaximized().then((value) => (maximized = value));
+</script>
+
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls back globalNav appIcon={AppsRegular} appName="FluentUI App" releaseTag="PREVIEW" />
+	{/snippet}
+	{#snippet rightControls()}
+		<TitleBarRightControls
+			{maximized}
+			personPic={{ name: 'Ada Lovelace' }}
+			onMinimize={() => appWindow.minimize()}
+			onWindowToggle={async () => {
+				await appWindow.toggleMaximize();
+				maximized = await appWindow.isMaximized();
+			}}
+			onClose={() => appWindow.close()}
+		/>
+	{/snippet}
+</TitleBar>
+```
+
+## Examples
+
+### Left Controls
+
+`back` and `globalNav` show a button each and report the press through `onBack` and `onGlobalNav`. Inside an AppWindow with a SideNav, the global navigation button expands and collapses it, follows its state and takes the place of its hamburger (call `preventDefault()` in `onGlobalNav` to opt out of the toggle). Elsewhere, set `globalNavExpanded` while the navigation is open, or pass a snippet to `globalNav` to draw the button yourself.
+
+```svelte
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls
+			back
+			globalNav
+			globalNavExpanded={navExpanded}
+			onBack={() => history.back()}
+			onGlobalNav={() => (navExpanded = !navExpanded)}
+			appIcon={AppsRegular}
+			appName="FluentUI App"
+		/>
+	{/snippet}
+</TitleBar>
+```
+
+### App Icon
+
+`appIcon` takes the URL of an image, a Fluent icon component, or a snippet that draws a custom SVG. With `appName` it is decorative and the name of the app identifies it. Without `appName` it has `role="img"` and `appIconLabel` names it.
+
+```svelte
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appIcon="/logo.png" appName="Image URL" />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appIcon={AppsRegular} appName="Fluent icon" />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appName="Custom SVG">
+			{#snippet appIcon(props)}
+				<svg {...props} viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor" /></svg>
+			{/snippet}
+		</TitleBarLeftControls>
+	{/snippet}
+</TitleBar>
+```
+
+### Release Tag
+
+`releaseTag` marks the release status of the app, such as PREVIEW or BETA, in a badge next to its name. It takes a string or a snippet.
+
+```svelte
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" releaseTag="PREVIEW" />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" releaseTag="BETA" />
+	{/snippet}
+</TitleBar>
+```
+
+### Search
+
+The `search` snippet sits at the center of the bar and takes up the width the bar gives it, growing and shrinking with the window. A bar with a search is `tall` by default, which leaves the search room to breathe.
+
+```svelte
+<TitleBar searchMinWidth={120}>
+	{#snippet leftControls()}
+		<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
+	{/snippet}
+	{#snippet search()}
+		<AutoSuggestBox placeholder="Search" aria-label="Search">
+			<AutoSuggestBoxOption index={0} value="Documents">Documents</AutoSuggestBoxOption>
+			<AutoSuggestBoxOption index={1} value="Pictures">Pictures</AutoSuggestBoxOption>
+		</AutoSuggestBox>
+	{/snippet}
+	{#snippet rightControls()}
+		<TitleBarRightControls />
+	{/snippet}
+</TitleBar>
+```
+
+### Search Width
+
+`searchMinWidth` and `searchMaxWidth` set how far the search shrinks and grows. Numbers are pixel values converted to rem using the current root font size, with a 16px fallback during SSR. For example, 200 becomes 10rem at a 20px root and still renders as 200px. A string is any CSS length.
+
+```svelte
+<TitleBar searchMinWidth={100} searchMaxWidth={180}>...</TitleBar>
+<TitleBar searchMinWidth="30%" searchMaxWidth="60%">...</TitleBar>
+```
+
+### Collapsed Search
+
+`searchCollapsed` manually folds the search into a button; resizing does not collapse it automatically. Pressing the button expands the search and moves the focus into the first available control. Bind it to follow the state. Leave enough room for the expanded search and the side controls, or lower `searchMinWidth`. Long app names are truncated, but navigation and window buttons still need room.
+
+```svelte
+<script>
+	let collapsed = $state(false);
+</script>
+
+<TitleBar searchMinWidth={120} bind:searchCollapsed={collapsed}>
+	{#snippet search()}
+		<AutoSuggestBox placeholder="Search" aria-label="Search" />
+	{/snippet}
+	...
+</TitleBar>
+```
+
+### Window Controls
+
+`hideMinimize`, `hideWindowToggle` and `hideClose` each take a window button out of the bar. `onMinimize`, `onWindowToggle` and `onClose` report the press.
+
+```svelte
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls hideMinimize />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls hideWindowToggle />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls hideClose />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls hideMinimize hideWindowToggle />
+	{/snippet}
+</TitleBar>
+```
+
+### Maximized
+
+While `maximized` is set, the maximize button becomes a restore button, with the icon and the label that go with it.
+
+```svelte
+<script>
+	let maximized = $state(false);
+	appWindow.isMaximized().then((value) => (maximized = value));
+</script>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls {maximized} onWindowToggle={() => (maximized = !maximized)} />
+	{/snippet}
+</TitleBar>
+```
+
+### Person Picture
+
+`personPic` takes the props of an `Avatar`, such as its `image`, drawn at 24 pixels unless you set a size. Add `onPersonPicClick` to turn the picture into a button, such as the one that opens an account.
+
+```svelte
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls personPic={{ name: 'Ada Lovelace', image: { src: 'https://placehold.co/120x120/jpeg' } }} />
+	{/snippet}
+</TitleBar>
+
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls
+			personPic={{ name: 'Grace Hopper', image: { src: 'https://placehold.co/120x120/jpeg' }, size: 28 }}
+			onPersonPicClick={() => openAccount()}
+		/>
+	{/snippet}
+</TitleBar>
+```
+
+### Custom Menu
+
+The `customMenu` snippet places your own actions before the person picture, such as a settings menu.
+
+```svelte
+<TitleBar>
+	{#snippet rightControls()}
+		<TitleBarRightControls personPic={{ name: 'Ada Lovelace', image: { src: 'https://placehold.co/120x120/jpeg' } }}>
+			{#snippet customMenu()}
+				<Menu>
+					<MenuTrigger>
+						{#snippet children({ state, menuTriggerProps })}
+							<Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label="Settings">
+								<SettingsRegular width="1rem" height="1rem" />
+							</Button>
+						{/snippet}
+					</MenuTrigger>
+					<MenuPopover>
+						<MenuList>
+							<MenuItem>Preferences</MenuItem>
+							<MenuItem>Keyboard shortcuts</MenuItem>
+						</MenuList>
+					</MenuPopover>
+				</Menu>
+			{/snippet}
+		</TitleBarRightControls>
+	{/snippet}
+</TitleBar>
+```
+
+### Labels
+
+The accessible names of the buttons default to English. Pass `backLabel`, `globalNavLabel`, `searchLabel`, `minimizeLabel`, `maximizeLabel`, `restoreLabel` and `closeLabel` to translate them.
+
+```svelte
+<TitleBar>
+	{#snippet leftControls()}
+		<TitleBarLeftControls back globalNav backLabel="Atrás" globalNavLabel="Menú de navegación" />
+	{/snippet}
+	{#snippet rightControls()}
+		<TitleBarRightControls
+			minimizeLabel="Minimizar"
+			maximizeLabel="Maximizar"
+			restoreLabel="Restaurar"
+			closeLabel="Cerrar"
+		/>
+	{/snippet}
+</TitleBar>
+```
+
+### Tab Order
+
+The buttons of the bar are in the tab order by default. Set `tabbable={false}` only when a desktop host provides an alternative keyboard route to these actions. The content you place in the snippets keeps its own tab order.
+
+```svelte
+<TitleBar tabbable>
+	{#snippet leftControls()}
+		<TitleBarLeftControls back globalNav appName="FluentUI App" />
+	{/snippet}
+	{#snippet rightControls()}
+		<TitleBarRightControls />
+	{/snippet}
+</TitleBar>
+```
+
+### Drag Region
+
+`dragRegionProps` is spread on the bar, its start and end areas, and the app identity, so a host that moves the window can tell where to grab the bar. Use `data-tauri-drag-region` for Tauri, or a pointer handler for any other host.
+
+```svelte
+<TitleBar dragRegionProps={{ 'data-tauri-drag-region': true }}>...</TitleBar>
+
+<TitleBar dragRegionProps={{ onpointerdown: (e) => e.target === e.currentTarget && appWindow.startDragging() }}>
+	...
+</TitleBar>
+```
+
+## Component Props (TitleBar)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TitleBarProps -->
+
+| Name                                             | Type                        | Default    | Description                                                                                                                                                                                                                                                                  |
+| ------------------------------------------------ | --------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                 | `HTMLElement` &#124; `null` |            | The DOM reference of the title bar element.                                                                                                                                                                                                                                  |
+| `leftControls`                                   | `Snippet`                   |            | The controls at the start of the bar: back, navigation, and the identity of the app. Render a `TitleBarLeftControls` here.                                                                                                                                                   |
+| `search`                                         | `Snippet`                   |            | The search at the center of the bar, which grows and shrinks with the window between `searchMinWidth` and `searchMaxWidth`.                                                                                                                                                  |
+| `rightControls`                                  | `Snippet`                   |            | The controls at the end of the bar: custom menus, the person picture, and the window buttons. Render a `TitleBarRightControls` here.                                                                                                                                         |
+| `tall`                                           | `boolean`                   |            | Uses the tall bar, which leaves a search room to breathe. It is on by default when `search` is provided.                                                                                                                                                                     |
+| `searchMinWidth`                                 | `number` &#124; `string`    | `200`      | The narrowest the search gets while the window shrinks. A number is in pixels, converted to rem using the current root font size, with a 16px fallback during SSR. A string is any CSS length.                                                                               |
+| `searchMaxWidth`                                 | `number` &#124; `string`    | `480`      | The widest the search gets while the window grows. A number is in pixels, converted to rem using the current root font size, with a 16px fallback during SSR. A string is any CSS length.                                                                                    |
+| `searchCollapsed` _bindable_                     | `boolean`                   | `false`    | Manually collapses the search into a button; it does not collapse automatically on resize. Pressing the button expands the search again and moves the focus into the first available control. The host must leave enough room for the expanded search and the side controls. |
+| `searchLabel`                                    | `string`                    | `'Search'` | The accessible name of the button that stands in for a collapsed search.                                                                                                                                                                                                     |
+| `tabbable`                                       | `boolean`                   | `true`     | Lets the Tab key reach the buttons of the bar. Set to false only when the desktop host provides an alternative keyboard route to these actions. The content you render in the snippets is not affected.                                                                      |
+| `dragRegionProps`                                | `HTMLAttributes`            |            | The attributes that make the bar draggable for the host that moves the window, such as `data-tauri-drag-region` for Tauri. They are spread on the bar, its start and end areas, and the app identity.                                                                        |
+| `HTMLAttributes<HTMLElement>` without `children` |                             |            |                                                                                                                                                                                                                                                                              |
+
+<!-- /props:TitleBarProps -->
+
+## Component Props (TitleBarLeftControls)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TitleBarLeftControlsProps -->
+
+| Name                                                | Type                                         | Default             | Description                                                                                                                                                                   |
+| --------------------------------------------------- | -------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` &#124; `null`               |                     | The DOM reference of the controls element.                                                                                                                                    |
+| `back`                                              | `boolean`                                    | `false`             | Shows the back button.                                                                                                                                                        |
+| `backDisabled`                                      | `boolean`                                    | `false`             | Disables the back button, for when there is nowhere to go back to.                                                                                                            |
+| `onBack`                                            | `MouseEventHandler<HTMLButtonElement>`       |                     | Called when the back button is pressed.                                                                                                                                       |
+| `backLabel`                                         | `string`                                     | `'Back'`            | The accessible name of the back button.                                                                                                                                       |
+| `globalNav`                                         | `boolean` &#124; `Snippet`                   | `false`             | Shows the global navigation button, or replaces it with the snippet you provide.                                                                                              |
+| `globalNavExpanded`                                 | `boolean`                                    | `false`             | Whether the navigation the global navigation button controls is expanded. Inside an AppWindow with a SideNav, it follows the SideNav and the button expands and collapses it. |
+| `onGlobalNav`                                       | `MouseEventHandler<HTMLButtonElement>`       |                     | Called when the global navigation button is pressed. Call `preventDefault()` to keep it from toggling the SideNav of the window.                                              |
+| `globalNavLabel`                                    | `string`                                     | `'Navigation menu'` | The accessible name of the global navigation button.                                                                                                                          |
+| `appIcon`                                           | `string` &#124; `Snippet` &#124; `Component` |                     | The icon of the app: the URL of an image, an icon component, or a snippet that draws a custom SVG.                                                                            |
+| `appIconLabel`                                      | `string`                                     | `'Application'`     | The accessible name of the app icon when appName is absent. Set it to the app's name for an icon-only identity.                                                               |
+| `appName`                                           | `string`                                     |                     | The name of the app.                                                                                                                                                          |
+| `releaseTag`                                        | `string` &#124; `Snippet`                    |                     | The release status of the app, such as `PREVIEW` or `BETA`.                                                                                                                   |
+| `children`                                          | `Snippet`                                    |                     | More content after the release tag, such as a subtitle.                                                                                                                       |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                                              |                     |                                                                                                                                                                               |
+
+<!-- /props:TitleBarLeftControlsProps -->
+
+## Component Props (TitleBarRightControls)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TitleBarRightControlsProps -->
+
+| Name                                                | Type                                   | Default      | Description                                                                                                                                                          |
+| --------------------------------------------------- | -------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` &#124; `null`         |              | The DOM reference of the controls element.                                                                                                                           |
+| `hideMinimize`                                      | `boolean`                              | `false`      | Hides the minimize button.                                                                                                                                           |
+| `hideWindowToggle`                                  | `boolean`                              | `false`      | Hides the maximize and restore button.                                                                                                                               |
+| `hideClose`                                         | `boolean`                              | `false`      | Hides the close button.                                                                                                                                              |
+| `maximized`                                         | `boolean`                              | `false`      | Whether the window is maximized, which turns the maximize button into a restore button. Inherits AppWindow's maximized state when omitted, or false when standalone. |
+| `onMinimize`                                        | `MouseEventHandler<HTMLButtonElement>` |              | Called when the minimize button is pressed.                                                                                                                          |
+| `onWindowToggle`                                    | `MouseEventHandler<HTMLButtonElement>` |              | Called when the maximize or restore button is pressed.                                                                                                               |
+| `onClose`                                           | `MouseEventHandler<HTMLButtonElement>` |              | Called when the close button is pressed.                                                                                                                             |
+| `minimizeLabel`                                     | `string`                               | `'Minimize'` | The accessible name of the minimize button.                                                                                                                          |
+| `maximizeLabel`                                     | `string`                               | `'Maximize'` | The accessible name of the maximize button.                                                                                                                          |
+| `restoreLabel`                                      | `string`                               | `'Restore'`  | The accessible name of the restore button.                                                                                                                           |
+| `closeLabel`                                        | `string`                               | `'Close'`    | The accessible name of the close button.                                                                                                                             |
+| `personPic`                                         | `AvatarProps`                          |              | The props of the `Avatar` that shows the person. Its size is 24 unless you set one.                                                                                  |
+| `onPersonPicClick`                                  | `MouseEventHandler<HTMLButtonElement>` |              | Called when the person picture is pressed, which turns it into a button.                                                                                             |
+| `customMenu`                                        | `Snippet`                              |              | The custom menus or actions placed before the person picture.                                                                                                        |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                                        |              |                                                                                                                                                                      |
+
+<!-- /props:TitleBarRightControlsProps -->

package/dist/components/title-bar/title-bar-left-controls.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { Badge, Button } from '../../index.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import ArrowLeftRegular from 'fluentui-icons-svelte/ArrowLeftRegular.svelte';
+	import NavigationRegular from 'fluentui-icons-svelte/NavigationRegular.svelte';
+	import { onDestroy } from 'svelte';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import { getTitleBarContext } from './title-bar.js';
+	import type { TitleBarLeftControlsProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		back = false,
+		backDisabled = false,
+		onBack,
+		backLabel = 'Back',
+		globalNav = false,
+		globalNavExpanded,
+		onGlobalNav,
+		globalNavLabel = 'Navigation menu',
+		appIcon,
+		appIconLabel = 'Application',
+		appName,
+		releaseTag,
+		children,
+		class: classes,
+		...attributes
+	}: TitleBarLeftControlsProps = $props();
+
+	const context = getTitleBarContext();
+
+	// Outside a TitleBar the controls are always reachable.
+	const tabindex = $derived(context && !context.config.tabbable ? -1 : undefined);
+
+	let globalNavRef = $state<HTMLButtonElement | null>(null);
+
+	// The button controls the SideNav of its window, when it has one.
+	const appWindow = getAppWindowContext();
+	const sideNav = $derived(appWindow?.state.sideNav);
+	const expanded = $derived(globalNavExpanded ?? (sideNav ? !sideNav.collapsed : false));
+	const unregister = appWindow?.methods.registerGlobalNav({
+		get ref() {
+			return globalNavRef;
+		},
+		get enabled() {
+			return !!globalNav;
+		}
+	});
+	onDestroy(() => unregister?.());
+
+	function handleGlobalNav(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		onGlobalNav?.(event);
+		if (!event.defaultPrevented) sideNav?.setCollapsed(event, !sideNav.collapsed);
+	}
+
+	const hasIdentity = $derived(!!(appIcon || appName || releaseTag || children));
+</script>
+
+<!--
+	@component
+	The controls at the start of a `TitleBar`: a back button, a global navigation button, and the identity of the app,
+	which is its icon, its name and its release tag. Inside a `TitleBar` it follows its `tabbable` setting and its drag region; it also works on its own.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TitleBar, TitleBarLeftControls } from 'fluentui-svelte';
+		import { AppsRegular } from 'fluentui-icons-svelte';
+	</script>
+
+	<TitleBar>
+		{#snippet leftControls()}
+			<TitleBarLeftControls back globalNav appIcon={AppsRegular} appName="FluentUI App" releaseTag="PREVIEW" />
+		{/snippet}
+	</TitleBar>
+	```
+-->
+<div
+	bind:this={ref}
+	class={['fs-title-bar-left-controls', classes]}
+	{...context?.config.dragRegionProps}
+	{...attributes}
+>
+	{#if back}
+		<Button
+			class="fs-title-bar-button"
+			appearance="subtle"
+			aria-label={backLabel}
+			title={backLabel}
+			{tabindex}
+			disabled={backDisabled}
+			onclick={onBack}
+		>
+			<ArrowLeftRegular aria-hidden="true" />
+		</Button>
+	{/if}
+	{#if typeof globalNav === 'function'}
+		{@render globalNav()}
+	{:else if globalNav}
+		<Button
+			bind:ref={globalNavRef}
+			class="fs-title-bar-button"
+			appearance="subtle"
+			aria-label={globalNavLabel}
+			title={globalNavLabel}
+			{tabindex}
+			aria-expanded={expanded}
+			onclick={handleGlobalNav}
+		>
+			<NavigationRegular aria-hidden="true" />
+		</Button>
+	{/if}
+	{#if hasIdentity}
+		<div class="fs-title-bar-identity" {...context?.config.dragRegionProps}>
+			{#if appIcon}
+				<span
+					class="fs-title-bar-app-icon"
+					role={appName ? undefined : 'img'}
+					aria-label={appName ? undefined : appIconLabel}
+					aria-hidden={appName ? true : undefined}
+				>
+					{#if typeof appIcon === 'string'}
+						<img src={appIcon} alt="" />
+					{:else}
+						<RenderSoC SoC={appIcon} />
+					{/if}
+				</span>
+			{/if}
+			{#if appName}
+				<span class="fs-title-bar-app-name">{appName}</span>
+			{/if}
+			{#if releaseTag}
+				<Badge class="fs-title-bar-release-tag" appearance="outline" shape="rounded" size={14}>
+					{#if typeof releaseTag === 'string'}
+						{releaseTag}
+					{:else}
+						{@render releaseTag()}
+					{/if}
+				</Badge>
+			{/if}
+			{@render children?.()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.fs-title-bar-left-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		block-size: 100%;
+		min-inline-size: 0;
+		/* The same space above as at the start of the bar, which the window controls on the right do not have. */
+		padding-block-start: 0.25rem;
+		/* The buttons are the size of the ones of a SideNav: the same padding around an icon, and the same line of text under it. */
+		& :global(.fs-title-bar-button) {
+			flex: none;
+			padding: 0.275rem 0.5rem 0.4rem;
+			font-size: var(--fs-body2-font-size);
+			/* The line of a SideNav, not the caption one of the bar. */
+			line-height: 1.4;
+			min-block-size: calc(1lh + 0.675rem);
+			background: var(--fs-subtle-fill-transparent);
+		}
+		& :global(.fs-title-bar-button svg) {
+			inline-size: 1rem;
+			block-size: 1rem;
+		}
+	}
+	.fs-title-bar-identity {
+		display: flex;
+		min-inline-size: 0;
+		align-items: center;
+		gap: 0.5rem;
+		/* Breathing room after the buttons, and from the edge of the bar when there are none. */
+		padding-inline: 0.25rem;
+		/* The wrapper alone carries the drag region, so what sits in it lets the pointer through to it. */
+		& .fs-title-bar-app-icon,
+		& .fs-title-bar-app-name,
+		& :global(.fs-title-bar-release-tag) {
+			pointer-events: none;
+		}
+	}
+	.fs-title-bar-app-icon {
+		display: inline-flex;
+		flex: none;
+		& :global(svg),
+		& img {
+			inline-size: 1rem;
+			block-size: 1rem;
+			object-fit: contain;
+		}
+	}
+	.fs-title-bar-app-name {
+		flex: 0 1 auto;
+		min-inline-size: 0;
+		max-inline-size: 16rem;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		color: var(--fs-text-primary);
+	}
+	/* Repeats the classes of the badge, since its own color rules are more specific than a single one. */
+	.fs-title-bar-identity :global(.fs-badge.fs-title-bar-release-tag.outline) {
+		flex: none;
+		padding-block: 0;
+		padding-inline: 0.1875rem;
+		font-size: 0.5625rem;
+		line-height: 1;
+		font-weight: 400;
+		color: var(--fs-text-secondary);
+		background: var(--fs-control-alt-fill-quaternary);
+		border-color: var(--fs-card-stroke-default);
+	}
+</style>