srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/01.atoms/animations/glowing-border/GlowingBorder.vue

@@ -0,0 +1,132 @@
+<template>
+  <component :is="tag" class="glowing-border" :class="[variant, elementClasses]">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "p" | "span" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "ul" | "ol";
+  variant?: "subtle" | "vivid" | "silver" | "steel" | "green";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  variant: "subtle",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  @property --_glow-deg {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: -90deg;
+  }
+
+  @property --_clr-1 {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: red;
+  }
+
+  @property --_clr-2 {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: yellow;
+  }
+
+  @property --_clr-3 {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: green;
+  }
+
+  @property --_clr-4 {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: blue;
+  }
+
+  @property --_clr-5 {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: purple;
+  }
+
+  .glowing-border {
+    &.vivid {
+      --_clr-1: var(--glowing-border-vivid-color-1, #ff0000);
+      --_clr-2: var(--glowing-border-vivid-color-2, #ffa500);
+      --_clr-3: var(--glowing-border-vivid-color-3, #ffff00);
+      --_clr-4: var(--glowing-border-vivid-color-4, #008000);
+      --_clr-5: var(--glowing-border-vivid-color-5, #0000ff);
+    }
+
+    &.subtle {
+      --_clr-1: var(--glowing-border-subtle-color-1, #ff9a9e);
+      --_clr-2: var(--glowing-border-subtle-color-2, #fad0c4);
+      --_clr-3: var(--glowing-border-subtle-color-3, #fad0c4);
+      --_clr-4: var(--glowing-border-subtle-color-4, #fbc2eb);
+      --_clr-5: var(--glowing-border-subtle-color-5, #a18cd1);
+    }
+
+    &.silver {
+      --_clr-1: var(--glowing-border-silver-color-1, #d4d4d4);
+      --_clr-2: var(--glowing-border-silver-color-2, #e4e4e4);
+      --_clr-3: var(--glowing-border-silver-color-3, #f5f5f5);
+      --_clr-4: var(--glowing-border-silver-color-4, #e4e4e4);
+      --_clr-5: var(--glowing-border-silver-color-5, #d4d4d4);
+    }
+
+    &.steel {
+      --_clr-1: var(--glowing-border-steel-color-1, #434343);
+      --_clr-2: var(--glowing-border-steel-color-2, #5a5a5a);
+      --_clr-3: var(--glowing-border-steel-color-3, #6e6e6e);
+      --_clr-4: var(--glowing-border-steel-color-4, #5a5a5a);
+      --_clr-5: var(--glowing-border-steel-color-5, #434343);
+    }
+
+    &.green {
+      --_clr-1: var(--glowing-border-green-color-1, #00ff87);
+      --_clr-2: var(--glowing-border-green-color-2, #39ff14);
+      --_clr-3: var(--glowing-border-green-color-3, #00c853);
+      --_clr-4: var(--glowing-border-green-color-4, #64dd17);
+      --_clr-5: var(--glowing-border-green-color-5, #00e676);
+    }
+
+    --_gradient-glow: var(--_clr-1), var(--_clr-2), var(--_clr-3), var(--_clr-4), var(--_clr-5), var(--_clr-1);
+
+    border: var(--glowing-border-width, 3px) solid transparent;
+    border-radius: var(--glowing-border-radius, 30px);
+    background:
+      linear-gradient(var(--glowing-border-surface, canvas) 0 0) padding-box,
+      conic-gradient(from var(--_glow-deg), var(--_gradient-glow)) border-box;
+
+    animation: glow var(--glowing-border-animation-duration, 10s) infinite linear;
+
+    overflow: hidden;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  @keyframes glow {
+    100% {
+      --_glow-deg: 270deg;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/animations/glowing-border/stories/GlowingBorder.stories.ts

@@ -0,0 +1,165 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../GlowingBorder.vue";
+
+const PX_OPTIONS = ["1px", "2px", "3px", "4px", "5px", "6px"] as const;
+const DURATION_OPTIONS = ["5s", "6s", "7s", "8s", "9s", "10s", "11s", "12s", "13s", "14s", "15s"] as const;
+
+type StoryArgs = {
+  tag: "div" | "p" | "span" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "ul" | "ol";
+  variant: "subtle" | "vivid" | "silver" | "steel" | "green";
+  content: string;
+  borderWidth: (typeof PX_OPTIONS)[number];
+  borderRadius: (typeof PX_OPTIONS)[number];
+  animationDuration: (typeof DURATION_OPTIONS)[number];
+};
+
+export default {
+  title: "Atoms/Effects/GlowingBorder",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "p", "span", "section", "article", "aside", "header", "footer", "main", "nav", "ul", "ol"],
+      description: "Root element tag",
+    },
+    variant: {
+      control: { type: "inline-radio" },
+      options: ["subtle", "vivid", "silver", "steel", "green"],
+      description: "Glow colour variant",
+    },
+    content: {
+      control: { type: "text" },
+      description: "Slot content",
+    },
+    borderWidth: {
+      control: { type: "select" },
+      options: PX_OPTIONS,
+      description: "--glowing-border-width",
+      table: { category: "CSS tokens" },
+    },
+    borderRadius: {
+      control: { type: "select" },
+      options: PX_OPTIONS,
+      description: "--glowing-border-radius",
+      table: { category: "CSS tokens" },
+    },
+    animationDuration: {
+      control: { type: "select" },
+      options: DURATION_OPTIONS,
+      description: "--glowing-border-animation-duration",
+      table: { category: "CSS tokens" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+    class: {
+      table: { disable: true },
+    },
+    style: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    variant: "vivid",
+    content: "This is default slot content for the GlowingBorder component. Any HTML content can be placed here.",
+    borderWidth: "3px",
+    borderRadius: "6px",
+    animationDuration: "10s",
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; background-color: var(--slate-10);">
+      <StorybookComponent
+        :tag="args.tag"
+        :variant="args.variant"
+        :style="{
+          '--glowing-border-width': args.borderWidth,
+          '--glowing-border-radius': args.borderRadius,
+          '--glowing-border-animation-duration': args.animationDuration,
+        }"
+      >
+        <div style="padding: 20px; color: var(--slate-02);">
+          <h3 style="margin: 0 0 12px 0; font-size: 1.5rem; font-weight: 600;">GlowingBorder</h3>
+          <p style="margin: 0; line-height: 1.6;">{{ args.content }}</p>
+        </div>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Vivid = Template.bind({});
+Vivid.args = {
+  variant: "vivid",
+  content:
+    "Vivid variant creates a bright, attention-grabbing glow effect perfect for highlighting important content or call-to-action elements.",
+};
+
+export const Subtle = Template.bind({});
+Subtle.args = {
+  variant: "subtle",
+  content:
+    "Subtle variant provides a gentle glow that adds visual interest without being overwhelming, ideal for elegant content presentation.",
+};
+
+export const Silver = Template.bind({});
+Silver.args = {
+  variant: "silver",
+  content:
+    "Silver variant offers a metallic, sophisticated glow that works well in professional or modern design contexts.",
+};
+
+export const Steel = Template.bind({});
+Steel.args = {
+  variant: "steel",
+  content:
+    "Steel variant provides a cool, industrial glow effect that's perfect for technical or utilitarian design themes.",
+};
+
+export const Green = Template.bind({});
+Green.args = {
+  variant: "green",
+  content:
+    "Green variant cycles through vibrant, saturated greens for a fresh, energetic glow effect.",
+};
+
+const CustomTokensTemplate: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; background-color: var(--slate-10);">
+      <StorybookComponent
+        :tag="args.tag"
+        :variant="args.variant"
+        :style="{
+          '--glowing-border-width': args.borderWidth,
+          '--glowing-border-radius': args.borderRadius,
+          '--glowing-border-animation-duration': args.animationDuration,
+        }"
+      >
+        <div style="padding: 20px; color: var(--slate-02);">
+          <p style="margin: 0; line-height: 1.6;">{{ args.content }}</p>
+        </div>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const CustomTokens = CustomTokensTemplate.bind({});
+CustomTokens.args = {
+  variant: "vivid",
+  content: "Border width, radius, and animation speed all driven by the controls above.",
+  borderWidth: "6px",
+  borderRadius: "4px",
+  animationDuration: "5s",
+};

package/app/components/01.atoms/animations/glowing-border/tests/GlowingBorder.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import GlowingBorder from "../GlowingBorder.vue";
+
+describe("GlowingBorder", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(GlowingBorder);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, {
+      slots: { default: "Content" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(GlowingBorder);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it.each(["div", "p", "span", "section", "article", "aside", "header", "footer", "main", "nav", "ul", "ol"] as const)(
+    "renders as <%s> when tag='%s'",
+    async (tag) => {
+      const wrapper = await mountSuspended(GlowingBorder, { props: { tag } });
+      expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+    }
+  );
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the glowing-border class", async () => {
+    const wrapper = await mountSuspended(GlowingBorder);
+    expect(wrapper.classes()).toContain("glowing-border");
+  });
+
+  // ─── Slot ─────────────────────────────────────────────────────────────────
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, {
+      slots: { default: "<p class='custom'>Custom</p>" },
+    });
+    expect(wrapper.find(".custom").exists()).toBe(true);
+  });
+
+  // ─── Variant ──────────────────────────────────────────────────────────────
+
+  it("applies subtle variant class by default", async () => {
+    const wrapper = await mountSuspended(GlowingBorder);
+    expect(wrapper.classes()).toContain("subtle");
+  });
+
+  it.each(["subtle", "vivid", "silver", "steel", "green"] as const)(
+    "applies %s variant class when variant='%s'",
+    async (variant) => {
+      const wrapper = await mountSuspended(GlowingBorder, { props: { variant } });
+      expect(wrapper.classes()).toContain(variant);
+    }
+  );
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, {
+      props: { styleClassPassthrough: "featured" },
+    });
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, {
+      props: { styleClassPassthrough: ["featured", "highlighted"] },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, {
+      props: { styleClassPassthrough: ["featured"] },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    await wrapper.setProps({ styleClassPassthrough: ["highlighted"] });
+    expect(wrapper.classes()).not.toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+});

package/app/components/01.atoms/animations/glowing-border/tests/__snapshots__/GlowingBorder.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GlowingBorder > renders correct HTML structure (default) 1`] = `"<div class="glowing-border subtle">Content</div>"`;

package/app/components/01.atoms/animations/marquee-scroller/CONSUMER-STYLING.md

@@ -11,7 +11,7 @@
 | `--marquee-scroller-item-hover-filter` | `grayscale(0)` | Filter applied to a single item when it is individually hovered (overrides the group filter for that item) |
 | `--marquee-scroller-item-transition-duration` | `0.5s` | Transition duration for the item hover filter change |
 | `--marquee-scroller-item-border-width` | `1px` | Item border width |
-| `--marquee-scroller-item-border-colour` | `light-dark(var(--slate-10), var(--slate-00))` | Item border colour |
+| `--marquee-scroller-item-border-colour` | `var(--slate-10)` | Item border colour |
 | `--marquee-scroller-item-border-radius` | `4px` | Item border radius |
 | `--marquee-scroller-control-offset` | `8px` | Distance of the pause/play button from the top and end edges |
 | `--marquee-scroller-control-background-colour` | `rgba(0, 0, 0, 0.7)` | Pause/play button background |

package/app/components/01.atoms/animations/marquee-scroller/MarqueeScroller.vue

@@ -291,7 +291,7 @@ onUnmounted(() => {
       flex-shrink: 0;
 
       border: var(--marquee-scroller-item-border-width, 1px) solid
-        var(--marquee-scroller-item-border-colour, light-dark(var(--slate-10), var(--slate-00)));
+        var(--marquee-scroller-item-border-colour, var(--slate-10));
       border-radius: var(--marquee-scroller-item-border-radius, 4px);
 
       &:hover {

package/app/components/01.atoms/animations/marquee-scroller/stories/MarqueeScroller.stories.ts

@@ -33,7 +33,7 @@ const logoSlots = logoData
   .map(
     (item) => `
     <template #${item.id}>
-      <div style="display: grid; place-items: center; width: 100%; height: 100%; background: light-dark(#eee, #333); font-weight: 600;">
+      <div style="display: grid; place-items: center; width: 100%; height: 100%; background: #eee; font-weight: 600;">
         ${item.content}
       </div>
     </template>`

package/app/components/01.atoms/animations/section-parallax/CONSUMER-STYLING.md

@@ -0,0 +1,44 @@
+# SectionParallax — Consumer Styling Guide
+
+## Public CSS custom properties
+
+| Token | Default | Description |
+|---|---|---|
+| `--section-parallax-min-height` | `100svh` | Section height on browsers/inputs where the fixed-background parallax doesn't apply (touch devices, `prefers-reduced-motion: reduce`, or no `background-attachment: fixed` support). |
+| `--section-parallax-min-height-fixed` | `120vh` | Section height once the parallax effect is active — taller than the base height to give enough scroll travel to see the motion. |
+| `--section-parallax-background-position` | `center` | `background-position` of the image. |
+| `--section-parallax-background-size` | `cover` | `background-size` of the image. |
+| `--section-parallax-background-colour` | `var(--slate-01)` | Fallback colour visible if the image fails to load or hasn't loaded yet. |
+
+```vue
+<SectionParallax
+  background-image="/images/candle-and-stones.jpg"
+  style="--section-parallax-min-height: 60vh; --section-parallax-min-height-fixed: 70vh;"
+>
+  <p>Shorter atmospheric break</p>
+</SectionParallax>
+```
+
+## Motion
+
+The parallax effect (`background-attachment: fixed`) only activates on `(hover: hover) and
+(pointer: fine)` inputs that support it, and is disabled under `prefers-reduced-motion: reduce`
+(falls back to `background-attachment: scroll` and the base `--section-parallax-min-height`).
+
+## Class passthrough
+
+Use `styleClassPassthrough` to add classes to the root element — e.g. to override `min-height`
+from a consuming page's own stylesheet instead of inline tokens:
+
+```css
+.my-page {
+  .section-parallax {
+    min-height: 60vh;
+  }
+}
+```
+
+## No overlay/gradient built in
+
+The component has no built-in overlay or gradient scrim — add one via the default slot or a
+`::before` pseudo-element in your consuming-page styles.

package/app/components/{parallax → 01.atoms/animations/section-parallax}/SectionParallax.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="tag" class="section-parallax" :class="[elementClasses]">
-    <slot v-if="slots.default" name="default"></slot>
+    <slot name="default"></slot>
   </component>
 </template>
 
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const slots = useSlots();
-
 const backgroundImage = computed(() => `url("${props.backgroundImage}")`);
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -33,24 +31,27 @@ watch(
 <style lang="css">
 @layer components {
   .section-parallax {
-    /* Component styles */
-
-    min-height: 100svh;
+    min-height: var(--section-parallax-min-height, 100svh);
     background-image: v-bind(backgroundImage);
-    background-position: center;
+    background-position: var(--section-parallax-background-position, center);
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: var(--section-parallax-background-size, cover);
     position: relative;
 
-    background-color: light-dark(var(--slate-01), var(--slate-08));
+    background-color: var(--section-parallax-background-colour, var(--slate-01));
     width: 100%;
 
     @media (hover: hover) and (pointer: fine) {
       @supports (background-attachment: fixed) {
         background-attachment: fixed;
-        min-height: 120vh;
+        min-height: var(--section-parallax-min-height-fixed, 120vh);
       }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      background-attachment: scroll;
+      min-height: var(--section-parallax-min-height, 100svh);
+    }
   }
 }
 </style>

package/app/components/01.atoms/animations/section-parallax/stories/SectionParallax.stories.ts

@@ -0,0 +1,98 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../SectionParallax.vue";
+
+type StoryArgs = {
+  tag: "div" | "section" | "article" | "aside";
+  backgroundImage: string;
+  showOverlay: boolean;
+  overlayText: string;
+};
+
+export default {
+  title: "Atoms/Effects/SectionParallax",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "aside"],
+      description: "Root element tag",
+    },
+    backgroundImage: {
+      control: { type: "text" },
+      description: "Path to the background image",
+    },
+    showOverlay: {
+      control: { type: "boolean" },
+      description: "Show overlay slot content",
+    },
+    overlayText: {
+      control: { type: "text" },
+      description: "Overlay slot text",
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+    class: {
+      table: { disable: true },
+    },
+    style: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "section",
+    backgroundImage: "https://picsum.photos/id/28/1600/1200",
+    showOverlay: true,
+    overlayText: "A quiet moment.",
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <StorybookComponent :tag="args.tag" :background-image="args.backgroundImage">
+      <div
+        v-if="args.showOverlay"
+        style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6);"
+      >
+        {{ args.overlayText }}
+      </div>
+    </StorybookComponent>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const NoOverlay = Template.bind({});
+NoOverlay.args = {
+  showOverlay: false,
+};
+
+export const CustomHeight = Template.bind({});
+CustomHeight.args = {
+  showOverlay: true,
+  overlayText: "Shorter atmospheric break via --section-parallax-min-height and -min-height-fixed.",
+};
+CustomHeight.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <StorybookComponent
+      :tag="args.tag"
+      :background-image="args.backgroundImage"
+      style="--section-parallax-min-height: 60vh; --section-parallax-min-height-fixed: 70vh;"
+    >
+      <div
+        v-if="args.showOverlay"
+        style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6);"
+      >
+        {{ args.overlayText }}
+      </div>
+    </StorybookComponent>
+  `,
+});