@streamscloud/kit 0.52.0 → 0.54.0

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { BreadcrumbLocalization } from './breadcrumb-localization';
-let { items, separator = '/' } = $props();
+let { items, separator = '/', underline = 'hover' } = $props();
 const localization = new BreadcrumbLocalization();
 </script>
 
-<div class="breadcrumb" role="navigation" aria-label={localization.navLabel}>
+<div class="breadcrumb breadcrumb--underline-{underline}" role="navigation" aria-label={localization.navLabel}>
   {#each items as item, i (item.label + i)}
     {#if i > 0}<span class="breadcrumb__separator" aria-hidden="true">{separator}</span>{/if}
     {#if i === items.length - 1}
@@ -26,7 +26,8 @@ A horizontal trail of crumbs ending at the current page. Each non-last item rend
 - `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
 - plain text `<span>` when neither is set.
 
-The last item is always plain text with `aria-current="page"`.
+The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
+links show their underline on hover only (default), always, or never.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -46,6 +47,8 @@ The last item is always plain text with `aria-current="page"`.
   --_breadcrumb--link-color: var(--sc-kit--breadcrumb--link--color, var(--sc-kit--color--text--secondary));
   --_breadcrumb--link-color-hover: var(--sc-kit--breadcrumb--link--color--hover, var(--sc-kit--color--accent));
   --_breadcrumb--current-color: var(--sc-kit--breadcrumb--current--color, var(--sc-kit--color--text--primary));
+  --_breadcrumb--link-text-decoration: none;
+  --_breadcrumb--link-text-decoration-hover: underline;
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
@@ -54,14 +57,20 @@ The last item is always plain text with `aria-current="page"`.
   line-height: var(--sc-kit--leading--tight);
   color: var(--_breadcrumb--color);
 }
+.breadcrumb--underline-always {
+  --_breadcrumb--link-text-decoration: underline;
+}
+.breadcrumb--underline-never {
+  --_breadcrumb--link-text-decoration-hover: none;
+}
 .breadcrumb__link {
   color: var(--_breadcrumb--link-color);
-  text-decoration: none;
+  text-decoration: var(--_breadcrumb--link-text-decoration);
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .breadcrumb__link:hover {
   color: var(--_breadcrumb--link-color-hover);
-  text-decoration: underline;
+  text-decoration: var(--_breadcrumb--link-text-decoration-hover);
 }
 .breadcrumb__link:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);

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

@@ -3,6 +3,8 @@ type Props = {
     items: BreadcrumbItem[];
     /** Separator character between crumbs. @default '/' */
     separator?: string;
+    /** When the crumb links show their underline: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
 };
 /**
  * A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
@@ -11,7 +13,8 @@ type Props = {
  * - `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
  * - plain text `<span>` when neither is set.
  *
- * The last item is always plain text with `aria-current="page"`.
+ * The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
+ * links show their underline on hover only (default), always, or never.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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

@@ -156,7 +156,7 @@ $effect(() => {
   {/if}
 
   {#if open}
-    <!-- preventDefault cancels FormField's <label> activation — a dead-space click inside the panel would forward to the trigger and close the calendar. -->
+    <!-- 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}>
       <DatePickerCalendar
         selectedDate={selectedDate}

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

@@ -28,6 +28,8 @@ FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<V
 </FormFieldValidatable>
 ```
 
+The snippet takes a second `validating: boolean` argument — true from the value change until the validator has caught up, debounce window included. See `Validatable` for what it drives.
+
 Identical visual output to:
 ```svelte
 <FormField label="Email" required>

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

@@ -27,8 +27,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. */
-        children: Snippet<[FieldBinding<T[K]>]>;
+        /** Receives the wired `FieldBinding<T[K]>` — spread or wire onto the kit input — plus the `validating` flag. */
+        children: Snippet<[FieldBinding<T[K]>, boolean]>;
     };
     exports: {};
     bindings: "";
@@ -61,6 +61,8 @@ interface $$IsomorphicComponent {
  * </FormFieldValidatable>
  * ```
  *
+ * The snippet takes a second `validating: boolean` argument — true from the value change until the validator has caught up, debounce window included. See `Validatable` for what it drives.
+ *
  * Identical visual output to:
  * ```svelte
  * <FormField label="Email" required>

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

@@ -1,10 +1,14 @@
+<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>
+
 <script lang="ts">import { DomHelper } from '../../core/utils';
 import { Icon } from '../icon';
 import { Tooltip } from '../tooltip';
 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 labelRowEl = $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) => {
@@ -16,15 +20,40 @@ const swallowClick = (event) => {
     }
     event.preventDefault();
 };
-const isLabelChrome = (target) => target instanceof Node && (target === rootEl || !!labelRowEl?.contains(target));
-// Read at mousedown: by click time the popup field has already dismissed itself and the forwarded activation would reopen it.
-const rememberLabelActivation = (event) => {
-    swallowLabelActivation = isLabelChrome(event.target) && !!rootEl?.querySelector('[aria-haspopup][aria-expanded="true"]');
+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 (swallow && isLabelChrome(event.target)) {
+    if (swallow && forwardsLabelActivation(event.target)) {
         event.preventDefault();
     }
 };
@@ -32,9 +61,9 @@ const guardLabelActivation = (event) => {
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<label bind:this={rootEl} class="form-field" onmousedown={rememberLabelActivation} onclick={guardLabelActivation}>
+<label bind:this={rootEl} class="form-field" onclick={guardLabelActivation}>
   {#if label}
-    <span bind:this={labelRowEl} class="form-field__label">
+    <span class="form-field__label">
       {#if typeof label === 'string'}
         {label}
       {:else}
@@ -64,7 +93,7 @@ const guardLabelActivation = (event) => {
 @component
 FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
 
-Clicking the label opens a popup field inside it (select, date picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space.
+Clicking the label opens a popup field inside it (select, date picker, color picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space. The same guard keeps a drag that starts inside an expanded panel from closing it, so a color picker's gradient and its hue / alpha bars stay usable when the pointer leaves the panel. A nested `<label>` — a `Checkbox` sitting next to the popup field — keeps its own activation either way. HTML forbids a `<label>` inside a `<label>`, so that pairing is tolerated rather than recommended: give the `Checkbox` its own row outside the `FormField` when you can.
 
 `hint` pins an affordance to the trailing edge of the label row — a string gives the standard info icon with a tooltip, a snippet takes over completely (button, link, badge). It rides on the label row, so it renders only when `label` is set. Clicks inside the hint are swallowed, so an interactive hint never activates the labelled field.
 

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

@@ -12,7 +12,7 @@ type Props = {
 /**
  * FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
  *
- * Clicking the label opens a popup field inside it (select, date picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space.
+ * Clicking the label opens a popup field inside it (select, date picker, color picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space. The same guard keeps a drag that starts inside an expanded panel from closing it, so a color picker's gradient and its hue / alpha bars stay usable when the pointer leaves the panel. A nested `<label>` — a `Checkbox` sitting next to the popup field — keeps its own activation either way. HTML forbids a `<label>` inside a `<label>`, so that pairing is tolerated rather than recommended: give the `Checkbox` its own row outside the `FormField` when you can.
  *
  * `hint` pins an affordance to the trailing edge of the label row — a string gives the standard info icon with a tooltip, a snippet takes over completely (button, link, badge). It rides on the label row, so it renders only when `label` is set. Clicks inside the hint are swallowed, so an interactive hint never activates the labelled field.
  *

package/dist/ui/link/cmp.link.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { href, variant = 'default', external = false, on, children } = $props();
+<script lang="ts">let { href, variant = 'default', underline = 'hover', external = false, on, children } = $props();
 const isAnchor = $derived(href !== undefined);
 const target = $derived(isAnchor && external ? '_blank' : undefined);
 const rel = $derived(isAnchor && external ? 'noopener noreferrer' : undefined);
@@ -6,11 +6,11 @@ export {};
 </script>
 
 {#if isAnchor}
-  <a class="link link--{variant}" href={href} target={target} rel={rel} onclick={(e) => on?.click?.(e)}>
+  <a class="link link--{variant} link--underline-{underline}" href={href} target={target} rel={rel} onclick={(e) => on?.click?.(e)}>
     {@render children()}
   </a>
 {:else}
-  <button type="button" class="link link--{variant}" onclick={(e) => on?.click?.(e)}>
+  <button type="button" class="link link--{variant} link--underline-{underline}" onclick={(e) => on?.click?.(e)}>
     {@render children()}
   </button>
 {/if}
@@ -19,8 +19,8 @@ export {};
 @component
 A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
 sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
-navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
-underline.
+navigation hints (e.g. "delete this account"). All variants animate color on hover; `underline`
+decides whether the underline shows on hover only (default), always, or never.
 
 Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
 useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The
@@ -40,30 +40,38 @@ useful for callback-only actions that read as inline links (e.g. "edit this", "s
   --_link--color-subtle-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--text--primary));
   --_link--color-danger: var(--sc-kit--link--color, var(--sc-kit--color--danger));
   --_link--color-danger-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--danger--hover));
-  text-decoration: none;
+  --_link--text-decoration: none;
+  --_link--text-decoration-hover: underline;
+  text-decoration: var(--_link--text-decoration);
   cursor: pointer;
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
+.link:hover {
+  text-decoration: var(--_link--text-decoration-hover);
+}
+.link--underline-always {
+  --_link--text-decoration: underline;
+}
+.link--underline-never {
+  --_link--text-decoration-hover: none;
+}
 .link--default {
   color: var(--_link--color-default);
 }
 .link--default:hover {
   color: var(--_link--color-default-hover);
-  text-decoration: underline;
 }
 .link--subtle {
   color: var(--_link--color-subtle);
 }
 .link--subtle:hover {
   color: var(--_link--color-subtle-hover);
-  text-decoration: underline;
 }
 .link--danger {
   color: var(--_link--color-danger);
 }
 .link--danger:hover {
   color: var(--_link--color-danger-hover);
-  text-decoration: underline;
 }
 .link:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);

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

@@ -5,6 +5,8 @@ type Props = {
     href?: string;
     /** Visual variant. @default 'default' */
     variant?: LinkVariant;
+    /** When the underline shows: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
     /** External link — opens in a new tab and adds `rel="noopener noreferrer"`. Ignored in button mode. */
     external?: boolean;
     on?: {
@@ -15,8 +17,8 @@ type Props = {
 /**
  * A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
  * sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
- * navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
- * underline.
+ * navigation hints (e.g. "delete this account"). All variants animate color on hover; `underline`
+ * decides whether the underline shows on hover only (default), always, or never.
  *
  * Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
  * useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The

package/dist/ui/select/select-listbox.svelte

@@ -120,11 +120,14 @@ $effect(() => {
     id={listboxId}
     tabindex="-1"
     onclick={(e) => {
-      // preventDefault cancels FormField's <label> activation — stopPropagation alone doesn't.
+      // preventDefault cancels an ancestor <label>'s activation — stopPropagation alone doesn't. FormField guards its own; a consumer's plain <label> does not.
       e.preventDefault();
       e.stopPropagation();
     }}
-    onmousedown={(e) => e.stopPropagation()}
+    onmousedown={(e) => {
+      // Keeps the trigger root's mousedown preventDefault (select-core) off panel presses: without it a nested input in the panel never takes the caret and text selection dies.
+      e.stopPropagation();
+    }}
     onkeydown={() => undefined}>
     {#if headerSnippet}
       <div class="select-listbox__header">{@render headerSnippet()}</div>

package/dist/ui/table/index.d.ts

@@ -2,7 +2,7 @@ export { default as Table } from './cmp.table.svelte';
 export { default as DraggableTable } from './cmp.table-draggable.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
-export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
+export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableItemAction, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
 export type { TableGroupAction } from './table-group-actions/types.svelte';
 export { TableModel } from './table-model.svelte';
 export { pickDirectionFromOrderByState, generatePagination } from './service';

package/dist/ui/table/table-cells/table-by-cell.svelte

@@ -14,6 +14,7 @@ const getDateValueForColumn = (column, item) => {
 };
 const dateTime = $derived(getDateValueForColumn(column, item));
 const by = $derived(column.byValueFactory ? column.byValueFactory(item) : null);
+const underline = $derived(column.underline ?? 'hover');
 const getHref = (by) => {
     return column.hrefFactory ? column.hrefFactory(by) : null;
 };
@@ -26,7 +27,7 @@ const navigateToUser = (event, by) => {
 };
 </script>
 
-<span class="table-by-cell">
+<span class="table-by-cell table-by-cell--underline-{underline}">
   {#if dateTime}
     {#if by}
       <span class="table-by-cell__by">
@@ -73,6 +74,8 @@ const navigateToUser = (event, by) => {
 <style>.table-by-cell {
   --_table-by-cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
   --_table-by-cell--no-date--color: var(--sc-kit--color--text--muted);
+  --_table-by-cell--name-text-decoration: none;
+  --_table-by-cell--name-text-decoration-hover: underline;
   height: 3.125em;
   min-height: 3.125em;
   max-height: 3.125em;
@@ -113,12 +116,18 @@ const navigateToUser = (event, by) => {
   white-space: nowrap;
   overflow: hidden;
 }
+.table-by-cell--underline-always {
+  --_table-by-cell--name-text-decoration: underline;
+}
+.table-by-cell--underline-never {
+  --_table-by-cell--name-text-decoration-hover: none;
+}
 .table-by-cell__name--link {
   color: inherit;
-  text-decoration: none;
+  text-decoration: var(--_table-by-cell--name-text-decoration);
 }
 .table-by-cell__name--link:hover {
-  text-decoration: underline;
+  text-decoration: var(--_table-by-cell--name-text-decoration-hover);
 }
 .table-by-cell__by-image {
   display: flex;

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

@@ -65,6 +65,8 @@ export interface ITableByColumn<T> extends ITableColumn<T> {
         id: string;
         handle: string;
     }) => void) | null;
+    /** When the person-name link shows its underline: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
 }
 export interface ITableButtonColumn<T> extends ITableColumn<T> {
     type: 'button';
@@ -83,7 +85,7 @@ export interface ITableIconColumn<T> extends ITableColumn<T> {
 export interface ITableImageColumn<T> extends ITableColumn<T> {
     type: 'image';
     valueFactory?: ((item: T) => string) | null;
-    format?: TableImageColumnFormat;
+    format?: 'circle' | 'square-contain' | 'square-cover' | 'vertical-cover' | 'horizontal-cover';
     coverAspectRatio?: number;
     sizeCss?: string;
 }
@@ -98,13 +100,11 @@ export interface ITableSnippetColumn<T> extends ITableColumn<T> {
 }
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
-    format?: TableTextColumnFormat | null;
+    format?: 'text' | 'html' | 'money' | 'date' | 'date-time' | null;
     /** @default 1 */
     maxLines?: number | 'single-line-no-trim' | null;
     valueFactory?: ((item: T) => string) | null;
 }
-export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-time';
-export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover' | 'vertical-cover' | 'horizontal-cover';
 export type TableItemAction<T> = {
     title: string;
     icon?: IconProp;

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

@@ -14,9 +14,14 @@ let pendingValidation = $state(false);
 let activeToken = 0;
 const runValidate = async () => {
     const myToken = ++activeToken;
-    await handler.validateField(name);
-    if (myToken === activeToken) {
-        pendingValidation = false;
+    try {
+        await handler.validateField(name);
+    }
+    finally {
+        // A rejecting validator would otherwise strand pendingValidation, and the children snippet reads it as a never-ending `validating`.
+        if (myToken === activeToken) {
+            pendingValidation = false;
+        }
     }
 };
 const validate = $derived(debounceMs > 0 ? Utils.debounce(runValidate, debounceMs) : runValidate);
@@ -60,7 +65,7 @@ const field = $derived({
 </script>
 
 <FieldFrame error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
-  {@render children(field)}
+  {@render children(field, pendingValidation)}
 </FieldFrame>
 
 <!--
@@ -79,10 +84,27 @@ layout; `reserveErrorSpace={false}` drops the reserve — the message overlays c
 </Validatable>
 ```
 
-The snippet argument has shape `{ name, value, error, on: { input, change, blur } }` — the
+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.

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

@@ -45,8 +45,11 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
             change?: (value: T[K]) => void;
             blur?: () => void;
         };
-        /** Receives a wired `FieldBinding<T[K]>` to spread into a kit input. */
-        children: Snippet<[FieldBinding<T[K]>]>;
+        /**
+         * 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.
+         */
+        children: Snippet<[FieldBinding<T[K]>, boolean]>;
     };
     exports: {};
     bindings: "";
@@ -82,10 +85,27 @@ interface $$IsomorphicComponent {
  * </Validatable>
  * ```
  *
- * The snippet argument has shape `{ name, value, error, on: { input, change, blur } }` — the
+ * 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.

package/package.json

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