srcdev-nuxt-components 9.6.7 → 9.6.9

package/app/components/05.forms/input-radio/stories/MultipleRadiobuttons.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, ref } from "vue";
-import StorybookComponent from "../MultipleRadiobuttons.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import MultipleRadiobuttons from "../MultipleRadiobuttons.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { IFormMultipleOptions, InputUiVariant, OptionsLayout } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface MultipleRadiobuttonsStoryArgs {
+interface StoryArgs {
   name: string;
   legend: string;
   errorMessage: string;
@@ -16,17 +18,25 @@ interface MultipleRadiobuttonsStoryArgs {
   inputVariant: InputUiVariant;
   gap: string;
   descriptionText: string;
+  options: IFormMultipleOptions["data"];
 }
 
-export default {
+const enquiryOptions: IFormMultipleOptions["data"] = [
+  { id: "1", name: "enquiryType", value: "booking", label: "Booking" },
+  { id: "2", name: "enquiryType", value: "consultation", label: "Consultation" },
+  { id: "3", name: "enquiryType", value: "product", label: "Product advice" },
+  { id: "4", name: "enquiryType", value: "other", label: "Something else" },
+];
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Radio/MultipleRadiobuttons",
-  component: StorybookComponent,
+  component: MultipleRadiobuttons,
   argTypes: {
     name: { control: "text", description: "Shared name of every radio in the group", table: { category: "Basic" } },
     legend: { control: "text", table: { category: "Basic" } },
     errorMessage: { control: "text", table: { category: "Basic" } },
     required: { control: "boolean", table: { category: "Basic" } },
-    descriptionText: { control: "text", description: "descriptionText slot", table: { category: "Slots" } },
+    descriptionText: { control: "text", description: "Story-only: fills the descriptionText slot", table: { category: "Slots" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
     isButton: { control: "boolean", table: { category: "Styling" } },
     isPill: { control: "boolean", description: "Only with isButton", table: { category: "Styling" } },
@@ -49,8 +59,14 @@ export default {
     },
     gap: {
       control: "text",
-      description: "Sets --multiple-radiobuttons-gap on the story wrapper",
-      table: { category: "Tokens" },
+      description:
+        "**Story control, not a prop.** Sets `--multiple-radiobuttons-gap` on the story wrapper. In your CSS: `.enquiry-form { --multiple-radiobuttons-gap: 0.6rem; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the `data` array of the `fieldData` model",
+      table: { category: "Model" },
     },
   },
   args: {
@@ -66,51 +82,135 @@ export default {
     inputVariant: "normal",
     gap: "",
     descriptionText: "Pick the closest match.",
+    options: enquiryOptions,
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A `radiogroup` fieldset of radios built from the `fieldData` model, bound to a single-value `v-model`. `isButton` swaps the labelled radios for button tiles (`isPill` rounds them), `optionsLayout` lays them out as equal-width columns, an inline wrap or a block column, and `errorMessage` with `fieldHasError` shows the error strip. `required` puts native `required` on every radio, which one checked radio satisfies. Slots: `descriptionText`, `descriptionHtml`, `checkedIcon`, `itemIcon`.",
+      },
+    },
   },
-} as Meta<MultipleRadiobuttonsStoryArgs>;
+};
 
-const Template: StoryFn<MultipleRadiobuttonsStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { MultipleRadiobuttons },
   setup() {
-    const modelValue = ref<string>("");
-    const fieldData = ref<IFormMultipleOptions>({
-      data: [
-        { id: "1", name: "enquiryType", value: "booking", label: "Booking" },
-        { id: "2", name: "enquiryType", value: "consultation", label: "Consultation" },
-        { id: "3", name: "enquiryType", value: "product", label: "Product advice" },
-        { id: "4", name: "enquiryType", value: "other", label: "Something else" },
-      ],
-      total: 4,
-      skip: 0,
-      limit: 10,
-    });
     const componentArgs = computed(() => {
-      const { gap: _gap, descriptionText: _description, ...rest } = args;
+      const { gap: _gap, descriptionText: _descriptionText, options: _options, ...rest } = args;
       return rest;
     });
+    const fieldData = computed<IFormMultipleOptions>(() => ({
+      data: args.options,
+      total: args.options.length,
+      skip: 0,
+      limit: args.options.length,
+    }));
     const tokenStyles = computed(() => (args.gap ? { "--multiple-radiobuttons-gap": args.gap } : {}));
-    return { args, componentArgs, tokenStyles, modelValue, fieldData };
+    const modelValue = ref<string>("");
+    return { args, componentArgs, fieldData, tokenStyles, modelValue };
   },
   template: `
-    <div style="margin: 36px; max-width: 560px;" :style="tokenStyles">
-      <StorybookComponent v-bind="componentArgs" v-model="modelValue" v-model:field-data="fieldData">
+    <div :style="tokenStyles">
+      <MultipleRadiobuttons v-bind="componentArgs" v-model="modelValue" :field-data="fieldData">
         <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
-      </StorybookComponent>
-      <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
+      </MultipleRadiobuttons>
+      <p style="margin-block-start: 2rem; font-family: monospace; overflow-wrap: anywhere;">modelValue: {{ JSON.stringify(modelValue) }}</p>
     </div>
   `,
 });
 
-export const Default = Template.bind({});
+export const Default: Story = { render };
 
-export const Buttons = Template.bind({});
-Buttons.args = { isButton: true, optionsLayout: "inline" };
+export const Buttons: Story = {
+  args: { isButton: true, optionsLayout: "inline" },
+  render,
+  parameters: { docs: { description: { story: "Button tiles in an inline wrap, each with the `itemIcon` decorator." } } },
+};
 
-export const Pills = Template.bind({});
-Pills.args = { isButton: true, isPill: true, optionsLayout: "inline" };
+export const Pills: Story = {
+  args: { isButton: true, isPill: true, optionsLayout: "inline" },
+  render,
+  parameters: { docs: { description: { story: "Button tiles with `isPill` for fully rounded ends." } } },
+};
 
-export const Block = Template.bind({});
-Block.args = { optionsLayout: "block" };
+export const Block: Story = {
+  args: { optionsLayout: "block" },
+  render,
+  parameters: { docs: { description: { story: "`optionsLayout=\"block\"` stacks the options in one column." } } },
+};
+
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: {
+    docs: { description: { story: "`fieldHasError` shows the error message and links it to every radio with `aria-describedby`." } },
+  },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    name: "anfrage art",
+    legend:
+      "📞 Worumgehtesbeiihreranfragebittewählensiediepassendstekategorieaus https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere <script>alert(1)</script>",
+    descriptionText:
+      "نوع الاستفسار Wählen Sie die Kategorie, die am besten zu Ihrer Anfrage passt, damit wir Sie an die richtige Person weiterleiten können. <b>not bold</b>",
+    errorMessage: "BittewählenSieeineAnfragekategorieausbevorSiedasFormularabsenden",
+    fieldHasError: true,
+    options: [
+      { id: "1", name: "s", value: "a", label: "A" },
+      { id: "2", name: "s", value: "", label: "" },
+      { id: "3", name: "s", value: "long", label: "Terminvereinbarungsänderungsanfragebearbeitung" },
+      { id: "4", name: "s", value: "url", label: "https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere" },
+      { id: "5", name: "s", value: "has spaces <b>", label: "<b>Not bold</b> & <i>not italic</i>" },
+      { id: "6", name: "s", value: "emoji", label: "💬 Something else 🤔" },
+      { id: "7", name: "s", value: "rtl", label: "استشارة" },
+      {
+        id: "8",
+        name: "s",
+        value: "sentence",
+        label: "A question about an existing booking, including changing the time, the stylist or the treatment",
+      },
+      ...Array.from({ length: 22 }, (_, index) => ({
+        id: `extra-${index}`,
+        name: "s",
+        value: `extra-${index}`,
+        label: `Option ${index + 9}`,
+      })),
+    ],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "30 options including an empty label, a single character, long unbroken German and URL labels, emoji, right-to-left text, HTML-like text and a value with spaces. Check at every canvas width: the legend, description, labels and error wrap inside the dashed outline, markup renders as text, the equal-width columns never get wider than the container, and clicking any label (including the odd ones) selects its own radio. Switch `optionsLayout` to `inline` and `block`, and turn on `isButton` and `isPill`: long button labels wrap inside their tile.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-radio/tests/MultipleRadioButtons.spec.ts

@@ -1,4 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { defineComponent } from "vue";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
 import MultipleRadiobuttons from "../MultipleRadiobuttons.vue";
@@ -12,15 +14,60 @@ const defaultProps = {
   fieldData: tagsData as IFormMultipleOptions,
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(MultipleRadiobuttons, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(MultipleRadiobuttons, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 describe("MultipleRadiobuttons", () => {
   describe("rendering", () => {
+    it("gives button radios unique, space-free ids that don't come from option values", async () => {
+      const wrapper = await createWrapper({
+        isButton: true,
+        fieldData: { ...tagsData, data: [{ id: "x", name: "tags", value: "has spaces", label: "Spaces" }, ...tagsData.data] },
+      });
+      const ids = wrapper.findAll('input[type="radio"]').map((radio) => radio.attributes("id")!);
+
+      expect(new Set(ids).size).toBe(ids.length);
+      ids.forEach((id) => expect(id).not.toMatch(/\s/));
+      expect(ids).not.toContain("tags-has spaces");
+    });
+
+    it("keeps button radio ids unique across two groups sharing a name", async () => {
+      const Host = defineComponent({
+        components: { MultipleRadiobuttons },
+        setup: () => ({ props: { ...defaultProps, isButton: true } }),
+        template: `<div><MultipleRadiobuttons v-bind="props" /><MultipleRadiobuttons v-bind="props" /></div>`,
+      });
+      const host = await mountSuspended(Host);
+      mounted.push(host);
+      const ids = host.findAll('input[type="radio"]').map((radio) => radio.attributes("id"));
+
+      expect(ids).toHaveLength(tagsData.data.length * 2);
+      expect(new Set(ids).size).toBe(ids.length);
+    });
+
+    it("updates passthrough classes when the prop changes", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: ["first"] });
+      await wrapper.setProps({ styleClassPassthrough: ["second"] });
+      const classes = wrapper.find(".form-fieldset").classes();
+
+      expect(classes).toContain("second");
+      expect(classes).not.toContain("first");
+    });
+
     it("renders a radiogroup fieldset with the legend", async () => {
       const wrapper = await createWrapper();
       const fieldset = wrapper.find("fieldset");

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

@@ -1,36 +1,71 @@
-# InputRangeCore — Consumer Styling Guide
+# InputRange / InputRangeField — Consumer Styling Guide
+
+> **Renamed 2026-10-16**: `InputRangeCore` → `InputRange`, `InputRangeDefault` → `InputRangeField`.
+> Classes changed with them, see **State hooks**. Token names are unchanged.
 
 ## 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` | `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-background-colour` | `var(--theme-input-surface)` | Background colour of each `markers` slot dot |
+| `--input-range-marker-padding` | `0.5rem` | Space around the icon in each marker dot (dot size = icon size + 2 × this) |
 | `--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` | `var(--slate-04)` | Marker dot outline colour |
-| `--input-range-marker-icon-size` | `2rem` | Font size of the marker icon (`.marker-icon`) |
+| `--input-range-marker-outline-colour` | `var(--theme-border)` | Marker dot outline colour |
+| `--input-range-marker-icon-size` | `2rem` | Font size of the marker icon (`.input-range-marker-icon`) |
 | `--input-range-marker-icon-colour` | `var(--input-range-accent-colour, var(--theme-accent))` | Marker icon colour |
+| `--input-range-marker-track-colour` | `var(--theme-border)` | The line joining the markers, drawn behind them |
+| `--input-range-marker-track-width` | `0.2rem` | Thickness of that line |
+| `--input-range-marker-selected-colour` | `var(--input-range-accent-colour, var(--theme-accent))` | Ring drawn around the selected marker (the restyled range thumb) |
+| `--input-range-marker-selected-width` | `0.3rem` | Thickness of that ring |
 | `--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`.
+Geometry (thumb/track height, step-button size, 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`.
+
+Private (not public API): `--_input-range-marker-size`, the dot size worked out from the icon size
+and padding, shared by the markers, the selected ring and the line inset.
 
-```css
-.my-page {
-  --input-range-accent-colour: var(--brand-primary);
-  --input-range-marker-background-colour: var(--brand-primary);
-}
-```
+> **Changed 2026-10-16**: the marker dot defaults assumed a dark page (`hsl(0, 29%, 3%)`
+> background, `--slate-04` outline). They now default to `--theme-input-surface` and
+> `--theme-border`. Set the two marker tokens if you relied on the dark dots.
+>
+> **Changed 2026-10-16**: markers mode was broken: the range line was drawn across the icons and
+> nothing showed the selected value (the thumb was hidden), and only the thin line was clickable.
+> The line now sits behind the markers, the whole marker row is the slider, and the thumb is a ring
+> the size of a marker that circles the selected one. Markers get an explicit size
+> (`--input-range-marker-icon-size` + 2 × `--input-range-marker-padding`) so the ring lines up.
+
+---
+
+## State hooks
+
+| Attribute | On | When |
+|---|---|---|
+| `data-theme` | `.input-range-wrapper`, `.input-range-field` | Always, mirrors `theme` |
+| `data-invalid` | `.input-range-wrapper`, `.input-range-field` | `field-has-error` (the input also gets `aria-invalid="true"`) |
+| `data-has-markers` | `.input-range-wrapper` | The `markers` slot is filled: the line moves behind the markers, the input becomes a transparent layer over the whole row, and the thumb becomes a ring around the selected marker |
 
-Or scope to a single instance via `styleClassPassthrough`:
+Inner elements: `.input-range` (the native input), `.input-range-container`, `.input-range-slot`
+(both step-button holders), `.input-range-slot-left`, `.input-range-slot-right`,
+`.input-range-label` (the Field's `InputLabel`). Pre-styled classes for your `markers` slot
+markup: `.input-range-markers` (the row), `.input-range-marker` (each dot),
+`.input-range-marker-icon`; and `.input-range-datalist` for a slotted `<datalist>`.
 
-```vue
-<InputRangeCore style-class-passthrough="price-range" ... />
-```
+> **Changed 2026-10-16**:
+>
+> - Classes renamed: `.input-range-core` → `.input-range`, `.input-range-with-label` →
+>   `.input-range-field`, `.slot.left` / `.slot.right` → `.input-range-slot-left` /
+>   `.input-range-slot-right`, markers-slot `.marker` / `.marker-icon` → `.input-range-marker` /
+>   `.input-range-marker-icon` (update your slot markup).
+> - `.has-markers` on the input → `[data-has-markers]` on the wrapper; the Field's `.error` class →
+>   `[data-invalid]`. The Field's label class was the number field's `input-number-label`; it's
+>   now `input-range-label`.
+> - Long label, description and error copy wraps (`overflow-wrap: anywhere` on
+>   `.input-range-field`), and the slider shrinks between its step buttons instead of overflowing.
 
 ---
 
@@ -44,15 +79,22 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ---
 
+## Class passthrough
+
+`InputRange`'s `:style-class-passthrough` lands on the native `<input class="input-range">`.
+`InputRangeField`'s lands on its root `.input-range-field` only. Both react to prop changes.
+
+> **Changed 2026-10-16**: `InputRangeField` also forwarded its passthrough classes to the inner
+> input, so a class meant for the field matched two elements. If you styled the input through the
+> Field's passthrough, select `.your-class .input-range` instead.
+
+---
+
 ## 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.
+  never declared anywhere in the codebase (no fallback either). Per the CSS spec that made the
+  whole `accent-color` declaration invalid at computed-value time, so it silently fell back to the
+  browser's native default accent colour. Fixed 2026-09-21; see the 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."
-
+  CSS in this component (or elsewhere in the library) styles that class: it's a no-op today.

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

@@ -0,0 +1,247 @@
+<template>
+  <div
+    class="input-range-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : undefined"
+    :data-has-markers="slots.markers ? '' : undefined"
+  >
+    <div v-if="slots.left" class="input-range-slot input-range-slot-left">
+      <slot name="left"></slot>
+    </div>
+
+    <div class="input-range-container">
+      <slot v-if="slots.markers" name="markers"></slot>
+
+      <input
+        :id
+        v-model="modelValue"
+        type="range"
+        :name
+        :required
+        :min
+        :max
+        :step
+        :list="slots.datalist ? datalistId : undefined"
+        :class="['input-range', `input-range--${weight}`, elementClasses]"
+        :aria-describedby
+        :aria-invalid="fieldHasError ? 'true' : undefined"
+      />
+
+      <slot v-if="slots.datalist" name="datalist" :datalist-id="datalistId"></slot>
+    </div>
+    <div v-if="slots.right" class="input-range-slot input-range-slot-right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step?: number;
+  placeholder?: string;
+  required?: boolean;
+  theme?: FormUiTheme;
+  weight?: FormWeight;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  ariaDescribedby?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  placeholder: "",
+  required: false,
+  theme: "default",
+  weight: "normal",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  ariaDescribedby: "",
+});
+
+const slots = useSlots();
+
+const modelValue = defineModel<number>({
+  required: true,
+});
+
+const datalistId = useId();
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-range-wrapper {
+    --_input-range-marker-size: calc(
+      var(--input-range-marker-icon-size, 2rem) + 2 * var(--input-range-marker-padding, 0.5rem)
+    );
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    .input-range-slot {
+      align-self: flex-start;
+      flex-shrink: 0;
+
+      .input-button {
+        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;
+      min-inline-size: 0;
+
+      display: grid;
+      grid-template-areas: "element-stack";
+
+      .input-range-markers {
+        grid-area: element-stack;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        .input-range-marker {
+          box-sizing: border-box;
+          display: grid;
+          place-items: center;
+          flex-shrink: 0;
+          inline-size: var(--_input-range-marker-size);
+          block-size: var(--_input-range-marker-size);
+          background-color: var(--input-range-marker-background-colour, var(--theme-input-surface));
+          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, var(--theme-border));
+
+          .input-range-marker-icon {
+            font-size: var(--input-range-marker-icon-size, 2rem);
+            line-height: 1;
+            display: block;
+            color: var(--input-range-marker-icon-colour, var(--input-range-accent-colour, var(--theme-accent)));
+          }
+        }
+      }
+
+      .input-range {
+        grid-area: element-stack;
+
+        accent-color: var(--input-range-accent-colour, var(--theme-accent));
+        height: var(--input-range-button-size);
+        margin: 0;
+        width: 100%;
+
+        &:focus-visible {
+          box-shadow: var(--form-focus-box-shadow);
+        }
+      }
+
+      .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;
+        }
+      }
+    }
+
+    &[data-has-markers] {
+      .input-range-container::before {
+        content: "";
+        grid-area: element-stack;
+        align-self: center;
+        z-index: 1;
+        height: var(--input-range-marker-track-width, 0.2rem);
+        margin-inline: calc(var(--_input-range-marker-size) / 2);
+        background-color: var(--input-range-marker-track-colour, var(--theme-border));
+      }
+
+      .input-range-markers {
+        z-index: 2;
+      }
+
+      .input-range {
+        -webkit-appearance: none;
+        appearance: none;
+        align-self: center;
+        z-index: 3;
+        height: var(--_input-range-marker-size);
+        background: transparent;
+        cursor: pointer;
+
+        &:focus-visible {
+          box-shadow: none;
+
+          &::-webkit-slider-thumb {
+            box-shadow: var(--form-focus-box-shadow);
+          }
+
+          &::-moz-range-thumb {
+            box-shadow: var(--form-focus-box-shadow);
+          }
+        }
+
+        &::-webkit-slider-runnable-track {
+          height: var(--_input-range-marker-size);
+          background: transparent;
+        }
+
+        &::-moz-range-track {
+          background: transparent;
+        }
+
+        &::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          box-sizing: border-box;
+          width: var(--_input-range-marker-size);
+          height: var(--_input-range-marker-size);
+          border: var(--input-range-marker-selected-width, 0.3rem) solid
+            var(--input-range-marker-selected-colour, var(--input-range-accent-colour, var(--theme-accent)));
+          border-radius: var(--input-range-marker-border-radius, 50%);
+          background: transparent;
+        }
+
+        &::-moz-range-thumb {
+          box-sizing: border-box;
+          width: var(--_input-range-marker-size);
+          height: var(--_input-range-marker-size);
+          border: var(--input-range-marker-selected-width, 0.3rem) solid
+            var(--input-range-marker-selected-colour, var(--input-range-accent-colour, var(--theme-accent)));
+          border-radius: var(--input-range-marker-border-radius, 50%);
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+</style>