@streamscloud/kit 0.89.1 → 0.90.1

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

@@ -1,83 +1,30 @@
-<script lang="ts" module>"use strict";
-// HTML's interactive-content list, verbatim: exactly what makes the browser skip label activation. A wider selector (role, tabindex) skips the guard on clicks the browser still forwards.
-const INTERACTIVE_CONTENT = 'a[href], audio[controls], button, details, embed, iframe, img[usemap], input:not([type="hidden"]), label, select, textarea, video[controls]';
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { provideFormFieldLabel } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import { Tooltip } from '../tooltip';
+import { createFormFieldLabel } from './form-field-label.svelte';
 import IconInfo from '@fluentui/svg-icons/icons/info_20_regular.svg?raw';
 let { label, hint, required = false, children } = $props();
-let rootEl = $state.raw(undefined);
-let swallowLabelActivation = false;
-// Unhandled, the click activates the labelled field (a checkbox would toggle); cancelling it on interactive content would kill a link's navigation.
-const swallowClick = (event) => {
-    event.stopPropagation();
-    // This click never reaches guardLabelActivation, so the flag would outlive the gesture and swallow a later keyboard-activated click.
-    swallowLabelActivation = false;
-    if (forwardsLabelActivation(event.target)) {
-        event.preventDefault();
-    }
-};
-const forwardsLabelActivation = (target) => {
-    if (!(target instanceof Element)) {
-        return false;
-    }
-    const interactive = target.closest(INTERACTIVE_CONTENT);
-    return !interactive || interactive === rootEl;
-};
-// Registered at mount, so it precedes the capture-phase dismissal a Popover registers on open: by click time the popup has closed and the forwarded activation would reopen it.
-$effect(() => {
-    const armLabelActivation = (event) => {
-        swallowLabelActivation = false;
-        if (event.button !== 0 || !rootEl || !(event.target instanceof Node) || !rootEl.contains(event.target)) {
-            return;
-        }
-        swallowLabelActivation = !!rootEl.querySelector('[aria-haspopup][aria-expanded="true"]');
-    };
-    // A keyboard-activated click brings no pointerdown of its own and would otherwise inherit the flag from a gesture that produced no click. Only the two keys that synthesize one: any key would also disarm a pointer gesture that is still in flight.
-    const disarmLabelActivation = (event) => {
-        if (event.key !== 'Enter' && event.key !== ' ') {
-            return;
-        }
-        swallowLabelActivation = false;
-    };
-    window.addEventListener('pointerdown', armLabelActivation, true);
-    window.addEventListener('keydown', disarmLabelActivation, true);
-    return () => {
-        window.removeEventListener('pointerdown', armLabelActivation, true);
-        window.removeEventListener('keydown', disarmLabelActivation, true);
-    };
-});
-const guardLabelActivation = (event) => {
-    const swallow = swallowLabelActivation;
-    swallowLabelActivation = false;
-    if (!forwardsLabelActivation(event.target)) {
-        return;
-    }
-    // The label's control is the group's first radio: forwarding the click would select it instead of keeping the current choice.
-    const radio = rootEl?.control?.getAttribute('role') === 'radio' ? rootEl.control : null;
-    if (swallow || radio) {
-        event.preventDefault();
-    }
-    radio?.closest('[role="radiogroup"]')?.querySelector('[role="radio"][tabindex="0"]')?.focus();
-};
+const id = $props.id();
+const formFieldLabel = createFormFieldLabel(id, () => !!label);
+provideFormFieldLabel(formFieldLabel);
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<label bind:this={rootEl} class="form-field" onclick={guardLabelActivation}>
+<div class="form-field">
   {#if label}
-    <span class="form-field__label">
-      {#if typeof label === 'string'}
-        {label}
-      {:else}
-        {@render label()}
-      {/if}
-      {#if required}<span class="form-field__required" aria-hidden="true">*</span>{/if}
+    <div class="form-field__header">
+      <label class="form-field__label" for={formFieldLabel.controlId} id={formFieldLabel.labelId}>
+        {#if typeof label === 'string'}
+          {label}
+        {:else}
+          {@render label()}
+        {/if}
+        {#if required}<span class="form-field__required" aria-hidden="true">*</span>{/if}
+      </label>
       {#if hint}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <span class="form-field__hint" onclick={swallowClick}>
+        <span class="form-field__hint">
           {#if typeof hint === 'string'}
             <Tooltip text={hint}>
               <span class="form-field__hint-trigger" role="button" tabindex="0" aria-label={hint}>
@@ -89,21 +36,21 @@ const guardLabelActivation = (event) => {
           {/if}
         </span>
       {/if}
-    </span>
+    </div>
   {/if}
 
-  {@render children()}
-</label>
+  {@render children({ labelId: formFieldLabel.labelId })}
+</div>
 
 <!--
 @component
-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` |
@@ -122,14 +69,19 @@ re-opens an already expanded popup field. It renders no errors — put it inside
   flex-direction: column;
   gap: var(--_ff--gap);
 }
-.form-field__label {
-  display: inline-flex;
+.form-field__header {
+  display: flex;
   align-items: center;
   gap: 0.25rem;
   color: var(--_ff--label-color);
   font-size: var(--_ff--label-font-size);
   font-weight: var(--_ff--label-font-weight);
 }
+.form-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .form-field__required {
   color: var(--_ff--required-color);
 }

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

@@ -1,10 +1,11 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { isInsideLabelOf } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import { isIgnored } from './popover-ignore';
 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, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $props();
 let opened = $state(false);
 let triggerEl = $state.raw(undefined);
 let contentEl = $state.raw(undefined);
@@ -106,7 +107,7 @@ $effect(() => {
         if (!target) {
             return;
         }
-        if (triggerEl?.contains(target) || contentEl?.contains(target)) {
+        if (triggerEl?.contains(target) || contentEl?.contains(target) || isInsideLabelOf(target, triggerEl)) {
             return;
         }
         close();
@@ -179,9 +180,11 @@ const handleBackdropClick = (e) => {
     type="button"
     class="popover__trigger"
     class:popover__trigger--fill={fillContainer}
+    id={id}
     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,11 @@ 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). */
+    id?: string;
     '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}