srcdev-nuxt-components 9.4.10 → 9.4.12

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

package/app/components/05.forms/input-number/variants/InputNumberDefault.vue

@@ -3,14 +3,14 @@
     class="input-number-with-label"
     :data-theme="theme"
     :data-invalid="fieldHasError ? '' : null"
-    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
+    :class="[elementClasses, inputVariant, `theme-${theme}`, { error: fieldHasError }]"
   >
     <InputLabel
       :id
       :for="id"
       :theme
       :name
-      input-variant="normal"
+      :input-variant
       :field-has-error
       :style-class-passthrough="['input-number-label', 'body-normal-bold']"
     >
@@ -39,9 +39,11 @@
       :min
       :max
       :step
+      :placeholder
       :theme
       :required
       :weight
+      :input-variant
       :field-has-error
       :style-class-passthrough
       :aria-describedby
@@ -51,7 +53,7 @@
           type="button"
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
-          button-text="Step down"
+          :button-text="stepDownLabel"
           :theme="theme"
           variant="inline"
           @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
@@ -66,7 +68,7 @@
           type="button"
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
-          button-text="Step up"
+          :button-text="stepUpLabel"
           :theme="theme"
           variant="inline"
           @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
@@ -82,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormWeight } from "~/types/forms/types.forms";
+import type { FormUiTheme, FormWeight, InputUiVariant } from "~/types/forms/types.forms";
 
 interface Props {
   name: string;
@@ -94,9 +96,12 @@ interface Props {
   errorMessage: object | string;
   fieldHasError?: boolean;
   required?: boolean;
-  theme?: "default" | "success" | "error" | "warning";
+  theme?: FormUiTheme;
   weight?: FormWeight;
+  inputVariant?: InputUiVariant;
   styleClassPassthrough?: string | string[];
+  stepDownLabel?: string;
+  stepUpLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -106,45 +111,48 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
   theme: "default",
   weight: "normal",
+  inputVariant: "normal",
   styleClassPassthrough: () => [],
+  stepDownLabel: "Step down",
+  stepUpLabel: "Step up",
 });
 
 const slots = useSlots();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
   toRef(props, "fieldHasError"),
   slots
 );
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>({
+  required: true,
+});
 
 const updateValue = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {
     modelValue.value = (Number(modelValue.value) + step) as number;
   }
 };
-
-updateElementClasses(["has-left-button", "has-right-button"]);
 </script>
 
 <style lang="css">
 @layer components {
-.input-number-with-label {
-  .input-number-label {
-    display: block;
-    margin-block: 0.8rem;
+  .input-number-with-label {
+    .input-number-label {
+      display: block;
+      margin-block: 0.8rem;
 
-    &:hover {
-      cursor: pointer;
+      &:hover {
+        cursor: pointer;
+      }
     }
-  }
 
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
+    .label-description {
+      font-family: var(--font-family);
+      font-size: 1.6rem;
+      margin-top: 1.2rem;
+    }
   }
 }
-}
 </style>

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

@@ -0,0 +1,123 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../InputNumberDefault.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface InputNumberDefaultStoryArgs {
+  modelValue: number;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: string;
+  stepDownLabel: string;
+  stepUpLabel: string;
+  useStepButtons: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Number/InputNumberDefault",
+  component: StorybookComponent,
+  argTypes: {
+    modelValue: { control: "number", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { 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" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    stepDownLabel: { control: "text", description: "Localisation override for the step-down button", table: { category: "Accessibility" } },
+    stepUpLabel: { control: "text", description: "Localisation override for the step-up button", table: { category: "Accessibility" } },
+    useStepButtons: { control: "boolean", description: "Render +/- step buttons via left/right slots", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: 5,
+    name: "quantity",
+    label: "Quantity",
+    min: 0,
+    max: 10,
+    step: 1,
+    placeholder: "",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    stepDownLabel: "Step down",
+    stepUpLabel: "Step up",
+    useStepButtons: false,
+  },
+} as Meta<InputNumberDefaultStoryArgs>;
+
+const Template: StoryFn<InputNumberDefaultStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      <StorybookComponent
+        v-model="args.modelValue"
+        :name="args.name"
+        :label="args.label"
+        :min="args.min"
+        :max="args.max"
+        :step="args.step"
+        :placeholder="args.placeholder"
+        :error-message="args.errorMessage"
+        :field-has-error="args.fieldHasError"
+        :required="args.required"
+        :theme="args.theme"
+        :input-variant="args.inputVariant"
+        :step-down-label="args.stepDownLabel"
+        :step-up-label="args.stepUpLabel"
+      >
+        <template v-if="args.useStepButtons" #left><span>−</span></template>
+        <template v-if="args.useStepButtons" #right><span>+</span></template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const WithStepButtons = Template.bind({});
+WithStepButtons.args = { useStepButtons: true };
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Please enter a valid quantity",
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const LocalisedLabels = Template.bind({});
+LocalisedLabels.args = {
+  useStepButtons: true,
+  stepDownLabel: "Diminuer",
+  stepUpLabel: "Augmenter",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = { inputVariant: "underlined", useStepButtons: true };

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

@@ -0,0 +1,143 @@
+// 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 "../InputNumberDefault.vue";
+
+const initialPropsData = {
+  name: "testName",
+  label: "Test label",
+  min: 0,
+  max: 100,
+  errorMessage: "",
+  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("InputNumberDefault", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Quantity" });
+    expect(wrapper.text()).toContain("Quantity");
+  });
+
+  it("renders a number input", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find('input[type="number"]').exists()).toBe(true);
+  });
+
+  it("forwards placeholder to the input", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Enter a quantity" });
+    expect(wrapper.find("input").attributes("placeholder")).toBe("Enter a quantity");
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-number-with-label").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("error");
+  });
+
+  it("does not render step buttons when the left/right slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.findAllComponents({ name: "InputButtonCore" })).toHaveLength(0);
+  });
+
+  it("renders step buttons with default labels when the left/right slots are used", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-icon">-</span>',
+        right: '<span data-testid="right-icon">+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Step down");
+    expect(wrapper.text()).toContain("Step up");
+  });
+
+  it("overrides step button labels via stepDownLabel/stepUpLabel props", async () => {
+    wrapper = await wrapperFactory(
+      { stepDownLabel: "Decrease", stepUpLabel: "Increase" },
+      {
+        left: '<span>-</span>',
+        right: '<span>+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Decrease");
+    expect(wrapper.text()).toContain("Increase");
+  });
+
+  it("increments the model value when the step-up button is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: 50, step: 5 }, { right: '<span>+</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find(
+      (btn) => btn.text().includes("+") || btn.attributes("aria-label")?.includes("Step up")
+    );
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([55]);
+  });
+
+  it("decrements the model value when the step-down button is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: 50, step: 5 }, { left: '<span>-</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find(
+      (btn) => btn.text().includes("-") || btn.attributes("aria-label")?.includes("Step down")
+    );
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([45]);
+  });
+
+  it("does not step below min", async () => {
+    wrapper = await wrapperFactory({ modelValue: 0, min: 0, step: 5 }, { left: '<span>-</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find((btn) => btn.text().includes("-"));
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("does not step above max", async () => {
+    wrapper = await wrapperFactory({ modelValue: 100, max: 100, step: 5 }, { right: '<span>+</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find((btn) => btn.text().includes("+"));
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "This field is required" });
+    expect(wrapper.text()).toContain("This field is required");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-number" });
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("custom-number");
+  });
+
+  it("forwards inputVariant to the wrapper, InputLabel, and InputNumberCore", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("underlined");
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
+  });
+});

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

@@ -5,11 +5,11 @@
 | Token | Default | Controls |
 |---|---|---|
 | `--input-range-accent-colour` | `var(--theme-accent)` | Native `accent-color` of the range input (track/thumb tint) |
-| `--input-range-marker-background-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Background colour of each `markers` slot dot |
+| `--input-range-marker-background-colour` | `hsl(0, 29%, 3%)` | Background colour of each `markers` slot dot |
 | `--input-range-marker-padding` | `0.5rem` | Padding of each marker dot |
 | `--input-range-marker-border-radius` | `50%` | Corner radius of each marker dot |
 | `--input-range-marker-outline-width` | `0.1rem` | Marker dot outline width |
-| `--input-range-marker-outline-colour` | `light-dark(var(--slate-04), var(--slate-06))` | Marker dot outline colour |
+| `--input-range-marker-outline-colour` | `var(--slate-04)` | Marker dot outline colour |
 | `--input-range-marker-icon-size` | `2rem` | Font size of the marker icon (`.marker-icon`) |
 | `--input-range-marker-icon-colour` | `var(--input-range-accent-colour, var(--theme-accent))` | Marker icon colour |
 | `--input-range-datalist-font-size` | `1.4rem` | Font size of the `datalist` slot's option labels |

package/app/components/05.forms/input-range/InputRangeCore.vue

@@ -103,12 +103,12 @@ const modelValue = defineModel<number>({
         z-index: 2;
 
         .marker {
-          background-color: var(--input-range-marker-background-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+          background-color: var(--input-range-marker-background-colour, hsl(0, 29%, 3%));
           padding: var(--input-range-marker-padding, 0.5rem);
           border-radius: var(--input-range-marker-border-radius, 50%);
           overflow: hidden;
           outline: var(--input-range-marker-outline-width, 0.1rem) solid
-            var(--input-range-marker-outline-colour, light-dark(var(--slate-04), var(--slate-06)));
+            var(--input-range-marker-outline-colour, var(--slate-04));
 
           &:hover {
             cursor: pointer;

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -9,12 +9,16 @@
       :id
       v-model="modelValue"
       :aria-invalid="fieldHasError ? 'true' : undefined"
-      class="input-select-core"
+      :class="['input-select-core', elementClasses]"
       :name
       :title
+      :required
       :aria-describedby="ariaDescribedby"
+      @focusin="isActive = true"
+      @focusout="isActive = false"
+      @change="isDirty = true"
     >
-      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
+      <option v-if="placeholder" value="" disabled :selected="!modelValue" class="input-select-core-option placeholder">
         {{ placeholder }}
       </option>
       <option
@@ -38,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+import type { IFormMultipleOptions, FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
 
 interface Props {
   id: string;
@@ -48,12 +52,12 @@ interface Props {
   required?: boolean;
   fieldHasError?: boolean;
   styleClassPassthrough?: string | string[];
-  theme?: "default" | "success" | "error" | "warning";
-  inputVariant?: "normal" | "outlined" | "underlined";
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
   ariaDescribedby?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   placeholder: "",
   title: "Please select an option",
   required: false,
@@ -67,7 +71,9 @@ withDefaults(defineProps<Props>(), {
 const modelValue = defineModel<string | number | readonly number[]>({ required: true });
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
@@ -75,22 +81,18 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 .input-select-wrapper {
   /* Public --input-select-* 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 etc. are
-     private locals purely so the rest of this rule can reuse the resolved value without
-     repeating the fallback chain at every property — they are not themselves an override point,
-     see CONSUMER-STYLING.md. --_outline-color stays private/computed: it's always just an alias
-     for --_border-focus with no independent meaning of its own. */
-  --_surface: var(--input-select-surface, var(--theme-input-surface));
-  --_surface-hover: var(--input-select-surface-hover, var(--theme-input-surface-hover));
+     input/control that also reads --theme-input-surface/--theme-border. --_border is the one
+     genuinely reused value (border, underlined border-bottom, open-picker border); the rest of
+     this component's tokens are used at exactly one point each, so they're inlined directly
+     rather than wrapped in a private var with no composition or state-swap behind it (see
+     pitfall #20 in CLAUDE.md). */
   --_border: var(--input-select-border, var(--theme-border));
   /* Split so hover (mouse) and :focus-visible (keyboard/assistive) can diverge — both default to
      the same --theme-border-focus today, identical appearance to before this token existed, but
      each now has its own override point. */
-  --_border-hover: var(--input-select-border-hover, var(--theme-border-focus));
   --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
-  --_outline-color: var(--_border-focus);
 
-  background-color: var(--_surface);
+  background-color: var(--input-select-surface, var(--theme-input-surface));
   overflow: hidden;
 
   z-index: 2;
@@ -105,11 +107,11 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
   &.underlined {
     border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
-    background-color: var(--_surface);
   }
 
   &:has(:hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--_border-hover);
+    outline: var(--form-element-outline-width-focus) solid
+      var(--input-select-border-hover, var(--theme-border-focus));
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -124,15 +126,6 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
     display: flex;
     align-items: center;
 
-    /* For legacy support - eg, Safari */
-    /* &::after {
-      content: '';
-      width: 0.8em;
-      height: 0.5em;
-      background-color: var(--_border);
-      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    } */
-
     /* Start modern Select CSS */
     &,
     &::picker(select) {
@@ -153,7 +146,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
     &:open::picker(select) {
       opacity: 1;
       border: var(--form-element-border-width) solid var(--_border);
-      outline: var(--form-element-outline-width) solid var(--_outline-color);
+      outline: var(--form-element-outline-width) solid var(--_border-focus);
 
       @starting-style {
         opacity: 0;
@@ -180,7 +173,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--_surface-hover);
+        background-color: var(--input-select-surface-hover, var(--theme-input-surface-hover));
       }
 
       .input-select-core-option-decorator-icon {