@streamscloud/kit 0.53.0 → 0.54.0

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/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/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.53.0",
+  "version": "0.54.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",