@streamscloud/kit 0.31.0 → 0.33.0

package/dist/core/utils/html-helper.d.ts

@@ -5,6 +5,12 @@ export declare class HtmlHelper {
      * Replaces reserved html characters with html entities e.g. '<' with '&lt;'
      */
     static escapeSpecialChars(s: string): string;
+    /**
+     * Strips leading / trailing whitespace from a field's current value in place, returning whether it
+     * changed. Dispatches nothing — the caller emits. Call at commit points only: on `input` it would
+     * swallow the space in "hello world" as it is typed.
+     */
+    static trimElementValue(element: HTMLInputElement | HTMLTextAreaElement): boolean;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
     static sanitizeSvg(svg: string): string;
     static sanitizeHtml(html: string): string;

package/dist/core/utils/html-helper.js

@@ -29,6 +29,19 @@ export class HtmlHelper {
     static escapeSpecialChars(s) {
         return s.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
     }
+    /**
+     * Strips leading / trailing whitespace from a field's current value in place, returning whether it
+     * changed. Dispatches nothing — the caller emits. Call at commit points only: on `input` it would
+     * swallow the space in "hello world" as it is typed.
+     */
+    static trimElementValue(element) {
+        const trimmed = element.value.trim();
+        if (trimmed === element.value) {
+            return false;
+        }
+        element.value = trimmed;
+        return true;
+    }
     static pasteIntoInput(value, element) {
         if (element.selectionStart || element.selectionStart === 0) {
             const startPos = element.selectionStart;

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

@@ -3,13 +3,14 @@ import { InputClearButton } from '../_internal/input-clear-button';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 import { InputPasswordToggle } from '../_internal/input-password-toggle';
 import { IconSlot } from '../icon';
-const { value, type = 'text', size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, emoji = false, placeholder = '', title = '', name = '', id = null, autofocus = false, maxLength = null, autocomplete, autocapitalize, inputmode, enterkeyhint, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on, icon, iconPosition = 'leading', secondaryIcon, prefix, suffix } = $props();
+const { value, type = 'text', size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, emoji = false, trim = true, placeholder = '', title = '', name = '', id = null, autofocus = false, maxLength = null, autocomplete, autocapitalize, inputmode, enterkeyhint, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on, icon, iconPosition = 'leading', secondaryIcon, prefix, suffix } = $props();
 let inputEl = $state.raw(undefined);
 let passwordRevealed = $state(false);
 const valueParsed = $derived(value ?? '');
 const clearButtonVisible = $derived(clearable && !disabled && !readonly && !inert && !!valueParsed);
 const passwordToggleVisible = $derived(type === 'password' && !disabled && !readonly && !inert);
 const effectiveType = $derived(type === 'password' && passwordRevealed ? 'text' : type);
+const trimOnCommit = $derived(trim && type !== 'password' && !disabled && !readonly && !inert);
 /** Imperative API exposed via `bind:this` on `<Input>`. */
 export const focus = () => inputEl?.focus();
 export const select = () => inputEl?.select();
@@ -26,10 +27,24 @@ const handleInput = () => {
     }
     on?.input?.(inputEl.value);
 };
+const applyTrim = () => {
+    if (!trimOnCommit || !inputEl || !HtmlHelper.trimElementValue(inputEl)) {
+        return null;
+    }
+    handleInput();
+    return inputEl.value;
+};
+const commitTrim = () => {
+    const trimmed = applyTrim();
+    if (trimmed !== null) {
+        on?.change?.(trimmed);
+    }
+};
 const handleChange = () => {
     if (!inputEl) {
         return;
     }
+    applyTrim();
     on?.change?.(inputEl.value);
 };
 const handleClear = () => {
@@ -47,6 +62,8 @@ const handlePasswordToggle = () => {
     inputEl?.focus();
 };
 const handleBlur = () => {
+    // Before the re-sync: trimming after it re-emits a lagging prop as fresh input, losing the last edit.
+    commitTrim();
     // Force re-sync to the controlled value on blur — covers the case where the consumer
     // didn't update the prop in response to input events (e.g. yup rejected the value).
     if (inputEl) {
@@ -54,6 +71,13 @@ const handleBlur = () => {
     }
     on?.blur?.();
 };
+const handleKeydown = (event) => {
+    // Input only — the native `change` Enter fires next announces the commit; emitting it here doubles it.
+    if (event.key === 'Enter' && !event.isComposing) {
+        applyTrim();
+    }
+    on?.keydown?.(event);
+};
 const handleEmojiSelect = (emojiChar) => {
     if (inputEl) {
         HtmlHelper.pasteIntoInput(emojiChar, inputEl);
@@ -111,7 +135,7 @@ const focusInput = () => inputEl?.focus();
     onchange={handleChange}
     onblur={handleBlur}
     onfocus={() => on?.focus?.()}
-    onkeydown={(event) => on?.keydown?.(event)} />
+    onkeydown={handleKeydown} />
 
   {#if suffix}
     <span class="input__suffix">{@render suffix()}</span>
@@ -145,6 +169,10 @@ focus underline. Discriminated `type` selects native input mode (`text` / `passw
 for non-editable but selectable, `error` for the visual + a11y error state. Imperative
 `focus()` / `select()` / `clear()` exposed via `bind:this`.
 
+Leading / trailing whitespace is stripped at every commit point — `change`, blur, Enter — so the
+value the consumer receives always matches what the field shows. Typing is untouched. Pass
+`trim={false}` to opt out; `type="password"` never trims.
+
 Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
 `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
 or the clear button (see `HandleInput`'s availability pill).

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

@@ -6,6 +6,10 @@ import type { InputProps } from './types';
  * for non-editable but selectable, `error` for the visual + a11y error state. Imperative
  * `focus()` / `select()` / `clear()` exposed via `bind:this`.
  *
+ * Leading / trailing whitespace is stripped at every commit point — `change`, blur, Enter — so the
+ * value the consumer receives always matches what the field shows. Typing is untouched. Pass
+ * `trim={false}` to opt out; `type="password"` never trims.
+ *
  * Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
  * `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
  * or the clear button (see `HandleInput`'s availability pill).

package/dist/ui/input/types.d.ts

@@ -22,6 +22,13 @@ export type InputProps = {
     clearable?: boolean;
     /** Show the emoji-picker trigger inside the input. */
     emoji?: boolean;
+    /**
+     * Strip leading / trailing whitespace when the value is committed — on `change`, on blur, and on
+     * Enter. Typing is never touched, so the committed value always equals what the field shows.
+     * Ignored for `type="password"`, where whitespace can be part of the secret.
+     * @default true
+     */
+    trim?: boolean;
     placeholder?: string;
     title?: string;
     name?: string;
@@ -75,4 +82,4 @@ export type InputProps = {
  * Proxies should declare their Props as `Omit<InputForwardedProps, 'hardwiredKey1' | ...> & OwnProps`
  * to surgically remove forwarded props that the proxy hard-wires (so consumers can't override them).
  */
-export type InputForwardedProps = Pick<InputProps, 'value' | 'size' | 'disabled' | 'readonly' | 'inert' | 'error' | 'borderless' | 'placeholder' | 'title' | 'name' | 'id' | 'autofocus' | 'maxLength' | 'autocomplete' | 'autocapitalize' | 'inputmode' | 'enterkeyhint' | 'spellcheck' | 'aria-describedby' | 'aria-label' | 'aria-required' | 'on'>;
+export type InputForwardedProps = Pick<InputProps, 'value' | 'size' | 'disabled' | 'readonly' | 'inert' | 'error' | 'borderless' | 'trim' | 'placeholder' | 'title' | 'name' | 'id' | 'autofocus' | 'maxLength' | 'autocomplete' | 'autocapitalize' | 'inputmode' | 'enterkeyhint' | 'spellcheck' | 'aria-describedby' | 'aria-label' | 'aria-required' | 'on'>;

package/dist/ui/select/_select-trigger.scss

@@ -6,7 +6,7 @@
 // Shared trigger shape for Singleselect / SingleselectAsync / (later) Multiselect.
 // Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
 // once and have all select variants pick it up.
-@mixin select-trigger {
+@mixin select-trigger($chevron: true) {
   --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
   --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
@@ -164,12 +164,14 @@
     }
   }
 
-  &__chevron {
-    transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
-  }
+  @if $chevron {
+    &__chevron {
+      transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+    }
 
-  &--open &__chevron {
-    transform: rotate(180deg);
+    &--open &__chevron {
+      transform: rotate(180deg);
+    }
   }
 
   &__spinner {
@@ -193,12 +195,14 @@
   // reflow to additional rows below. (Spinner positioning lives in MultiselectAsync's
   // local style block — Svelte's per-component CSS-usage check otherwise flags this rule
   // as unused in Singleselect / sync Multiselect.)
-  &--multi &__chevron {
-    position: absolute;
-    inset-block-start: calc(var(--_sel--height) / 2);
-    inset-inline-end: var(--_sel--padding-inline);
-    transform: translateY(-50%);
-    margin: 0;
+  @if $chevron {
+    &--multi &__chevron {
+      position: absolute;
+      inset-block-start: calc(var(--_sel--height) / 2);
+      inset-inline-end: var(--_sel--padding-inline);
+      transform: translateY(-50%);
+      margin: 0;
+    }
   }
 
   // Inline-chip area visible inside the trigger when value is non-empty (inline mode).

package/dist/ui/select/cmp.input-suggest.svelte

@@ -0,0 +1,513 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { InputClearButton } from '../_internal/input-clear-button';
+import { IconSlot } from '../icon';
+import { default as SelectListbox } from './select-listbox.svelte';
+const { value, suggestions, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, trim = true, icon, name, id, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+let inputEl = $state.raw(undefined);
+let rootEl = $state.raw(undefined);
+let isOpen = $state(false);
+let isFiltering = $state(false);
+let highlight = $state(-1);
+let lastCommitted = '';
+let isRestoringFocus = false;
+const listboxId = `input-suggest-${Math.random().toString(36).slice(2, 9)}`;
+const currentValue = $derived(value ?? '');
+const isInteractive = $derived(!disabled && !readonly && !inert);
+const matches = $derived.by(() => {
+    if (!isFiltering) {
+        return suggestions;
+    }
+    const needle = currentValue.trim().toLowerCase();
+    if (!needle) {
+        return suggestions;
+    }
+    return suggestions.filter((suggestion) => suggestion.value.toLowerCase().includes(needle));
+});
+const rows = $derived(matches.map((suggestion) => ({
+    kind: 'option',
+    option: { label: suggestion.value, value: suggestion },
+    indent: false,
+    selected: false
+})));
+const isPanelOpen = $derived(isOpen && rows.length > 0);
+const activeIndex = $derived(highlight >= 0 && highlight < rows.length ? highlight : -1);
+const showClear = $derived(clearable && isInteractive && !!currentValue);
+const openSuggestions = () => {
+    isOpen = true;
+    isFiltering = false;
+    highlight = -1;
+};
+const closeSuggestions = () => {
+    isOpen = false;
+    isFiltering = false;
+    highlight = -1;
+};
+// clearing the flag synchronously drops the guard when focus() dispatches late — handleFocus then reopens the popover after a pick
+const restoreFocus = () => {
+    isRestoringFocus = true;
+    inputEl?.focus();
+    queueMicrotask(() => {
+        isRestoringFocus = false;
+    });
+};
+export const focus = () => inputEl?.focus();
+export const select = () => inputEl?.select();
+export const open = () => {
+    if (isInteractive) {
+        inputEl?.focus();
+        openSuggestions();
+    }
+};
+export const close = () => closeSuggestions();
+const commitValue = (next) => {
+    lastCommitted = next;
+    on?.change?.(next);
+};
+const flushCommit = () => {
+    if (!inputEl) {
+        return;
+    }
+    if (trim && isInteractive && HtmlHelper.trimElementValue(inputEl)) {
+        on?.input?.(inputEl.value);
+    }
+    if (inputEl.value !== lastCommitted) {
+        commitValue(inputEl.value);
+    }
+};
+const emitValue = (next) => {
+    if (inputEl) {
+        inputEl.value = next;
+    }
+    on?.input?.(next);
+    commitValue(next);
+};
+const applySuggestion = (suggestion) => {
+    closeSuggestions();
+    emitValue(suggestion.value);
+    on?.select?.(suggestion);
+    restoreFocus();
+};
+export const clear = () => {
+    if (!isInteractive) {
+        return;
+    }
+    emitValue('');
+    restoreFocus();
+    openSuggestions();
+};
+const handleRootClick = () => {
+    if (!isInteractive) {
+        return;
+    }
+    inputEl?.focus();
+    if (!isOpen) {
+        openSuggestions();
+    }
+};
+// calling openSuggestions() here expands the popover on Tab-focus
+const handleFocus = () => {
+    if (isRestoringFocus) {
+        return;
+    }
+    lastCommitted = inputEl?.value ?? currentValue;
+    on?.focus?.();
+};
+const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    // Row clicks blur the input before the click lands — closing here would unmount the row first.
+    if (next instanceof Node && rootEl?.contains(next)) {
+        return;
+    }
+    closeSuggestions();
+    flushCommit();
+    if (inputEl) {
+        inputEl.value = currentValue;
+    }
+    on?.blur?.();
+};
+const handleRootMousedown = (event) => {
+    if (event.target !== inputEl) {
+        event.preventDefault();
+    }
+};
+const handleInput = () => {
+    if (!inputEl) {
+        return;
+    }
+    if (isInteractive) {
+        isOpen = true;
+        isFiltering = true;
+        highlight = -1;
+    }
+    on?.input?.(inputEl.value);
+};
+const highlightedRow = () => (isPanelOpen && activeIndex >= 0 ? rows[activeIndex] : undefined);
+const handleKeydown = (event) => {
+    // Ahead of on.keydown: the trim below lands after it, so an Enter-submitting consumer reads raw text.
+    if (event.key === 'Enter' && !event.isComposing && isInteractive && highlightedRow()?.kind !== 'option') {
+        flushCommit();
+    }
+    on?.keydown?.(event);
+    if (!isInteractive) {
+        return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        event.preventDefault();
+        // plain `isOpen` — openSuggestions() here would drop the active filter and offer unrelated rows to Enter
+        isOpen = true;
+        const count = rows.length;
+        if (count === 0) {
+            highlight = -1;
+        }
+        else if (activeIndex < 0) {
+            highlight = step === 1 ? 0 : count - 1;
+        }
+        else {
+            highlight = (activeIndex + step + count) % count;
+        }
+        return;
+    }
+    if (event.key === 'Enter') {
+        if (event.isComposing) {
+            return;
+        }
+        const row = highlightedRow();
+        if (row?.kind === 'option') {
+            event.preventDefault();
+            applySuggestion(row.option.value);
+        }
+        else {
+            flushCommit();
+        }
+        return;
+    }
+    if (event.key === 'Escape' && isPanelOpen) {
+        event.preventDefault();
+        closeSuggestions();
+        return;
+    }
+    if (event.key === 'Tab') {
+        closeSuggestions();
+    }
+};
+const handlePickRow = (row) => {
+    if (row.kind === 'option') {
+        applySuggestion(row.option.value);
+    }
+};
+</script>
+
+{#snippet suggestionRow({ option }: { option: SelectOption<InputSuggestion> })}
+  <span class="input-suggest__suggestion">
+    <span class="input-suggest__suggestion-value">{option.label}</span>
+    {#if option.value.description}
+      <span class="input-suggest__suggestion-description">{option.value.description}</span>
+    {/if}
+  </span>
+{/snippet}
+
+<div
+  bind:this={rootEl}
+  class="input-suggest input-suggest--{size}"
+  class:input-suggest--open={isPanelOpen}
+  class:input-suggest--error={error}
+  class:input-suggest--disabled={disabled}
+  class:input-suggest--readonly={readonly}
+  class:input-suggest--inert={inert}
+  class:input-suggest--borderless={borderless}
+  onclick={handleRootClick}
+  onmousedown={handleRootMousedown}
+  onkeydown={() => undefined}
+  role="none">
+  {#if icon}
+    <span class="input-suggest__icon input-suggest__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+
+  <input
+    bind:this={inputEl}
+    class="input-suggest__input"
+    type="text"
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded={isPanelOpen}
+    aria-controls={listboxId}
+    aria-activedescendant={isPanelOpen && activeIndex >= 0 ? `${listboxId}-row-${activeIndex}` : undefined}
+    aria-autocomplete="list"
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
+    aria-required={ariaRequired ? 'true' : undefined}
+    aria-invalid={error ? 'true' : undefined}
+    id={id}
+    name={name}
+    autocomplete={autocomplete}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    value={currentValue}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown} />
+
+  {#if showClear}
+    <InputClearButton size={size} on={{ clear }} />
+  {/if}
+
+  <SelectListbox
+    triggerEl={rootEl}
+    isOpen={isPanelOpen}
+    rows={rows}
+    highlight={activeIndex}
+    listboxId={listboxId}
+    optionSnippet={suggestionRow}
+    on={{ pickRow: handlePickRow, hoverRow: (index) => (highlight = index), dismiss: closeSuggestions }} />
+</div>
+
+<!--
+@component
+InputSuggest — a plain text field that offers suggestions. **NOT a select:** the value is the
+string the user typed, it changes on every keystroke, and it is never constrained to the
+suggestion list — typed text that matches nothing stays valid, and there is no "Use …" /
+"Create …" confirmation step. `on.input` fires per keystroke exactly like `Input`'s; `on.change`
+commits once per edit — when focus leaves the whole control, on Enter, or on pick / clear —
+so reaching into the popover never commits the half-typed query. `on.select` additionally fires
+when a suggestion was picked. `value` is controlled and is what the filter reads.
+
+A click opens the full list, typing filters it by case-insensitive substring, no match closes the
+popover and the field keeps working as an ordinary input. Focus alone opens nothing — tabbing in
+just places the caret, as with the selects. ArrowDown / ArrowUp move through the
+suggestions, Enter substitutes the highlighted one (and is left alone when nothing is
+highlighted), Escape closes without touching the text, Tab closes and keeps what was typed.
+Trigger chrome, popover and rows are shared with the selects, minus the chevron.
+
+Leading / trailing whitespace is stripped on commit, so the committed value always matches what the
+field shows. Typing is untouched. Pass `trim={false}` to opt out.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input-suggest--description--color` | Suggestion description line color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input-suggest--description--font-size` | Suggestion description line font size | `var(--sc-kit--font-size--sm)` |
+
+**Trigger** (shared with the selects): `--sc-kit--select--trigger--{height, padding-inline, gap,
+background, background--disabled, border-color, border-color--hover, border-color--error,
+border-radius, underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius, box-shadow,
+max-height, padding}`.
+
+**Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
+it to `auto` so a row with a `description` can grow to two lines.
+
+**Clear button** (rendered when `clearable` and the value is non-empty):
+`--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+background--hover}`.
+-->
+
+<style>.input-suggest {
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
+  --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
+  --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
+  --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
+  --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
+  --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
+  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
+  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
+  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.input-suggest:where(:hover), .input-suggest:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.input-suggest {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: var(--_sel--height);
+  padding: 0 var(--_sel--padding-inline);
+  background: var(--_sel--background);
+  border: 1px solid var(--_sel--border-color);
+  border-radius: var(--_sel--border-radius);
+  color: var(--_sel--color);
+  font-size: var(--_sel--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.input-suggest--sm {
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
+}
+.input-suggest--md {
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
+}
+.input-suggest--lg {
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
+}
+.input-suggest:where(:hover:not(:focus-within)) {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
+}
+.input-suggest:where(:focus-within), .input-suggest--open {
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
+}
+.input-suggest--open {
+  --sc-kit--select--trigger--border-color: unset;
+}
+.input-suggest--error {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
+}
+.input-suggest--disabled, .input-suggest--readonly, .input-suggest--inert {
+  --sc-kit--select--trigger--border-color: unset;
+  --sc-kit--select--trigger--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.input-suggest--disabled {
+  --sc-kit--select--trigger--background: var(--_sel--background-disabled);
+  --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
+}
+.input-suggest--borderless {
+  --sc-kit--select--trigger--background: transparent;
+  --sc-kit--select--trigger--border-color: transparent;
+  --sc-kit--select--trigger--underline-color: transparent;
+  box-shadow: none;
+}
+.input-suggest__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+}
+.input-suggest__input::placeholder {
+  color: var(--_sel--placeholder-color);
+}
+.input-suggest__input:not([readonly]) {
+  cursor: text;
+}
+.input-suggest__input--hidden {
+  opacity: 0;
+  width: 0;
+  flex: 0;
+}
+.input-suggest__input--no-search {
+  caret-color: transparent;
+  cursor: pointer;
+}
+.input-suggest__selection {
+  flex: 0 1 auto;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.input-suggest__icon {
+  --sc-kit--icon--color: var(--_sel--icon-color);
+  --sc-kit--icon--size: var(--_sel--icon-size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.input-suggest__icon--leading {
+  margin-inline-end: var(--_sel--gap);
+}
+.input-suggest__icon--trailing {
+  margin-inline-start: var(--_sel--gap);
+}
+.input-suggest__spinner {
+  color: var(--_sel--icon-color);
+}
+.input-suggest--multi {
+  height: auto;
+  min-height: var(--_sel--height);
+  flex-wrap: wrap;
+  padding-block: 0.25rem;
+  padding-inline-end: calc(var(--_sel--padding-inline) + var(--_sel--icon-size) + var(--_sel--gap));
+  gap: var(--sc-kit--space--1);
+}
+.input-suggest__more {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--sc-kit--space--2);
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  user-select: none;
+}
+.input-suggest {
+  --_isg--description-color: var(--sc-kit--input-suggest--description--color, var(--sc-kit--color--text--muted));
+  --_isg--description-font-size: var(--sc-kit--input-suggest--description--font-size, var(--sc-kit--font-size--sm));
+  --sc-kit--select--option--height: auto;
+  cursor: text;
+}
+.input-suggest--disabled, .input-suggest--readonly, .input-suggest--inert {
+  cursor: default;
+}
+.input-suggest__suggestion {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.125rem;
+  min-width: 0;
+  min-block-size: var(--_sel--height);
+  padding-block: var(--sc-kit--space--1);
+}
+.input-suggest__suggestion-value {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.input-suggest__suggestion-description {
+  color: var(--_isg--description-color);
+  font-size: var(--_isg--description-font-size);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}</style>

package/dist/ui/select/cmp.input-suggest.svelte.d.ts

@@ -0,0 +1,106 @@
+export type InputSuggestInstance = {
+    focus: () => void;
+    select: () => void;
+    clear: () => void;
+    open: () => void;
+    close: () => void;
+};
+import { type IconProp } from '../icon';
+import type { InputSuggestion } from './types';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    /** Controlled — feed `on.input` back into it; the suggestion filter reads this prop, not the DOM. */
+    value: string | null | undefined;
+    /** Advisory shortcuts offered in the popover. Never a constraint — any typed text stays valid. */
+    suggestions: InputSuggestion[];
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    /** Non-editable but selectable; the popover never opens. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Show the × clear button when the value is non-empty. */
+    clearable?: boolean;
+    /**
+     * Strip leading / trailing whitespace when the value is committed — focus leaving the control or
+     * Enter. Typing is never touched, so the committed value always equals what the field shows.
+     * @default true
+     */
+    trim?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    name?: string;
+    id?: string;
+    /** @default 'off' */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        /** Fires on every keystroke, and on pick / clear — same signature and timing as `Input`. */
+        input?: (value: string) => void;
+        /** Fires when an edit is committed — focus leaving the control or Enter — and on pick / clear. */
+        change?: (value: string) => void;
+        /** Fires after `input` and `change` when the user picked a suggestion. */
+        select?: (suggestion: InputSuggestion) => void;
+        /** Fires when focus leaves the whole control — reaching into the popover does not count as leaving. */
+        blur?: () => void;
+        focus?: () => void;
+        keydown?: (event: KeyboardEvent) => void;
+    };
+};
+/**
+ * InputSuggest — a plain text field that offers suggestions. **NOT a select:** the value is the
+ * string the user typed, it changes on every keystroke, and it is never constrained to the
+ * suggestion list — typed text that matches nothing stays valid, and there is no "Use …" /
+ * "Create …" confirmation step. `on.input` fires per keystroke exactly like `Input`'s; `on.change`
+ * commits once per edit — when focus leaves the whole control, on Enter, or on pick / clear —
+ * so reaching into the popover never commits the half-typed query. `on.select` additionally fires
+ * when a suggestion was picked. `value` is controlled and is what the filter reads.
+ *
+ * A click opens the full list, typing filters it by case-insensitive substring, no match closes the
+ * popover and the field keeps working as an ordinary input. Focus alone opens nothing — tabbing in
+ * just places the caret, as with the selects. ArrowDown / ArrowUp move through the
+ * suggestions, Enter substitutes the highlighted one (and is left alone when nothing is
+ * highlighted), Escape closes without touching the text, Tab closes and keeps what was typed.
+ * Trigger chrome, popover and rows are shared with the selects, minus the chevron.
+ *
+ * Leading / trailing whitespace is stripped on commit, so the committed value always matches what the
+ * field shows. Typing is untouched. Pass `trim={false}` to opt out.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input-suggest--description--color` | Suggestion description line color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input-suggest--description--font-size` | Suggestion description line font size | `var(--sc-kit--font-size--sm)` |
+ *
+ * **Trigger** (shared with the selects): `--sc-kit--select--trigger--{height, padding-inline, gap,
+ * background, background--disabled, border-color, border-color--hover, border-color--error,
+ * border-radius, underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+ *
+ * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius, box-shadow,
+ * max-height, padding}`.
+ *
+ * **Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
+ * it to `auto` so a row with a `description` can grow to two lines.
+ *
+ * **Clear button** (rendered when `clearable` and the value is non-empty):
+ * `--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+ * background--hover}`.
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    focus: () => void;
+    select: () => void;
+    open: () => void;
+    close: () => void;
+    clear: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -80,7 +80,7 @@ declare function $$render<T>(): {
         on?: {
             /** Fires when the user picks/unpicks (and on group toggle-all). Emits the full new selection (array of values). */
             change?: (value: T[]) => void;
-            /** Fires when the user confirms the create-with-parent section. `parentValue` is the chosen parent root's `value` from the parent dropdown — undefined when no parent was selected. Return a Promise to keep the spinner up. */
+            /** Fires when the user confirms the create-with-parent section. `query` is trimmed. `parentValue` is the chosen parent root's `value` from the parent dropdown — undefined when no parent was selected. Return a Promise to keep the spinner up. */
             create?: (payload: {
                 query: string;
                 parentValue?: T;

package/dist/ui/select/index.d.ts

@@ -1,3 +1,5 @@
+export { default as InputSuggest } from './cmp.input-suggest.svelte';
+export type { InputSuggestInstance } from './cmp.input-suggest.svelte';
 export { default as Singleselect } from './cmp.singleselect.svelte';
 export type { SingleselectInstance } from './cmp.singleselect.svelte';
 export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
@@ -9,4 +11,4 @@ export type { MultiselectAsyncInstance } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
 export type { MultiselectTreeInstance } from './cmp.multiselect-tree.svelte';
 export { isSelectGroup } from './types';
-export type { SelectCreateOptions, SelectItem, SelectOption, SelectOptionGroup } from './types';
+export type { InputSuggestion, SelectCreateOptions, SelectItem, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/select/index.js

@@ -1,3 +1,4 @@
+export { default as InputSuggest } from './cmp.input-suggest.svelte';
 export { default as Singleselect } from './cmp.singleselect.svelte';
 export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 export { default as Multiselect } from './cmp.multiselect.svelte';

package/dist/ui/select/multiselect-base.svelte

@@ -279,7 +279,7 @@ const handleDndFinalize = (e) => {
         {#if selectedParent}
           {localization.createIn}<span>"{selectedParent.label}"</span>
         {:else}
-          {localization.createAsParent}<span>"{core.query}"</span>
+          {localization.createAsParent}<span>"{core.createQuery}"</span>
         {/if}
       </div>
       <div class="multiselect__create-new-action">

package/dist/ui/select/select-core.svelte.d.ts

@@ -13,7 +13,7 @@ export type SelectCoreConfig<T> = {
     getCompare: () => (a: T, b: T) => boolean;
     /** When false, typing never enters filtering mode — the popover is a click/keyboard-only picker. @default true */
     getSearchable?: () => boolean;
-    /** Optional `createOptions.canCreate` validator — presence enables creatable mode. */
+    /** Optional `createOptions.canCreate` validator — presence enables creatable mode. Called with the trimmed query. */
     getCanCreate: () => ((q: string) => boolean) | undefined;
     /** When true, no `kind:'create'` row is emitted (the host renders its own create UI) — keyboard navigation must not reach a row the listbox doesn't show. @default false */
     getHideCreateRow?: () => boolean;
@@ -52,9 +52,9 @@ export type SelectCoreConfig<T> = {
     }) => void;
     onClear: () => void;
     /**
-     * Consumer's create handler. Receives the current query and (optionally) a `parentValue` picked
-     * via the create-with-parent section. May return a Promise — when it does, the spinner appears
-     * after the {@link SPINNER_DELAY_MS} gate.
+     * Consumer's create handler. Receives the current query — trimmed, since it becomes the new
+     * item's label — and (optionally) a `parentValue` picked via the create-with-parent section.
+     * May return a Promise — when it does, the spinner appears after the {@link SPINNER_DELAY_MS} gate.
      */
     onCreate: (payload: {
         query: string;
@@ -64,6 +64,8 @@ export type SelectCoreConfig<T> = {
 export type SelectCore<T> = {
     readonly isOpen: boolean;
     readonly query: string;
+    /** `query` trimmed — what `canCreate` is asked about, what the create row shows, and what `onCreate` receives. Cmps rendering the typed text as a to-be-created label use this, not `query`. */
+    readonly createQuery: string;
     readonly highlight: number;
     readonly isFiltering: boolean;
     readonly rows: SelectRow<T>[];

package/dist/ui/select/select-core.svelte.js

@@ -66,15 +66,17 @@ export function createSelectCore(config) {
     };
     const debouncedLoad = $derived(Utils.debounce((q) => void runLoad(q), config.getDebounceMs?.() ?? 400));
     const flatOptions = $derived(flattenItems(items));
+    // Gate, row label and onCreate all read this: trimming at only one lets canCreate approve "a " and create "a".
+    const createQuery = $derived(query.trim());
     const showCreateRow = $derived.by(() => {
         const canCreate = config.getCanCreate();
-        if (!canCreate || !query.trim()) {
+        if (!canCreate || !createQuery) {
             return false;
         }
-        if (!canCreate(query)) {
+        if (!canCreate(createQuery)) {
             return false;
         }
-        const q = query.trim().toLowerCase();
+        const q = createQuery.toLowerCase();
         if (flatOptions.some((f) => f.option.label.toLowerCase() === q)) {
             return false;
         }
@@ -84,7 +86,7 @@ export function createSelectCore(config) {
     const rows = $derived.by(() => {
         const out = [];
         if (showCreateRow && !config.getHideCreateRow?.()) {
-            out.push({ kind: 'create', query });
+            out.push({ kind: 'create', query: createQuery });
         }
         const compare = config.getCompare();
         const hideSelected = config.getHideSelected?.() ?? false;
@@ -222,8 +224,8 @@ export function createSelectCore(config) {
             return;
         }
         if (row.kind === 'create') {
-            if (query.trim()) {
-                void handleCreate(query);
+            if (createQuery) {
+                void handleCreate(createQuery);
             }
             return;
         }
@@ -346,6 +348,9 @@ export function createSelectCore(config) {
         get query() {
             return query;
         },
+        get createQuery() {
+            return createQuery;
+        },
         get highlight() {
             return highlight;
         },
@@ -384,10 +389,10 @@ export function createSelectCore(config) {
             }
         },
         confirmCreate(parentValue) {
-            if (!query.trim() || spinnerVisible) {
+            if (!createQuery || spinnerVisible) {
                 return;
             }
-            void handleCreate(query, parentValue);
+            void handleCreate(createQuery, parentValue);
         }
     };
 }

package/dist/ui/select/types.d.ts

@@ -47,9 +47,19 @@ export type SelectRowCreate = {
     query: string;
 };
 export type SelectRow<T> = SelectRowOption<T> | SelectRowGroupHeader<T> | SelectRowCreate;
+/**
+ * One advisory row of `InputSuggest`. Suggestions never constrain the typed value — they only
+ * offer a shortcut to a known string.
+ */
+export type InputSuggestion = {
+    /** Text substituted into the field when the row is picked — also the row's label. */
+    value: string;
+    /** Secondary line rendered under the value in a muted tone. */
+    description?: string;
+};
 /** Creatable mode — passing this object to a select enables the create UI. */
 export type SelectCreateOptions = {
-    /** Validates each query — only when it returns true does the create UI appear (and the query isn't a duplicate of an existing label). */
+    /** Validates each query, trimmed — the same string the create row shows and `on.create` receives. Only when it returns true does the create UI appear (and the query isn't a duplicate of an existing label). */
     canCreate: (query: string) => boolean;
     /** Replaces the whole localized text in front of the typed query on the create row: `Create "foo"` → `Invite "foo"`, and drops the leading `+` glyph (the label fills the full row width). Not localized by the kit; pass already-translated text. Has no effect on the create-with-parent section, which keeps its own localized wording. */
     prefix?: string;
@@ -211,7 +221,7 @@ export type MultiselectBaseProps<T> = {
     on?: {
         /** Fires when the user picks/unpicks/reorders. Emits the full new selection. */
         change?: (value: SelectOption<T>[]) => void;
-        /** Fires when the user activates "Create …". When `parentValue` is present, the user picked it via the create-with-parent section. Return a Promise to keep the spinner up until the consumer finishes. */
+        /** Fires when the user activates "Create …". `query` is trimmed. When `parentValue` is present, the user picked it via the create-with-parent section. Return a Promise to keep the spinner up until the consumer finishes. */
         create?: (payload: {
             query: string;
             parentValue?: T;

package/dist/ui/textarea/cmp.textarea.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">import { HtmlHelper } from '../../core/utils';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
-const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
+const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, trim = true, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
 let textareaEl = $state.raw(undefined);
 const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
 const valueParsed = $derived(singleLine && value ? sanitizeLineBreaks(value) : (value ?? ''));
 const effectiveRows = $derived(singleLine ? 1 : rows);
+const trimOnCommit = $derived(trim && !disabled && !readonly && !inert);
 /** Imperative API exposed via `bind:this` on `<Textarea>`. */
 export const focus = () => textareaEl?.focus();
 export const select = () => textareaEl?.select();
@@ -40,10 +41,24 @@ const handleInput = () => {
     resize();
     on?.input?.(textareaEl.value);
 };
+const applyTrim = () => {
+    if (!trimOnCommit || !textareaEl || !HtmlHelper.trimElementValue(textareaEl)) {
+        return null;
+    }
+    handleInput();
+    return textareaEl.value;
+};
+const commitTrim = () => {
+    const trimmed = applyTrim();
+    if (trimmed !== null) {
+        on?.change?.(trimmed);
+    }
+};
 const handleChange = () => {
     if (!textareaEl) {
         return;
     }
+    applyTrim();
     on?.change?.(textareaEl.value);
 };
 const handleBeforeInput = (e) => {
@@ -63,12 +78,16 @@ const handleBeforeInput = (e) => {
     }
 };
 const handleKeydown = (e) => {
-    if (submitOnEnter && e.key === 'Enter' && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+    if (submitOnEnter && e.key === 'Enter' && !e.isComposing && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         e.preventDefault();
+        // Full commit, unlike Input's Enter — a textarea fires no native `change`, so nothing follows this.
+        commitTrim();
         on?.submit?.();
     }
 };
 const handleBlur = () => {
+    // Before the re-sync: trimming after it re-emits a lagging prop as fresh input, losing the last edit.
+    commitTrim();
     if (textareaEl) {
         textareaEl.value = valueParsed;
     }
@@ -131,6 +150,11 @@ Set `singleLine` to strip line breaks (paste-safe), `submitOnEnter` to fire `on.
 plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
 exposed via `bind:this`.
 
+Leading / trailing whitespace, including any surrounding blank lines, is stripped at every commit
+point — `change`, blur, and before `on.submit` — so the value the consumer receives always matches
+what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
+`trim={false}` to opt out.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

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

@@ -22,6 +22,13 @@ type Props = {
     singleLine?: boolean;
     /** Fire `on.submit` on Enter (without modifiers). Shift+Enter still inserts a newline. */
     submitOnEnter?: boolean;
+    /**
+     * Strip leading / trailing whitespace, including any surrounding blank lines, when the value is committed — on
+     * `change`, on blur, and before `on.submit`. Typing is never touched, so the committed value
+     * always equals what the field shows.
+     * @default true
+     */
+    trim?: boolean;
     placeholder?: string;
     name?: string;
     id?: string | null;
@@ -55,6 +62,11 @@ type Props = {
  * plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
  * exposed via `bind:this`.
  *
+ * Leading / trailing whitespace, including any surrounding blank lines, is stripped at every commit
+ * point — `change`, blur, and before `on.submit` — so the value the consumer receives always matches
+ * what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
+ * `trim={false}` to opt out.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

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

@@ -4,9 +4,10 @@ let { value, size = 'md', prefix = 'https://', on, ...rest } = $props();
 const localization = new WebsiteInputLocalization();
 // Strip any pre-existing http/https prefix from the external value, so users always see just the host.
 const stripPrefix = (raw) => raw.replace(/^https?:\/\//i, '');
+// Blank test trimmed, value as typed: trimming here eats spaces mid-typing, `prefix + spaces` reads as filled.
 const toFull = (display) => {
-    const cleaned = stripPrefix(display).trim();
-    return cleaned === '' ? '' : prefix + cleaned;
+    const cleaned = stripPrefix(display);
+    return cleaned.trim() === '' ? '' : prefix + cleaned;
 };
 const displayValue = $derived(stripPrefix(value ?? ''));
 const handleInput = (v) => on?.input?.(toFull(v));

package/package.json

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