@streamscloud/kit 0.78.1 → 0.79.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 { 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, '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(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,7 +117,7 @@ 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'}
@@ -152,15 +145,24 @@ 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 }} />
@@ -180,10 +182,16 @@ const focusInput = () => inputEl?.focus();
 
 <!--
 @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`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -204,6 +212,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 +233,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 +331,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 Snippet } from 'svelte';
 type BaseProps = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
@@ -16,13 +16,13 @@ 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;
     'aria-describedby'?: string;
     'aria-label'?: string;
@@ -44,7 +44,7 @@ type ClearableProps = BaseProps & {
         mounted?: (data: {
             input: HTMLInputElement;
         }) => void;
-        blur?: (value: number | null) => void;
+        blur?: () => void;
         focus?: () => void;
     };
 };
@@ -58,16 +58,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`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -88,6 +94,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/package.json

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