@streamscloud/kit 0.50.0 → 0.51.1

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/table/cmp.table-draggable.svelte

@@ -7,9 +7,9 @@ import { columnWidthStyle, createTableView } from './table-view.svelte';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
-let { model, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholder, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
 const flipDurationMs = 200;
 let tableRef = $state.raw(null);
 let dndItems = $state.raw(null);
@@ -51,18 +51,20 @@ const transformDraggedElement = (draggedRow) => {
 };
 </script>
 
+{#snippet noItemsContent()}
+  {#if customNoItemsPlaceholder}
+    {@render customNoItemsPlaceholder()}
+  {:else}
+    <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
+  {/if}
+{/snippet}
+
 <div
   class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
   class:table-container--zebra={model.styles?.zebra === true}>
   {#if alternativeView && showAlternativeView}
-    {#if showPlaceholder || view.showNoItemsPlaceholder}
-      <div class="alternative-view__placeholder">
-        {#if showPlaceholder}
-          {@render placeholderRow?.()}
-        {:else if customNoItemsPlaceholder}
-          {@render customNoItemsPlaceholder()}
-        {/if}
-      </div>
+    {#if view.showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
     {:else}
       {@render alternativeView()}
     {/if}
@@ -91,18 +93,10 @@ const transformDraggedElement = (draggedRow) => {
         }}
         onconsider={handleConsider}
         onfinalize={handleFinalize}>
-        {#if showPlaceholder || view.showNoItemsPlaceholder}
+        {#if view.showNoItemsPlaceholder}
           <tr class="table__tr table__tr--placeholder">
             <td colspan={visibleColspan}>
-              <div class="table__placeholder">
-                {#if showPlaceholder}
-                  {@render placeholderRow?.()}
-                {:else if customNoItemsPlaceholder}
-                  {@render customNoItemsPlaceholder()}
-                {:else}
-                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
-                {/if}
-              </div>
+              <div class="table__placeholder">{@render noItemsContent()}</div>
             </td>
           </tr>
         {:else}

package/dist/ui/table/cmp.table-draggable.svelte.d.ts

@@ -5,8 +5,14 @@ declare function $$render<T extends {
 }>(): {
     props: {
         model: TableModel<T>;
-        showPlaceholder?: boolean;
         showAlternativeView?: boolean;
+        /**
+         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
+         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
+         * the placeholder is never rendered over a non-empty list.
+         * @default 700
+         */
+        noItemsPlaceholder?: number | boolean;
         on?: {
             selectionChanged?: (e: T[]) => void;
             itemsSelected?: (e: T[]) => void;
@@ -14,7 +20,6 @@ declare function $$render<T extends {
             itemsReordered?: (e: T[]) => void;
         };
         alternativeView?: Snippet;
-        placeholderRow?: Snippet;
         customNoItemsPlaceholder?: Snippet;
     };
     exports: {};

package/dist/ui/table/cmp.table.svelte

@@ -3,9 +3,9 @@ import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
 import { columnWidthStyle, createTableView } from './table-view.svelte';
-let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholder, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
 const displayRows = $derived.by(() => {
     const items = model.items;
     const grp = grouping;
@@ -37,18 +37,20 @@ const displayRows = $derived.by(() => {
 const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length);
 </script>
 
+{#snippet noItemsContent()}
+  {#if customNoItemsPlaceholder}
+    {@render customNoItemsPlaceholder()}
+  {:else}
+    <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
+  {/if}
+{/snippet}
+
 <div
   class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
   class:table-container--zebra={model.styles?.zebra === true}>
   {#if alternativeView && showAlternativeView}
-    {#if showPlaceholder || view.showNoItemsPlaceholder}
-      <div class="alternative-view__placeholder">
-        {#if showPlaceholder}
-          {@render placeholderRow?.()}
-        {:else if customNoItemsPlaceholder}
-          {@render customNoItemsPlaceholder()}
-        {/if}
-      </div>
+    {#if view.showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
     {:else}
       {@render alternativeView()}
     {/if}
@@ -66,18 +68,10 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
         </tr>
       </thead>
       <tbody>
-        {#if showPlaceholder || view.showNoItemsPlaceholder}
+        {#if view.showNoItemsPlaceholder}
           <tr class="table__tr table__tr--placeholder">
             <td colspan={visibleColspan}>
-              <div class="table__placeholder">
-                {#if showPlaceholder}
-                  {@render placeholderRow?.()}
-                {:else if customNoItemsPlaceholder}
-                  {@render customNoItemsPlaceholder()}
-                {:else}
-                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
-                {/if}
-              </div>
+              <div class="table__placeholder">{@render noItemsContent()}</div>
             </td>
           </tr>
         {:else}

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

@@ -5,8 +5,14 @@ declare function $$render<T extends {
 }>(): {
     props: {
         model: TableModel<T>;
-        showPlaceholder?: boolean;
         showAlternativeView?: boolean;
+        /**
+         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
+         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
+         * the placeholder is never rendered over a non-empty list.
+         * @default 700
+         */
+        noItemsPlaceholder?: number | boolean;
         /** Group consecutive (already-sorted) rows under section headers. `key` returns a group id per item (`null` = ungrouped); a header row renders wherever the key changes between neighbours. */
         grouping?: {
             key: (item: T) => string | null;
@@ -26,7 +32,6 @@ declare function $$render<T extends {
             itemsReordered?: (e: T[]) => void;
         };
         alternativeView?: Snippet;
-        placeholderRow?: Snippet;
         customNoItemsPlaceholder?: Snippet;
     };
     exports: {};

package/dist/ui/table/table-view.svelte.d.ts

@@ -8,8 +8,8 @@ type SelectionCallbacks<T> = {
 };
 /** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
 export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
-/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
-export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined) => {
+/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (`number` = delay in ms, boolean = explicit). */
+export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined, noItemsPlaceholder?: () => number | boolean | undefined) => {
     readonly showNoItemsPlaceholder: boolean;
 };
 export {};

package/dist/ui/table/table-view.svelte.js

@@ -4,8 +4,9 @@ export const columnWidthStyle = (column) => {
     const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
     return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
 };
-/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
-export const createTableView = (model, on) => {
+const NO_ITEMS_PLACEHOLDER_DELAY_MS = 700;
+/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (`number` = delay in ms, boolean = explicit). */
+export const createTableView = (model, on, noItemsPlaceholder = () => undefined) => {
     let showNoItemsPlaceholder = $state(false);
     let timeout = 0;
     $effect(() => untrack(() => {
@@ -18,14 +19,20 @@ export const createTableView = (model, on) => {
         return () => subscriptions.forEach((unsubscribe) => unsubscribe());
     }));
     $effect(() => {
+        const decision = noItemsPlaceholder() ?? NO_ITEMS_PLACEHOLDER_DELAY_MS;
         if (model().items.length) {
             clearTimeout(timeout);
             showNoItemsPlaceholder = false;
             return;
         }
+        if (typeof decision === 'boolean') {
+            clearTimeout(timeout);
+            showNoItemsPlaceholder = decision;
+            return;
+        }
         timeout = window.setTimeout(() => {
             showNoItemsPlaceholder = !model().items.length;
-        }, 700);
+        }, decision);
         return () => clearTimeout(timeout);
     });
     return {

package/package.json

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