fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/side-nav/side-nav-item.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" generics="T extends 'li' | 'a' | 'button' | 'div' = 'a'">
+	import ListViewItem from '../list-view/list-view-item.svelte';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getSideNavContext } from './side-nav.js';
+	import type { SideNavItemProps } from './types.js';
+	import type { ListViewItemProps } from '../list-view/types.js';
+
+	let {
+		as = 'a' as T,
+		ref = $bindable(null),
+		label,
+		icon,
+		children,
+		onAction,
+		...attributes
+	}: SideNavItemProps<T> = $props();
+
+	// Outside a SideNav the item is a plain, expanded one: it has no rail to fit and no panel to close.
+	const context = getSideNavContext();
+	const Item = ListViewItem<T>;
+	const compact = $derived(context?.state.compact ?? false);
+
+	function handleAction(event: MouseEvent, value: string) {
+		onAction?.(event, value);
+		context?.methods.activate(event);
+	}
+</script>
+
+<Item
+	{as}
+	bind:ref
+	aria-label={label}
+	title={compact ? label : undefined}
+	{...attributes as unknown as ListViewItemProps<T>}
+	onAction={as === 'a' || as === 'button' || onAction ? handleAction : undefined}
+>
+	{#if icon}
+		<span class="fs-side-nav-item-icon" aria-hidden="true">
+			<RenderSoC SoC={icon} />
+		</span>
+	{:else if compact}
+		<span class="fs-side-nav-item-icon" aria-hidden="true">
+			{label.slice(0, 1)}
+		</span>
+	{/if}
+	<span class="fs-side-nav-item-label" hidden={compact}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{label}
+		{/if}
+	</span>
+</Item>
+
+<style>
+	.fs-side-nav-item-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		inline-size: 1rem;
+		/* As tall as a line of text, so an item is as tall with its label as without it. */
+		block-size: 1lh;
+		& :global(svg) {
+			inline-size: 1rem;
+			block-size: 1rem;
+		}
+	}
+	.fs-side-nav-item-label {
+		min-inline-size: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/dist/components/side-nav/side-nav-item.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SideNavItemProps } from './types.ts';
+declare function $$render<T extends 'li' | 'a' | 'button' | 'div' = 'a'>(): {
+    props: SideNavItemProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends 'li' | 'a' | 'button' | 'div' = 'a'> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 'li' | 'a' | 'button' | 'div' = 'a'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends 'li' | 'a' | 'button' | 'div' = 'a'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SideNavItem: $$IsomorphicComponent;
+type SideNavItem<T extends 'li' | 'a' | 'button' | 'div' = 'a'> = InstanceType<typeof SideNavItem<T>>;
+export default SideNavItem;

package/dist/components/side-nav/side-nav-list.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ListView from '../list-view/list-view.svelte';
+	import { getSideNavContext } from './side-nav.js';
+
+	let { children }: { children?: Snippet } = $props();
+
+	const context = getSideNavContext();
+
+	// Escape belongs to the enclosing panel: ListView keeps its other navigation keys.
+	const MANAGED_KEYS = { Home: true, End: true, PageUp: true, PageDown: true };
+
+	// Outside a SideNav, a branch keeps the selection of its own list.
+	let ownSelectedItems = $state<string[]>([]);
+</script>
+
+<ListView
+	role="list"
+	selectionMode="none"
+	navigationMode="items"
+	manageSpecialKeys={MANAGED_KEYS}
+	{...context?.config.listViewProps}
+	bind:selectedItems={
+		() => context?.state.selectedItems ?? ownSelectedItems,
+		(value) => {
+			if (context) context.state.selectedItems = value;
+			else ownSelectedItems = value;
+		}
+	}
+>
+	{@render children?.()}
+</ListView>

package/dist/components/side-nav/side-nav-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const SideNavList: import("svelte").Component<$$ComponentProps, {}, "">;
+type SideNavList = ReturnType<typeof SideNavList>;
+export default SideNavList;

package/dist/components/side-nav/side-nav.d.ts

@@ -0,0 +1,2 @@
+import type { SideNavContext } from './types.ts';
+export declare const getSideNavContext: () => SideNavContext | null, setSideNavContext: (context: SideNavContext) => void;

package/dist/components/side-nav/side-nav.js

@@ -0,0 +1,2 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getSideNavContext, setSideNavContext] = createFSContext();

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

@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { onClickOutside } from 'runed';
+	import NavigationRegular from 'fluentui-icons-svelte/NavigationRegular.svelte';
+	import Button from '../button/button.svelte';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import { invokeHandlers, RenderSoC, toLength } from '../../internal/index.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import SideNavList from './side-nav-list.svelte';
+	import { setSideNavContext } from './side-nav.js';
+	import type { SideNavContent, SideNavContext, SideNavProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'side-nav';
+	const BODY_ID = `${PREFIX}-${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(null),
+		label = 'Main navigation',
+		collapsed = $bindable(false),
+		position = 'left',
+		showToggle,
+		floating = false,
+		width = 200,
+		expandLabel = 'Expand navigation',
+		collapseLabel = 'Collapse navigation',
+		closeOnSelect = true,
+		onCollapsedChange,
+		selectedItems = $bindable([]),
+		listViewProps,
+		header,
+		topContent,
+		footerContent,
+		footer,
+		children,
+		onkeydown,
+		onfocusout,
+		class: classes,
+		...attributes
+	}: SideNavProps = $props();
+
+	let toggleRef = $state<HTMLButtonElement | null>(null);
+
+	/** Docked, a collapsed navigation is a rail of icons. Floating, it is only the toggle. */
+	const compact = $derived(collapsed && !floating);
+	const toggleLabel = $derived(collapsed ? expandLabel : collapseLabel);
+
+	function setCollapsed(event: Event, value: boolean) {
+		if (collapsed === value) return;
+		collapsed = value;
+		onCollapsedChange?.(event, value);
+	}
+
+	const context: SideNavContext = {
+		config: {
+			get floating() {
+				return floating;
+			},
+			get listViewProps() {
+				return listViewProps;
+			}
+		},
+		state: {
+			get collapsed() {
+				return collapsed;
+			},
+			get compact() {
+				return compact;
+			},
+			get selectedItems() {
+				return selectedItems;
+			},
+			set selectedItems(value) {
+				selectedItems = value;
+			}
+		},
+		events: null,
+		methods: {
+			setCollapsed,
+			activate: (event) => {
+				if (floating && closeOnSelect && !event.defaultPrevented) setCollapsed(event, true);
+			}
+		}
+	};
+	setSideNavContext(context);
+
+	const appWindow = getAppWindowContext();
+	// The global navigation button of the title bar controls the navigation, and takes the place of its own toggle.
+	const globalNav = $derived(appWindow?.state.globalNav);
+	const toggleVisible = $derived(showToggle ?? !globalNav?.enabled);
+	// Without a toggle, the navigation itself is where the focus lands when a floating one closes: it takes focus, but is not a tab stop.
+	const focusTarget = $derived(toggleVisible ? {} : { tabindex: -1 });
+
+	const unregister = appWindow?.methods.registerSideNav({
+		get ref() {
+			return ref;
+		},
+		get collapsed() {
+			return collapsed;
+		},
+		get floating() {
+			return floating;
+		},
+		get position() {
+			return position;
+		},
+		setCollapsed
+	});
+	onDestroy(() => unregister?.());
+
+	// The body of a floating navigation hides when it closes, so the focus moves to the button that opens it first.
+	$effect.pre(() => {
+		if (floating && collapsed && ref?.contains(ref.ownerDocument.activeElement))
+			(toggleRef ?? globalNav?.ref ?? ref)?.focus();
+	});
+
+	/** The button of the title bar that opens and closes the navigation is not outside it: its own click toggles it. */
+	const isGlobalNav = (target: EventTarget | null) => target instanceof Node && !!globalNav?.ref?.contains(target);
+
+	// A floating navigation is not modal: it closes with an outside press, with Escape and when the focus leaves it.
+	onClickOutside(
+		() => ref,
+		(event) => {
+			if (floating && !collapsed && !isGlobalNav(event.target)) setCollapsed(event, true);
+		}
+	);
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Escape belongs to a nested disclosure or menu first: they cancel it when they handle it.
+		if (event.defaultPrevented || !floating || collapsed || event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		setCollapsed(event, true);
+	}
+
+	function handleFocusout(event: FocusEvent) {
+		const next = event.relatedTarget;
+		if (floating && !collapsed && next instanceof Node && !ref?.contains(next) && !isGlobalNav(next))
+			setCollapsed(event, true);
+	}
+</script>
+
+{#snippet region(value?: SideNavContent)}
+	{#if value && !(compact && typeof value === 'string')}
+		<div class="fs-side-nav-content">
+			{#if typeof value === 'string'}
+				{value}
+			{:else}
+				<RenderSoC SoC={value} args={{ collapsed, floating }} />
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<!--
+	@component
+	Collapsible app navigation. Place it directly inside AppWindow next to AppSurface.
+	AppWindow handles docked layout and the floating overlay below its title bar.
+	Use SideNavItem for links and SideNavBranch for nested navigation.
+
+	- Usage:
+	```tsx
+	<script>
+		import { AppSurface, AppWindow, SideNav, SideNavItem } from 'fluentui-svelte';
+		import { HomeRegular } from 'fluentui-icons-svelte';
+	</script>
+
+	<AppWindow width={480} height={320}>
+		<SideNav header="My app">
+			<SideNavItem href="/" label="Home" icon={HomeRegular} />
+		</SideNav>
+		<AppSurface>The content of the app.</AppSurface>
+	</AppWindow>
+	```
+-->
+<nav
+	aria-label={label}
+	{...focusTarget}
+	{...attributes}
+	bind:this={ref}
+	class={[
+		'fs-side-nav',
+		{ collapsed, floating, compact, 'no-toggle': !toggleVisible, 'position-right': position === 'right' },
+		classes
+	]}
+	style:--fs-side-nav-width={toLength(width)}
+	onkeydown={(e) => invokeHandlers(e, [], [onkeydown, handleKeydown])}
+	onfocusout={(e) => invokeHandlers(e, [], [onfocusout, handleFocusout])}
+>
+	{#if toggleVisible || (header && !collapsed)}
+		<div class={['fs-side-nav-header', { 'no-toggle': !toggleVisible }]}>
+			{#if toggleVisible}
+				<Button
+					bind:ref={toggleRef}
+					type="button"
+					appearance="subtle"
+					class="fs-side-nav-toggle"
+					aria-label={toggleLabel}
+					title={toggleLabel}
+					aria-controls={BODY_ID}
+					aria-expanded={!collapsed}
+					onclick={(event) => setCollapsed(event, !collapsed)}
+				>
+					<NavigationRegular aria-hidden="true" />
+				</Button>
+			{/if}
+			{#if header && !collapsed}
+				<span class="fs-side-nav-heading">{header}</span>
+			{/if}
+		</div>
+	{/if}
+	<div id={BODY_ID} class="fs-side-nav-body" hidden={floating && collapsed}>
+		{@render region(topContent)}
+
+		<div class="fs-side-nav-items">
+			<SideNavList>
+				{@render children?.()}
+			</SideNavList>
+		</div>
+
+		{#if footerContent || footer}
+			<div class="fs-side-nav-footer">
+				{@render region(footerContent)}
+
+				{#if footer}
+					<SideNavList>
+						{@render footer()}
+					</SideNavList>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</nav>
+
+<style>
+	.fs-side-nav {
+		box-sizing: border-box;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: none;
+		inline-size: var(--fs-side-nav-width);
+		max-inline-size: 100%;
+		min-block-size: 0;
+		color: var(--fs-text-primary);
+		font-family: var(--fs-font-family-base);
+		font-size: var(--fs-body-font-size);
+		/* The line of its items and toggle, which the buttons of a TitleBar share. */
+		line-height: 1.4;
+		padding-top: 0.25rem;
+		/* Without its own toggle the list sits right under the title bar, which already has its button. */
+		&.no-toggle:not(.floating) {
+			padding-top: 0;
+		}
+		&.collapsed {
+			/* The rail is one item wide: its icon (1rem) and the padding of the item (0.5rem) and of the list (0.25rem). */
+			inline-size: 2.5rem;
+			& .fs-side-nav-content {
+				padding-bottom: 0;
+			}
+		}
+		&.floating {
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 0;
+			z-index: 3;
+			&.position-right {
+				inset-inline: auto 0;
+			}
+			&:not(.collapsed) {
+				background: var(--fs-acrylic-background-default);
+				border: 1px solid var(--fs-control-surface-stroke-flyout);
+				border-radius: var(--fs-control-overlay-border-radius);
+				box-shadow: var(--fs-shadow-flyout);
+			}
+			&.collapsed {
+				/* Only the toggle is left, and the content below it stays reachable. */
+				pointer-events: none;
+			}
+		}
+		/* The icons keep their place in the rail and out of it, aligned with the toggle. */
+		& :global(.fs-list-view-item),
+		& :global(.fs-list-view-item-branch-trigger) {
+			padding-inline: 0.5rem;
+			margin: 0.2rem 0;
+		}
+		&.compact {
+			& :global(.fs-list-view-item-branch-region),
+			& :global(.branch-chevron) {
+				display: none;
+			}
+			/* The label still names the branch for assistive technology. */
+			& :global(.fs-list-view-branch-label) {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				clip-path: inset(50%);
+				overflow: hidden;
+			}
+			& .fs-side-nav-content {
+				padding-inline: 0.25rem;
+			}
+		}
+	}
+	.fs-side-nav-header {
+		display: flex;
+		align-items: center;
+		flex: none;
+		gap: 0.5rem;
+		padding-inline: 0.25rem;
+		box-sizing: border-box;
+		&.no-toggle {
+			padding-inline: 0.75rem;
+		}
+		/* The toggle is the size of an item: the same padding around an icon, and the same line of text under it. */
+		& :global(.fs-side-nav-toggle) {
+			flex: none;
+			padding: 0.275rem 0.5rem 0.4rem;
+			font-size: var(--fs-body2-font-size);
+			line-height: inherit;
+			min-block-size: calc(1lh + 0.675rem);
+			pointer-events: auto;
+			& :global(svg) {
+				inline-size: 1rem;
+				block-size: 1rem;
+			}
+		}
+	}
+	.fs-side-nav-heading {
+		min-inline-size: 0;
+		font-weight: 600;
+	}
+	.fs-side-nav-body {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-block-size: 0;
+		&[hidden] {
+			display: none;
+		}
+	}
+	.fs-side-nav-content {
+		padding: 0.125rem 0.25rem 0.125rem 0.75rem;
+	}
+	.fs-side-nav-items {
+		flex: 1;
+		min-block-size: 0;
+		overflow: auto;
+		padding-inline: 0.25rem;
+	}
+	.fs-side-nav-footer {
+		flex: none;
+		padding: 0.125rem 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { SideNavProps } from './types.ts';
+/**
+ * Collapsible app navigation. Place it directly inside AppWindow next to AppSurface.
+ * AppWindow handles docked layout and the floating overlay below its title bar.
+ * Use SideNavItem for links and SideNavBranch for nested navigation.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { AppSurface, AppWindow, SideNav, SideNavItem } from 'fluentui-svelte';
+ * 	import { HomeRegular } from 'fluentui-icons-svelte';
+ * </script>
+ *
+ * <AppWindow width={480} height={320}>
+ * 	<SideNav header="My app">
+ * 		<SideNavItem href="/" label="Home" icon={HomeRegular} />
+ * 	</SideNav>
+ * 	<AppSurface>The content of the app.</AppSurface>
+ * </AppWindow>
+ * ```
+ */
+declare const SideNav: import("svelte").Component<SideNavProps, {}, "ref" | "selectedItems" | "collapsed">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;

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

@@ -0,0 +1,149 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { PolymorphicProps } from '../../types/index.js';
+import type { ListViewItemBranchProps, ListViewItemDOM, ListViewItemProps, ListViewProps } from '../list-view/types.ts';
+export type SideNavRenderState = {
+    collapsed: boolean;
+    floating: boolean;
+};
+export type SideNavContent = string | Snippet<[SideNavRenderState]> | Component<SideNavRenderState>;
+export type SideNavListViewProps = Omit<ListViewProps<'ul'>, 'children' | 'ref' | 'selectedItems'>;
+/** @propsmith SideNavProps */
+export type SideNavProps = {
+    /** The DOM reference of the navigation landmark.
+     * @bindable
+     */
+    ref?: HTMLElement | null;
+    /** The accessible name of the navigation landmark.
+     * @default 'Main navigation'
+     */
+    label?: string;
+    /** Shows an icon rail when docked, or only the toggle when floating.
+     * @default false
+     * @bindable
+     */
+    collapsed?: boolean;
+    /** The side of the window the navigation is on. It mirrors in right-to-left layouts, and AppSurface rounds the corners that face it.
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /** Whether the navigation shows its own hamburger toggle. By default it hides it when the title bar of its window has a global navigation button, which then controls the navigation. Set it to true to keep both, or to false to control the navigation yourself.
+     * @default Automatic
+     */
+    showToggle?: boolean;
+    /** Overlays the content of a positioned parent instead of taking layout space. The overlay is non-modal.
+     * @default false
+     */
+    floating?: boolean;
+    /** The expanded width. Numbers are pixels converted to rem; strings are CSS lengths.
+     * @default 200
+     */
+    width?: number | string;
+    /** The accessible label of the toggle while collapsed.
+     * @default 'Expand navigation'
+     */
+    expandLabel?: string;
+    /** The accessible label of the toggle while expanded.
+     * @default 'Collapse navigation'
+     */
+    collapseLabel?: string;
+    /** Closes a floating panel after activating a SideNavItem.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Called when the user expands or collapses the navigation. */
+    onCollapsedChange?: (event: Event, collapsed: boolean) => void;
+    /** The selection shared by every list in the navigation. Selection is off by default.
+     * @bindable
+     */
+    selectedItems?: string[];
+    /** Overrides the defaults of every list in the navigation, the main one, the footer and the ones inside a SideNavBranch: native list semantics, no selection and one tab stop per item.
+     * @type SideNavListViewProps
+     */
+    listViewProps?: SideNavListViewProps;
+    /** The text heading beside the hamburger button. Hidden in the compact rail. */
+    header?: string;
+    /** Custom content between the hamburger section and the list. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
+     * @type string | Snippet | Component
+     */
+    topContent?: SideNavContent;
+    /** Custom content after the scrolling list and before the pinned footer. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
+     * @type string | Snippet | Component
+     */
+    footerContent?: SideNavContent;
+    /** Footer list items pinned to the bottom, outside the main list's scroll area. */
+    footer?: Snippet;
+    /** Main navigation items. Use SideNavItem and SideNavBranch. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+/** @propsmith SideNavItemProps */
+export type SideNavItemProps<T extends 'li' | 'a' | 'button' | 'div' = 'a'> = {
+    /** The HTML tag. Links are the default; use button for actions and li or div for custom controls.
+     * @type 'li' | 'a' | 'button' | 'div'
+     * @default 'a'
+     */
+    as?: T;
+    /** The DOM reference of the item.
+     * @type HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
+     * @bindable
+     */
+    ref?: ListViewItemDOM[T] | null;
+    /** The accessible label, also used as visible content when children are absent. */
+    label: string;
+    /** The decorative icon shown in both expanded and collapsed modes.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Optional item markup, following ListViewItem. The label is rendered when children are absent. */
+    children?: Snippet;
+} & Pick<ListViewItemProps, 'shape' | 'value' | 'active' | 'role' | 'disabled' | 'checkmark' | 'onAction' | 'onfocus'> & PolymorphicProps<T, 'children' | 'ref' | 'onfocus'>;
+/** @propsmith SideNavBranchProps */
+export type SideNavBranchProps = {
+    /** The accessible label of the disclosure button. In the compact rail, its initial stands in when there is no icon. */
+    label: string;
+    /** The decorative icon before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Whether the nested items are visible. Branches only expand or collapse and are never selectable. The compact rail reports a branch as collapsed, and opens the navigation when one is pressed.
+     * @default false
+     * @bindable
+     */
+    expanded?: boolean;
+    /** Called when a user expands or collapses the branch. */
+    onExpandedChange?: (e: Event, expanded: boolean) => void;
+    /** Disables the disclosure button.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The DOM reference of the native disclosure button. Additional HTML attributes, including class and id, also target this button.
+     * @type HTMLButtonElement
+     * @bindable
+     */
+    ref?: HTMLButtonElement | null;
+    /** The DOM reference of the wrapper element, the list item that holds the button and the nested list.
+     * @type HTMLLIElement | HTMLDivElement
+     * @bindable
+     */
+    wrapperRef?: HTMLLIElement | HTMLDivElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLLIElement | HTMLDivElement>;
+    /** The disclosure button shape. Inherited from the list by default. */
+    shape?: ListViewItemBranchProps['shape'];
+    /** The nested SideNavItem and SideNavBranch content. */
+    children?: Snippet;
+} & Omit<HTMLButtonAttributes, 'children' | 'role' | 'type' | 'value' | 'aria-expanded' | 'aria-controls'>;
+export type SideNavContext = FSContext<{
+    readonly floating: boolean;
+    readonly listViewProps: SideNavListViewProps | undefined;
+}, {
+    readonly collapsed: boolean;
+    readonly compact: boolean;
+    selectedItems: string[];
+}, null, {
+    setCollapsed: (event: Event, collapsed: boolean) => void;
+    activate: (event: Event) => void;
+}>;

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

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