srcdev-nuxt-components 9.5.3 → 9.5.5

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

@@ -1,11 +1,15 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import InputTextWithLabel from "../../input-text/InputTextWithLabel.vue";
+import InputPasswordWithLabel from "../../input-text/InputPasswordWithLabel.vue";
+import InputTextAsNumberWithLabel from "../../input-text/InputTextAsNumberWithLabel.vue";
 import InputRangeDefault from "../../input-range/InputRangeDefault.vue";
 import InputNumberField from "../../input-number/InputNumberField.vue";
+import InputOtpField from "../../input-otp/InputOtpField.vue";
 import InputTextareaWithLabel from "../../input-textarea/InputTextareaWithLabel.vue";
 import InputSelectWithLabel from "../../input-select/InputSelectWithLabel.vue";
 import ToggleSwitchWithLabel from "../../toggle-switch/ToggleSwitchWithLabel.vue";
+import ToggleSwitchWithLabelInline from "../../toggle-switch/ToggleSwitchWithLabelInline.vue";
 import MultipleCheckboxes from "../../input-checkbox/MultipleCheckboxes.vue";
 import SingleCheckbox from "../../input-checkbox/SingleCheckbox.vue";
 import MultipleRadiobuttons from "../../input-radio/MultipleRadiobuttons.vue";
@@ -14,35 +18,31 @@ import InputButton from "../../input-button/InputButton.vue";
 import FormField from "../../form-field/FormField.vue";
 import FormWrapper from "../../form-wrapper/FormWrapper.vue";
 import HeroText from "../../../01.atoms/text-blocks/hero-text/HeroText.vue";
-import type { InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms.d";
+import type { InputUiVariant, IFormMultipleOptions, InputTypesText, InputMode } 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-27 that's
-// InputTextCore (via InputTextWithLabel), InputRangeCore (via InputRangeDefault), InputNumber
-// (via InputNumberField), InputTextareaCore (via InputTextareaWithLabel), InputSelectCore
-// (via InputSelectWithLabel), ToggleSwitchCore (via ToggleSwitchWithLabel), and input-checkbox
-// (MultipleCheckboxes + SingleCheckbox), plus input-radio (MultipleRadiobuttons, 5/5 as of
-// 2026-09-27). FormField (5/5 as of 2026-09-26) is the layout wrapper
-// around every field below, and FormFieldset (5/5 as of 2026-09-26) is rendered inside the
-// checkbox fields, FormWrapper (5/5 as of 2026-09-26) wraps the form itself, and InputError
-// (5/5 as of 2026-09-26) is the error strip every field below renders, so none of the four
-// gets a field of its own. InputDescription (5/5 as of 2026-09-26) is the help text under the
-// "Full name" field, rendered through InputTextWithLabel's descriptionText slot. InputLabel (5/5 as
-// of 2026-09-26) is the <label> every labelled field below renders, so it has no field of its own
-// either. The input-checkbox-radio family (InputCheckboxRadio/Field/Button, 5/5 as of 2026-09-27)
-// renders every checkbox and radio below, so it has no field of its own. TripleToggleSwitch (5/5 as of
-// 2026-09-27) is the "Theme preference" field; it has no Field wrapper or error state of its own,
-// so it sits under a plain caption and always has a value. Every other 05.forms component
-// (radio, ...) 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.
+// Living reference, not a component of its own: every 05.forms component that scores 5/5 in the
+// Component Ledger (.claude/component-ledger/audit.json) appears here, either as its own field or
+// rendered inside one. As of 2026-10-04 every 05.forms component is 5/5, so all of them are in:
+// - Own field: InputTextWithLabel (InputTextCore; plus one per type/inputmode pair for checking
+//   on-device keyboards), InputPasswordWithLabel,
+//   InputTextAsNumberWithLabel, InputRangeDefault (InputRangeCore), InputNumberField
+//   (InputNumber), InputOtpField (InputOtp), InputTextareaWithLabel (InputTextareaCore), InputSelectWithLabel
+//   (InputSelectCore), ToggleSwitchWithLabel and ToggleSwitchWithLabelInline (ToggleSwitchCore),
+//   MultipleCheckboxes, SingleCheckbox, MultipleRadiobuttons, TripleToggleSwitch ("Theme
+//   preference": no Field wrapper or error state, so it sits under a plain caption).
+// - Rendered inside other fields: FormWrapper (wraps the form), FormField (wraps every field),
+//   FormFieldset (checkbox/radio groups), InputLabel, InputDescription (the "Full name" and
+//   "Password" help text), InputError (every error strip), the input-checkbox-radio family
+//   (every checkbox and radio), InputButton (Continue/Clear errors, and the inline buttons inside
+//   the password and number fields), PendingEffect (Continue's simulated 1.5s submit).
+// Add a field here each time a new 05.forms component reaches 5/5, so this story stays a visible
+// completeness check 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: {
@@ -61,11 +61,15 @@ export default {
 const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
   components: {
     InputTextWithLabel,
+    InputPasswordWithLabel,
+    InputTextAsNumberWithLabel,
     InputRangeDefault,
     InputNumberField,
+    InputOtpField,
     InputTextareaWithLabel,
     InputSelectWithLabel,
     ToggleSwitchWithLabel,
+    ToggleSwitchWithLabelInline,
     MultipleCheckboxes,
     SingleCheckbox,
     MultipleRadiobuttons,
@@ -78,17 +82,36 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
   setup() {
     const state = reactive({
       fullName: "",
+      password: "",
+      guests: 2 as number | undefined,
       budget: 50,
       quantity: 1,
+      code: "",
       notes: "",
       colour: "",
       subscribe: false,
+      reminders: true,
       services: [] as string[],
       contactMethod: "",
       themePreference: "system",
       terms: false,
     });
 
+    // One InputTextWithLabel per type/inputmode pair, for checking each on-screen keyboard on a real device.
+    const textVariants: { name: string; label: string; type: InputTypesText; inputmode: InputMode; placeholder: string }[] = [
+      { name: "variantEmail", label: "Email", type: "email", inputmode: "email", placeholder: "eg. jane@example.com" },
+      { name: "variantTel", label: "Phone", type: "tel", inputmode: "tel", placeholder: "eg. 07700 900123" },
+      { name: "variantUrl", label: "Website", type: "url", inputmode: "url", placeholder: "eg. https://example.com" },
+      { name: "variantSearch", label: "Search", type: "text", inputmode: "search", placeholder: "Search treatments" },
+      { name: "variantNumber", label: "Age", type: "number", inputmode: "numeric", placeholder: "eg. 34" },
+      { name: "variantNumeric", label: "One-time code", type: "text", inputmode: "numeric", placeholder: "eg. 123456" },
+      { name: "variantDecimal", label: "Hair length (cm)", type: "text", inputmode: "decimal", placeholder: "eg. 12.5" },
+      { name: "variantDate", label: "Appointment date", type: "date", inputmode: "text", placeholder: "" },
+    ];
+    const textVariantValues = reactive<Record<string, string>>(
+      Object.fromEntries(textVariants.map((variant) => [variant.name, ""]))
+    );
+
     const serviceOptions = reactive<IFormMultipleOptions>({
       data: [
         { id: "1", name: "services", value: "cut", label: "Cut" },
@@ -142,12 +165,14 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
     // 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 each field's error state for
-    // exercising InputTextWithLabel/InputRangeDefault/InputNumberField/InputTextareaWithLabel/
-    // InputSelectWithLabel/MultipleCheckboxes/MultipleRadiobuttons/SingleCheckbox's error UI in Storybook.
+    // exercising every field's error UI in Storybook.
     const errors = reactive({
       fullName: "",
+      password: "",
+      guests: "",
       budget: "",
       quantity: "",
+      code: "",
       notes: "",
       colour: "",
       services: "",
@@ -157,8 +182,11 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
 
     const validate = () => {
       errors.fullName = state.fullName.trim() ? "" : "Full name is required";
+      errors.password = state.password.length >= 8 ? "" : "Password must be at least 8 characters";
+      errors.guests = (state.guests ?? 0) >= 1 ? "" : "At least 1 guest is required";
       errors.budget = state.budget >= 100 ? "" : "Budget must be at least £100";
       errors.quantity = state.quantity >= 1 ? "" : "Quantity must be at least 1";
+      errors.code = /^\d{6}$/.test(state.code) ? "" : "Enter the 6-digit code";
       errors.notes = state.notes.trim() ? "" : "Notes are required";
       errors.colour = state.colour ? "" : "Please choose a colour";
       errors.services = state.services.length ? "" : "Choose at least one service";
@@ -166,10 +194,23 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       errors.terms = state.terms ? "" : "You must agree to the terms";
     };
 
+    // Simulated round trip so the Continue button shows PendingEffect before the errors land.
+    const isSubmitting = ref(false);
+    const submit = () => {
+      isSubmitting.value = true;
+      setTimeout(() => {
+        isSubmitting.value = false;
+        validate();
+      }, 1500);
+    };
+
     const clearErrors = () => {
       errors.fullName = "";
+      errors.password = "";
+      errors.guests = "";
       errors.budget = "";
       errors.quantity = "";
+      errors.code = "";
       errors.notes = "";
       errors.colour = "";
       errors.services = "";
@@ -181,11 +222,14 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       args,
       state,
       errors,
-      validate,
+      submit,
+      isSubmitting,
       clearErrors,
       colourOptions,
       serviceOptions,
       contactMethodOptions,
+      textVariants,
+      textVariantValues,
       themeOptions,
     };
   },
@@ -198,13 +242,14 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
         :style-class-passthrough="['mbe-20']"
       />
       <p style="margin: 0 0 2rem 0; color: #475569; 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, a budget under £100, a quantity under 1, empty notes,
-        no colour or no contact method chosen to see the error states.
+        Every 05.forms component that is fully migrated (5/5 on the Component Ledger).
+        Click Continue to see the pending state, then the error states for any empty or
+        out-of-range field: name, password under 8 characters, no guests, budget under £100,
+        quantity under 1, verification code, notes, colour, services, contact method or terms.
       </p>
 
       <FormWrapper width="medium">
-        <form novalidate @submit.prevent="validate">
+        <form novalidate @submit.prevent="submit">
           <FormField width="wide" :has-gutter="false">
             <InputTextWithLabel
               v-model="state.fullName"
@@ -221,6 +266,35 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
             </InputTextWithLabel>
           </FormField>
 
+          <FormField width="wide" :has-gutter="false">
+            <InputPasswordWithLabel
+              v-model="state.password"
+              name="password"
+              label="Password"
+              :error-message="errors.password"
+              :field-has-error="!!errors.password"
+              :required="true"
+              :input-variant="args.inputVariant"
+            >
+              <template #descriptionText>At least 8 characters</template>
+            </InputPasswordWithLabel>
+          </FormField>
+
+          <FormField v-for="variant in textVariants" :key="variant.name" width="wide" :has-gutter="false">
+            <InputTextWithLabel
+              v-model="textVariantValues[variant.name]"
+              :type="variant.type"
+              :inputmode="variant.inputmode"
+              :name="variant.name"
+              :label="variant.label"
+              :placeholder="variant.placeholder"
+              error-message=""
+              :input-variant="args.inputVariant"
+            >
+              <template #descriptionText>type="{{ variant.type }}", inputmode="{{ variant.inputmode }}"</template>
+            </InputTextWithLabel>
+          </FormField>
+
           <FormField width="wide" :has-gutter="false">
             <InputRangeDefault
               v-model="state.budget"
@@ -253,6 +327,35 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
             </InputNumberField>
           </FormField>
 
+          <FormField width="wide" :has-gutter="false">
+            <InputOtpField
+              v-model="state.code"
+              name="code"
+              label="Verification code"
+              :error-message="errors.code"
+              :field-has-error="!!errors.code"
+              :input-variant="args.inputVariant"
+            >
+              <template #descriptionText>Enter the 6-digit code we sent to your email</template>
+            </InputOtpField>
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <InputTextAsNumberWithLabel
+              v-model="state.guests"
+              name="guests"
+              label="Guests"
+              :min="1"
+              :max="8"
+              :error-message="errors.guests"
+              :field-has-error="!!errors.guests"
+              :input-variant="args.inputVariant"
+            >
+              <template #left><span aria-hidden="true">−</span></template>
+              <template #right><span aria-hidden="true">+</span></template>
+            </InputTextAsNumberWithLabel>
+          </FormField>
+
           <FormField width="wide" :has-gutter="false">
             <InputTextareaWithLabel
               v-model="state.notes"
@@ -282,6 +385,10 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
             <ToggleSwitchWithLabel v-model="state.subscribe" name="subscribe" label="Subscribe to updates" />
           </FormField>
 
+          <FormField width="wide" :has-gutter="false">
+            <ToggleSwitchWithLabelInline v-model="state.reminders" name="reminders" label="Email me appointment reminders" />
+          </FormField>
+
           <FormField width="wide" :has-gutter="false">
             <MultipleCheckboxes
               v-model="state.services"
@@ -337,7 +444,14 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
 
           <FormField width="wide" :has-gutter="false">
             <div style="display: flex; gap: 1.2rem;">
-              <InputButton type="submit" variant="primary" button-text="Continue" />
+              <InputButton
+                type="submit"
+                variant="primary"
+                button-text="Continue"
+                :has-pending-effect="isSubmitting"
+                :is-pending="isSubmitting"
+                :readonly="isSubmitting"
+              />
               <InputButton type="button" variant="tertiary" button-text="Clear errors" @click="clearErrors" />
             </div>
           </FormField>
@@ -348,11 +462,15 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
         style="margin-top: 2rem; padding: 1.6rem; border-radius: 0.8rem; background: #f8fafc; font-family: monospace; font-size: 1.3rem;"
       >
         <div>fullName: {{ state.fullName || '""' }}</div>
+        <div>password: {{ state.password ? "•".repeat(state.password.length) : '""' }}</div>
+        <div v-for="variant in textVariants" :key="variant.name">{{ variant.name }}: {{ textVariantValues[variant.name] || '""' }}</div>
+        <div>guests: {{ state.guests ?? "undefined" }}</div>
         <div>budget: £{{ state.budget }}</div>
         <div>quantity: {{ state.quantity }}</div>
         <div>notes: {{ state.notes || '""' }}</div>
         <div>colour: {{ state.colour || '""' }}</div>
         <div>subscribe: {{ state.subscribe }}</div>
+        <div>reminders: {{ state.reminders }}</div>
         <div>services: {{ JSON.stringify(state.services) }}</div>
         <div>contactMethod: {{ state.contactMethod || '""' }}</div>
         <div>themePreference: {{ state.themePreference }}</div>

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

@@ -186,10 +186,9 @@ onMounted(() => {
         position: relative;
 
         .option-group {
-          aspect-ratio: 1;
           display: grid;
           grid-template-areas: "icon-stack";
-          place-content: center;
+          place-items: center;
           background: transparent;
           border: var(--form-element-border-width) solid var(--triple-toggle-switch-option-border, #00000025);
           outline: var(--form-element-outline-width) solid transparent;
@@ -214,10 +213,18 @@ onMounted(() => {
             grid-area: icon-stack;
             display: block;
             font-size: var(--_scheme-icon-font-size);
+            width: 1em;
+            height: 1em;
             color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
+            transition: color calc(v-bind(stepAnimationDuration) / 2) ease-in-out;
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
+              transition-delay: calc(v-bind(stepAnimationDuration) / 2);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
             }
 
             &:hover {
@@ -227,9 +234,10 @@ onMounted(() => {
 
           .option-input {
             grid-area: icon-stack;
+            appearance: none;
             opacity: 0;
-            aspect-ratio: 1;
             width: var(--_scheme-icon-font-size);
+            height: var(--_scheme-icon-font-size);
 
             &:hover {
               cursor: pointer;

package/app/composables/useGoogleReviews.ts

@@ -0,0 +1,4 @@
+import type { GoogleReviewsData } from "~/types/components";
+
+export const useGoogleReviews = () =>
+  useFetch<GoogleReviewsData>("/api/google-reviews", { key: "srcdev-google-reviews" });

package/app/types/components/google-reviews.d.ts

@@ -0,0 +1,18 @@
+export interface GoogleReview {
+  authorName: string;
+  authorUri?: string;
+  authorPhotoUri?: string;
+  rating: number;
+  text: string;
+  relativeTime: string;
+  publishTime: string;
+  reviewUri?: string;
+}
+
+export interface GoogleReviewsData {
+  placeName: string;
+  rating: number;
+  totalReviews: number;
+  mapsUri: string;
+  reviews: GoogleReview[];
+}

package/app/types/components/index.ts

@@ -26,3 +26,4 @@ export * from "./opening-hours.d"
 export * from "./samaritan-prompt.d"
 export * from "./profile-section.d"
 export * from "./services-card.d"
+export * from "./google-reviews.d"

package/nuxt.config.ts

@@ -19,6 +19,13 @@ export default defineNuxtConfig({
     resendApiKey: "", // NUXT_RESEND_API_KEY
     contactEmailTo: "", // NUXT_CONTACT_EMAIL_TO   — inbox that receives enquiries
     contactEmailFrom: "", // NUXT_CONTACT_EMAIL_FROM — must be a verified Resend domain
+    // Used by server/api/google-reviews.get.ts (GoogleReviews component)
+    googleReviews: {
+      apiKey: "", // NUXT_GOOGLE_REVIEWS_API_KEY — Places API (New) key
+      placeId: "", // NUXT_GOOGLE_REVIEWS_PLACE_ID
+      languageCode: "", // NUXT_GOOGLE_REVIEWS_LANGUAGE_CODE — optional, e.g. en-GB
+      cacheMaxAge: 3600, // NUXT_GOOGLE_REVIEWS_CACHE_MAX_AGE — seconds
+    },
     public: {
       whatsappNumber: "", // NUXT_PUBLIC_WHATSAPP_NUMBER — in international format, no + or spaces, e.g. 447700900000
       // Consumer apps that don't support dark/light mode can opt out entirely:
@@ -127,15 +134,8 @@ export default defineNuxtConfig({
     // In Storybook, use 'none' provider so images render as plain /images/... paths
     // (avoids /_vercel/image which has no source images in storybook-static/)
     provider: process.env.STORYBOOK ? "none" : undefined,
-  },
-  nitro: {
-    externals: {
-      // Nitro's dependency tracer only copies vue's CJS build but Node.js 22 (ESM)
-      // resolves the "import"+"node" export condition → ./index.mjs, which doesn't exist
-      // in the output. Inlining forces Nitro/Rollup to bundle Vue directly, avoiding the
-      // runtime resolution entirely.
-      inline: ["vue", "@vue/runtime-core", "@vue/runtime-dom", "@vue/reactivity", "@vue/shared", "@vue/server-renderer"],
-    },
+    // GoogleReviews reviewer photos
+    domains: ["lh3.googleusercontent.com"],
   },
   vite: {
     optimizeDeps: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.5.3",
+  "version": "9.5.5",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -89,7 +89,7 @@
     }
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.2",
+    "@chromatic-com/storybook": "5.4.0",
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.5",
@@ -103,21 +103,22 @@
     "@nuxt/eslint": "1.17.0",
     "@nuxt/schema": "4.4.6",
     "@nuxt/test-utils": "4.1.0",
-    "@nuxtjs/storybook": "9.1.0-29374011.dab79ae",
+    "@nuxtjs/storybook": "10.0.0",
     "@playwright/test": "1.62.1",
-    "@storybook/addon-a11y": "10.0.7",
-    "@storybook/addon-docs": "10.0.7",
-    "@storybook/builder-vite": "10.0.7",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-mcp": "10.6.1",
+    "@storybook/builder-vite": "10.6.1",
     "@vue/test-utils": "2.4.11",
     "@vueuse/core": "14.4.0",
     "eslint": "10.8.1",
-    "eslint-plugin-storybook": "10.0.7",
+    "eslint-plugin-storybook": "10.6.1",
     "happy-dom": "20.11.2",
     "nuxt-qrcode": "0.4.10",
     "oxc-parser": "0.131.0",
     "patch-package": "8.0.1",
     "release-it": "21.0.2",
-    "storybook": "10.0.7",
+    "storybook": "10.6.1",
     "typescript": "5.9.3",
     "vitest": "4.1.11",
     "vue-router": "5.2.0",