@streamscloud/kit 0.89.1 → 0.90.0

package/README.md

@@ -15,7 +15,8 @@ without it agent sessions run with no hooks and no shared skills. Re-run after c
 ## Checks
 
 ```sh
-npm run check        # the gate: strict svelte-check + tsc for node files + eslint + prettier --check
+npm run check:fix    # after edits: lint:fix, then check
+npm run check        # the gate, read-only: strict svelte-check + tsc for node files + eslint + prettier --check
 npm run lint:fix     # eslint --fix + prettier --write
 ```
 

package/dist/core/validation/form-validation-handler/form-validation-handler.svelte.d.ts

@@ -25,8 +25,10 @@ export declare class FormValidationHandler<T extends TypeToValidate<T> = TypeToV
         onReset?: () => void;
     });
     get form(): T;
-    get errors(): { [P in keyof Partial<T>]: string; };
-    get touched(): Record<keyof T, boolean>;
+    get errors(): Readonly<{
+        [P in keyof Partial<T>]: string;
+    }>;
+    get touched(): Readonly<Record<keyof T, boolean>>;
     get isValidating(): boolean;
     get isSubmitting(): boolean;
     updateField: <K extends keyof T>(field: K, value: T[K]) => void;

package/dist/core/validation/form-validation-handler/form-validation-handler.svelte.js

@@ -167,7 +167,7 @@ export class FormValidationHandler {
         this.updateTouched(field, true);
         this._isValidating = true;
         const error = await this._validator.validateAt(this._form, field);
-        ValidationUtils.update(this.errors, field, error || '');
+        ValidationUtils.update(this._errors, field, error || '');
         this._isValidating = false;
     };
     stringify = (value) => {

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

@@ -0,0 +1,15 @@
+export type FormFieldLabelContext = {
+    readonly labelId: string | undefined;
+    /** The first mounted claimant gets the label; the returned release hands it to the next one still mounted. */
+    claimControl: (id: () => string) => () => void;
+};
+/** Offers a visible label to every kit control rendered inside the calling component. */
+export declare const provideFormFieldLabel: (formFieldLabel: FormFieldLabelContext) => void;
+/** The label of the surrounding FormField, or `undefined` outside one. */
+export declare const getFormFieldLabel: () => FormFieldLabelContext | undefined;
+/** For a text input: the surrounding FormField label points its `for` at this id while the input is mounted. */
+export declare const claimFormFieldLabel: (controlId: () => string) => void;
+/** The `aria-labelledby` of a control that is not a text input: the explicit one, else the FormField label's id — unless an explicit `aria-label` names it. */
+export declare const resolveAriaLabelledby: (formFieldLabel: FormFieldLabelContext | undefined, ariaLabel: string | undefined, ariaLabelledby: string | undefined) => string | undefined;
+/** Below the calling component no control is named by the surrounding FormField label — for a field that renders other fields in its own panel. */
+export declare const stopFormFieldLabelHere: () => void;

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

@@ -0,0 +1,20 @@
+import { getContext, setContext } from 'svelte';
+// Svelte context despite sc-frontend-svelte's "no context API": the least invasive way for FormField to reach a kit control at any depth (see the ADR).
+const KEY = Symbol('form-field-label');
+/** Offers a visible label to every kit control rendered inside the calling component. */
+export const provideFormFieldLabel = (formFieldLabel) => {
+    setContext(KEY, formFieldLabel);
+};
+/** The label of the surrounding FormField, or `undefined` outside one. */
+export const getFormFieldLabel = () => getContext(KEY);
+/** For a text input: the surrounding FormField label points its `for` at this id while the input is mounted. */
+export const claimFormFieldLabel = (controlId) => {
+    const formFieldLabel = getFormFieldLabel();
+    $effect(() => formFieldLabel?.claimControl(controlId));
+};
+/** The `aria-labelledby` of a control that is not a text input: the explicit one, else the FormField label's id — unless an explicit `aria-label` names it. */
+export const resolveAriaLabelledby = (formFieldLabel, ariaLabel, ariaLabelledby) => ariaLabelledby ?? (ariaLabel ? undefined : formFieldLabel?.labelId);
+/** Below the calling component no control is named by the surrounding FormField label — for a field that renders other fields in its own panel. */
+export const stopFormFieldLabelHere = () => {
+    setContext(KEY, undefined);
+};

package/dist/ui/_internal/form-field-label-context/index.d.ts

@@ -0,0 +1 @@
+export { claimFormFieldLabel, getFormFieldLabel, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere, type FormFieldLabelContext } from './form-field-label-context.svelte';

package/dist/ui/_internal/form-field-label-context/index.js

@@ -0,0 +1 @@
+export { claimFormFieldLabel, getFormFieldLabel, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from './form-field-label-context.svelte';

package/dist/ui/checkbox/cmp.checkbox.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { getFormFieldLabel } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_12_regular.svg?raw';
 import IconSubtract from '@fluentui/svg-icons/icons/subtract_16_regular.svg?raw';
 const { checked, variant = 'default', size = 'md', disabled = false, label, title, on } = $props();
 const isOn = $derived(checked === true);
 const isIndeterminate = $derived(checked === 'indeterminate');
 const ariaChecked = $derived(isIndeterminate ? 'mixed' : isOn ? 'true' : 'false');
+const formFieldLabel = getFormFieldLabel();
 const handleClick = (event) => {
     event.stopPropagation();
     if (disabled) {
@@ -21,7 +23,14 @@ const handleClick = (event) => {
   class:check--indeterminate={isIndeterminate}
   class:check--disabled={disabled}
   title={title}>
-  <button type="button" class="check__box" role="checkbox" aria-checked={ariaChecked} disabled={disabled} onclick={handleClick}>
+  <button
+    type="button"
+    class="check__box"
+    role="checkbox"
+    aria-checked={ariaChecked}
+    aria-labelledby={label ? undefined : formFieldLabel?.labelId}
+    disabled={disabled}
+    onclick={handleClick}>
     <span class="check__mark" class:check__mark--visible={isOn || isIndeterminate} aria-hidden="true">
       <Icon src={isIndeterminate ? IconSubtract : IconCheckmark} />
     </span>

package/dist/ui/chip-group/cmp.chip-group.svelte

@@ -1,6 +1,8 @@
-<script lang="ts" generics="T">import { Icon } from '../icon';
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_12_regular.svg?raw';
-const { chips, variant = 'soft', size = 'md', disabled = false, compare = (a, b) => a === b, ...mode } = $props();
+const { chips, variant = 'soft', size = 'md', disabled = false, compare = (a, b) => a === b, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...mode } = $props();
+const formFieldLabel = getFormFieldLabel();
 const isSelected = (chip) => {
     if (mode.type === 'multi') {
         return mode.value.some((v) => compare(v, chip.value));
@@ -22,7 +24,12 @@ const handleClick = (chip) => {
 };
 </script>
 
-<div class="chip-group chip-group--{size} chip-group--{variant}" class:chip-group--disabled={disabled} role={mode.type === 'multi' ? 'group' : 'radiogroup'}>
+<div
+  class="chip-group chip-group--{size} chip-group--{variant}"
+  class:chip-group--disabled={disabled}
+  role={mode.type === 'multi' ? 'group' : 'radiogroup'}
+  aria-label={ariaLabel}
+  aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
   {#each chips as chip (chip.value)}
     {@const selected = isSelected(chip)}
     <button

package/dist/ui/chip-group/cmp.chip-group.svelte.d.ts

@@ -6,10 +6,11 @@ declare function $$render<T>(): {
         variant?: "soft" | "solid";
         /** @default 'md' */
         size?: "sm" | "md";
-        /** 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;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
     } & {
         /** Single-select mode. */
         type: "single";
@@ -23,10 +24,11 @@ declare function $$render<T>(): {
         variant?: "soft" | "solid";
         /** @default 'md' */
         size?: "sm" | "md";
-        /** 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;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
     } & {
         /** Multi-select mode. */
         type: "multi";

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

@@ -1,4 +1,5 @@
 <script lang="ts">import { ColorHelper } from '../../core/utils';
+import { getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
 import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
@@ -8,7 +9,9 @@ import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import { colord } from 'colord';
 import AwesomeColorPicker from 'svelte-awesome-color-picker';
-let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon, 'aria-label': ariaLabel } = $props();
+let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $props();
+const formFieldLabel = getFormFieldLabel();
+stopFormFieldLabelHere();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
@@ -45,7 +48,14 @@ const onColorPickerInput = ({ hex }) => {
 </script>
 
 <div class="color-picker">
-  <Popover position="bottom-start" keepOpen panel={false} fixedPosition disabled={disabled} aria-label={ariaLabel}>
+  <Popover
+    position="bottom-start"
+    keepOpen
+    panel={false}
+    fixedPosition
+    disabled={disabled}
+    aria-label={ariaLabel}
+    aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
     {#snippet trigger()}
       <div class="color-picker__trigger">
         {#if children}

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

@@ -9,9 +9,7 @@ type Props = {
     size?: 'sm' | 'md' | 'lg';
     /** Default color shown in the picker UI when value is empty (does not set the value itself). */
     defaultColor?: string;
-    /** Show a × clear button on the trigger to wipe the value. */
     clearable?: boolean;
-    /** Visual disabled state — popover won't open. */
     disabled?: boolean;
     /** Placeholder shown on the swatch trigger when no value is selected. @default localized "Not set" */
     placeholder?: string;
@@ -25,8 +23,8 @@ type Props = {
      * droplet glyph. Same shape as Input's `icon` prop (Rule 9).
      */
     previewIcon?: string | Snippet;
-    /** Accessible name of the trigger — otherwise it is announced by its color value only. */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
 };
 /**
  * A color picker with an Input-shaped swatch trigger that opens a popover hosting a full hex/rgb picker

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

@@ -1,10 +1,12 @@
-<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+<script lang="ts">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { InputClearButton } from '../_internal/input-clear-button';
 import { Icon, IconSlot } from '../icon';
 import DatePickerCalendar from './cmp.date-picker-calendar.svelte';
 import { DatePickerLocalization } from './date-picker-localization';
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import IconCalendar from '@fluentui/svg-icons/icons/calendar_16_regular.svg?raw';
-const { size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, min, max, locale, name, id = null, autofocus = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, icon, ...mode } = $props();
+const { size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, min, max, locale, name, id = null, autofocus = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, icon, ...mode } = $props();
+const formFieldLabel = getFormFieldLabel();
 const localization = new DatePickerLocalization();
 /** Resolved locale: explicit prop or `'en-US'` default. */
 const resolvedLocale = $derived(locale ?? 'en-US');
@@ -134,6 +136,7 @@ $effect(() => {
     aria-haspopup="dialog"
     aria-expanded={open}
     aria-label={ariaLabel ?? name}
+    aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}
     aria-describedby={ariaDescribedby}
     onclick={readonly ? undefined : toggleOpen}>
     {#if icon}
@@ -156,8 +159,7 @@ $effect(() => {
   {/if}
 
   {#if open}
-    <!-- preventDefault cancels an ancestor <label>'s activation — a dead-space click inside the panel would forward to the trigger and close the calendar. FormField guards its own; a consumer's plain <label> does not. -->
-    <div bind:this={panelEl} class="date-picker__panel" role="presentation" onclick={(e) => e.preventDefault()} onkeydown={() => undefined}>
+    <div bind:this={panelEl} class="date-picker__panel">
       <DatePickerCalendar
         selectedDate={selectedDate}
         minDate={minDate}

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

@@ -5,9 +5,7 @@ type BaseProps = {
     size?: 'sm' | 'md' | 'lg';
     placeholder?: string;
     disabled?: boolean;
-    /** Non-clickable but still visible. Trigger button is disabled (like `disabled`) but cursor stays default. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations, hidden clear button. */
     inert?: boolean;
     error?: boolean;
     /** Strip border + background + focus underline. */
@@ -16,17 +14,14 @@ type BaseProps = {
     min?: LikeDate;
     /** Latest selectable date (inclusive). */
     max?: LikeDate;
-    /**
-     * BCP-47 locale tag. Drives month/weekday labels, trigger date formatting AND first day of week.
-     * When omitted, uses an opinionated default: `en-US` formatting + Monday-first calendar.
-     * When passed (even `'en-US'`), first day of week is derived from the locale via `Intl.Locale.getWeekInfo()`.
-     */
+    /** Omitted: `en-US` formatting with Monday first. Passed (even `'en-US'`): first day of week comes from the locale. */
     locale?: string;
     /** Native form name. When set, a hidden input with the ISO value is rendered for form submission. */
     name?: string;
     id?: string | null;
     autofocus?: boolean;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;
     /**
@@ -36,7 +31,6 @@ type BaseProps = {
     icon?: IconProp;
 };
 type ClearableProps = BaseProps & {
-    /** Value can be cleared to `null`. Trigger shows a clear (X) button when set. */
     clearable: true;
     value: LikeDate | null | undefined;
     on?: {
@@ -44,7 +38,6 @@ type ClearableProps = BaseProps & {
     };
 };
 type RequiredProps = BaseProps & {
-    /** Value is required. No clear button. */
     clearable: false;
     value: LikeDate;
     on?: {

package/dist/ui/date-picker/cmp.date-time-picker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import DatePicker from './cmp.date-picker.svelte';
 import TimePicker from './cmp.time-picker.svelte';
-const { value, size = 'md', datePlaceholder = '', min, step = 30, on } = $props();
+const { value, size = 'md', datePlaceholder = '', min, step = 30, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, on } = $props();
 const DEFAULT_TIME = '12:00';
 const MINUTES_PER_DAY = 24 * 60;
 const AFTER_LAST_SLOT = '24:00';
@@ -72,9 +72,25 @@ const onTimeChange = (next) => {
 </script>
 
 <div class="date-time date-time--{size}" class:date-time--date-only={!currentDate}>
-  <DatePicker clearable size={size} value={value} placeholder={datePlaceholder} min={firstAllowedDate ?? undefined} on={{ change: onDateChange }} />
+  <DatePicker
+    clearable
+    size={size}
+    value={value}
+    placeholder={datePlaceholder}
+    min={firstAllowedDate ?? undefined}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
+    on={{ change: onDateChange }} />
   {#if currentDate}
-    <TimePicker clearable={false} size={size} step={step} min={timeMin} value={timeValue} on={{ change: onTimeChange }} />
+    <TimePicker
+      clearable={false}
+      size={size}
+      step={step}
+      min={timeMin}
+      value={timeValue}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      on={{ change: onTimeChange }} />
   {/if}
 </div>
 

package/dist/ui/date-picker/cmp.date-time-picker.svelte.d.ts

@@ -4,14 +4,12 @@ type Props = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     datePlaceholder?: string;
-    /**
-     * Earliest selectable date-time (inclusive). On its day only the `step` slots at or after it are offered and an
-     * earlier time is raised to the first of them; a day with no slot left is not selectable. A `value` before the first
-     * allowed day still renders, but its time list is empty — only picking an allowed date changes it.
-     */
+    /** Earliest selectable date-time, inclusive: on its day only the slots from it on are offered, and a day with no slot left is disabled. */
     min?: LikeDate;
     /** Minute interval for the time list. @default 30 */
     step?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     on?: {
         change?: (value: string | null) => void;
     };

package/dist/ui/date-picker/cmp.time-picker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Singleselect } from '../select';
-const { size = 'md', step = 30, min, placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, id, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { size = 'md', step = 30, min, placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, id, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const MINUTES_PER_DAY = 24 * 60;
 const pad = (n) => n.toString().padStart(2, '0');
 const stepOptions = $derived.by(() => {
@@ -44,6 +44,7 @@ const emit = (next) => {
       id={id}
       name={name}
       aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
       aria-required={ariaRequired}
       on={{ change: emit }} />
@@ -62,6 +63,7 @@ const emit = (next) => {
       id={id}
       name={name}
       aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
       aria-required={ariaRequired}
       on={{ change: emit }} />

package/dist/ui/date-picker/cmp.time-picker.svelte.d.ts

@@ -7,20 +7,18 @@ type BaseProps = {
     min?: string;
     placeholder?: string;
     disabled?: boolean;
-    /** Focusable, value visible, but selection cannot change. */
     readonly?: boolean;
-    /** Non-interactive, unstyled view-only mode. */
     inert?: boolean;
     error?: boolean;
     borderless?: boolean;
     id?: string;
     name?: string;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;
 };
 type ClearableProps = BaseProps & {
-    /** Value can be cleared to `null`; shows a clear (X) button when set. */
     clearable: true;
     value: string | null | undefined;
     on?: {
@@ -28,7 +26,6 @@ type ClearableProps = BaseProps & {
     };
 };
 type RequiredProps = BaseProps & {
-    /** Value is required. No clear button. */
     clearable: false;
     value: string;
     on?: {

package/dist/ui/document-tabs/types.d.ts

@@ -15,6 +15,5 @@ export type DocumentTab<TValue = unknown> = {
     tone?: DocumentTabTone;
     /** Full text for a label that truncates — the complete file path, typically. */
     tooltip?: string;
-    /** Non-interactive — click does nothing. */
     disabled?: boolean;
 };

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

@@ -13,16 +13,16 @@ let { handler, name, label, hint, required = false, validateOn, debounceMs, disa
   on={on}>
   {#snippet children(binding, validating)}
     <FormField label={label} hint={hint} required={required}>
-      <span class="form-field-validatable__control">{@render field(binding, validating)}</span>
+      {#snippet children(ids)}
+        <span class="form-field-validatable__control">{@render field(binding, validating, ids)}</span>
+      {/snippet}
     </FormField>
   {/snippet}
 </Validatable>
 
 <!--
 @component
-FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message outside the `<label>`, so
-screen readers announce it as the field's description rather than as part of the field's name. Composing them by hand keeps that only with `Validatable` on
-the outside and `FormField` inside its snippet.
+FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message below the field.
 -->
 
 <style>.form-field-validatable__control {

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

@@ -1,5 +1,6 @@
 import type { FormValidationHandler } from '../../core/validation';
 import { type ErrorPlacement, type FieldBinding, type ValidateOnEvent } from '../validatable';
+import { type FormFieldIds } from './cmp.form-field.svelte';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>, K extends keyof T & string>(): {
     props: {
@@ -27,8 +28,8 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
             change?: (value: T[K]) => void;
             blur?: () => void;
         };
-        /** Receives the wired `FieldBinding<T[K]>` — spread or wire onto the kit input — plus the `validating` flag. */
-        children: Snippet<[FieldBinding<T[K]>, boolean]>;
+        /** Receives the wired `FieldBinding<T[K]>` — spread or wire onto the kit input — the `validating` flag, and `FormField`'s ids. */
+        children: Snippet<[FieldBinding<T[K]>, boolean, FormFieldIds]>;
     };
     exports: {};
     bindings: "";
@@ -49,11 +50,7 @@ interface $$IsomorphicComponent {
     <T extends Record<string, unknown>, K extends keyof T & string>(internal: unknown, props: ReturnType<__sveltets_Render<T, K>['props']> & {}): ReturnType<__sveltets_Render<T, K>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
-/**
- * FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message outside the `<label>`, so
- * screen readers announce it as the field's description rather than as part of the field's name. Composing them by hand keeps that only with `Validatable` on
- * the outside and `FormField` inside its snippet.
- */
+/** FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message below the field. */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;
 export default Cmp;

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