chore(input/textarea): upgrade to Svelte 5 syntax

.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.

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

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>

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>

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(