@streamscloud/kit 0.89.1 → 0.90.1

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,17 @@
+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;
+/** Whether `target` sits in a `<label>` whose `for` control lies inside `controlRoot` — a press there belongs to that control, not outside it. */
+export declare const isInsideLabelOf: (target: Node, controlRoot: HTMLElement | undefined) => boolean;
+/** 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,22 @@
+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);
+/** Whether `target` sits in a `<label>` whose `for` control lies inside `controlRoot` — a press there belongs to that control, not outside it. */
+export const isInsideLabelOf = (target, controlRoot) => target instanceof Element && !!controlRoot?.contains(target.closest('label')?.control ?? null);
+/** 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, isInsideLabelOf, 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, isInsideLabelOf, 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 { claimFormFieldLabel, getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
 import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
@@ -8,7 +9,11 @@ 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();
+const triggerId = $props.id();
+claimFormFieldLabel(() => triggerId);
+stopFormFieldLabelHere();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
@@ -45,7 +50,15 @@ 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}
+    id={triggerId}
+    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,15 @@
-<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+<script lang="ts">import { claimFormFieldLabel, getFormFieldLabel, isInsideLabelOf, 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 fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 const localization = new DatePickerLocalization();
 /** Resolved locale: explicit prop or `'en-US'` default. */
 const resolvedLocale = $derived(locale ?? 'en-US');
@@ -93,7 +98,7 @@ $effect(() => {
         if (!target) {
             return;
         }
-        if (triggerEl?.contains(target) || panelEl?.contains(target)) {
+        if (triggerEl?.contains(target) || panelEl?.contains(target) || isInsideLabelOf(target, triggerEl)) {
             return;
         }
         open = false;
@@ -127,13 +132,14 @@ $effect(() => {
     bind:this={triggerEl}
     type="button"
     class="date-picker__trigger"
-    id={id}
+    id={controlId}
     disabled={disabled}
     inert={inert}
     autofocus={autofocus}
     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 +162,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;