@salmexio/ui 1.2.1 → 1.3.0

package/dist/forms/SearchInput/SearchInput.svelte.d.ts

@@ -0,0 +1,79 @@
+export interface SearchOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SearchGroup {
+    label: string;
+    options: SearchOption[];
+}
+type SearchSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Visible label. */
+    label: string;
+    /** Search query value (bindable). */
+    value?: string;
+    /** Flat list of options. */
+    options?: SearchOption[];
+    /** Grouped options. */
+    groups?: SearchGroup[];
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Minimum characters before showing suggestions. */
+    minChars?: number;
+    /** Debounce delay in ms for the onsearch callback. */
+    debounceMs?: number;
+    /** Show loading spinner in dropdown. */
+    loading?: boolean;
+    /** Allow clearing the input. */
+    clearable?: boolean;
+    /** Size variant. */
+    size?: SearchSize;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Required field. */
+    required?: boolean;
+    /** Hide the visible label. */
+    hideLabel?: boolean;
+    /** Reserve footer space even when empty. */
+    alwaysShowFooter?: boolean;
+    /** Additional CSS class. */
+    class?: string;
+    /** Called when an option is selected. */
+    onselect?: (option: SearchOption) => void;
+    /** Called when search query changes (debounced). */
+    onsearch?: (query: string) => void;
+    /** Called when input value changes. */
+    oninput?: (event: Event) => void;
+    /** Called when input loses focus. */
+    onblur?: (event: FocusEvent) => void;
+    /** Test ID. */
+    testId?: string;
+}
+/**
+ * SearchInput
+ *
+ * INFRARED — Search input with autocomplete dropdown, match highlighting,
+ * grouped results, loading state, and keyboard navigation.
+ * Follows WAI-ARIA combobox pattern.
+ *
+ * @example
+ * <SearchInput
+ *   label="Search models"
+ *   options={[
+ *     { value: 'opus', label: 'Claude Opus' },
+ *     { value: 'sonnet', label: 'Claude Sonnet' },
+ *   ]}
+ *   bind:value={query}
+ *   onselect={(opt) => console.log(opt)}
+ * />
+ */
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;
+//# sourceMappingURL=SearchInput.svelte.d.ts.map

package/dist/forms/SearchInput/SearchInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/SearchInput/SearchInput.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;CACxB;AAQD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,qCAAqC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqZD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/forms/SearchInput/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SearchInput } from './SearchInput.svelte';
+export type { SearchOption, SearchGroup } from './SearchInput.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/SearchInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/forms/SearchInput/index.js

@@ -0,0 +1 @@
+export { default as SearchInput } from './SearchInput.svelte';

package/dist/forms/Select/Select.svelte

@@ -71,6 +71,8 @@ interface Props {
 	onchangemulti?: (values: string[]) => void;
 	/** Test ID */
 	testId?: string;
+	/** Reserve footer space even when empty (prevents layout shift). */
+	alwaysShowFooter?: boolean;
 }
 
 let {
@@ -90,7 +92,8 @@ let {
 	class: className = '',
 	onchange,
 	onchangemulti,
-	testId
+	testId,
+	alwaysShowFooter = true
 }: Props = $props();
 
 const id = `select-${Math.random().toString(36).slice(2, 9)}`;
@@ -150,6 +153,7 @@ const showError = $derived(hasInteracted && !!error);
 const ariaDescribedBy = $derived(
 	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
 );
+const hasFooterContent = $derived(showError || !!hint);
 
 function positionDropdown() {
 	if (!triggerEl) return;
@@ -478,13 +482,15 @@ onMount(() => {
 	</button>
 
 	<!-- Footer: error / hint -->
-	<div class="sx-select-footer">
-		{#if showError}
-			<p id={errorId} class="sx-select-error" role="alert" aria-live="assertive">{error}</p>
-		{:else if hint}
-			<p id={hintId} class="sx-select-hint">{hint}</p>
-		{/if}
-	</div>
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-select-footer">
+			{#if showError}
+				<p id={errorId} class="sx-select-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-select-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <!-- Dropdown panel -- fixed positioning to escape overflow/stacking contexts -->

package/dist/forms/Select/Select.svelte.d.ts

@@ -43,6 +43,8 @@ interface Props {
     onchangemulti?: (values: string[]) => void;
     /** Test ID */
     testId?: string;
+    /** Reserve footer space even when empty (prevents layout shift). */
+    alwaysShowFooter?: boolean;
 }
 /**
  * Select

package/dist/forms/Select/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;CACxB;AAQD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,KAAK;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAudD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,MAAM,2DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;CACxB;AAQD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,KAAK;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AA2dD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,MAAM,2DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/forms/TextInput/TextInput.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import { onDestroy } from 'svelte';
 import { cn } from '../../utils/cn.js';
 
 type InputSize = 'sm' | 'md' | 'lg';
@@ -47,6 +48,12 @@ interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'inputmode'
 	onclear?: () => void;
 	testId?: string;
 	validateOnMount?: boolean;
+	/** Debounce delay in ms. Fires ondebounce after typing pauses. */
+	debounceMs?: number;
+	/** Called after debounce delay with current value. */
+	ondebounce?: (value: string) => void;
+	/** Reserve footer space even when empty (prevents layout shift). */
+	alwaysShowFooter?: boolean;
 }
 
 let {
@@ -84,6 +91,9 @@ let {
 	onclear,
 	testId,
 	validateOnMount = false,
+	debounceMs,
+	ondebounce,
+	alwaysShowFooter = true,
 	...restProps
 }: Props = $props();
 
@@ -91,6 +101,9 @@ let inputRef = $state<HTMLInputElement | undefined>();
 let isFocused = $state(false);
 let hasInteracted = $state(false);
 let passwordVisible = $state(false);
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+onDestroy(() => clearTimeout(debounceTimer));
 
 const shouldValidate = $derived(hasInteracted || validateOnMount);
 const showError = $derived(shouldValidate && !!error);
@@ -109,11 +122,18 @@ const hasRightContent = $derived(
 const ariaDescribedBy = $derived(
 	[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
 );
+const hasFooterContent = $derived(
+	showError || showSuccess || !!hint || (showCharCount && maxLength !== undefined)
+);
 
 function handleInput(e: Event) {
 	const target = e.target as HTMLInputElement;
 	value = target.value;
 	oninput?.(e);
+	if (debounceMs && ondebounce) {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => ondebounce!(value), debounceMs);
+	}
 }
 
 function handleBlur(e: FocusEvent) {
@@ -272,24 +292,26 @@ function handleKeyDown(e: KeyboardEvent) {
 		{/if}
 	</div>
 
-	<div class="sx-input-footer">
-		<div class="sx-input-messages">
-			{#if showError}
-				<p id={errorId} class="sx-input-message sx-input-message-error" role="alert" aria-live="assertive">
-					{error}
-				</p>
-			{:else if showSuccess}
-				<p class="sx-input-message sx-input-message-success" role="status" aria-live="polite">{successMessage}</p>
-			{:else if hint}
-				<p id={hintId} class="sx-input-message sx-input-message-hint">{hint}</p>
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-input-footer" class:sx-input-footer-empty={!hasFooterContent}>
+			<div class="sx-input-messages">
+				{#if showError}
+					<p id={errorId} class="sx-input-message sx-input-message-error" role="alert" aria-live="assertive">
+						{error}
+					</p>
+				{:else if showSuccess}
+					<p class="sx-input-message sx-input-message-success" role="status" aria-live="polite">{successMessage}</p>
+				{:else if hint}
+					<p id={hintId} class="sx-input-message sx-input-message-hint">{hint}</p>
+				{/if}
+			</div>
+			{#if showCharCount && maxLength !== undefined}
+				<span class="sx-input-charcount" class:sx-input-charcount-warn={value.length > maxLength * 0.9}>
+					{value.length}/{maxLength}
+				</span>
 			{/if}
 		</div>
-		{#if showCharCount && maxLength !== undefined}
-			<span class="sx-input-charcount" class:sx-input-charcount-warn={value.length > maxLength * 0.9}>
-				{value.length}/{maxLength}
-			</span>
-		{/if}
-	</div>
+	{/if}
 </div>
 
 <style>

package/dist/forms/TextInput/TextInput.svelte.d.ts

@@ -37,6 +37,12 @@ interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'inputmode'
     onclear?: () => void;
     testId?: string;
     validateOnMount?: boolean;
+    /** Debounce delay in ms. Fires ondebounce after typing pauses. */
+    debounceMs?: number;
+    /** Called after debounce delay with current value. */
+    ondebounce?: (value: string) => void;
+    /** Reserve footer space even when empty (prevents layout shift). */
+    alwaysShowFooter?: boolean;
 }
 /**
  * TextInput

package/dist/forms/TextInput/TextInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,cAAc,CAAC;IACjG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuND;;;;;GAKG;AACH,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAK3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,cAAc,CAAC;IACjG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuOD;;;;;GAKG;AACH,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/forms/Textarea/Textarea.svelte

@@ -45,6 +45,8 @@ interface Props {
 	onblur?: (event: FocusEvent) => void;
 	onfocus?: (event: FocusEvent) => void;
 	testId?: string;
+	/** Reserve footer space even when empty (prevents layout shift). */
+	alwaysShowFooter?: boolean;
 }
 
 let {
@@ -73,7 +75,8 @@ let {
 	oninput,
 	onblur,
 	onfocus,
-	testId
+	testId,
+	alwaysShowFooter = true
 }: Props = $props();
 
 let textareaEl = $state<HTMLTextAreaElement | null>(null);
@@ -95,6 +98,7 @@ const showHandle = $derived(effectiveResize !== 'none' && !disabled);
 const resizeVertical = $derived(effectiveResize === 'vertical' || effectiveResize === 'both');
 const resizeHorizontal = $derived(effectiveResize === 'horizontal' || effectiveResize === 'both');
 
+const hasFooterContent = $derived(!!error || !!successMessage || !!hint || showCharCount);
 const describedBy = $derived(
 	[
 		error ? errorId : null,
@@ -297,6 +301,7 @@ onMount(() => {
 		{/if}
 	</div>
 
+	{#if alwaysShowFooter || hasFooterContent}
 	<div class="sx-textarea-footer">
 		<div class="sx-textarea-messages">
 			{#if error}
@@ -332,6 +337,7 @@ onMount(() => {
 			</span>
 		{/if}
 	</div>
+	{/if}
 </div>
 
 <style>

package/dist/forms/Textarea/Textarea.svelte.d.ts

@@ -28,6 +28,8 @@ interface Props {
     onblur?: (event: FocusEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     testId?: string;
+    /** Reserve footer space even when empty (prevents layout shift). */
+    alwaysShowFooter?: boolean;
 }
 /**
  * Textarea

package/dist/forms/Textarea/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAOA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE9D,UAAU,KAAK;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuQD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAOA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE9D,UAAU,KAAK;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AA2QD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}