srcdev-nuxt-components 9.4.9 → 9.4.10

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

@@ -0,0 +1,45 @@
+# InputRangeCore — Consumer Styling Guide
+
+## Public token API
+
+| 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-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-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 |
+| `--input-range-datalist-font-weight` | `500` | Font weight of the `datalist` slot's option labels |
+
+Geometry (thumb/track height, border radius) comes from the shared global form-geometry tokens
+(`--input-range-button-size`, `--form-input-border-radius`), not from this component's own
+tokens — see `theming-form-geometry-tokens.md`.
+
+```css
+.my-page {
+  --input-range-accent-colour: var(--brand-primary);
+  --input-range-marker-background-colour: var(--brand-primary);
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<InputRangeCore style-class-passthrough="price-range" ... />
+```
+
+## Notes
+
+- `accent-color` was previously read from `--theme-form-range-accent-color`, a custom property
+  never declared anywhere in the codebase (no fallback either) — per CSS spec this made the whole
+  `accent-color` declaration invalid at computed-value time, so it silently fell back to the
+  browser's native default accent colour instead of the intended theme colour. Fixed 2026-09-21;
+  see the component's skill doc for detail.
+- The `weight` prop (`FormWeight`) generates an `input-range--{weight}` class on the input, but no
+  CSS in this component (or elsewhere in the library) currently styles that class — it's a no-op
+  today. Left as-is rather than redesigned, since the original intent wasn't clear; flagged here
+  so you don't spend time debugging "why doesn't `weight` do anything."

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

@@ -48,7 +48,7 @@ interface Props {
   ariaDescribedby?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   step: 1,
   placeholder: "",
   required: false,
@@ -61,173 +61,109 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
+const modelValue = defineModel<number>({
+  required: true,
 });
-
-const modelValue = defineModel<number | readonly number[]>();
 </script>
 
 <style lang="css">
 @layer components {
-.input-range-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-
-  .slot {
-    align-self: flex-start;
-
-    .input-button-core {
-      border-radius: var(--form-input-border-radius);
-      width: var(--input-range-button-size);
-      height: var(--input-range-button-size);
-
-      .btn-icon {
-        margin: initial;
-      }
-    }
-  }
-
-  .input-range-container {
-    flex-grow: 1;
-
-    display: grid;
-    grid-template-areas: "element-stack";
-    /* margin-top: 2px; */
-
-    .input-range-markers {
-      grid-area: element-stack;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      z-index: 2;
-
-      .marker {
-        background-color: black;
-        padding: 0.5rem;
-        border-radius: 50%;
-        overflow: hidden;
-        outline: 1px solid gray;
-
-        &:hover {
-          cursor: pointer;
-        }
+  .input-range-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    .slot {
+      align-self: flex-start;
+
+      .input-button-core {
+        border-radius: var(--form-input-border-radius);
+        width: var(--input-range-button-size);
+        height: var(--input-range-button-size);
 
-        .marker-icon {
-          font-size: 2rem;
-          display: block;
-          color: var(--theme-form-range-accent-color);
+        .btn-icon {
+          margin: initial;
         }
       }
     }
 
-    .input-range-core {
-      grid-area: element-stack;
+    .input-range-container {
+      flex-grow: 1;
 
-      accent-color: var(--theme-form-range-accent-color);
-      height: var(--input-range-button-size);
-      margin: 0;
-      width: 100%;
+      display: grid;
+      grid-template-areas: "element-stack";
 
-      /*
-      &:hover {
-        cursor: -webkit-grab;
-        outline-color: red;
-      }
-      &:active {
-        cursor: -webkit-grabbing;
-        outline-color: blue;
-      }
-      &:focus-visible {
-        outline-offset: 0.25rem;
-        outline-color: transparent;
-      }
-      */
-
-      &::-webkit-slider-thumb {
-        /* appearance: none; */
-        /* -webkit-appearance: none; */
-        accent-color: blue;
-        color: blue;
-        background-color: 0.1rem solid green;
-        outline: 0.1rem solid blue;
-        border-radius: 50%;
-      }
+      .input-range-markers {
+        grid-area: element-stack;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        z-index: 2;
+
+        .marker {
+          background-color: var(--input-range-marker-background-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+          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)));
+
+          &:hover {
+            cursor: pointer;
+          }
 
-      &::-webkit-slider-runnable-track {
-        appearance: none;
-        -webkit-appearance: none;
-        /* background: hsl(10 80% 50% / 0.5); */
-        /* box-shadow: 0.1rem 0.1rem 0.1rem #fff, 0rem 0rem 0.1rem #fff; */
+          .marker-icon {
+            font-size: var(--input-range-marker-icon-size, 2rem);
+            display: block;
+            color: var(--input-range-marker-icon-colour, var(--input-range-accent-colour, var(--theme-accent)));
+          }
+        }
       }
 
-      /* For Chrome, Safari, Opera, and Edge */
-      /* &::-webkit-slider-runnable-track {
-        background: var(--theme-form-range-accent-color);
-        height: var(--input-range-button-size);
-      } */
+      .input-range-core {
+        grid-area: element-stack;
 
-      /* For Firefox */
-      /* &::-moz-range-track {
-        background: var(--theme-form-range-accent-color);
+        accent-color: var(--input-range-accent-colour, var(--theme-accent));
         height: var(--input-range-button-size);
-      } */
-
-      /* Stling the thumb */
-      /* &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        background: #5cd5eb;
-        height: 2rem;
-        width: 1rem;
-        border-radius: 1rem;
-      } */
-
-      /* For Firefox */
-      /* &::-moz-range-thumb {
-        background: #5cd5eb;
-        height: 2rem;
-        width: 1rem;
-        border-radius: 1rem;
-        border: none;
-      } */
-
-      &:focus-visible {
-        box-shadow: var(--form-focus-box-shadow);
-      }
+        margin: 0;
+        width: 100%;
 
-      &.has-markers {
-        accent-color: var(--theme-form-range-accent-color);
-        height: 2px;
-        z-index: 2;
-        translate: 0 13px;
+        &:focus-visible {
+          box-shadow: var(--form-focus-box-shadow);
+        }
 
-        &::-webkit-slider-thumb {
-          opacity: 0;
-          &:hover {
-            cursor: pointer;
+        &.has-markers {
+          accent-color: var(--input-range-accent-colour, var(--theme-accent));
+          height: 0.2rem;
+          z-index: 2;
+          translate: 0 1.3rem;
+
+          &::-webkit-slider-thumb {
+            opacity: 0;
+            &:hover {
+              cursor: pointer;
+            }
           }
         }
       }
-    }
 
-    .input-range-datalist {
-      display: flex;
-      flex-direction: column;
-      font-family: var(--font-family);
-      font-size: 1.4rem;
-      font-weight: 500;
-      justify-content: space-between;
-      writing-mode: vertical-lr;
-      width: 100%;
-
-      option {
-        padding: 0;
+      .input-range-datalist {
+        display: flex;
+        flex-direction: column;
+        font-family: var(--font-family);
+        font-size: var(--input-range-datalist-font-size, 1.4rem);
+        font-weight: var(--input-range-datalist-font-weight, 500);
+        justify-content: space-between;
+        writing-mode: vertical-lr;
+        width: 100%;
+
+        option {
+          padding: 0;
+        }
       }
     }
   }
 }
-}
 </style>

package/app/components/05.forms/input-range/stories/InputRangeCore.stories.ts

@@ -0,0 +1,126 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputRangeCore.vue";
+
+interface InputRangeCoreStoryArgs {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step: number;
+  required: boolean;
+  fieldHasError: boolean;
+  weight: string;
+}
+
+export default {
+  title: "Components/Forms/Input Range/InputRangeCore",
+  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" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    weight: { control: "text", table: { category: "Styling" } },
+  },
+  args: {
+    id: "range-default",
+    name: "rangeDefault",
+    min: 0,
+    max: 100,
+    step: 1,
+    required: false,
+    fieldHasError: false,
+    weight: "normal",
+  },
+} as Meta<InputRangeCoreStoryArgs>;
+
+const Template: StoryFn<InputRangeCoreStoryArgs> = (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<InputRangeCoreStoryArgs> = (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({});
+
+const WithMarkersTemplate: StoryFn<InputRangeCoreStoryArgs> = (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 #markers>
+          <div class="input-range-markers">
+            <div class="marker"><span class="marker-icon">😀</span></div>
+            <div class="marker"><span class="marker-icon">🙂</span></div>
+            <div class="marker"><span class="marker-icon">😐</span></div>
+          </div>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const WithMarkers = WithMarkersTemplate.bind({});
+WithMarkers.args = { min: 0, max: 2, step: 1 };
+
+const WithDatalistTemplate: StoryFn<InputRangeCoreStoryArgs> = (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 #datalist>
+          <datalist :id="\`\${args.name}-datalist\`" class="input-range-datalist">
+            <option value="0" label="Low"></option>
+            <option value="50" label="Medium"></option>
+            <option value="100" label="High"></option>
+          </datalist>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const WithDatalist = WithDatalistTemplate.bind({});

package/app/components/05.forms/input-range/tests/InputRangeCore.spec.ts

@@ -0,0 +1,124 @@
+// 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 "../InputRangeCore.vue";
+
+const initialPropsData = {
+  id: "test-range",
+  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("InputRangeCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a native range 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("range");
+    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 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-range-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("does not render the left/right slot wrappers when the slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".slot.left").exists()).toBe(false);
+    expect(wrapper.find(".slot.right").exists()).toBe(false);
+  });
+
+  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 [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".slot.right [data-testid='right-slot']").exists()).toBe(true);
+  });
+
+  it("renders the markers slot and adds has-markers class to the input", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        markers: '<div class="input-range-markers" data-testid="markers"></div>',
+      }
+    );
+
+    expect(wrapper.find('[data-testid="markers"]').exists()).toBe(true);
+    expect(wrapper.find("input").classes()).toContain("has-markers");
+  });
+
+  it("does not add has-markers class when the markers slot is not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").classes()).not.toContain("has-markers");
+  });
+
+  it("sets the list attribute to `{name}-datalist` only when the datalist slot is used", async () => {
+    wrapper = await wrapperFactory(
+      { name: "price" },
+      { datalist: '<datalist id="price-datalist"></datalist>' }
+    );
+    expect(wrapper.find("input").attributes("list")).toBe("price-datalist");
+  });
+
+  it("leaves the list attribute empty when the datalist slot is not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("list")).toBe("");
+  });
+
+  it("applies the weight class from the weight prop", async () => {
+    wrapper = await wrapperFactory({ weight: "wght-700" });
+    expect(wrapper.find("input").classes()).toContain("input-range--wght-700");
+  });
+
+  it("applies styleClassPassthrough to the input", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-range-class"] });
+    expect(wrapper.find("input").classes()).toContain("custom-range-class");
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("input").attributes("required")).toBeDefined();
+  });
+});

package/app/components/05.forms/input-range/variants/InputRangeDefault.vue

@@ -54,7 +54,7 @@
           type="button"
           :readonly="Number(modelValue) === min"
           :is-pending="false"
-          button-text="Step down"
+          :button-text="stepDownLabel"
           :theme
           variant="secondary"
           @click.stop.prevent="updateRange(-step, Number(modelValue) > min)"
@@ -69,7 +69,7 @@
           type="button"
           :readonly="Number(modelValue) === max"
           :is-pending="false"
-          button-text="Step up"
+          :button-text="stepUpLabel"
           :theme
           variant="secondary"
           @click.stop.prevent="updateRange(step, Number(modelValue) < max)"
@@ -106,7 +106,8 @@ interface Props {
   theme?: FormUiTheme;
   weight?: FormWeight;
   styleClassPassthrough?: string | string[];
-  deepCssClassPassthrough?: string;
+  stepDownLabel?: string;
+  stepUpLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -117,25 +118,22 @@ const props = withDefaults(defineProps<Props>(), {
   theme: "default",
   weight: "wght-400",
   styleClassPassthrough: () => [],
-  deepCssClassPassthrough: "",
+  stepDownLabel: "Step down",
+  stepUpLabel: "Step up",
 });
 
 const slots = useSlots();
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-// const id = useId();
-
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
   toRef(props, "fieldHasError"),
   slots
 );
 
-// const FormUiTheme = computed(() => {
-//   return props.fieldHasError ? "error" : props.theme;
-// });
-
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number>({
+  required: true,
+});
 
 const updateRange = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {
@@ -143,24 +141,3 @@ const updateRange = (step: number, withinRangeLimit: boolean) => {
   }
 };
 </script>
-
-<style lang="css">
-@layer components {
-.input-range-with-label {
-  .input-range-label {
-    display: block;
-    margin-block: 0.8rem;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-}
-}
-</style>