@streamscloud/kit 0.32.0 → 0.34.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/cmp.input-suggest.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+<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, icon, name, id, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+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);
@@ -66,7 +67,13 @@ const commitValue = (next) => {
     on?.change?.(next);
 };
 const flushCommit = () => {
-    if (inputEl && inputEl.value !== lastCommitted) {
+    if (!inputEl) {
+        return;
+    }
+    if (trim && isInteractive && HtmlHelper.trimElementValue(inputEl)) {
+        on?.input?.(inputEl.value);
+    }
+    if (inputEl.value !== lastCommitted) {
         commitValue(inputEl.value);
     }
 };
@@ -137,7 +144,12 @@ const handleInput = () => {
     }
     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;
@@ -160,7 +172,10 @@ const handleKeydown = (event) => {
         return;
     }
     if (event.key === 'Enter') {
-        const row = isPanelOpen && activeIndex >= 0 ? rows[activeIndex] : undefined;
+        if (event.isComposing) {
+            return;
+        }
+        const row = highlightedRow();
         if (row?.kind === 'option') {
             event.preventDefault();
             applySuggestion(row.option.value);
@@ -270,6 +285,9 @@ suggestions, Enter substitutes the highlighted one (and is left alone when nothi
 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 |
 |---|---|---|

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

@@ -27,6 +27,12 @@ type Props = {
     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;
@@ -65,6 +71,9 @@ type Props = {
  * 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 |
  * |---|---|---|

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

@@ -82,7 +82,11 @@ $effect(() => {
 MultiselectTree — sync, grouped multi-value picker with cascade + tri-state behavior and an
 optional create-with-parent section. Tree of one level: parent groups (each a
 `SelectOptionGroup<T>`) with child options; cascade-aware toggle on group headers; tri-state
-checkbox visual when `selectionMode='children-include-parent'`. Selection is visible inside
+checkbox visual when `selectionMode='children-include-parent'`.
+
+`groupHeader='value'` + `selectionMode='children-only'` turns the parent into an ordinary
+independent checkbox instead: clicking it picks the group's own `value` and never touches the
+children, and the header's checkbox is binary rather than tri-state. Selection is visible inside
 the popover (checkbox rows) AND as chips inside the trigger by default; pass an empty
 `selectionSnippet` to hide the chip row entirely, or a custom one to render a count badge
 or any summary instead.

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

@@ -36,10 +36,13 @@ declare function $$render<T>(): {
         /**
          * Group-header behavior:
          * - `'static'` — non-interactive label.
+         * - `'value'` — clicking the header picks the group's own `value` and nothing else; the header is an ordinary
+         *   binary checkbox, independent of its children. Requires a `value` on the group, otherwise the header stays
+         *   inert. Pair with `selectionMode='children-only'` for a fully independent parent.
          * - `'toggle-all'` (default) — clicking the header toggles every child option at once; tri-state checkbox when `selectionMode='children-include-parent'`.
          * @default 'toggle-all'
          */
-        groupHeader?: "static" | "toggle-all";
+        groupHeader?: "static" | "value" | "toggle-all";
         /**
          * Cascade between group.value and children:
          * - `'children-only'` (default) — picking a child adds only the child; group's own `value` stays independent.
@@ -80,7 +83,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;
@@ -118,7 +121,11 @@ interface $$IsomorphicComponent {
  * MultiselectTree — sync, grouped multi-value picker with cascade + tri-state behavior and an
  * optional create-with-parent section. Tree of one level: parent groups (each a
  * `SelectOptionGroup<T>`) with child options; cascade-aware toggle on group headers; tri-state
- * checkbox visual when `selectionMode='children-include-parent'`. Selection is visible inside
+ * checkbox visual when `selectionMode='children-include-parent'`.
+ *
+ * `groupHeader='value'` + `selectionMode='children-only'` turns the parent into an ordinary
+ * independent checkbox instead: clicking it picks the group's own `value` and never touches the
+ * children, and the header's checkbox is binary rather than tri-state. Selection is visible inside
  * the popover (checkbox rows) AND as chips inside the trigger by default; pass an empty
  * `selectionSnippet` to hide the chip row entirely, or a custom one to render a count badge
  * or any summary instead.

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

@@ -59,7 +59,7 @@ export type InputSuggestion = {
 };
 /** 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;
@@ -221,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.32.0",
+  "version": "0.34.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",