@streamscloud/kit 0.89.1 → 0.90.0

package/dist/ui/form-field/cmp.form-field.svelte.d.ts

@@ -1,25 +1,26 @@
+export type FormFieldIds = {
+    /** For a control outside the kit — kit controls pick the label up by themselves. */
+    labelId: string | undefined;
+};
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
+    /** Label rendered above the field. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
     label?: string | Snippet;
-    /** Affordance pinned to the trailing edge of the label row — rendered only alongside a `label`. String renders the standard info icon — keyboard-focusable, named by the text — with that text in a tooltip; Snippet renders anything (button, link, badge). Clicks inside never reach the field. */
+    /** Affordance pinned to the trailing edge of the label row — rendered only alongside a `label`. String renders the standard info icon — keyboard-focusable, named by the text — with that text in a tooltip; Snippet renders anything (button, link, badge). */
     hint?: string | Snippet;
     /** Appends a danger-colored `*` to the label. Purely visual — does not enforce anything. */
     required?: boolean;
-    /**
-     * Input slot. The wrapping `<label>` implicitly associates with the first labelable control inside (HTML standard), so no id wiring is needed.
-     * A control made of several fields (`SegmentedControl`, `PinInput`) is not named by it — give it its own `aria-label`.
-     */
-    children: Snippet;
+    /** Field slot. A kit control inside is named by the label on its own: a text input through `<label for>`, anything else through `aria-labelledby`. */
+    children: Snippet<[FormFieldIds]>;
 };
 /**
- * FormField — a label above an input slot. The root is a `<label>`, so the first labelable control inside is associated without id wiring; a label click never
- * re-opens an already expanded popup field. It renders no errors — put it inside `Validatable` (or use `FormFieldValidatable`) for that.
+ * FormField — a label above a field slot; a kit control inside is named by the label on its own, a control outside the kit takes the slot's `labelId` as its
+ * `aria-labelledby`. Errors are `FormFieldValidatable`'s job.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
+ * | `--sc-kit--form-field--gap` | Vertical gap between label and the field slot | `0.375rem` (6px) |
  * | `--sc-kit--form-field--hint--color` | Hint color (inherited by the default info icon) | `--sc-kit--color--text--muted` |
  * | `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |

package/dist/ui/form-field/form-field-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { FormFieldLabelContext } from '../_internal/form-field-label-context';
+export type FormFieldLabel = FormFieldLabelContext & {
+    /** The id the label's `for` points at — the first mounted text input that claimed the label, if any. */
+    readonly controlId: string | undefined;
+};
+export declare const createFormFieldLabel: (id: string, hasLabel: () => boolean) => FormFieldLabel;

package/dist/ui/form-field/form-field-label.svelte.js

@@ -0,0 +1,19 @@
+import { untrack } from 'svelte';
+export const createFormFieldLabel = (id, hasLabel) => {
+    const labelId = $derived(hasLabel() ? id : undefined);
+    let claimants = $state.raw([]);
+    return {
+        get labelId() {
+            return labelId;
+        },
+        get controlId() {
+            return claimants[0]?.();
+        },
+        claimControl: (controlId) => {
+            claimants = [...untrack(() => claimants), controlId];
+            return () => {
+                claimants = untrack(() => claimants).filter((claimant) => claimant !== controlId);
+            };
+        }
+    };
+};

package/dist/ui/form-field/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FormField } from './cmp.form-field.svelte';
+export { default as FormField, type FormFieldIds } from './cmp.form-field.svelte';
 export { default as FormFieldValidatable } from './cmp.form-field-validatable.svelte';

package/dist/ui/icon-picker/cmp.icon-picker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Icon } from '../icon';
 import { Singleselect } from '../select';
 import { isIconPickerGroup } from './types';
-let { value, icons, placeholder = '', disabled = false, error = false, borderless = false, cols = 7, on } = $props();
+let { value, icons, placeholder = '', disabled = false, error = false, borderless = false, cols = 7, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, on } = $props();
 const toOption = (i) => ({ value: i.value, label: i.label, disabled: i.disabled });
 const selectOptions = $derived(icons.map((item) => (isIconPickerGroup(item) ? { label: item.label, options: item.options.map(toOption) } : toOption(item))));
 const iconBySrc = $derived(new Map(icons.flatMap((item) => isIconPickerGroup(item) ? item.options.map((o) => [o.value, o.src]) : [[item.value, item.src]])));
@@ -15,6 +15,8 @@ const iconBySrc = $derived(new Map(icons.flatMap((item) => isIconPickerGroup(ite
   disabled={disabled}
   error={error}
   borderless={borderless}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   on={{ change: (v) => on?.change?.(v) }}>
   {#snippet selectionSnippet({ option })}
     {@const src = iconBySrc.get(option.value)}

package/dist/ui/icon-picker/cmp.icon-picker.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type IconPickerItem } from './types';
 type Props = {
     value: string | null;
-    /** Flat list of icons or a list of labelled groups. */
+    /** Flat list of icons or a list of labeled groups. */
     icons: IconPickerItem[];
     placeholder?: string;
     disabled?: boolean;
@@ -10,6 +10,8 @@ type Props = {
     borderless?: boolean;
     /** Tiles per row in the popover grid. @default 7 */
     cols?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     on?: {
         change?: (value: string | null) => void;
     };

package/dist/ui/input/cmp.input.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">import { HtmlHelper, StringHelper } from '../../core/utils';
+import { claimFormFieldLabel } from '../_internal/form-field-label-context';
 import { InputClearButton } from '../_internal/input-clear-button';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 import { InputPasswordToggle } from '../_internal/input-password-toggle';
 import { IconSlot } from '../icon';
 const { value, type = 'text', size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, emoji = false, trim = true, placeholder = '', title = '', name = '', id = null, autofocus = false, maxLength = null, autocomplete, autocapitalize, inputmode, enterkeyhint, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on, icon, iconPosition = 'leading', secondaryIcon, prefix, suffix } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let inputEl = $state.raw(undefined);
 let passwordRevealed = $state(false);
 const valueParsed = $derived(value ?? '');
@@ -121,7 +125,7 @@ const focusInput = () => inputEl?.focus();
     class="input__el"
     type={effectiveType}
     name={name}
-    id={id}
+    id={controlId}
     placeholder={placeholder}
     disabled={disabled}
     readonly={readonly}

package/dist/ui/input/types.d.ts

@@ -10,15 +10,12 @@ export type InputProps = {
     /** @default 'md' */
     size?: InputSize;
     disabled?: boolean;
-    /** Non-editable but selectable. The value is still submitted with a form. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations, hidden clear button. */
     inert?: boolean;
     /** Visual error state — also sets `aria-invalid="true"`. */
     error?: boolean;
     /** Strip border + background + focus underline. */
     borderless?: boolean;
-    /** Show the default × clear button when value is non-empty. */
     clearable?: boolean;
     /** Show the emoji-picker trigger inside the input. */
     emoji?: boolean;

package/dist/ui/numeral-input/cmp.numeral-input.svelte

@@ -1,8 +1,12 @@
-<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+<script lang="ts">import { claimFormFieldLabel } from '../_internal/form-field-label-context';
+import { InputClearButton } from '../_internal/input-clear-button';
 import { IconSlot } from '../icon';
 import { formatNumeral, NumeralThousandGroupStyles, registerCursorTracker } from 'cleave-zen';
 import { untrack } from 'svelte';
 const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, minExclusive = false, maxExclusive = false, decimals = 2, suffix, hideResolvedValue = false, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let inputEl = $state.raw(undefined);
 let focused = $state(false);
 let typedValue = $state(undefined);
@@ -136,7 +140,7 @@ const initInput = (node) => {
     type="text"
     inputmode="decimal"
     name={name}
-    id={id}
+    id={controlId}
     placeholder={placeholder}
     disabled={disabled}
     readonly={readonly}

package/dist/ui/numeral-input/cmp.numeral-input.svelte.d.ts

@@ -3,9 +3,7 @@ type BaseProps = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
-    /** Non-editable but selectable; value still submitted with a form. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations, no clear button. */
     inert?: boolean;
     /** Visual error state — also sets `aria-invalid="true"`. */
     error?: boolean;
@@ -41,7 +39,6 @@ type BaseProps = {
     secondaryIcon?: IconProp;
 };
 type ClearableProps = BaseProps & {
-    /** Value can be cleared to `null`. Trigger shows an × button when set. */
     clearable: true;
     value: number | null | undefined;
     on?: {
@@ -55,7 +52,6 @@ type ClearableProps = BaseProps & {
     };
 };
 type RequiredProps = BaseProps & {
-    /** Value is required; no clear button. */
     clearable: false;
     value: number;
     on?: {

package/dist/ui/option-pill/cmp.option-pill.svelte.d.ts

@@ -2,7 +2,6 @@ import type { OptionPillOption } from './types';
 declare function $$render<T>(): {
     props: ({
         options: OptionPillOption<T>[];
-        /** Disable the whole group. */
         disabled?: boolean;
         /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
         compare?: (a: T, b: T) => boolean;
@@ -15,7 +14,6 @@ declare function $$render<T>(): {
         };
     }) | ({
         options: OptionPillOption<T>[];
-        /** Disable the whole group. */
         disabled?: boolean;
         /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
         compare?: (a: T, b: T) => boolean;

package/dist/ui/page-layout/cmp.page-layout.svelte.d.ts

@@ -9,9 +9,8 @@ type Props = {
     /** Editor chrome — the fixed panels-toggle + close pair. Set it to render both buttons; omit it entirely for a non-editor page. */
     editorControls?: EditorControls;
     scrollable?: boolean;
-    /** Sets `inert` on the whole layout — header and body stop taking focus, clicks and assistive-tech interaction. */
     inert?: boolean;
-    /** Shows a `Spinner` centered over the layout; `blocking` also makes the whole layout `inert` and dims it. @default false */
+    /** Shows a `Spinner` centered over the layout; `blocking` also makes the whole layout `inert` and dims it. */
     loading?: PageLoading;
 };
 /**

package/dist/ui/pin-input/cmp.pin-input.svelte

@@ -1,5 +1,7 @@
-<script lang="ts">import { PinInputLocalization } from './pin-input-localization';
-const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, on } = $props();
+<script lang="ts">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { PinInputLocalization } from './pin-input-localization';
+const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, on } = $props();
+const formFieldLabel = getFormFieldLabel();
 const localization = new PinInputLocalization();
 let cells = $state([]);
 const cellValue = (i) => value[i] ?? '';
@@ -59,7 +61,13 @@ const handleFocus = (e) => {
 };
 </script>
 
-<div class="pin-input" class:pin-input--disabled={disabled} class:pin-input--error={error} role="group" aria-label={ariaLabel}>
+<div
+  class="pin-input"
+  class:pin-input--disabled={disabled}
+  class:pin-input--error={error}
+  role="group"
+  aria-label={ariaLabel}
+  aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
   {#each Array(length) as _, i (i)}
     <input
       aria-label={localization.cellLabel(i + 1, length)}

package/dist/ui/pin-input/cmp.pin-input.svelte.d.ts

@@ -7,8 +7,8 @@ type Props = {
     disabled?: boolean;
     /** Visual error state — also sets `aria-invalid="true"` on each cell. */
     error?: boolean;
-    /** Accessible label for the cell group. Consumer-provided (no kit default). */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     on?: {
         input?: (value: string) => void;

package/dist/ui/popover/cmp.popover.svelte

@@ -4,7 +4,7 @@ import { validateTrigger } from './validate-trigger';
 import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size } from '@floating-ui/dom';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import { tick } from 'svelte';
-let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, tabbable = true, on, children, trigger, 'aria-label': ariaLabel } = $props();
+let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, tabbable = true, on, children, trigger, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $props();
 let opened = $state(false);
 let triggerEl = $state.raw(undefined);
 let contentEl = $state.raw(undefined);
@@ -182,6 +182,7 @@ const handleBackdropClick = (e) => {
     disabled={disabled}
     tabindex={tabbable ? undefined : -1}
     aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
     aria-haspopup="true"
     aria-expanded={opened}
     onclick={handleTriggerClick}

package/dist/ui/popover/cmp.popover.svelte.d.ts

@@ -27,14 +27,10 @@ type Props = {
         closed?: () => void;
     };
     children: Snippet;
-    /**
-     * Custom trigger content; defaults to a chevron-down icon. Renders inside the trigger `<button>`,
-     * so content MUST be non-interactive — for a button-looking trigger use `Button` with
-     * `type="presentational"`. Nesting an interactive element triggers a dev-only warning.
-     */
+    /** Content of the trigger `<button>`, so non-interactive only — `Button type="presentational"` for a button look. @default chevron-down icon */
     trigger?: Snippet;
-    /** Accessible name for the trigger button — required when the trigger content carries no text (an icon-only trigger). */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
 };
 /**
  * Popover — floating content anchored to a trigger element. Click trigger to open;

package/dist/ui/radio/cmp.radio.svelte

@@ -1,5 +1,7 @@
-<script lang="ts">const { selected, label, disabled = false, title, name, on } = $props();
+<script lang="ts">import { getFormFieldLabel } from '../_internal/form-field-label-context';
+const { selected, label, disabled = false, title, name, on } = $props();
 const ariaLabel = $derived(typeof label === 'string' ? label : name);
+const formFieldLabel = getFormFieldLabel();
 const handleClick = (event) => {
     event.stopPropagation();
     if (disabled || selected) {
@@ -7,11 +9,18 @@ const handleClick = (event) => {
     }
     on?.change?.();
 };
-export {};
 </script>
 
 <label class="radio" class:radio--on={selected} class:radio--disabled={disabled} title={title}>
-  <button type="button" class="radio__dot" role="radio" aria-checked={selected} aria-label={ariaLabel} disabled={disabled} onclick={handleClick}>
+  <button
+    type="button"
+    class="radio__dot"
+    role="radio"
+    aria-checked={selected}
+    aria-label={ariaLabel}
+    aria-labelledby={label || ariaLabel ? undefined : formFieldLabel?.labelId}
+    disabled={disabled}
+    onclick={handleClick}>
     <span class="radio__inner" class:radio__inner--visible={selected} aria-hidden="true"></span>
   </button>
   {#if typeof label === 'string'}

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">import { AppTheme } from '../../core/theme';
 import { HtmlHelper } from '../../core/utils';
+import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 import { HtmlBlock } from '../html-block';
 import { RichTextInputLocalization } from './rich-text-input-localization';
 import { addValidatedLinkButton } from './validated-link-button';
 import { onDestroy, onMount } from 'svelte';
-const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, autofocus = false, rows = 0, placeholder = '', options, conf, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
-const id = `ti-${crypto.randomUUID()}`;
+const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, autofocus = false, rows = 0, placeholder = '', options, conf, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const id = $props.id();
+const formFieldLabel = getFormFieldLabel();
 let elementRef = $state.raw(undefined);
 let toolbarRef = $state.raw(undefined);
 let editorRef = $state.raw(null);
@@ -142,13 +144,23 @@ const onEmojiSelected = (emojiChar) => insertEmoji(emojiChar);
   class:rich-text-input--readonly={readonly}
   class:rich-text-input--inert={inert}
   class:rich-text-input--error={error}
-  class:rich-text-input--borderless={borderless}
-  aria-label={ariaLabel}
-  aria-describedby={ariaDescribedby}
-  aria-required={ariaRequired ? 'true' : undefined}>
+  class:rich-text-input--borderless={borderless}>
   <div class="rich-text-input__toolbar" bind:this={toolbarRef}></div>
   <HtmlBlock>
-    <div class="rich-text-input__input" id={id} bind:this={elementRef}></div>
+    <div
+      bind:this={elementRef}
+      class="rich-text-input__input"
+      id={id}
+      role="textbox"
+      tabindex={disabled || inert ? undefined : 0}
+      aria-multiline="true"
+      aria-label={ariaLabel}
+      aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}
+      aria-describedby={ariaDescribedby}
+      aria-required={ariaRequired ? 'true' : undefined}
+      aria-invalid={error ? 'true' : undefined}
+      aria-readonly={readonly ? 'true' : undefined}>
+    </div>
   </HtmlBlock>
   {#if emoji}
     <span class="rich-text-input__emoji">

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -6,9 +6,7 @@ type Props = {
     /** @default 'md' — controls the editor root font size (and downstream rem-based sizing). */
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
-    /** Non-editable but still visible (mirrors `disabled` in editor mode). */
     readonly?: boolean;
-    /** Visual display mode — no focus, no hover, hidden affordances. */
     inert?: boolean;
     /** Visual error state. */
     error?: boolean;
@@ -24,6 +22,7 @@ type Props = {
     /** Escape-hatch for extra HugeRTE init options, merged AFTER kit defaults. */
     conf?: Partial<RawEditorOptions>;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;
     on?: {

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">"use strict";
-const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, 'aria-label': ariaLabel, on } = $props();
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, on } = $props();
+const formFieldLabel = getFormFieldLabel();
 const segmentIdPrefix = $props.id();
 const segmentEls = [];
 const isActive = (segment) => (compare ? compare(value, segment.value) : value === segment.value);
@@ -51,7 +52,8 @@ const handleKeydown = (event, from) => {
   class="segmented-control segmented-control--{variant} segmented-control--{size}"
   class:segmented-control--full={fullWidth}
   role="radiogroup"
-  aria-label={ariaLabel}>
+  aria-label={ariaLabel}
+  aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
   {#each segments as segment, i (i)}
     {@const segmentLabelId = `${segmentIdPrefix}-${i}`}
     <button

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -1,7 +1,6 @@
 export type Segment<TValue = unknown> = {
     value: TValue;
     label: string;
-    /** Non-interactive — click does nothing. */
     disabled?: boolean;
     /** Visual flag — colors the segment in the danger tone (validation hint). */
     error?: boolean;
@@ -23,8 +22,8 @@ declare function $$render<T>(): {
         fullWidth?: boolean;
         /** Equality for object T values. @default reference equality (`===`) */
         compare?: (a: T, b: T) => boolean;
-        /** Accessible name of the group. */
         'aria-label'?: string;
+        'aria-labelledby'?: string;
         on?: {
             change?: (value: T) => void;
         };

package/dist/ui/select/cmp.input-suggest.svelte

@@ -2,10 +2,14 @@
 </script>
 
 <script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { claimFormFieldLabel } from '../_internal/form-field-label-context';
 import { InputClearButton } from '../_internal/input-clear-button';
 import { IconSlot } from '../icon';
 import { default as SelectListbox } from './select-listbox.svelte';
 const { value, suggestions, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, trim = true, icon, name, id, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let inputEl = $state.raw(undefined);
 let rootEl = $state.raw(undefined);
 let isOpen = $state(false);
@@ -241,7 +245,7 @@ const handlePickRow = (row) => {
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired ? 'true' : undefined}
     aria-invalid={error ? 'true' : undefined}
-    id={id}
+    id={controlId}
     name={name}
     autocomplete={autocomplete}
     placeholder={placeholder}

package/dist/ui/select/cmp.input-suggest.svelte.d.ts

@@ -17,15 +17,12 @@ type Props = {
     size?: 'sm' | 'md' | 'lg';
     placeholder?: string;
     disabled?: boolean;
-    /** Non-editable but selectable; the popover never opens. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations. */
     inert?: boolean;
     /** Visual error state — also sets `aria-invalid="true"`. */
     error?: boolean;
     /** Strip border + background + focus underline. */
     borderless?: boolean;
-    /** Show the × clear button when the value is non-empty. */
     clearable?: boolean;
     /**
      * Strip leading / trailing whitespace when the value is committed — focus leaving the control or

package/dist/ui/select/cmp.multiselect-tree.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="T">import { default as MultiselectBase } from './multiselect-base.svelte';
 import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
 import { isSelectGroup } from './types';
-const { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 // Include flat roots, not only groups — else a childless root can't be picked as a create-parent.
@@ -70,6 +70,7 @@ $effect(() => {
   name={name}
   autocomplete={autocomplete}
   aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   aria-describedby={ariaDescribedby}
   aria-required={ariaRequired}
   on={{

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -21,11 +21,8 @@ declare function $$render<T>(): {
         size?: "sm" | "md" | "lg";
         /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
         placeholder?: string;
-        /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
         disabled?: boolean;
-        /** Read-only — value visible, but selection cannot change. @default false */
         readonly?: boolean;
-        /** Inert subtree — non-interactive but unstyled. @default false */
         inert?: boolean;
         /** Visual error state (accent border + aria-invalid). @default false */
         error?: boolean;
@@ -81,6 +78,7 @@ declare function $$render<T>(): {
         name?: string;
         autocomplete?: HTMLInputAttributes["autocomplete"];
         'aria-label'?: string;
+        'aria-labelledby'?: string;
         'aria-describedby'?: string;
         'aria-required'?: boolean;
         on?: {

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">import { InputClearButton } from '../_internal/input-clear-button';
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { InputClearButton } from '../_internal/input-clear-button';
 import { Spinner } from '../_internal/spinner';
 import { Icon, IconSlot } from '../icon';
 import { createSelectCore } from './select-core.svelte';
@@ -9,7 +10,8 @@ import { defaultCompare } from './select-internals';
 import { default as SelectListbox } from './select-listbox.svelte';
 import { SingleselectLocalization } from './singleselect-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
-const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const formFieldLabel = getFormFieldLabel();
 const localization = new SingleselectLocalization();
 const selectedOption = $derived(mode.value ?? null);
 const selectionLabel = $derived(selectedOption?.label ?? '');
@@ -101,6 +103,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     aria-activedescendant={core.isOpen ? `${listboxId}-row-${core.highlight}` : undefined}
     aria-autocomplete="list"
     aria-label={ariaLabel ?? name}
+    aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     aria-invalid={error ? 'true' : undefined}

package/dist/ui/select/cmp.singleselect-async.svelte.d.ts

@@ -15,7 +15,6 @@ declare function $$render<T>(): {
         /** Internal — set by the sync `Singleselect` wrapper. Async typeahead is always searchable. @default true */
         searchable?: boolean;
     } & {
-        /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
         clearable: true;
         /** Currently selected option (pre-resolved — labels render before the first fetch lands). `null` when nothing is picked. */
         value: SelectOption<T> | null | undefined;
@@ -33,7 +32,6 @@ declare function $$render<T>(): {
         /** Internal — set by the sync `Singleselect` wrapper. Async typeahead is always searchable. @default true */
         searchable?: boolean;
     } & {
-        /** Discriminator — `false` removes the X clear button; `value` must always be a non-null `SelectOption<T>`. */
         clearable: false;
         /** Currently selected option — non-null. */
         value: SelectOption<T>;

package/dist/ui/select/cmp.singleselect.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="T">import { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
 import { isSelectGroup } from './types';
-const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 const resolvedValue = $derived.by(() => {
@@ -64,6 +64,7 @@ $effect(() => {
     name={name}
     autocomplete={autocomplete}
     aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     on={{
@@ -97,6 +98,7 @@ $effect(() => {
     name={name}
     autocomplete={autocomplete}
     aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     on={{

package/dist/ui/select/cmp.singleselect.svelte.d.ts

@@ -11,7 +11,6 @@ declare function $$render<T>(): {
         /** When true, typing filters the options; when false, it is a click/keyboard-only picker. @default true */
         searchable?: boolean;
     } & {
-        /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
         clearable: true;
         /** Current selection by value. `null` when nothing is picked. */
         value: T | null | undefined;
@@ -27,7 +26,6 @@ declare function $$render<T>(): {
         /** When true, typing filters the options; when false, it is a click/keyboard-only picker. @default true */
         searchable?: boolean;
     } & {
-        /** Discriminator — `false` hides the X button; `value` must always be a non-null `T`. */
         clearable: false;
         /** Current selection by value — non-null. */
         value: T;