srcdev-nuxt-components 9.4.6 → 9.4.7

package/app/components/01.atoms/pop-over/tests/PopOver.spec.ts

@@ -0,0 +1,195 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PopOver from "../PopOver.vue";
+
+interface PopOverInstance {
+  popoverId: string;
+  anchorName: string;
+  handleToggle: (event: Event) => void;
+}
+
+const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
+  return mountSuspended(PopOver, { props, slots });
+};
+
+describe("PopOver", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  beforeEach(() => {
+    // Popover API is not implemented in jsdom — define stubs so we can test
+    Object.defineProperty(HTMLElement.prototype, "hidePopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "showPopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["hidePopover"];
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+  });
+
+  it("mounts without error", async () => {
+    wrapper = await createWrapper();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    wrapper = await createWrapper(
+      {},
+      { trigger: "<span>Open</span>", content: "<p>Details</p>" }
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe("Trigger", () => {
+    it("renders the trigger slot", async () => {
+      wrapper = await createWrapper({}, { trigger: '<span class="slot-trigger">Open</span>' });
+      expect(wrapper.find(".slot-trigger").text()).toBe("Open");
+    });
+
+    it("trigger button has type='button'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("type")).toBe("button");
+    });
+
+    it("does not set aria-label on the trigger by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label on the trigger when triggerAriaLabel is given", async () => {
+      wrapper = await createWrapper({ triggerAriaLabel: "Show filters" });
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBe("Show filters");
+    });
+
+    it("trigger button popovertarget matches the popover id", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertarget")).toBe(vm.popoverId);
+    });
+
+    it("trigger button has popovertargetaction='toggle'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertargetaction")).toBe("toggle");
+    });
+  });
+
+  describe("Popover panel", () => {
+    it("renders the content slot", async () => {
+      wrapper = await createWrapper({}, { content: '<p class="slot-content">Details</p>' });
+      expect(wrapper.find(".pop-over-popover .slot-content").text()).toBe("Details");
+    });
+
+    it("has the popover attribute", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("popover")).toBeDefined();
+    });
+
+    it("does not set aria-label by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label when popoverAriaLabel is given", async () => {
+      wrapper = await createWrapper({ popoverAriaLabel: "Filter options" });
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBe("Filter options");
+    });
+
+    it("sets data-placement on the root element", async () => {
+      wrapper = await createWrapper({ placement: "top" });
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("top");
+    });
+
+    it("defaults placement to right", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("right");
+    });
+  });
+
+  describe("Close button", () => {
+    it("has a default aria-label", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Close");
+    });
+
+    it("uses a custom closeButtonAriaLabel", async () => {
+      wrapper = await createWrapper({ closeButtonAriaLabel: "Dismiss" });
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Dismiss");
+    });
+
+    it("has popovertargetaction='hide' pointing at the popover", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      const closeButton = wrapper.find(".pop-over-close-button");
+      expect(closeButton.attributes("popovertargetaction")).toBe("hide");
+      expect(closeButton.attributes("popovertarget")).toBe(vm.popoverId);
+    });
+  });
+
+  describe("handleToggle focus management", () => {
+    it("focuses the close button when the popover opens", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+
+      expect(focusSpy).toHaveBeenCalledOnce();
+    });
+
+    it("does not move focus when the popover closes", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "closed" }));
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Anchor name", () => {
+    it("sets a unique --_anchor-name on the root element style", async () => {
+      wrapper = await createWrapper();
+      const style = wrapper.find(".pop-over").attributes("style") ?? "";
+      expect(style).toContain("--_anchor-name: --pop-over-anchor-");
+    });
+  });
+
+  describe("styleClassPassthrough", () => {
+    it("applies a string class to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "custom-pop-over" });
+      expect(wrapper.find(".pop-over").classes()).toContain("custom-pop-over");
+    });
+
+    it("applies an array of classes to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["pop-over-a", "pop-over-b"] });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-a");
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-b");
+    });
+
+    it("root element always has the 'pop-over' class", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "extra-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over");
+    });
+
+    it("resets classes when styleClassPassthrough prop changes", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "initial-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("initial-class");
+
+      await wrapper.setProps({ styleClassPassthrough: "updated-class" });
+      expect(wrapper.find(".pop-over").classes()).not.toContain("initial-class");
+      expect(wrapper.find(".pop-over").classes()).toContain("updated-class");
+    });
+  });
+});

package/app/components/01.atoms/pop-over/tests/__snapshots__/PopOver.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PopOver > renders correct HTML structure 1`] = `
+"<div class="pop-over" style="--_anchor-name: --pop-over-anchor-v-0-0;" data-placement="right"><button popovertarget="pop-over-v-0-0" popovertargetaction="toggle" type="button" class="pop-over-trigger"><span>Open</span></button>
+  <div id="pop-over-v-0-0" popover="" class="pop-over-popover"><button popovertarget="pop-over-v-0-0" popovertargetaction="hide" type="button" class="pop-over-close-button" aria-label="Close"><span class="iconify i-lucide:x pop-over-close-button-icon" aria-hidden="true"></span></button>
+    <div class="pop-over-content">
+      <p>Details</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/action-menu/stories/ActionMenu.stories.ts

@@ -74,10 +74,16 @@ export const Default: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItemCore },
     setup() {
-      const { itemCount, ...componentArgs } = args;
+      // `args` is Storybook's own reactive object — read from it directly (`args.x`) inside
+      // these computeds rather than destructuring it into local variables at setup-time, which
+      // would snapshot the values once and stop reflecting later Controls-panel changes.
+      const componentArgs = computed(() => {
+        const { itemCount, ...rest } = args;
+        return rest;
+      });
       const lastAction = ref<string | null>(null);
       const items = computed(() =>
-        actionItems.slice(0, itemCount ?? 5).map((item, i) => ({
+        actionItems.slice(0, args.itemCount ?? 5).map((item, i) => ({
           ...item,
           slotName: `item-${i}`,
         }))

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -2,8 +2,10 @@
   <div class="input-copy" :class="elementClasses">
     <div class="input-copy__wrapper">
       <input
+        :id="resolvedId"
         type="text"
         class="input-copy__input"
+        :name="name || resolvedId"
         :value="value"
         :aria-label="ariaLabel || label"
         readonly
@@ -26,6 +28,9 @@
 <script setup lang="ts">
 interface Props {
   value: string;
+  /** Defaults to an auto-generated id — pass one explicitly only if something needs to target this input. */
+  id?: string;
+  name?: string;
   label?: string;
   ariaLabel?: string;
   description?: string;
@@ -37,6 +42,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  name: undefined,
   label: undefined,
   ariaLabel: undefined,
   description: undefined,
@@ -47,6 +54,13 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// Readonly text inputs still need an id/name to satisfy "a form field element should have an
+// id or name attribute" — auto-generated so every existing call site (none of which pass one)
+// gets a valid, unique id for free. Named resolvedId, not id, so it can't be confused with (or
+// silently shadow) the `id` prop it falls back to.
+const autoId = useId();
+const resolvedId = computed(() => props.id ?? autoId);
+
 const emit = defineEmits<{
   copy: [value: string];
   copied: [value: string];

package/app/components/02.molecules/input-copy/stories/InputCopy.stories.ts

@@ -7,6 +7,11 @@ const meta: Meta<typeof InputCopy> = {
   tags: ["autodocs"],
   argTypes: {
     value: { control: "text" },
+    id: {
+      control: "text",
+      description: "Defaults to an auto-generated id — pass one only if something needs to target this input.",
+    },
+    name: { control: "text", description: "Defaults to the resolved id if not provided." },
     label: { control: "text" },
     description: { control: "text" },
     buttonText: { control: "text" },
@@ -101,6 +106,16 @@ export const NoDescription: Story = {
   },
 };
 
+export const WithExplicitIdAndName: Story = {
+  args: {
+    value: "sk_live_abc123defgh456xyz789uvw",
+    id: "checkout-license-key",
+    name: "licenseKey",
+    label: "License key",
+    description: "Demonstrates passing explicit id/name instead of relying on the auto-generated one.",
+  },
+};
+
 export const LongValue: Story = {
   args: {
     value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -178,4 +178,45 @@ describe("InputCopy", () => {
     expect(wrapper.classes()).toContain("custom-class");
     expect(wrapper.classes()).toContain("another-class");
   });
+
+  it("auto-generates an id and mirrors it as the name when neither is provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    const id = input.attributes("id");
+
+    expect(id).toBeTruthy();
+    expect(input.attributes("name")).toBe(id);
+  });
+
+  it("uses the provided id prop instead of auto-generating one", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("license-key-input");
+  });
+
+  it("uses the provided name prop instead of falling back to the id", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+        name: "licenseKey",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("licenseKey");
+  });
 });

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

@@ -21,7 +21,7 @@
         v-for="item in fieldData.data"
         :key="item.id"
         :value="item.value"
-        :selected="Number(item.value) === modelValue"
+        :selected="String(item.value) === String(modelValue)"
         class="input-select-core-option"
       >
         <Icon

package/app/components/05.forms/input-text/InputTextCore.vue

@@ -27,6 +27,8 @@
       :name
       :required
       :maxlength
+      :min
+      :max
       :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
       :aria-invalid="fieldHasError ? 'true' : undefined"
       :aria-describedby
@@ -49,6 +51,10 @@ interface Props {
   type?: InputTypesText;
   inputmode?: InputMode;
   maxlength?: number;
+  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
+  min?: string | number;
+  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
+  max?: string | number;
   id: string;
   name: string;
   required?: boolean;

package/app/components/05.forms/input-text/stories/InputPasswordWithLabel.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputPasswordWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,12 +13,14 @@ interface InputPasswordWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   useDescriptionSlot: boolean;
   useDescriptionHtmlSlot: boolean;
   descriptionContent: string;
   descriptionHtmlContent: string;
+  showPasswordText: string;
+  hidePasswordText: string;
 }
 
 export default {
@@ -95,7 +98,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Input variant style",
@@ -140,6 +143,22 @@ export default {
         category: "Slots",
       },
     },
+
+    // Localisation
+    showPasswordText: {
+      control: "text",
+      description: "Accessible name for the toggle button while the password is hidden",
+      table: {
+        category: "Localisation",
+      },
+    },
+    hidePasswordText: {
+      control: "text",
+      description: "Accessible name for the toggle button while the password is visible",
+      table: {
+        category: "Localisation",
+      },
+    },
   },
   args: {
     modelValue: "",
@@ -158,34 +177,35 @@ export default {
     descriptionContent: "Password should be at least 8 characters long",
     descriptionHtmlContent:
       "Password must contain: <strong>8+ characters</strong>, <em>uppercase</em>, <em>lowercase</em>, <em>numbers</em>",
+    showPasswordText: "Show password",
+    hidePasswordText: "Hide password",
   },
 } as Meta<typeof StorybookComponent>;
 
+// `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<InputPasswordWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const passwordValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, useDescriptionHtmlSlot, descriptionContent, descriptionHtmlContent, ...rest } = args;
+      return rest;
+    });
 
-    return {
-      passwordValue,
-      args: otherArgs,
-      descriptionContent: args.descriptionContent,
-      descriptionHtmlContent: args.descriptionHtmlContent,
-      useDescriptionSlot: args.useDescriptionSlot,
-      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="passwordValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionSlot" #description>{{ descriptionContent }}</template>
-      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
+      <template v-if="args.useDescriptionSlot" #description>{{ args.descriptionContent }}</template>
+      <template v-if="args.useDescriptionHtmlSlot" #descriptionHtml v-html="args.descriptionHtmlContent"></template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Current value: {{ passwordValue ? '•'.repeat(passwordValue.length) : 'Empty' }}
+      Current value: {{ args.modelValue ? '•'.repeat(args.modelValue.length) : 'Empty' }}
     </div>
   `,
 });
@@ -239,18 +259,27 @@ PasswordTooShort.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Confirm Password",
   placeholder: "Confirm your password",
 };
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Master Password",
   placeholder: "Enter master password",
 };
 
+export const LocalisedToggleText = Template.bind({});
+LocalisedToggleText.storyName = "Localised Toggle Text";
+LocalisedToggleText.args = {
+  label: "Mot de passe",
+  placeholder: "Saisissez votre mot de passe",
+  showPasswordText: "Afficher le mot de passe",
+  hidePasswordText: "Masquer le mot de passe",
+};
+
 export const AllVariants = Template.bind({});
 AllVariants.storyName = "All Input Variants";
 AllVariants.render = (args) => ({
@@ -279,7 +308,7 @@ AllVariants.render = (args) => ({
         <h3 class="text-lg font-semibold capitalize">{{ variant }} Variant</h3>
         <StorybookComponent
           v-model="passwordValues[variant]"
-          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Password', name: variant + '-password' }"
+          v-bind="{ ...args, inputVariant: variant, label: variant + ' Password', name: variant + '-password' }"
         />
       </div>
     </div>

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputTextAsNumberWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,7 +13,7 @@ interface InputTextAsNumberWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   min: number;
   max: number;
   step: number;
@@ -23,6 +24,8 @@ interface InputTextAsNumberWithLabelStoryArgs {
   useRightSlot: boolean;
   leftSlotContent: string;
   rightSlotContent: string;
+  stepDownText: string;
+  stepUpText: string;
 }
 
 export default {
@@ -123,7 +126,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Input variant style",
@@ -182,6 +185,22 @@ export default {
         category: "Slots",
       },
     },
+
+    // Localisation
+    stepDownText: {
+      control: "text",
+      description: "Accessible name for the decrement button",
+      table: {
+        category: "Localisation",
+      },
+    },
+    stepUpText: {
+      control: "text",
+      description: "Accessible name for the increment button",
+      table: {
+        category: "Localisation",
+      },
+    },
   },
   args: {
     modelValue: undefined,
@@ -204,37 +223,37 @@ export default {
     useRightSlot: true,
     leftSlotContent: "−",
     rightSlotContent: "+",
+    stepDownText: "Step down",
+    stepUpText: "Step up",
   },
 } as Meta<typeof StorybookComponent>;
 
+// `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<InputTextAsNumberWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const numberValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, descriptionContent, useLeftSlot, useRightSlot, leftSlotContent, rightSlotContent, ...rest } =
+        args;
+      return rest;
+    });
 
-    return {
-      numberValue,
-      args: otherArgs,
-      descriptionContent: args.descriptionContent,
-      useDescriptionSlot: args.useDescriptionSlot,
-      leftSlotContent: args.leftSlotContent,
-      rightSlotContent: args.rightSlotContent,
-      useLeftSlot: args.useLeftSlot,
-      useRightSlot: args.useRightSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="numberValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionSlot" #description>{{ descriptionContent }}</template>
-      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
-      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+      <template v-if="args.useDescriptionSlot" #description>{{ args.descriptionContent }}</template>
+      <template v-if="args.useLeftSlot" #left>{{ args.leftSlotContent }}</template>
+      <template v-if="args.useRightSlot" #right>{{ args.rightSlotContent }}</template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Current value: {{ numberValue ?? 'undefined' }}
+      Current value: {{ args.modelValue ?? 'undefined' }}
     </div>
   `,
 });
@@ -331,7 +350,7 @@ Required.args = {
 export const Outlined = Template.bind({});
 Outlined.args = {
   modelValue: 42,
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Temperature (°C)",
   placeholder: "Enter temperature",
   min: -50,
@@ -344,7 +363,7 @@ Outlined.args = {
 export const Underlined = Template.bind({});
 Underlined.args = {
   modelValue: 10,
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Items Count",
   placeholder: "Number of items",
   min: 0,