srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/05.forms/toggle-switch/tests/ToggleSwitchCore.spec.ts

@@ -0,0 +1,101 @@
+// 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 "../ToggleSwitchCore.vue";
+
+const initialPropsData = {
+  id: "test-toggle",
+  name: "testName",
+  modelValue: false,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+  });
+};
+
+describe("ToggleSwitchCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("binds v-model to the checkbox checked state", async () => {
+    wrapper = await wrapperFactory({ modelValue: true });
+    const input = wrapper.find<HTMLInputElement>("input[type='checkbox']");
+    expect(input.element.checked).toBe(true);
+  });
+
+  it("toggles modelValue when the wrapper is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: false });
+    await wrapper.find(".toggle-switch-wrapper").trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([true]);
+  });
+
+  it("toggles between custom trueValue/falseValue", async () => {
+    wrapper = await wrapperFactory({ modelValue: "off", trueValue: "on", falseValue: "off" });
+    await wrapper.find(".toggle-switch-wrapper").trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["on"]);
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("input").attributes("required")).toBeDefined();
+  });
+
+  it("does not set required attribute by default", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("required")).toBeUndefined();
+  });
+
+  it("sets data-theme from the theme prop", async () => {
+    wrapper = await wrapperFactory({ theme: "success" });
+    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("success");
+  });
+
+  it("sets data-theme to error and aria-invalid when fieldHasError is true, overriding theme", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, theme: "success" });
+    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("error");
+    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("applies styleClassPassthrough to the root element", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle-class"] });
+    expect(wrapper.find(".toggle-switch-core").classes()).toContain("custom-toggle-class");
+  });
+
+  it("renders default icons when no icon slots are provided", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".toggle-switch-wrapper").classes()).toContain("use-default-icons");
+  });
+
+  it("renders custom icon slot content instead of the default icon", async () => {
+    wrapper = await mountSuspended(ComponentUnderTest, {
+      attachTo: document.body,
+      props: initialPropsData,
+      slots: {
+        iconOn: () => "ON",
+        iconOff: () => "OFF",
+      },
+    });
+    expect(wrapper.find(".toggle-switch-wrapper").classes()).not.toContain("use-default-icons");
+    expect(wrapper.find(".icon-on").text()).toBe("ON");
+    expect(wrapper.find(".icon-off").text()).toBe("OFF");
+  });
+
+  it("consumes round as a declared prop instead of leaking it as a DOM attribute", async () => {
+    wrapper = await wrapperFactory({ round: false });
+    expect(wrapper.props("round")).toBe(false);
+    expect(wrapper.attributes("round")).toBeUndefined();
+  });
+
+  it("defaults round to true", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.props("round")).toBe(true);
+  });
+});

package/app/components/05.forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="theme">
+  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formUiTheme">
     <InputLabel
       :id
       :for="toggleSwitchId"
@@ -68,7 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
+const formUiTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme;
 });
 
@@ -84,15 +84,13 @@ const ariaDescribedby = computed(() => {
   return props.fieldHasError ? errorId.value : ariaDescribedbyId;
 });
 
-const modelValue = defineModel<string | number | boolean>();
+const modelValue = defineModel<string | number | boolean>({ required: true });
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
 @layer components {
 .toggle-switch-with-label {
-  --_transition-duration: 0.4s;
-
   .toggle-switch-label {
     display: block;
   }

package/app/components/05.forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -63,14 +63,13 @@ const labelWeightClass = computed(() => {
   return labelWeightClassMap[props.labelWeight] || "body-normal-semibold";
 });
 
-const modelValue = defineModel<string | number | boolean>();
+const modelValue = defineModel<string | number | boolean>({ required: true });
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
 @layer components {
 .toggle-switch-with-label-inline {
-  --_transition-duration: 0.4s;
   display: flex;
   align-items: center;
   gap: 12px;

package/app/components/05.forms/toggle-switch/variants/tests/ToggleSwitchWithLabel.spec.ts

@@ -0,0 +1,77 @@
+// 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 "../ToggleSwitchWithLabel.vue";
+
+const initialPropsData = {
+  name: "notifications",
+  label: "Enable notifications",
+  errorMessage: "",
+  modelValue: false,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("ToggleSwitchWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Enable dark mode" });
+    expect(wrapper.text()).toContain("Enable dark mode");
+  });
+
+  it("renders a checkbox input", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input[type='checkbox']").exists()).toBe(true);
+  });
+
+  it("associates the label with the checkbox via matching for/id", async () => {
+    wrapper = await wrapperFactory();
+    const inputId = wrapper.find("input[type='checkbox']").attributes("id");
+    expect(wrapper.find("label").attributes("for")).toBe(inputId);
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "You must accept" });
+    expect(wrapper.text()).toContain("You must accept");
+  });
+
+  it("renders the description slot", async () => {
+    wrapper = await wrapperFactory({}, { description: () => "Turn this on to receive notifications" });
+    expect(wrapper.text()).toContain("Turn this on to receive notifications");
+  });
+
+  it("forwards required to the underlying input", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("input").attributes("required")).toBeDefined();
+  });
+
+  it("applies the error theme to ToggleSwitchCore when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, theme: "default" });
+    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("error");
+  });
+
+  it("applies styleClassPassthrough to the root element", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle"] });
+    expect(wrapper.find(".toggle-switch-with-label").classes()).toContain("custom-toggle");
+  });
+
+  it("forwards round to ToggleSwitchCore without leaking it as a DOM attribute", async () => {
+    wrapper = await wrapperFactory({ round: false });
+    const core = wrapper.findComponent({ name: "ToggleSwitchCore" });
+    expect(core.props("round")).toBe(false);
+    expect(wrapper.find(".toggle-switch-core").attributes("round")).toBeUndefined();
+  });
+});

package/app/components/05.forms/toggle-switch/variants/tests/ToggleSwitchWithLabelInline.spec.ts

@@ -0,0 +1,66 @@
+// 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 "../ToggleSwitchWithLabelInline.vue";
+
+const initialPropsData = {
+  name: "notifications",
+  label: "Enable notifications",
+  modelValue: false,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("ToggleSwitchWithLabelInline", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Dark mode" });
+    expect(wrapper.text()).toContain("Dark mode");
+  });
+
+  it("renders a checkbox input", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input[type='checkbox']").exists()).toBe(true);
+  });
+
+  it("associates the label with the checkbox via matching for/id", async () => {
+    wrapper = await wrapperFactory();
+    const inputId = wrapper.find("input[type='checkbox']").attributes("id");
+    expect(wrapper.find("label").attributes("for")).toBe(inputId);
+  });
+
+  it("defaults labelWeight to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-switch-label").classes()).toContain("body-normal");
+  });
+
+  it("maps labelWeight to the matching body-* class", async () => {
+    wrapper = await wrapperFactory({ labelWeight: "bold" });
+    expect(wrapper.find(".input-switch-label").classes()).toContain("body-normal-bold");
+  });
+
+  it("applies styleClassPassthrough to the root element", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle-inline"] });
+    expect(wrapper.find(".toggle-switch-with-label-inline").classes()).toContain("custom-toggle-inline");
+  });
+
+  it("forwards round to ToggleSwitchCore without leaking it as a DOM attribute", async () => {
+    wrapper = await wrapperFactory({ round: false });
+    const core = wrapper.findComponent({ name: "ToggleSwitchCore" });
+    expect(core.props("round")).toBe(false);
+    expect(wrapper.find(".toggle-switch-core").attributes("round")).toBeUndefined();
+  });
+});

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

@@ -13,11 +13,11 @@ the shared `--theme-*` token every other themed component also falls back to. Se
 | `--triple-toggle-switch-border` | `var(--theme-border)` | Wrapper border colour |
 | `--triple-toggle-switch-ring-focus` | `var(--theme-ring)` | Wrapper outline colour on `:focus-visible` |
 | `--triple-toggle-switch-marker-surface` | `var(--theme-input-surface)` | Selected-option marker background, when none of the `system`/`light`/`dark` `:has()` overrides below match |
-| `--triple-toggle-switch-marker-border` | `light-dark(var(--slate-10), var(--slate-00))` | Selected-option marker border colour |
-| `--triple-toggle-switch-option-border` | `light-dark(#00000025, #ffffff50)` | Each option's resting border colour |
-| `--triple-toggle-switch-option-border-hover` | `light-dark(var(--slate-10), var(--slate-00))` | Each option's outline colour on hover |
+| `--triple-toggle-switch-marker-border` | `var(--slate-10)` | Selected-option marker border colour |
+| `--triple-toggle-switch-option-border` | `#00000025` | Each option's resting border colour |
+| `--triple-toggle-switch-option-border-hover` | `var(--slate-10)` | Each option's outline colour on hover |
 | `--triple-toggle-switch-option-ring-focus` | `var(--theme-ring)` | Each option's outline colour on `:focus-visible` |
-| `--triple-toggle-switch-option-icon-color` | `light-dark(var(--slate-10), var(--slate-03))` | Option icon colour, resting (shared by the `.system`/`.light`/`.dark` selectors — see note) |
+| `--triple-toggle-switch-option-icon-color` | `var(--slate-10)` | Option icon colour, resting (shared by the `.system`/`.light`/`.dark` selectors — see note) |
 | `--triple-toggle-switch-option-icon-color-active` | `var(--slate-00)` | Option icon colour, selected |
 
 > **Two bugs fixed in this migration**:
@@ -45,8 +45,22 @@ the shared `--theme-*` token every other themed component also falls back to. Se
 > themselves are otherwise unchanged (so anything already targeting them by their corrected names
 > keeps working). Making the component genuinely value-agnostic would be a larger, separate change.
 
-Geometry (`--_form-*` sizing locals, `--form-element-*`) is shared/component-internal and untouched
-by this — see `theming-form-geometry-tokens.md` for the shared half.
+## Sizing tokens
+
+| Token | Default | Controls |
+|---|---|---|
+| `--triple-toggle-switch-gap` | `1rem` | Gap between the three option circles |
+| `--triple-toggle-switch-padding` | `0.6rem` | Wrapper padding |
+| `--triple-toggle-switch-option-padding` | `0.5rem` | Padding inside each option circle |
+| `--triple-toggle-switch-icon-size` | `2rem` | Icon font-size inside each option |
+
+Added 2026-09-20 when `DisplayThemeSwitch`'s `small` variant was found reaching directly into this
+component's private `--_form-items-gap`/`--_form-padding`/`--_select-scheme-group-padding`/
+`--_scheme-icon-font-size` locals via selector specificity — a consumer-relevant value (compact
+sizing) hidden behind a private var with no public override hook, the same bug class as CLAUDE.md
+pitfall #20. These four now wrap those locals as real public tokens; the shared geometry from
+`--form-element-*` (border width, outline width) is still shared/component-internal and untouched
+by this — see `theming-form-geometry-tokens.md` for that half.
 
 ---
 

package/app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -115,13 +115,15 @@ onMounted(() => {
       var(--form-element-outline-width)
   );
 
-  --_form-items-gap: 1rem;
-  --_form-padding: 0.6rem;
+  /* Sizing/spacing, publicly overridable — DisplayThemeSwitch's compact "small" styleClassPassthrough
+     variant sets these directly rather than reaching into the --_ locals below. */
+  --_form-items-gap: var(--triple-toggle-switch-gap, 1rem);
+  --_form-padding: var(--triple-toggle-switch-padding, 0.6rem);
 
   --_select-scheme-group-background-color: var(--_marker-surface);
   --_select-scheme-group-background-image: none;
-  --_select-scheme-group-padding: 0.5rem;
-  --_scheme-icon-font-size: 2rem;
+  --_select-scheme-group-padding: var(--triple-toggle-switch-option-padding, 0.5rem);
+  --_scheme-icon-font-size: var(--triple-toggle-switch-icon-size, 2rem);
   /* --_scheme-icon-colour: black; */
 
   /* "system" not "auto" — matches useSettingsStore's actual colourScheme value/CSS class
@@ -191,7 +193,7 @@ onMounted(() => {
         background-color: var(--_select-scheme-group-background-color);
         background-image: var(--_select-scheme-group-background-image);
         border: var(--form-element-border-width) solid
-          var(--triple-toggle-switch-marker-border, light-dark(var(--slate-10), var(--slate-00)));
+          var(--triple-toggle-switch-marker-border, var(--slate-10));
 
         border-radius: 50%;
 
@@ -225,7 +227,7 @@ onMounted(() => {
         place-content: center;
         background: transparent;
         border: var(--form-element-border-width) solid
-          var(--triple-toggle-switch-option-border, light-dark(#00000025, #ffffff50));
+          var(--triple-toggle-switch-option-border, #00000025);
         outline: var(--form-element-outline-width) solid transparent;
         border-radius: 50%;
         padding: var(--_select-scheme-group-padding);
@@ -235,7 +237,7 @@ onMounted(() => {
 
         &:has(.option-icon:hover) {
           outline: var(--form-element-outline-width) solid
-            var(--triple-toggle-switch-option-border-hover, light-dark(var(--slate-10), var(--slate-00)));
+            var(--triple-toggle-switch-option-border-hover, var(--slate-10));
         }
         &:has(input:focus-visible) {
           outline: var(--form-element-outline-width) solid var(--triple-toggle-switch-option-ring-focus, var(--theme-ring));
@@ -255,7 +257,7 @@ onMounted(() => {
           font-size: var(--_scheme-icon-font-size);
 
           &.system {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
@@ -263,7 +265,7 @@ onMounted(() => {
           }
 
           &.light {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
@@ -271,7 +273,7 @@ onMounted(() => {
           }
 
           &.dark {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));

package/app/types/components/container-glow.d.ts

@@ -0,0 +1,8 @@
+export interface ContainerGlowConfig {
+  proximity?: number
+  spread?: number
+  blur?: number
+  gap?: number
+  vertical?: boolean
+  inactiveOpacity?: number
+}

package/app/types/components/index.ts

@@ -1,6 +1,5 @@
 // Export types from the components directory
 export * from "./semantic-theme.d"
-export * from "./carousel-basic.d"
 export * from "./slider-gallery.d"
 export * from "./canvas-switcher.d"
 export * from "./display-chip.d"
@@ -10,6 +9,7 @@ export * from "./display-toast.d"
 export * from "./display-prompt.d"
 export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
+export * from "./container-glow.d"
 export * from "./hero-text"
 export * from "./navigation-horizontal.d"
 export * from "./social-icons-list.d"
@@ -20,3 +20,4 @@ export * from "./display-tooltip-defined.d"
 export * from "./marquee-scroller.d"
 export * from "./rotating-carousel-image.d"
 export * from "./skip-links.d"
+export * from "./select-menu.d"

package/app/types/components/select-menu.d.ts

@@ -0,0 +1,5 @@
+export interface SelectMenuOption {
+  value: string | number
+  label: string
+  icon?: string
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.9",
+  "version": "9.4.11",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -148,6 +148,7 @@
     "zod": "4.4.3"
   },
   "overrides": {
-    "vue-router": "5.2.0"
+    "vue-router": "5.2.0",
+    "h3": "1.15.11"
   }
 }

package/.vscode/srcdev-component-toggle-switch-core.code-snippets

@@ -1,13 +0,0 @@
-{
-  "SRCDEV ToggleSwitchCore": {
-    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
-    "scope": "vue,html",
-    "body": [
-      "<ToggleSwitchCore",
-      "  v-model=\"$1modelValue\"",
-      "  id=\"$2toggle-id\"",
-      "  name=\"$3toggleName\"",
-      "/>"
-    ]
-  }
-}