fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/menu/menu-command-bar.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import MoreHorizontalRegular from 'fluentui-icons-svelte/MoreHorizontalRegular.svelte';
+	import { Button, Menu, MenuList, MenuPopover, MenuTrigger } from '../../index.js';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { getMenuContext, setMenuCommandBarContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import type { MenuCommandBarProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		position = 'top',
+		label = 'Commands',
+		overflowLabel = 'More options',
+		overflow,
+		showLabels = false,
+		showDividers = false,
+		children: commands,
+		class: classes,
+		onkeydown: userOnkeydown,
+		...attributes
+	}: MenuCommandBarProps = $props();
+
+	if (!getMenuContext()) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const globalFSContext = getGlobalFSContext();
+
+	setMenuCommandBarContext({
+		get showLabels() {
+			return showLabels;
+		}
+	});
+
+	// Left and Right move along the bar. Up and Down are left to the bar, which hands the focus over
+	// to the items of the menu, and the menu hands it back when its items run out towards the bar.
+	const tabspotAttributes = getTabspotAttributes({
+		mover: { axis: 'horizontal', ignoreKeys: ['ArrowUp', 'ArrowDown'] },
+		grouper: {}
+	});
+
+	const isFocusable = (element: HTMLElement) =>
+		!element.matches(':disabled, [aria-disabled="true"]') && element.checkVisibility();
+
+	/** The items of the menu the bar sits in, without the bar and without any submenu. */
+	const getMenuItems = (list: HTMLElement) =>
+		Array.from(list.querySelectorAll<HTMLElement>('[role^="menuitem"]')).filter(
+			(item) => item.closest('.fs-menu-list') === list && !ref?.contains(item) && isFocusable(item)
+		);
+
+	const focusBar = () =>
+		Array.from(ref?.children ?? [])
+			.find((child): child is HTMLElement => child instanceof HTMLElement && isFocusable(child))
+			?.focus();
+
+	const onkeydown = (e: KeyboardEvent) => {
+		// The overflow submenu owns its own keys.
+		if (e.target instanceof HTMLElement && e.target.parentElement !== ref) return;
+
+		const list = ref?.closest<HTMLElement>('.fs-menu-list');
+		const toItems = position === 'top' ? e.key === 'ArrowDown' : e.key === 'ArrowUp';
+		if (!list || !toItems) return;
+
+		const items = getMenuItems(list);
+		const item = position === 'top' ? items.at(0) : items.at(-1);
+		if (!item) return;
+
+		e.preventDefault();
+		item.focus();
+	};
+
+	$effect(() => {
+		const list = ref?.closest<HTMLElement>('.fs-menu-list');
+		const instance = globalFSContext?.state.tabspotInstance;
+		if (!list || !instance) return;
+
+		return instance.subscribe(list, (event) => {
+			const towardsBar = position === 'top' ? event.direction === 'up' : event.direction === 'down';
+			if (!event.atEdge || !towardsBar || ref?.contains(event.from)) return;
+
+			event.preventDefault();
+			focusBar();
+		});
+	});
+</script>
+
+<!--
+@component
+
+A row of square, icon-only `MenuCommandBarItem`s, the primary commands of a command bar flyout. It goes at the top or at the bottom of a `MenuList`, and sets itself apart from the items with a divider. An `overflow` snippet adds a "more" button that opens the secondary commands in a submenu.
+
+- Usage:
+  ```tsx
+    <MenuList>
+      <MenuCommandBar>
+        <MenuCommandBarItem icon={CutRegular} label="Cut" />
+        <MenuCommandBarItem icon={CopyRegular} label="Copy" />
+        {#snippet overflow()}
+          <MenuItem>Select all</MenuItem>
+        {/snippet}
+      </MenuCommandBar>
+      <MenuItem>Paste</MenuItem>
+    </MenuList>
+  ```
+-->
+<div
+	{...attributes}
+	{...tabspotAttributes}
+	bind:this={ref}
+	role="group"
+	aria-label={label}
+	class={['fs-menu-command-bar', position, { labels: showLabels, dividers: showDividers }, classes]}
+	onkeydown={(e) => {
+		userOnkeydown?.(e);
+		onkeydown(e);
+	}}
+>
+	{@render commands?.()}
+	{#if overflow}
+		<Menu>
+			<MenuTrigger>
+				{#snippet children({ state, menuTriggerProps })}
+					<Button
+						bind:ref={() => state.ref as HTMLButtonElement | null, (v) => (state.ref = v)}
+						{...menuTriggerProps}
+						class="{menuTriggerProps.class} fs-menu-command-bar-item"
+						appearance="subtle"
+						isMenuButton={false}
+						indicatorIcon={undefined}
+						aria-label={overflowLabel}
+						title={overflowLabel}
+					>
+						<MoreHorizontalRegular aria-hidden="true" />
+					</Button>
+				{/snippet}
+			</MenuTrigger>
+			<MenuPopover>
+				<MenuList>{@render overflow()}</MenuList>
+			</MenuPopover>
+		</Menu>
+	{/if}
+</div>
+
+<style>
+	.fs-menu-command-bar {
+		display: flex;
+		align-items: center;
+		/* The squares spread over the width of the menu, the overflow button closing the row. */
+		justify-content: space-between;
+		/* The commands never squeeze into the width of the menu: the menu grows to fit them all,
+		   with this much room between any two. */
+		--fs-menu-command-bar-gap: 0.5rem;
+		gap: var(--fs-menu-command-bar-gap);
+		flex: none;
+		padding: 0.25rem;
+		/* The divider runs from edge to edge of the menu, like a MenuDivider. */
+		margin-inline: -0.25rem;
+		&.top {
+			border-bottom: 1px solid var(--fs-control-stroke-default);
+			margin-block: -0.25rem 0.25rem;
+		}
+		&.bottom {
+			border-top: 1px solid var(--fs-control-stroke-default);
+			margin-block: 0.25rem -0.25rem;
+		}
+		/* Every command is a square of at least 40px, the overflow button included. */
+		& > :global(.fs-button.fs-menu-command-bar-item) {
+			flex: none;
+			/* The overflow button is a submenu trigger, which otherwise spans the whole menu. */
+			inline-size: 2.5rem;
+			min-inline-size: 2.5rem;
+			min-block-size: 2.5rem;
+			aspect-ratio: 1;
+			padding: 0;
+			justify-content: center;
+			border-radius: var(--fs-control-inner-border-radius);
+		}
+		& > :global(.fs-menu-command-bar-item svg) {
+			flex: none;
+			inline-size: 1.25rem;
+			block-size: 1.25rem;
+			fill: currentColor;
+		}
+		/* With labels, or with dividers, the commands share the width of the bar evenly, so a divider
+		   always falls halfway between two of them. The icon-only overflow button stays a square. */
+		&.labels,
+		&.dividers {
+			align-items: stretch;
+			& > :global(.fs-button.fs-menu-command-bar-item:not(.fs-submenu-trigger)) {
+				flex: 1 0 0;
+				inline-size: auto;
+				min-inline-size: max-content;
+				aspect-ratio: auto;
+			}
+			& > :global(.fs-button.fs-submenu-trigger) {
+				aspect-ratio: auto;
+			}
+		}
+		&.labels > :global(.fs-button.fs-menu-command-bar-item:not(.fs-submenu-trigger)) {
+			flex-direction: column;
+			gap: 0.25rem;
+			padding: 0.375rem 0.75rem;
+			font-size: var(--fs-caption-font-size);
+			line-height: var(--fs-caption-line-height);
+		}
+		&.dividers > :global(.fs-button.fs-menu-command-bar-item + .fs-button.fs-menu-command-bar-item::before) {
+			content: '';
+			position: absolute;
+			/* Centered in the gap between the two commands. */
+			inset-inline-start: calc(var(--fs-menu-command-bar-gap) / -2 - 0.5px);
+			inset-block: 25%;
+			inline-size: 1px;
+			background: var(--fs-divider-stroke-default);
+			pointer-events: none;
+		}
+	}
+	:global(.fs-menu-command-bar-item-label) {
+		white-space: nowrap;
+	}
+</style>

package/dist/components/menu/menu-command-bar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { MenuCommandBarProps } from './types.ts';
+/**
+ * A row of square, icon-only `MenuCommandBarItem`s, the primary commands of a command bar flyout. It goes at the top or at the bottom of a `MenuList`, and sets itself apart from the items with a divider. An `overflow` snippet adds a "more" button that opens the secondary commands in a submenu.
+ *
+ * - Usage:
+ * ```tsx
+ *   <MenuList>
+ *     <MenuCommandBar>
+ *       <MenuCommandBarItem icon={CutRegular} label="Cut" />
+ *       <MenuCommandBarItem icon={CopyRegular} label="Copy" />
+ *       {#snippet overflow()}
+ *         <MenuItem>Select all</MenuItem>
+ *       {/snippet}
+ *     </MenuCommandBar>
+ *     <MenuItem>Paste</MenuItem>
+ *   </MenuList>
+ * ```
+ */
+declare const MenuCommandBar: import("svelte").Component<MenuCommandBarProps, {}, "ref">;
+type MenuCommandBar = ReturnType<typeof MenuCommandBar>;
+export default MenuCommandBar;

package/dist/components/menu/menu-group.svelte

@@ -6,11 +6,14 @@
 	const COMPONENT_NAME = 'menu-group';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
-	let { ref = $bindable(), header, children }: MenuGroupProps = $props();
+	let { ref = $bindable(null), header, children }: MenuGroupProps = $props();
 </script>
 
-<div class="fs-menu-group" role="group" aria-labelledby="group-name-{ID}" bind:this={ref}>
-	<h3 id="group-name-{ID}" class="group-name">{header || ID}</h3>
+<div class="fs-menu-group" role="group" aria-labelledby={header ? `group-name-${ID}` : undefined} bind:this={ref}>
+	{#if header}
+		<!-- A menu holds only items, groups and separators, so the label is plain text that names the group. -->
+		<div id="group-name-{ID}" class="group-name" role="presentation">{header}</div>
+	{/if}
 	{@render children()}
 </div>
 

package/dist/components/menu/menu-item-checkbox.svelte

@@ -12,11 +12,11 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		class: classes,
 		id = ID,
@@ -24,6 +24,7 @@
 		value = id as string,
 		subText,
 		onclick,
+		onkeydown,
 		...attributes
 	}: MenuItemActionableProps = $props();
 
@@ -61,6 +62,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	as="button"
 	{disabled}
 	appearance="subtle"
@@ -69,11 +71,10 @@
 		invokeHandlers(e, [e.key !== 'Enter', !!disabled], [onkeydown, () => toggleCheckbox(e, value, name)])}
 	aria-checked={checked}
 	role="menuitemcheckbox"
-	style={`--margin-left: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {hasIcons && !Icon ? 1.5 : 0}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-checkbox {hasIcons || hasCheckmarks ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />

package/dist/components/menu/menu-item-radio.svelte

@@ -12,17 +12,18 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		class: classes,
 		id = ID,
 		name = id as string,
 		value = id as string,
 		onclick,
+		onkeydown,
 		subText,
 		...attributes
 	}: MenuItemActionableProps = $props();
@@ -61,6 +62,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{disabled}
 	appearance="subtle"
 	onclick={(e: MouseEvent) =>
@@ -73,11 +75,10 @@
 		)}
 	aria-checked={checked}
 	role="menuitemradio"
-	style={`--margin-left: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {hasIcons && !Icon ? 1.5 : 0}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-radio {hasIcons ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />

package/dist/components/menu/menu-item-switch.svelte

@@ -11,11 +11,11 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		id = ID,
 		class: classes,
@@ -23,6 +23,7 @@
 		value = id as string,
 		subText,
 		onclick,
+		onkeydown,
 		...attributes
 	}: MenuItemActionableProps = $props();
 
@@ -62,6 +63,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{disabled}
 	{id}
 	appearance="subtle"
@@ -70,11 +72,10 @@
 		invokeHandlers(e, [e.key !== 'Enter', !!disabled], [onkeydown, () => toggleCheckbox(e, value, name)])}
 	aria-checked={checked}
 	role="menuitemcheckbox"
-	style={`--margin-left: ${marginLeft}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {marginLeft}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-switch {hasIcons || hasCheckmarks ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		{#if Icon}

package/dist/components/menu/menu-item.svelte

@@ -4,14 +4,14 @@
 	import { PREFIX } from '../../internal/constants.js';
 	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
 	import type { MenuItemProps } from './types.js';
-	import type { ComponentProps } from 'svelte';
+	import type { ButtonProps } from '../button/types.js';
 
 	const FALLBACK_ID = $props.id();
 	const COMPONENT_NAME = 'menu-item';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
@@ -23,7 +23,7 @@
 		onkeydown,
 		subText,
 		...attributes
-	}: MenuItemProps & ComponentProps<typeof Button> = $props();
+	}: MenuItemProps & ButtonProps<'a' | 'button'> = $props();
 
 	const context = getMenuContext();
 
@@ -54,6 +54,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{href}
 	{disabled}
 	{id}
@@ -63,10 +64,9 @@
 	onkeydown={(e: KeyboardEvent) =>
 		invokeHandlers(e, [e.key !== 'Enter', persistOnItemActivation, disabled], [onkeydown, toggle])}
 	as={href ? 'a' : 'button'}
-	style={`--margin-left: ${marginLeft}rem;`}
+	style="{attributes.style ?? ''}; --margin-left: {marginLeft}rem;"
 	class="fs-menu-item {hasIcons || hasCheckmarks ? 'align' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}>
 		{#if Icon}

package/dist/components/menu/menu-item.svelte.d.ts

@@ -1,7 +1,6 @@
-import { Button } from '../../index.js';
 import type { MenuItemProps } from './types.ts';
-import type { ComponentProps } from 'svelte';
-type $$ComponentProps = MenuItemProps & ComponentProps<typeof Button>;
+import type { ButtonProps } from '../button/types.ts';
+type $$ComponentProps = MenuItemProps & ButtonProps<'a' | 'button'>;
 /**
  * - Usage:
  * ```tsx

package/dist/components/menu/menu-list.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { getTabspotAttributes } from 'tabspot';
+	import { getTabspotAttributes, setTabspotAttributes, unsetTabspotSection } from 'tabspot';
+	import type { Attachment } from 'svelte/attachments';
 	import { getMenuContext } from './menu.svelte.js';
 
 	let { children } = $props();
@@ -7,6 +8,13 @@
 	const context = getMenuContext();
 
 	let isSubMenu = $derived(context?.config.isSubMenu);
+
+	// The list mounts when the menu opens, after Tabspot has scanned the page, so the root menu
+	// registers itself to get arrow key navigation. A submenu is a grouper inside it instead.
+	const registerRoot: Attachment<HTMLElement> = (element) => {
+		setTabspotAttributes({ element, config: { root: {} }, merge: true });
+		return () => unsetTabspotSection(element, 'root');
+	};
 </script>
 
 <div
@@ -21,6 +29,7 @@
 				}
 			: undefined
 	})}
+	{@attach isSubMenu ? undefined : registerRoot}
 >
 	{@render children()}
 </div>

package/dist/components/menu/menu-popover.svelte

@@ -10,7 +10,7 @@
 
 	let {
 		ref: _ref,
-		open: _open = $bindable(),
+		open: _open = $bindable(null),
 		keepMounted = false,
 		placement,
 		positionConfig: floatingPosition = {
@@ -45,11 +45,15 @@
 
 	let { state: _state } = context;
 
-	// The `placement` prop wins over the one coming from the config
+	// The `placement` prop wins over the one coming from the config. The strategy is always set, since the CSS position follows it.
 	let config = $derived.by(() => {
 		const base = positionConfig ?? floatingPosition;
 
-		return { ...base, placement: placement ?? base.placement ?? (isSubMenu ? 'right-start' : 'bottom-start') };
+		return {
+			...base,
+			strategy: base.strategy ?? 'fixed',
+			placement: placement ?? base.placement ?? (isSubMenu ? 'right-start' : 'bottom-start')
+		};
 	});
 
 	let boundingElement = reactiveBoundingRect();
@@ -93,7 +97,7 @@
 		hidden={!opened}
 		onmouseleave={openOnHover ? (e: MouseEvent) => debounced(e) : undefined}
 		{@attach opened && ref ? floating(ref, config) : undefined}
-		style={`--position=${isSubMenu ? 'absolute' : 'fixed'} --min-width=${isRefAnElement && !isSubMenu ? `${boundingElement.rect.width}px` : 'max-content'}`}
+		style={`--position: ${config.strategy}; --min-width: ${isRefAnElement && !isSubMenu ? `${boundingElement.rect.width}px` : 'max-content'};`}
 		in:flyToOffset={opened && isRefAnElement
 			? {
 					...getIntroTransition({ config, anchor: boundingElement.rect, element, ref, isSubMenu }),
@@ -119,7 +123,7 @@
 		z-index: 110;
 		& :global(.fs-flyout),
 		& :global(.fs-flyout::before) {
-			border-radius: var(--fs-control-border-radius);
+			border-radius: var(--fs-control-overlay-border-radius);
 		}
 		& :global(.fs-flyout) {
 			padding: 0;

package/dist/components/menu/menu-trigger.svelte

@@ -55,7 +55,8 @@
 				return;
 			}
 
-			if (target === _state.ref) {
+			// A click on the icon inside the trigger is a click on the trigger.
+			if (target === _state.ref || (_state.ref instanceof Node && _state.ref.contains(target))) {
 				_state.locked = !_state.locked;
 				toggle(e);
 				// Focus the first button in the popover when opening

package/dist/components/menu/menu.svelte.js

@@ -75,3 +75,4 @@ export const getIntroTransition = ({ config, anchor, element, ref, isSubMenu = f
         css: `top: ${top}px; left: ${left}px;`
     };
 };
+export const [getMenuCommandBarContext, setMenuCommandBarContext] = createFSContext();

package/dist/components/menu/types.d.ts

@@ -1,8 +1,8 @@
 import type { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
 import type { FSContext } from '../../internal/index.js';
-import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { NoUndefinedField, Shapes } from '../../types/index.js';
-import type { Button } from '../../index.ts';
+import type { AriaAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { ButtonProps } from '../button/types.ts';
 export type MenuContext = FSContext<{
     id: string;
@@ -62,11 +62,11 @@ export type MenuProps = {
 /** @propsmith MenuPopoverProps */
 export type MenuPopoverProps = {
     /** The element used to position the popover. */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
     /** Controls the open state of the popover.
      * @bindable
      */
-    open?: boolean;
+    open?: boolean | null;
     /** Keeps the popover mounted in the DOM while it is closed.
      * @default false
      */
@@ -106,7 +106,7 @@ export type MenuGroupProps = {
     /** The DOM reference of the group element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The label of the group. */
     header?: string;
     /** The items of the group. */
@@ -136,7 +136,7 @@ export type MenuItemActionableProps = {
     /** Whether the item is checked.
      * @bindable
      */
-    checked?: boolean;
+    checked?: boolean | null;
     /** The value reported to the menu when the item is checked. Falls back to the id of the item.
      * @default id
      */
@@ -145,4 +145,59 @@ export type MenuItemActionableProps = {
      * @default id
      */
     name?: string;
-} & Omit<MenuItemProps, 'href'> & ComponentProps<typeof Button<'div'>>;
+} & Omit<MenuItemProps, 'href'> & ButtonProps<'button'>;
+/** @propsmith MenuCommandBarProps */
+export type MenuCommandBarProps = {
+    /** The DOM reference of the command bar element.
+     * @bindable
+     */
+    ref?: HTMLDivElement | null;
+    /** Where the bar sits in the menu. A bar at the top has its divider below it, and one at the bottom has it above.
+     * @type 'top' | 'bottom'
+     * @default 'top'
+     */
+    position?: 'top' | 'bottom';
+    /** The accessible name of the group of commands.
+     * @default 'Commands'
+     */
+    label?: string;
+    /** The accessible name of the button that opens the overflow.
+     * @default 'More options'
+     */
+    overflowLabel?: string;
+    /** The secondary commands. When present, a "more" button at the end of the bar opens them in a submenu. */
+    overflow?: Snippet;
+    /** Shows the label of every command below its icon. Without labels, every command is a square.
+     * @default false
+     */
+    showLabels?: boolean;
+    /** Draws a divider between every two commands.
+     * @default false
+     */
+    showDividers?: boolean;
+    /** The primary commands, as `MenuCommandBarItem`s. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+/** @propsmith MenuCommandBarItemProps */
+export type MenuCommandBarItemProps = {
+    /** The DOM reference of the button element.
+     * @bindable
+     */
+    ref?: HTMLButtonElement | null;
+    /** The icon of the command.
+     * @type Snippet | Component
+     */
+    icon: Snippet<[{
+        class: string;
+    }]> | Component<{
+        class: string;
+    }>;
+    /** The name of the command. Without visible labels it is the accessible name of the button and shows as its tooltip; with them it shows below the icon. */
+    label: string;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** Called when the command is activated. The menu closes afterwards, unless it persists on item activation.
+     * @type (e: MouseEvent) => void
+     */
+    onclick?: (e: MouseEvent) => void;
+} & Omit<AriaAttributes, 'aria-label'> & Pick<HTMLButtonAttributes, 'id' | 'class' | 'onkeydown' | 'onfocus' | 'onblur'>;

package/dist/components/number-box/docs/llms.md

@@ -9,7 +9,7 @@ The NumberBox component allows users to input numeric values with specified cons
 	import { NumberBox } from 'fluentui-svelte';
 </script>
 
-<NumberBox value={0} min={0} max={100} step={1} />
+<NumberBox aria-label="Quantity" value={0} min={0} max={100} step={1} />
 ```
 
 ## Component API
@@ -23,10 +23,12 @@ A brief explanation of the props that really need explaining. You can see the re
 The variant prop determines the visual style of the NumberBox.
 
 ```svelte
-<NumberBox hideActionButtons min={0} max={100} step={1} />
-<NumberBox hideActionButtons min={0} max={100} step={1} variant="compact" />
+<NumberBox aria-label="Quantity" hideActionButtons min={0} max={100} step={1} />
+<NumberBox aria-label="Quantity" hideActionButtons min={0} max={100} step={1} variant="compact" />
 ```
 
+HTML attributes, including class, id and ARIA attributes, apply to the control element. Bind ref to access that control. Use wrapperAttributes and wrapperRef for the outer container.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
@@ -34,7 +36,7 @@ The variant prop determines the visual style of the NumberBox.
 
 | Name                          | Type                          | Default    | Description                                           |
 | ----------------------------- | ----------------------------- | ---------- | ----------------------------------------------------- |
-| `value` _bindable_            | `number`                      |            | The current value of the input.                       |
+| `value` _bindable_            | `number` &#124; `null`        |            | The current value of the input.                       |
 | `variant`                     | `'inline'` &#124; `'compact'` | `'inline'` | How the increment and decrement buttons are laid out. |
 | `TextBoxProps` without `type` |                               |            |                                                       |