srcdev-nuxt-components 9.4.9 → 9.4.11

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" };

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

@@ -0,0 +1,119 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputNumberCore.vue";
+
+const initialPropsData = {
+  id: "test-number",
+  name: "testName",
+  min: 0,
+  max: 100,
+  modelValue: 50,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputNumberCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a native number input with the given min/max/step", async () => {
+    wrapper = await wrapperFactory({ min: 10, max: 90, step: 5 });
+    const input = wrapper.find("input");
+
+    expect(input.attributes("type")).toBe("number");
+    expect(input.attributes("min")).toBe("10");
+    expect(input.attributes("max")).toBe("90");
+    expect(input.attributes("step")).toBe("5");
+  });
+
+  it("defaults step to 1", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("step")).toBe("1");
+  });
+
+  it("binds v-model to the input value", async () => {
+    wrapper = await wrapperFactory({ modelValue: 42 });
+    expect(wrapper.find("input").element.value).toBe("42");
+  });
+
+  it("forwards placeholder", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Enter a quantity" });
+    expect(wrapper.find("input").attributes("placeholder")).toBe("Enter a quantity");
+  });
+
+  it("forwards aria-describedby", async () => {
+    wrapper = await wrapperFactory({ ariaDescribedby: "some-description-id" });
+    expect(wrapper.find("input").attributes("aria-describedby")).toBe("some-description-id");
+  });
+
+  it("sets data-theme from the theme prop", async () => {
+    wrapper = await wrapperFactory({ theme: "error" });
+    expect(wrapper.find(".input-number-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("sets data-invalid when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-number-wrapper").attributes("data-invalid")).toBe("");
+  });
+
+  it("does not render the left/right slot wrappers when the slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".slot.left-slot").exists()).toBe(false);
+    expect(wrapper.find(".slot.right-slot").exists()).toBe(false);
+    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("has-left-slot");
+    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("has-right-slot");
+  });
+
+  it("renders the left/right slots when provided", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<button data-testid="left-slot">-</button>',
+        right: '<button data-testid="right-slot">+</button>',
+      }
+    );
+
+    expect(wrapper.find(".slot.left-slot [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".slot.right-slot [data-testid='right-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("has-left-slot");
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("has-right-slot");
+  });
+
+  it("applies the weight class from the weight prop", async () => {
+    wrapper = await wrapperFactory({ weight: "wght-700" });
+    expect(wrapper.find("input").classes()).toContain("input-number--wght-700");
+  });
+
+  it("applies styleClassPassthrough to the input", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-number-class"] });
+    expect(wrapper.find("input").classes()).toContain("custom-number-class");
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("input").attributes("required")).toBeDefined();
+  });
+
+  it("defaults inputVariant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("normal");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
+    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("normal");
+  });
+});