srcdev-nuxt-components 9.4.3 → 9.4.5

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/DeepExpandingMenuClassic.vue

@@ -0,0 +1,200 @@
+<template>
+  <component :is="tag" class="deep-expanding-menu-classic" :class="[elementClasses]">
+    <div class="inner">
+      <template v-for="(link, key) in navLinks" :key="key">
+        <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
+        <details v-else ref="navigationGroupRef" class="navigation-group" name="navigation-group">
+          <summary class="navigation-group-toggle">
+            <span>{{ link.name }}</span>
+            <Icon name="bi:caret-down-fill" class="icon" />
+          </summary>
+          <div class="navigation-group-panel">
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <ul class="navigation-group-list">
+              <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
+                <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </details>
+      </template>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "section" | "nav" | "ul" | "ol";
+  navLinks?: ResponsiveHeaderNavItem[];
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "nav",
+  navLinks: () => [],
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef");
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+onMounted(() => {
+  navigationGroupRef.value?.forEach((element, index) => {
+    onClickOutside(element, () => {
+      navigationGroupRef.value?.[index]?.removeAttribute("open");
+    });
+  });
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @layer popover-setup {
+    .deep-expanding-menu-classic {
+      container-type: inline-size;
+      display: grid;
+      grid-template-areas: "element-stack";
+      align-items: center;
+      gap: var(--deep-expanding-menu-classic-gap, 1.2rem);
+
+      .inner {
+        grid-area: element-stack;
+        display: flex;
+        gap: var(--deep-expanding-menu-classic-item-gap, 2.4rem);
+        align-items: center;
+        z-index: 1;
+
+        .navigation-link,
+        .navigation-group-toggle {
+          all: unset;
+          border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+          padding-block: var(--deep-expanding-menu-classic-link-padding-block, 0.8rem);
+
+          transition: border-color 200ms;
+
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            cursor: pointer;
+            border-color: var(
+              --deep-expanding-menu-classic-link-border-colour-hover,
+              light-dark(var(--blue-10), var(--slate-00))
+            );
+          }
+        }
+
+        .navigation-group {
+          --_icon-transform: scaleY(1);
+
+          display: grid;
+          grid-template-areas: "details-stack";
+          z-index: 1;
+          position: relative;
+
+          summary::-webkit-details-marker,
+          summary::marker {
+            display: none;
+          }
+
+          &[open] {
+            --_icon-transform: scaleY(-1);
+          }
+
+          .navigation-group-toggle {
+            grid-area: details-stack;
+
+            display: flex !important;
+            align-items: center;
+            gap: 1.2rem;
+            list-style: none;
+
+            .icon {
+              display: block;
+              font-size: var(--deep-expanding-menu-classic-icon-size, 1.2rem);
+
+              transform: var(--_icon-transform);
+              transition: transform 200ms;
+            }
+          }
+
+          .navigation-group-panel {
+            display: grid;
+            grid-area: details-stack;
+            z-index: 2;
+            position: absolute;
+            inset: auto;
+            top: var(--deep-expanding-menu-classic-panel-offset-top, 4rem);
+            left: 0rem;
+            gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+
+            width: var(--deep-expanding-menu-classic-panel-width, 20rem);
+
+            @media screen and (min-width: 768px) {
+              width: var(--deep-expanding-menu-classic-panel-width-tablet, 40rem);
+            }
+
+            @media screen and (min-width: 1024px) {
+              width: var(--deep-expanding-menu-classic-panel-width-desktop, 60rem);
+            }
+
+            background-color: var(--deep-expanding-menu-classic-panel-background-colour, white);
+            border: var(--deep-expanding-menu-classic-panel-border-width, 0.1rem) solid
+              var(--deep-expanding-menu-classic-panel-border-colour, black);
+            border-radius: var(--deep-expanding-menu-classic-panel-border-radius, 1.2rem);
+            box-shadow: var(--deep-expanding-menu-classic-panel-shadow, 0 0 1rem rgba(0, 0, 0, 0.1));
+            padding: var(--deep-expanding-menu-classic-panel-padding, 1.2rem);
+            overflow: clip;
+
+            h4 {
+              color: var(--deep-expanding-menu-classic-panel-heading-colour, var(--slate-10));
+            }
+
+            .navigation-group-list {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+              gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+              padding-inline-start: 0;
+              margin-block-end: 0.8rem;
+
+              .navigation-group-item {
+                display: block;
+
+                a.navigation-group-link {
+                  display: inline-block;
+                  color: var(--deep-expanding-menu-classic-group-link-colour, var(--slate-10));
+                  text-decoration: none;
+                  padding-block: 0.8rem;
+
+                  border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+
+                  transition: border-color 200ms;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer;
+                    border-color: var(
+                      --deep-expanding-menu-classic-group-link-border-colour-hover,
+                      var(--slate-10)
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/stories/DeepExpandingMenuClassic.stories.ts

@@ -0,0 +1,79 @@
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const navLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+      { name: "Styling", path: "/services/styling" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+const meta: Meta<typeof DeepExpandingMenuClassic> = {
+  title: "Molecules/DeepExpandingMenuClassic",
+  component: DeepExpandingMenuClassic,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "nav", "ul", "ol"],
+      description: "Root element tag",
+      table: { category: "Basic" },
+    },
+    navLinks: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    tag: "nav",
+    navLinks,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "`<details>`/`<summary>`-based fallback implementation of `DeepExpandingMenu`, using `onClickOutside` to close an open group instead of CSS anchor-positioning/Popover API — use this when the modern implementation's browser support (see its own docs) isn't acceptable.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeepExpandingMenuClassic>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `<DeepExpandingMenuClassic v-bind="args" style="padding: 4rem;" />`,
+  }),
+};
+
+export const CustomColours: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DeepExpandingMenuClassic
+        v-bind="args"
+        style="padding: 4rem; --deep-expanding-menu-classic-panel-background-colour: #1a1a1a; --deep-expanding-menu-classic-panel-border-colour: transparent; --deep-expanding-menu-classic-group-link-colour: white; --deep-expanding-menu-classic-panel-heading-colour: #aaaaaa;"
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Overriding the public tokens via inline `--deep-expanding-menu-classic-*` custom properties.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/DeepExpandingMenuClassic.spec.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const defaultNavLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+describe("DeepExpandingMenuClassic", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a <nav> by default", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("renders the given tag", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, tag: "div" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders a direct link for items with a path", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const links = wrapper.findAll(".navigation-link");
+    expect(links.map((l) => l.text())).toEqual(["Home", "Contact"]);
+  });
+
+  it("renders a <details> group for items with childLinks", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find("details.navigation-group").exists()).toBe(true);
+    expect(wrapper.find(".navigation-group-toggle").text()).toContain("Services");
+  });
+
+  it("renders each child link inside the group panel", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const childLinks = wrapper.findAll(".navigation-group-link");
+    expect(childLinks.map((l) => l.text())).toEqual(["Haircuts", "Colouring"]);
+  });
+
+  it("renders the childLinksTitle heading", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-panel h4").text()).toBe("Our services");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("resets classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    expect(wrapper.classes()).not.toContain("initial-class");
+    expect(wrapper.classes()).toContain("updated-class");
+  });
+});

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/__snapshots__/DeepExpandingMenuClassic.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeepExpandingMenuClassic > renders correct HTML structure 1`] = `
+"<nav class="deep-expanding-menu-classic">
+  <div class="inner"><a href="/" class="navigation-link">Home</a>
+    <details class="navigation-group" name="navigation-group">
+      <summary class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></summary>
+      <div class="navigation-group-panel">
+        <h4 class="page-heading-4 mb-6">Our services</h4>
+        <ul class="navigation-group-list">
+          <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>
+          <li class="navigation-group-item"><a href="/services/colouring" class="navigation-group-link">Colouring</a></li>
+        </ul>
+      </div>
+    </details><a href="/contact" class="navigation-link">Contact</a>
+  </div>
+</nav>"
+`;

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

@@ -23,6 +23,23 @@ token-rename pass, not a redesign.
 Geometry (`--input-toggle-*`, `--form-element-*`) is shared across every `05.forms` component and
 untouched by this — see `theming-form-geometry-tokens.md`.
 
+### Track width
+
+`--toggle-switch-track-width` overrides the track's width directly. Left unset, the track derives
+its width from the shared `--input-toggle-*`/`--form-element-*` geometry tokens so it always scales
+with `--input-toggle-symbol-size` — resize the thumb and the track resizes to match, no separate
+width to keep in sync:
+
+```css
+.my-compact-toggle {
+  --input-toggle-symbol-size: 2.2rem;
+  /* Track width now follows automatically — no --toggle-switch-track-width override needed. */
+}
+```
+
+Only set `--toggle-switch-track-width` if you need a width the formula doesn't produce (e.g. a
+fixed width independent of symbol size).
+
 > Five private locals (`--_icon-on-opacity`, `--_icon-off-opacity`, `--_symbol-background-color`,
 > `--_symbol-margin-inline-start`, `--_symbol-checked-offset`) were removed during this migration —
 > declared but never actually read by any property in the component, confirmed by grep. Not part

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

@@ -132,6 +132,23 @@ const toggleSwitchValue = () => {
 
     .symbol-wrapper {
       /* Geometry */
+
+      /* Track width has no direct public token — it's derived from the same geometry tokens
+         that size the thumb, so the track always scales with --input-toggle-symbol-size instead
+         of clipping/floating it. Breakdown at the default 0.1rem tokens (= 72px total):
+         2×symbol-size (6rem) + 2×form-element-border-width (0.2rem, wrapper border) +
+         2×wrapper-padding (0.2rem) + 3×symbol-outline-width (0.3rem) +
+         3×symbol-border-width (0.3rem) + 2×symbol-margin (0.2rem). Override
+         --toggle-switch-track-width directly if you need a value the formula doesn't produce. */
+      --_track-width: var(
+        --toggle-switch-track-width,
+        calc(
+          (2 * var(--input-toggle-symbol-size)) + (2 * var(--form-element-border-width)) +
+            (2 * var(--input-toggle-wrapper-padding)) + (3 * var(--input-toggle-symbol-outline-width)) +
+            (3 * var(--input-toggle-symbol-border-width)) + (2 * var(--input-toggle-symbol-margin))
+        )
+      );
+
       display: inline-flex;
       align-items: center;
       justify-content: start;
@@ -148,7 +165,7 @@ const toggleSwitchValue = () => {
       border: var(--form-element-border-width) solid var(--_border);
       outline: var(--form-element-outline-width) solid transparent;
       border-radius: 100vw;
-      width: 72px;
+      width: var(--_track-width);
       padding: calc(var(--input-toggle-wrapper-padding) + var(--input-toggle-symbol-outline-width));
 
       &:hover {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../ToggleSwitchCore.vue";
 import type { FormUiTheme } from "~/types/forms/types.forms.d";
 
@@ -17,6 +17,7 @@ interface ToggleSwitchCoreStoryArgs {
   useCustomIcons: boolean;
   iconOnContent: string;
   iconOffContent: string;
+  symbolSize: string;
 }
 
 export default {
@@ -126,6 +127,15 @@ export default {
         category: "Icons",
       },
     },
+    symbolSize: {
+      control: { type: "select" },
+      options: ["2rem", "2.2rem", "2.4rem", "3rem", "3.6rem"],
+      description:
+        "`--input-toggle-symbol-size` — thumb size. Track width has no separate control: it's derived from this token (see ToggleSwitchCore's `--_track-width` comment), so it scales automatically.",
+      table: {
+        category: "Styling",
+      },
+    },
   },
 } as Meta<ToggleSwitchCoreStoryArgs>;
 
@@ -134,7 +144,10 @@ const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   setup() {
     const modelValue = ref(false);
-    return { args: _args, modelValue };
+    const cssTokenStyle = computed(() => ({
+      "--input-toggle-symbol-size": _args.symbolSize,
+    }));
+    return { args: _args, modelValue, cssTokenStyle };
   },
   template: `
     <StorybookComponent
@@ -149,6 +162,7 @@ const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
       :theme="args.theme"
       :round="args.round"
       :aria-describedby="args.ariaDescribedby"
+      :style="cssTokenStyle"
     >
       <template v-if="args.useCustomIcons" #iconOn>
         <span v-html="args.iconOnContent"></span>
@@ -178,6 +192,7 @@ Default.args = {
   useCustomIcons: false,
   iconOnContent: "✓",
   iconOffContent: "✗",
+  symbolSize: "3rem",
 };
 
 export const WithCustomIcons = Template.bind({});

package/app/types/components/display-tooltip-defined.d.ts

@@ -0,0 +1,10 @@
+export interface TooltipContentTextItem {
+  tag: string
+  text: string
+}
+
+export interface TooltipContentText {
+  tooltipTitle?: TooltipContentTextItem
+  tooltipContent?: TooltipContentTextItem
+  tooltipAction?: TooltipContentTextItem
+}

package/app/types/components/index.ts

@@ -16,3 +16,4 @@ export * from "./social-icons-list.d"
 export * from "./content-docs.d"
 export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
+export * from "./display-tooltip-defined.d"

package/package.json

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

package/app/components/animated-svg-text/AnimatedSvgText.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="animated-svg-text" :class="[elementClasses]">
-    <slot name="text"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style lang="css">
-@layer components {
-
-@keyframes animatedSvgText {
-  0% {
-    fill: transparent;
-    stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
-    stroke-width: 0.3;
-  }
-  70% {
-    fill: transparent;
-    stroke-width: 0.3;
-  }
-  100% {
-    fill: var(--_animated-svg-fill-color);
-    stroke-dashoffset: 0;
-    stroke-width: 0;
-  }
-}
-
-html {
-
-  &[data-color-scheme='light'] {
-    .animated-svg-text {
-      --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
-      --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-    }
-  }
-  &[data-color-scheme='dark'] {
-    .animated-svg-text {
-      --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
-      --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
-    }
-  }
-  &[data-color-scheme='auto'] {
-    .animated-svg-text {
-      @media (prefers-color-scheme: light) {
-        --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
-        --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
-        --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
-      }
-    }
-  }
-
-  .animated-svg-text {
-
-    --_animated-svg-text-color: var(--_animated-svg-text-stroke-light):
-    --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-
-    svg path {
-      stroke: var(--_animated-svg-text-color);
-      stroke-width: 0.3;
-      stroke-dasharray: var(--_animated-svg-text-stroke-dasharray);
-      stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
-      animation: animatedSvgText var(--_animated-svg-animation-duration) linear 1 forwards;
-    }
-  }
-
-}
-}
-</style>