srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/input-radio/tests/MultipleRadioButtons.spec.ts

@@ -1,90 +1,141 @@
-// https://nuxt.com/docs/getting-started/testing#unit-testing
-import type { VueWrapper } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { ref } from "vue";
-import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
-import ComponentUnderTest from "../MultipleRadiobuttons.vue";
+import type { OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
+import MultipleRadiobuttons from "../MultipleRadiobuttons.vue";
 import tagsData from "./data/tags.json";
 
-const initialPropsData = {
-  dataTestid: "multiple-radio-buttons",
-  id: "tags",
+const defaultProps = {
+  modelValue: "",
   name: "tags",
-  legend: "Choose tags (as checkboxes)",
-  required: true,
-  label: "Check between 3 and 8 tags",
-  placeholder: "eg. Type something here",
-  isButton: true,
-  errorMessage: "Please select between 3 and 8 tags",
-  fieldHasError: false,
-  fieldData: tagsData,
-  optionsLayout: "inline" as OptionsLayout,
-  styleClassPassthrough: ["testClass"],
-  theme: "default" as FormUiTheme,
+  legend: "Choose a tag",
+  errorMessage: "Please choose a tag",
+  fieldData: tagsData as IFormMultipleOptions,
 };
 
-const initialSlots = {
-  checkedIcon: () => ``,
-  itemIcon: () => `<Icon name="material-symbols:add-2" class="icon" />`,
-};
+const createWrapper = (props = {}, slots = {}) =>
+  mountSuspended(MultipleRadiobuttons, {
+    attachTo: document.body,
+    props: { ...defaultProps, ...props },
+    slots,
+  });
 
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}, slotsData = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-  const mockSlotsData = { ...initialSlots, ...slotsData };
+describe("MultipleRadiobuttons", () => {
+  describe("rendering", () => {
+    it("renders a radiogroup fieldset with the legend", async () => {
+      const wrapper = await createWrapper();
+      const fieldset = wrapper.find("fieldset");
 
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-    slots: mockSlotsData,
+      expect(fieldset.attributes("role")).toBe("radiogroup");
+      expect(fieldset.text()).toContain("Choose a tag");
+      expect(wrapper.attributes("data-testid")).toBe("multiple-radio-buttons");
+    });
+
+    it("renders one radio per data item", async () => {
+      const wrapper = await createWrapper();
+
+      expect(wrapper.findAll('input[type="radio"]')).toHaveLength(tagsData.data.length);
+    });
+
+    it("gives every radio the group name so they form one native group", async () => {
+      const wrapper = await createWrapper({ name: "cuisine" });
+      const names = wrapper.findAll('input[type="radio"]').map((radio) => radio.attributes("name"));
+
+      expect(new Set(names)).toEqual(new Set(["cuisine"]));
+    });
+
+    it.each([false, true])("labels every radio with its item label (isButton: %s)", async (isButton) => {
+      const wrapper = await createWrapper({ isButton });
+      const radios = wrapper.findAll('input[type="radio"]');
+
+      radios.forEach((radio, index) => {
+        const label = wrapper.find(`label[for="${radio.attributes("id")}"]`);
+        expect(label.text()).toContain(tagsData.data[index]!.label);
+      });
+    });
+
+    it("applies styleClassPassthrough to the fieldset alongside its fixed class", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: ["custom-class"] });
+      const classes = wrapper.find(".form-fieldset").classes();
+
+      expect(classes).toContain("multiple-radiobuttons-fieldset");
+      expect(classes).toContain("custom-class");
+    });
+
+    it("does not leak removed props as fieldset attributes", async () => {
+      const wrapper = await createWrapper();
+      const fieldset = wrapper.find("fieldset");
+
+      expect(fieldset.attributes("placeholder")).toBeUndefined();
+      expect(fieldset.attributes("equal-cols")).toBeUndefined();
+    });
   });
-};
 
-describe("MultipleRadioButtons Component", () => {
-  it("Mounts", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper).toBeTruthy();
+  describe("options layout", () => {
+    it("defaults to equal-widths", async () => {
+      const wrapper = await createWrapper();
+
+      expect(wrapper.find(".multiple-radiobuttons-items").attributes("data-options-layout")).toBe("equal-widths");
+    });
+
+    it.each(["inline", "block", "equal-widths"] as OptionsLayout[])(
+      "renders data-options-layout=%s without a bare layout class",
+      async (optionsLayout) => {
+        const wrapper = await createWrapper({ optionsLayout });
+        const items = wrapper.find(".multiple-radiobuttons-items");
+
+        expect(items.attributes("data-options-layout")).toBe(optionsLayout);
+        expect(items.classes()).toEqual(["multiple-radiobuttons-items"]);
+      }
+    );
   });
 
-  it("renders properly", async () => {
-    wrapper = await wrapperFactory();
-    const dataTestIdElem = wrapper.attributes("data-testid");
-    expect(dataTestIdElem).toBe(initialPropsData.dataTestid);
-    // The styleClassPassthrough is applied to the FormFieldset component, not the root
-    expect(wrapper.find(".form-fieldset").classes()).toContain("testClass");
+  describe("selection", () => {
+    it.each([false, true])("keeps a single selection (isButton: %s)", async (isButton) => {
+      const wrapper = await createWrapper({ isButton });
+      const radios = wrapper.findAll('input[type="radio"]');
+
+      await radios[0]!.trigger("click");
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual([tagsData.data[0]!.value]);
+
+      await wrapper.setProps({ modelValue: tagsData.data[0]!.value });
+      await radios[1]!.trigger("click");
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual([tagsData.data[1]!.value]);
+
+      await wrapper.setProps({ modelValue: tagsData.data[1]!.value });
+      expect((radios[0]!.element as HTMLInputElement).checked).toBe(false);
+      expect((radios[1]!.element as HTMLInputElement).checked).toBe(true);
+    });
+
+    it("marks every radio required when required", async () => {
+      const wrapper = await createWrapper({ required: true });
+
+      for (const radio of wrapper.findAll('input[type="radio"]')) {
+        expect(radio.attributes("required")).toBeDefined();
+      }
+    });
   });
 
-  it("updates radio modelValue when items clicked", async () => {
-    const modelValue = ref<string>("");
-    const propsData = {
-      modelValue,
-    };
-    wrapper = await wrapperFactory(propsData);
-
-    /*
-     * Test the first radio button
-     **/
-    const radiobuttonElements = wrapper.findAll('input[type="radio"]');
-    const firstRadioButton = radiobuttonElements[0];
-    expect(firstRadioButton).toBeDefined();
-    expect(firstRadioButton!.attributes("aria-checked")).toBe("false");
-    const firstRadioButtonTrueValue = firstRadioButton!.attributes("true-value");
-
-    await firstRadioButton!.trigger("click");
-    expect(firstRadioButton!.attributes("aria-checked")).toBe("true");
-    expect(wrapper.vm.modelValue).toEqual(firstRadioButtonTrueValue);
-
-    /*
-     * Test the second radio button
-     **/
-    const secondRadioButton = radiobuttonElements[1];
-    expect(secondRadioButton).toBeDefined();
-    expect(secondRadioButton!.attributes("aria-checked")).toBe("false");
-    const secondRadioButtonTrueValue = secondRadioButton!.attributes("true-value");
-
-    await secondRadioButton!.trigger("click");
-    expect(firstRadioButton!.attributes("aria-checked")).toBe("false");
-    expect(secondRadioButton!.attributes("aria-checked")).toBe("true");
-    expect(wrapper.vm.modelValue).toEqual(secondRadioButtonTrueValue);
+  describe("description and error", () => {
+    it("links the description through aria-describedby", async () => {
+      const wrapper = await createWrapper({}, { descriptionText: "Pick the closest match" });
+      const descriptionId = wrapper.find(".input-description").attributes("id");
+
+      expect(descriptionId).toBeTruthy();
+      expect(wrapper.find('input[type="radio"]').attributes("aria-describedby")).toContain(descriptionId);
+    });
+
+    it("renders no description element without a description slot", async () => {
+      const wrapper = await createWrapper();
+
+      expect(wrapper.find(".input-description").exists()).toBe(false);
+    });
+
+    it("shows the error message and links it when the field has an error", async () => {
+      const wrapper = await createWrapper({ fieldHasError: true });
+      const radio = wrapper.find('input[type="radio"]');
+
+      expect(wrapper.text()).toContain("Please choose a tag");
+      expect(radio.attributes("aria-describedby")).toContain("error");
+    });
   });
 });

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

@@ -32,6 +32,18 @@ Or scope to a single instance via `styleClassPassthrough`:
 <InputRangeCore style-class-passthrough="price-range" ... />
 ```
 
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
 ## Notes
 
 - `accent-color` was previously read from `--theme-form-range-accent-color`, a custom property
@@ -43,3 +55,4 @@ Or scope to a single instance via `styleClassPassthrough`:
   CSS in this component (or elsewhere in the library) currently styles that class — it's a no-op
   today. Left as-is rather than redesigned, since the original intent wasn't clear; flagged here
   so you don't spend time debugging "why doesn't `weight` do anything."
+

package/app/components/05.forms/input-range/InputRangeCore.vue

@@ -77,7 +77,7 @@ const modelValue = defineModel<number>({
     .slot {
       align-self: flex-start;
 
-      .input-button-core {
+      .input-button {
         border-radius: var(--form-input-border-radius);
         width: var(--input-range-button-size);
         height: var(--input-range-button-size);

package/app/components/05.forms/input-range/{variants/InputRangeDefault.vue → InputRangeDefault.vue}

@@ -7,9 +7,7 @@
   >
     <InputLabel
       :id
-      :for="id"
-      :theme
-      :name
+      :required
       input-variant="normal"
       :field-has-error
       :style-class-passthrough="['input-number-label', 'body-normal-bold']"
@@ -18,16 +16,14 @@
     </InputLabel>
 
     <InputDescription
-      :id
       :description-id
-      :name
       :field-has-error="fieldHasError"
       :style-class-passthrough="['input-text-description']"
     >
-      <template #descriptionHtml>
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
         <slot name="descriptionHtml"></slot>
       </template>
-      <template #descriptionText>
+      <template v-if="slots.descriptionText" #descriptionText>
         <slot name="descriptionText"></slot>
       </template>
     </InputDescription>
@@ -50,7 +46,7 @@
         <slot name="datalist"></slot>
       </template>
       <template v-if="slots.left" #left>
-        <InputButtonCore
+        <InputButton
           type="button"
           :readonly="Number(modelValue) === min"
           :is-pending="false"
@@ -62,10 +58,10 @@
           <template #iconOnly>
             <slot name="left"></slot>
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
       <template v-if="slots.right" #right>
-        <InputButtonCore
+        <InputButton
           type="button"
           :readonly="Number(modelValue) === max"
           :is-pending="false"
@@ -77,7 +73,7 @@
           <template #iconOnly>
             <slot name="right"></slot>
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
     </InputRangeCore>
     <InputError

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

@@ -47,7 +47,7 @@ describe("InputRangeDefault", () => {
 
   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);
+    expect(wrapper.findAllComponents({ name: "InputButton" })).toHaveLength(0);
   });
 
   it("renders step buttons with default labels when the left/right slots are used", async () => {

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

@@ -26,7 +26,7 @@ Geometry (`--input-padding-*`, `--input-min-height`, `--input-select-option-min-
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -41,8 +41,17 @@ Only declare the tokens you want to change — everything else keeps inheriting
 
 ---
 
-## Per-instance overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 ```vue
 <InputSelectCore id="country" name="country" style="--input-select-border-focus: var(--gold-04);" />
 ```
+

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

@@ -9,9 +9,7 @@
     >
       <InputLabel
         :id
-        :for="id"
-        :theme
-        :name
+        :required
         :input-variant
         :field-has-error
         :style-class-passthrough="['input-select-label']"
@@ -20,16 +18,16 @@
       </InputLabel>
 
       <InputDescription
-        :id
+        v-if="inputVariant !== 'outlined'"
         :description-id
-        :name
+        :input-variant
         :field-has-error="fieldHasError"
         :style-class-passthrough="['input-text-description']"
       >
-        <template #descriptionHtml>
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
           <slot name="descriptionHtml"></slot>
         </template>
-        <template #descriptionText>
+        <template v-if="slots.descriptionText" #descriptionText>
           <slot name="descriptionText"></slot>
         </template>
       </InputDescription>
@@ -60,8 +58,7 @@
     </div>
     <InputDescription
       v-if="inputVariant === 'outlined'"
-      :id
-      :name
+      :description-id
       :input-variant
       :field-has-error="fieldHasError"
       :style-class-passthrough="['input-text-description']"

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref, computed } from "vue";
-import StorybookComponent from "../variants/InputSelectWithLabel.vue";
+import StorybookComponent from "../InputSelectWithLabel.vue";
 import type { FormUiTheme, InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms.d";
 
 interface InputSelectWithLabelStoryArgs {

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

@@ -15,7 +15,7 @@ documented path to reach for.)
 | Token | Falls back to | Controls |
 |---|---|---|
 | `--input-text-surface` | `var(--theme-input-surface)` | Wrapper background |
-| `--input-text-surface-hover` | `var(--theme-input-surface-hover)` | Background of an embedded `InputButtonCore` slot on hover |
+| `--input-text-surface-hover` | `var(--theme-input-surface-hover)` | Background of an embedded `InputButton` slot on hover |
 | `--input-text-border` | `var(--theme-border)` | Border colour (`.normal`/`.underlined`, resting) |
 | `--input-text-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (mouse) |
 | `--input-text-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive) |
@@ -28,7 +28,7 @@ see `theming-form-geometry-tokens.md`.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -43,8 +43,17 @@ Only declare the tokens you want to change — everything else keeps inheriting
 
 ---
 
-## Per-instance overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 ```vue
 <InputTextCore id="email" name="email" style="--input-text-border-focus: var(--gold-04);" />
 ```
+

package/app/components/05.forms/input-text/{variants/InputPasswordWithLabel.vue → InputPasswordWithLabel.vue}

@@ -21,7 +21,7 @@
     </template>
 
     <template #right>
-      <InputButtonCore
+      <InputButton
         type="button"
         :is-pending="false"
         :button-text
@@ -33,7 +33,7 @@
           <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
           <Icon v-else name="radix-icons:eye-open" class="icon" />
         </template>
-      </InputButtonCore>
+      </InputButton>
     </template>
   </InputTextWithLabel>
 </template>
@@ -72,7 +72,7 @@ const props = withDefaults(defineProps<Props>(), {
   hidePasswordText: "Hide password",
 });
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string>({ required: true });
 
 const { updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 

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

@@ -7,9 +7,7 @@
   >
     <InputLabel
       :id
-      :for="id"
-      :theme
-      :name
+      :required
       :input-variant
       :field-has-error
       :style-class-passthrough="['input-text-label', 'body-normal-bold']"
@@ -18,16 +16,15 @@
     </InputLabel>
 
     <InputDescription
-      :id
       :description-id
-      :name
+      :input-variant
       :field-has-error="fieldHasError"
       :style-class-passthrough="['input-text-description']"
     >
-      <template #descriptionHtml>
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
         <slot name="descriptionHtml"></slot>
       </template>
-      <template #descriptionText>
+      <template v-if="slots.descriptionText" #descriptionText>
         <slot name="descriptionText"></slot>
       </template>
     </InputDescription>
@@ -52,7 +49,7 @@
       :input-variant
     >
       <template v-if="slots.left" #left>
-        <InputButtonCore
+        <InputButton
           type="button"
           :readonly="(modelValue ?? 0) <= min"
           :is-pending="false"
@@ -64,10 +61,10 @@
           <template #iconOnly>
             <slot name="left"></slot>
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
       <template v-if="slots.right" #right>
-        <InputButtonCore
+        <InputButton
           type="button"
           :readonly="(modelValue ?? 0) >= max"
           :is-pending="false"
@@ -79,7 +76,7 @@
           <template #iconOnly>
             <slot name="right"></slot>
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
     </InputTextCore>
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
@@ -130,7 +127,7 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
-const modelValue = defineModel<number>();
+const modelValue = defineModel<number | undefined>({ default: undefined });
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
@@ -170,7 +167,7 @@ updateElementClasses(["input-text-as-number", "has-left-button", "has-right-butt
         .slot {
           margin-inline: 0;
 
-          .input-button-core {
+          .input-button {
             background-color: var(--theme-input-surface);
 
             &:hover {
@@ -185,13 +182,13 @@ updateElementClasses(["input-text-as-number", "has-left-button", "has-right-butt
           }
 
           &.left-slot {
-            .input-button-core {
+            .input-button {
               border-right: var(--form-element-border-width) solid var(--theme-border);
             }
           }
 
           &.right-slot {
-            .input-button-core {
+            .input-button {
               border-left: var(--form-element-border-width) solid var(--theme-border);
             }
           }

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

@@ -70,6 +70,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: "text",
   inputmode: "text",
   maxlength: 255,
+  min: undefined,
+  max: undefined,
   required: false,
   placeholder: "",
   fieldHasError: false,
@@ -85,7 +87,7 @@ const FormUiTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme;
 });
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string>({ required: true });
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
 
@@ -140,12 +142,7 @@ onMounted(() => {
        repeating the fallback chain at every property — they are not themselves an override point,
        see CONSUMER-STYLING.md. */
     --_surface: var(--input-text-surface, var(--theme-input-surface));
-    --_surface-hover: var(--input-text-surface-hover, var(--theme-input-surface-hover));
     --_border: var(--input-text-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-text-border-hover, var(--theme-border-focus));
     --_border-focus: var(--input-text-border-focus, var(--theme-border-focus));
 
     display: flex;
@@ -166,7 +163,7 @@ onMounted(() => {
       padding-inline: var(--input-padding-inline);
 
       &:has(input:is(:hover), button:is(:hover)) {
-        outline: var(--form-element-outline-width-focus) solid var(--_border-hover);
+        outline: var(--form-element-outline-width-focus) solid var(--input-text-border-hover, var(--theme-border-focus));
         outline-offset: var(--form-element-outline-offset-focus);
       }
 
@@ -181,7 +178,7 @@ onMounted(() => {
       padding-inline: var(--input-padding-inline);
     }
 
-    &.has-right-slot:has(.input-button-core) {
+    &.has-right-slot:has(.input-button) {
       padding-inline-end: 0;
     }
 
@@ -191,11 +188,11 @@ onMounted(() => {
       justify-content: center;
       box-sizing: content-box;
 
-      .input-button-core {
+      .input-button {
         /* variant="inline" ships with zero border/colour styling by design (see
            component-inline-action-button.md) — the parent supplies all of it. This rule was
            always missing the border/colour half of that contract, only ever setting
-           background-color; harmless before InputButtonCore's flat-button redesign, which
+           background-color; harmless before InputButton's flat-button redesign, which
            removed the unscoped base rule that used to accidentally give every variant a real
            border regardless. Without its own border/color/outline reset, this button now falls
            through to the browser's UA default <button> chrome (a stark outset border and
@@ -209,7 +206,7 @@ onMounted(() => {
         width: var(--input-min-height);
 
         &:hover {
-          background-color: var(--_surface-hover);
+          background-color: var(--input-text-surface-hover, var(--theme-input-surface-hover));
         }
 
         &:is(:focus-visible) {