srcdev-nuxt-components 9.6.10 → 9.6.11

package/app/components/05.forms/segmented-control/tests/SegmentedControl.spec.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, ref } from "vue";
+import SegmentedControl from "../SegmentedControl.vue";
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
+const buildOptions = (): IFormMultipleOptions => ({
+  data: [
+    { id: "system", name: "scheme", value: "system", label: "System", icon: "radix-icons:gear" },
+    { id: "light", name: "scheme", value: "light", label: "Light", icon: "radix-icons:sun" },
+    { id: "dark", name: "scheme", value: "dark", label: "Dark", icon: "radix-icons:moon" },
+  ],
+  total: 3,
+  skip: 0,
+  limit: 3,
+});
+
+const mounted: { unmount: () => void }[] = [];
+
+const mountSwitch = async (props: Record<string, unknown> = {}) => {
+  const wrapper = await mountSuspended(SegmentedControl, {
+    props: {
+      modelValue: "system",
+      fieldData: buildOptions(),
+      ...props,
+    },
+  });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+interface SegmentedControlInstance {
+  selectedOptionIndex: number;
+  markerIndex: number;
+  optionCount: number;
+}
+
+const inputs = (wrapper: Awaited<ReturnType<typeof mountSwitch>>) => wrapper.findAll("input.segmented-control-option-input");
+const optionLabels = (wrapper: Awaited<ReturnType<typeof mountSwitch>>) => wrapper.findAll("label.segmented-control-option");
+
+describe("SegmentedControl", () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
+  });
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSwitch();
+    expect(wrapper.vm).toBeTruthy();
+    expect(wrapper.find(".segmented-control").exists()).toBe(true);
+  });
+
+  it("renders one radio per option with its value and the shared name", async () => {
+    const wrapper = await mountSwitch({ name: "colour-scheme" });
+    expect(inputs(wrapper)).toHaveLength(3);
+    expect(inputs(wrapper).map((i) => (i.element as HTMLInputElement).value)).toEqual(["system", "light", "dark"]);
+    inputs(wrapper).forEach((i) => {
+      expect(i.attributes("type")).toBe("radio");
+      expect(i.attributes("name")).toBe("colour-scheme");
+    });
+  });
+
+  it("builds ids from useId, not from option data", async () => {
+    const wrapper = await mountSwitch();
+    const ids = inputs(wrapper).map((i) => i.attributes("id"));
+    expect(ids).not.toContain("system");
+    expect(new Set(ids).size).toBe(3);
+    expect(optionLabels(wrapper).map((l) => l.attributes("for"))).toEqual(ids);
+  });
+
+  it("gives two instances separate radio groups and ids", async () => {
+    const Host = defineComponent({
+      components: { SegmentedControl },
+      setup() {
+        return { first: ref("system"), second: ref("dark"), options: ref(buildOptions()) };
+      },
+      template: `
+        <div>
+          <SegmentedControl v-model="first" v-model:field-data="options" />
+          <SegmentedControl v-model="second" v-model:field-data="options" />
+        </div>
+      `,
+    });
+    const wrapper = await mountSuspended(Host);
+    mounted.push(wrapper);
+    const all = wrapper.findAll("input.segmented-control-option-input");
+    const names = new Set(all.map((i) => i.attributes("name")));
+    const ids = new Set(all.map((i) => i.attributes("id")));
+    expect(names.size).toBe(2);
+    expect(ids.size).toBe(6);
+  });
+
+  it("renders the label text for screen readers", async () => {
+    const wrapper = await mountSwitch();
+    expect(wrapper.findAll(".segmented-control-option .sr-only").map((s) => s.text())).toEqual([
+      "System",
+      "Light",
+      "Dark",
+    ]);
+  });
+
+  it("exposes the options as a radiogroup", async () => {
+    const wrapper = await mountSwitch();
+    const group = wrapper.find(".segmented-control-options");
+    expect(group.attributes("role")).toBe("radiogroup");
+    expect(group.attributes("aria-label")).toBeUndefined();
+  });
+
+  it("applies ariaLabel to the radiogroup", async () => {
+    const wrapper = await mountSwitch({ ariaLabel: "Colour scheme" });
+    expect(wrapper.find(".segmented-control-options").attributes("aria-label")).toBe("Colour scheme");
+  });
+
+  it("hides the decorative marker from assistive tech", async () => {
+    const wrapper = await mountSwitch();
+    expect(wrapper.find(".segmented-control-marker-layer").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("checks the radio matching modelValue", async () => {
+    const wrapper = await mountSwitch({ modelValue: "light" });
+    const checked = inputs(wrapper).map((i) => (i.element as HTMLInputElement).checked);
+    expect(checked).toEqual([false, true, false]);
+  });
+
+  it("emits update:modelValue when another option is chosen", async () => {
+    const wrapper = await mountSwitch();
+    await inputs(wrapper)[2]!.setValue(true);
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["dark"]);
+  });
+
+  it("marks only the selected option with data-checked and exposes its value", async () => {
+    const wrapper = await mountSwitch({ modelValue: "dark" });
+    expect(optionLabels(wrapper).map((l) => l.attributes("data-checked"))).toEqual([undefined, undefined, ""]);
+    expect(optionLabels(wrapper).map((l) => l.attributes("data-value"))).toEqual(["system", "light", "dark"]);
+
+    await wrapper.setProps({ modelValue: "light" });
+    expect(optionLabels(wrapper).map((l) => l.attributes("data-checked"))).toEqual([undefined, "", undefined]);
+  });
+
+  it("does not use collision-prone bare class names", async () => {
+    const wrapper = await mountSwitch();
+    for (const name of [".option-group", ".option-icon", ".option-input", ".selected-option-marker", ".active", ".show"]) {
+      expect(wrapper.find(name).exists()).toBe(false);
+    }
+  });
+
+  it("omits the icon when an option has none", async () => {
+    const options = buildOptions();
+    delete options.data[1]!.icon;
+    const wrapper = await mountSwitch({ fieldData: options });
+    expect(wrapper.findAll(".segmented-control-option-icon")).toHaveLength(2);
+    expect(inputs(wrapper)).toHaveLength(3);
+  });
+
+  it("marks icons as decorative", async () => {
+    const wrapper = await mountSwitch();
+    wrapper.findAll(".segmented-control-option-icon").forEach((icon) => {
+      expect(icon.attributes("aria-hidden")).toBe("true");
+    });
+  });
+
+  it("tracks the selected index and hides the marker for an unknown value", async () => {
+    const wrapper = await mountSwitch({ modelValue: "dark" });
+    const vm = wrapper.vm as unknown as SegmentedControlInstance;
+    const root = () => wrapper.find(".segmented-control");
+    expect(vm.selectedOptionIndex).toBe(2);
+    expect(vm.markerIndex).toBe(2);
+    expect(root().attributes("data-has-selection")).toBe("");
+
+    await wrapper.setProps({ modelValue: "unknown" });
+    expect(vm.selectedOptionIndex).toBe(-1);
+    expect(vm.markerIndex).toBe(0);
+    expect(root().attributes("data-has-selection")).toBeUndefined();
+  });
+
+  it("sizes the grid from the option count, never below one column", async () => {
+    const four = buildOptions();
+    four.data.push({ id: "auto", name: "scheme", value: "auto", label: "Auto", icon: "radix-icons:gear" });
+    const wrapper = await mountSwitch({ fieldData: four });
+    expect((wrapper.vm as unknown as SegmentedControlInstance).optionCount).toBe(4);
+
+    const empty = await mountSwitch({ fieldData: { data: [], total: 0, skip: 0, limit: 0 } });
+    expect((empty.vm as unknown as SegmentedControlInstance).optionCount).toBe(1);
+    expect(empty.findAll("input")).toHaveLength(0);
+  });
+
+  it("applies the theme as data-theme", async () => {
+    const wrapper = await mountSwitch({ theme: "success" });
+    expect(wrapper.find(".segmented-control").attributes("data-theme")).toBe("success");
+  });
+
+  it("applies styleClassPassthrough classes to the root and reacts to changes", async () => {
+    const wrapper = await mountSwitch({ styleClassPassthrough: ["small", "extra"] });
+    const root = () => wrapper.find(".segmented-control");
+    expect(root().classes()).toContain("small");
+    expect(root().classes()).toContain("extra");
+
+    await wrapper.setProps({ styleClassPassthrough: ["other"] });
+    expect(root().classes()).toContain("other");
+    expect(root().classes()).not.toContain("small");
+  });
+});

package/app/components/05.forms/toggle-switch/CONSUMER-STYLING.md

@@ -18,6 +18,8 @@ this two-tier shape exists.
 | `--toggle-switch-surface` | `var(--theme-checkbox-symbol-surface)` | Track background (resting) |
 | `--toggle-switch-surface-hover` | `var(--theme-surface-subtle)` | Track background on hover |
 | `--toggle-switch-border` | `var(--theme-border)` | Track border colour |
+| `--toggle-switch-border-hover` | the resolved border | 1px track outline colour on hover |
+| `--toggle-switch-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (on the track). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--toggle-switch-border-focus` | `var(--theme-border-focus)` | Track outline colour on `:focus-visible` |
 | `--toggle-switch-symbol-border` | `var(--theme-text)` | Thumb border colour |
 | `--toggle-switch-symbol-surface-off` | `var(--theme-on-surface)` | Thumb background, off |
@@ -54,6 +56,11 @@ Only set `--toggle-switch-track-width` for a width the formula doesn't produce.
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

package/app/components/05.forms/toggle-switch/ToggleSwitch.vue

@@ -133,12 +133,14 @@ watch(
         background-color: var(--toggle-switch-surface, var(--theme-checkbox-symbol-surface));
         border: var(--form-element-border-width) solid var(--toggle-switch-border, var(--theme-border));
         outline: var(--form-element-outline-width) solid transparent;
+        box-shadow: 0 0 0 var(--form-element-shadow-width) var(--toggle-switch-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
         border-radius: var(--_border-radius);
         width: var(--_track-width);
         padding: calc(var(--input-toggle-wrapper-padding) + var(--input-toggle-symbol-outline-width));
 
         &:hover {
           background-color: var(--toggle-switch-surface-hover, var(--theme-surface-subtle));
+          outline-color: var(--toggle-switch-border-hover, var(--toggle-switch-border, var(--theme-border)));
           cursor: pointer;
         }
 

package/app/types/components/index.ts

@@ -8,7 +8,7 @@ export * from "./responsive-header.d"
 export * from "./display-toast.d"
 export * from "./display-prompt.d"
 export * from "./qr-code.d"
-export * from "./alert-mask-core.d"
+export * from "./alert-mask.d"
 export * from "./container-glow.d"
 export * from "./hero-text"
 export * from "./social-icons-list.d"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.10",
+  "version": "9.6.11",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/.vscode/srcdev-component-alert-mask-core.code-snippets

@@ -1,31 +0,0 @@
-{
-  "SRCDEV AlertMaskCore Basic": {
-    "description": "AlertMaskCore — SVG border/background mask sized to slotted content",
-    "scope": "vue,html",
-    "body": [
-      "<AlertMaskCore>",
-      "  $0",
-      "</AlertMaskCore>"
-    ]
-  },
-  "SRCDEV AlertMaskCore Custom Config": {
-    "description": "AlertMaskCore with custom colour/geometry config",
-    "scope": "vue,html",
-    "body": [
-      "<AlertMaskCore",
-      "  :config=\"{",
-      "    borderColour: '$1var(--theme-accent)',",
-      "    backgroundColour: '$2rgba(0, 0, 0, 0.3)',",
-      "    radiusLeft: $38,",
-      "    radiusRight: $44,",
-      "    borderLeft: $56,",
-      "    borderTop: $61,",
-      "    borderRight: $71,",
-      "    borderBottom: $81,",
-      "  }\"",
-      ">",
-      "  $0",
-      "</AlertMaskCore>"
-    ]
-  }
-}

package/app/components/01.atoms/alert-mask/AlertMaskCore.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="alert-mask-core" :class="[elementClasses]">
-    <svg
-      class="alert-mask-decorator"
-      :style="{ '--_height': svgHeight + 'px' }"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <defs>
-        <mask :id="maskId" maskUnits="userSpaceOnUse">
-          <path :d="outerPath" fill="white" />
-          <path :d="innerPath" fill="black" />
-        </mask>
-      </defs>
-
-      <path
-        :d="outerPath"
-        :style="{ fill: cfg.borderColour }"
-        :mask="`url(#${maskId})`"
-        vector-effect="non-scaling-stroke"
-      />
-      <path :d="innerPath" :style="{ fill: cfg.backgroundColour }" />
-    </svg>
-
-    <div
-      class="alert-mask-content"
-      :style="{
-        '--_inset-inline-start': (props.config?.borderLeft ?? 0) + 'px',
-        '--_inset-inline-end': (props.config?.borderRight ?? 0) + 'px',
-        '--_inset-block-start': (props.config?.borderTop ?? 0) + 'px',
-        '--_inset-block-end': (props.config?.borderBottom ?? 0) + 'px',
-      }"
-    >
-      <div ref="alertContentRef" class="alert-mask-content-slot">
-        <slot name="default"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { AlertMaskConfig } from "~/types/components";
-
-interface Props {
-  config?: AlertMaskConfig;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  config: () => ({}),
-  styleClassPassthrough: () => [],
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const maskId = `alert-mask-${useId()}`;
-const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef");
-const svgWidth = ref(0);
-const svgHeight = ref(0);
-let resizeObserver: ResizeObserver | null = null;
-
-// Update dimensions based on content
-onMounted(() => {
-  const updateDimensions = () => {
-    const contentEl = alertContentRef.value;
-    if (!contentEl) return;
-
-    const rect = contentEl.getBoundingClientRect();
-    const { borderLeft, borderTop, borderRight, borderBottom } = cfg.value;
-
-    // Calculate total dimensions including borders
-    svgWidth.value = rect.width + borderLeft + borderRight;
-    svgHeight.value = rect.height + borderTop + borderBottom;
-  };
-
-  // Initial measurement
-  nextTick(updateDimensions);
-
-  // Observe content changes
-  const contentEl = alertContentRef.value;
-  if (contentEl) {
-    resizeObserver = new ResizeObserver(updateDimensions);
-    resizeObserver.observe(contentEl);
-  }
-});
-
-onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
-});
-
-const cfg = computed(() => ({
-  backgroundColour: props.config?.backgroundColour ?? "rgba(0,0,0,0.25)",
-  borderColour: props.config?.borderColour ?? "var(--orange-08)",
-  radiusLeft: props.config?.radiusLeft ?? 12,
-  radiusRight: props.config?.radiusRight ?? 12,
-  borderLeft: props.config?.borderLeft ?? 8,
-  borderTop: props.config?.borderTop ?? 8,
-  borderRight: props.config?.borderRight ?? 8,
-  borderBottom: props.config?.borderBottom ?? 8,
-}));
-
-// Outer border path (fixed radii)
-const outerPath = computed(() => {
-  const width = svgWidth.value;
-  const height = svgHeight.value;
-  const { radiusLeft, radiusRight } = cfg.value;
-
-  if (!width || !height) return "";
-
-  return `
-    M ${radiusLeft} 0
-    L ${width - radiusRight} 0
-    Q ${width} 0 ${width} ${radiusRight}
-    L ${width} ${height - radiusRight}
-    Q ${width} ${height} ${width - radiusRight} ${height}
-    L ${radiusLeft} ${height}
-    Q 0 ${height} 0 ${height - radiusLeft}
-    L 0 ${radiusLeft}
-    Q 0 0 ${radiusLeft} 0 Z
-  `;
-});
-
-// Inner cutout (based on fixed pixel border thickness)
-const innerPath = computed(() => {
-  const width = svgWidth.value;
-  const height = svgHeight.value;
-  const { radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom: borderBottom } = cfg.value;
-
-  if (!width || !height) return "";
-
-  return `
-    M ${radiusLeft + borderLeft} ${borderTop}
-    L ${width - radiusRight - borderRight} ${borderTop}
-    Q ${width - borderRight} ${borderTop} ${width - borderRight} ${radiusRight + borderTop}
-    L ${width - borderRight} ${height - radiusRight - borderBottom}
-    Q ${width - borderRight} ${height - borderBottom} ${width - radiusRight - borderRight} ${height - borderBottom}
-    L ${radiusLeft + borderLeft} ${height - borderBottom}
-    Q ${borderLeft} ${height - borderBottom} ${borderLeft} ${height - radiusLeft - borderBottom}
-    L ${borderLeft} ${radiusLeft + borderTop}
-    Q ${borderLeft} ${borderTop} ${radiusLeft + borderLeft} ${borderTop} Z
-  `;
-});
-</script>
-
-<style lang="css">
-@layer components {
-.alert-mask-core {
-  display: grid;
-  grid-template-areas: "mask";
-
-  .alert-mask-decorator {
-    grid-area: mask;
-    width: 100%;
-    height: var(--_height);
-  }
-
-  .alert-mask-content {
-    grid-area: mask;
-    margin-block: var(--_inset-block-start) var(--_inset-block-end);
-    margin-inline: var(--_inset-inline-start) var(--_inset-inline-end);
-  }
-}
-}
-</style>

package/app/components/01.atoms/alert-mask/stories/AlertMaskCore.stories.ts

@@ -1,105 +0,0 @@
-import AlertMaskCore from "../AlertMaskCore.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-const meta: Meta<typeof AlertMaskCore> = {
-  title: "Atoms/AlertMaskCore",
-  component: AlertMaskCore,
-  argTypes: {
-    config: {
-      control: "object",
-      description:
-        "Border/background colour and geometry: backgroundColour, borderColour, radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom",
-      table: { category: "Basic" },
-    },
-    styleClassPassthrough: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Draws a border/background mask around slotted content via an SVG path, sized to the measured content. Colour and geometry are set via the `config` prop, not CSS tokens — see CONSUMER-STYLING.md.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AlertMaskCore>;
-
-// The mask is a translucent fill plus a cut-out border, so it needs something busy behind it to read at all.
-const backdrop =
-  "background: url('/images/banners/video/lake-banner.jpg') center / cover; padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
-const gradientBackdrop =
-  "background: repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.18) 0 1.2rem, transparent 1.2rem 2.4rem), linear-gradient(120deg, oklch(70% 0.2 30), oklch(65% 0.2 200) 60%, oklch(55% 0.22 300)); padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
-
-export const CustomConfig: Story = {
-  args: {
-    config: {
-      backgroundColour: "rgba(0, 0, 0, 0.3)",
-      borderColour: "var(--theme-accent)",
-      radiusLeft: 8,
-      radiusRight: 4,
-      borderLeft: 6,
-      borderTop: 1,
-      borderRight: 1,
-      borderBottom: 1,
-    },
-  },
-  render: (args) => ({
-    components: { AlertMaskCore },
-    setup() {
-      return { args, backdrop };
-    },
-    template: `
-      <div data-theme="info" :style="backdrop">
-        <AlertMaskCore v-bind="args">
-          <p style="margin: 0; padding: 1.6rem; color: white;">Custom accent-bar config, matching AlertMaskedContent's default shape</p>
-        </AlertMaskCore>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "The accent-bar shape used by AlertMaskedContent: thick left radius/border, thin elsewhere.",
-      },
-    },
-  },
-};
-
-export const OverGradient: Story = {
-  args: {
-    config: {
-      backgroundColour: "rgba(0, 0, 0, 0.3)",
-      borderColour: "white",
-      radiusLeft: 16,
-      radiusRight: 16,
-      borderLeft: 4,
-      borderTop: 4,
-      borderRight: 4,
-      borderBottom: 4,
-    },
-  },
-  render: (args) => ({
-    components: { AlertMaskCore },
-    setup() {
-      return { args, gradientBackdrop };
-    },
-    template: `
-      <div :style="gradientBackdrop">
-        <AlertMaskCore v-bind="args">
-          <p style="margin: 0; padding: 1.6rem; color: white;">Even border all round: the stripes show through the fill and stop at the border's inner edge.</p>
-        </AlertMaskCore>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "A striped gradient behind an even 4px white border, so the translucent fill and the border's cut-out are both visible.",
-      },
-    },
-  },
-};