srcdev-nuxt-components 9.4.10 → 9.4.12

package/app/components/05.forms/input-select/stories/InputSelectCore.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
 import StorybookComponent from "../InputSelectCore.vue";
-import type { IFormMultipleOptions } from "~/types/forms/types.forms.d";
+import type { IFormMultipleOptions, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputSelectCoreStoryArgs {
   id: string;
@@ -9,7 +9,7 @@ interface InputSelectCoreStoryArgs {
   placeholder: string;
   required: boolean;
   fieldHasError: boolean;
-  inputVariant: "normal" | "outlined" | "underlined";
+  inputVariant: InputUiVariant;
 }
 
 export default {

package/app/components/05.forms/input-select/stories/InputSelectWithLabel.stories.ts

@@ -0,0 +1,115 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref, computed } from "vue";
+import StorybookComponent from "../variants/InputSelectWithLabel.vue";
+import type { FormUiTheme, InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms.d";
+
+interface InputSelectWithLabelStoryArgs {
+  modelValue: string | number;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  useDescriptionSlot: boolean;
+  descriptionContent: string;
+}
+
+export default {
+  title: "Components/Forms/Input Select/InputSelectWithLabel",
+  component: StorybookComponent,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    useDescriptionSlot: { control: "boolean", table: { category: "Slots" } },
+    descriptionContent: { control: "text", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: "",
+    name: "colour",
+    label: "Favourite colour",
+    placeholder: "Choose a colour",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    useDescriptionSlot: false,
+    descriptionContent: "Pick the colour you like best",
+  },
+} as Meta<InputSelectWithLabelStoryArgs>;
+
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
+// slot-toggle args so they don't leak onto the component as unknown attributes.
+const Template: StoryFn<InputSelectWithLabelStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const fieldData = ref<IFormMultipleOptions>({
+      data: [
+        { id: "1", name: "red", value: "red", label: "Red" },
+        { id: "2", name: "blue", value: "blue", label: "Blue" },
+        { id: "3", name: "green", value: "green", label: "Green" },
+      ],
+      total: 3,
+      skip: 0,
+      limit: 10,
+    });
+
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, descriptionContent, ...rest } = args;
+      return rest;
+    });
+
+    return { args, componentArgs, fieldData };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      <StorybookComponent v-model="args.modelValue" v-model:field-data="fieldData" v-bind="componentArgs">
+        <template v-if="args.useDescriptionSlot" #descriptionText>{{ args.descriptionContent }}</template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Please choose a colour",
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const WithDescription = Template.bind({});
+WithDescription.args = { useDescriptionSlot: true };
+
+export const Underlined = Template.bind({});
+Underlined.args = { inputVariant: "underlined" };
+
+export const Outlined = Template.bind({});
+Outlined.args = { inputVariant: "outlined", useDescriptionSlot: true };

package/app/components/05.forms/input-select/tests/InputSelectCore.spec.ts

@@ -0,0 +1,129 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputSelectCore.vue";
+
+const initialFieldData = {
+  data: [
+    { id: "1", name: "red", value: "red", label: "Red" },
+    { id: "2", name: "blue", value: "blue", label: "Blue" },
+  ],
+  total: 2,
+  skip: 0,
+  limit: 10,
+};
+
+const initialPropsData = {
+  id: "test-select",
+  name: "testName",
+  modelValue: "red",
+  fieldData: initialFieldData,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+  });
+};
+
+describe("InputSelectCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders an option per fieldData item", async () => {
+    wrapper = await wrapperFactory();
+    const options = wrapper.findAll("option");
+    expect(options.map((o) => o.text())).toEqual(["Red", "Blue"]);
+  });
+
+  it("binds v-model to the select value", async () => {
+    wrapper = await wrapperFactory({ modelValue: "blue" });
+    expect(wrapper.find("select").element.value).toBe("blue");
+  });
+
+  it("renders a disabled placeholder option when placeholder is set", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Choose a colour", modelValue: "" });
+    const placeholderOption = wrapper.find("option.placeholder");
+
+    expect(placeholderOption.exists()).toBe(true);
+    expect(placeholderOption.text()).toBe("Choose a colour");
+    expect(placeholderOption.attributes("disabled")).toBeDefined();
+  });
+
+  it("does not render a placeholder option when placeholder is unset", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("option.placeholder").exists()).toBe(false);
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("select").attributes("required")).toBeDefined();
+  });
+
+  it("does not set required attribute by default", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").attributes("required")).toBeUndefined();
+  });
+
+  it("sets data-theme from the theme prop", async () => {
+    wrapper = await wrapperFactory({ theme: "error" });
+    expect(wrapper.find(".input-select-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("sets data-invalid and aria-invalid when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-select-wrapper").attributes("data-invalid")).toBe("");
+    expect(wrapper.find("select").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("defaults inputVariant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-select-wrapper").classes()).toContain("normal");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-select-wrapper").classes()).toContain("underlined");
+  });
+
+  it("applies styleClassPassthrough to the select", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-select-class"] });
+    expect(wrapper.find("select").classes()).toContain("custom-select-class");
+  });
+
+  it("sets isActive true on focus and false on blur", async () => {
+    wrapper = await wrapperFactory();
+    const select = wrapper.find("select");
+
+    await select.trigger("focusin");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([true]);
+
+    await select.trigger("focusout");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([false]);
+  });
+
+  it("sets isDirty true when the value changes", async () => {
+    wrapper = await wrapperFactory();
+    await wrapper.find("select").trigger("change");
+    expect(wrapper.emitted("update:isDirty")?.at(-1)).toEqual([true]);
+  });
+
+  it("renders an icon for an option that has one, hidden from assistive tech", async () => {
+    wrapper = await wrapperFactory({
+      fieldData: {
+        ...initialFieldData,
+        data: [{ id: "1", name: "red", value: "red", label: "Red", icon: "mdi:circle" }],
+      },
+    });
+
+    const icon = wrapper.find(".input-select-core-option-decorator-icon");
+    expect(icon.exists()).toBe(true);
+    expect(icon.attributes("aria-hidden")).toBe("true");
+  });
+});

package/app/components/05.forms/input-select/variants/InputSelectWithLabel.vue

@@ -117,5 +117,5 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
 const modelValue = defineModel<string | number | readonly number[]>({ required: true });
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel<IFormMultipleOptions>("fieldData");
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
 </script>

package/app/components/05.forms/input-select/variants/tests/InputSelectWithLabel.spec.ts

@@ -0,0 +1,87 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputSelectWithLabel.vue";
+
+const initialFieldData = {
+  data: [
+    { id: "1", name: "red", value: "red", label: "Red" },
+    { id: "2", name: "blue", value: "blue", label: "Blue" },
+  ],
+  total: 2,
+  skip: 0,
+  limit: 10,
+};
+
+const initialPropsData = {
+  name: "colour",
+  label: "Colour",
+  errorMessage: "",
+  modelValue: "red",
+  fieldData: initialFieldData,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputSelectWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Favourite colour" });
+    expect(wrapper.text()).toContain("Favourite colour");
+  });
+
+  it("renders a native select with an option per fieldData item", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").exists()).toBe(true);
+    expect(wrapper.findAll("option").map((o) => o.text())).toEqual(["Red", "Blue"]);
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-select-with-label").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-select-with-label").classes()).toContain("error");
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "Please choose a colour" });
+    expect(wrapper.text()).toContain("Please choose a colour");
+  });
+
+  it("renders the descriptionText slot", async () => {
+    wrapper = await wrapperFactory({}, { descriptionText: () => "Pick your favourite" });
+    expect(wrapper.text()).toContain("Pick your favourite");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-select-with-label").classes()).toContain("underlined");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-select" });
+    expect(wrapper.find("select").classes()).toContain("custom-select");
+  });
+
+  it("forwards required to the native select", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("select").attributes("required")).toBeDefined();
+  });
+
+  it("applies the error theme to InputSelectCore when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, theme: "default" });
+    expect(wrapper.find(".input-select-wrapper").attributes("data-theme")).toBe("error");
+  });
+});

package/app/components/05.forms/input-text/tests/InputTextAsNumberWithLabel.spec.ts

@@ -58,4 +58,18 @@ describe("InputTextAsNumberWithLabel", () => {
 
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([6]);
   });
+
+  it("forwards the input-text-as-number marker class down to InputTextCore's own input", async () => {
+    // Regression test: the marker classes toggled via updateElementClasses() must reach the
+    // inner <input> (not just the outer wrapper), or the scoped .input-text-core.input-text-as-number
+    // CSS (compact fit-content width, centered text) silently never matches.
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
+  });
+
+  it("still forwards a consumer-supplied styleClassPassthrough down to the input", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-number-class"] });
+    expect(wrapper.find("input").classes()).toContain("custom-number-class");
+    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
+  });
 });

package/app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -45,7 +45,7 @@
       :error-message
       :field-has-error
       :required
-      :style-class-passthrough
+      :style-class-passthrough="elementClasses"
       :theme
       inputmode="numeric"
       :aria-describedby

package/app/components/05.forms/input-textarea/CONSUMER-STYLING.md

@@ -0,0 +1,55 @@
+# InputTextareaCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-textarea-*, {default})` — set the `--input-textarea-*`
+name to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md).
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-textarea-surface` | `var(--theme-input-surface)` | Wrapper background |
+| `--input-textarea-border` | `var(--theme-border)` | Border colour (`normal`/`underlined` variant border) |
+| `--input-textarea-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover (`normal` variant only) |
+| `--input-textarea-border-focus` | `var(--theme-border-focus)` | Wrapper outline colour on `:focus-visible` (`normal` variant only) |
+| `--input-textarea-text-color` | `var(--theme-input-text-color-normal)` | Textarea text colour |
+| `--input-textarea-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
+
+Geometry (`--form-textarea-padding-block`, `--form-textarea-padding-inline`, `--input-font-size`,
+`--input-textarea-line-height`, `--input-padding-inline`, etc.) is shared across every `05.forms`
+component and untouched by this — see `theming-form-geometry-tokens.md`.
+
+---
+
+## Input variant
+
+`:input-variant="'normal' | 'outlined' | 'underlined'"` (default `"normal"`) — same prop as
+`InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
+(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either (no
+`&.outlined` rule exists there), so passing it renders with no border/outline at all — a
+pre-existing gap in the type, not specific to `InputTextareaCore`.
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-textarea-surface: var(--rose-09);
+  --input-textarea-border: var(--rose-05);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputTextareaCore id="message" name="message" style="--input-textarea-border: var(--gold-04);" />
+```

package/app/components/05.forms/input-textarea/InputTextareaCore.vue

@@ -66,11 +66,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>({
+  required: true,
 });
-
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
 
@@ -86,31 +84,41 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 <style lang="css">
 @layer components {
 .input-textarea-wrapper {
-  background-color: var(--theme-input-surface);
-  padding-inline: var(--element-decorator-padding-inline);
+  /* Public --input-textarea-* tokens, inline-fallback to the shared --theme-* tokens (see
+     theming-component-token-pattern.md) — mirrors InputTextCore's token shape. --_border is
+     genuinely reused (both the .normal border and the .underlined border-bottom read it); the
+     hover/focus border colours are each used only once, so they're inlined directly rather than
+     wrapped in a private var (see the Public token pattern rule in CLAUDE.md's Styling
+     Methodology). */
+  --_border: var(--input-textarea-border, var(--theme-border));
+
+  background-color: var(--input-textarea-surface, var(--theme-input-surface));
+  padding-inline: var(--input-padding-inline);
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
   z-index: 2;
   position: relative;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--theme-border);
+    border: var(--form-element-border-width) solid var(--_border);
     border-radius: var(--form-input-border-radius);
     outline: var(--form-element-outline-width) solid transparent;
 
     &:has(textarea:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid
+        var(--input-textarea-border-focus, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
 
     &:has(textarea:is(:hover)) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid
+        var(--input-textarea-border-hover, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
   }
 
   display: flex;
@@ -129,7 +137,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     flex-grow: 1;
     field-sizing: content;
 
-    color: var(--theme-input-text-color-normal);
+    color: var(--input-textarea-text-color, var(--theme-input-text-color-normal));
     font-family: var(--font-family);
     font-size: var(--input-font-size);
     line-height: var(--input-textarea-line-height);
@@ -139,11 +147,11 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     min-height: 6lh;
 
     &::placeholder {
-      color: var(--theme-input-placeholder);
-      font-size: var(--input-placeholder-font-size);
-      font-style: var(--input-placeholder-font-style);
-      line-height: var(--input-placeholder-line-height);
-      font-weight: var(--input-placeholder-font-weight);
+      color: var(--input-textarea-placeholder-color, var(--theme-input-placeholder));
+      font-size: var(--theme-input-placeholder-font-size);
+      font-style: italic;
+      line-height: 1;
+      font-weight: normal;
     }
   }
 }

package/app/components/05.forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, reactive } from "vue";
 import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 

package/app/components/05.forms/input-textarea/tests/InputTextareaCore.spec.ts

@@ -0,0 +1,119 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputTextareaCore.vue";
+
+const initialPropsData = {
+  id: "test-textarea",
+  name: "testName",
+  modelValue: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputTextareaCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a native textarea", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").exists()).toBe(true);
+  });
+
+  it("binds v-model to the textarea value", async () => {
+    wrapper = await wrapperFactory({ modelValue: "hello world" });
+    expect(wrapper.find("textarea").element.value).toBe("hello world");
+  });
+
+  it("forwards placeholder", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Enter your message" });
+    expect(wrapper.find("textarea").attributes("placeholder")).toBe("Enter your message");
+  });
+
+  it("forwards maxlength, defaulting to 255", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").attributes("maxlength")).toBe("255");
+
+    wrapper = await wrapperFactory({ maxlength: 100 });
+    expect(wrapper.find("textarea").attributes("maxlength")).toBe("100");
+  });
+
+  it("forwards aria-describedby", async () => {
+    wrapper = await wrapperFactory({ ariaDescribedby: "some-description-id" });
+    expect(wrapper.find("textarea").attributes("aria-describedby")).toBe("some-description-id");
+  });
+
+  it("sets data-theme from the theme prop", async () => {
+    wrapper = await wrapperFactory({ theme: "error" });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("sets data-invalid and aria-invalid when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-invalid")).toBe("");
+    expect(wrapper.find("textarea").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("defaults inputVariant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("normal");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("underlined");
+  });
+
+  it("does not render the left/right slot wrappers when the slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".slot.left-slot").exists()).toBe(false);
+    expect(wrapper.find(".slot.right-slot").exists()).toBe(false);
+  });
+
+  it("renders the left/right slots when provided", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-slot">📝</span>',
+        right: '<span data-testid="right-slot">✨</span>',
+      }
+    );
+
+    expect(wrapper.find(".slot.left-slot [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".slot.right-slot [data-testid='right-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("has-left-slot");
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("has-right-slot");
+  });
+
+  it("applies styleClassPassthrough to the textarea", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-textarea-class"] });
+    expect(wrapper.find("textarea").classes()).toContain("custom-textarea-class");
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("textarea").attributes("required")).toBeDefined();
+  });
+
+  it("sets isActive true on focus and false on blur", async () => {
+    wrapper = await wrapperFactory();
+    const textarea = wrapper.find("textarea");
+
+    await textarea.trigger("focusin");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([true]);
+
+    await textarea.trigger("focusout");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([false]);
+  });
+});