srcdev-nuxt-components 9.4.9 → 9.4.10

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

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

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

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

package/app/components/05.forms/patterns/stories/MigratedFieldsForm.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { reactive } from "vue";
+import InputTextWithLabel from "../../input-text/variants/InputTextWithLabel.vue";
+import InputRangeDefault from "../../input-range/variants/InputRangeDefault.vue";
+import InputButtonCore from "../../input-button/InputButtonCore.vue";
+import FormField from "../../form-field/FormField.vue";
+import HeroText from "../../../01.atoms/text-blocks/hero-text/HeroText.vue";
+import type { InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface MigratedFieldsFormStoryArgs {
+  inputVariant: InputUiVariant;
+}
+
+// Living reference, not a component of its own — one field per 05.forms component group that
+// currently scores 5/5 in the Component Ledger (.claude/component-ledger/audit.json: tier folder,
+// tests, story, skill doc, CONSUMER-STYLING.md, VS Code snippet). As of 2026-09-21 that's
+// InputTextCore (via InputTextWithLabel) and InputRangeCore (via InputRangeDefault) — every other
+// 05.forms component (select, number, checkbox, radio, toggle-switch, ...) is still mid-migration.
+// Add a field here each time /migrate-component brings another 05.forms component up to 5/5, so
+// this story doubles as a visible migration-progress tracker rather than living only in the
+// ledger's HTML output. No validation wiring (useZodValidation/zod) here — that's the consuming
+// app's concern, this is a visual/composition reference only.
+export default {
+  title: "Patterns/Migrated Fields Form",
+  argTypes: {
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      description: "Applied to every text-like field in the form at once",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    inputVariant: "normal",
+  },
+} as Meta<MigratedFieldsFormStoryArgs>;
+
+const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
+  components: {
+    InputTextWithLabel,
+    InputRangeDefault,
+    InputButtonCore,
+    FormField,
+    HeroText,
+  },
+  setup() {
+    const state = reactive({
+      fullName: "",
+      budget: 50,
+    });
+
+    // Demo-only "validation" — a real consuming app would wire this through something like
+    // useZodValidation instead (see this file's top comment). Kept deliberately simple so the
+    // Continue button has an obvious, reliable way to trigger both fields' error states for
+    // exercising InputTextWithLabel/InputRangeDefault's error UI in Storybook.
+    const errors = reactive({
+      fullName: "",
+      budget: "",
+    });
+
+    const validate = () => {
+      errors.fullName = state.fullName.trim() ? "" : "Full name is required";
+      errors.budget = state.budget >= 100 ? "" : "Budget must be at least £100";
+    };
+
+    const clearErrors = () => {
+      errors.fullName = "";
+      errors.budget = "";
+    };
+
+    return { args, state, errors, validate, clearErrors };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 480px;">
+      <HeroText
+        tag="h2"
+        font-size="heading"
+        :text-content="[{ text: 'Migrated fields', styleClass: 'normal' }]"
+        :style-class-passthrough="['mbe-20']"
+      />
+      <p style="margin: 0 0 2rem 0; color: light-dark(#475569, #94a3b8); font-size: 1.4rem;">
+        One field per 05.forms component that's fully migrated (5/5 on the Component Ledger).
+        Click Continue with an empty name or a budget under £100 to see the error states.
+      </p>
+
+      <form novalidate @submit.prevent="validate">
+        <FormField width="wide" :has-gutter="false">
+          <InputTextWithLabel
+            v-model="state.fullName"
+            type="text"
+            name="fullName"
+            label="Full name"
+            placeholder="eg. Jane Smith"
+            :error-message="errors.fullName"
+            :field-has-error="!!errors.fullName"
+            :required="true"
+            :input-variant="args.inputVariant"
+          />
+        </FormField>
+
+        <FormField width="wide" :has-gutter="false">
+          <InputRangeDefault
+            v-model="state.budget"
+            name="budget"
+            label="Budget (£)"
+            :min="0"
+            :max="500"
+            :step="10"
+            :error-message="errors.budget"
+            :field-has-error="!!errors.budget"
+          >
+            <template #left><span aria-hidden="true">−</span></template>
+            <template #right><span aria-hidden="true">+</span></template>
+          </InputRangeDefault>
+        </FormField>
+
+        <FormField width="wide" :has-gutter="false">
+          <div style="display: flex; gap: 1.2rem;">
+            <InputButtonCore type="submit" variant="primary" button-text="Continue" />
+            <InputButtonCore type="button" variant="tertiary" button-text="Clear errors" @click="clearErrors" />
+          </div>
+        </FormField>
+      </form>
+
+      <div
+        style="margin-top: 2rem; padding: 1.6rem; border-radius: 0.8rem; background: light-dark(#f8fafc, #1e293b); font-family: monospace; font-size: 1.3rem;"
+      >
+        <div>fullName: {{ state.fullName || '""' }}</div>
+        <div>budget: £{{ state.budget }}</div>
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});

package/app/components/05.forms/triple-toggle-switch/CONSUMER-STYLING.md

@@ -45,8 +45,22 @@ the shared `--theme-*` token every other themed component also falls back to. Se
 > themselves are otherwise unchanged (so anything already targeting them by their corrected names
 > keeps working). Making the component genuinely value-agnostic would be a larger, separate change.
 
-Geometry (`--_form-*` sizing locals, `--form-element-*`) is shared/component-internal and untouched
-by this — see `theming-form-geometry-tokens.md` for the shared half.
+## Sizing tokens
+
+| Token | Default | Controls |
+|---|---|---|
+| `--triple-toggle-switch-gap` | `1rem` | Gap between the three option circles |
+| `--triple-toggle-switch-padding` | `0.6rem` | Wrapper padding |
+| `--triple-toggle-switch-option-padding` | `0.5rem` | Padding inside each option circle |
+| `--triple-toggle-switch-icon-size` | `2rem` | Icon font-size inside each option |
+
+Added 2026-09-20 when `DisplayThemeSwitch`'s `small` variant was found reaching directly into this
+component's private `--_form-items-gap`/`--_form-padding`/`--_select-scheme-group-padding`/
+`--_scheme-icon-font-size` locals via selector specificity — a consumer-relevant value (compact
+sizing) hidden behind a private var with no public override hook, the same bug class as CLAUDE.md
+pitfall #20. These four now wrap those locals as real public tokens; the shared geometry from
+`--form-element-*` (border width, outline width) is still shared/component-internal and untouched
+by this — see `theming-form-geometry-tokens.md` for that half.
 
 ---
 

package/app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -115,13 +115,15 @@ onMounted(() => {
       var(--form-element-outline-width)
   );
 
-  --_form-items-gap: 1rem;
-  --_form-padding: 0.6rem;
+  /* Sizing/spacing, publicly overridable — DisplayThemeSwitch's compact "small" styleClassPassthrough
+     variant sets these directly rather than reaching into the --_ locals below. */
+  --_form-items-gap: var(--triple-toggle-switch-gap, 1rem);
+  --_form-padding: var(--triple-toggle-switch-padding, 0.6rem);
 
   --_select-scheme-group-background-color: var(--_marker-surface);
   --_select-scheme-group-background-image: none;
-  --_select-scheme-group-padding: 0.5rem;
-  --_scheme-icon-font-size: 2rem;
+  --_select-scheme-group-padding: var(--triple-toggle-switch-option-padding, 0.5rem);
+  --_scheme-icon-font-size: var(--triple-toggle-switch-icon-size, 2rem);
   /* --_scheme-icon-colour: black; */
 
   /* "system" not "auto" — matches useSettingsStore's actual colourScheme value/CSS class

package/app/types/components/container-glow.d.ts

@@ -0,0 +1,8 @@
+export interface ContainerGlowConfig {
+  proximity?: number
+  spread?: number
+  blur?: number
+  gap?: number
+  vertical?: boolean
+  inactiveOpacity?: number
+}

package/app/types/components/index.ts

@@ -1,6 +1,5 @@
 // Export types from the components directory
 export * from "./semantic-theme.d"
-export * from "./carousel-basic.d"
 export * from "./slider-gallery.d"
 export * from "./canvas-switcher.d"
 export * from "./display-chip.d"
@@ -10,6 +9,7 @@ export * from "./display-toast.d"
 export * from "./display-prompt.d"
 export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
+export * from "./container-glow.d"
 export * from "./hero-text"
 export * from "./navigation-horizontal.d"
 export * from "./social-icons-list.d"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.9",
+  "version": "9.4.10",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -148,6 +148,7 @@
     "zod": "4.4.3"
   },
   "overrides": {
-    "vue-router": "5.2.0"
+    "vue-router": "5.2.0",
+    "h3": "1.15.11"
   }
 }