@streamscloud/kit 0.78.1 → 0.80.0

package/dist/ui/dialog/cmp.dialog.svelte

@@ -51,15 +51,15 @@ A structured dialog panel with header (title + close button), scrollable body, a
 | `--sc-kit--dialog--height` | Dialog height | `auto` |
 | `--sc-kit--dialog--max-height` | Maximum height | `none` |
 | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
-| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5` |
-| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6` |
+| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5`; `14px` when the dialog is under 768px wide inside `DialogHost` |
+| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6`; `--sc-kit--space--4` when the dialog is under 768px wide inside `DialogHost` |
 | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
-| `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
-| `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
-| `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
-| `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
-| `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | inherits `--padding-block` |
-| `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | inherits `--padding-inline` |
+| `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | `--sc-kit--dialog--padding-block` |
+| `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
+| `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | `--sc-kit--dialog--padding-block` |
+| `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
+| `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | `--sc-kit--dialog--padding-block` |
+| `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
 | `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
 | `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
 -->
@@ -73,13 +73,15 @@ A structured dialog panel with header (title + close button), scrollable body, a
   --_dialog--height: var(--sc-kit--dialog--height, auto);
   --_dialog--max-height: var(--sc-kit--dialog--max-height, none);
   --_dialog--min-height: var(--sc-kit--dialog--min-height, auto);
-  --_dialog--padding-block: var(--sc-kit--dialog--padding-block, var(--sc-kit--space--5));
-  --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, var(--sc-kit--space--6));
+  --_dialog--width-padding-block: var(--sc-kit--space--5);
+  --_dialog--width-padding-inline: var(--sc-kit--space--6);
+  --_dialog--padding-block: var(--sc-kit--dialog--padding-block, var(--_dialog--width-padding-block));
+  --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, var(--_dialog--width-padding-inline));
   --_dialog--body--overflow-y: var(--sc-kit--dialog--body--overflow-y, visible);
-  --_dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
-  --_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
-  --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
-  --_dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
+  --_--dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
+  --_--dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
+  --_--dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
+  --_--dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
   --_dialog--footer--padding-block: var(--sc-kit--dialog--footer--padding-block, var(--_dialog--padding-block));
   --_dialog--footer--padding-inline: var(--sc-kit--dialog--footer--padding-inline, var(--_dialog--padding-inline));
   --_dialog--title-font-size: var(--sc-kit--dialog--title--font-size, 1.125rem);
@@ -98,7 +100,8 @@ A structured dialog panel with header (title + close button), scrollable body, a
 }
 @container (width < 768px) {
   .dialog {
-    --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, var(--sc-kit--space--4));
+    --_dialog--width-padding-block: 0.875rem;
+    --_dialog--width-padding-inline: var(--sc-kit--space--4);
   }
 }
 .dialog__header {
@@ -107,7 +110,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   align-items: center;
   justify-content: space-between;
   gap: var(--sc-kit--space--4);
-  padding: var(--_dialog--header--padding-block) var(--_dialog--header--padding-inline);
+  padding: var(--_--dialog--header--padding-block) var(--_--dialog--header--padding-inline);
   border-bottom: 1px solid var(--_dialog--border-color);
   -webkit-user-drag: none;
   user-select: none;
@@ -130,7 +133,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   flex: 1;
   min-height: 0;
   overflow-y: var(--_dialog--body--overflow-y);
-  padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
+  padding: var(--_--dialog--body--padding-block) var(--_--dialog--body--padding-inline);
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }

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

@@ -52,15 +52,15 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--dialog--height` | Dialog height | `auto` |
  * | `--sc-kit--dialog--max-height` | Maximum height | `none` |
  * | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
- * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5` |
- * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6` |
+ * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5`; `14px` when the dialog is under 768px wide inside `DialogHost` |
+ * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6`; `--sc-kit--space--4` when the dialog is under 768px wide inside `DialogHost` |
  * | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
- * | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
- * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
- * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
- * | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
- * | `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | inherits `--padding-block` |
- * | `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | inherits `--padding-inline` |
+ * | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | `--sc-kit--dialog--padding-block` |
+ * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
+ * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | `--sc-kit--dialog--padding-block` |
+ * | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
+ * | `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | `--sc-kit--dialog--padding-block` |
+ * | `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | `--sc-kit--dialog--padding-inline` |
  * | `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
  * | `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
  */

package/dist/ui/dialog/layout/cmp.stepper-dialog.svelte

@@ -103,6 +103,7 @@ subtitle / close), vertical Stepper sidebar, scrollable body, and a Cancel / Bac
 footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
 navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
 Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next / Finish.
+Header, body and sidebar block padding follow `Dialog`'s header / body padding vars.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -116,14 +117,13 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
   --_sd--sidebar-width: var(--sc-kit--stepper-dialog--sidebar--width, 20rem);
   --_sd--sidebar-background: var(--sc-kit--stepper-dialog--sidebar--background, var(--sc-kit--color--bg--field-alt));
   --sc-kit--dialog--height: var(--sc-kit--stepper-dialog--height, auto);
-  --sc-kit--dialog--body--overflow-y: auto;
   display: contents;
 }
 .stepper-dialog__header {
   display: flex;
   align-items: flex-start;
   gap: var(--sc-kit--space--3);
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
+  padding: var(--_--dialog--header--padding-block) var(--_--dialog--header--padding-inline);
   border-block-end: 1px solid var(--sc-kit--color--border);
 }
 .stepper-dialog__icon {
@@ -169,7 +169,7 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
 }
 .stepper-dialog__sidebar {
   flex: 0 0 var(--_sd--sidebar-width);
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--4);
+  padding: var(--_--dialog--body--padding-block) var(--sc-kit--space--4);
   background: var(--_sd--sidebar-background);
   border-inline-end: 1px solid var(--sc-kit--color--border);
   overflow-y: auto;
@@ -193,5 +193,5 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
   flex: 1;
   min-block-size: 0;
   overflow-y: auto;
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
+  padding: var(--_--dialog--body--padding-block) var(--_--dialog--body--padding-inline);
 }</style>

package/dist/ui/dialog/layout/cmp.stepper-dialog.svelte.d.ts

@@ -53,6 +53,7 @@ interface $$IsomorphicComponent {
  * footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
  * navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
  * Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next / Finish.
+ * Header, body and sidebar block padding follow `Dialog`'s header / body padding vars.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/numeral-input/cmp.numeral-input.svelte

@@ -1,120 +1,113 @@
 <script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
-import { Icon } from '../icon';
+import { IconSlot } from '../icon';
 import { formatNumeral, NumeralThousandGroupStyles, registerCursorTracker } from 'cleave-zen';
-const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, decimals = 2, suffix = '', 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
+import { untrack } from 'svelte';
+const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, decimals = 2, suffix, hideResolvedValue = false, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
 let inputEl = $state.raw(undefined);
+let focused = $state(false);
+let typedValue = $state(undefined);
 const formatOptions = $derived({
     delimiter: ' ',
     numeralDecimalScale: decimals,
     numeralThousandsGroupStyle: NumeralThousandGroupStyles.THOUSAND,
     numeralIntegerScale: 14
 });
-// Display string — formatted value + suffix, or empty when null.
-const displayValue = $derived(mode.value === null || mode.value === undefined ? '' : formatNumeral(String(mode.value), formatOptions) + (suffix && mode.value !== null ? suffix : ''));
+const toRoundedPlainString = (value) => Number(value.toFixed(decimals))
+    .toFixed(decimals)
+    .replace(/(\.\d*?)0+$/, '$1')
+    .replace(/\.$/, '');
+const formatValue = (value) => value === null || value === undefined ? '' : formatNumeral(toRoundedPlainString(value), formatOptions);
+const displayValue = $derived(formatValue(mode.value));
 const clearButtonVisible = $derived(mode.clearable === true && !disabled && !readonly && !inert && mode.value !== null && mode.value !== undefined);
 /** Imperative API exposed via `bind:this`. */
 export const focus = () => inputEl?.focus();
 export const select = () => inputEl?.select();
-/** Parses the raw input string back to a number (or null when empty). Clamps to min/max. */
-const parseValue = (raw) => {
-    if (!raw.trim()) {
-        return null;
-    }
-    // Strip suffix + non-numeric chars except `.` `,` `-`, then normalize to dot-decimal.
-    let cleaned = suffix ? raw.replace(suffix, '') : raw;
-    cleaned = cleaned
-        .replace(/\s/g, '')
-        .replace(',', '.')
-        .replace(/[^0-9.-]/g, '');
-    const n = parseFloat(cleaned);
-    if (Number.isNaN(n)) {
-        return null;
-    }
-    let clamped = n;
-    if (min !== null && clamped < min) {
-        clamped = min;
-    }
-    if (max !== null && clamped > max) {
-        clamped = max;
-    }
-    return Number(clamped.toFixed(decimals));
+const parseValue = (formatted) => {
+    const n = parseFloat(formatted.replace(/\s/g, ''));
+    return Number.isNaN(n) ? null : n;
 };
-const initInput = (node) => {
-    inputEl = node;
-    if (autofocus) {
-        node.focus();
+const resolveValue = (typed) => {
+    if (typed !== null) {
+        return Math.min(Math.max(typed, min ?? -Infinity), max ?? Infinity);
     }
-    registerCursorTracker({ input: node, delimiter: formatOptions.delimiter, delimiters: [] });
-    mode.on?.mounted?.({ input: node });
+    return mode.clearable ? null : (min ?? mode.value);
 };
-const emit = (parsed, kind) => {
+const resolvedTypedValue = $derived(typedValue === undefined ? undefined : resolveValue(typedValue));
+const valueHintVisible = $derived(!hideResolvedValue && resolvedTypedValue !== typedValue);
+const initialText = untrack(() => displayValue);
+// Writing the prop into the field while focused would overwrite a typed "1" with min "8" before "12" can be typed.
+$effect(() => {
+    if (inputEl && !focused) {
+        inputEl.value = displayValue;
+    }
+});
+const emit = (kind, value) => {
     if (mode.clearable) {
-        const cb = mode.on?.[kind];
-        cb?.(parsed);
+        mode.on?.[kind]?.(value);
     }
-    else {
-        // RequiredProps callbacks take `number` (never null). Coerce null → 0 (the legacy contract).
-        if (parsed !== null) {
-            mode.on?.[kind]?.(parsed);
-        }
+    else if (value !== null) {
+        mode.on?.[kind]?.(value);
     }
 };
+// Safari fires no native change once script has rewritten the value during input, so Enter and blur commit too.
+const commit = () => {
+    if (!inputEl || typedValue === undefined) {
+        return;
+    }
+    const value = resolveValue(typedValue);
+    typedValue = undefined;
+    inputEl.value = formatValue(value);
+    emit('change', value);
+};
 const handleInput = () => {
     if (!inputEl) {
         return;
     }
-    // Reformat through cleave-zen so invalid characters are stripped and the decimal scale
-    // is capped to `decimals` while the user is typing. Strip suffix first so it doesn't
-    // get mangled, re-add nothing here (suffix re-appears on blur via displayValue resync).
-    const raw = suffix ? inputEl.value.replace(suffix, '') : inputEl.value;
-    let formatted = formatNumeral(raw, formatOptions);
-    // Clamp on the fly when typing pushes the value past min / max — re-format the clamped
-    // result so the visible input matches the emitted value.
-    const parsedRaw = parseFloat(formatted.replace(/\s/g, '').replace(',', '.'));
-    if (!Number.isNaN(parsedRaw)) {
-        let clamped = parsedRaw;
-        if (min !== null && clamped < min) {
-            clamped = min;
-        }
-        if (max !== null && clamped > max) {
-            clamped = max;
-        }
-        if (clamped !== parsedRaw) {
-            formatted = formatNumeral(String(Number(clamped.toFixed(decimals))), formatOptions);
-        }
-    }
+    const raw = inputEl.value.includes('.') ? inputEl.value : inputEl.value.replace(',', '.');
+    const formatted = formatNumeral(raw, formatOptions);
     if (inputEl.value !== formatted) {
         inputEl.value = formatted;
     }
-    const parsed = parseValue(inputEl.value);
-    emit(parsed, 'input');
+    typedValue = parseValue(formatted);
+    emit('input', resolveValue(typedValue));
 };
-const handleChange = () => {
-    if (!inputEl) {
-        return;
+const handleKeydown = (event) => {
+    if (event.key === 'Enter' && !event.isComposing) {
+        commit();
     }
-    const parsed = parseValue(inputEl.value);
-    emit(parsed, 'change');
 };
 const handleClear = () => {
     if (!inputEl) {
         return;
     }
     inputEl.value = '';
-    emit(null, 'input');
-    emit(null, 'change');
+    typedValue = undefined;
+    emit('input', null);
+    emit('change', null);
     inputEl.focus();
 };
+const handleFocus = () => {
+    focused = true;
+    mode.on?.focus?.();
+};
 const handleBlur = () => {
-    if (!inputEl) {
-        return;
+    commit();
+    focused = false;
+    mode.on?.blur?.();
+};
+const initInput = (node) => {
+    inputEl = node;
+    // A field focused before hydration never gets a focus event, so the sync effect would overwrite what is typed next.
+    if (node.matches(':focus')) {
+        handleFocus();
+    }
+    if (autofocus) {
+        node.focus();
     }
-    const parsed = parseValue(inputEl.value);
-    // Re-sync to the formatted display value so the input reflects clamped / canonical form.
-    inputEl.value = displayValue;
-    emit(parsed, 'blur');
+    const unregisterCursorTracker = registerCursorTracker({ input: node, delimiter: formatOptions.delimiter, delimiters: [] });
+    mode.on?.mounted?.({ input: node });
+    return { destroy: unregisterCursorTracker };
 };
-const focusInput = () => inputEl?.focus();
 </script>
 
 <div
@@ -124,18 +117,14 @@ const focusInput = () => inputEl?.focus();
   class:numeral-input--inert={inert}
   class:numeral-input--error={error}
   class:numeral-input--borderless={borderless}
-  onclick={focusInput}
+  onclick={focus}
   onkeydown={() => undefined}
   role="none">
   {#if icon && iconPosition === 'leading'}
-    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
-      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
   {/if}
   {#if secondaryIcon && iconPosition === 'trailing'}
-    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
-      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
   {/if}
 
   <!-- svelte-ignore a11y_autofocus -->
@@ -152,38 +141,49 @@ const focusInput = () => inputEl?.focus();
     inert={inert}
     autofocus={autofocus}
     title={title}
-    value={displayValue}
+    value={initialText}
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={ariaDescribedby}
     aria-label={ariaLabel}
     aria-required={ariaRequired ? 'true' : undefined}
     oninput={handleInput}
-    onchange={handleChange}
+    onchange={commit}
     onblur={handleBlur}
-    onfocus={() => mode.on?.focus?.()} />
+    onfocus={handleFocus}
+    onkeydown={handleKeydown} />
+
+  {#if valueHintVisible}
+    <span class="numeral-input__value-hint"><span aria-hidden="true">→</span> {formatValue(resolvedTypedValue)}</span>
+  {/if}
+
+  {#if suffix}
+    <span class="numeral-input__suffix">{suffix}</span>
+  {/if}
 
   {#if clearButtonVisible}
     <InputClearButton size={size} on={{ clear: handleClear }} />
   {/if}
 
   {#if icon && iconPosition === 'trailing'}
-    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
-      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true"><IconSlot icon={icon} /></span>
   {/if}
   {#if secondaryIcon && iconPosition === 'leading'}
-    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
-      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
   {/if}
 </div>
 
 <!--
 @component
-Formatted number input with locale-aware thousand separators, decimal scale, min/max clamping,
-optional suffix (` %`, ` kg`), and smooth cursor tracking while typing (via cleave-zen).
-Discriminated by `clearable`: `clearable: true` allows `null` (with × button); `clearable: false`
-requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+Formatted number input with space-grouped thousands, a dot or comma decimal mark, decimal scale, min/max clamping,
+a muted trailing `suffix` unit, and smooth cursor tracking while typing
+(via cleave-zen). Discriminated by `clearable`: `clearable: true` allows `null` (with × button);
+`clearable: false` requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+
+While focused the text belongs to the user: a value change from outside lands on blur. Every
+emitted value is clamped to `min` / `max`, but the typed text is left alone until commit (blur,
+Enter, `change`) — so a prefix below `min` stays typeable. With `clearable: false` an empty
+field emits `min`, or keeps the held value when there is no `min`. Whenever the typed text resolves
+to a different value, that value shows next to the field as `→ 12` (off with `hideResolvedValue`).
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -204,6 +204,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 | `--sc-kit--numeral-input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
 | `--sc-kit--numeral-input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
 | `--sc-kit--numeral-input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+| `--sc-kit--numeral-input--suffix--color` | Suffix and value hint color | `var(--sc-kit--color--text--muted)` |
 -->
 
 <style>.numeral-input {
@@ -224,6 +225,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--placeholder-color: var(--sc-kit--numeral-input--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_ni--icon-color: var(--sc-kit--numeral-input--icon--color, var(--sc-kit--color--text--muted));
   --_ni--icon-size: var(--sc-kit--numeral-input--icon--size, var(--_ni--size-icon-size, var(--sc-kit--field--icon--size--md)));
+  --_ni--suffix-color: var(--sc-kit--numeral-input--suffix--color, var(--sc-kit--color--text--muted));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -321,6 +323,19 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 .numeral-input__el:disabled {
   cursor: default;
 }
+.numeral-input__value-hint {
+  flex-shrink: 0;
+  margin-inline-start: var(--_ni--gap);
+  color: var(--_ni--suffix-color);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.numeral-input__suffix {
+  flex-shrink: 0;
+  margin-inline-start: var(--_ni--gap);
+  color: var(--_ni--suffix-color);
+  white-space: nowrap;
+}
 .numeral-input__icon {
   --sc-kit--icon--color: var(--_ni--icon-color);
   --sc-kit--icon--size: var(--_ni--icon-size);

package/dist/ui/numeral-input/cmp.numeral-input.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type IconProp } from '../icon';
 type BaseProps = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
@@ -16,23 +16,25 @@ type BaseProps = {
     name?: string;
     id?: string | null;
     autofocus?: boolean;
-    /** Minimum allowed value (clamped on input). */
+    /** Minimum value emitted to the consumer, also emitted for an empty `clearable: false` field; the typed text is left alone until commit. */
     min?: number | null;
-    /** Maximum allowed value (clamped on input). */
+    /** Maximum value emitted to the consumer; the typed text is left alone until commit. */
     max?: number | null;
     /** Number of decimal places shown. @default 2 */
     decimals?: number;
-    /** Suffix appended to the formatted value at rest (e.g. ` %`, ` kg`). */
+    /** Muted unit rendered after the value, outside the editable text (`px`, `%`, `°`). */
     suffix?: string;
+    /** Hides the `→ 12` hint shown while the typed text resolves to a different value — for narrow fields. */
+    hideResolvedValue?: boolean;
     'aria-describedby'?: string;
     'aria-label'?: string;
     'aria-required'?: boolean;
-    /** Primary icon — SVG source string or snippet. */
-    icon?: string | Snippet;
+    /** Primary icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
     /** Side of the input where the primary icon sits. @default 'leading' */
     iconPosition?: 'leading' | 'trailing';
     /** Optional secondary icon — always on the opposite side from `icon`. */
-    secondaryIcon?: string | Snippet;
+    secondaryIcon?: IconProp;
 };
 type ClearableProps = BaseProps & {
     /** Value can be cleared to `null`. Trigger shows an × button when set. */
@@ -44,7 +46,7 @@ type ClearableProps = BaseProps & {
         mounted?: (data: {
             input: HTMLInputElement;
         }) => void;
-        blur?: (value: number | null) => void;
+        blur?: () => void;
         focus?: () => void;
     };
 };
@@ -58,16 +60,22 @@ type RequiredProps = BaseProps & {
         mounted?: (data: {
             input: HTMLInputElement;
         }) => void;
-        blur?: (value: number) => void;
+        blur?: () => void;
         focus?: () => void;
     };
 };
 type Props = ClearableProps | RequiredProps;
 /**
- * Formatted number input with locale-aware thousand separators, decimal scale, min/max clamping,
- * optional suffix (` %`, ` kg`), and smooth cursor tracking while typing (via cleave-zen).
- * Discriminated by `clearable`: `clearable: true` allows `null` (with × button); `clearable: false`
- * requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+ * Formatted number input with space-grouped thousands, a dot or comma decimal mark, decimal scale, min/max clamping,
+ * a muted trailing `suffix` unit, and smooth cursor tracking while typing
+ * (via cleave-zen). Discriminated by `clearable`: `clearable: true` allows `null` (with × button);
+ * `clearable: false` requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+ *
+ * While focused the text belongs to the user: a value change from outside lands on blur. Every
+ * emitted value is clamped to `min` / `max`, but the typed text is left alone until commit (blur,
+ * Enter, `change`) — so a prefix below `min` stays typeable. With `clearable: false` an empty
+ * field emits `min`, or keeps the held value when there is no `min`. Whenever the typed text resolves
+ * to a different value, that value shows next to the field as `→ 12` (off with `hideResolvedValue`).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -88,6 +96,7 @@ type Props = ClearableProps | RequiredProps;
  * | `--sc-kit--numeral-input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
  * | `--sc-kit--numeral-input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
  * | `--sc-kit--numeral-input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+ * | `--sc-kit--numeral-input--suffix--color` | Suffix and value hint color | `var(--sc-kit--color--text--muted)` |
  */
 declare const Cmp: import("svelte").Component<Props, {
     /** Imperative API exposed via `bind:this`. */ focus: () => void;

package/dist/ui/tile-card/cmp.tile-card.svelte

@@ -1,16 +1,59 @@
 <script lang="ts">import { Checkbox } from '../checkbox';
-import { ToolbarIconButton } from '../page-toolbar';
+import { Icon, IconSlot } from '../icon';
+import { IconText } from '../icon-text';
 import { PlayIndicator } from '../play-indicator';
-import { Popover } from '../popover';
+import { Popover, PopoverItem } from '../popover';
 import { TileCardLocalization } from './tile-card-localization';
 import IconMore from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-const { title, meta, preview, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
+const { title, meta, preview, actions, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
+const actionItems = $derived(actions?.items ?? []);
+const actionsPosition = $derived(preview ? (actions?.position ?? 'footer') : 'footer');
+let menuOpened = $state(false);
+let keyboardFocused = $state(false);
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 </script>
 
-<div class="tile-card" class:tile-card--selected={selected} class:tile-card--checkbox-always={checkboxVisibility === 'always'}>
+{#snippet actionsBlock()}
+  {#if actionItems.length}
+    <div class="tile-card__actions tile-card__actions--{actionsPosition}">
+      {#if actionItems.length === 1 && actionsPosition === 'top' && actions?.singleAsButton}
+        <button
+          type="button"
+          class="tile-card__action"
+          class:tile-card__action--overlay={actionsPosition === 'top'}
+          aria-label={actionItems[0].label}
+          title={actionItems[0].label}
+          onclick={() => actionItems[0].onClick()}>
+          <IconSlot icon={actionItems[0].icon} fallbacks={{ size: 'control-md' }} />
+        </button>
+      {:else}
+        <Popover
+          position="bottom-end"
+          fixedPosition
+          aria-label={actions?.label ?? localization.actions}
+          on={{ opened: () => (menuOpened = true), closed: () => (menuOpened = false) }}>
+          {#snippet trigger()}
+            <span class="tile-card__action" class:tile-card__action--overlay={actionsPosition === 'top'}><Icon src={IconMore} size="control-md" /></span>
+          {/snippet}
+          {#each actionItems as action, index (index)}
+            <PopoverItem on={{ click: action.onClick }}><IconText icon={action.icon} size="sm">{action.label}</IconText></PopoverItem>
+          {/each}
+        </Popover>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<div
+  class="tile-card"
+  class:tile-card--selected={selected}
+  class:tile-card--checkbox-always={checkboxVisibility === 'always'}
+  class:tile-card--menu-opened={menuOpened}
+  class:tile-card--keyboard-focused={keyboardFocused}
+  onfocusin={(e) => (keyboardFocused = (e.target as HTMLElement).matches(':focus-visible'))}
+  onfocusout={() => (keyboardFocused = false)}>
   {#if on?.activate}
     <button type="button" class="tile-card__hit" aria-label={title} title={title} onclick={() => on?.activate?.()}></button>
   {/if}
@@ -33,17 +76,13 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
         <span class="tile-card__meta">{meta}</span>
       {/if}
     </div>
-    {#if menu}
-      <div class="tile-card__menu">
-        <Popover position="bottom-end" fixedPosition aria-label={menuLabel ?? localization.actions}>
-          {#snippet trigger()}
-            <ToolbarIconButton icon={IconMore} presentational />
-          {/snippet}
-          {@render menu()}
-        </Popover>
-      </div>
+    {#if actionsPosition === 'footer'}
+      {@render actionsBlock()}
     {/if}
   </div>
+  {#if actionsPosition === 'top'}
+    {@render actionsBlock()}
+  {/if}
   {#if on?.select}
     <div class="tile-card__checkbox">
       <Checkbox checked={selected} variant="on-accent" title={localization.select} on={{ change: (value) => on?.select?.(value) }} />
@@ -53,8 +92,9 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 
 <!--
 @component
-File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
-checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+File-browser style tile: a full-bleed preview on top and a footer with title and optional meta line. `actions` sit at the end
+of the footer or over the preview's top-right corner. Selection checkbox via `on.select`, whole-card activation via
+`on.activate`. For a drop-target highlight wrap it in `DropZone`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -79,6 +119,7 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   --_tile-card--preview-aspect-ratio: var(--sc-kit--tile-card--preview--aspect-ratio, 7 / 5);
   --_tile-card--footer-min-height: var(--sc-kit--tile-card--footer--min-height, 3.25rem);
   --_tile-card--checkbox-opacity: 0;
+  --_tile-card--top-actions-opacity: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -93,8 +134,12 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
 .tile-card:hover {
   --_tile-card--border-color: var(--_tile-card--border-color-hover);
 }
-.tile-card:hover, .tile-card:focus-within {
+.tile-card:hover, .tile-card--keyboard-focused {
   --_tile-card--checkbox-opacity: 1;
+  --_tile-card--top-actions-opacity: 1;
+}
+.tile-card--menu-opened {
+  --_tile-card--top-actions-opacity: 1;
 }
 .tile-card:has(> .tile-card__hit:focus-visible) {
   outline: 2px solid var(--sc-kit--color--border--focus);
@@ -112,6 +157,7 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
 @media (hover: none) {
   .tile-card {
     --_tile-card--checkbox-opacity: 1;
+    --_tile-card--top-actions-opacity: 1;
   }
 }
 .tile-card__hit {
@@ -182,10 +228,46 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   white-space: nowrap;
   overflow: hidden;
 }
-.tile-card__menu {
+.tile-card__actions {
   position: relative;
   display: flex;
 }
+.tile-card__actions--top {
+  position: absolute;
+  inset-block-start: var(--sc-kit--space--3);
+  inset-inline-end: var(--sc-kit--space--3);
+  opacity: var(--_tile-card--top-actions-opacity);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tile-card__action {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sc-kit--field--border-radius--sm);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tile-card__action:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
+.tile-card__action:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.tile-card__action--overlay {
+  --sc-kit--icon--color: var(--sc-kit--color--text--primary);
+  background: var(--sc-kit--color--bg--panel);
+  box-shadow: var(--sc-kit--shadow--md);
+}
+.tile-card__action--overlay:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
 .tile-card__checkbox {
   position: absolute;
   inset-block-start: var(--sc-kit--space--3);

package/dist/ui/tile-card/cmp.tile-card.svelte.d.ts

@@ -1,28 +1,25 @@
-import type { TileCardCheckboxVisibility, TileCardPreview } from './types';
-import type { Snippet } from 'svelte';
+import type { TileCardActions, TileCardCheckboxVisibility, TileCardPreview } from './types';
 type Props = {
     title: string;
     /** Secondary line under the title. */
     meta?: string;
-    /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `menu` or `on.activate`. */
+    /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `actions` or `on.activate`. */
     preview?: TileCardPreview;
-    /** `PopoverItem`s of the kebab menu at the end of the footer. */
-    menu?: Snippet;
-    /** Accessible name of the kebab menu. @default localized "Actions" */
-    menuLabel?: string;
+    actions?: TileCardActions;
     selected?: boolean;
-    /** When the checkbox shows: `'hover'` — on hover, focus-within, when selected and on touch screens; `'always'` — permanently. @default 'hover' */
+    /** When the checkbox shows: `'hover'` — on hover, keyboard focus, when selected and on touch screens; `'always'` — permanently. @default 'hover' */
     checkboxVisibility?: TileCardCheckboxVisibility;
     on?: {
         /** Renders the checkbox at the top-left of the preview. */
         select?: (value: boolean) => void;
-        /** Fires on a click on the card surface or Enter / Space; the checkbox and the menu don't trigger it. */
+        /** Fires on a click on the card surface or Enter / Space; the checkbox and the actions don't trigger it. */
         activate?: () => void;
     };
 };
 /**
- * File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
- * checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+ * File-browser style tile: a full-bleed preview on top and a footer with title and optional meta line. `actions` sit at the end
+ * of the footer or over the preview's top-right corner. Selection checkbox via `on.select`, whole-card activation via
+ * `on.activate`. For a drop-target highlight wrap it in `DropZone`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tile-card/index.d.ts

@@ -1,2 +1,2 @@
-export type { TileCardCheckboxVisibility, TileCardPreview } from './types';
+export type { TileCardAction, TileCardActions, TileCardCheckboxVisibility, TileCardPreview } from './types';
 export { default as TileCard } from './cmp.tile-card.svelte';

package/dist/ui/tile-card/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 export type TileCardPreview = {
     image: string;
@@ -6,3 +7,22 @@ export type TileCardPreview = {
     poster?: string;
 } | Snippet;
 export type TileCardCheckboxVisibility = 'hover' | 'always';
+/** One card action. `label` is the menu item text, or the accessible name and tooltip when it renders as a lone icon button. */
+export type TileCardAction = {
+    label: string;
+    icon: IconProp;
+    onClick: () => void;
+};
+export type TileCardActions = {
+    items: TileCardAction[];
+    /**
+     * `'footer'` — at the end of the footer; `'top'` — over the top-right corner of the preview, revealed on hover, keyboard focus, while its menu is
+     * open and on touch screens. A card without a `preview` always uses `'footer'`.
+     * @default 'footer'
+     */
+    position?: 'footer' | 'top';
+    /** With `position: 'top'`, a single item renders as its own icon button instead of a one-item kebab menu. @default false */
+    singleAsButton?: boolean;
+    /** Accessible name of the kebab menu. @default localized "Actions" */
+    label?: string;
+};

package/package.json

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