diff --git a/.changeset/dirty-snails-obey.md b/.changeset/dirty-snails-obey.md
new file mode 100644
index 0000000000..97e433e80f
--- /dev/null
+++ b/.changeset/dirty-snails-obey.md
@@ -0,0 +1,8 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+chore(textinput/textarea): upgrade to Svelte 5 syntax
+
+BREAKING CHANGES:
+* The message, description, and fill slots have been replaced with snippets.
diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md
index f44d59687f..d195768103 100755
--- a/MIGRATION_GUIDE.md
+++ b/MIGRATION_GUIDE.md
@@ -39,6 +39,11 @@
 - The variant `Muted` has been removed, `Tonal` has been added
 - `s-btn__md` has been removed, `s-btn__lg` has been added
 
+#### Inputs
+- `s-input__md` removed
+- `s-input__xl` removed
+- **Nested inputs** html will require slight tweaking on consumers' side
+
 #### Menu
 
 The menu component has been updated to use new class names and structure. The following changes are breaking:
@@ -105,6 +110,10 @@ The menu component has been updated to use new class names and structure. The fo
 - `.s-tag__xs` removed
 - `.s-tag__md` removed
 
+#### Textarea
+- `s-textarea__md` removed
+- `s-textarea__xl` removed
+
 # Migrating from Stacks Svelte v0 to v1
 
 ## Breaking changes
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
index 3b8ed574f6..2483f88fe4 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
@@ -81,7 +81,9 @@
                     label={`${state || "default"} input`}
                     {state}
                 >
-                    <span slot="message">{state || "default"} message</span>
+                    {#snippet message()}
+                        <span>{state || "default"} message</span>
+                    {/snippet}
                 </TextArea>
             </div>
         {/each}
@@ -90,21 +92,17 @@
 
 <Story name="Status" asChild>
     <div class="d-grid g16">
-        <div class="d-flex fd-column">
-            <TextArea
-                id="optional-status-input"
-                placeholder="Age"
-                label="optional input"
-                optional
-            />
-        </div>
         <div class="d-flex fd-column">
             <TextArea
                 id="required-status-input"
                 placeholder="Full name"
                 label="required input"
                 required
-            />
+            >
+                {#snippet description()}
+                    <span>this input has been marked required.</span>
+                {/snippet}
+            </TextArea>
         </div>
     </div>
 </Story>
@@ -135,20 +133,24 @@
     </div>
 </Story>
 
-<Story name="Slots" asChild>
+<Story name="Snippets" asChild>
+    <p>The examples below show all the snippets this component supports.</p>
     <div class="d-grid g16">
         <div class="d-flex fd-column">
-            <TextArea id="description-slot-input" label="Description slot">
-                <span slot="description">
-                    This TextArea includes a description slot.
-                </span>
+            <TextArea
+                id="description-snippet-input"
+                label="Description snippet"
+            >
+                {#snippet description()}
+                    <span>This TextArea includes a description snippet.</span>
+                {/snippet}
             </TextArea>
         </div>
         <div class="d-flex fd-column">
-            <TextArea id="message-slot-input" label="Message slot">
-                <span slot="message">
-                    This TextArea includes a message slot.
-                </span>
+            <TextArea id="message-snippet-input" label="Message snippet">
+                {#snippet message()}
+                    <span>This TextArea includes a message snippet.</span>
+                {/snippet}
             </TextArea>
         </div>
     </div>
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
index e5c317598c..d228184d7b 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts">
+    import type { HTMLTextareaAttributes } from "svelte/elements";
+    import type { Snippet } from "svelte";
     import Icon from "../Icon/Icon.svelte";
     import Label from "../Label/Label.svelte";
     import {
@@ -12,79 +14,96 @@
         IconCheckmark,
     } from "@stackoverflow/stacks-icons-legacy/icons";
 
-    /**
-     * `id` attribute of the text input
-     * @type {string}
-     */
-    export let id: string;
-
-    /**
-     * The label associated with the input
-     * @type {string}
-     */
-    export let label: string;
-
-    /**
-     * Sets the disabled state of the input
-     * @type {boolean}
-     */
-    export let disabled: boolean = false;
-
-    /**
-     * The visiblity of the label element
-     * @type {boolean}
-     */
-    export let hideLabel: boolean = false;
-
-    /**
-     * Name attribute of the textarea
-     * @type {string | undefined}
-     */
-    export let name: string | undefined = undefined;
-
-    /**
-     * Placeholder text for the input
-     * @type {string}
-     */
-    export let placeholder: string = "";
-
-    /**
-     * Sets the readonly state of the input
-     * @type {boolean}
-     */
-    export let readonly: boolean = false;
-
-    /**
-     * Make the input required and show required label status
-     * @type {boolean}
-     */
-    export let required: boolean = false;
-
-    /**
-     * The size of the text input
-     * @type {"" | "sm" | "lg"} Size
-     */
-    export let size: Size = "";
-
-    /**
-     * The size of the text input
-     * @type {"" | "error" | "success" | "warning"} State
-     */
-    export let state: State = "";
-
-    /**
-     * Additional CSS classes added to the underlying HTML input element
-     * @type {string}
-     */
-    let className = "";
-    export { className as class };
-
-    /**
-     * Localized translation for the required label status text
-     */
-    export let i18nRequiredText: string | undefined = undefined;
-
-    $: classes = getClasses(className, size);
+    interface Props extends Omit<HTMLTextareaAttributes, "size"> {
+        /**
+         * `id` attribute of the text input
+         * @type {string}
+         */
+        id: string;
+        /**
+         * The label associated with the input
+         * @type {string}
+         */
+        label: string;
+        /**
+         * Sets the disabled state of the input
+         * @type {boolean}
+         */
+        disabled?: boolean;
+        /**
+         * The visiblity of the label element
+         * @type {boolean}
+         */
+        hideLabel?: boolean;
+        /**
+         * Name attribute of the textarea
+         * @type {string | undefined}
+         */
+        name?: string | undefined;
+        /**
+         * Placeholder text for the input
+         * @type {string}
+         */
+        placeholder?: string;
+        /**
+         * Sets the readonly state of the input
+         * @type {boolean}
+         */
+        readonly?: boolean;
+        /**
+         * Make the input required and show required label status
+         * @type {boolean}
+         */
+        required?: boolean;
+        /**
+         * The size of the text input
+         * @type {"" | "sm" | "lg"} Size
+         */
+        size?: Size;
+        /**
+         * The size of the text input
+         * @type {"" | "error" | "success" | "warning"} State
+         */
+        state?: State;
+
+        /**
+         * Additional CSS classes added to the underlying HTML input element
+         * @type {string}
+         */
+        class?: string;
+        /**
+         * Localized translation for the required label status text
+         */
+        i18nRequiredText?: string | undefined;
+
+        /**
+         * Optional description snippet rendered between the label and input.
+         */
+        description?: Snippet;
+
+        /**
+         * Optional message snippet rendered after the input.
+         */
+        message?: Snippet;
+    }
+
+    let {
+        id,
+        label,
+        disabled = false,
+        hideLabel = false,
+        name = undefined,
+        placeholder = "",
+        readonly = false,
+        required = false,
+        size = "",
+        state = "",
+        class: className = "",
+        i18nRequiredText = undefined,
+        description,
+        message,
+        ...rest
+    }: Props = $props();
 
     const getClasses = (className: string, size: Size) => {
         const base = "s-textarea";
@@ -100,6 +119,7 @@
 
         return classes;
     };
+    let classes = $derived(getClasses(className, size));
 </script>
 
 <div
@@ -118,19 +138,19 @@
         {label}
     </Label>
 
-    {#if $$slots.description}
+    {#if description}
         <!-- Renders a description between the label and input. -->
         <p class="s-description mb0 mtn2" id={`${id}-description`}>
-            <slot name="description" />
+            {@render description()}
         </p>
     {/if}
 
     <div class="ps-relative w100 d-flex">
         <textarea
             {id}
-            aria-describedby={$$slots.message
+            aria-describedby={message
                 ? `${id}-message`
-                : $$slots.description
+                : description
                   ? `${id}-description`
                   : undefined}
             aria-invalid={state === "error"}
@@ -140,15 +160,8 @@
             {placeholder}
             {readonly}
             {required}
-            {...$$restProps}
-            on:change
-            on:input
-            on:keydown
-            on:keyup
-            on:focus
-            on:blur
-            on:paste
-        />
+            {...rest}
+        ></textarea>
 
         {#if state}
             <div class="s-input-icon">
@@ -163,10 +176,10 @@
         {/if}
     </div>
 
-    {#if $$slots.message}
+    {#if message}
         <!-- Renders a message after the input. -->
         <p class="s-input-message" id={`${id}-message`}>
-            <slot name="message" />
+            {@render message()}
         </p>
     {/if}
 </div>
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.test.ts b/packages/stacks-svelte/src/components/TextArea/TextArea.test.ts
index ab2302ee11..af5c4effe5 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.test.ts
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.test.ts
@@ -127,9 +127,7 @@ describe("TextArea", () => {
         render(TextArea, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                description: snippet,
-            },
+            description: snippet,
         });
 
         expect(screen.getByText("test snippet").parentElement).to.have.class(
@@ -141,9 +139,7 @@ describe("TextArea", () => {
         render(TextArea, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                message: snippet,
-            },
+            message: snippet,
         });
 
         expect(screen.getByText("test snippet").parentElement).to.have.class(
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
index ef6f39a782..2c052f2d9f 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
@@ -66,7 +66,9 @@
                     label="{fillSide}ed fill"
                     {fillSide}
                 >
-                    <span slot="fill">{fillSide}ed fill</span>
+                    {#snippet fill()}
+                        <span>{fillSide}ed fill</span>
+                    {/snippet}
                 </TextInput>
             </div>
         {/each}
@@ -113,7 +115,9 @@
                     label={`${state || "default"} input`}
                     {state}
                 >
-                    <span slot="message">{state || "default"} message</span>
+                    {#snippet message()}
+                        <span>{state || "default"} message</span>
+                    {/snippet}
                 </TextInput>
             </div>
         {/each}
@@ -122,21 +126,17 @@
 
 <Story name="Status" asChild>
     <div class="d-grid g16">
-        <div class="d-flex fd-column">
-            <TextInput
-                id="optional-status-input"
-                placeholder="Age"
-                label="optional input"
-                optional
-            />
-        </div>
         <div class="d-flex fd-column">
             <TextInput
                 id="required-status-input"
                 placeholder="Full name"
                 label="required input"
                 required
-            />
+            >
+                {#snippet description()}
+                    <span>this input has been marked required.</span>
+                {/snippet}
+            </TextInput>
         </div>
     </div>
 </Story>
@@ -182,25 +182,31 @@
     </div>
 </Story>
 
-<Story name="Slots" asChild>
+<Story name="Snippets" asChild>
+    <p>The examples below show all the snippets this component supports.</p>
     <div class="d-grid g16">
         <div class="d-flex fd-column">
-            <TextInput id="description-slot-input" label="Description slot">
-                <span slot="description">
-                    This TextInput includes a description slot.
-                </span>
+            <TextInput
+                id="description-snippet-input"
+                label="Description snippet"
+            >
+                {#snippet description()}
+                    <span>This TextInput includes a description snippet.</span>
+                {/snippet}
             </TextInput>
         </div>
         <div class="d-flex fd-column">
-            <TextInput id="message-slot-input" label="Message slot">
-                <span slot="message">
-                    This TextInput includes a message slot.
-                </span>
+            <TextInput id="message-snippet-input" label="Message snippet">
+                {#snippet message()}
+                    <span>This TextInput includes a message snippet.</span>
+                {/snippet}
             </TextInput>
         </div>
         <div class="d-flex fd-column">
-            <TextInput id="fill-slot-input" label="Fill slot">
-                <span slot="fill">https://</span>
+            <TextInput id="fill-snippet-input" label="Fill snippet">
+                {#snippet fill()}
+                    <span>https://</span>
+                {/snippet}
             </TextInput>
         </div>
     </div>
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
index 3e945f9224..e981ff856e 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
@@ -19,8 +19,11 @@
 </script>
 
 <script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { Snippet } from "svelte";
     import Icon from "../Icon/Icon.svelte";
     import Label from "../Label/Label.svelte";
+
     import {
         IconAlert,
         IconAlertCircle,
@@ -29,91 +32,125 @@
         IconSearch,
     } from "@stackoverflow/stacks-icons-legacy/icons";
 
-    /**
-     * `id` attribute of the text input
-     * @type {string}
-     */
-    export let id: string;
-
-    /**
-     * The label associated with the input
-     * @type {string}
-     */
-    export let label: string;
-
-    /**
-     * Sets the disabled state of the input
-     * @type {boolean}
-     */
-    export let disabled: boolean = false;
-
-    /**
-     * The visiblity of the label element
-     * @type {boolean}
-     */
-    export let hideLabel: boolean = false;
-
-    /**
-     * Where to place the input fill element
-     * @type {"prepend" | "append"} FillSide
-     */
-    export let fillSide: FillSide = "prepend";
-
-    /**
-     * Name attribute of the input
-     * @type {string | undefined}
-     */
-    export let name: string | undefined = undefined;
-
-    /**
-     * Placeholder text for the input
-     * @type {string}
-     */
-    export let placeholder: string = "";
-
-    /**
-     * Sets the readonly state of the input
-     * @type {boolean}
-     */
-    export let readonly: boolean = false;
-
-    /**
-     * Make the input required and show required label status
-     * @type {boolean}
-     */
-    export let required: boolean = false;
-
-    /**
-     * The size of the text input
-     * @type {"" | "sm" | "lg"} Size
-     */
-    export let size: Size = "";
-
-    /**
-     * The size of the text input
-     * @type {"" | "error" | "success" | "warning"} State
-     */
-    export let state: State = "";
-
-    /**
-     * The type of the text input
-     * @type {"credit-card" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"}
-     */
-    export let type: Type = "text";
-
-    /**
-     * Additional CSS classes added to the underlying HTML input element
-     * @type {string}
-     */
-    let className = "";
-    export { className as class };
-
-    /**
-     * Localized translation for the required label status text
-     */
-    export let i18nRequiredText: string | undefined = undefined;
-
-    $: classes = getClasses(className, size);
+    interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+        /**
+         * `id` attribute of the text input
+         * @type {string}
+         */
+        id: string;
+
+        /**
+         * The label associated with the input
+         * @type {string}
+         */
+        label: string;
+
+        /**
+         * Sets the disabled state of the input
+         * @type {boolean}
+         */
+        disabled?: boolean;
+
+        /**
+         * The visiblity of the label element
+         * @type {boolean}
+         */
+        hideLabel?: boolean;
+
+        /**
+         * Where to place the input fill element
+         * @type {"prepend" | "append"} FillSide
+         */
+        fillSide?: FillSide;
+
+        /**
+         * Name attribute of the input
+         * @type {string | undefined}
+         */
+        name?: string | undefined;
+        /**
+         * Placeholder text for the input
+         * @type {string}
+         */
+        placeholder?: string;
+
+        /**
+         * Sets the readonly state of the input
+         * @type {boolean}
+         */
+        readonly?: boolean;
+
+        /**
+         * Make the input required and show required label status
+         * @type {boolean}
+         */
+        required?: boolean;
+
+        /**
+         * The size of the text input
+         * @type {"" | "sm" | "lg"} Size
+         */
+        size?: Size;
+
+        /**
+         * The size of the text input
+         * @type {"" | "error" | "success" | "warning"} State
+         */
+        state?: State;
+
+        /**
+         * The type of the text input
+         * @type {"credit-card" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"}
+         */
+        type?: Type;
+
+        /**
+         * Additional CSS classes added to the underlying HTML input element
+         * @type {string}
+         */
+        class?: string;
+
+        /**
+         * Localized translation for the required label status text
+         */
+        i18nRequiredText?: string | undefined;
+
+        /**
+         * Optional description snippet rendered between the label and input.
+         */
+        description?: Snippet;
+
+        /**
+         * Optional fill snippet rendered either before or after the input based on the value of `fillSide`.
+         */
+        fill?: Snippet;
+
+        /**
+         * Optional message snippet rendered after the input.
+         */
+        message?: Snippet;
+    }
+
+    let {
+        id,
+        label,
+        disabled = false,
+        hideLabel = false,
+        fillSide = "prepend",
+        name = undefined,
+        placeholder = "",
+        readonly = false,
+        required = false,
+        size = "",
+        state = "",
+        type = "text",
+        class: className = "",
+        i18nRequiredText = undefined,
+        description,
+        fill,
+        message,
+        ...rest
+    }: Props = $props();
 
     const getClasses = (className: string, size: Size) => {
         const base = "s-input";
@@ -129,6 +166,7 @@
 
         return classes;
     };
+    let classes = $derived(getClasses(className, size));
 </script>
 
 <div
@@ -147,22 +185,22 @@
         {label}
     </Label>
 
-    {#if $$slots.description}
+    {#if description}
         <!-- Renders a description between the label and input. -->
         <p class="s-description mb0 mtn2" id={`${id}-description`}>
-            <slot name="description" />
+            {@render description()}
         </p>
     {/if}
 
     <div class="d-flex">
-        {#if $$slots.fill}
+        {#if fill}
             <div
                 class="s-input-fill"
                 class:order-first={fillSide === "prepend"}
                 class:order-last={fillSide === "append"}
             >
                 <!-- Fill element appended or prepended based on the value of `fillSide` -->
-                <slot name="fill" />
+                {@render fill()}
             </div>
         {/if}
 
@@ -184,31 +222,24 @@
 
             <input
                 {id}
-                aria-describedby={$$slots.message
+                aria-describedby={message
                     ? `${id}-message`
-                    : $$slots.description
+                    : description
                       ? `${id}-description`
                       : undefined}
                 aria-invalid={state === "error"}
                 class={classes}
                 class:s-input__creditcard={type === "credit-card"}
                 class:s-input__search={type === "search"}
-                class:blr0={$$slots.fill && fillSide === "prepend"}
-                class:brr0={$$slots.fill && fillSide === "append"}
+                class:blr0={fill && fillSide === "prepend"}
+                class:brr0={fill && fillSide === "append"}
                 type={type === "credit-card" ? "text" : type}
                 {disabled}
                 {name}
                 {placeholder}
                 {readonly}
                 {required}
-                {...$$restProps}
-                on:change
-                on:input
-                on:keydown
-                on:keyup
-                on:focus
-                on:blur
-                on:paste
+                {...rest}
             />
 
             {#if state}
@@ -225,10 +256,10 @@
         </div>
     </div>
 
-    {#if $$slots.message}
+    {#if message}
         <!-- Renders a message after the input. -->
         <p class="s-input-message" id={`${id}-message`}>
-            <slot name="message" />
+            {@render message()}
         </p>
     {/if}
 </div>
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.test.ts b/packages/stacks-svelte/src/components/TextInput/TextInput.test.ts
index 2959e1db05..825df08c8e 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.test.ts
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.test.ts
@@ -36,9 +36,7 @@ describe("TextInput", () => {
         render(TextInput, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                fill: snippet,
-            },
+            fill: snippet,
         });
         expect(screen.getByRole("textbox")).to.have.class("blr0");
         expect(screen.getByText("test snippet").parentElement).to.have.class(
@@ -51,9 +49,7 @@ describe("TextInput", () => {
             id: "example-input",
             label: "example label",
             fillSide: "append",
-            $$slots: {
-                fill: snippet,
-            },
+            fill: snippet,
         });
 
         expect(screen.getByRole("textbox")).to.have.class("brr0");
@@ -182,9 +178,7 @@ describe("TextInput", () => {
         render(TextInput, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                description: snippet,
-            },
+            description: snippet,
         });
 
         expect(screen.getByText("test snippet").parentElement).to.have.class(
@@ -196,9 +190,7 @@ describe("TextInput", () => {
         render(TextInput, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                fill: snippet,
-            },
+            fill: snippet,
         });
 
         expect(screen.getByText("test snippet").parentElement).to.have.class(
@@ -210,9 +202,7 @@ describe("TextInput", () => {
         render(TextInput, {
             id: "example-input",
             label: "example label",
-            $$slots: {
-                message: snippet,
-            },
+            message: snippet,
         });
 
         expect(screen.getByText("test snippet").parentElement).to.have.class(