@streamscloud/kit 0.51.0 → 0.52.0

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

@@ -3,19 +3,38 @@ 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) => {
     event.stopPropagation();
+    // This click never reaches guardLabelActivation, so the flag would outlive the gesture and swallow a later keyboard-activated click.
+    swallowLabelActivation = false;
     if (DomHelper.isInsideInteractive(event.target)) {
         return;
     }
     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 guardLabelActivation = (event) => {
+    const swallow = swallowLabelActivation;
+    swallowLabelActivation = false;
+    if (swallow && isLabelChrome(event.target)) {
+        event.preventDefault();
+    }
+};
 </script>
 
-<label class="form-field">
+<!-- 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}>
   {#if label}
-    <span class="form-field__label">
+    <span bind:this={labelRowEl} class="form-field__label">
       {#if typeof label === 'string'}
         {label}
       {:else}
@@ -45,6 +64,8 @@ const swallowClick = (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.
+
 `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.
 
 ### CSS Custom Properties

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

@@ -12,6 +12,8 @@ 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.
+ *
  * `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.
  *
  * ### CSS Custom Properties

package/dist/ui/video/cmp.video.svelte

@@ -196,6 +196,7 @@ const onTimeUpdate = () => {
     }
     percentageCompleted = video.currentTime / video.duration || 0;
     notifyProgress();
+    on?.timeUpdate?.({ id, seconds: video.currentTime });
 };
 const onLoaded = () => {
     setVolume(MediaVolumeManager.volumeLevel);
@@ -238,6 +239,7 @@ const handleSeek = (percent) => {
         video.currentTime = video.duration * percent;
         percentageCompleted = percent;
         notifyProgress();
+        on?.timeUpdate?.({ id, seconds: video.currentTime });
     }
 };
 </script>

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

@@ -38,6 +38,15 @@ type Props = {
         }) => void;
         /** Fires on timeupdate with the completion ratio (0-1) */
         progress?: (value: number) => void;
+        /**
+         * Fires on timeupdate with the raw playback position in seconds. Position-change
+         * samples, not a heartbeat: nothing fires while paused, seeks fire once, and a
+         * stopped/reset player emits a trailing `seconds: 0`.
+         */
+        timeUpdate?: (data: {
+            id: string;
+            seconds: number;
+        }) => void;
         ended?: (data: {
             id: string;
             src: string;

package/package.json

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