srcdev-nuxt-components 9.5.3 → 9.5.4

package/app/components/03.organisms/google-reviews/tests/__snapshots__/GoogleReviews.spec.ts.snap

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GoogleReviews > renders correct HTML structure 1`] = `
+"<section class="google-reviews" aria-label="Google reviews">
+  <div class="google-reviews-header">
+    <div class="google-reviews-summary"><span class="google-reviews-summary-rating" aria-hidden="true">4.7</span><span class="google-reviews-stars" style="--_rating: 4.66;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5</span><a href="https://maps.google.com/?cid=1" class="google-reviews-summary-link">128 reviews on Google</a></div>
+  </div>
+  <!--v-if-->
+  <ul class="google-reviews-list" tabindex="0">
+    <li class="google-reviews-item">
+      <article class="google-review-card">
+        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R1</span>
+          <!--v-if--></span><a id="v-0-0-0" href="https://maps.google.com/contrib/1" class="google-review-card-author-name">Reviewer 1</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">1 weeks ago</time>
+        </div>
+        <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 5;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 5 out of 5</span></div>
+        <p class="google-review-card-text">Review text 1</p><a href="https://maps.google.com/review/1" aria-describedby="v-0-0-0" class="google-review-card-link">Read on Google</a>
+      </article>
+    </li>
+    <li class="google-reviews-item">
+      <article class="google-review-card">
+        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R2</span>
+          <!--v-if--></span><a id="v-0-0-1" href="https://maps.google.com/contrib/2" class="google-review-card-author-name">Reviewer 2</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">2 weeks ago</time>
+        </div>
+        <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 4;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4 out of 5</span></div>
+        <p class="google-review-card-text">Review text 2</p><a href="https://maps.google.com/review/2" aria-describedby="v-0-0-1" class="google-review-card-link">Read on Google</a>
+      </article>
+    </li>
+    <li class="google-reviews-item">
+      <article class="google-review-card">
+        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R3</span>
+          <!--v-if--></span><a id="v-0-0-2" href="https://maps.google.com/contrib/3" class="google-review-card-author-name">Reviewer 3</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">3 weeks ago</time>
+        </div>
+        <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 3;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 3 out of 5</span></div>
+        <p class="google-review-card-text">Review text 3</p><a href="https://maps.google.com/review/3" aria-describedby="v-0-0-2" class="google-review-card-link">Read on Google</a>
+      </article>
+    </li>
+  </ul>
+  <div class="google-reviews-footer">
+    <!--v-if-->
+    <p class="google-reviews-attribution">Reviews from Google Maps</p>
+  </div>
+</section>"
+`;

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

@@ -18,7 +18,7 @@ token, same as `InputTextCore`.
 | `--input-number-surface` | `var(--theme-input-surface)` | Wrapper, input, and embedded-button background |
 | `--input-number-surface-hover` | `var(--theme-input-surface-hover)` | Embedded left/right button background on hover |
 | `--input-number-border` | `var(--theme-border)` | Border/divider colour (`normal`/`underlined` variant border, and the divider between the input and an embedded button) |
-| `--input-number-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover (`normal` variant only) |
+| `--input-number-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover over the input or either step button (`normal` variant only) |
 | `--input-number-border-focus` | `var(--theme-border-focus)` | Wrapper outline colour on `:focus-visible` (`normal` variant), and the embedded button's own `:focus-visible` outline |
 | `--input-number-text-color` | `var(--theme-input-text-color-normal)` | Input text colour |
 | `--input-number-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |

package/app/components/05.forms/input-number/InputNumber.vue

@@ -104,13 +104,13 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
 
-      &:has(input:hover) {
+      &:has(input:hover, button:hover) {
         outline: var(--form-element-outline-width-focus) solid
           var(--input-number-border-hover, var(--theme-border-focus));
         outline-offset: var(--form-element-outline-offset-focus);
       }
 
-      &:has(input:focus-visible) {
+      &:has(input:focus-visible, button:focus-visible) {
         outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }

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

@@ -0,0 +1,59 @@
+# InputOtp — Consumer Styling Guide
+
+## Public token API
+
+Colour tokens fall back to the shared `--theme-*` tokens, so leaving them unset keeps the
+component in step with every other themed form control. See `theming-component-token-pattern.md`
+for the two-tier shape.
+
+### Boxes (`InputOtp`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-otp-gap` | `0.8rem` | Space between boxes |
+| `--input-otp-box-inline-size` | `4.4rem` | Preferred box width (boxes shrink below it when the row is too narrow) |
+| `--input-otp-box-block-size` | `5.2rem` | Box height |
+| `--input-otp-font-size` | `2rem` | Digit size |
+| `--input-otp-border-radius` | `var(--form-input-border-radius)` | Box corner radius (`normal` variant) |
+| `--input-otp-surface` | `var(--theme-input-surface)` | Box background |
+| `--input-otp-text-color` | `var(--theme-input-text-color-normal)` | Digit colour |
+| `--input-otp-border` | `var(--theme-border)` | Box border (`normal`) or bottom border (`underlined`) |
+| `--input-otp-border-hover` | `var(--input-otp-border-focus)` | Outline colour on hover (`normal` variant) |
+| `--input-otp-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible`, and the bottom border colour on focus (`underlined`) |
+
+### Field (`InputOtpField`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-otp-field-gap` | `0.8rem` | Space between the boxes and the error strip |
+
+The legend uses `FormFieldset`'s `--form-fieldset-legend-*` tokens (see its CONSUMER-STYLING.md).
+Border/outline widths and transition duration are the shared form geometry tokens
+(`--form-element-border-width`, `--form-element-outline-width-focus`, etc.), see
+`theming-form-geometry-tokens.md`.
+
+Private tokens (not public API): `--_border` and `--_border-focus` on `.input-otp`, which only
+resolve the two public border tokens once for reuse across the variant rules.
+
+## State hooks
+
+| Hook | Where | Meaning |
+|---|---|---|
+| `[data-invalid]` | `.input-otp`, and the `.input-otp-field` fieldset | Error state. Switches the colour ramp to the error colours, so `--theme-border` (and everything defaulting from it) turns red without a separate error token. |
+| `[data-theme]` | `.input-otp`, `.input-otp-field` | The `theme` prop. |
+| `.normal` / `.underlined` | `.input-otp` | The `inputVariant` prop. |
+| `.input-otp-box` | each digit `<input>` | One box. |
+
+## 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
+
+- `InputOtp`: `style-class-passthrough` classes land on the `.input-otp` root (the row of boxes).
+- `InputOtpField`: `style-class-passthrough` classes land on the `.input-otp-field` fieldset; the
+  inner `InputOtp` gets none.

package/app/components/05.forms/input-otp/InputOtp.vue

@@ -0,0 +1,254 @@
+<template>
+  <div
+    class="input-otp"
+    :class="[inputVariant, elementClasses]"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :role="groupLabel ? 'group' : undefined"
+    :aria-label="groupLabel || undefined"
+  >
+    <template v-for="(digit, index) in digits" :key="index">
+      <label class="sr-only" :for="boxId(index)">{{ boxLabel(index) }}</label>
+      <input
+        :id="boxId(index)"
+        :ref="(el) => setInputRef(el, index)"
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        :autocomplete="index === 0 ? 'one-time-code' : 'off'"
+        class="input-otp-box"
+        :required
+        :value="digit"
+        :aria-invalid="fieldHasError ? 'true' : undefined"
+        :aria-describedby="ariaDescribedby || undefined"
+        @input="onInput(index, $event)"
+        @keydown="onKeydown(index, $event)"
+        @paste="onPaste(index, $event)"
+        @focus="onFocus"
+      />
+    </template>
+    <input v-if="name" type="hidden" :name :value="modelValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name?: string;
+  length?: number;
+  autofocus?: boolean;
+  required?: boolean;
+  groupLabel?: string;
+  digitLabel?: string;
+  fieldHasError?: boolean;
+  ariaDescribedby?: string;
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: "",
+  length: 6,
+  autofocus: false,
+  required: false,
+  groupLabel: "",
+  digitLabel: "Digit {index} of {length}",
+  fieldHasError: false,
+  ariaDescribedby: "",
+  theme: "default",
+  inputVariant: "normal",
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{ complete: [code: string] }>();
+
+const modelValue = defineModel<string>({ required: true });
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const boxCount = computed(() => Math.min(12, Math.max(1, Math.floor(Number(props.length) || 1))));
+
+const slotsFromModel = () =>
+  (modelValue.value ?? "")
+    .padEnd(boxCount.value, " ")
+    .slice(0, boxCount.value)
+    .split("")
+    .map((char) => (/\d/.test(char) ? char : " "));
+
+const digits = computed(() => slotsFromModel().map((char) => (char === " " ? "" : char)));
+
+const boxId = (index: number) => `${props.id}-${index}`;
+const boxLabel = (index: number) =>
+  props.digitLabel.replace("{index}", String(index + 1)).replace("{length}", String(boxCount.value));
+
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  inputRefs.value[index] = el as HTMLInputElement | null;
+};
+
+const focusBox = (index: number) => {
+  const clamped = Math.min(boxCount.value - 1, Math.max(0, index));
+  inputRefs.value[clamped]?.focus();
+};
+
+onMounted(() => {
+  if (props.autofocus) nextTick(() => focusBox(0));
+});
+
+watch(
+  () => props.fieldHasError,
+  (hasError) => {
+    if (hasError) nextTick(() => focusBox(0));
+  }
+);
+
+function commit(next: string[]) {
+  const code = next.join("").trimEnd();
+  modelValue.value = code;
+  if (next.every((char) => char !== " ")) emit("complete", code);
+}
+
+function fillFrom(index: number, incoming: string) {
+  const next = slotsFromModel();
+  const chars = incoming.slice(0, boxCount.value - index).split("");
+  chars.forEach((char, offset) => {
+    next[index + offset] = char;
+  });
+  commit(next);
+  return index + chars.length - 1;
+}
+
+function onInput(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  const previous = digits.value[index];
+  let entered = target.value.replace(/\D/g, "");
+
+  if (previous && entered.length === 2) {
+    if (entered.startsWith(previous)) entered = entered.slice(1);
+    else if (entered.endsWith(previous)) entered = entered.slice(0, 1);
+  }
+
+  if (entered.length > 1) {
+    const lastFilled = fillFrom(index, entered);
+    target.value = digits.value[index] ?? "";
+    focusBox(lastFilled);
+    return;
+  }
+
+  target.value = entered;
+  const next = slotsFromModel();
+  next[index] = entered || " ";
+  commit(next);
+
+  if (entered && index < boxCount.value - 1) focusBox(index + 1);
+}
+
+function onKeydown(index: number, event: KeyboardEvent) {
+  const target = event.target as HTMLInputElement;
+
+  switch (event.key) {
+    case "Enter":
+      event.preventDefault();
+      target.form?.requestSubmit();
+      return;
+    case "Backspace":
+      if (!target.value && index > 0) {
+        event.preventDefault();
+        const next = slotsFromModel();
+        next[index - 1] = " ";
+        commit(next);
+        focusBox(index - 1);
+      }
+      return;
+    case "ArrowLeft":
+      event.preventDefault();
+      focusBox(index - 1);
+      return;
+    case "ArrowRight":
+      event.preventDefault();
+      focusBox(index + 1);
+      return;
+    case "Home":
+      event.preventDefault();
+      focusBox(0);
+      return;
+    case "End":
+      event.preventDefault();
+      focusBox(boxCount.value - 1);
+      return;
+  }
+}
+
+function onPaste(index: number, event: ClipboardEvent) {
+  const pasted = (event.clipboardData?.getData("text") ?? "").replace(/\D/g, "");
+  event.preventDefault();
+  if (!pasted) return;
+
+  const start = pasted.length >= boxCount.value ? 0 : index;
+  focusBox(fillFrom(start, pasted));
+}
+
+function onFocus(event: FocusEvent) {
+  (event.target as HTMLInputElement).select();
+}
+</script>
+
+<style lang="css">
+@layer components {
+  .input-otp {
+    --_border: var(--input-otp-border, var(--theme-border));
+    --_border-focus: var(--input-otp-border-focus, var(--theme-border-focus));
+
+    display: flex;
+    gap: var(--input-otp-gap, 0.8rem);
+    max-inline-size: 100%;
+
+    .input-otp-box {
+      all: unset;
+      box-sizing: border-box;
+      flex: 0 1 var(--input-otp-box-inline-size, 4.4rem);
+      min-inline-size: 0;
+      block-size: var(--input-otp-box-block-size, 5.2rem);
+      text-align: center;
+      font-family: var(--font-family);
+      font-size: var(--input-otp-font-size, 2rem);
+      color: var(--input-otp-text-color, var(--theme-input-text-color-normal));
+      background-color: var(--input-otp-surface, var(--theme-input-surface));
+      transition: outline-color var(--theme-form-transition-duration) ease-in-out;
+    }
+
+    &.normal .input-otp-box {
+      border: var(--form-element-border-width) solid var(--_border);
+      border-radius: var(--input-otp-border-radius, var(--form-input-border-radius));
+      outline: var(--form-element-outline-width) solid transparent;
+
+      &:hover {
+        outline: var(--form-element-outline-width-focus) solid var(--input-otp-border-hover, var(--_border-focus));
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
+    }
+
+    &.underlined .input-otp-box {
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
+
+      &:focus-visible {
+        border-bottom-color: var(--_border-focus);
+      }
+    }
+  }
+}
+</style>

package/app/components/05.forms/input-otp/InputOtpField.vue

@@ -0,0 +1,106 @@
+<template>
+  <FormFieldset
+    :id="`${id}-fieldset`"
+    :name
+    :legend="label"
+    :field-has-error
+    :required
+    :style-class-passthrough="['input-otp-field', elementClasses]"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-theme="theme"
+  >
+    <template #content>
+      <InputDescription
+        :description-id
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-otp-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <InputOtp
+        :id
+        v-model="modelValue"
+        :name
+        :length
+        :autofocus
+        :required
+        :digit-label
+        :field-has-error
+        :theme
+        :input-variant
+        :aria-describedby="ariaDescribedby() ?? ''"
+        @complete="emit('complete', $event)"
+      />
+
+      <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" :input-variant />
+    </template>
+  </FormFieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  name: string;
+  label: string;
+  length?: number;
+  autofocus?: boolean;
+  required?: boolean;
+  digitLabel?: string;
+  errorMessage?: object | string;
+  fieldHasError?: boolean;
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  length: 6,
+  autofocus: false,
+  required: false,
+  digitLabel: "Digit {index} of {length}",
+  errorMessage: "",
+  fieldHasError: false,
+  theme: "default",
+  inputVariant: "normal",
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{ complete: [code: string] }>();
+
+const modelValue = defineModel<string>({ required: true });
+
+const slots = useSlots();
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-otp-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    .input-otp {
+      margin-block-end: var(--input-otp-field-gap, 0.8rem);
+    }
+  }
+}
+</style>

package/app/components/05.forms/input-otp/stories/InputOtp.stories.ts

@@ -0,0 +1,100 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputOtp from "../InputOtp.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface StoryArgs {
+  modelValue: string;
+  id: string;
+  name: string;
+  length: number;
+  autofocus: boolean;
+  required: boolean;
+  groupLabel: string;
+  digitLabel: string;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Otp/InputOtp",
+  component: InputOtp,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", description: "Name of the hidden input holding the full code", table: { category: "Basic" } },
+    length: { control: { type: "number", min: 1, max: 12 }, table: { category: "Basic" } },
+    autofocus: { control: "boolean", description: "Focus the first box on mount (applies on remount)", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    groupLabel: { control: "text", description: "Names the group when used without InputOtpField", table: { category: "Accessibility" } },
+    digitLabel: { control: "text", description: "Per-box label; {index} and {length} are replaced", table: { category: "Accessibility" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "underlined"],
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    modelValue: "",
+    id: "otp",
+    name: "code",
+    length: 6,
+    autofocus: false,
+    required: false,
+    groupLabel: "Verification code",
+    digitLabel: "Digit {index} of {length}",
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Bare one-time-code control: a row of single-digit boxes. Most consumers want `InputOtpField`, which adds the legend, description and error.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputOtp },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, ...rest } = args;
+      return rest;
+    });
+    const lastComplete = ref("");
+    return { args, componentArgs, lastComplete };
+  },
+  template: `
+    <div style="margin: 3.6rem;">
+      <InputOtp v-model="args.modelValue" v-bind="componentArgs" @complete="lastComplete = $event" />
+      <p style="margin-block-start: 1.6rem;">Model: "{{ args.modelValue }}" · last complete: "{{ lastComplete }}"</p>
+    </div>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const Prefilled: Story = {
+  args: { modelValue: "012345" },
+  render,
+  parameters: { docs: { description: { story: "A leading zero is kept: the model is a string, never a number." } } },
+};
+
+export const FourDigits: Story = { args: { length: 4 }, render };
+
+export const WithError: Story = { args: { fieldHasError: true, modelValue: "123" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };