srcdev-nuxt-components 9.5.2 → 9.5.4

package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts

@@ -15,7 +15,9 @@ type StoryArgs = {
   buttonIcon?: string;
   styleClassPassthrough?: string | string[];
   /** Story-only — not a real ServicesCardGrid prop, see useStorySetup below. */
-  lineClamp?: number;
+  lineClamp?: 1 | 2 | 3 | 4 | 5;
+  /** Story-only — sets --services-card-grid-column-min-width on the wrapper, see useStorySetup below. */
+  cardMinWidth?: "200px" | "250px" | "300px" | "350px" | "400px";
 };
 
 const meta: Meta<StoryArgs> = {
@@ -52,10 +54,17 @@ const meta: Meta<StoryArgs> = {
       description: "Additional CSS classes applied to the root element",
     },
     lineClamp: {
-      control: { type: "number", min: 1, max: 10, step: 1 },
+      control: { type: "inline-radio" },
+      options: [1, 2, 3, 4, 5],
       description:
         "Story-only control — sets ServicesCard's --description-line-clamp custom property on the grid wrapper (not a real component prop) to demo description clamping across cards",
     },
+    cardMinWidth: {
+      control: { type: "inline-radio" },
+      options: ["200px", "250px", "300px", "350px", "400px"],
+      description:
+        "Story-only control — sets --services-card-grid-column-min-width on the grid wrapper (not a real component prop). Cards never go narrower than this; auto-fit then stretches each column to share the leftover space",
+    },
   },
   args: {
     tag: "div",
@@ -66,6 +75,7 @@ const meta: Meta<StoryArgs> = {
     buttonIcon: "mdi:arrow-right",
     styleClassPassthrough: [],
     lineClamp: 3,
+    cardMinWidth: "250px",
   },
   parameters: {
     backgrounds: {
@@ -169,31 +179,56 @@ const lineClampServices: Service[] = [
   ),
 ];
 
+// Twelve cards (divides evenly into 2, 3, 4 and 6 columns) to demo how cardMinWidth
+// changes the column count as the canvas resizes.
+const cardWidthServices: Service[] = [
+  ...sampleServices,
+  ...lineClampServices,
+  makeService("silk-press", "Silk Press", "Sleek, glossy straightening", "https://picsum.photos/seed/width-1/600/800"),
+  makeService("box-braids", "Box Braids", "Classic protective style", "https://picsum.photos/seed/width-2/600/800"),
+  makeService("scalp-treatment", "Scalp Treatment", "Healthy hair starts here", "https://picsum.photos/seed/width-3/600/800"),
+];
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
+// Hides the story-only lineClamp/cardMinWidth controls on stories whose fixtures can't
+// show them (3 or fewer cards never wrap under auto-fit, and two-line descriptions
+// never clamp) — use the Description Line Clamp and Card Width stories for those.
+const hideDemoControls = {
+  lineClamp: { table: { disable: true } },
+  cardMinWidth: { table: { disable: true } },
+};
+
 /**
- * lineClamp is a story-only control (not a real ServicesCardGrid prop) that sets
- * --description-line-clamp on the grid wrapper — the global custom property each
- * ServicesCard's .description reads for its -webkit-line-clamp value.
+ * lineClamp and cardMinWidth are story-only controls (not real ServicesCardGrid props).
+ * They set --description-line-clamp (read by each ServicesCard's .description) and
+ * --services-card-grid-column-min-width (the grid's minmax() floor) on a wrapper div,
+ * and are stripped from the args bound to the component so they don't leak as attributes.
  */
 function useStorySetup(args: StoryArgs) {
-  const clampStyle = computed(() => ({
+  const wrapperStyle = computed(() => ({
     "--description-line-clamp": String(args.lineClamp ?? 3),
+    "--services-card-grid-column-min-width": args.cardMinWidth ?? "250px",
   }));
   const componentArgs = computed(() => {
-    const { lineClamp: _lineClamp, ...rest } = args;
+    const { lineClamp: _lineClamp, cardMinWidth: _cardMinWidth, ...rest } = args;
     return rest;
   });
-  return { clampStyle, componentArgs };
+  return { wrapperStyle, componentArgs };
 }
 
 export const Default: Story = {
+  argTypes: hideDemoControls,
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -205,6 +240,7 @@ export const Default: Story = {
 };
 
 export const CustomButtonText: Story = {
+  argTypes: hideDemoControls,
   name: "Custom Button Text",
   args: {
     hrefBase: "/services/",
@@ -213,9 +249,13 @@ export const CustomButtonText: Story = {
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -227,6 +267,7 @@ export const CustomButtonText: Story = {
 };
 
 export const ConfigOverrides: Story = {
+  argTypes: hideDemoControls,
   name: "Config Overrides",
   args: {
     eyebrowConfig: { tag: "p", fontSize: "small" },
@@ -235,9 +276,13 @@ export const ConfigOverrides: Story = {
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -250,13 +295,18 @@ export const ConfigOverrides: Story = {
 };
 
 export const SingleCard: Story = {
+  argTypes: hideDemoControls,
   name: "Single Card",
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="[sampleServices[0]]" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="[sampleServices[0]]" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -268,13 +318,18 @@ export const SingleCard: Story = {
 };
 
 export const EmptyData: Story = {
+  argTypes: hideDemoControls,
   name: "Empty Data",
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args };
+      return { ...useStorySetup(args) };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="[]" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="[]" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -296,7 +351,7 @@ export const DescriptionLineClamp: Story = {
       return { ...useStorySetup(args), lineClampServices };
     },
     template: `
-      <div :style="clampStyle">
+      <div :style="wrapperStyle">
         <ServicesCardGrid v-bind="componentArgs" :services-data="lineClampServices" />
       </div>
     `,
@@ -310,3 +365,29 @@ export const DescriptionLineClamp: Story = {
     },
   },
 };
+
+export const CardWidth: Story = {
+  name: "Card Width",
+  args: {
+    cardMinWidth: "300px",
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { ...useStorySetup(args), cardWidthServices };
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="cardWidthServices" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Twelve cards with the cardMinWidth control driving --services-card-grid-column-min-width. The value is a floor, not a fixed width: auto-fit fits as many columns as that minimum allows, then stretches them to fill the row. Change the control or resize the canvas to see the column count change.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -3,7 +3,10 @@
 exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
 "<div class="services-card-grid">
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Locs Installation</div>
       <h2 class="hero-text heading axis-horizontal">
@@ -23,7 +26,10 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
       <h2 class="hero-text heading axis-horizontal">
@@ -43,7 +49,10 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
       <h2 class="hero-text heading axis-horizontal">

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>