srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/05.forms/input-range/variants/stories/InputRangeDefault.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../InputRangeDefault.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface InputRangeDefaultStoryArgs {
+  modelValue: number;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  stepDownLabel: string;
+  stepUpLabel: string;
+  useStepButtons: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Range/InputRangeDefault",
+  component: StorybookComponent,
+  argTypes: {
+    modelValue: { control: "number", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    min: { control: "number", table: { category: "Basic" } },
+    max: { control: "number", table: { category: "Basic" } },
+    step: { control: "number", 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" },
+    },
+    stepDownLabel: { control: "text", description: "Localisation override for the step-down button", table: { category: "Accessibility" } },
+    stepUpLabel: { control: "text", description: "Localisation override for the step-up button", table: { category: "Accessibility" } },
+    useStepButtons: { control: "boolean", description: "Render +/- step buttons via left/right slots", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: 50,
+    name: "priceRange",
+    label: "Price range",
+    min: 0,
+    max: 100,
+    step: 1,
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    stepDownLabel: "Step down",
+    stepUpLabel: "Step up",
+    useStepButtons: false,
+  },
+} as Meta<InputRangeDefaultStoryArgs>;
+
+const Template: StoryFn<InputRangeDefaultStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      <StorybookComponent
+        v-model="args.modelValue"
+        :name="args.name"
+        :label="args.label"
+        :min="args.min"
+        :max="args.max"
+        :step="args.step"
+        :error-message="args.errorMessage"
+        :field-has-error="args.fieldHasError"
+        :required="args.required"
+        :theme="args.theme"
+        :step-down-label="args.stepDownLabel"
+        :step-up-label="args.stepUpLabel"
+      >
+        <template v-if="args.useStepButtons" #left><span>−</span></template>
+        <template v-if="args.useStepButtons" #right><span>+</span></template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const WithStepButtons = Template.bind({});
+WithStepButtons.args = { useStepButtons: true };
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Please choose a value within the allowed range",
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const LocalisedLabels = Template.bind({});
+LocalisedLabels.args = {
+  useStepButtons: true,
+  stepDownLabel: "Diminuer",
+  stepUpLabel: "Augmenter",
+};

package/app/components/05.forms/input-range/variants/tests/InputRangeDefault.spec.ts

@@ -0,0 +1,140 @@
+// 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 "../InputRangeDefault.vue";
+
+const initialPropsData = {
+  name: "testName",
+  label: "Test label",
+  min: 0,
+  max: 100,
+  errorMessage: "",
+  modelValue: 50,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputRangeDefault", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Price range" });
+    expect(wrapper.text()).toContain("Price range");
+  });
+
+  it("renders a range input", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find('input[type="range"]').exists()).toBe(true);
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-range-with-label").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-range-with-label").classes()).toContain("error");
+  });
+
+  it("does not render step buttons when the left/right slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.findAllComponents({ name: "InputButtonCore" })).toHaveLength(0);
+  });
+
+  it("renders step buttons with default labels when the left/right slots are used", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-icon">-</span>',
+        right: '<span data-testid="right-icon">+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Step down");
+    expect(wrapper.text()).toContain("Step up");
+  });
+
+  it("overrides step button labels via stepDownLabel/stepUpLabel props", async () => {
+    wrapper = await wrapperFactory(
+      { stepDownLabel: "Decrease", stepUpLabel: "Increase" },
+      {
+        left: '<span>-</span>',
+        right: '<span>+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Decrease");
+    expect(wrapper.text()).toContain("Increase");
+  });
+
+  it("increments the model value when the step-up button is clicked", async () => {
+    wrapper = await wrapperFactory(
+      { modelValue: 50, step: 5 },
+      { right: '<span>+</span>' }
+    );
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find((btn) => btn.text().includes("+") || btn.attributes("aria-label")?.includes("Step up"));
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([55]);
+  });
+
+  it("decrements the model value when the step-down button is clicked", async () => {
+    wrapper = await wrapperFactory(
+      { modelValue: 50, step: 5 },
+      { left: '<span>-</span>' }
+    );
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find((btn) => btn.text().includes("-") || btn.attributes("aria-label")?.includes("Step down"));
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([45]);
+  });
+
+  it("does not step below min", async () => {
+    wrapper = await wrapperFactory(
+      { modelValue: 0, min: 0, step: 5 },
+      { left: '<span>-</span>' }
+    );
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find((btn) => btn.text().includes("-"));
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("does not step above max", async () => {
+    wrapper = await wrapperFactory(
+      { modelValue: 100, max: 100, step: 5 },
+      { right: '<span>+</span>' }
+    );
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find((btn) => btn.text().includes("+"));
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "This field is required" });
+    expect(wrapper.text()).toContain("This field is required");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-range" });
+    expect(wrapper.find(".input-range-with-label").classes()).toContain("custom-range");
+  });
+});

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -9,12 +9,16 @@
       :id
       v-model="modelValue"
       :aria-invalid="fieldHasError ? 'true' : undefined"
-      class="input-select-core"
+      :class="['input-select-core', elementClasses]"
       :name
       :title
+      :required
       :aria-describedby="ariaDescribedby"
+      @focusin="isActive = true"
+      @focusout="isActive = false"
+      @change="isDirty = true"
     >
-      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
+      <option v-if="placeholder" value="" disabled :selected="!modelValue" class="input-select-core-option placeholder">
         {{ placeholder }}
       </option>
       <option
@@ -38,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+import type { IFormMultipleOptions, FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
 
 interface Props {
   id: string;
@@ -48,12 +52,12 @@ interface Props {
   required?: boolean;
   fieldHasError?: boolean;
   styleClassPassthrough?: string | string[];
-  theme?: "default" | "success" | "error" | "warning";
-  inputVariant?: "normal" | "outlined" | "underlined";
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
   ariaDescribedby?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   placeholder: "",
   title: "Please select an option",
   required: false,
@@ -67,7 +71,9 @@ withDefaults(defineProps<Props>(), {
 const modelValue = defineModel<string | number | readonly number[]>({ required: true });
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
@@ -75,22 +81,18 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 .input-select-wrapper {
   /* Public --input-select-* tokens, inline-fallback to the shared --theme-* tokens (see
      theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. --_surface etc. are
-     private locals purely so the rest of this rule can reuse the resolved value without
-     repeating the fallback chain at every property — they are not themselves an override point,
-     see CONSUMER-STYLING.md. --_outline-color stays private/computed: it's always just an alias
-     for --_border-focus with no independent meaning of its own. */
-  --_surface: var(--input-select-surface, var(--theme-input-surface));
-  --_surface-hover: var(--input-select-surface-hover, var(--theme-input-surface-hover));
+     input/control that also reads --theme-input-surface/--theme-border. --_border is the one
+     genuinely reused value (border, underlined border-bottom, open-picker border); the rest of
+     this component's tokens are used at exactly one point each, so they're inlined directly
+     rather than wrapped in a private var with no composition or state-swap behind it (see
+     pitfall #20 in CLAUDE.md). */
   --_border: var(--input-select-border, var(--theme-border));
   /* Split so hover (mouse) and :focus-visible (keyboard/assistive) can diverge — both default to
      the same --theme-border-focus today, identical appearance to before this token existed, but
      each now has its own override point. */
-  --_border-hover: var(--input-select-border-hover, var(--theme-border-focus));
   --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
-  --_outline-color: var(--_border-focus);
 
-  background-color: var(--_surface);
+  background-color: var(--input-select-surface, var(--theme-input-surface));
   overflow: hidden;
 
   z-index: 2;
@@ -105,11 +107,11 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
   &.underlined {
     border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
-    background-color: var(--_surface);
   }
 
   &:has(:hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--_border-hover);
+    outline: var(--form-element-outline-width-focus) solid
+      var(--input-select-border-hover, var(--theme-border-focus));
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -124,15 +126,6 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
     display: flex;
     align-items: center;
 
-    /* For legacy support - eg, Safari */
-    /* &::after {
-      content: '';
-      width: 0.8em;
-      height: 0.5em;
-      background-color: var(--_border);
-      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    } */
-
     /* Start modern Select CSS */
     &,
     &::picker(select) {
@@ -153,7 +146,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
     &:open::picker(select) {
       opacity: 1;
       border: var(--form-element-border-width) solid var(--_border);
-      outline: var(--form-element-outline-width) solid var(--_outline-color);
+      outline: var(--form-element-outline-width) solid var(--_border-focus);
 
       @starting-style {
         opacity: 0;
@@ -180,7 +173,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--_surface-hover);
+        background-color: var(--input-select-surface-hover, var(--theme-input-surface-hover));
       }
 
       .input-select-core-option-decorator-icon {

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>