fluentui-svelte 0.6.0 → 0.7.0

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

@@ -0,0 +1,22 @@
+import type { TitleBarLeftControlsProps } from './types.ts';
+/**
+ * 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>
+ * ```
+ */
+declare const TitleBarLeftControls: import("svelte").Component<TitleBarLeftControlsProps, {}, "ref">;
+type TitleBarLeftControls = ReturnType<typeof TitleBarLeftControls>;
+export default TitleBarLeftControls;

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

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Avatar, Button } from '../../index.js';
+	import DismissRegular from 'fluentui-icons-svelte/DismissRegular.svelte';
+	import SquareMultipleRegular from 'fluentui-icons-svelte/SquareMultipleRegular.svelte';
+	import SquareRegular from 'fluentui-icons-svelte/SquareRegular.svelte';
+	import SubtractRegular from 'fluentui-icons-svelte/SubtractRegular.svelte';
+	import { getTitleBarContext } from './title-bar.js';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import type { TitleBarRightControlsProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		hideMinimize = false,
+		hideWindowToggle = false,
+		hideClose = false,
+		maximized,
+		onMinimize,
+		onWindowToggle,
+		onClose,
+		minimizeLabel = 'Minimize',
+		maximizeLabel = 'Maximize',
+		restoreLabel = 'Restore',
+		closeLabel = 'Close',
+		personPic,
+		onPersonPicClick,
+		customMenu,
+		class: classes,
+		...attributes
+	}: TitleBarRightControlsProps = $props();
+
+	const context = getTitleBarContext();
+	const appWindow = getAppWindowContext();
+	const effectiveMaximized = $derived(maximized ?? appWindow?.state.maximized ?? false);
+
+	// Outside a TitleBar the controls are always reachable.
+	const tabindex = $derived(context && !context.config.tabbable ? -1 : undefined);
+
+	const windowToggleLabel = $derived(effectiveMaximized ? restoreLabel : maximizeLabel);
+	const hasActions = $derived(!!(customMenu || personPic));
+	const hasWindowControls = $derived(!(hideMinimize && hideWindowToggle && hideClose));
+</script>
+
+<!--
+	@component
+	The controls at the end of a `TitleBar`: custom menus, the picture of the person, and the minimize, maximize and close
+	buttons of the window. The window buttons only report the press, since moving the window is up to the host of your app.
+	Inside a `TitleBar` it follows its `tabbable` setting; it also works on its own.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TitleBar, TitleBarRightControls } from 'fluentui-svelte';
+	</script>
+
+	<TitleBar>
+		{#snippet rightControls()}
+			<TitleBarRightControls
+				personPic={{ name: 'Ada Lovelace' }}
+				onMinimize={() => appWindow.minimize()}
+				onWindowToggle={() => appWindow.toggleMaximize()}
+				onClose={() => appWindow.close()}
+			/>
+		{/snippet}
+	</TitleBar>
+	```
+-->
+<div
+	{@attach (element) => {
+		if (untrack(() => ref) !== element) ref = element;
+		return () => {
+			if (ref === element) ref = null;
+		};
+	}}
+	class={['fs-title-bar-right-controls', classes]}
+	{...context?.config.dragRegionProps}
+	{...attributes}
+>
+	{#if hasActions}
+		<div class="fs-title-bar-actions" {...context?.config.dragRegionProps}>
+			{@render customMenu?.()}
+			{#if personPic}
+				{#if onPersonPicClick}
+					<Button
+						class="fs-title-bar-person-pic"
+						appearance="subtle"
+						shape="circular"
+						{tabindex}
+						onclick={onPersonPicClick}
+					>
+						<Avatar size={24} {...personPic} />
+					</Button>
+				{:else}
+					<Avatar size={24} {...personPic} />
+				{/if}
+			{/if}
+		</div>
+	{/if}
+	{#if hasWindowControls}
+		<div class="fs-title-bar-caption-buttons">
+			{#if !hideMinimize}
+				<Button
+					class="fs-title-bar-caption fs-title-bar-caption-minimize"
+					appearance="subtle"
+					shape="square"
+					aria-label={minimizeLabel}
+					title={minimizeLabel}
+					{tabindex}
+					onclick={onMinimize}
+				>
+					<SubtractRegular aria-hidden="true" />
+				</Button>
+			{/if}
+			{#if !hideWindowToggle}
+				<Button
+					class="fs-title-bar-caption fs-title-bar-caption-toggle"
+					appearance="subtle"
+					shape="square"
+					aria-label={windowToggleLabel}
+					title={windowToggleLabel}
+					{tabindex}
+					onclick={onWindowToggle}
+				>
+					{#if effectiveMaximized}
+						<SquareMultipleRegular aria-hidden="true" />
+					{:else}
+						<SquareRegular aria-hidden="true" />
+					{/if}
+				</Button>
+			{/if}
+			{#if !hideClose}
+				<Button
+					class="fs-title-bar-caption fs-title-bar-caption-close"
+					appearance="subtle"
+					shape="square"
+					aria-label={closeLabel}
+					title={closeLabel}
+					{tabindex}
+					onclick={onClose}
+				>
+					<DismissRegular aria-hidden="true" />
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.fs-title-bar-right-controls {
+		display: flex;
+		align-items: center;
+		block-size: 100%;
+	}
+	.fs-title-bar-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding-inline: 0.5rem;
+		& :global(.fs-title-bar-person-pic) {
+			padding: 0.25rem;
+			background: var(--fs-subtle-fill-transparent);
+		}
+	}
+	/* The window buttons run the full height of the bar, flush with its edge. */
+	.fs-title-bar-caption-buttons {
+		display: flex;
+		align-self: stretch;
+		& :global(.fs-title-bar-caption) {
+			flex: none;
+			inline-size: 2.875rem;
+			padding: 0;
+			background: var(--fs-subtle-fill-transparent);
+			&:focus-visible {
+				outline-offset: -0.125rem;
+			}
+		}
+		& :global(.fs-title-bar-caption svg) {
+			inline-size: 0.875rem;
+			block-size: 0.875rem;
+		}
+		& :global(.fs-title-bar-caption.fs-title-bar-caption-close:hover),
+		& :global(.fs-title-bar-caption.fs-title-bar-caption-close:active) {
+			color: var(--fs-text-on-accent-primary);
+			background: var(--fs-system-critical);
+		}
+		& :global(.fs-title-bar-caption.fs-title-bar-caption-close:active) {
+			background: color-mix(in srgb, var(--fs-system-critical) 80%, transparent);
+		}
+	}
+</style>

package/dist/components/title-bar/title-bar-right-controls.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { TitleBarRightControlsProps } from './types.ts';
+/**
+ * The controls at the end of a `TitleBar`: custom menus, the picture of the person, and the minimize, maximize and close
+ * buttons of the window. The window buttons only report the press, since moving the window is up to the host of your app.
+ * Inside a `TitleBar` it follows its `tabbable` setting; it also works on its own.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TitleBar, TitleBarRightControls } from 'fluentui-svelte';
+ * </script>
+ *
+ * <TitleBar>
+ * 	{#snippet rightControls()}
+ * 		<TitleBarRightControls
+ * 			personPic={{ name: 'Ada Lovelace' }}
+ * 			onMinimize={() => appWindow.minimize()}
+ * 			onWindowToggle={() => appWindow.toggleMaximize()}
+ * 			onClose={() => appWindow.close()}
+ * 		/>
+ * 	{/snippet}
+ * </TitleBar>
+ * ```
+ */
+declare const TitleBarRightControls: import("svelte").Component<TitleBarRightControlsProps, {}, "ref">;
+type TitleBarRightControls = ReturnType<typeof TitleBarRightControls>;
+export default TitleBarRightControls;

package/dist/components/title-bar/title-bar.d.ts

@@ -0,0 +1,3 @@
+import type { TitleBarContext } from './types.ts';
+export declare const COMPONENT_NAME = "fs-title-bar";
+export declare const getTitleBarContext: () => TitleBarContext | null, setTitleBarContext: (context: TitleBarContext) => void;

package/dist/components/title-bar/title-bar.js

@@ -0,0 +1,4 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+export const COMPONENT_NAME = `${PREFIX}-title-bar`;
+export const [getTitleBarContext, setTitleBarContext] = createFSContext();

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

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { onDestroy, tick } from 'svelte';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import { Button } from '../../index.js';
+	import { toLength } from '../../internal/index.js';
+	import SearchRegular from 'fluentui-icons-svelte/SearchRegular.svelte';
+	import { setTitleBarContext } from './title-bar.js';
+	import type { TitleBarContext, TitleBarProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		leftControls,
+		search,
+		rightControls,
+		tall,
+		searchMinWidth = 200,
+		searchMaxWidth = 480,
+		searchCollapsed = $bindable(false),
+		searchLabel = 'Search',
+		tabbable = true,
+		dragRegionProps,
+		class: classes,
+		...attributes
+	}: TitleBarProps = $props();
+
+	const FOCUSABLE = 'input, textarea, select, button, a[href], [tabindex]:not([tabindex="-1"])';
+
+	let searchRef = $state<HTMLDivElement>();
+	let searchButtonRef = $state<HTMLButtonElement | null>(null);
+
+	const hasSearch = $derived(!!search);
+	const collapsed = $derived(hasSearch && searchCollapsed);
+	const _tall = $derived(tall ?? hasSearch);
+
+	const context: TitleBarContext = {
+		config: {
+			get tabbable() {
+				return tabbable;
+			},
+			get dragRegionProps() {
+				return dragRegionProps;
+			}
+		},
+		state: null,
+		events: null,
+		methods: null
+	};
+
+	setTitleBarContext(context);
+	const appWindow = getAppWindowContext();
+	const unregister = appWindow?.methods.registerTitleBar({
+		get ref() {
+			return ref ?? null;
+		}
+	});
+	onDestroy(() => unregister?.());
+
+	function restoreSearchFocus() {
+		if (collapsed && searchRef?.contains(searchRef.ownerDocument.activeElement)) {
+			void tick().then(() => searchButtonRef?.focus());
+		}
+	}
+	$effect.pre(restoreSearchFocus);
+
+	const expandSearch = async () => {
+		searchCollapsed = false;
+		await tick();
+		for (const element of searchRef?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []) {
+			// Hidden, disabled and inert elements ignore focus; try the next candidate.
+			element.focus();
+			if (element.ownerDocument.activeElement === element) break;
+		}
+	};
+</script>
+
+<!--
+	@component
+	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 window controls at the end.
+	It paints no background of its own, since it sits on the component that renders the window. The controls it holds,
+	`TitleBarLeftControls` and `TitleBarRightControls`, follow its settings when they are rendered inside it, and work on their own.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TitleBar, TitleBarLeftControls, TitleBarRightControls } from 'fluentui-svelte';
+	</script>
+
+	<TitleBar>
+		{#snippet leftControls()}
+			<TitleBarLeftControls appName="FluentUI App" releaseTag="PREVIEW" />
+		{/snippet}
+		{#snippet rightControls()}
+			<TitleBarRightControls onClose={() => window.close()} />
+		{/snippet}
+	</TitleBar>
+	```
+-->
+<header
+	{@attach (element) => {
+		ref = element;
+		return () => {
+			ref = null;
+		};
+	}}
+	class={['fs-title-bar', _tall && 'tall', hasSearch && 'has-search', collapsed && 'collapsed', classes]}
+	style:--fs-title-bar-search-min={toLength(searchMinWidth)}
+	style:--fs-title-bar-search-max={toLength(searchMaxWidth)}
+	{...dragRegionProps}
+	{...attributes}
+>
+	<div class="fs-title-bar-left" {...dragRegionProps}>
+		{@render leftControls?.()}
+	</div>
+	{#if search}
+		{#if collapsed}
+			<div class="fs-title-bar-search">
+				<Button
+					bind:ref={searchButtonRef}
+					class="fs-title-bar-search-button"
+					appearance="subtle"
+					aria-label={searchLabel}
+					title={searchLabel}
+					tabindex={tabbable ? undefined : -1}
+					aria-expanded="false"
+					onclick={expandSearch}
+				>
+					<SearchRegular aria-hidden="true" />
+				</Button>
+			</div>
+		{:else}
+			<div
+				class="fs-title-bar-search"
+				{@attach (element) => {
+					searchRef = element;
+					return () => {
+						searchRef = undefined;
+					};
+				}}
+			>
+				{@render search()}
+			</div>
+		{/if}
+	{/if}
+	<div class="fs-title-bar-right" {...dragRegionProps}>
+		{@render rightControls?.()}
+	</div>
+</header>
+
+<style>
+	.fs-title-bar {
+		--fs-title-bar-height: 2rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		box-sizing: border-box;
+		inline-size: 100%;
+		block-size: var(--fs-title-bar-height);
+		flex-shrink: 0;
+		padding-inline-start: 0.25rem;
+		color: var(--fs-text-primary);
+		font-family: var(--fs-font-family-base);
+		font-size: var(--fs-caption-font-size);
+		line-height: var(--fs-caption-line-height);
+		user-select: none;
+		&.tall {
+			--fs-title-bar-height: 3rem;
+		}
+	}
+	.fs-title-bar-left,
+	.fs-title-bar-right {
+		display: flex;
+		flex: none;
+		align-items: center;
+		align-self: stretch;
+	}
+	/* Without a search, the right controls take the free space ahead of them to sit at the end. */
+	.fs-title-bar-right {
+		justify-content: flex-end;
+		margin-inline-start: auto;
+	}
+	.fs-title-bar-left {
+		flex: 0 1 auto;
+		min-inline-size: 0;
+	}
+	/*
+	 * The search shrinks toward its minimum and stops growing at its maximum. App names can
+	 * also shrink to preserve room for the controls. Auto margins center the search between them.
+	 */
+	.fs-title-bar-search {
+		display: flex;
+		flex: 1 1 var(--fs-title-bar-search-max);
+		align-items: center;
+		min-inline-size: var(--fs-title-bar-search-min);
+		max-inline-size: var(--fs-title-bar-search-max);
+		margin-inline: auto;
+		/* The search is stretched to the width the title bar gives it. */
+		& > :global(*) {
+			flex: 1 1 auto;
+			min-inline-size: 0;
+		}
+		& > :global(.fs-title-bar-search-button) {
+			flex: none;
+			inline-size: 2.5rem;
+			block-size: 2rem;
+			padding: 0;
+			background: var(--fs-subtle-fill-transparent);
+		}
+		& :global(.fs-title-bar-search-button svg) {
+			inline-size: 1rem;
+			block-size: 1rem;
+		}
+	}
+	.fs-title-bar.has-search .fs-title-bar-right {
+		margin-inline-start: 0;
+	}
+	/* A collapsed search is only a button, which sits beside the right controls. */
+	.fs-title-bar.collapsed .fs-title-bar-search {
+		flex: none;
+		min-inline-size: 0;
+		max-inline-size: none;
+		margin-inline: auto 0;
+	}
+</style>

package/dist/components/title-bar/title-bar.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TitleBarProps } from './types.ts';
+/**
+ * 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 window controls at the end.
+ * It paints no background of its own, since it sits on the component that renders the window. The controls it holds,
+ * `TitleBarLeftControls` and `TitleBarRightControls`, follow its settings when they are rendered inside it, and work on their own.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TitleBar, TitleBarLeftControls, TitleBarRightControls } from 'fluentui-svelte';
+ * </script>
+ *
+ * <TitleBar>
+ * 	{#snippet leftControls()}
+ * 		<TitleBarLeftControls appName="FluentUI App" releaseTag="PREVIEW" />
+ * 	{/snippet}
+ * 	{#snippet rightControls()}
+ * 		<TitleBarRightControls onClose={() => window.close()} />
+ * 	{/snippet}
+ * </TitleBar>
+ * ```
+ */
+declare const TitleBar: import("svelte").Component<TitleBarProps, {}, "ref" | "searchCollapsed">;
+type TitleBar = ReturnType<typeof TitleBar>;
+export default TitleBar;

package/dist/components/title-bar/types.d.ts

@@ -0,0 +1,165 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, MouseEventHandler, SVGAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { AvatarProps } from '../avatar/type.ts';
+export type TitleBarContext = FSContext<{
+    readonly tabbable: boolean;
+    readonly dragRegionProps?: HTMLAttributes<HTMLElement>;
+}, null, null, null>;
+/** @propsmith TitleBarProps */
+export type TitleBarProps = {
+    /** The DOM reference of the title bar element.
+     * @bindable
+     */
+    ref?: HTMLElement | null;
+    /** The controls at the start of the bar: back, navigation, and the identity of the app. Render a `TitleBarLeftControls` here.
+     * @type Snippet
+     */
+    leftControls?: Snippet;
+    /** The search at the center of the bar, which grows and shrinks with the window between `searchMinWidth` and `searchMaxWidth`.
+     * @type Snippet
+     */
+    search?: Snippet;
+    /** The controls at the end of the bar: custom menus, the person picture, and the window buttons. Render a `TitleBarRightControls` here.
+     * @type Snippet
+     */
+    rightControls?: Snippet;
+    /** Uses the tall bar, which leaves a search room to breathe. It is on by default when `search` is provided.
+     */
+    tall?: boolean;
+    /** 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.
+     * @default 200
+     */
+    searchMinWidth?: number | string;
+    /** 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.
+     * @default 480
+     */
+    searchMaxWidth?: number | string;
+    /** 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.
+     * @default false
+     * @bindable
+     */
+    searchCollapsed?: boolean;
+    /** The accessible name of the button that stands in for a collapsed search.
+     * @default 'Search'
+     */
+    searchLabel?: string;
+    /** 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.
+     * @default true
+     */
+    tabbable?: boolean;
+    /** 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.
+     * @type HTMLAttributes
+     */
+    dragRegionProps?: HTMLAttributes<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+/** @propsmith TitleBarLeftControlsProps */
+export type TitleBarLeftControlsProps = {
+    /** The DOM reference of the controls element.
+     * @bindable
+     */
+    ref?: HTMLDivElement | null;
+    /** Shows the back button.
+     * @default false
+     */
+    back?: boolean;
+    /** Disables the back button, for when there is nowhere to go back to.
+     * @default false
+     */
+    backDisabled?: boolean;
+    /** Called when the back button is pressed. */
+    onBack?: MouseEventHandler<HTMLButtonElement>;
+    /** The accessible name of the back button.
+     * @default 'Back'
+     */
+    backLabel?: string;
+    /** Shows the global navigation button, or replaces it with the snippet you provide.
+     * @type boolean | Snippet
+     * @default false
+     */
+    globalNav?: boolean | Snippet;
+    /** 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.
+     * @default false
+     */
+    globalNavExpanded?: boolean;
+    /** Called when the global navigation button is pressed. Call `preventDefault()` to keep it from toggling the SideNav of the window. */
+    onGlobalNav?: MouseEventHandler<HTMLButtonElement>;
+    /** The accessible name of the global navigation button.
+     * @default 'Navigation menu'
+     */
+    globalNavLabel?: string;
+    /** The icon of the app: the URL of an image, an icon component, or a snippet that draws a custom SVG.
+     * @type string | Snippet | Component
+     */
+    appIcon?: string | Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>>;
+    /** The accessible name of the app icon when appName is absent. Set it to the app's name for an icon-only identity.
+     * @default 'Application'
+     */
+    appIconLabel?: string;
+    /** The name of the app. */
+    appName?: string;
+    /** The release status of the app, such as `PREVIEW` or `BETA`.
+     * @type string | Snippet
+     */
+    releaseTag?: string | Snippet;
+    /** More content after the release tag, such as a subtitle.
+     * @type Snippet
+     */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/** @propsmith TitleBarRightControlsProps */
+export type TitleBarRightControlsProps = {
+    /** The DOM reference of the controls element.
+     * @bindable
+     */
+    ref?: HTMLDivElement | null;
+    /** Hides the minimize button.
+     * @default false
+     */
+    hideMinimize?: boolean;
+    /** Hides the maximize and restore button.
+     * @default false
+     */
+    hideWindowToggle?: boolean;
+    /** Hides the close button.
+     * @default false
+     */
+    hideClose?: boolean;
+    /** 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.
+     * @default false
+     */
+    maximized?: boolean;
+    /** Called when the minimize button is pressed. */
+    onMinimize?: MouseEventHandler<HTMLButtonElement>;
+    /** Called when the maximize or restore button is pressed. */
+    onWindowToggle?: MouseEventHandler<HTMLButtonElement>;
+    /** Called when the close button is pressed. */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /** The accessible name of the minimize button.
+     * @default 'Minimize'
+     */
+    minimizeLabel?: string;
+    /** The accessible name of the maximize button.
+     * @default 'Maximize'
+     */
+    maximizeLabel?: string;
+    /** The accessible name of the restore button.
+     * @default 'Restore'
+     */
+    restoreLabel?: string;
+    /** The accessible name of the close button.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /** The props of the `Avatar` that shows the person. Its size is 24 unless you set one.
+     * @type AvatarProps
+     */
+    personPic?: AvatarProps;
+    /** Called when the person picture is pressed, which turns it into a button.  */
+    onPersonPicClick?: MouseEventHandler<HTMLButtonElement>;
+    /** The custom menus or actions placed before the person picture.
+     * @type Snippet
+     */
+    customMenu?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/title-bar/types.js

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