srcdev-nuxt-components 9.4.10 → 9.4.12

package/app/components/03.organisms/image-galleries/carousel-flip/stories/CarouselFlip.stories.ts

@@ -259,7 +259,7 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         .carousel-flip-demo.carousel-flip .item-container {
           max-inline-size: 800px;
           margin-inline: auto;
-          outline: 1px solid light-dark(var(--slate-08, #666), var(--slate-01, #f5f5f5));
+          outline: 1px solid var(--slate-08, #666);
           padding-block: 6px;
           padding-inline: 6px;
         }
@@ -272,12 +272,12 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .item {
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-06, #999));
+          background-color: var(--slate-05, #e5e5e5);
           contain: layout style paint;
         }
 
         .carousel-flip-demo.carousel-flip .item:nth-child(odd) {
-          background-color: light-dark(var(--slate-06, #999), var(--slate-05, #e5e5e5));
+          background-color: var(--slate-06, #999);
         }
 
         .custom-carousel-item {
@@ -287,11 +287,11 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           justify-content: center;
           aspect-ratio: 4 / 3;
           inline-size: 100%;
-          color: light-dark(#aaa, #333);
+          color: #aaa;
           padding-block: 10px;
           padding-inline: 10px;
           border-radius: 4px;
-          outline: 1px solid light-dark(#00000090, #ffffff90);
+          outline: 1px solid #00000090;
         }
 
         .carousel-flip-demo.carousel-flip .controls-container {
@@ -323,7 +323,7 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           width: var(--marker-width);
           height: var(--marker-height);
           border-radius: var(--marker-border-radius);
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-07, #666));
+          background-color: var(--slate-05, #e5e5e5);
           line-height: 3px;
           transition: all 0.3s linear;
           border: 1px solid transparent;
@@ -331,13 +331,13 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .btn-marker.active {
-          background-color: light-dark(var(--slate-012, #000), var(--slate-000, #fff));
+          background-color: var(--slate-012, #000);
           will-change: background-color;
         }
 
         .carousel-flip-demo.carousel-flip .btn-marker:hover,
         .carousel-flip-demo.carousel-flip .btn-marker:focus-visible {
-          outline-color: light-dark(#000, #fff);
+          outline-color: #000;
           will-change: background-color, outline-color;
         }
       `;
@@ -354,13 +354,13 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           Displaying {{ args.carouselDataIds.length }} carousel items with {{ args.transitionSpeed }}ms transition speed
         </p>
         <div style="display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;">
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Overflow: {{ args.allowCarouselOverflow ? 'Enabled' : 'Disabled' }}
           </div>
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Flip Animation: {{ args.useFlipAnimation ? 'Enabled' : 'Disabled' }}
           </div>
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Spring Effect: {{ args.useSpringEffect ? 'Enabled' : 'Disabled' }}
           </div>
         </div>
@@ -513,7 +513,7 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         .carousel-flip-demo.carousel-flip .item-container {
           max-inline-size: 800px;
           margin-inline: auto;
-          outline: 1px solid light-dark(var(--slate-08, #666), var(--slate-01, #f5f5f5));
+          outline: 1px solid var(--slate-08, #666);
           padding-block: 6px;
           padding-inline: 6px;
         }
@@ -526,12 +526,12 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .item {
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-06, #999));
+          background-color: var(--slate-05, #e5e5e5);
           contain: layout style paint;
         }
 
         .carousel-flip-demo.carousel-flip .item:nth-child(odd) {
-          background-color: light-dark(var(--slate-06, #999), var(--slate-05, #e5e5e5));
+          background-color: var(--slate-06, #999);
         }
       `;
       document.head.appendChild(style);
@@ -682,16 +682,16 @@ const AnimationShowcaseTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           Testing different animation combinations and timing
         </p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 20px;">
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.useFlipAnimation ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.useFlipAnimation ? '#e7f5e7' : 'transparent';">
             Flip: {{ args.useFlipAnimation ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.useSpringEffect ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.useSpringEffect ? '#e7f5e7' : 'transparent';">
             Spring: {{ args.useSpringEffect ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.allowCarouselOverflow ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.allowCarouselOverflow ? '#e7f5e7' : 'transparent';">
             Overflow: {{ args.allowCarouselOverflow ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333;">
             Speed: {{ args.transitionSpeed }}ms
           </div>
         </div>

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

@@ -53,11 +53,11 @@ Same shape, falls back to the inverted-surface slots instead:
 
 ### Tertiary
 
-Same shape again; resting surface is transparent by default in dark mode (see note below):
+Same shape again:
 
 | Token | Falls back to |
 |---|---|
-| `--input-button-tertiary-surface` | `light-dark(var(--slate-01), transparent)` |
+| `--input-button-tertiary-surface` | `var(--slate-01)` |
 | `--input-button-tertiary-text` | `var(--theme-text)` |
 | `--input-button-tertiary-border` | the resolved surface above (flat) |
 | `--input-button-tertiary-ring` / `-ring-hover` | `transparent` |
@@ -66,11 +66,6 @@ Same shape again; resting surface is transparent by default in dark mode (see no
 | `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` |
 | `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
 
-> `--input-button-tertiary-surface`'s dark-mode default is literal `transparent`. `color-mix()`
-> still produces a correct darker hover from that — mixing `transparent` with `black` lowers the
-> alpha channel rather than the lightness, so hover reads as a faint dark tint over whatever's
-> behind the button, not a flat fill swap.
-
 `.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
 something this token set changes.
 

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -196,11 +196,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
 
     &.tertiary {
-      /* --_surface can resolve to literal transparent (dark mode default) — color-mix() still
-         darkens correctly here: mixing transparent with black lowers the alpha channel rather
-         than the lightness, so it reads as a faint dark tint over whatever's behind the button
-         instead of a flat fill. Same formula, no special-casing needed. */
-      --_surface: var(--input-button-tertiary-surface, light-dark(var(--slate-01), transparent));
+      --_surface: var(--input-button-tertiary-surface, var(--slate-01));
       --_surface-hover: var(
         --input-button-tertiary-surface-hover,
         color-mix(in oklab, var(--_surface) 85%, black)

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

@@ -7,16 +7,36 @@ to override just this component; leave it unset and it inherits the shared `--th
 `--theme-*` token every other themed component also falls back to. See
 `theming-component-token-pattern.md` for why this two-tier shape exists.
 
+This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md) — `InputNumberCore`
+is a native `<input type="number">` sibling to the text-based `InputTextAsNumberWithLabel` variant,
+and both are meant to look and behave the same way. Border colour also doubles as the divider
+colour between the input and an embedded left/right `InputButtonCore` — there's no separate divider
+token, same as `InputTextCore`.
+
 | Token | Falls back to | Controls |
 |---|---|---|
-| `--input-number-surface` | `var(--theme-input-surface)` | Wrapper and input background |
-| `--input-number-border` | `var(--theme-border)` | Border colour |
+| `--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-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-divider-color` | `var(--theme-input-surface-hover)` | Divider between the input and an embedded left/right `InputButtonCore` |
+| `--input-number-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
+
+Geometry (`--input-padding-block`, `--input-padding-inline`, `--input-min-height`,
+`--form-input-border-radius`, `--input-font-size`, etc.) is shared across every `05.forms`
+component and untouched by this — see `theming-form-geometry-tokens.md`.
+
+---
+
+## Input variant
 
-Geometry (`--form-textarea-padding-*`, `--input-font-size`, `--input-element-line-height`, etc.)
-is shared across every `05.forms` component and untouched by this — see
-`theming-form-geometry-tokens.md`.
+`:input-variant="'normal' | 'outlined' | 'underlined'"` (default `"normal"`) — same prop as
+`InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
+(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either (no
+`&.outlined` rule exists there), so passing it renders with no border/outline at all — a
+pre-existing gap in the type, not something specific to `InputNumberCore`. Declared for prop-shape
+consistency with the rest of `05.forms`.
 
 ---
 

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="input-number-wrapper" :data-theme="theme" :data-invalid="fieldHasError ? '' : null">
-    <div v-if="slots.left" class="slot left">
+  <div
+    class="input-number-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[inputVariant, { 'has-left-slot': slots.left, 'has-right-slot': slots.right }]"
+  >
+    <div v-if="slots.left" class="slot left-slot">
       <slot name="left"></slot>
     </div>
 
@@ -15,19 +20,22 @@
         :min
         :max
         :step
-        :class="[elementClasses]"
+        :placeholder
+        :class="['input-number-core', `input-number--${weight}`, elementClasses]"
         inputmode="numeric"
         pattern="[0-9]+"
         :aria-describedby
       />
     </div>
-    <div v-if="slots.right" class="slot right">
+    <div v-if="slots.right" class="slot right-slot">
       <slot name="right"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { FormUiTheme, FormWeight, InputUiVariant } from "~/types/forms/types.forms";
+
 interface Props {
   id: string;
   name: string;
@@ -36,7 +44,9 @@ interface Props {
   step?: number;
   placeholder?: string;
   required?: boolean;
-  theme?: "default" | "success" | "error" | "warning";
+  theme?: FormUiTheme;
+  weight?: FormWeight;
+  inputVariant?: InputUiVariant;
   fieldHasError?: boolean;
   styleClassPassthrough?: string | string[];
   ariaDescribedby?: string;
@@ -47,6 +57,8 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: "",
   required: false,
   theme: "default",
+  weight: "normal",
+  inputVariant: "normal",
   fieldHasError: false,
   styleClassPassthrough: () => [],
   ariaDescribedby: "",
@@ -54,7 +66,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>({
+  required: true,
+});
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 const minLength = computed(() => `${props.max.toString().length + 1}em`);
@@ -62,108 +76,134 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
 <style lang="css">
 @layer components {
-.input-number-wrapper {
-  --_focus-box-shadow: var(--box-shadow-off);
-  --_min-width: v-bind(minLength);
+  .input-number-wrapper {
+    --_min-width: v-bind(minLength);
 
-  /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
+    /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
      theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. */
-  --_surface: var(--input-number-surface, var(--theme-input-surface));
-  --_border: var(--input-number-border, var(--theme-border));
+     input/control that also reads --theme-input-surface/--theme-border. Mirrors InputTextCore's
+     token shape so a native number input and the text-based InputTextAsNumberWithLabel variant
+     look and behave the same way (see input-number-core.md's "Fixed 2026-09-22" note). */
+    --_surface: var(--input-number-surface, var(--theme-input-surface));
+    --_border: var(--input-number-border, var(--theme-border));
+    --_border-focus: var(--input-number-border-focus, var(--theme-border-focus));
 
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 
-  width: fit-content;
+    width: fit-content;
 
-  background-color: var(--_surface);
-  border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--_border);
-  outline: var(--form-element-outline-width) solid transparent;
-  box-shadow: var(--_focus-box-shadow);
-
-  .slot {
-    display: inline-block;
+    background-color: var(--_surface);
+    overflow: hidden;
+    transition: all var(--theme-form-transition-duration) ease-in-out;
+    position: relative;
+    z-index: 2;
+
+    &.normal {
+      border: var(--form-element-border-width) solid var(--_border);
+      border-radius: var(--form-input-border-radius);
+      outline: var(--form-element-outline-width) solid transparent;
+
+      &:has(input: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);
+      }
 
-    .icon {
-      font-weight: 900;
+      &:has(input:focus-visible) {
+        outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
     }
-  }
 
-  &.has-left-slot {
-    .left-slot {
-      display: flex;
-      align-items: center;
+    &.underlined {
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
     }
-  }
 
-  &.has-right-slot {
-    .right-slot {
-      display: flex;
-      align-items: center;
-    }
-  }
+    .slot {
+      display: inline-block;
 
-  .input-number-core {
-    touch-action: manipulation;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
+      .icon {
+        font-weight: 900;
+      }
 
-    background-color: var(--_surface);
-    color: var(--input-number-text-color, var(--theme-input-text-color-normal));
-    font-family: var(--font-family);
-    font-size: var(--input-font-size);
-    line-height: var(--input-element-line-height);
-
-    padding-inline: var(--form-textarea-padding-inline);
-    padding-block-start: var(--form-textarea-padding-block-start);
-    padding-block-end: var(--form-textarea-padding-block-end);
-    text-align: center;
-    min-width: var(--_min-width);
-
-    &:focus-visible {
-      --_focus-box-shadow: var(--box-shadow-on);
+      .input-button-core {
+        background-color: var(--_surface);
+        color: var(--input-number-text-color, var(--theme-input-text-color-normal));
+        border: none;
+        outline: none;
+        aspect-ratio: 1;
+        border-radius: 0;
+        width: var(--input-min-height);
+
+        &:hover {
+          background-color: var(--input-number-surface-hover, var(--theme-input-surface-hover));
+        }
+
+        &:is(:focus-visible) {
+          outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
+          outline-offset: -4px;
+        }
+
+        &.icon-only {
+          .btn-icon {
+            margin: 0;
+          }
+        }
+      }
     }
 
-    &::placeholder,
-    &::-webkit-input-placeholder {
-      font-family: var(--font-family);
-      font-size: var(--font-size);
-      font-style: italic;
-      font-weight: 400;
+    &.has-left-slot {
+      .left-slot {
+        display: flex;
+        align-items: center;
+      }
     }
-  }
 
-  &:has(.has-left-button),
-  &:has(.has-right-button) {
-    .slot {
-      .input-button-core {
-        border: initial;
-        border-radius: 0;
-        outline: initial;
-        box-shadow: unset;
+    &.has-right-slot {
+      .right-slot {
+        display: flex;
+        align-items: center;
       }
     }
 
-    .left-slot {
-      margin-inline-end: 0;
-      border-right: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
+    &.has-left-slot .left-slot .input-button-core {
+      border-right: var(--form-element-border-width) solid var(--_border);
     }
 
-    .right-slot {
-      margin-inline-end: 0;
-      border-left: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
+    &.has-right-slot .right-slot .input-button-core {
+      border-left: var(--form-element-border-width) solid var(--_border);
+    }
+
+    .input-number-core {
+      all: unset;
+      touch-action: manipulation;
+
+      color: var(--input-number-text-color, var(--theme-input-text-color-normal));
+      font-family: var(--font-family);
+      font-size: var(--input-font-size);
+
+      padding-block: var(--input-padding-block);
+      padding-inline: var(--input-padding-inline);
+      min-height: var(--input-min-height);
+      min-width: var(--_min-width);
+      text-align: center;
+
+      &::placeholder,
+      &::-webkit-input-placeholder {
+        color: var(--input-number-placeholder-color, var(--theme-input-placeholder));
+        font-size: var(--theme-input-placeholder-font-size);
+        font-style: italic;
+        line-height: 1;
+        font-weight: normal;
+      }
     }
   }
-}
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
 </style>

package/app/components/05.forms/input-number/stories/InputNumberCore.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputNumberCore.vue";
+
+interface InputNumberCoreStoryArgs {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  required: boolean;
+  fieldHasError: boolean;
+  weight: string;
+  inputVariant: string;
+}
+
+export default {
+  title: "Components/Forms/Input Number/InputNumberCore",
+  component: StorybookComponent,
+  argTypes: {
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    min: { control: "number", table: { category: "Basic" } },
+    max: { control: "number", table: { category: "Basic" } },
+    step: { control: "number", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    weight: { control: "text", table: { category: "Styling" } },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    id: "number-default",
+    name: "numberDefault",
+    min: 0,
+    max: 100,
+    step: 1,
+    placeholder: "",
+    required: false,
+    fieldHasError: false,
+    weight: "normal",
+    inputVariant: "normal",
+  },
+} as Meta<InputNumberCoreStoryArgs>;
+
+const Template: StoryFn<InputNumberCoreStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(50);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      <StorybookComponent v-bind="args" v-model="modelValue" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const ErrorState = Template.bind({});
+ErrorState.args = { fieldHasError: true };
+
+const WithStepButtonsTemplate: StoryFn<InputNumberCoreStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(50);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      <StorybookComponent v-bind="args" v-model="modelValue">
+        <template #left>
+          <button type="button" @click="modelValue = Math.max(args.min, modelValue - args.step)">−</button>
+        </template>
+        <template #right>
+          <button type="button" @click="modelValue = Math.min(args.max, modelValue + args.step)">+</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const WithStepButtons = WithStepButtonsTemplate.bind({});
+
+export const Underlined = WithStepButtonsTemplate.bind({});
+Underlined.args = { inputVariant: "underlined" };