srcdev-nuxt-components 9.6.10 → 9.6.11

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

@@ -1,342 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import AlertMaskCore from "../AlertMaskCore.vue";
-import type { AlertMaskConfig } from "../../../../types/components/alert-mask-core.d";
-
-// Type interface for AlertMaskCore component instance
-interface AlertMaskCoreInstance {
-  cfg: {
-    backgroundColour: string;
-    borderColour: string;
-    radiusLeft: number;
-    radiusRight: number;
-    borderLeft: number;
-    borderTop: number;
-    borderRight: number;
-    borderBottom: number;
-  };
-  alertContentRef: HTMLElement | null;
-  svgWidth: number;
-  svgHeight: number;
-  outerPath: string;
-  innerPath: string;
-}
-
-// Mock ResizeObserver
-// Vitest 4: a mock's implementation must be a regular function (not an
-// arrow function) to remain constructible via `new`.
-const mockResizeObserver = vi.fn(function () {
-  return {
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-  };
-});
-
-vi.stubGlobal("ResizeObserver", mockResizeObserver);
-
-describe("AlertMaskCore", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders base structure correctly", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-decorator").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-content").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-content-slot").exists()).toBe(true);
-  });
-
-  it("renders default slot content", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<p>Test alert content</p>",
-      },
-    });
-
-    expect(wrapper.find(".alert-mask-content-slot p").text()).toBe("Test alert content");
-  });
-
-  it("applies style class passthrough correctly", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        styleClassPassthrough: ["custom-class", "another-class"],
-      },
-    });
-
-    const alertMask = wrapper.find(".alert-mask-core");
-    expect(alertMask.classes()).toContain("custom-class");
-    expect(alertMask.classes()).toContain("another-class");
-  });
-
-  it("applies style class passthrough as string", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        styleClassPassthrough: "single-class",
-      },
-    });
-
-    const alertMask = wrapper.find(".alert-mask-core");
-    expect(alertMask.classes()).toContain("single-class");
-  });
-
-  it("uses default configuration when no config provided", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    // Check that computed config uses defaults
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(0,0,0,0.25)");
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-    expect(vm.cfg.radiusLeft).toBe(12);
-    expect(vm.cfg.radiusRight).toBe(12);
-    expect(vm.cfg.borderLeft).toBe(8);
-    expect(vm.cfg.borderTop).toBe(8);
-    expect(vm.cfg.borderRight).toBe(8);
-    expect(vm.cfg.borderBottom).toBe(8);
-  });
-
-  it("applies custom configuration correctly", async () => {
-    const config: AlertMaskConfig = {
-      backgroundColour: "rgba(255,0,0,0.5)",
-      borderColour: "#ff0000",
-      radiusLeft: 20,
-      radiusRight: 15,
-      borderLeft: 12,
-      borderTop: 10,
-      borderRight: 8,
-      borderBottom: 6,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(255,0,0,0.5)");
-    expect(vm.cfg.borderColour).toBe("#ff0000");
-    expect(vm.cfg.radiusLeft).toBe(20);
-    expect(vm.cfg.radiusRight).toBe(15);
-    expect(vm.cfg.borderLeft).toBe(12);
-    expect(vm.cfg.borderTop).toBe(10);
-    expect(vm.cfg.borderRight).toBe(8);
-    expect(vm.cfg.borderBottom).toBe(6);
-  });
-
-  it("applies partial configuration with defaults", async () => {
-    const config: AlertMaskConfig = {
-      backgroundColour: "blue",
-      radiusLeft: 25,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("blue");
-    expect(vm.cfg.radiusLeft).toBe(25);
-    // Check defaults are maintained for other values
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-    expect(vm.cfg.radiusRight).toBe(12);
-  });
-
-  it("sets up template ref for content element", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<div>Content</div>",
-      },
-    });
-
-    await nextTick();
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.alertContentRef).toBeTruthy();
-  });
-
-  it("creates SVG with proper structure", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    const svg = wrapper.find(".alert-mask-decorator");
-    expect(svg.element.tagName).toBe("svg");
-
-    // Check for defs and mask
-    expect(wrapper.find("defs").exists()).toBe(true);
-    const mask = wrapper.find("mask");
-    expect(mask.exists()).toBe(true);
-    expect(wrapper.find("path[mask]").attributes("mask")).toBe(`url(#${mask.attributes("id")})`);
-
-    // Check for paths
-    const paths = wrapper.findAll("path");
-    expect(paths.length).toBe(4); // 2 in mask, 2 visible paths
-  });
-
-  it("gives each instance its own mask id so multiple masks on a page don't share one shape", async () => {
-    const wrapper = await mountSuspended({
-      components: { AlertMaskCore },
-      template: "<div><AlertMaskCore></AlertMaskCore><AlertMaskCore></AlertMaskCore></div>",
-    });
-    const ids = wrapper.findAll("mask").map((mask) => mask.attributes("id"));
-    expect(ids).toHaveLength(2);
-    expect(ids[0]).toBeTruthy();
-    expect(ids[0]).not.toBe(ids[1]);
-  });
-
-  it("hides the decorative SVG from assistive technology", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    expect(wrapper.find(".alert-mask-decorator").attributes("aria-hidden")).toBe("true");
-  });
-
-  it("applies config colours as fill styles so CSS var() values resolve", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config: { borderColour: "var(--my-border)", backgroundColour: "var(--my-bg)" } },
-    });
-    const paths = wrapper.findAll(".alert-mask-decorator > path");
-    expect((paths[0]!.element as unknown as SVGElement).style.fill).toBe("var(--my-border)");
-    expect((paths[1]!.element as unknown as SVGElement).style.fill).toBe("var(--my-bg)");
-  });
-
-  it("disconnects its ResizeObserver on unmount", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const observer = mockResizeObserver.mock.results.at(-1)?.value as { disconnect: ReturnType<typeof vi.fn> };
-    wrapper.unmount();
-    expect(observer.disconnect).toHaveBeenCalled();
-  });
-
-  it("applies CSS custom properties for content positioning", async () => {
-    const config: AlertMaskConfig = {
-      borderLeft: 15,
-      borderTop: 20,
-      borderRight: 25,
-      borderBottom: 30,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const contentEl = wrapper.find(".alert-mask-content");
-    const style = (contentEl.element as HTMLElement).style;
-
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("15px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("20px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("25px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("30px");
-  });
-
-  it("handles zero border values correctly", async () => {
-    const config: AlertMaskConfig = {
-      borderLeft: 0,
-      borderTop: 0,
-      borderRight: 0,
-      borderBottom: 0,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const contentEl = wrapper.find(".alert-mask-content");
-    const style = (contentEl.element as HTMLElement).style;
-
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("0px");
-  });
-
-  it("sets up ResizeObserver on mount", async () => {
-    await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<div>Content to observe</div>",
-      },
-    });
-
-    // ResizeObserver should be instantiated
-    expect(mockResizeObserver).toHaveBeenCalled();
-  });
-
-  it("generates SVG paths when dimensions are available", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    // Set dimensions
-    vm.svgWidth = 200;
-    vm.svgHeight = 100;
-
-    await nextTick();
-
-    // Check that paths are generated (not empty)
-    expect(vm.outerPath).toBeTruthy();
-    expect(vm.innerPath).toBeTruthy();
-    expect(vm.outerPath.length).toBeGreaterThan(0);
-    expect(vm.innerPath.length).toBeGreaterThan(0);
-  });
-
-  it("returns empty paths when dimensions are zero", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    // Explicitly set dimensions to zero to test the condition
-    vm.svgWidth = 0;
-    vm.svgHeight = 0;
-
-    await nextTick();
-
-    expect(vm.outerPath).toBe("");
-    expect(vm.innerPath).toBe("");
-  });
-
-  it("updates SVG height CSS custom property", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    vm.svgHeight = 150;
-    await nextTick();
-
-    const svg = wrapper.find(".alert-mask-decorator");
-    const style = (svg.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_height")).toBe("150px");
-  });
-
-  it("handles empty configuration object", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        config: {},
-      },
-    });
-
-    // Should use all defaults when empty config provided
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(0,0,0,0.25)");
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-  });
-
-  it("maintains reactivity with config changes", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        config: { backgroundColour: "red" },
-      },
-    });
-
-    let vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("red");
-
-    // Update props
-    await wrapper.setProps({
-      config: { backgroundColour: "blue" },
-    });
-
-    vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("blue");
-  });
-});

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

@@ -1,99 +0,0 @@
-# TripleToggleSwitch — Consumer Styling Guide
-
-> **Renamed 2026-09-27**: `TripleToggleSwitchCore` → `TripleToggleSwitch`. The root class was
-> already `.triple-toggle-switch`, and no token names changed.
-
-## Public token API
-
-Colour tokens fall back to the shared `--theme-*` tokens every other themed component uses, so
-leave them unset to follow the site theme. See `theming-component-token-pattern.md`.
-
-### Wrapper
-
-| Token | Default | Controls |
-|---|---|---|
-| `--triple-toggle-switch-surface` | `var(--theme-input-surface)` | Wrapper background |
-| `--triple-toggle-switch-border` | `var(--theme-border)` | Wrapper border colour |
-| `--triple-toggle-switch-ring-focus` | `var(--theme-ring)` | Wrapper outline colour while a radio has `:focus-visible` |
-| `--triple-toggle-switch-padding` | `0.6rem` | Wrapper padding |
-| `--triple-toggle-switch-gap` | `1rem` | Gap between the three options (also drives the marker's position) |
-
-### Selected-option marker
-
-| Token | Default | Controls |
-|---|---|---|
-| `--triple-toggle-switch-marker-surface` | `var(--theme-input-surface)` | Marker background when the selected value isn't `system`/`light`/`dark` |
-| `--triple-toggle-switch-marker-border` | `var(--slate-10)` | Marker border colour |
-| `--triple-toggle-switch-marker-gradient-system` | green `radial-gradient(...)` | Marker `background-image` when `system` is selected |
-| `--triple-toggle-switch-marker-gradient-light` | red/orange `radial-gradient(...)` | Marker `background-image` when `light` is selected |
-| `--triple-toggle-switch-marker-gradient-dark` | black/grey `radial-gradient(...)` | Marker `background-image` when `dark` is selected |
-
-> **Changed 2026-09-27**: the three marker gradients were hardcoded literals with no override hook.
-> They're now public tokens; the defaults are unchanged. Any `<image>` value works
-> (`linear-gradient(...)`, `url(...)`, `none`).
-
-### Options
-
-| Token | Default | Controls |
-|---|---|---|
-| `--triple-toggle-switch-option-padding` | `0.5rem` | Padding inside each option circle |
-| `--triple-toggle-switch-icon-size` | `2rem` | Icon `font-size` (and the hidden radio's hit area) |
-| `--triple-toggle-switch-option-border` | `#00000025` | Each option's resting border colour |
-| `--triple-toggle-switch-option-border-hover` | `var(--slate-10)` | Option outline colour on icon hover |
-| `--triple-toggle-switch-option-ring-focus` | `var(--theme-ring)` | Option outline colour on `:focus-visible` |
-| `--triple-toggle-switch-option-icon-color` | `var(--slate-10)` | Icon colour, resting |
-| `--triple-toggle-switch-option-icon-color-active` | `var(--slate-00)` | Icon colour, selected |
-
-Also read (shared, not component-specific): `--form-element-border-width`,
-`--form-element-outline-width`, `--theme-form-transition-duration`. See
-`theming-form-geometry-tokens.md`.
-
-Private tokens (not public API): `--_form-items-gap`, `--_scheme-icon-font-size` (each used twice,
-fed by the public gap/icon-size tokens) and `--_select-scheme-group-background-color`/
-`--_select-scheme-group-background-image` (swapped per selected value).
-
-## State hooks
-
-- **Selected value**: the marker gradients key off `:has(input[value="system" | "light" | "dark"]:checked)`
-  on the root. These three values are hardcoded, a legacy of the one real consumer
-  (`DisplayThemeSwitch`). Any other value shows `--triple-toggle-switch-marker-surface` instead.
-- **Option icon classes**: each `.option-icon` carries the option's `id` as a class (e.g.
-  `.option-icon.light`) plus `.active` when selected.
-- **Marker**: `.selected-option-marker` gains `.show` roughly 250ms after mount (it's positioned
-  from a measured option width, so it stays hidden until measured).
-- **Theme**: `data-theme` on the root, from the `theme` prop.
-- **Inner classes**: `.triple-toggle-switch-wrapper`, `.selected-option-marker-wrapper`,
-  `.selected-option-marker`, `.option-group-wrapper` (the `role="radiogroup"`), `.option-group`
-  (each `<label>`), `.option-icon`, `.option-input`.
-
-## Motion
-
-The marker slides between options over the `stepAnimationDuration` prop (default `250ms`). Under
-`prefers-reduced-motion: reduce` the slide transition is removed and the marker jumps.
-
-## Global theming
-
-```css
-:where(html) {
-  --triple-toggle-switch-surface: var(--rose-09);
-  --triple-toggle-switch-option-ring-focus: var(--rose-04);
-}
-```
-
-## Local overrides
-
-Set the tokens above on an element you own (a page or section class, or a class added with
-`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
-`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
-`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
-component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
-
-**Caveat:** when used through `DisplayThemeSwitch`, that wrapper re-declares the four sizing tokens
-(`--triple-toggle-switch-gap`, `-padding`, `-option-padding`, `-icon-size`) on the root element, so
-setting them on an ancestor has no effect there. Set them on the component itself (via
-`style` or a passthrough class) instead. Used directly, `TripleToggleSwitch` re-declares nothing.
-
-## Class passthrough
-
-`style-class-passthrough` adds classes to the root `.triple-toggle-switch` element, alongside
-`data-theme`. `DisplayThemeSwitch` uses it for its `colour-scheme-select` and `small` classes.

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

@@ -1,251 +0,0 @@
-<template>
-  <div class="triple-toggle-switch" :class="[elementClasses]" :data-theme="theme">
-    <div class="triple-toggle-switch-wrapper">
-      <div class="selected-option-marker-wrapper">
-        <div class="selected-option-marker" :class="[{ show: showMarker }]"></div>
-      </div>
-      <div class="option-group-wrapper" role="radiogroup" :aria-label="ariaLabel || undefined">
-        <label
-          v-for="option in fieldData.data"
-          :key="option.id"
-          ref="optionGroup"
-          :for="option.id"
-          class="option-group"
-        >
-          <span class="sr-only">{{ option.label }}</span>
-          <Icon
-            v-if="option.icon"
-            :name="option.icon"
-            class="option-icon"
-            :class="[option.id, { active: modelValue === option.value }]"
-          />
-          <input
-            :id="option.id"
-            v-model="modelValue"
-            type="radio"
-            :name="name"
-            class="option-input"
-            :value="option.value"
-          />
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FormUiTheme, IFormMultipleOptions } from "~/types/forms/types.forms";
-
-interface Props {
-  name?: string;
-  ariaLabel?: string;
-  theme?: FormUiTheme;
-  stepAnimationDuration?: string;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  name: "triple-toggle-switch",
-  ariaLabel: "",
-  theme: "default",
-  stepAnimationDuration: "250ms",
-  styleClassPassthrough: () => [],
-});
-
-const modelValue = defineModel<string | number | boolean>({ required: true });
-const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const { stepAnimationDuration } = toRefs(props);
-
-const optionGroupRefs = useTemplateRef<HTMLLabelElement[]>("optionGroup");
-
-const iconWidth = ref("0px");
-const showMarker = ref(false);
-
-const selectedOptionIndex = computed(() => {
-  if (!fieldData.value?.data) return 0;
-  const index = fieldData.value.data.findIndex((option) => option.value === modelValue.value);
-  return Math.max(0, index);
-});
-
-const setupDefaults = async () => {
-  await nextTick();
-
-  const firstOption = optionGroupRefs.value?.[0];
-  if (firstOption) {
-    iconWidth.value = `${firstOption.getBoundingClientRect().width}px`;
-  }
-
-  await new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      setTimeout(resolve, 250);
-    });
-  });
-
-  showMarker.value = true;
-};
-
-onMounted(() => {
-  setupDefaults();
-});
-</script>
-
-<style lang="css">
-@layer components {
-  .triple-toggle-switch {
-    --_form-items-gap: var(--triple-toggle-switch-gap, 1rem);
-    --_select-scheme-group-background-color: var(--triple-toggle-switch-marker-surface, var(--theme-input-surface));
-    --_select-scheme-group-background-image: none;
-    --_scheme-icon-font-size: var(--triple-toggle-switch-icon-size, 2rem);
-
-    &:has(input[value="system"]:checked) {
-      --_select-scheme-group-background-color: transparent;
-      --_select-scheme-group-background-image: var(
-        --triple-toggle-switch-marker-gradient-system,
-        radial-gradient(circle, rgb(66, 180, 58) 0%, rgb(17, 199, 0) 27%, rgb(8, 117, 3) 100%)
-      );
-    }
-
-    &:has(input[value="light"]:checked) {
-      --_select-scheme-group-background-color: transparent;
-      --_select-scheme-group-background-image: var(
-        --triple-toggle-switch-marker-gradient-light,
-        radial-gradient(circle, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 27%, rgba(252, 176, 69, 1) 100%)
-      );
-    }
-
-    &:has(input[value="dark"]:checked) {
-      --_select-scheme-group-background-color: transparent;
-      --_select-scheme-group-background-image: var(
-        --triple-toggle-switch-marker-gradient-dark,
-        radial-gradient(circle, rgb(50, 20, 25) 0%, rgb(0, 0, 0) 27%, rgb(100, 100, 100) 100%)
-      );
-    }
-
-    .triple-toggle-switch-wrapper {
-      display: inline-grid;
-      grid-template-areas: "select-stack";
-      width: fit-content;
-
-      background-color: var(--triple-toggle-switch-surface, var(--theme-input-surface));
-      border: var(--form-element-border-width) solid var(--triple-toggle-switch-border, var(--theme-border));
-      outline: var(--form-element-outline-width) solid transparent;
-      border-radius: 100vw;
-      padding: var(--triple-toggle-switch-padding, 0.6rem);
-
-      transition: all var(--theme-form-transition-duration) ease-in-out;
-
-      &:has(input:focus-visible) {
-        outline: var(--form-element-outline-width) solid var(--triple-toggle-switch-ring-focus, var(--theme-ring));
-        outline-offset: 0.2rem;
-      }
-
-      .selected-option-marker-wrapper {
-        grid-area: select-stack;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        position: relative;
-
-        .selected-option-marker {
-          aspect-ratio: 1;
-          width: v-bind(iconWidth);
-          transition: all v-bind(stepAnimationDuration) ease-in-out;
-          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, var(--slate-10));
-          border-radius: 50%;
-
-          position: absolute;
-          left: calc(
-            v-bind(selectedOptionIndex) * v-bind(iconWidth) + (var(--_form-items-gap) * v-bind(selectedOptionIndex))
-          );
-
-          opacity: 0;
-
-          &.show {
-            opacity: 1;
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            transition: none;
-          }
-        }
-      }
-
-      .option-group-wrapper {
-        display: grid;
-        grid-area: select-stack;
-        grid-template-columns: repeat(3, 1fr);
-        align-items: center;
-        width: fit-content;
-        z-index: 2;
-        gap: var(--_form-items-gap);
-        position: relative;
-
-        .option-group {
-          display: grid;
-          grid-template-areas: "icon-stack";
-          place-items: center;
-          background: transparent;
-          border: var(--form-element-border-width) solid var(--triple-toggle-switch-option-border, #00000025);
-          outline: var(--form-element-outline-width) solid transparent;
-          border-radius: 50%;
-          padding: var(--triple-toggle-switch-option-padding, 0.5rem);
-          overflow: hidden;
-
-          transition: all calc(var(--theme-form-transition-duration) / 3);
-
-          &:has(.option-icon:hover) {
-            outline: var(--form-element-outline-width) solid
-              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));
-            outline-offset: 0.2rem;
-          }
-
-          .option-icon {
-            grid-area: icon-stack;
-            display: block;
-            font-size: var(--_scheme-icon-font-size);
-            width: 1em;
-            height: 1em;
-            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
-            transition: color calc(v-bind(stepAnimationDuration) / 2) ease-in-out;
-
-            &.active {
-              color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
-              transition-delay: calc(v-bind(stepAnimationDuration) / 2);
-            }
-
-            @media (prefers-reduced-motion: reduce) {
-              transition: none;
-            }
-
-            &:hover {
-              cursor: pointer;
-            }
-          }
-
-          .option-input {
-            grid-area: icon-stack;
-            appearance: none;
-            opacity: 0;
-            width: var(--_scheme-icon-font-size);
-            height: var(--_scheme-icon-font-size);
-
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>