fluentui-svelte 0.6.0 → 0.7.0

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

@@ -1,7 +1,8 @@
-import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLSelectAttributes } from 'svelte/elements';
 import type { ListViewProps, ListViewItemProps } from '../list-view/types.ts';
 import type { FlyoutProps } from '../flyout/types.ts';
-import type { FSContext } from '../../internal/index.js';
+import type { FSContext, NativeFieldAttributes } from '../../internal/index.js';
 /** The value shape of a dropdown that allows more than one selection. */
 export type DropdownMultipleValue = {
     multiple: true;
@@ -28,34 +29,32 @@ export type DropdownProps = {
     placeholder?: string;
     /** Disables the user interaction. */
     disabled?: boolean;
-    /** The name submitted with the form. Falls back to the id of the dropdown.
-     * @default id
-     */
+    /** The name the value is submitted under. Without one, the form leaves the value out, as with any field. */
     name?: string | null;
-    /** The DOM reference of the dropdown element.
+    /** The DOM reference of the wrapper element.
      * @bindable
      */
-    ref?: HTMLDivElement;
-    /** Called when the dropdown is clicked. */
-    onclick?: (e: MouseEvent) => void;
+    wrapperRef?: HTMLDivElement | null;
     /** The attributes to spread on the wrapper element.
      * @type HTMLAttributes
      */
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the native select that holds the value. The other attributes of the dropdown are applied to it.
+     * @bindable
+     */
+    ref?: HTMLSelectElement | null;
     /** The DOM reference of the button that opens the dropdown.
      * @bindable
      */
-    buttonRef?: HTMLButtonElement;
+    buttonRef?: HTMLButtonElement | null;
     /** The attributes to spread on the button that opens the dropdown.
      * @type HTMLButtonAttributes
      */
-    buttonProps?: HTMLButtonAttributes;
-    /** The DOM reference of the hidden input holding the value. */
-    inputRef?: HTMLInputElement;
+    buttonAttributes?: Omit<HTMLButtonAttributes, 'type' | 'role' | 'value'>;
     /** The DOM reference of the flyout element.
      * @bindable
      */
-    flyoutRef?: HTMLDivElement;
+    flyoutRef?: HTMLDivElement | null;
     /** The props to spread on the flyout.
      * @type FlyoutProps
      */
@@ -65,18 +64,25 @@ export type DropdownProps = {
     /** The DOM reference of the listbox element.
      * @bindable
      */
-    listboxRef?: HTMLUListElement;
+    listboxRef?: HTMLUListElement | null;
     /** The props to spread on the listbox rendered inside the flyout.
      * @type ListViewProps
      */
     listboxProps?: Omit<ListViewProps<'ul'>, 'ref' | 'children' | 'selectedItems' | 'selectionMode'>;
-} & (DropdownMultipleValue | DropdownSingleValue) & Omit<HTMLInputAttributes, 'value' | 'onclick'>;
+    /** The `DropdownOption` elements of the list. */
+    children?: Snippet;
+} & (DropdownMultipleValue | DropdownSingleValue) & NativeFieldAttributes<HTMLSelectAttributes>;
 /** @propsmith DropdownOptionProps */
 export type DropdownOptionProps = {
-    /** The text shown by the dropdown once the option is selected. Falls back to the rendered children. */
+    /** The text shown by the dropdown once the option is selected. Falls back to the rendered children, which the server cannot read: pass it when rendering on the server. */
     text?: string;
 } & ListViewItemProps<'li'>;
+/** What an option tells the trigger, read live. */
+export type DropdownOptionLabel = {
+    readonly value?: string;
+    readonly text?: string;
+};
 export type DropdownContext = FSContext<null, null, null, {
-    /** Options report their display text so the trigger can show a label instead of the raw value. */
-    registerOption: (value: string, text: string) => void;
+    /** Options report their display text so the trigger can show a label instead of the raw value. Returns the call that withdraws the option. */
+    registerOption: (option: DropdownOptionLabel) => () => void;
 }>;

package/dist/components/dropdown-select/docs/llms.md

@@ -11,7 +11,7 @@ The Dropdown Select is a dropdown built on the native `<select>` element. It let
 	import { DropdownSelect, DropdownSelectOption } from 'fluentui-svelte';
 </script>
 
-<DropdownSelect>
+<DropdownSelect aria-label="Choose an option">
 	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
 	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
@@ -25,13 +25,13 @@ The Dropdown Select is a dropdown built on the native `<select>` element. It let
 Options can render rich content such as a `Persona`. Provide a `text` prop for the plain-text selection label.
 
 ```svelte
-<DropdownSelect>
+<DropdownSelect aria-label="Choose an option">
 	<DropdownSelectOption value="John Doe" text="John Doe">
 		<Persona
 			name="John Doe"
 			primaryText="Software Engineer"
 			presence={{ status: 'available' }}
-			avatar={{ color: 'colorful', idForColor: '' }}
+			avatarProps={{ color: 'colorful', idForColor: '' }}
 		/>
 	</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
@@ -44,28 +44,30 @@ Options can render rich content such as a `Persona`. Provide a `text` prop for t
 Set the `multiple` prop to allow selecting more than one option.
 
 ```svelte
-<DropdownSelect multiple>
+<DropdownSelect multiple aria-label="Choose options">
 	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
 	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
 </DropdownSelect>
 ```
 
+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) -->
 <!-- props:DropdownSelectProps -->
 
-| Name                          | Type                       | Default                    | Description                                                            |
-| ----------------------------- | -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
-| `value` _bindable_            | `string` &#124; `string[]` | `multiple ? [] : ''`       | The selected value. An array of values when `multiple` is set.         |
-| `multiple`                    | `boolean`                  |                            | Allows more than one option to be selected at a time.                  |
-| `placeholder`                 | `string`                   | `'Native Select Dropdown'` | The text shown while no option is selected.                            |
-| `hidePlaceholder`             | `boolean`                  |                            | Keeps the placeholder out of the option list once a value is selected. |
-| `ref` _bindable_              | `HTMLSelectElement`        |                            | The DOM reference of the select element.                               |
-| `wrapperRef` _bindable_       | `HTMLDivElement`           |                            | The DOM reference of the wrapper element.                              |
-| `wrapperProps`                | `HTMLAttributes`           |                            | The attributes to spread on the wrapper element.                       |
-| Element Attributes (`select`) |                            |                            |                                                                        |
+| Name                          | Type                              | Default                    | Description                                                            |
+| ----------------------------- | --------------------------------- | -------------------------- | ---------------------------------------------------------------------- |
+| `value` _bindable_            | `string` &#124; `string[]`        | `multiple ? [] : ''`       | The selected value. An array of values when `multiple` is set.         |
+| `multiple`                    | `boolean`                         |                            | Allows more than one option to be selected at a time.                  |
+| `placeholder`                 | `string`                          | `'Native Select Dropdown'` | The text shown while no option is selected.                            |
+| `hidePlaceholder`             | `boolean`                         |                            | Keeps the placeholder out of the option list once a value is selected. |
+| `ref` _bindable_              | `HTMLSelectElement` &#124; `null` |                            | The DOM reference of the select element.                               |
+| `wrapperRef` _bindable_       | `HTMLDivElement` &#124; `null`    |                            | The DOM reference of the wrapper element.                              |
+| `wrapperAttributes`           | `HTMLAttributes`                  |                            | The attributes to spread on the wrapper element.                       |
+| Element Attributes (`select`) |                                   |                            |                                                                        |
 
 <!-- /props:DropdownSelectProps -->
 
@@ -74,13 +76,13 @@ Set the `multiple` prop to allow selecting more than one option.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DropdownSelectOptionProps -->
 
-| Name                          | Type          | Default | Description                                                   |
-| ----------------------------- | ------------- | ------- | ------------------------------------------------------------- |
-| `value`                       | `string`      |         | The value reported to the select when the option is picked.   |
-| `text`                        | `string`      |         | The label of the option. Falls back to the rendered children. |
-| `disabled`                    | `boolean`     |         | Disables the user interaction.                                |
-| `ref` _bindable_              | `HTMLElement` |         | The DOM reference of the option element.                      |
-| `children`                    | `Snippet`     |         | The content of the option, used when no `text` is given.      |
-| Element Attributes (`option`) |               |         |                                                               |
+| Name                          | Type                        | Default | Description                                                   |
+| ----------------------------- | --------------------------- | ------- | ------------------------------------------------------------- |
+| `value`                       | `string`                    |         | The value reported to the select when the option is picked.   |
+| `text`                        | `string`                    |         | The label of the option. Falls back to the rendered children. |
+| `disabled`                    | `boolean`                   |         | Disables the user interaction.                                |
+| `ref` _bindable_              | `HTMLElement` &#124; `null` |         | The DOM reference of the option element.                      |
+| `children`                    | `Snippet`                   |         | The content of the option, used when no `text` is given.      |
+| Element Attributes (`option`) |                             |         |                                                               |
 
 <!-- /props:DropdownSelectOptionProps -->

package/dist/components/dropdown-select/dropdown-select-option.svelte

@@ -6,14 +6,14 @@
 		value,
 		text,
 		disabled,
-		ref = $bindable(),
+		ref = $bindable(null),
 		class: classes,
 		children,
 		...attributes
 	}: DropdownSelectOptionProps = $props();
 </script>
 
-<option class="fs-dropdown-select-option {classes}" {value} {disabled} bind:this={ref} {...attributes}>
+<option {...attributes} class="fs-dropdown-select-option {classes}" {value} {disabled} bind:this={ref}>
 	<span class="option-content">
 		<CheckmarkFilled class="checkmark" width="16" height="16" />
 		{#if text}

package/dist/components/dropdown-select/dropdown-select.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
+	import { flushSync } from 'svelte';
 	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
 	import { selectDirection } from './dropdown-select.svelte.js';
 	import type { DropdownSelectProps } from './types.js';
 
+	const labelContext = claimLabel(() => id);
+
 	let {
 		hidePlaceholder,
 		placeholder = 'Native Select Dropdown',
-		ref = $bindable(),
+		ref = $bindable(null),
 		children,
-		wrapperRef = $bindable(),
-		wrapperProps,
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
 		multiple,
+		class: classes,
 		value = $bindable(multiple ? [] : ''),
+		id = labelContext?.fieldId,
+		name = id,
 		...attributes
 	}: DropdownSelectProps = $props();
 </script>
 
-<div class="fs-dropdown" bind:this={wrapperRef} {...wrapperProps}>
+<div {...wrapperAttributes} class={['fs-dropdown', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	{#if !multiple}
 		<ChevronDownFilled class="indicator" />
 	{/if}
@@ -25,17 +32,40 @@
 		We need to use a if block with the same structure 
 	-->
 	{#if multiple}
-		<select class="fs-dropdown-select" {@attach selectDirection()} multiple bind:value bind:this={ref} {...attributes}>
+		<select
+			{...attributes}
+			{id}
+			{name}
+			class={['fs-dropdown-select', classes]}
+			{@attach selectDirection()}
+			multiple
+			bind:value
+			bind:this={ref}
+		>
 			<button>
 				<selectedcontent></selectedcontent>
 			</button>
 			{#if !hidePlaceholder}
-				<option class="fs-dropdown-placeholder" disabled selected hidden value="">{placeholder}</option>
+				<option class="fs-dropdown-placeholder" disabled selected={!value?.length} hidden value="">{placeholder}</option
+				>
 			{/if}
 			{@render children?.()}
 		</select>
 	{:else}
-		<select class="fs-dropdown-select" {@attach selectDirection()} bind:value bind:this={ref} {...attributes}>
+		<select
+			{...attributes}
+			{id}
+			{name}
+			class={['fs-dropdown-select', classes]}
+			{@attach selectDirection()}
+			bind:value
+			bind:this={ref}
+			oninputcapture={(event) => {
+				// selectedcontent mutates before change; sync the binding before its observer restores the old value.
+				flushSync(() => (value = event.currentTarget.value));
+				attributes.oninputcapture?.(event);
+			}}
+		>
 			<button>
 				<selectedcontent></selectedcontent>
 			</button>
@@ -94,6 +124,11 @@
 			left: 0;
 			background-color: var(--fs-accent-fill-default);
 		}
+		&:has(select:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100%);
+			left: 0;
+			background-color: var(--fs-system-critical);
+		}
 		& .fs-dropdown-select {
 			border-radius: 0;
 			background: unset;

package/dist/components/dropdown-select/types.d.ts

@@ -19,15 +19,15 @@ export type DropdownSelectProps = {
     /** The DOM reference of the select element.
      * @bindable
      */
-    ref?: HTMLSelectElement;
+    ref?: HTMLSelectElement | null;
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The attributes to spread on the wrapper element.
      * @type HTMLAttributes
      */
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
 } & HTMLSelectAttributes;
 /** @propsmith DropdownSelectOptionProps */
 export type DropdownSelectOptionProps = {
@@ -40,7 +40,7 @@ export type DropdownSelectOptionProps = {
     /** The DOM reference of the option element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
     /** The content of the option, used when no `text` is given. */
     children?: Snippet;
 } & HTMLOptionAttributes;

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

@@ -86,10 +86,10 @@ You can easily add an icon to an expander's header using the `Icon` prop. You ca
 | `disabled`                     | `boolean`                               | `false`  | Disables the user interaction.                                            |
 | `animation`                    | `{ duration: number; easing: string; }` |          | The animation configuration. Reduced motion is always honoured over this. |
 | `expanded` _bindable_          | `boolean`                               | `false`  | Control the opening state of the expander.                                |
-| `ref` _bindable_               | `HTMLDetailsElement`                    |          | The DOM reference of the expander element.                                |
+| `ref` _bindable_               | `HTMLDetailsElement` | `null`      |          | The DOM reference of the expander element.                                |
 | `Icon`                         | `Snippet` | `Component`            |          | The icon to display before the label.                                     |
-| `summaryRef` _bindable_        | `HTMLElement`                           |          | The DOM reference of the summary element.                                 |
-| `summaryProps`                 | `HTMLAttributes`                        |          | The props to spread on the summary element.                               |
+| `summaryRef` _bindable_        | `HTMLElement` | `null`             |          | The DOM reference of the summary element.                                 |
+| `summaryAttributes`            | `HTMLAttributes<HTMLElement>`           |          | The HTML attributes to spread on the summary element.                     |
 | Element Attributes (`details`) |                                         |          |                                                                           |
 
 <!-- /props:ExpanderProps -->

package/dist/components/expander/expander.svelte

@@ -13,12 +13,12 @@
 		direction = 'down',
 		animation,
 		justify = false,
-		ref = $bindable(),
+		ref = $bindable(null),
 		expanded = $bindable(false),
 		children,
 		Icon,
-		summaryRef = $bindable(),
-		summaryProps,
+		summaryRef = $bindable(null),
+		summaryAttributes,
 		...attributes
 	}: ExpanderProps = $props();
 
@@ -66,17 +66,22 @@ improve the user experience.
 ```
 -->
 <details
+	{...attributes}
 	bind:this={ref}
 	bind:open={expanded}
 	use:expander
-	class={['fs-expander', direction, { disabled, justify }]}
-	{...attributes}
+	class={['fs-expander', direction, { disabled, justify }, attributes?.class]}
 >
 	<summary
-		class="fs-summary"
-		onclick={(e) => invokeHandlers(e, [disabled], [supportInterpolation && (() => e.preventDefault()), handleClick])}
+		{...summaryAttributes}
+		class={['fs-summary', summaryAttributes?.class]}
+		onclick={(e) =>
+			invokeHandlers(
+				e,
+				[disabled],
+				[supportInterpolation && (() => e.preventDefault()), handleClick, summaryAttributes?.onclick]
+			)}
 		bind:this={summaryRef}
-		{...summaryProps}
 	>
 		<span class="row">
 			{#if Icon}

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

@@ -31,7 +31,7 @@ export type ExpanderProps = {
     /** The DOM reference of the expander element.
      * @bindable
      */
-    ref?: HTMLDetailsElement;
+    ref?: HTMLDetailsElement | null;
     /** The icon to display before the label.
      * @type Snippet | Component
      */
@@ -39,9 +39,9 @@ export type ExpanderProps = {
     /** The DOM reference of the summary element.
      * @bindable
      */
-    summaryRef?: HTMLElement;
-    /** The props to spread on the summary element.
-     * @type HTMLAttributes
+    summaryRef?: HTMLElement | null;
+    /** The HTML attributes to spread on the summary element.
+     * @type HTMLAttributes<HTMLElement>
      */
-    summaryProps?: HTMLAttributes<HTMLElement>;
+    summaryAttributes?: HTMLAttributes<HTMLElement>;
 } & HTMLDetailsAttributes;

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

@@ -23,7 +23,7 @@ The Flyout.
 
 | Name                       | Type                                                                      | Default    | Description                                                                     |
 | -------------------------- | ------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLElement`                                                             |            | The DOM reference of the flyout element.                                        |
+| `ref` _bindable_           | `HTMLElement` | `null`                                               |            | The DOM reference of the flyout element.                                        |
 | `children`                 | `Snippet`                                                                 |            | The content of the flyout.                                                      |
 | `floating`                 | `boolean`                                                                 | `false`    | Positions the flyout with floating-ui instead of leaving it in the normal flow. |
 | `reference`                | `HTMLElement`                                                             |            | The element the flyout is positioned against when `floating` is set.            |

package/dist/components/flyout/flyout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { computePosition, offset, autoPlacement, hide, autoUpdate, type Placement } from '@floating-ui/dom';
 	import { roundByDPR } from '../../internal/index.js';
 	import type { FlyoutProps } from './types.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		children,
 		floating = false,
 		reference,
@@ -14,6 +13,7 @@
 		placementConfig,
 		roundCorners = 'all',
 		offset: offsetValue = 8,
+		hidden,
 		class: classes,
 		...attributes
 	}: FlyoutProps = $props();
@@ -37,9 +37,12 @@
 		return 'round-all';
 	}
 
-	onMount(() => {
-		if (floating && reference && ref) {
+	// A hidden flyout stays in the page unplaced, and is placed again once it shows.
+	$effect(() => {
+		if (floating && reference && ref && !hidden) {
 			const middleware = [offset(offsetValue), autoPlacement(placementConfig), hide()];
+			// A position that arrives once the flyout is hidden or gone is dropped.
+			let placing = true;
 			const update = async () => {
 				if (!reference || !ref) return;
 
@@ -53,6 +56,8 @@
 					middleware
 				});
 
+				if (!placing || !ref) return;
+
 				Object.assign(ref.style, {
 					transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
 					visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -64,7 +69,10 @@
 				}
 			};
 			const cleanup = autoUpdate(reference, ref, update);
-			return () => cleanup();
+			return () => {
+				placing = false;
+				cleanup();
+			};
 		}
 	});
 </script>
@@ -85,7 +93,7 @@ A contextual popup that displays a set of actions or options. It appears when us
   </Flyout>
     ```
 -->
-<div class={['fs-flyout', roundClass, classes, { floating }]} bind:this={ref} {...attributes}>
+<div {...attributes} {hidden} class={['fs-flyout', roundClass, classes, { floating }]} bind:this={ref}>
 	{@render children?.()}
 </div>
 
@@ -100,6 +108,9 @@ A contextual popup that displays a set of actions or options. It appears when us
 		border: 1px solid var(--fs-control-surface-stroke-flyout);
 		background-clip: padding-box;
 		color: var(--fs-text-primary);
+		&[hidden] {
+			display: none;
+		}
 		&.floating {
 			position: absolute;
 			top: 0;

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

@@ -6,7 +6,7 @@ export type FlyoutProps = {
     /** The DOM reference of the flyout element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
     /** The content of the flyout. */
     children?: Snippet;
     /** Positions the flyout with floating-ui instead of leaving it in the normal flow.

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

@@ -27,11 +27,11 @@ Disables the hyperlink and prevents navigation.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:HyperlinkProps -->
 
-| Name                     | Type                | Default | Description                              |
-| ------------------------ | ------------------- | ------- | ---------------------------------------- |
-| `href`                   | `string`            | `'#'`   | The URL the hyperlink points to.         |
-| `disabled`               | `boolean`           |         | Disables the user interaction.           |
-| `ref` _bindable_         | `HTMLAnchorElement` |         | The DOM reference of the anchor element. |
-| Element Attributes (`a`) |                     |         |                                          |
+| Name                     | Type                              | Default | Description                              |
+| ------------------------ | --------------------------------- | ------- | ---------------------------------------- |
+| `href`                   | `string`                          | `'#'`   | The URL the hyperlink points to.         |
+| `disabled`               | `boolean`                         |         | Disables the user interaction.           |
+| `ref` _bindable_         | `HTMLAnchorElement` &#124; `null` |         | The DOM reference of the anchor element. |
+| Element Attributes (`a`) |                                   |         |                                          |
 
 <!-- /props:HyperlinkProps -->

package/dist/components/hyperlink/hyperlink.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
+	import { invokeHandlers } from '../../internal/index.js';
 	import type { HyperlinkProps } from './types.js';
 
-	let { href = '#', disabled, class: classes, children, ref = $bindable(), ...attributes }: HyperlinkProps = $props();
+	let {
+		href = '#',
+		disabled,
+		onclick,
+		class: classes,
+		children,
+		ref = $bindable(null),
+		...attributes
+	}: HyperlinkProps = $props();
 </script>
 
 <!-- 
@@ -19,14 +28,14 @@ F
 ```
 -->
 <a
+	{...attributes}
 	// eslint-disable-next-line svelte/no-navigation-without-resolve
 	{href}
 	class={['fs-hyperlink', classes, { disabled }]}
-	tabindex={disabled ? -1 : undefined}
+	tabindex={disabled ? -1 : attributes.tabindex}
 	aria-disabled={disabled || undefined}
-	onclick={disabled ? (e) => e?.preventDefault() : undefined}
+	onclick={(e) => invokeHandlers(e, disabled, [onclick])}
 	bind:this={ref}
-	{...attributes}
 >
 	{#if children}
 		{@render children()}

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

@@ -10,5 +10,5 @@ export type HyperlinkProps = {
     /** The DOM reference of the anchor element.
      * @bindable
      */
-    ref?: HTMLAnchorElement;
+    ref?: HTMLAnchorElement | null;
 } & HTMLAnchorAttributes;

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

@@ -73,15 +73,16 @@ The hideCloseButton prop allows you to hide the close button in the InfoBar.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:InfoBarProps -->
 
-| Name                       | Type                                                                                           | Default         | Description                                                                  |
-| -------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------- |
-| `status`                   | `'information'` &#124; `'attention'` &#124; `'warning'` &#124; `'critical'` &#124; `'success'` | `'information'` | The severity of the message, which picks the icon and the colors.            |
-| `style`                    | `'inline'` &#124; `'multiline'`                                                                | `'inline'`      | Lays the message out on a single line, or stacked below the title.           |
-| `title`                    | `string`                                                                                       |                 | The title of the InfoBar.                                                    |
-| `icon`                     | `Snippet` &#124; `Component`                                                                   |                 | Custom icon, rendered instead of the one the `status` would pick on its own. |
-| `iconSize`                 | `number`                                                                                       | `20`            | The size of the icon in pixels.                                              |
-| `hideCloseButton`          | `boolean`                                                                                      |                 | Removes the button that dismisses the InfoBar.                               |
-| `children`                 | `Snippet`                                                                                      |                 | The message of the InfoBar.                                                  |
-| Element Attributes (`div`) |                                                                                                |                 |                                                                              |
+| Name                       | Type                                                                                           | Default         | Description                                                                               |
+| -------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------- |
+| `status`                   | `'information'` &#124; `'attention'` &#124; `'warning'` &#124; `'critical'` &#124; `'success'` | `'information'` | The severity of the message, which picks the icon and the colors.                         |
+| `style`                    | `'inline'` &#124; `'multiline'`                                                                | `'inline'`      | Lays the message out on a single line, or stacked below the title.                        |
+| `title`                    | `string`                                                                                       |                 | The title of the InfoBar.                                                                 |
+| `headingLevel`             | `1` &#124; `2` &#124; `3` &#124; `4` &#124; `5` &#124; `6`                                     | `3`             | The level of the heading that holds the title, to fit the headings of the page around it. |
+| `icon`                     | `Snippet` &#124; `Component`                                                                   |                 | Custom icon, rendered instead of the one the `status` would pick on its own.              |
+| `iconSize`                 | `number`                                                                                       | `20`            | The size of the icon in pixels.                                                           |
+| `hideCloseButton`          | `boolean`                                                                                      |                 | Removes the button that dismisses the InfoBar.                                            |
+| `children`                 | `Snippet`                                                                                      |                 | The message of the InfoBar.                                                               |
+| Element Attributes (`div`) |                                                                                                |                 |                                                                                           |
 
 <!-- /props:InfoBarProps -->

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

@@ -12,6 +12,7 @@
 	let {
 		status = 'information',
 		title,
+		headingLevel = 3,
 		icon: Icon,
 		style = 'inline',
 		hideCloseButton,
@@ -55,7 +56,7 @@
 			{/if}
 		</div>
 		<div class="content">
-			{#if title}<h3>{title}</h3>{/if}
+			{#if title}<svelte:element this={`h${headingLevel}`} class="title">{title}</svelte:element>{/if}
 			{@render children?.()}
 		</div>
 		{#if !hideCloseButton}
@@ -120,7 +121,7 @@
 			align-items: center;
 			gap: 0.5rem;
 			width: 100%;
-			& h3 {
+			& .title {
 				font-weight: semibold;
 				font-size: var(--fs-body-font-size);
 				line-height: var(--fs-body-line-height);

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

@@ -12,6 +12,10 @@ export type InfoBarProps = {
     style?: 'inline' | 'multiline';
     /** The title of the InfoBar. */
     title?: string;
+    /** The level of the heading that holds the title, to fit the headings of the page around it.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Custom icon, rendered instead of the one the `status` would pick on its own.
      * @type Snippet | Component
      */