fluentui-svelte 0.5.0 → 0.7.0

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

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

@@ -65,19 +65,19 @@ The status prop allows you to set the status of the progress ring for visual fee
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:ProgressRingProps -->
 
-| Name                      | Type                        | Default | Description                                                        |
-| ------------------------- | --------------------------- | ------- | ------------------------------------------------------------------ |
-| `value` _bindable_        | `number`                    | `0`     | The current value of the progress ring.                            |
-| `min`                     | `number`                    | `0`     | The minimum value of the progress ring.                            |
-| `max`                     | `number`                    | `100`   | The maximum value of the progress ring.                            |
-| `indeterminate`           | `boolean`                   |         | Spins the ring continuously instead of reporting a value.          |
-| `hideRail`                | `boolean`                   |         | Whether to hide the rail element.                                  |
-| `size`                    | `number`                    | `32`    | The size of the progress ring in pixels.                           |
-| `ref` _bindable_          | `SVGElement`                |         | The DOM reference of the progress ring element.                    |
-| `railElement` _bindable_  | `SVGCircleElement`          |         | The DOM reference of the rail element.                             |
-| `trackElement` _bindable_ | `SVGCircleElement`          |         | The DOM reference of the track element.                            |
-| `status`                  | `'paused'` &#124; `'error'` |         | The current status of the progress ring, which recolors the track. |
-| `class`                   | `string`                    |         | The class to apply to the progress ring.                           |
-| Element Attributes        |                             |         |                                                                    |
+| Name                      | Type                             | Default | Description                                                        |
+| ------------------------- | -------------------------------- | ------- | ------------------------------------------------------------------ |
+| `value` _bindable_        | `number`                         | `0`     | The current value of the progress ring.                            |
+| `min`                     | `number`                         | `0`     | The minimum value of the progress ring.                            |
+| `max`                     | `number`                         | `100`   | The maximum value of the progress ring.                            |
+| `indeterminate`           | `boolean`                        |         | Spins the ring continuously instead of reporting a value.          |
+| `hideRail`                | `boolean`                        |         | Whether to hide the rail element.                                  |
+| `size`                    | `number`                         | `32`    | The size of the progress ring in pixels.                           |
+| `ref` _bindable_          | `SVGElement` &#124; `null`       |         | The DOM reference of the progress ring element.                    |
+| `railElement` _bindable_  | `SVGCircleElement` &#124; `null` |         | The DOM reference of the rail element.                             |
+| `trackElement` _bindable_ | `SVGCircleElement` &#124; `null` |         | The DOM reference of the track element.                            |
+| `status`                  | `'paused'` &#124; `'error'`      |         | The current status of the progress ring, which recolors the track. |
+| `class`                   | `string`                         |         | The class to apply to the progress ring.                           |
+| Element Attributes        |                                  |         |                                                                    |
 
 <!-- /props:ProgressRingProps -->

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

@@ -12,9 +12,9 @@
 		'aria-label': ariaLabel,
 		indeterminate,
 		value = $bindable(0),
-		ref = $bindable(),
-		railElement = $bindable(),
-		trackElement = $bindable(),
+		ref = $bindable(null),
+		railElement = $bindable(null),
+		trackElement = $bindable(null),
 		...attributes
 	}: ProgressRingProps = $props();
 
@@ -39,6 +39,7 @@
     ```
 -->
 <svg
+	{...attributes}
 	bind:this={ref}
 	tabindex="-1"
 	class={['progress-ring', status && `status-${status}`, classes, { indeterminate }]}
@@ -50,8 +51,7 @@
 	aria-valuemin={!indeterminate ? min : undefined}
 	aria-valuemax={!indeterminate ? max : undefined}
 	aria-valuenow={!indeterminate ? checkValue : undefined}
-	style="--ring-circumference: {circumference}px;"
-	{...attributes}
+	style="{attributes?.style ?? ''}; --ring-circumference: {circumference}px;"
 >
 	{#if !hideRail}
 		<circle

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

@@ -26,15 +26,15 @@ export type ProgressRingProps = {
     /** The DOM reference of the progress ring element.
      * @bindable
      */
-    ref?: SVGElement;
+    ref?: SVGElement | null;
     /** The DOM reference of the rail element.
      * @bindable
      */
-    railElement?: SVGCircleElement;
+    railElement?: SVGCircleElement | null;
     /** The DOM reference of the track element.
      * @bindable
      */
-    trackElement?: SVGCircleElement;
+    trackElement?: SVGCircleElement | null;
     /** The current status of the progress ring, which recolors the track. */
     status?: ProgressStatus;
     /** The class to apply to the progress ring. */

package/dist/components/radio-button/docs/llms.md

@@ -52,18 +52,21 @@ The checked prop allows you to control the checked state of the radio button. Th
 <RadioButton label="Unchecked Option" value="G" />
 ```
 
+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:RadioButtonProps -->
 
-| Name                         | Type               | Default | Description                                                                          |
-| ---------------------------- | ------------------ | ------- | ------------------------------------------------------------------------------------ |
-| `label`                      | `string`           |         | The label displayed next to the radio button.                                        |
-| `group` _bindable_           | `unknown`          |         | Bindable value representing a group of radio inputs that the input will be bound to. |
-| `checked` _bindable_         | `boolean`          | `false` | Whether the radio button is selected.                                                |
-| `ref` _bindable_             | `HTMLInputElement` |         | The DOM reference of the radio button element.                                       |
-| `labelAttributes`            | `PolymorphicProps` |         | The attributes to spread on the label wrapping the radio button.                     |
-| Element Attributes (`input`) |                    |         |                                                                                      |
+| Name                         | Type                             | Default | Description                                                                          |
+| ---------------------------- | -------------------------------- | ------- | ------------------------------------------------------------------------------------ |
+| `label`                      | `string`                         |         | The label displayed next to the radio button. Inside a `Label`, it is not rendered   |
+| `group` _bindable_           | `unknown`                        |         | Bindable value representing a group of radio inputs that the input will be bound to. |
+| `checked` _bindable_         | `boolean` &#124; `null`          | `false` | Whether the radio button is selected.                                                |
+| `ref` _bindable_             | `HTMLInputElement` &#124; `null` |         | The DOM reference of the radio button element.                                       |
+| `wrapperAttributes`          | `HTMLAttributes`                 |         | The attributes to spread on the wrapper element.                                     |
+| `wrapperRef` _bindable_      | `HTMLDivElement` &#124; `null`   |         | The DOM reference of the wrapper element.                                            |
+| Element Attributes (`input`) |                                  |         |                                                                                      |
 
 <!-- /props:RadioButtonProps -->

package/dist/components/radio-button/radio-button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import type { RadioButtonProps } from './types.js';
 
@@ -6,17 +7,30 @@
 	const COMPONENT_NAME = 'radio-button';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		ref = $bindable(),
-		group = $bindable(undefined),
-		id = ID,
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		group = $bindable(null),
+		id = labelContext?.fieldId ?? ID,
 		label,
 		name = id,
 		value,
-		checked = $bindable(false),
-		labelAttributes,
+		checked = $bindable(null),
+		wrapperAttributes,
 		...attributes
 	}: RadioButtonProps = $props();
+
+	/** What `bind:group` reads and writes. Without a group, `checked` decides: an empty group (`null`) matches no value. */
+	const binding = {
+		get group() {
+			return group ?? (checked ? value : null);
+		},
+		set group(selected) {
+			group = selected;
+		}
+	};
 </script>
 
 <!-- 
@@ -37,12 +51,13 @@
   ```
  -->
 
-<label class="fs-radio-button" {...labelAttributes}>
-	<input type="radio" {id} {name} {value} {checked} bind:this={ref} bind:group {...attributes} />
-	{#if label}
-		<span>{label}</span>
+<div {...wrapperAttributes} class={['fs-radio-button', wrapperAttributes?.class]} bind:this={wrapperRef}>
+	<input {...attributes} type="radio" {id} {name} {value} {checked} bind:this={ref} bind:group={binding.group} />
+	<!-- Inside a Label, the Label names the field instead. -->
+	{#if label && !labelContext}
+		<label for={id}>{label}</label>
 	{/if}
-</label>
+</div>
 
 <style>
 	.fs-radio-button {
@@ -100,6 +115,15 @@
 					}
 				}
 			}
+			&:is(:user-invalid, [aria-invalid='true']) {
+				border-color: var(--fs-system-critical);
+				&:hover {
+					border-color: var(--fs-system-critical);
+				}
+				& + label {
+					color: var(--fs-system-critical);
+				}
+			}
 		}
 		&:has(input:disabled) {
 			pointer-events: none;
@@ -115,12 +139,14 @@
 		&:has(input:focus-visible) {
 			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
 			outline-offset: 0.125rem;
-			&:has(span) {
+			&:has(> label) {
 				border-radius: 0.063rem;
 				outline-offset: 0.313rem;
 			}
 		}
-		& span {
+		& > label {
+			flex-grow: 1;
+			cursor: pointer;
 			font-size: inherit;
 			color: inherit;
 			padding: 0px 0.75rem;

package/dist/components/radio-button/radio-button.svelte.d.ts

@@ -14,6 +14,6 @@ import type { RadioButtonProps } from './types.ts';
  *  <RadioButton label="Radio Button label" />
  *  ```
  */
-declare const RadioButton: import("svelte").Component<RadioButtonProps, {}, "ref" | "group" | "checked">;
+declare const RadioButton: import("svelte").Component<RadioButtonProps, {}, "ref" | "checked" | "group" | "wrapperRef">;
 type RadioButton = ReturnType<typeof RadioButton>;
 export default RadioButton;

package/dist/components/radio-button/types.d.ts

@@ -1,8 +1,7 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { PolymorphicProps } from '../../types/index.js';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 /** @propsmith RadioButtonProps */
 export type RadioButtonProps = {
-    /** The label displayed next to the radio button. */
+    /** The label displayed next to the radio button. Inside a `Label`, it is not rendered */
     label?: string;
     /** Bindable value representing a group of radio inputs that the input will be bound to.
      * @bindable
@@ -12,13 +11,17 @@ export type RadioButtonProps = {
      * @default false
      * @bindable
      */
-    checked?: boolean;
+    checked?: boolean | null;
     /** The DOM reference of the radio button element.
      * @bindable
      */
-    ref?: HTMLInputElement;
-    /** The attributes to spread on the label wrapping the radio button.
-     * @type PolymorphicProps
+    ref?: HTMLInputElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    labelAttributes?: PolymorphicProps<'label'>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement | null;
 } & HTMLInputAttributes;