fluentui-svelte 0.6.0 → 0.7.0

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;

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

@@ -87,24 +87,25 @@ Use `itemLabel` to customize the accessible label of each radio input.
 <Rating value={3} itemLabel={(rating) => `${rating} out of 5 stars`} />
 ```
 
+The root is the control element. HTML attributes, class and ref apply to that element. There is no separate wrapper API.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:RatingProps -->
 
-| Name                                                | Type                                                                | Default                       | Description                                                                                                                   |
-| --------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `value` _bindable_                                  | `number`                                                            | `0`                           | The current rating. Fractions are drawn in quarters until the user rates.                                                     |
-| `max`                                               | `number`                                                            | `5`                           | The number of items displayed. Must be a whole number greater than 1.                                                         |
-| `step`                                              | `1` &#124; `0.5`                                                    | `1`                           | The precision of the rating. `0.5` allows half-filled items.                                                                  |
-| `size`                                              | `'small'` &#124; `'medium'` &#124; `'large'` &#124; `'extra-large'` | `'extra-large'`               | The size of the rating items.                                                                                                 |
-| `iconFilled`                                        | `Component`                                                         |                               | The icon of a filled item. Falls back to a filled star. Partially filled items are clipped, so it also works with half steps. |
-| `iconOutline`                                       | `Component`                                                         |                               | The icon of an empty item. Falls back to an outlined star.                                                                    |
-| `name`                                              | `string`                                                            |                               | The name of the radio inputs. Generated when not provided.                                                                    |
-| `itemLabel`                                         | `(rating: number) => string`                                        | `` (rating) => `${rating}` `` | Generates the accessible label of the radio input for a rating value.                                                         |
-| `onChange`                                          | `(value: number) => void`                                           |                               | Called when the user changes the rating.                                                                                      |
-| `class`                                             | `string`                                                            |                               | The class to apply to the rating.                                                                                             |
-| `ref` _bindable_                                    | `HTMLElement`                                                       |                               | The DOM reference of the rating element.                                                                                      |
-| `HTMLAttributes<HTMLDivElement>` without `onchange` |                                                                     |                               |                                                                                                                               |
+| Name                                                                                                                               | Type                                                                | Default                       | Description                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value` _bindable_                                                                                                                 | `number`                                                            | `0`                           | The current rating. Fractions are drawn in quarters until the user rates.                                                                   |
+| `max`                                                                                                                              | `number`                                                            | `5`                           | The number of items displayed. Must be a whole number greater than 1.                                                                       |
+| `step`                                                                                                                             | `1` &#124; `0.5`                                                    | `1`                           | The precision of the rating. `0.5` allows half-filled items.                                                                                |
+| `size`                                                                                                                             | `'small'` &#124; `'medium'` &#124; `'large'` &#124; `'extra-large'` | `'extra-large'`               | The size of the rating items.                                                                                                               |
+| `iconFilled`                                                                                                                       | `Component`                                                         |                               | The icon of a filled item. Falls back to a filled star. Partially filled items are clipped, so it also works with half steps.               |
+| `iconOutline`                                                                                                                      | `Component`                                                         |                               | The icon of an empty item. Falls back to an outlined star.                                                                                  |
+| `itemLabel`                                                                                                                        | `(rating: number) => string`                                        | `` (rating) => `${rating}` `` | Generates the accessible label of the radio input for a rating value.                                                                       |
+| `onChange`                                                                                                                         | `(value: number) => void`                                           |                               | Called when the user changes the rating.                                                                                                    |
+| `wrapperRef` _bindable_                                                                                                            | `HTMLDivElement` &#124; `null`                                      |                               | The DOM reference of the radiogroup element.                                                                                                |
+| `wrapperAttributes`                                                                                                                | `HTMLAttributes`                                                    |                               | The attributes to spread on the radiogroup element. This is where its `aria-label`, `aria-labelledby`, `aria-invalid`, `id` and `class` go. |
+| `HTMLInputAttributes` without `type`, `value`, `checked`, `max`, `step`, `size`, `style`, `aria-label`, `aria-invalid`, `children` |                                                                     |                               |                                                                                                                                             |
 
 <!-- /props:RatingProps -->

package/dist/components/rating/rating.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
+	import { invokeHandlers } from '../../internal/index.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import StarFilled from 'fluentui-icons-svelte/StarFilled.svelte';
-	import StarHalfFilled from 'fluentui-icons-svelte/StarHalfFilled.svelte';
-	import StarOneQuarterFilled from 'fluentui-icons-svelte/StarOneQuarterFilled.svelte';
+	import StarHalfRegular from 'fluentui-icons-svelte/StarHalfRegular.svelte';
+	import StarOneQuarterRegular from 'fluentui-icons-svelte/StarOneQuarterRegular.svelte';
 	import StarRegular from 'fluentui-icons-svelte/StarRegular.svelte';
-	import StarThreeQuarterFilled from 'fluentui-icons-svelte/StarThreeQuarterFilled.svelte';
+	import StarThreeQuarterRegular from 'fluentui-icons-svelte/StarThreeQuarterRegular.svelte';
 	import type { RatingProps } from './types.js';
 
 	const FALLBACK_ID = $props.id();
@@ -12,6 +14,8 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 	const VALUE_ID = `${ID}-value`;
 
+	const labelContext = claimLabel(() => undefined);
+
 	let {
 		value = $bindable(0),
 		max = 5,
@@ -19,12 +23,15 @@
 		size = 'extra-large',
 		iconFilled,
 		iconOutline,
-		name = ID,
+		id = ID,
+		class: classes,
+		name = id,
 		itemLabel = (rating) => `${rating}`,
 		onChange,
-		class: classes,
-		ref = $bindable(),
-		role = 'radiogroup',
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
+		onclick,
+		onpointerenter,
 		...attributes
 	}: RatingProps = $props();
 
@@ -51,9 +58,9 @@
 
 	function iconFor(snapped: number) {
 		if (snapped >= 1) return StarFilled;
-		if (snapped >= 0.75) return StarThreeQuarterFilled;
-		if (snapped >= 0.5) return StarHalfFilled;
-		if (snapped >= 0.25) return StarOneQuarterFilled;
+		if (snapped >= 0.75) return StarThreeQuarterRegular;
+		if (snapped >= 0.5) return StarHalfRegular;
+		if (snapped >= 0.25) return StarOneQuarterRegular;
 		return StarRegular;
 	}
 
@@ -62,6 +69,19 @@
 		value = next;
 		onChange?.(next);
 	}
+
+	/** The value of the checked radio. Clicks select, the arrow keys included; a form reset unchecks every radio, which the binding reports as `null`. */
+	let checked = $derived<number | null>(checkedValue);
+
+	$effect(() => {
+		if (checked !== null) return;
+		rated = false;
+		value = 0;
+	});
+
+	function hover(event: PointerEvent & { currentTarget: HTMLInputElement }, item: number) {
+		invokeHandlers(event, [], [() => (hovered = item), onpointerenter]);
+	}
 </script>
 
 <!-- 
@@ -81,13 +101,15 @@
 	```
 -->
 <div
-	class={['fs-rating', `size-${size}`, classes]}
-	bind:this={ref}
-	{role}
-	onpointerleave={() => (hovered = undefined)}
-	{...attributes}
-	aria-label={attributes['aria-label'] ?? (attributes['aria-labelledby'] ? undefined : 'Rating')}
-	aria-describedby={[attributes['aria-describedby'], VALUE_ID].filter(Boolean).join(' ')}
+	{...wrapperAttributes}
+	class={['fs-rating', `size-${size}`, wrapperAttributes?.class]}
+	bind:this={wrapperRef}
+	role="radiogroup"
+	onpointerleave={(e) => invokeHandlers(e, [], [() => (hovered = undefined), wrapperAttributes?.onpointerleave])}
+	aria-labelledby={wrapperAttributes?.['aria-labelledby'] ?? labelContext?.labelId}
+	aria-label={wrapperAttributes?.['aria-label'] ??
+		(wrapperAttributes?.['aria-labelledby'] || labelContext ? undefined : 'Rating')}
+	aria-describedby={[wrapperAttributes?.['aria-describedby'], VALUE_ID].filter(Boolean).join(' ')}
 >
 	<span id={VALUE_ID} hidden>Current rating: {value} out of {_max}.</span>
 	{#each items as item (item)}
@@ -96,35 +118,39 @@
 			{#if custom}
 				{@const Outline = iconOutline ?? StarRegular}
 				{@const Filled = iconFilled ?? StarFilled}
-				<span class="rating-icon custom" class:selected={fill > 0} style="--rating-fill: {fill * 100}%">
+				<span class={['rating-icon custom', { selected: fill > 0 }]} style="--rating-fill: {fill * 100}%">
 					<Outline aria-hidden="true" />
 					<span class="filled"><Filled aria-hidden="true" /></span>
 				</span>
 			{:else}
 				{@const Icon = iconFor(fill)}
-				<span class="rating-icon" class:selected={fill > 0}><Icon aria-hidden="true" /></span>
+				<span class={['rating-icon', { selected: fill > 0 }]}><Icon aria-hidden="true" /></span>
 			{/if}
 			{#if step === 0.5}
 				<input
-					class="half-value"
-					type="radio"
+					{...attributes}
+					{id}
 					{name}
+					class={['half-value', classes]}
+					type="radio"
 					value={item - 0.5}
-					checked={checkedValue === item - 0.5}
 					aria-label={itemLabel(item - 0.5)}
-					onclick={() => value !== item - 0.5 && select(item - 0.5)}
-					onpointerenter={() => (hovered = item - 0.5)}
+					bind:group={checked}
+					onclick={(e) => invokeHandlers(e, [], [() => value !== item - 0.5 && select(item - 0.5), onclick])}
+					onpointerenter={(e) => hover(e, item - 0.5)}
 				/>
 			{/if}
 			<input
-				class="full-value"
-				type="radio"
+				{...attributes}
 				{name}
+				{id}
+				class={['full-value', classes]}
+				type="radio"
 				value={item}
-				checked={checkedValue === item}
 				aria-label={itemLabel(item)}
-				onclick={() => value !== item && select(item)}
-				onpointerenter={() => (hovered = item)}
+				bind:group={checked}
+				onclick={(e) => invokeHandlers(e, [], [() => value !== item && select(item), onclick])}
+				onpointerenter={(e) => hover(e, item)}
 			/>
 		</span>
 	{/each}
@@ -148,6 +174,17 @@
 		&.size-large {
 			--rating-size: 20px;
 		}
+
+		&:is([aria-invalid='true'], :has(input:user-invalid)) .rating-icon {
+			color: var(--fs-system-critical);
+		}
+
+		&:has(input:disabled) .rating-icon {
+			color: var(--fs-text-disabled);
+			& .filled {
+				color: inherit;
+			}
+		}
 	}
 
 	.rating-item {

package/dist/components/rating/rating.svelte.d.ts

@@ -14,6 +14,6 @@ import type { RatingProps } from './types.ts';
  * <Rating bind:value step={0.5} size="medium" />
  * ```
  */
-declare const Rating: import("svelte").Component<RatingProps, {}, "ref" | "value">;
+declare const Rating: import("svelte").Component<RatingProps, {}, "value" | "wrapperRef">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 /** @propsmith RatingProps */
 export type RatingProps = {
     /** The current rating. Fractions are drawn in quarters until the user rates.
@@ -27,18 +27,18 @@ export type RatingProps = {
      * @type Component
      */
     iconOutline?: Component;
-    /** The name of the radio inputs. Generated when not provided. */
-    name?: string;
     /** Generates the accessible label of the radio input for a rating value.
      * @default (rating) => `${rating}`
      */
     itemLabel?: (rating: number) => string;
     /** Called when the user changes the rating. */
     onChange?: (value: number) => void;
-    /** The class to apply to the rating. */
-    class?: string;
-    /** The DOM reference of the rating element.
+    /** The DOM reference of the radiogroup element.
      * @bindable
      */
-    ref?: HTMLElement;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>;
+    wrapperRef?: HTMLDivElement | null;
+    /** The attributes to spread on the radiogroup element. This is where its `aria-label`, `aria-labelledby`, `aria-invalid`, `id` and `class` go.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+} & Omit<HTMLInputAttributes, 'type' | 'value' | 'checked' | 'max' | 'step' | 'size' | 'style' | 'aria-label' | 'aria-invalid' | 'children'>;