srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/input-number/{variants/InputNumberDefault.vue → InputNumberField.vue}

@@ -1,15 +1,13 @@
 <template>
   <div
-    class="input-number-with-label"
+    class="input-number-field"
     :data-theme="theme"
     :data-invalid="fieldHasError ? '' : null"
     :class="[elementClasses, inputVariant, `theme-${theme}`, { error: fieldHasError }]"
   >
     <InputLabel
       :id
-      :for="id"
-      :theme
-      :name
+      :required
       :input-variant
       :field-has-error
       :style-class-passthrough="['input-number-label', 'body-normal-bold']"
@@ -18,21 +16,20 @@
     </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>
 
-    <InputNumberCore
+    <InputNumber
       :id
       v-model="modelValue"
       :name
@@ -49,7 +46,7 @@
       :aria-describedby
     >
       <template v-if="slots.left" #left>
-        <InputButtonCore
+        <InputButton
           type="button"
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
@@ -61,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"
@@ -76,9 +73,9 @@
           <template #iconOnly>
             <slot name="right"></slot>
           </template>
-        </InputButtonCore>
+        </InputButton>
       </template>
-    </InputNumberCore>
+    </InputNumber>
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
   </div>
 </template>
@@ -138,7 +135,7 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
 
 <style lang="css">
 @layer components {
-  .input-number-with-label {
+  .input-number-field {
     .input-number-label {
       display: block;
       margin-block: 0.8rem;

package/app/components/05.forms/input-number/stories/{InputNumberCore.stories.ts → InputNumber.stories.ts}

@@ -1,8 +1,8 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputNumberCore.vue";
+import StorybookComponent from "../InputNumber.vue";
 
-interface InputNumberCoreStoryArgs {
+interface InputNumberStoryArgs {
   id: string;
   name: string;
   min: number;
@@ -16,7 +16,7 @@ interface InputNumberCoreStoryArgs {
 }
 
 export default {
-  title: "Components/Forms/Input Number/InputNumberCore",
+  title: "Components/Forms/Input Number/InputNumber",
   component: StorybookComponent,
   argTypes: {
     id: { control: "text", table: { category: "Basic" } },
@@ -46,9 +46,9 @@ export default {
     weight: "normal",
     inputVariant: "normal",
   },
-} as Meta<InputNumberCoreStoryArgs>;
+} as Meta<InputNumberStoryArgs>;
 
-const Template: StoryFn<InputNumberCoreStoryArgs> = (args) => ({
+const Template: StoryFn<InputNumberStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     const modelValue = ref(50);
@@ -66,7 +66,7 @@ export const Default = Template.bind({});
 export const ErrorState = Template.bind({});
 ErrorState.args = { fieldHasError: true };
 
-const WithStepButtonsTemplate: StoryFn<InputNumberCoreStoryArgs> = (args) => ({
+const WithStepButtonsTemplate: StoryFn<InputNumberStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     const modelValue = ref(50);

package/app/components/05.forms/input-number/{variants/stories/InputNumberDefault.stories.ts → stories/InputNumberField.stories.ts}

@@ -1,8 +1,8 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../InputNumberDefault.vue";
+import StorybookComponent from "../InputNumberField.vue";
 import type { FormUiTheme } from "~/types/forms/types.forms.d";
 
-interface InputNumberDefaultStoryArgs {
+interface InputNumberFieldStoryArgs {
   modelValue: number;
   name: string;
   label: string;
@@ -21,7 +21,7 @@ interface InputNumberDefaultStoryArgs {
 }
 
 export default {
-  title: "Components/Forms/Input Number/InputNumberDefault",
+  title: "Components/Forms/Input Number/InputNumberField",
   component: StorybookComponent,
   argTypes: {
     modelValue: { control: "number", table: { category: "Model" } },
@@ -65,9 +65,9 @@ export default {
     stepUpLabel: "Step up",
     useStepButtons: false,
   },
-} as Meta<InputNumberDefaultStoryArgs>;
+} as Meta<InputNumberFieldStoryArgs>;
 
-const Template: StoryFn<InputNumberDefaultStoryArgs> = (args) => ({
+const Template: StoryFn<InputNumberFieldStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     return { args };

package/app/components/05.forms/input-number/tests/{InputNumberCore.spec.ts → InputNumber.spec.ts}

@@ -1,7 +1,7 @@
 // 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 "../InputNumberCore.vue";
+import ComponentUnderTest from "../InputNumber.vue";
 
 const initialPropsData = {
   id: "test-number",
@@ -22,7 +22,7 @@ const wrapperFactory = (propsData = {}, slots = {}) => {
   });
 };
 
-describe("InputNumberCore", () => {
+describe("InputNumber", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();

package/app/components/05.forms/input-number/{variants/tests/InputNumberDefault.spec.ts → tests/InputNumberField.spec.ts}

@@ -1,7 +1,7 @@
 // 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 "../InputNumberDefault.vue";
+import ComponentUnderTest from "../InputNumberField.vue";
 
 const initialPropsData = {
   name: "testName",
@@ -23,7 +23,7 @@ const wrapperFactory = (propsData = {}, slots = {}) => {
   });
 };
 
-describe("InputNumberDefault", () => {
+describe("InputNumberField", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();
@@ -46,13 +46,13 @@ describe("InputNumberDefault", () => {
 
   it("sets data-invalid and the error class when fieldHasError is true", async () => {
     wrapper = await wrapperFactory({ fieldHasError: true });
-    expect(wrapper.find(".input-number-with-label").attributes("data-invalid")).toBe("");
-    expect(wrapper.find(".input-number-with-label").classes()).toContain("error");
+    expect(wrapper.find(".input-number-field").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-number-field").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);
+    expect(wrapper.findAllComponents({ name: "InputButton" })).toHaveLength(0);
   });
 
   it("renders step buttons with default labels when the left/right slots are used", async () => {
@@ -132,12 +132,12 @@ describe("InputNumberDefault", () => {
 
   it("applies styleClassPassthrough", async () => {
     wrapper = await wrapperFactory({ styleClassPassthrough: "custom-number" });
-    expect(wrapper.find(".input-number-with-label").classes()).toContain("custom-number");
+    expect(wrapper.find(".input-number-field").classes()).toContain("custom-number");
   });
 
-  it("forwards inputVariant to the wrapper, InputLabel, and InputNumberCore", async () => {
+  it("forwards inputVariant to the wrapper, InputLabel, and InputNumber", async () => {
     wrapper = await wrapperFactory({ inputVariant: "underlined" });
-    expect(wrapper.find(".input-number-with-label").classes()).toContain("underlined");
+    expect(wrapper.find(".input-number-field").classes()).toContain("underlined");
     expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
   });
 });

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

@@ -0,0 +1,70 @@
+# MultipleRadiobuttons — Consumer Styling Guide
+
+`MultipleRadiobuttons` is a layout wrapper: a `FormFieldset` (`role="radiogroup"`) holding the
+radio controls, an optional description and an error message. It only owns the spacing of the
+items container. The radios' colours, borders and pill/button styling come from
+`InputCheckboxRadio`/`InputCheckboxRadioButton` (`--input-checkbox-*` tokens, see
+`../input-checkbox-radio/CONSUMER-STYLING.md`); the fieldset, legend, description and error have
+their own guides (`form-fieldset`, `input-description`, `input-error`).
+
+## Public token API
+
+### Items container (`.multiple-radiobuttons-items`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--multiple-radiobuttons-gap` | `1.2rem` | Gap between radio items |
+| `--multiple-radiobuttons-margin-block-start` | `1.2rem` | Space between the legend/description and the items |
+
+With `options-layout="equal-widths"` (the default), the column minimum width is measured at
+runtime from the widest option label (`useMaxChildWidth`) plus the shared
+`--input-checked-icon-gap` and `--input-checkbox-label-padding-inline` form tokens, so every
+column matches the longest label. It has no token of its own; adjust those shared tokens if the
+columns need more room.
+
+No private tokens.
+
+> **Changed 2026-09-27**: the gap and top margin were hardcoded; they're now tokens with the same
+> defaults, matching `MultipleCheckboxes`.
+
+---
+
+## State hooks
+
+| Attribute on `.multiple-radiobuttons-items` | When |
+|---|---|
+| `data-options-layout="equal-widths" \| "inline" \| "block"` | Always, mirrors `options-layout` |
+
+The root `<fieldset>` carries `role="radiogroup"` and the fixed class
+`multiple-radiobuttons-fieldset`.
+
+> **Changed 2026-09-27**: the layout used to be a bare class (`.inline`, `.block`,
+> `.equal-widths`). Generic names like `.block`/`.inline` collide with common consumer utility
+> classes, so select on `[data-options-layout]` instead.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --multiple-radiobuttons-gap: 0.8rem;
+}
+```
+
+---
+
+## 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`.
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the root `<fieldset>`,
+alongside `multiple-radiobuttons-fieldset`. It's read once at mount.

package/app/components/05.forms/input-radio/MultipleRadiobuttons.vue

@@ -3,6 +3,7 @@
     :id
     :name
     :legend
+    group-role="radiogroup"
     :field-has-error
     :required
     :data-testid
@@ -10,28 +11,27 @@
   >
     <template #content>
       <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>
 
-      <div ref="itemsContainer" class="multiple-radiobuttons-items" :class="[optionsLayout]">
+      <div ref="itemsContainer" class="multiple-radiobuttons-items" :data-options-layout="optionsLayout">
         <template v-for="item in fieldData.data" :key="item.id">
           <InputCheckboxRadioButton
             v-if="isButton"
             :id="`${name}-${item.value}`"
             v-model="modelValue"
             type="radio"
-            :name="`${name}-${item.name}`"
+            :name
             :required
             :label="item.label"
             :field-has-error
@@ -52,17 +52,15 @@
               </slot>
             </template>
           </InputCheckboxRadioButton>
-          <InputCheckboxRadioWithLabel
+          <InputCheckboxRadioField
             v-else
-            :id="`${name}-${item.value}`"
             v-model="modelValue"
             type="radio"
-            :name="`${name}-${item.name}`"
+            :name
             :required
             :label="item.label"
             :field-has-error
             :true-value="item.value"
-            :options-layout
             :theme
             :input-variant
             :aria-describedby
@@ -70,7 +68,7 @@
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
             </template>
-          </InputCheckboxRadioWithLabel>
+          </InputCheckboxRadioField>
         </template>
       </div>
       <InputError :id="errorId" :error-message="errorMessage" :show-error="fieldHasError" :is-detached="true" :input-variant />
@@ -85,38 +83,29 @@ interface Props {
   dataTestid?: string;
   name: string;
   legend: string;
-  label: string;
-  placeholder?: string;
   isButton?: boolean;
   isPill?: boolean;
-  errorMessage: object | string;
+  errorMessage: string | object;
   required?: boolean;
   fieldHasError?: boolean;
-  multipleOptions?: boolean;
   optionsLayout?: OptionsLayout;
-  equalCols?: boolean;
   styleClassPassthrough?: string | string[];
   theme?: FormUiTheme;
   inputVariant?: InputUiVariant;
   direction?: "row" | "row-reverse";
-  displayAsLozenge?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   dataTestid: "multiple-radio-buttons",
-  placeholder: "",
   isButton: false,
   isPill: false,
   required: false,
   fieldHasError: false,
-  multipleOptions: false,
   optionsLayout: "equal-widths",
-  equalCols: true,
   styleClassPassthrough: () => [],
   theme: "default",
   inputVariant: "normal",
   direction: "row",
-  displayAsLozenge: false,
 });
 
 const slots = useSlots();
@@ -129,11 +118,11 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
-const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
-const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
 
-const { maxChildWidth, itemsContainer, updateMaxChildWidth } = useMaxChildWidth(
-  ".input-checkbox-radio-label, .input-checkbox-radio-with-label-label",
+const { maxChildWidth, updateMaxChildWidth } = useMaxChildWidth(
+  ".input-checkbox-radio-field-label",
   "100px"
 );
 
@@ -153,19 +142,19 @@ watch(
 @layer components {
 .multiple-radiobuttons-items {
   display: flex;
-  gap: 1.2rem;
-  margin-top: 1.2rem;
+  gap: var(--multiple-radiobuttons-gap, 1.2rem);
+  margin-block-start: var(--multiple-radiobuttons-margin-block-start, 1.2rem);
 
-  &.inline {
+  &[data-options-layout="inline"] {
     flex-direction: row;
     flex-wrap: wrap;
   }
 
-  &.block {
+  &[data-options-layout="block"] {
     flex-direction: column;
   }
 
-  &.equal-widths {
+  &[data-options-layout="equal-widths"] {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,

package/app/components/05.forms/input-radio/stories/MultipleRadiobuttons.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed, ref } from "vue";
+import StorybookComponent from "../MultipleRadiobuttons.vue";
+import type { IFormMultipleOptions, InputUiVariant, OptionsLayout } from "~/types/forms/types.forms.d";
+
+interface MultipleRadiobuttonsStoryArgs {
+  name: string;
+  legend: string;
+  errorMessage: string;
+  required: boolean;
+  fieldHasError: boolean;
+  isButton: boolean;
+  isPill: boolean;
+  optionsLayout: OptionsLayout;
+  direction: "row" | "row-reverse";
+  inputVariant: InputUiVariant;
+  gap: string;
+  descriptionText: string;
+}
+
+export default {
+  title: "Components/Forms/Input Radio/MultipleRadiobuttons",
+  component: StorybookComponent,
+  argTypes: {
+    name: { control: "text", description: "Shared name of every radio in the group", table: { category: "Basic" } },
+    legend: { control: "text", table: { category: "Basic" } },
+    errorMessage: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    descriptionText: { control: "text", description: "descriptionText slot", table: { category: "Slots" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    isButton: { control: "boolean", table: { category: "Styling" } },
+    isPill: { control: "boolean", description: "Only with isButton", table: { category: "Styling" } },
+    optionsLayout: {
+      control: { type: "select" },
+      options: ["equal-widths", "inline", "block"],
+      description: "Rendered as data-options-layout on the items container",
+      table: { category: "Styling" },
+    },
+    direction: {
+      control: { type: "select" },
+      options: ["row", "row-reverse"],
+      description: "Only with isButton",
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    gap: {
+      control: "text",
+      description: "Sets --multiple-radiobuttons-gap on the story wrapper",
+      table: { category: "Tokens" },
+    },
+  },
+  args: {
+    name: "enquiryType",
+    legend: "What's your enquiry about?",
+    errorMessage: "Choose an enquiry type",
+    required: true,
+    fieldHasError: false,
+    isButton: false,
+    isPill: false,
+    optionsLayout: "equal-widths",
+    direction: "row",
+    inputVariant: "normal",
+    gap: "",
+    descriptionText: "Pick the closest match.",
+  },
+} as Meta<MultipleRadiobuttonsStoryArgs>;
+
+const Template: StoryFn<MultipleRadiobuttonsStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref<string>("");
+    const fieldData = ref<IFormMultipleOptions>({
+      data: [
+        { id: "1", name: "enquiryType", value: "booking", label: "Booking" },
+        { id: "2", name: "enquiryType", value: "consultation", label: "Consultation" },
+        { id: "3", name: "enquiryType", value: "product", label: "Product advice" },
+        { id: "4", name: "enquiryType", value: "other", label: "Something else" },
+      ],
+      total: 4,
+      skip: 0,
+      limit: 10,
+    });
+    const componentArgs = computed(() => {
+      const { gap: _gap, descriptionText: _description, ...rest } = args;
+      return rest;
+    });
+    const tokenStyles = computed(() => (args.gap ? { "--multiple-radiobuttons-gap": args.gap } : {}));
+    return { args, componentArgs, tokenStyles, modelValue, fieldData };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 560px;" :style="tokenStyles">
+      <StorybookComponent v-bind="componentArgs" v-model="modelValue" v-model:field-data="fieldData">
+        <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      </StorybookComponent>
+      <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Buttons = Template.bind({});
+Buttons.args = { isButton: true, optionsLayout: "inline" };
+
+export const Pills = Template.bind({});
+Pills.args = { isButton: true, isPill: true, optionsLayout: "inline" };
+
+export const Block = Template.bind({});
+Block.args = { optionsLayout: "block" };
+
+export const ErrorState = Template.bind({});
+ErrorState.args = { fieldHasError: true };