@streamscloud/kit 0.80.0 → 0.81.1

package/dist/ui/validatable/cmp.validatable.svelte

@@ -27,10 +27,12 @@ const runValidate = async () => {
 const validate = $derived(debounceMs > 0 ? Utils.debounce(runValidate, debounceMs) : runValidate);
 const runs = (mode) => validateOn.includes(mode);
 const showErrors = $derived(!pendingValidation && !!handler.errors[name] && (disableTouchedTracking || !!handler.touched[name]));
+const messageId = $props.id();
 const field = $derived({
     name,
     value: handler.form[name],
     error: showErrors,
+    'aria-describedby': showErrors ? messageId : undefined,
     on: {
         input: (v) => {
             handler.updateField(name, v);
@@ -64,51 +66,13 @@ const field = $derived({
 });
 </script>
 
-<FieldFrame error={showErrors ? handler.errors[name] : null} errorPlacement={errorPlacement}>
+<FieldFrame error={showErrors ? handler.errors[name] : null} errorPlacement={errorPlacement} messageId={messageId}>
   {@render children(field, pendingValidation)}
 </FieldFrame>
 
 <!--
 @component
-Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
-`Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
-internal `FieldFrame` that renders the error message below the field, placed per `errorPlacement`.
-
-### Usage
-```svelte
-<Validatable {handler} name="email">
-  {#snippet children(field)}
-    <Input {...field} placeholder="Email" />
-  {/snippet}
-</Validatable>
-```
-
-The first snippet argument has shape `{ name, value, error, on: { input, change, blur } }` — the
-minimal interface every kit input supports. Inputs whose primary value prop is not `value`
-(e.g. `Checkbox` uses `checked`) wire the field explicitly inside the snippet.
-
-### Validating flag
-The second snippet argument is true from the value change until the validator has caught up — the
-debounce window included, which `handler.isValidating` does not cover. Drives an inline async
-indicator; everything else it might pair with is already public (`field.error` for the gated error
-state, `handler.errors[name]` for the text, `handler.touched[name]`):
-
-```svelte
-<Validatable {handler} name="handle" debounceMs={400}>
-  {#snippet children(field, validating)}
-    <HandleInput {...field} status={validating ? 'checking' : field.error ? 'taken' : handler.touched.handle ? 'available' : undefined} />
-  {/snippet}
-</Validatable>
-```
-
-With a `validateOn` that excludes `input` and `change`, the flag stays true for the whole typing
-session — pair an async indicator with the default `validateOn` plus a `debounceMs`.
-
-### Validation events
-`validateOn` accepts an array. Default `['input', 'change', 'blur']` validates on every event.
-Pass `['blur']` for blur-only validation, `['change', 'blur']` for the classic "validate on commit" pattern.
-
-### Consumer callbacks
-Pass extra callbacks via `Validatable`'s own `on={...}` — they run AFTER the validation wiring
-and cannot override it.
+Binds any kit input to a `FormValidationHandler` through a render-prop snippet that receives the wired field, and renders the error message below
+it per `errorPlacement`. Inputs stay unaware of validation; around a `FormField`, keep `Validatable` on the outside so the error stays out of the
+field's name.
 -->

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

@@ -3,6 +3,8 @@ export type FieldBinding<V> = {
     name: string;
     value: V;
     error: boolean;
+    /** Id of the visible error message, set only while the error is shown. */
+    'aria-describedby'?: string;
     on: {
         input: (v: V) => void;
         change: (v: V) => void;
@@ -47,8 +49,10 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
             blur?: () => void;
         };
         /**
-         * Receives a wired `FieldBinding<T[K]>` to spread into a kit input, plus a `validating` flag —
-         * true from the value change until the validator has caught up, debounce window included.
+         * Receives a wired `FieldBinding<T[K]>` to spread into a kit input (`aria-describedby` points at the visible error message; inputs without that
+         * prop ignore it; a control whose value prop is not `value`, e.g. `Checkbox`, is wired by hand), plus a `validating` flag — true from the value
+         * change until the validator has caught up, debounce window included, which `handler.isValidating` does not cover. With a `validateOn` that
+         * excludes `input` and `change` the flag stays true for the whole typing session.
          */
         children: Snippet<[FieldBinding<T[K]>, boolean]>;
     };
@@ -72,47 +76,9 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
- * Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
- * `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
- * internal `FieldFrame` that renders the error message below the field, placed per `errorPlacement`.
- *
- * ### Usage
- * ```svelte
- * <Validatable {handler} name="email">
- * {#snippet children(field)}
- *   <Input {...field} placeholder="Email" />
- * {/snippet}
- * </Validatable>
- * ```
- *
- * The first snippet argument has shape `{ name, value, error, on: { input, change, blur } }` — the
- * minimal interface every kit input supports. Inputs whose primary value prop is not `value`
- * (e.g. `Checkbox` uses `checked`) wire the field explicitly inside the snippet.
- *
- * ### Validating flag
- * The second snippet argument is true from the value change until the validator has caught up — the
- * debounce window included, which `handler.isValidating` does not cover. Drives an inline async
- * indicator; everything else it might pair with is already public (`field.error` for the gated error
- * state, `handler.errors[name]` for the text, `handler.touched[name]`):
- *
- * ```svelte
- * <Validatable {handler} name="handle" debounceMs={400}>
- * {#snippet children(field, validating)}
- *   <HandleInput {...field} status={validating ? 'checking' : field.error ? 'taken' : handler.touched.handle ? 'available' : undefined} />
- * {/snippet}
- * </Validatable>
- * ```
- *
- * With a `validateOn` that excludes `input` and `change`, the flag stays true for the whole typing
- * session — pair an async indicator with the default `validateOn` plus a `debounceMs`.
- *
- * ### Validation events
- * `validateOn` accepts an array. Default `['input', 'change', 'blur']` validates on every event.
- * Pass `['blur']` for blur-only validation, `['change', 'blur']` for the classic "validate on commit" pattern.
- *
- * ### Consumer callbacks
- * Pass extra callbacks via `Validatable`'s own `on={...}` — they run AFTER the validation wiring
- * and cannot override it.
+ * Binds any kit input to a `FormValidationHandler` through a render-prop snippet that receives the wired field, and renders the error message below
+ * it per `errorPlacement`. Inputs stay unaware of validation; around a `FormField`, keep `Validatable` on the outside so the error stays out of the
+ * field's name.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;

package/dist/ui/validatable/cmp.validation-error.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldFrame } from './field-frame.svelte';
 let { name, validationResult, errorPlacement = 'overlay', children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
+const messageId = $props.id();
 </script>
 
-<FieldFrame error={errorText} errorPlacement={errorPlacement}>
-  {@render children()}
+<FieldFrame error={errorText} errorPlacement={errorPlacement} messageId={messageId}>
+  {@render children({ 'aria-describedby': errorText ? messageId : undefined })}
 </FieldFrame>
 
 <!--

package/dist/ui/validatable/cmp.validation-error.svelte.d.ts

@@ -13,7 +13,10 @@ declare function $$render<T extends Record<string, unknown>>(): {
          * @default 'overlay'
          */
         errorPlacement?: ErrorPlacement;
-        children: Snippet;
+        /** Receives `aria-describedby` pointing at the visible error message — spread it onto the field. */
+        children: Snippet<[{
+            "aria-describedby"?: string;
+        }]>;
     };
     exports: {};
     bindings: "";

package/dist/ui/validatable/field-frame.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">let { error, errorPlacement = 'overlay', children } = $props();
+<script lang="ts">let { error, errorPlacement = 'overlay', messageId, children } = $props();
 export {};
 </script>
 
 <div class="field-frame" class:field-frame--reserved={errorPlacement === 'reserved'}>
   {@render children()}
   {#if error}
-    <small class="field-frame__message field-frame__message--{errorPlacement}">{error}</small>
+    <small id={messageId} class="field-frame__message field-frame__message--{errorPlacement}">{error}</small>
   {/if}
 </div>
 

package/dist/ui/validatable/field-frame.svelte.d.ts

@@ -5,6 +5,8 @@ type Props = {
     error?: string | null | undefined;
     /** Where the error message sits relative to the field. @default 'overlay' */
     errorPlacement?: ErrorPlacement;
+    /** Id of the message element — the field points `aria-describedby` at it while the error is shown. */
+    messageId: string;
     children: Snippet;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.80.0",
+  "version": "0.81.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",