fluentui-svelte 0.6.0 → 0.7.0

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` |                               |            |                                                       |
 

package/dist/components/number-box/number-box.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
-	import { on } from 'svelte/events';
+	import { claimLabel } from '../label/label-context.js';
 	import { floating } from '../../internal/index.js';
 	import { offset, shift } from '@floating-ui/dom';
 	import { Flyout, TextBoxButton, TextBox } from '../../index.js';
 	import { ChevronUpFilled, ChevronDownFilled, ChevronUpDownFilled } from 'fluentui-icons-svelte';
 	import type { NumberBoxProps } from './types.js';
+	import { onClickOutside } from 'runed';
 
 	const ID = $props.id();
+	/** Half of the width of the button that opens the flyout of the compact variant. */
+	const BUTTON_HALF_WIDTH = 16;
+
+	const label = claimLabel(() => id);
 
 	let {
-		id = 'input-' + ID,
+		id = label?.fieldId ?? 'input-' + ID,
 		name = id,
-		value = $bindable(),
+		value = $bindable(null),
 		variant = 'inline',
-		ref = $bindable(),
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
 		placeholder = '',
-		class: classes,
 		...attributes
 	}: NumberBoxProps = $props();
 
 	let openFlyout = $state(false);
-	let cleanEvent: () => void;
-
-	let handler = (e: Event) => {
-		if (!(e.target as HTMLElement).closest(`.${id}`)) {
-			openFlyout = false;
-			cleanEvent();
-		}
-	};
 
-	const compactToggler = () => {
-		openFlyout = true;
-		cleanEvent = on(document, 'click', handler);
-	};
+	onClickOutside(
+		() => wrapperRef,
+		() => (openFlyout = false)
+	);
 </script>
 
 <!-- @component
@@ -46,7 +44,18 @@
     <NumberBox />
     ```
 -->
-<TextBox class={['fs-number-box', classes]} type="number" {id} {name} {placeholder} bind:value bind:ref {...attributes}>
+<TextBox
+	{...attributes}
+	bind:wrapperRef
+	wrapperAttributes={{ ...wrapperAttributes, class: ['fs-number-box', wrapperAttributes?.class] }}
+	type="number"
+	{id}
+	{name}
+	{placeholder}
+	bind:value
+	bind:ref
+	inputmode="numeric"
+>
 	{#if variant === 'inline'}
 		<TextBoxButton aria-label="Increase Number" onclick={() => (value = value ? ++value : 1)}>
 			<ChevronUpFilled />
@@ -55,22 +64,19 @@
 			<ChevronDownFilled />
 		</TextBoxButton>
 	{:else}
-		<TextBoxButton aria-label="Open" onclick={() => compactToggler()}>
+		<TextBoxButton aria-label="Open" onclick={() => (openFlyout = !openFlyout)}>
 			<ChevronUpDownFilled />
 		</TextBoxButton>
 		{#if openFlyout}
 			<div
 				class="flyout-absolute"
-				{@attach ref
-					? floating(ref, {
+				{@attach wrapperRef
+					? floating(wrapperRef, {
 							placement: 'right',
 							middleware: [
-								shift({
-									crossAxis: true
-								}),
-								offset(({ rects }) => {
-									return -rects.reference.width / 1.4;
-								})
+								// Centers the flyout on the button that opened it, whatever the width of the box.
+								offset(({ rects }) => -(rects.floating.width / 2 + BUTTON_HALF_WIDTH)),
+								shift({ crossAxis: true, padding: 8 })
 							]
 						})
 					: undefined}
@@ -93,9 +99,9 @@
 <style>
 	.flyout-absolute {
 		position: absolute;
-		right: 0;
+		left: 0;
 		top: 0;
-		z-index: 2;
+		z-index: 3;
 		& :global(.fs-flyout) {
 			padding: 8px;
 		}

package/dist/components/number-box/number-box.svelte.d.ts

@@ -10,6 +10,6 @@ import type { NumberBoxProps } from './types.ts';
  *   <NumberBox />
  *   ```
  */
-declare const NumberBox: import("svelte").Component<NumberBoxProps, {}, "ref" | "value">;
+declare const NumberBox: import("svelte").Component<NumberBoxProps, {}, "ref" | "value" | "wrapperRef">;
 type NumberBox = ReturnType<typeof NumberBox>;
 export default NumberBox;

package/dist/components/number-box/types.d.ts

@@ -4,7 +4,7 @@ export type NumberBoxProps = {
     /** The current value of the input.
      * @bindable
      */
-    value?: number;
+    value?: number | null;
     /** How the increment and decrement buttons are laid out.
      *
      * `inline`: the buttons sit inside the input, one next to the other.

package/dist/components/persona/docs/llms.md

@@ -15,7 +15,7 @@ A Persona is a visual representation of a person that combines an avatar, presen
 	secondaryText="Intranet"
 	tertiaryText="Team A"
 	presence={{ status: 'available' }}
-	avatar={{ color: 'colorful' }}
+	avatarProps={{ color: 'colorful' }}
 />
 ```
 
@@ -26,9 +26,9 @@ A Persona is a visual representation of a person that combines an avatar, presen
 A Persona supports three text alignments, with 'left' as the default position.
 
 ```svelte
-<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
-<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="center" />
-<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="right" />
+<Persona name="Alex Johnson" avatarProps={{ initials: 'AJ' }} secondaryText="Available" />
+<Persona name="Alex Johnson" avatarProps={{ initials: 'AJ' }} secondaryText="Available" textAlign="center" />
+<Persona name="Alex Johnson" avatarProps={{ initials: 'AJ' }} secondaryText="Available" textAlign="right" />
 ```
 
 ### Text Position
@@ -36,18 +36,18 @@ A Persona supports three text alignments, with 'left' as the default position.
 A Persona supports four text positions: 'top', 'bottom', 'left', and 'right'. The default position is 'right'.
 
 ```svelte
-<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
+<Persona name="Alex Johnson" avatarProps={{ initials: 'AJ' }} secondaryText="Available" />
 <Persona
 	name="Alex Johnson"
-	avatar={{ initials: 'AJ' }}
+	avatarProps={{ initials: 'AJ' }}
 	secondaryText="Available"
 	textPosition="bottom"
 	textAlign="center"
 />
-<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textPosition="left" />
+<Persona name="Alex Johnson" avatarProps={{ initials: 'AJ' }} secondaryText="Available" textPosition="left" />
 <Persona
 	name="Alex Johnson"
-	avatar={{ initials: 'AJ' }}
+	avatarProps={{ initials: 'AJ' }}
 	secondaryText="Available"
 	textPosition="top"
 	textAlign="center"
@@ -69,9 +69,12 @@ A Persona supports custom sizes, with a default of 42px. You can set the size us
 A Persona wraps an avatar inside it, which can be customized with all the props available to the Avatar component.
 
 ```svelte
-<Persona name="John Doe" avatar={{ color: 'attention' }} />
-<Persona name="John Doe" avatar={{ color: 'colorful', idForColor: '' }} />
-<Persona name="John Doe" avatar={{ image: { src: 'https://placehold.co/96x96/jpeg', alt: 'Placeholder Image' } }} />
+<Persona name="John Doe" avatarProps={{ color: 'attention' }} />
+<Persona name="John Doe" avatarProps={{ color: 'colorful', idForColor: '' }} />
+<Persona
+	name="John Doe"
+	avatarProps={{ image: { src: 'https://placehold.co/96x96/jpeg', alt: 'Placeholder Image' } }}
+/>
 ```
 
 ### Presence
@@ -94,19 +97,20 @@ A Persona can display presence information, such as online status or availabilit
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:PersonaProps -->
 
-| Name                 | Type                                                       | Default    | Description                                                                                                   |
-| -------------------- | ---------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `name`               | `string`                                                   |            | The name of the person or entity represented by this Persona. It is also used by the avatar for its initials. |
-| `size`               | `number`                                                   | `42`       | The size of the avatar in pixels. The text scales with it.                                                    |
-| `primaryText`        | `string`                                                   |            | Text to display below the name.                                                                               |
-| `secondaryText`      | `string`                                                   |            | Text to display below the primary text.                                                                       |
-| `tertiaryText`       | `string`                                                   |            | Text to display below the secondary text.                                                                     |
-| `textAlign`          | `'left'` &#124; `'center'` &#124; `'right'`                | `'left'`   | How the text block is aligned.                                                                                |
-| `textPosition`       | `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'right'`  | Where the text block sits relative to the avatar.                                                             |
-| `presenceOnly`       | `boolean`                                                  |            | Renders the presence badge on its own, without the avatar behind it.                                          |
-| `avatarAlign`        | `'start'` &#124; `'center'` &#124; `'end'`                 | `'center'` | How the avatar is aligned against the text block.                                                             |
-| `element` _bindable_ | `HTMLDivElement`                                           |            | The DOM reference of the persona element.                                                                     |
-| `avatar`             | `AvatarProps`                                              |            | The props to spread on the avatar.                                                                            |
-| `presence`           | `BadgePresence`                                            |            | The presence badge to display as a status indicator.                                                          |
+| Name                       | Type                                                       | Default    | Description                                                                                                   |
+| -------------------------- | ---------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `name`                     | `string`                                                   |            | The name of the person or entity represented by this Persona. It is also used by the avatar for its initials. |
+| `size`                     | `number`                                                   | `42`       | The size of the avatar in pixels. The text scales with it.                                                    |
+| `primaryText`              | `string`                                                   |            | Text to display below the name.                                                                               |
+| `secondaryText`            | `string`                                                   |            | Text to display below the primary text.                                                                       |
+| `tertiaryText`             | `string`                                                   |            | Text to display below the secondary text.                                                                     |
+| `textAlign`                | `'left'` &#124; `'center'` &#124; `'right'`                | `'left'`   | How the text block is aligned.                                                                                |
+| `textPosition`             | `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'right'`  | Where the text block sits relative to the avatar.                                                             |
+| `presenceOnly`             | `boolean`                                                  |            | Renders the presence badge on its own, without the avatar behind it.                                          |
+| `avatarAlign`              | `'start'` &#124; `'center'` &#124; `'end'`                 | `'center'` | How the avatar is aligned against the text block.                                                             |
+| `element` _bindable_       | `HTMLDivElement` &#124; `null`                             |            | The DOM reference of the persona element.                                                                     |
+| `avatarProps`              | `AvatarProps`                                              |            | The props to spread on the avatar.                                                                            |
+| `presence`                 | `BadgePresence`                                            |            | The presence badge to display as a status indicator.                                                          |
+| Element Attributes (`div`) |                                                            |            |                                                                                                               |
 
 <!-- /props:PersonaProps -->

package/dist/components/persona/persona.svelte

@@ -11,8 +11,8 @@
 		textAlign = 'left',
 		textPosition: dir = 'right',
 		avatarAlign = 'center',
-		element = $bindable(),
-		avatar,
+		element = $bindable(null),
+		avatarProps,
 		presence,
 		presenceOnly,
 		...attributes
@@ -27,15 +27,17 @@
 </script>
 
 <div
-	bind:this={element}
-	class="persona"
-	style="--p-size: {size}px; --avatar-align: {avatarAlign}; flex-direction: {position[dir]}; text-align: {textAlign};"
 	{...attributes}
+	bind:this={element}
+	class={['persona', attributes?.class]}
+	style="{attributes?.style ?? ''}; --p-size: {size}px; --avatar-align: {avatarAlign}; flex-direction: {position[
+		dir
+	]}; text-align: {textAlign};"
 >
 	{#if presenceOnly && presence?.status}
 		<BadgeIcon {size} icon={presence?.icon || undefined} status={presence.status} outOfOffice={presence?.outOfOffice} />
 	{:else}
-		<Avatar {name} {size} {...avatar} badge={presence} />
+		<Avatar {...avatarProps} {name} {size} badge={presence} />
 	{/if}
 	<div class="persona-data">
 		<p class="persona-name">{name}</p>

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { AvatarProps } from '../avatar/type.ts';
 /** @propsmith PersonaProps */
 export type PersonaProps = {
@@ -30,13 +31,13 @@ export type PersonaProps = {
     /** The DOM reference of the persona element.
      * @bindable
      */
-    element?: HTMLDivElement;
+    element?: HTMLDivElement | null;
     /** The props to spread on the avatar.
      * @type AvatarProps
      */
-    avatar?: AvatarProps;
+    avatarProps?: AvatarProps;
     /** The presence badge to display as a status indicator.
      * @type BadgePresence
      */
     presence?: AvatarProps['badge'];
-};
+} & HTMLAttributes<HTMLDivElement>;

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

@@ -58,18 +58,18 @@ The status prop allows you to set the status of the progress bar to 'paused' or
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:ProgressBarProps -->
 
-| Name                               | Type                        | Default | Description                                                                     |
-| ---------------------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------- |
-| `value` _bindable_                 | `number` &#124; `null`      |         | The current value of the progress bar. Leave it unset for an indeterminate bar. |
-| `class`                            | `string`                    |         | The class to apply to the progress bar.                                         |
-| `ref` _bindable_                   | `SVGElement`                |         | The DOM reference of the progress bar element.                                  |
-| `min`                              | `number`                    | `0`     | The minimum value of the progress bar.                                          |
-| `max`                              | `number`                    | `100`   | The maximum value of the progress bar.                                          |
-| `hideRail`                         | `boolean`                   |         | Whether to hide the rail element.                                               |
-| `railElement` _bindable_           | `SVGRectElement`            |         | The DOM reference of the rail element.                                          |
-| `secondaryTrackElement` _bindable_ | `SVGRectElement`            |         | The DOM reference of the secondary track element, used while indeterminate.     |
-| `trackElement` _bindable_          | `SVGRectElement`            |         | The DOM reference of the track element.                                         |
-| `status`                           | `'paused'` &#124; `'error'` |         | The current status of the progress bar, which recolors the track.               |
-| Element Attributes                 |                             |         |                                                                                 |
+| Name                               | Type                           | Default | Description                                                                     |
+| ---------------------------------- | ------------------------------ | ------- | ------------------------------------------------------------------------------- |
+| `value` _bindable_                 | `number` &#124; `null`         |         | The current value of the progress bar. Leave it unset for an indeterminate bar. |
+| `class`                            | `string`                       |         | The class to apply to the progress bar.                                         |
+| `ref` _bindable_                   | `SVGElement` &#124; `null`     |         | The DOM reference of the progress bar element.                                  |
+| `min`                              | `number`                       | `0`     | The minimum value of the progress bar.                                          |
+| `max`                              | `number`                       | `100`   | The maximum value of the progress bar.                                          |
+| `hideRail`                         | `boolean`                      |         | Whether to hide the rail element.                                               |
+| `railElement` _bindable_           | `SVGRectElement` &#124; `null` |         | The DOM reference of the rail element.                                          |
+| `secondaryTrackElement` _bindable_ | `SVGRectElement` &#124; `null` |         | The DOM reference of the secondary track element, used while indeterminate.     |
+| `trackElement` _bindable_          | `SVGRectElement` &#124; `null` |         | The DOM reference of the track element.                                         |
+| `status`                           | `'paused'` &#124; `'error'`    |         | The current status of the progress bar, which recolors the track.               |
+| Element Attributes                 |                                |         |                                                                                 |
 
 <!-- /props:ProgressBarProps -->

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

@@ -8,11 +8,11 @@
 		'aria-label': ariaLabel,
 		min = 0,
 		max = 100,
-		value = $bindable(),
-		ref = $bindable(),
-		railElement = $bindable(),
-		trackElement = $bindable(),
-		secondaryTrackElement = $bindable(),
+		value = $bindable(null),
+		ref = $bindable(null),
+		railElement = $bindable(null),
+		trackElement = $bindable(null),
+		secondaryTrackElement = $bindable(null),
 		...attributes
 	}: ProgressBarProps = $props();
 
@@ -31,6 +31,7 @@
     ```
 -->
 <svg
+	{...attributes}
 	class={['fs-progress-bar', status && `status-${status}`, classes, typeof value !== 'number' && 'indeterminate']}
 	role="progressbar"
 	aria-label={ariaLabel ??
@@ -41,7 +42,6 @@
 	aria-valuemax={max}
 	aria-valuenow={checkValue}
 	bind:this={ref}
-	{...attributes}
 >
 	{#if !hideRail}
 		<rect bind:this={railElement} height="1" rx="0.5" y="1" width="100%" class="progress-bar-rail" />

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

@@ -11,7 +11,7 @@ export type ProgressBarProps = {
     /** The DOM reference of the progress bar element.
      * @bindable
      */
-    ref?: SVGElement;
+    ref?: SVGElement | null;
     /** The minimum value of the progress bar.
      * @default 0
      */
@@ -25,15 +25,15 @@ export type ProgressBarProps = {
     /** The DOM reference of the rail element.
      * @bindable
      */
-    railElement?: SVGRectElement;
+    railElement?: SVGRectElement | null;
     /** The DOM reference of the secondary track element, used while indeterminate.
      * @bindable
      */
-    secondaryTrackElement?: SVGRectElement;
+    secondaryTrackElement?: SVGRectElement | null;
     /** The DOM reference of the track element.
      * @bindable
      */
-    trackElement?: SVGRectElement;
+    trackElement?: SVGRectElement | null;
     /** The current status of the progress bar, which recolors the track. */
     status?: ProgressStatus;
 } & SVGAttributes<SVGElement>;