srcdev-nuxt-components 9.4.5 → 9.4.7

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

@@ -0,0 +1,315 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import MarqueeScroller from "../MarqueeScroller.vue";
+
+const stubMatchMedia = (prefersReducedMotion: boolean) => {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn().mockReturnValue({
+      matches: prefersReducedMotion,
+      addEventListener: vi.fn(),
+    })
+  );
+};
+
+// jsdom reports 0 for offsetWidth/scrollWidth — stub them per-element by class so
+// updateRepeatCount() sees realistic container/content dimensions.
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth");
+const originalScrollWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollWidth");
+
+const stubDimensions = ({ containerWidth, groupScrollWidth }: { containerWidth: number; groupScrollWidth: number }) => {
+  Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+    configurable: true,
+    get() {
+      return this.classList.contains("marquee-scroller") ? containerWidth : 0;
+    },
+  });
+  Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+    configurable: true,
+    get() {
+      return this.classList.contains("marquee-group") ? groupScrollWidth : 0;
+    },
+  });
+};
+
+const restoreDimensions = () => {
+  if (originalOffsetWidth) Object.defineProperty(HTMLElement.prototype, "offsetWidth", originalOffsetWidth);
+  if (originalScrollWidth) Object.defineProperty(HTMLElement.prototype, "scrollWidth", originalScrollWidth);
+};
+
+const marqueeData = [
+  { id: 1, content: "logo-a" },
+  { id: 2, content: "logo-b" },
+];
+
+describe("MarqueeScroller", () => {
+  beforeEach(() => {
+    stubMatchMedia(false);
+  });
+
+  afterEach(() => {
+    restoreDimensions();
+  });
+
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders after mount (displayComponent flips true in onMounted)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".marquee-scroller").exists()).toBe(true);
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: {
+        animationRuntime: "20s",
+        reverse: true,
+        marqueeData,
+        itemConfig: { width: "80px", height: "80px", gap: "24px" },
+        ariaLabel: "Client logos",
+        ariaDescription: "Custom instructions",
+        showControls: true,
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── marqueeData / slots ─────────────────────────────────────────────────
+
+  it("renders each marqueeData item twice (main track + duplicate for looping)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: {
+        "1": "<span class='logo-a'>A</span>",
+        "2": "<span class='logo-b'>B</span>",
+      },
+    });
+    expect(wrapper.findAll(".logo-a")).toHaveLength(2);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(2);
+  });
+
+  it("renders no items when marqueeData is empty", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.findAll(".item")).toHaveLength(0);
+  });
+
+  // ─── reverse ─────────────────────────────────────────────────────────────
+
+  it("does not apply the reverse class by default", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.classes()).not.toContain("reverse");
+  });
+
+  it("applies the reverse class when reverse is true", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { reverse: true },
+    });
+    expect(wrapper.classes()).toContain("reverse");
+  });
+
+  // ─── Accessibility attributes ────────────────────────────────────────────
+
+  it("defaults aria-label to 'Scrolling content'", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.attributes("aria-label")).toBe("Scrolling content");
+  });
+
+  it("uses a custom ariaLabel when provided", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { ariaLabel: "Client logos" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Client logos");
+  });
+
+  it("uses default screen-reader instructions when ariaDescription is not set", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".sr-only").text()).toContain("Use spacebar to pause or play");
+  });
+
+  it("uses a custom ariaDescription when provided", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { ariaDescription: "Custom instructions" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Custom instructions");
+  });
+
+  it("sets aria-live to off while playing", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.attributes("aria-live")).toBe("off");
+  });
+
+  // ─── Controls ────────────────────────────────────────────────────────────
+
+  it("does not render the control button by default", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".control-btn").exists()).toBe(false);
+  });
+
+  it("renders the control button when showControls is true", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    expect(wrapper.find(".control-btn").exists()).toBe(true);
+  });
+
+  it("toggles paused state and aria-live when the control button is clicked", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.classes()).toContain("paused");
+    expect(wrapper.attributes("aria-live")).toBe("polite");
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Play animation");
+  });
+
+  // ─── Control button icon / label customisation ──────────────────────────
+
+  it("renders the default play icon while playing", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:pause");
+  });
+
+  it("renders the default play icon once paused", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:play");
+  });
+
+  it("renders a custom playIcon/pauseIcon", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true, playIcon: "mdi:play-circle", pauseIcon: "mdi:pause-circle" },
+    });
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:pause-circle");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:play-circle");
+  });
+
+  it("uses custom playLabel/pauseLabel for the control button's aria-label", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true, playLabel: "Reproduire", pauseLabel: "Suspendre" },
+    });
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Suspendre");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Reproduire");
+  });
+
+  it("replaces the toggle icon via the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+      slots: { "toggle-icon": "<span class='custom-icon'>custom</span>" },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  it("passes isPaused to the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+      slots: { "toggle-icon": "<template #toggle-icon=\"{ isPaused }\"><span class='state'>{{ isPaused }}</span></template>" },
+    });
+    expect(wrapper.find(".state").text()).toBe("false");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".state").text()).toBe("true");
+  });
+
+  // ─── Keyboard interaction ────────────────────────────────────────────────
+
+  it("toggles pause on spacebar keydown", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("keydown", { key: " " });
+    expect(wrapper.classes()).toContain("paused");
+    await wrapper.trigger("keydown", { key: " " });
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  it("does not react to arrow keys (no manual-stepping behaviour is implemented)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("keydown", { key: "ArrowLeft" });
+    await wrapper.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  // ─── Focus / blur ────────────────────────────────────────────────────────
+
+  it("pauses on focus when respectReducedMotion is true (default)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("focus");
+    expect(wrapper.classes()).toContain("paused");
+  });
+
+  it("resumes on blur when the user does not prefer reduced motion", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("focus");
+    await wrapper.trigger("blur");
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  it("does not pause on focus when respectReducedMotion is false", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { respectReducedMotion: false },
+    });
+    await wrapper.trigger("focus");
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  // ─── Reduced motion ──────────────────────────────────────────────────────
+
+  it("auto-pauses and applies reduced-motion class when the user prefers reduced motion", async () => {
+    stubMatchMedia(true);
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.classes()).toContain("paused");
+    expect(wrapper.classes()).toContain("reduced-motion");
+  });
+
+  it("does not check matchMedia when respectReducedMotion is false", async () => {
+    stubMatchMedia(false);
+    const matchMediaSpy = vi.fn(() => ({ matches: false, addEventListener: vi.fn() }));
+    vi.stubGlobal("matchMedia", matchMediaSpy);
+    await mountSuspended(MarqueeScroller, {
+      props: { respectReducedMotion: false },
+    });
+    expect(matchMediaSpy).not.toHaveBeenCalled();
+  });
+
+  // ─── Repeating marqueeData to fill a wide container ─────────────────────
+
+  it("repeats marqueeData enough times so one group's width covers a wide container", async () => {
+    stubDimensions({ containerWidth: 500, groupScrollWidth: 100 });
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: { "1": "<span class='logo-a'></span>", "2": "<span class='logo-b'></span>" },
+    });
+    await nextTick();
+    await nextTick();
+    // needs ceil(500/100) = 5 copies of the 2-item data per group
+    expect(wrapper.findAll(".logo-a")).toHaveLength(10);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(10);
+  });
+
+  it("does not add extra copies when a single copy already covers the container", async () => {
+    stubDimensions({ containerWidth: 50, groupScrollWidth: 200 });
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: { "1": "<span class='logo-a'></span>", "2": "<span class='logo-b'></span>" },
+    });
+    await nextTick();
+    await nextTick();
+    expect(wrapper.findAll(".logo-a")).toHaveLength(2);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(2);
+  });
+});

package/app/components/01.atoms/animations/marquee-scroller/tests/__snapshots__/MarqueeScroller.spec.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MarqueeScroller > renders correct HTML structure (all props set) 1`] = `
+"<div class="marquee-scroller reverse" role="region" aria-label="Client logos" aria-live="off" tabindex="0">
+  <div class="sr-only">Custom instructions</div><button class="control-btn" aria-label="Pause animation" type="button"><span class="iconify i-mdi:pause" aria-hidden="true"></span></button>
+  <div class="marquee-track" aria-hidden="true">
+    <div class="marquee-group">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="marquee-group" aria-hidden="true">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`MarqueeScroller > renders correct HTML structure (default props) 1`] = `
+"<div class="marquee-scroller" role="region" aria-label="Scrolling content" aria-live="off" tabindex="0">
+  <div class="sr-only">Use spacebar to pause or play the animation.</div>
+  <!--v-if-->
+  <div class="marquee-track" aria-hidden="true">
+    <div class="marquee-group"></div>
+    <div class="marquee-group" aria-hidden="true"></div>
+  </div>
+</div>"
+`;

package/app/components/01.atoms/canvas-switcher/stories/CanvasSwitcher.stories.ts

@@ -37,17 +37,18 @@ export default {
   },
 } as Meta<typeof CanvasSwitcher>;
 
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes.
 const Template: StoryFn<CanvasSwitcherStoryArgs> = (args) => ({
   components: { CanvasSwitcher },
   setup() {
-    const { canvasName, ...otherArgs } = args;
-    const selected = ref(canvasName);
-    return { selected, args: otherArgs };
+    return { args };
   },
   template: `
     <div>
-      <CanvasSwitcher v-model:canvas-name="selected" v-bind="args" />
-      <p style="margin-top: 1.6rem;">Selected: {{ selected }}</p>
+      <CanvasSwitcher v-model:canvas-name="args.canvasName" v-bind="args" />
+      <p style="margin-top: 1.6rem;">Selected: {{ args.canvasName }}</p>
     </div>
   `,
 });
@@ -60,14 +61,12 @@ PreviewWidthDemo.args = {};
 PreviewWidthDemo.render = (args) => ({
   components: { CanvasSwitcher },
   setup() {
-    const { canvasName } = args;
-    const selected = ref(canvasName);
-    return { selected };
+    return { args };
   },
   template: `
     <div>
-      <CanvasSwitcher v-model:canvas-name="selected" />
-      <div :class="selected" style="border: 1px dashed currentColor; margin-top: 1.6rem; padding: 1.6rem;">
+      <CanvasSwitcher v-model:canvas-name="args.canvasName" />
+      <div :class="args.canvasName" style="border: 1px dashed currentColor; margin-top: 1.6rem; padding: 1.6rem;">
         This box is constrained by the selected canvas's utility class.
       </div>
     </div>

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -17,7 +17,7 @@
             <h3 class="docs-nav-heading">{{ docsNavLabel }}</h3>
           </template>
           <template #content>
-            <nav class="docs-nav-list" aria-label="Docs navigation">
+            <nav class="docs-nav-list" :aria-label="docsNavAriaLabel">
               <ul>
                 <li v-for="item in docsNavItems" :key="item.to">
                   <component
@@ -53,7 +53,7 @@
             <h3 class="docs-page-nav-heading">{{ docsPageNavLabel }}</h3>
           </template>
           <template #content>
-            <nav class="docs-page-nav-list" aria-label="On this page">
+            <nav class="docs-page-nav-list" :aria-label="docsPageNavAriaLabel">
               <ul>
                 <li v-for="item in docsPageNavItems" :key="item.to">
                   <component
@@ -91,6 +91,10 @@ interface Props {
   docsPageNavItems?: DocsNavItem[];
   docsNavLabel?: string;
   docsPageNavLabel?: string;
+  /** aria-label on the docs-nav <nav> landmark — override for localisation. */
+  docsNavAriaLabel?: string;
+  /** aria-label on the page-nav <nav> landmark — override for localisation. */
+  docsPageNavAriaLabel?: string;
   panelVariant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
@@ -100,6 +104,8 @@ const props = withDefaults(defineProps<Props>(), {
   docsPageNavItems: () => [],
   docsNavLabel: "Navigation",
   docsPageNavLabel: "On this page",
+  docsNavAriaLabel: "Docs navigation",
+  docsPageNavAriaLabel: "On this page",
   // Defaults to "classic" — the docs/admin nav toggle relies on contentIsOnTop on mobile, and
   // ExpandingPanel's ::details-content-based positioning silently fails on WebKit (Safari/iOS),
   // making the nav unreachable there. See AccordianCore's own variant prop and CLAUDE.md

package/app/components/01.atoms/content-wrappers/docs-pages/stories/ContentDocs.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import ContentDocs from "../ContentDocs.vue";
 import type { DocsNavItem } from "~/types/components";
 
@@ -86,19 +87,19 @@ export default {
 
 // ─── Stories ─────────────────────────────────────────────────────────────────
 
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes.
 const Template: StoryFn<ContentDocsStoryArgs> = (args) => ({
   components: { ContentDocs },
   setup() {
-    const { activeNavItem, activePageNavItem, ...rest } = args;
-    const activeNav = ref(activeNavItem);
-    const activePageNav = ref(activePageNavItem);
-    return { args: rest, activeNav, activePageNav };
+    return { args };
   },
   template: `
     <ContentDocs
       v-bind="args"
-      v-model:active-nav-item="activeNav"
-      v-model:active-page-nav-item="activePageNav"
+      v-model:active-nav-item="args.activeNavItem"
+      v-model:active-page-nav-item="args.activePageNavItem"
     >
       <template #docsContent>
         <h3 style="margin-top:0">Docs Content</h3>
@@ -140,10 +141,8 @@ CustomLabels.args = {
 export const IconAtEnd: StoryFn<ContentDocsStoryArgs> = (args) => ({
   components: { ContentDocs },
   setup() {
-    const { activeNavItem, activePageNavItem, ...rest } = args;
-    const activeNav = ref(activeNavItem);
-    const activePageNav = ref(activePageNavItem);
-    return { args: { ...rest, styleClassPassthrough: ["icon-at-end-demo"] }, activeNav, activePageNav };
+    const componentArgs = computed(() => ({ ...args, styleClassPassthrough: ["icon-at-end-demo"] }));
+    return { args, componentArgs };
   },
   template: `
     <div>
@@ -154,9 +153,9 @@ export const IconAtEnd: StoryFn<ContentDocsStoryArgs> = (args) => ({
         }
       </style>
       <ContentDocs
-        v-bind="args"
-        v-model:active-nav-item="activeNav"
-        v-model:active-page-nav-item="activePageNav"
+        v-bind="componentArgs"
+        v-model:active-nav-item="args.activeNavItem"
+        v-model:active-page-nav-item="args.activePageNavItem"
       >
         <template #docsContent>
           <h3 style="margin-top:0">Docs Content</h3>

package/app/components/01.atoms/display-tooltip/DisplayTooltip.vue

@@ -7,7 +7,7 @@
         popovertargetaction="toggle"
         class="display-tooltip-trigger-button"
         :class="{ hide: hideTrigger }"
-        aria-label="Toggle the popover"
+        :aria-label="triggerAriaLabel"
       >
         <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
       </button>
@@ -24,12 +24,15 @@
 interface Props {
   tooltipId?: string;
   hideTrigger?: boolean;
+  /** aria-label on the trigger button — override for localisation. */
+  triggerAriaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tooltipId: "",
   hideTrigger: false,
+  triggerAriaLabel: "Toggle the popover",
   styleClassPassthrough: () => [],
 });
 

package/app/components/01.atoms/grids/column-flow-grid/CONSUMER-STYLING.md

@@ -0,0 +1,33 @@
+# ColumnFlowGrid — Consumer Styling Guide
+
+## Public token API
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--column-flow-grid-item-border-colour` | `var(--theme-border)` | Outline colour around each item |
+| `--column-flow-grid-item-padding` | `1.2rem` | Inner padding of each item |
+
+Column width and gap are controlled via props (`item-min-width`, `gap`, `unit`), not CSS custom
+properties — they drive the CSS column layout directly and need JS-computed values, so they aren't
+part of the public token API. See `.claude/skills/components/column-flow-grid.md`.
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --column-flow-grid-item-border-colour: var(--rose-05);
+  --column-flow-grid-item-padding: 1.6rem;
+}
+```
+
+---
+
+## Per-instance overrides
+
+```vue
+<ColumnFlowGrid style="--column-flow-grid-item-border-colour: var(--gold-04);">
+  ...
+</ColumnFlowGrid>
+```

package/app/components/01.atoms/grids/column-flow-grid/ColumnFlowGrid.vue

@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="tag"
+    class="column-flow-grid-wrapper"
+    :class="[elementClasses]"
+    :style="`--_column-flow-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
+  >
+    <div v-for="(_, name) in $slots" :key="name" class="column-flow-grid-item">
+      <slot :name="name"></slot>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  itemMinWidth?: number;
+  gap?: number;
+  unit?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  itemMinWidth: 300,
+  gap: 1.2,
+  unit: "rem",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .column-flow-grid-wrapper {
+    columns: auto var(--_item-min-width);
+    column-gap: var(--_column-flow-grid-gap);
+
+    .column-flow-grid-item {
+      break-inside: avoid;
+      outline: 0.1rem solid var(--column-flow-grid-item-border-colour, var(--theme-border));
+      padding: var(--column-flow-grid-item-padding, 1.2rem);
+      margin-block-end: var(--_column-flow-grid-gap);
+    }
+  }
+}
+</style>