srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/form-field/FormField.vue

@@ -1,8 +1,10 @@
 <template>
   <div
     class="form-field"
-    :class="[width, styleClassPassthrough, { 'has-gutter': hasGutter }]"
-    :data-invalid="fieldHasError ? true : undefined"
+    :class="elementClasses"
+    :data-width="width"
+    :data-has-gutter="hasGutter ? '' : null"
+    :data-invalid="fieldHasError ? '' : null"
   >
     <div class="form-field-inner">
       <slot name="default"></slot>
@@ -15,59 +17,48 @@ interface Props {
   width?: "narrow" | "medium" | "wide";
   fieldHasError?: boolean;
   hasGutter?: boolean;
-  styleClassPassthrough?: string;
+  styleClassPassthrough?: string | string[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   width: "narrow",
   fieldHasError: false,
   hasGutter: true,
-  styleClassPassthrough: "",
+  styleClassPassthrough: () => [],
 });
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
   .form-field {
+    --_max-width: var(--form-field-max-width-narrow, 400px);
     --_gutter-width: 0rem;
-    --_max-width: 400px;
-    --_background-color: transparent;
-    --_border-radius: 0.4rem;
 
-    background-color: var(--_background-color);
-    border-radius: var(--_border-radius);
+    background-color: var(--form-field-background-color, transparent);
+    border-radius: var(--form-field-border-radius, 0.4rem);
     margin-inline: auto;
-    margin-block: var(--field-margin-block);
-
+    margin-block: var(--form-field-margin-block, var(--field-margin-block));
     width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-    outline: 0rem solid var(--slate-05);
-
-    &:has(.underline) {
-      --_background-color: var(--theme-form-input-bg-underlined);
-    }
-
-    .form-field-inner {
-      background-color: var(--_background-color);
-      border-radius: var(--_border-radius);
-      margin-inline-start: 0rem;
-      padding-inline-start: 0rem;
-      outline: 0 solid var(--slate-05);
-    }
-
-    &.has-gutter {
-      --_gutter-width: 1.6rem;
-    }
 
-    &.narrow {
-      max-width: 400px;
+    &[data-width="medium"] {
+      --_max-width: var(--form-field-max-width-medium, 800px);
     }
 
-    &.medium {
-      --_max-width: 800px;
+    &[data-width="wide"] {
+      --_max-width: var(--form-field-max-width-wide, 1200px);
     }
 
-    &.wide {
-      --_max-width: 1200px;
+    &[data-has-gutter] {
+      --_gutter-width: var(--form-field-gutter-width, 1.6rem);
     }
   }
 }

package/app/components/05.forms/form-field/stories/FormField.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../FormField.vue";
+
+interface FormFieldStoryArgs {
+  width: "narrow" | "medium" | "wide";
+  hasGutter: boolean;
+  fieldHasError: boolean;
+  styleClassPassthrough: string;
+}
+
+export default {
+  title: "Components/Forms/Form Field/FormField",
+  component: StorybookComponent,
+  argTypes: {
+    width: {
+      control: { type: "select" },
+      options: ["narrow", "medium", "wide"],
+      table: { category: "Layout" },
+    },
+    hasGutter: { control: "boolean", table: { category: "Layout" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    styleClassPassthrough: { control: "text", table: { category: "Styling" } },
+  },
+  args: {
+    width: "narrow",
+    hasGutter: true,
+    fieldHasError: false,
+    styleClassPassthrough: "",
+  },
+} as Meta<FormFieldStoryArgs>;
+
+const demoStyles = `
+  <component is="style">
+    .form-field-story-frame {
+      outline: 1px dashed var(--slate-05);
+      padding-block: 1.6rem;
+    }
+    .form-field-story-frame .form-field {
+      --form-field-background-color: var(--slate-02);
+      outline: 1px solid var(--slate-06);
+    }
+    .form-field-story-frame .form-field[data-invalid] {
+      outline-color: var(--red-06);
+    }
+    .form-field-story-placeholder {
+      padding: 1.2rem;
+      font-size: 1.4rem;
+    }
+  </component>
+`;
+
+const Template: StoryFn<FormFieldStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      ${demoStyles}
+      <p style="font-size: 1.4rem; margin: 1.6rem;">Dashed outline: container. Solid outline and tint: the FormField.</p>
+      <div class="form-field-story-frame">
+        <StorybookComponent
+          :width="args.width"
+          :has-gutter="args.hasGutter"
+          :field-has-error="args.fieldHasError"
+          :style-class-passthrough="args.styleClassPassthrough"
+        >
+          <div class="form-field-story-placeholder">Form control goes here ({{ args.width }})</div>
+        </StorybookComponent>
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+const WidthsTemplate: StoryFn<FormFieldStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args, widths: ["narrow", "medium", "wide"] };
+  },
+  template: `
+    <div>
+      ${demoStyles}
+      <div class="form-field-story-frame">
+        <StorybookComponent
+          v-for="w in widths"
+          :key="w"
+          :width="w"
+          :has-gutter="args.hasGutter"
+          :field-has-error="args.fieldHasError"
+        >
+          <div class="form-field-story-placeholder">width="{{ w }}"</div>
+        </StorybookComponent>
+      </div>
+    </div>
+  `,
+});
+
+export const AllWidths = WidthsTemplate.bind({});
+AllWidths.parameters = { controls: { include: ["hasGutter", "fieldHasError"] } };
+
+export const NoGutter = Template.bind({});
+NoGutter.args = { width: "wide", hasGutter: false };

package/app/components/05.forms/form-field/tests/FormField.spec.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import FormField from "../FormField.vue";
+
+describe("FormField", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(FormField);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders default slot content inside the inner wrapper", async () => {
+    const wrapper = await mountSuspended(FormField, {
+      slots: { default: () => "Field content" },
+    });
+    expect(wrapper.find(".form-field .form-field-inner").text()).toBe("Field content");
+  });
+
+  it("defaults to narrow width with a gutter and no error state", async () => {
+    const wrapper = await mountSuspended(FormField);
+    const root = wrapper.find(".form-field");
+    expect(root.attributes("data-width")).toBe("narrow");
+    expect(root.attributes("data-has-gutter")).toBe("");
+    expect(root.attributes("data-invalid")).toBeUndefined();
+  });
+
+  it.each(["narrow", "medium", "wide"] as const)("reflects width=%s on data-width", async (width) => {
+    const wrapper = await mountSuspended(FormField, { props: { width } });
+    expect(wrapper.find(".form-field").attributes("data-width")).toBe(width);
+  });
+
+  it("does not use bare width/gutter modifier classes", async () => {
+    const wrapper = await mountSuspended(FormField, { props: { width: "wide" } });
+    const classes = wrapper.find(".form-field").classes();
+    expect(classes).not.toContain("wide");
+    expect(classes).not.toContain("has-gutter");
+  });
+
+  it("removes data-has-gutter when hasGutter is false", async () => {
+    const wrapper = await mountSuspended(FormField, { props: { hasGutter: false } });
+    expect(wrapper.find(".form-field").attributes("data-has-gutter")).toBeUndefined();
+  });
+
+  it("sets data-invalid when fieldHasError is true", async () => {
+    const wrapper = await mountSuspended(FormField, { props: { fieldHasError: true } });
+    expect(wrapper.find(".form-field").attributes("data-invalid")).toBe("");
+  });
+
+  it("reacts to prop changes", async () => {
+    const wrapper = await mountSuspended(FormField);
+    await wrapper.setProps({ width: "medium", hasGutter: false, fieldHasError: true });
+    const root = wrapper.find(".form-field");
+    expect(root.attributes("data-width")).toBe("medium");
+    expect(root.attributes("data-has-gutter")).toBeUndefined();
+    expect(root.attributes("data-invalid")).toBe("");
+  });
+
+  it("applies styleClassPassthrough as a string", async () => {
+    const wrapper = await mountSuspended(FormField, { props: { styleClassPassthrough: "extra-a extra-b" } });
+    const classes = wrapper.find(".form-field").classes();
+    expect(classes).toContain("extra-a");
+    expect(classes).toContain("extra-b");
+  });
+
+  it("applies styleClassPassthrough as an array and updates on change", async () => {
+    const wrapper = await mountSuspended(FormField, { props: { styleClassPassthrough: ["one"] } });
+    expect(wrapper.find(".form-field").classes()).toContain("one");
+
+    await wrapper.setProps({ styleClassPassthrough: ["two"] });
+    await nextTick();
+    const classes = wrapper.find(".form-field").classes();
+    expect(classes).toContain("two");
+    expect(classes).not.toContain("one");
+  });
+});

package/app/components/05.forms/form-fieldset/CONSUMER-STYLING.md

@@ -0,0 +1,88 @@
+# FormFieldset — Consumer Styling Guide
+
+`FormFieldset` is the `<fieldset>` + `<legend>` wrapper that `SingleCheckbox`,
+`MultipleCheckboxes` and `MultipleRadiobuttons` render around their controls. It resets the
+native fieldset chrome (no border, margin or padding) and styles the legend.
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--form-fieldset-margin-block` | `0` | Fieldset block margin |
+| `--form-fieldset-margin-inline` | `0` | Fieldset inline margin |
+| `--form-fieldset-padding-block` | `0` | Fieldset block padding |
+| `--form-fieldset-padding-inline` | `0` | Fieldset inline padding |
+| `--form-fieldset-border` | `0` | Fieldset `border` shorthand, e.g. `1px solid var(--theme-border)` |
+| `--form-fieldset-border-radius` | `0` | Fieldset corner radius |
+| `--form-fieldset-outline` | `0` | Fieldset `outline` shorthand |
+| `--form-fieldset-outline-offset` | `0` | Fieldset outline offset |
+| `--form-fieldset-content-margin-block` | `0` | Block margin of the `.form-fieldset-content` wrapper |
+| `--form-fieldset-content-margin-inline` | `0` | Inline margin of the `.form-fieldset-content` wrapper |
+| `--form-fieldset-legend-color` | `inherit` | Legend text colour |
+| `--form-fieldset-legend-font-size` | `var(--step-5)` | Legend font size |
+| `--form-fieldset-legend-font-weight` | `normal` | Legend font weight |
+| `--form-fieldset-legend-line-height` | `1.5` | Legend line height |
+| `--form-fieldset-legend-margin-block` | `0.8rem` | Space above and below the legend |
+| `--form-fieldset-legend-margin-inline` | `0` | Legend inline margin |
+
+`--form-fieldset-legend-color` previously had no fallback and wasn't declared anywhere in the
+layer, so it silently resolved to the inherited colour. The `inherit` fallback keeps that
+behaviour; setting the token now works as expected.
+
+---
+
+## State hooks
+
+| Selector | When |
+|---|---|
+| `.form-fieldset[aria-invalid="true"]` | `field-has-error` is `true` |
+| `.form-fieldset[role="radiogroup"]` | Rendered by `MultipleRadiobuttons` (`group-role="radiogroup"`) |
+
+> **Changed 2026-09-26**: the fieldset no longer adds a bare `.error` class in the error state.
+> Target `[aria-invalid="true"]` instead.
+
+The wrapping components add their own class too (`.single-checkbox-fieldset`,
+`.multiple-checkboxes-fieldset`, `.multiple-radiobuttons-fieldset`), so you can scope overrides
+to one kind of group.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --form-fieldset-legend-font-size: var(--step-3);
+  --form-fieldset-legend-font-weight: 600;
+}
+```
+
+---
+
+## 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`.
+
+### Page or section
+
+```css
+.contact-page {
+  .multiple-checkboxes-fieldset {
+    --form-fieldset-legend-color: var(--slate-09);
+  }
+
+  .form-fieldset[aria-invalid="true"] {
+    --form-fieldset-legend-color: var(--red-07);
+  }
+}
+```
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the `<fieldset>`.
+

package/app/components/05.forms/form-fieldset/FormFieldset.vue

@@ -1,15 +1,15 @@
 <template>
   <fieldset
     :id="id"
-    :aria-required="required"
+    :role="groupRole === 'radiogroup' ? 'radiogroup' : undefined"
+    :aria-required="groupRole === 'radiogroup' && required ? 'true' : undefined"
     :aria-invalid="fieldHasError"
-    role="radiogroup"
     :name="name"
     class="form-fieldset"
-    :class="[elementClasses, { error: fieldHasError }]"
+    :class="elementClasses"
     :data-testid="dataTestid"
   >
-    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': slots.description }]">
+    <legend v-if="legend || slots.legend" class="form-fieldset-legend">
       <slot name="legend">{{ legend }}</slot>
     </legend>
 
@@ -24,6 +24,7 @@ interface Props {
   id: string;
   name: string;
   legend?: string;
+  groupRole?: "group" | "radiogroup";
   required?: boolean;
   fieldHasError?: boolean;
   dataTestid?: string;
@@ -32,6 +33,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   legend: "",
+  groupRole: "group",
   required: false,
   fieldHasError: false,
   dataTestid: "",
@@ -39,37 +41,41 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const slots = useSlots();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.form-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
+  .form-fieldset {
+    margin-block: var(--form-fieldset-margin-block, 0);
+    margin-inline: var(--form-fieldset-margin-inline, 0);
+    padding-block: var(--form-fieldset-padding-block, 0);
+    padding-inline: var(--form-fieldset-padding-inline, 0);
+    border: var(--form-fieldset-border, 0);
+    border-radius: var(--form-fieldset-border-radius, 0);
+    outline: var(--form-fieldset-outline, 0);
+    outline-offset: var(--form-fieldset-outline-offset, 0);
 
-  .form-fieldset-legend {
-    color: var(--form-fieldset-legend-color);
-    margin-block: 0.8rem;
-    font-size: var(--step-5);
-    font-weight: normal;
-    line-height: 1.5;
-
-    &.has-description {
-      margin-bottom: 0;
+    .form-fieldset-legend {
+      color: var(--form-fieldset-legend-color, inherit);
+      margin-block: var(--form-fieldset-legend-margin-block, 0.8rem);
+      margin-inline: var(--form-fieldset-legend-margin-inline, 0);
+      font-size: var(--form-fieldset-legend-font-size, var(--step-5));
+      font-weight: var(--form-fieldset-legend-font-weight, normal);
+      line-height: var(--form-fieldset-legend-line-height, 1.5);
     }
-  }
 
-  .form-fieldset-description {
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-
-  .form-fieldset-content {
-    margin-block-start: 0;
-    margin-block-end: 0;
+    .form-fieldset-content {
+      margin-block: var(--form-fieldset-content-margin-block, 0);
+      margin-inline: var(--form-fieldset-content-margin-inline, 0);
+    }
   }
 }
-}
 </style>

package/app/components/05.forms/form-fieldset/stories/FormFieldset.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../FormFieldset.vue";
+
+interface FormFieldsetStoryArgs {
+  id: string;
+  name: string;
+  legend: string;
+  groupRole: "group" | "radiogroup";
+  required: boolean;
+  fieldHasError: boolean;
+  styleClassPassthrough: string;
+}
+
+export default {
+  title: "Components/Forms/Form Fieldset/FormFieldset",
+  component: StorybookComponent,
+  argTypes: {
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    legend: { control: "text", table: { category: "Basic" } },
+    groupRole: {
+      control: { type: "select" },
+      options: ["group", "radiogroup"],
+      description: "\"radiogroup\" for radio buttons, \"group\" (native fieldset role) for everything else",
+      table: { category: "Accessibility" },
+    },
+    required: {
+      control: "boolean",
+      description: "Only produces aria-required when groupRole is radiogroup",
+      table: { category: "Validation" },
+    },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    styleClassPassthrough: { control: "text", table: { category: "Styling" } },
+  },
+  args: {
+    id: "contact-preference",
+    name: "contactPreference",
+    legend: "How should we contact you?",
+    groupRole: "radiogroup",
+    required: true,
+    fieldHasError: false,
+    styleClassPassthrough: "",
+  },
+} as Meta<FormFieldsetStoryArgs>;
+
+const Template: StoryFn<FormFieldsetStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="margin: 3.6rem; max-width: 48rem;">
+      <StorybookComponent
+        :id="args.id"
+        :name="args.name"
+        :legend="args.legend"
+        :group-role="args.groupRole"
+        :required="args.required"
+        :field-has-error="args.fieldHasError"
+        :style-class-passthrough="args.styleClassPassthrough"
+      >
+        <template #content>
+          <label style="display: block; font-size: 1.6rem;">
+            <input type="radio" :name="args.name" value="email" /> Email
+          </label>
+          <label style="display: block; font-size: 1.6rem;">
+            <input type="radio" :name="args.name" value="phone" /> Phone
+          </label>
+        </template>
+      </StorybookComponent>
+      <p style="font-size: 1.3rem; margin-top: 1.6rem;">
+        Rendered by SingleCheckbox, MultipleCheckboxes and MultipleRadiobuttons. Inspect the fieldset to see role and aria-* output.
+      </p>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const CheckboxGroup = Template.bind({});
+CheckboxGroup.args = { groupRole: "group", legend: "Interests", required: false };
+
+export const WithError = Template.bind({});
+WithError.args = { fieldHasError: true };

package/app/components/05.forms/form-fieldset/tests/FormFieldset.spec.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import FormFieldset from "../FormFieldset.vue";
+
+const baseProps = { id: "interests", name: "interests" };
+
+describe("FormFieldset", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a fieldset with id, name and data-testid", async () => {
+    const wrapper = await mountSuspended(FormFieldset, {
+      props: { ...baseProps, dataTestid: "fieldset-test" },
+    });
+    const fieldset = wrapper.find("fieldset.form-fieldset");
+    expect(fieldset.exists()).toBe(true);
+    expect(fieldset.attributes("id")).toBe("interests");
+    expect(fieldset.attributes("name")).toBe("interests");
+    expect(fieldset.attributes("data-testid")).toBe("fieldset-test");
+  });
+
+  it("renders the content slot", async () => {
+    const wrapper = await mountSuspended(FormFieldset, {
+      props: baseProps,
+      slots: { content: () => "Controls here" },
+    });
+    expect(wrapper.find(".form-fieldset-content").text()).toBe("Controls here");
+  });
+
+  describe("legend", () => {
+    it("renders the legend prop", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, legend: "Interests" } });
+      expect(wrapper.find("legend.form-fieldset-legend").text()).toBe("Interests");
+    });
+
+    it("omits the legend when neither prop nor slot is given", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+      expect(wrapper.find("legend").exists()).toBe(false);
+    });
+
+    it("renders the legend slot even without a legend prop", async () => {
+      const wrapper = await mountSuspended(FormFieldset, {
+        props: baseProps,
+        slots: { legend: () => "Slotted legend" },
+      });
+      expect(wrapper.find("legend").text()).toBe("Slotted legend");
+    });
+  });
+
+  describe("group role", () => {
+    it("uses the native group role by default, with no aria-required", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, required: true } });
+      const fieldset = wrapper.find("fieldset");
+      expect(fieldset.attributes("role")).toBeUndefined();
+      expect(fieldset.attributes("aria-required")).toBeUndefined();
+    });
+
+    it("sets role=radiogroup when groupRole is radiogroup", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, groupRole: "radiogroup" } });
+      const fieldset = wrapper.find("fieldset");
+      expect(fieldset.attributes("role")).toBe("radiogroup");
+      expect(fieldset.attributes("aria-required")).toBeUndefined();
+    });
+
+    it("sets aria-required on a required radiogroup", async () => {
+      const wrapper = await mountSuspended(FormFieldset, {
+        props: { ...baseProps, groupRole: "radiogroup", required: true },
+      });
+      expect(wrapper.find("fieldset").attributes("aria-required")).toBe("true");
+    });
+  });
+
+  describe("error state", () => {
+    it("sets aria-invalid from fieldHasError", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, fieldHasError: true } });
+      expect(wrapper.find("fieldset").attributes("aria-invalid")).toBe("true");
+    });
+
+    it("does not add a bare error class", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, fieldHasError: true } });
+      expect(wrapper.find("fieldset").classes()).not.toContain("error");
+    });
+  });
+
+  describe("styleClassPassthrough", () => {
+    it("applies string classes", async () => {
+      const wrapper = await mountSuspended(FormFieldset, {
+        props: { ...baseProps, styleClassPassthrough: "one two" },
+      });
+      const classes = wrapper.find("fieldset").classes();
+      expect(classes).toContain("one");
+      expect(classes).toContain("two");
+    });
+
+    it("applies array classes and updates on change", async () => {
+      const wrapper = await mountSuspended(FormFieldset, {
+        props: { ...baseProps, styleClassPassthrough: ["one"] },
+      });
+      expect(wrapper.find("fieldset").classes()).toContain("one");
+
+      await wrapper.setProps({ styleClassPassthrough: ["two"] });
+      await nextTick();
+      const classes = wrapper.find("fieldset").classes();
+      expect(classes).toContain("two");
+      expect(classes).not.toContain("one");
+    });
+  });
+});