fluentui-svelte 0.5.0 → 0.7.0

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
      */

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

@@ -6,12 +6,14 @@ A Label provides an accessible caption for a form control. It supports different
 
 ```svelte
 <script>
-	import { Label } from 'fluentui-svelte';
+	import { Label, TextBox } from 'fluentui-svelte';
 </script>
 
-<Label label="Email" />
+<Label label="Email"><TextBox /></Label>
 ```
 
+The root is a `div` by default; `as="span"` selects a span. The text label and the field are siblings. Label is for the first field inside it, which takes the id of the label when it has none of its own; pass `for` to point the label at another field. Inside a Label, the own text of a Checkbox, RadioButton or ToggleSwitch is not rendered: the Label names the control. `size` and `weight` style only the label text. `class`, other label attributes and `ref` apply to the label; use `wrapperAttributes` and `wrapperRef` for the root.
+
 ## Examples
 
 ### Size
@@ -19,9 +21,9 @@ A Label provides an accessible caption for a form control. It supports different
 Use the `size` prop to control the label text size.
 
 ```svelte
-<Label size="small" label="Small" />
-<Label size="medium" label="Medium" />
-<Label size="large" label="Large" />
+<Label size="small" label="Small"><TextBox /></Label>
+<Label size="medium" label="Medium"><TextBox /></Label>
+<Label size="large" label="Large"><TextBox /></Label>
 ```
 
 ### Weight
@@ -29,8 +31,8 @@ Use the `size` prop to control the label text size.
 Use the `weight` prop to switch between a regular and a semibold label.
 
 ```svelte
-<Label weight="regular" label="Regular" />
-<Label weight="semibold" label="Semibold" />
+<Label weight="regular" label="Regular"><TextBox /></Label>
+<Label weight="semibold" label="Semibold"><TextBox /></Label>
 ```
 
 ### Label Position
@@ -38,10 +40,10 @@ Use the `weight` prop to switch between a regular and a semibold label.
 Use the `labelPosition` prop to place the label text relative to the wrapped control.
 
 ```svelte
-<Label labelPosition="before" label="Before" />
-<Label labelPosition="after" label="After" />
-<Label labelPosition="above" label="Above" />
-<Label labelPosition="below" label="Below" />
+<Label labelPosition="before" label="Before"><TextBox /></Label>
+<Label labelPosition="after" label="After"><TextBox /></Label>
+<Label labelPosition="above" label="Above"><TextBox /></Label>
+<Label labelPosition="below" label="Below"><TextBox /></Label>
 ```
 
 ### Required
@@ -49,23 +51,74 @@ Use the `labelPosition` prop to place the label text relative to the wrapped con
 Pass a `required` object to mark the label as required and render a required indicator.
 
 ```svelte
-<Label label="Email" required={{ message: 'Required field' }} />
+<Label label="Email" required={{ message: 'Required field' }}><TextBox required /></Label>
+```
+
+### Tooltip
+
+Pass `tooltipContent`, as text, a snippet or a component, to show more about the field in a tooltip from a badge after the label text. The badge is a button named after the label; `tooltipBadge` replaces its info icon, and `tooltipButtonAttributes` its `aria-label`. Keep links and buttons out of the tooltip.
+
+```svelte
+<Label
+	label="Bank"
+	labelPosition="above"
+	required={{ message: 'Required field' }}
+	tooltipContent="The bank that holds the account the payments come from."
+>
+	<Dropdown placeholder="Bank Name">
+		<DropdownOption value="pichincha">Banco Pichincha</DropdownOption>
+		<DropdownOption value="guayaquil">Banco Guayaquil</DropdownOption>
+	</Dropdown>
+</Label>
+<Label
+	label="IBAN"
+	labelPosition="above"
+	tooltipBadge={QuestionCircleRegular}
+	tooltipContent="The international number of the account, as your bank prints it."
+>
+	<TextBox placeholder="EC00 0000 0000 0000" />
+</Label>
 ```
 
+### Other form controls
+
+```svelte
+<Label label="Accept terms"><Checkbox /></Label>
+<Label label="Email updates"><ToggleSwitch /></Label>
+<Label label="Standard plan"><RadioButton name="plan" value="standard" /></Label>
+<Label label="Country">
+	<Dropdown><DropdownOption value="bo">Bolivia</DropdownOption></Dropdown>
+</Label>
+```
+
+Label renders its text and field as siblings, and is for the first field inside it, which takes the id of the label when it has none of its own. Pass for to point the label at another field. HTML attributes, class and ref apply to the label text element; wrapperAttributes and wrapperRef apply to the container. Size and weight affect only the label text.
+
+A control inside Label needs no id or for. The own text of a Checkbox, RadioButton or ToggleSwitch inside it is not rendered: the Label names the control. A native `<label for>` outside a Label names a picker (Dropdown, TagPicker, DatePicker, TimePicker, CalendarDatePicker) only once the page hydrates, because the picker reads it from the page: when rendering on the server, use Label or pass `aria-labelledby`. A field with an id of its own keeps it: when the text comes before the field (`labelPosition` `'before'` or `'above'`, the default), pass that id to `for` too, or the label the server writes points at no field until the page hydrates.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:LabelProps -->
 
-| Name                         | Type                                                          | Default           | Description                                                               |
-| ---------------------------- | ------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------- |
-| `label`                      | `string`                                                      | `'Label Element'` | The text of the label. Falls back to the rendered children.               |
-| `size`                       | `'small'` &#124; `'medium'` &#124; `'large'`                  | `'medium'`        | The size of the label text.                                               |
-| `weight`                     | `'regular'` &#124; `'semibold'`                               | `'regular'`       | The weight of the label text.                                             |
-| `labelPosition`              | `'before'` &#124; `'after'` &#124; `'above'` &#124; `'below'` | `'after'`         | Where the label sits relative to the field it describes.                  |
-| `required`                   | `{ abbr?: string; message: string; }`                         |                   | Marks the field as required, and describes why through the given message. |
-| `disabled`                   | `boolean`                                                     |                   | Renders the label as disabled, to match the field it describes.           |
-| `ref` _bindable_             | `HTMLLabelElement`                                            |                   | The DOM reference of the label element.                                   |
-| Element Attributes (`label`) |                                                               |                   |                                                                           |
+| Name                                | Type                                                          | Default            | Description                                                                                                                                                                                                                                                                                         |
+| ----------------------------------- | ------------------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`                                | `'div'` &#124; `'span'`                                       | `'div'`            | The element used to wrap the label and its field.                                                                                                                                                                                                                                                   |
+| `children`                          | `Snippet`                                                     |                    | The field described by the label, rendered beside the label text.                                                                                                                                                                                                                                   |
+| `wrapperRef` _bindable_             | `HTMLDivElement` &#124; `HTMLSpanElement`                     |                    | The DOM reference of the wrapper element.                                                                                                                                                                                                                                                           |
+| `wrapperAttributes`                 | `HTMLAttributes`                                              |                    | The attributes to spread on the wrapper element.                                                                                                                                                                                                                                                    |
+| `label`                             | `string`                                                      | `'Label Element'`  | The text of the label.                                                                                                                                                                                                                                                                              |
+| `size`                              | `'small'` &#124; `'medium'` &#124; `'large'`                  | `'medium'`         | The size of the label text.                                                                                                                                                                                                                                                                         |
+| `weight`                            | `'regular'` &#124; `'semibold'`                               | `'regular'`        | The weight of the label text.                                                                                                                                                                                                                                                                       |
+| `labelPosition`                     | `'before'` &#124; `'after'` &#124; `'above'` &#124; `'below'` | `'after'`          | Where the label sits relative to the field it describes.                                                                                                                                                                                                                                            |
+| `required`                          | `{ abbr?: string; message: string; }`                         |                    | Marks the field as required, and describes why through the given message.                                                                                                                                                                                                                           |
+| `disabled`                          | `boolean`                                                     |                    | Renders the label as disabled, to match the field it describes.                                                                                                                                                                                                                                     |
+| `ref` _bindable_                    | `HTMLLabelElement` &#124; `null`                              |                    | The DOM reference of the label element.                                                                                                                                                                                                                                                             |
+| `id`                                | `string`                                                      | `Generated`        | The id of the label element. A control inside the label is named after it, including a picker whose visible control stands in for its native field.                                                                                                                                                 |
+| `for`                               | `string`                                                      | `The field inside` | The id of the field the label is for. Without it, the label is for the first field inside it, which takes a generated id when it has none of its own. With `labelPosition` `before` or `above` and a field that has an id of its own, pass that id here, so the server renders the association too. |
+| `tooltipContent`                    | `string` &#124; `Snippet` &#124; `Component`                  |                    | More about the field, in a tooltip shown from a badge after the label text, on hover and on focus. People cannot move into a tooltip, so keep links and buttons out of it.                                                                                                                          |
+| `tooltipBadge`                      | `Snippet` &#124; `Component`                                  | `InfoRegular`      | What the badge that shows the tooltip displays. Only rendered with `tooltipContent`.                                                                                                                                                                                                                |
+| `tooltipProps`                      | `TooltipProps`                                                |                    | The props to spread on the tooltip.                                                                                                                                                                                                                                                                 |
+| `tooltipButtonAttributes`           | `HTMLButtonAttributes`                                        |                    | The attributes to spread on the button of the badge. Its name is the label text followed by its `aria-label`.                                                                                                                                                                                       |
+| `HTMLLabelAttributes` without `for` |                                                               |                    |                                                                                                                                                                                                                                                                                                     |
 
 <!-- /props:LabelProps -->

package/dist/components/label/label-context.d.ts

@@ -0,0 +1,14 @@
+export type LabelContext = {
+    /** The id of the label text, which names a visible control that stands in for a native field. */
+    readonly labelId: string;
+    /** The id the label is for: a field with no id of its own takes it. */
+    readonly fieldId: string;
+    /** Makes a field, through the id it reports, the one the label is for. Only the first field to ask gets it. */
+    claim: (id: () => string | null | undefined) => boolean;
+};
+export declare const getLabelContext: () => LabelContext | null, setLabelContext: (context: LabelContext) => void;
+/**
+ * The Label a field is inside, when the field is the first one there to claim it: the label is then
+ * for that field. Outside a Label, and for any later field, it is `null`, and the field works on its own.
+ */
+export declare function claimLabel(id: () => string | null | undefined): Omit<LabelContext, 'claim'> | null;

package/dist/components/label/label-context.js

@@ -0,0 +1,10 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getLabelContext, setLabelContext] = createFSContext();
+/**
+ * The Label a field is inside, when the field is the first one there to claim it: the label is then
+ * for that field. Outside a Label, and for any later field, it is `null`, and the field works on its own.
+ */
+export function claimLabel(id) {
+    const label = getLabelContext();
+    return label?.claim(id) ? label : null;
+}