srcdev-nuxt-components 9.4.6 → 9.4.8

package/app/composables/useTabs.ts

@@ -1,291 +1,309 @@
-import { useResizeObserver } from "@vueuse/core"
+import { useResizeObserver } from "@vueuse/core";
+
+interface UseTabsOptions {
+  trackHover: boolean;
+  trackActive: boolean;
+  trackIndicator: boolean;
+}
 
 const useTabs = (
   axis: string,
   tabsNavRef: Ref<HTMLElement | null>,
   tabsContentRefs: Ref<HTMLElement[] | null>,
-  duration: number
+  duration: number,
+  options: UseTabsOptions = { trackHover: true, trackActive: true, trackIndicator: true }
 ) => {
-  const navItems = ref<HTMLElement[] | null>(null)
-  const previousActiveTab = useState<HTMLElement | null>("previousActiveTab", () => null)
-  const currentActiveTab = ref<HTMLElement>()
+  const navItems = ref<HTMLElement[] | null>(null);
+  // Plain ref, not useState: this is ephemeral per-instance UI state, not something that
+  // needs to survive SSR hydration or be shared by key — useState's fixed key here previously
+  // meant every TabsCore instance on the page silently shared the same "previous active tab".
+  const previousActiveTab = ref<HTMLElement | null>(null);
+  const currentActiveTab = ref<HTMLElement>();
 
-  const previousHoveredTab = ref<HTMLElement>()
-  const currentHoveredTab = ref<HTMLElement>()
-  const tagName = ref<string>()
+  const previousHoveredTab = ref<HTMLElement>();
+  const currentHoveredTab = ref<HTMLElement>();
+  const tagName = ref<string>();
+
+  let activeSettleTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let hoveredSettleTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
   const initNavDecorators = () => {
     navItems.value = tabsNavRef.value
-      ? (Array.from(tabsNavRef.value.querySelectorAll("[data-nav-item")) as HTMLElement[])
-      : []
+      ? (Array.from(tabsNavRef.value.querySelectorAll("[data-nav-item]")) as HTMLElement[])
+      : [];
 
     if (!navItems.value || navItems.value.length === 0) {
-      return
+      return;
     }
 
-    const firstNavItem = navItems.value[0]
-    if (!firstNavItem) return
+    const firstNavItem = navItems.value[0];
+    if (!firstNavItem) return;
 
-    tagName.value = firstNavItem.tagName.toLowerCase()
+    tagName.value = firstNavItem.tagName.toLowerCase();
 
-    const activeIndex = ref(0)
+    const activeIndex = ref(0);
 
     // Temporarily set the first nav item as active
-    firstNavItem.setAttribute("aria-selected", "true")
+    firstNavItem.setAttribute("aria-selected", "true");
 
     // Test if navItems are hyperlinks
     if (firstNavItem.tagName.toLowerCase() === "a") {
       // Find index of element with class "router-link-active"
-      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains("router-link-active"))
+      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains("router-link-active"));
     }
-    // else {
-    //  Set actve tab
-    // }
 
-    const activeElement = navItems.value[activeIndex.value]
-    if (!activeElement) return
+    const activeElement = navItems.value[activeIndex.value];
+    if (!activeElement) return;
 
-    currentActiveTab.value = activeElement
-    currentHoveredTab.value = activeElement
+    currentActiveTab.value = activeElement;
+    currentHoveredTab.value = activeElement;
 
-    previousActiveTab.value = activeElement
-    previousHoveredTab.value = activeElement
+    previousActiveTab.value = activeElement;
+    previousHoveredTab.value = activeElement;
 
-    addNavDecorators()
-    setActiveTabContent()
-  }
+    setRovingTabindex();
+    addNavDecorators();
+    setActiveTabContent();
+  };
 
   const addNavDecorators = () => {
-    const elementClasses = ["nav__active-indicator", "nav__active", "nav__hovered"]
-    if (tabsNavRef.value) {
-      for (let i = 0; i < 3; i++) {
-        const div = document.createElement("div")
-        const className = elementClasses[i]
-        if (className) {
-          div.classList.add(className)
-        }
-        tabsNavRef.value.appendChild(div)
-      }
+    if (!tabsNavRef.value) return;
+
+    if (options.trackIndicator) {
+      tabsNavRef.value.appendChild(
+        Object.assign(document.createElement("div"), { className: "nav__active-indicator" })
+      );
     }
-  }
+    if (options.trackActive) {
+      tabsNavRef.value.appendChild(Object.assign(document.createElement("div"), { className: "nav__active" }));
+    }
+    if (options.trackHover) {
+      tabsNavRef.value.appendChild(Object.assign(document.createElement("div"), { className: "nav__hovered" }));
+    }
+  };
+
+  const setRovingTabindex = () => {
+    navItems.value?.forEach((tab) => {
+      tab.setAttribute("tabindex", tab === currentActiveTab.value ? "0" : "-1");
+    });
+  };
 
   const navItemHovered = (event: Event) => {
-    const target = event.target as HTMLElement
-    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0
+    if (!options.trackHover) return;
+
+    const target = event.target as HTMLElement;
+    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0;
 
     if (newTabPosition !== 0) {
-      previousHoveredTab.value = currentHoveredTab.value
-      currentHoveredTab.value = target
-      moveHoveredIndicator()
+      previousHoveredTab.value = currentHoveredTab.value;
+      currentHoveredTab.value = target;
+      moveHoveredIndicator();
     }
-  }
+  };
 
   const resetHoverToActivePosition = () => {
-    previousHoveredTab.value = currentHoveredTab.value
-    currentHoveredTab.value = currentActiveTab.value
-    moveHoveredIndicator()
-  }
+    if (!options.trackHover) return;
 
-  const navItemClicked = (event: Event) => {
-    const target = event.target as HTMLElement
+    previousHoveredTab.value = currentHoveredTab.value;
+    currentHoveredTab.value = currentActiveTab.value;
+    moveHoveredIndicator();
+  };
 
-    previousActiveTab.value = currentActiveTab.value || null
-    currentActiveTab.value = target
+  const activateTab = (target: HTMLElement) => {
+    if (target === currentActiveTab.value) return;
+
+    previousActiveTab.value = currentActiveTab.value || null;
+    currentActiveTab.value = target;
 
     navItems.value?.forEach((tab) => {
-      tab.setAttribute("aria-selected", currentActiveTab.value === tab ? "true" : "false")
-    })
-
-    moveActiveIndicator()
-    setActiveTabContent()
-  }
-
-  const handleTransitioningClass = (transitionDuration: number = 200) => {
-    if (previousHoveredTab.value && currentHoveredTab.value && navItems.value) {
-      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value)
-      const navItemsArray = navItems.value
-
-      const timeout = Math.floor(
-        transitionDuration /
-          Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value))
-      )
-
-      if (newTabPosition === 4) {
-        for (
-          let i = navItemsArray.indexOf(previousHoveredTab.value);
-          i < navItemsArray.indexOf(currentHoveredTab.value);
-          i++
-        ) {
-          const element = navItemsArray[i]
-          if (element) {
-            element.classList.add("transitioning")
-            if (
-              i >= navItemsArray.indexOf(previousHoveredTab.value) &&
-              i < navItemsArray.indexOf(currentHoveredTab.value)
-            ) {
-              setTimeout(() => {
-                if (element) {
-                  element.classList.remove("transitioning")
-                }
-                // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-              }, duration * 1.5)
-            }
-          }
-        }
-      } else {
-        for (
-          let i = navItemsArray.indexOf(previousHoveredTab.value);
-          i > navItemsArray.indexOf(currentHoveredTab.value);
-          i--
-        ) {
-          const element = navItemsArray[i]
-          if (element) {
-            element.classList.add("transitioning")
-            if (
-              i <= navItemsArray.indexOf(previousHoveredTab.value) &&
-              i > navItemsArray.indexOf(currentHoveredTab.value)
-            ) {
-              setTimeout(() => {
-                if (element) {
-                  element.classList.remove("transitioning")
-                }
-                // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-              }, duration * 1.5)
-            }
-          }
-        }
-      }
+      tab.setAttribute("aria-selected", currentActiveTab.value === tab ? "true" : "false");
+    });
+
+    setRovingTabindex();
+    moveActiveIndicator();
+    setActiveTabContent();
+  };
+
+  const navItemClicked = (event: Event) => {
+    activateTab(event.target as HTMLElement);
+  };
+
+  // WAI-ARIA Tabs pattern: arrow keys move focus and activate (automatic activation);
+  // Home/End jump to the first/last tab.
+  const navItemKeydown = (event: KeyboardEvent) => {
+    if (!navItems.value || navItems.value.length === 0) return;
+
+    const previousKey = axis === "y" ? "ArrowUp" : "ArrowLeft";
+    const nextKey = axis === "y" ? "ArrowDown" : "ArrowRight";
+
+    let targetIndex: number | null = null;
+    const currentIndex = currentActiveTab.value ? navItems.value.indexOf(currentActiveTab.value) : 0;
+
+    if (event.key === nextKey) {
+      targetIndex = (currentIndex + 1) % navItems.value.length;
+    } else if (event.key === previousKey) {
+      targetIndex = (currentIndex - 1 + navItems.value.length) % navItems.value.length;
+    } else if (event.key === "Home") {
+      targetIndex = 0;
+    } else if (event.key === "End") {
+      targetIndex = navItems.value.length - 1;
     }
-  }
+
+    if (targetIndex === null) return;
+
+    event.preventDefault();
+    const targetTab = navItems.value[targetIndex];
+    if (!targetTab) return;
+
+    targetTab.focus();
+    activateTab(targetTab);
+  };
 
   const setFinalHoveredPositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration
-    // const tabsNavRefYPosition = tabsNavRef.value?.getBoundingClientRect().top || 0;
-    const newTabWidth =
-      currentHoveredTab.value && tabsNavRef.value
-        ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth
-        : 0
-    tabsNavRef.value?.style.setProperty("--_transition-duration", setDuration + "ms")
-    tabsNavRef.value?.style.setProperty("--_x-hovered", currentHoveredTab.value?.offsetLeft + "px")
-
-    tabsNavRef.value?.style.setProperty("--_width-hovered", newTabWidth?.toString())
-    tabsNavRef.value?.style.setProperty("--_y-hovered", currentHoveredTab.value?.offsetTop + "px")
-    tabsNavRef.value?.style.setProperty("--_y-height", currentHoveredTab.value?.offsetHeight + "px")
-    tabsNavRef.value?.style.setProperty("--_y-width", currentHoveredTab.value?.offsetWidth + "px")
-  }
+    if (!tabsNavRef.value || !currentHoveredTab.value) return;
+
+    // Batch every layout read before any style write below, so the browser doesn't need to
+    // perform a forced synchronous reflow between each read/write pair.
+    const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = currentHoveredTab.value;
+    const { offsetWidth: navWidth } = tabsNavRef.value;
+    const setDuration = resized ? 0 : duration;
+    const newTabWidth = navWidth ? offsetWidth / navWidth : 0;
+
+    const nav = tabsNavRef.value;
+    nav.style.setProperty("--_transition-duration", setDuration + "ms");
+    nav.style.setProperty("--_x-hovered", offsetLeft + "px");
+    nav.style.setProperty("--_width-hovered", newTabWidth.toString());
+    nav.style.setProperty("--_y-hovered", offsetTop + "px");
+    nav.style.setProperty("--_y-height", offsetHeight + "px");
+    nav.style.setProperty("--_y-width", offsetWidth + "px");
+  };
 
   const setFinalActivePositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration
-    const newTabWidth =
-      currentActiveTab.value && tabsNavRef.value ? currentActiveTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0
-    tabsNavRef.value?.style.setProperty("--_transition-duration", setDuration + "ms")
-    tabsNavRef.value?.style.setProperty("--_x-active", currentActiveTab.value?.offsetLeft + "px")
-    tabsNavRef.value?.style.setProperty("--_width-active", newTabWidth?.toString())
-    tabsNavRef.value?.style.setProperty("--_y-active", currentActiveTab.value?.offsetTop + "px")
-    tabsNavRef.value?.style.setProperty("--_y-height", currentActiveTab.value?.offsetHeight + "px")
-    tabsNavRef.value?.style.setProperty("--_y-width", currentActiveTab.value?.offsetWidth + "px")
-  }
+    if (!tabsNavRef.value || !currentActiveTab.value) return;
+
+    const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = currentActiveTab.value;
+    const { offsetWidth: navWidth } = tabsNavRef.value;
+    const setDuration = resized ? 0 : duration;
+    const newTabWidth = navWidth ? offsetWidth / navWidth : 0;
+
+    const nav = tabsNavRef.value;
+    nav.style.setProperty("--_transition-duration", setDuration + "ms");
+    nav.style.setProperty("--_x-active", offsetLeft + "px");
+    nav.style.setProperty("--_width-active", newTabWidth.toString());
+    nav.style.setProperty("--_y-active", offsetTop + "px");
+    nav.style.setProperty("--_y-height", offsetHeight + "px");
+    nav.style.setProperty("--_y-width", offsetWidth + "px");
+  };
 
   const moveActiveIndicator = () => {
-    if (!tabsNavRef.value || !currentActiveTab.value) return
+    if (!tabsNavRef.value || !currentActiveTab.value) return;
+    if (!options.trackActive && !options.trackIndicator) return;
+
+    const nav = tabsNavRef.value;
+    const current = currentActiveTab.value;
+    const previous = previousActiveTab.value;
 
-    tabsNavRef.value.style.setProperty("--_transition-duration", duration + "ms")
+    // Batch reads first.
+    const newTabPosition = previous ? previous.compareDocumentPosition(current) : 0;
+    const currentLeft = current.offsetLeft;
+    const currentWidth = current.offsetWidth;
+    const previousLeft = previous?.offsetLeft ?? 0;
+    const previousWidth = previous?.offsetWidth ?? 0;
+    const navWidth = nav.offsetWidth;
 
-    const newTabPosition =
-      previousActiveTab.value && currentActiveTab.value
-        ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value)
-        : 0
-    let transitionWidth
+    let transitionWidth: number;
+    let xActive: string | null = null;
 
     if (newTabPosition === 4) {
-      transitionWidth =
-        currentActiveTab.value && previousActiveTab.value
-          ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft
-          : 0
+      transitionWidth = previous ? currentLeft + currentWidth - previousLeft : 0;
     } else {
-      transitionWidth =
-        previousActiveTab.value && currentActiveTab.value
-          ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft
-          : 0
-      tabsNavRef.value.style.setProperty(
-        "--_x-active",
-        currentActiveTab.value ? currentActiveTab.value.offsetLeft + "px" : "0"
-      )
+      transitionWidth = previous ? previousLeft + previousWidth - currentLeft : 0;
+      xActive = currentLeft + "px";
     }
 
-    tabsNavRef.value.style.setProperty("--_width-active", String(transitionWidth / tabsNavRef.value.offsetWidth))
-
-    handleTransitioningClass(duration)
+    // Then batch writes.
+    nav.style.setProperty("--_transition-duration", duration + "ms");
+    if (xActive !== null) {
+      nav.style.setProperty("--_x-active", xActive);
+    }
+    nav.style.setProperty("--_width-active", String(transitionWidth / navWidth));
 
-    setTimeout(
+    if (activeSettleTimeoutId) clearTimeout(activeSettleTimeoutId);
+    activeSettleTimeoutId = setTimeout(
       () => {
-        setFinalActivePositions()
+        setFinalActivePositions();
       },
       Math.floor(duration + 20)
-    )
-  }
+    );
+  };
 
   const moveHoveredIndicator = () => {
-    if (!tabsNavRef.value || !currentHoveredTab.value) return
+    if (!tabsNavRef.value || !currentHoveredTab.value) return;
+
+    const nav = tabsNavRef.value;
+    const current = currentHoveredTab.value;
+    const previous = previousHoveredTab.value;
 
-    tabsNavRef.value.style.setProperty("--_transition-duration", duration + "ms")
+    // Batch reads first.
+    const newTabPosition = previous ? previous.compareDocumentPosition(current) : 0;
+    const currentLeft = current.offsetLeft;
+    const currentWidth = current.offsetWidth;
+    const previousLeft = previous?.offsetLeft ?? 0;
+    const previousWidth = previous?.offsetWidth ?? 0;
+    const navWidth = nav.offsetWidth;
 
-    const newTabPosition =
-      previousHoveredTab.value && currentHoveredTab.value
-        ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value)
-        : 0
-    let transitionWidth
+    let transitionWidth: number;
+    let xHovered: string | null = null;
 
     if (newTabPosition === 4) {
-      transitionWidth =
-        currentHoveredTab.value && previousHoveredTab.value
-          ? currentHoveredTab.value.offsetLeft +
-            currentHoveredTab.value.offsetWidth -
-            previousHoveredTab.value.offsetLeft
-          : 0
+      transitionWidth = previous ? currentLeft + currentWidth - previousLeft : 0;
     } else {
-      transitionWidth =
-        previousHoveredTab.value && currentHoveredTab.value
-          ? previousHoveredTab.value.offsetLeft +
-            previousHoveredTab.value.offsetWidth -
-            currentHoveredTab.value.offsetLeft
-          : 0
-      tabsNavRef.value.style.setProperty(
-        "--_x-hovered",
-        currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + "px" : "0"
-      )
+      transitionWidth = previous ? previousLeft + previousWidth - currentLeft : 0;
+      xHovered = currentLeft + "px";
     }
 
-    tabsNavRef.value.style.setProperty("--_width-hovered", String(transitionWidth / tabsNavRef.value.offsetWidth))
-
-    handleTransitioningClass(duration)
+    // Then batch writes.
+    nav.style.setProperty("--_transition-duration", duration + "ms");
+    if (xHovered !== null) {
+      nav.style.setProperty("--_x-hovered", xHovered);
+    }
+    nav.style.setProperty("--_width-hovered", String(transitionWidth / navWidth));
 
-    setTimeout(
+    if (hoveredSettleTimeoutId) clearTimeout(hoveredSettleTimeoutId);
+    hoveredSettleTimeoutId = setTimeout(
       () => {
-        setFinalHoveredPositions()
+        setFinalHoveredPositions();
       },
       Math.floor(duration + 20)
-    )
-  }
+    );
+  };
 
   const setActiveTabContent = () => {
-    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value)
+    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value);
     tabsContentRefs.value?.forEach((tabContent: HTMLElement, index: number) => {
-      tabContent.style.display = activeIndex === index ? "block" : "none"
-    })
-  }
+      const isActive = activeIndex === index;
+      tabContent.style.display = isActive ? "block" : "none";
+      tabContent.setAttribute("aria-hidden", isActive ? "false" : "true");
+    });
+  };
 
   useResizeObserver(tabsNavRef, () => {
-    setFinalActivePositions(true)
-    setFinalHoveredPositions(true)
-  })
+    setFinalActivePositions(true);
+    setFinalHoveredPositions(true);
+  });
+
+  onUnmounted(() => {
+    if (activeSettleTimeoutId) clearTimeout(activeSettleTimeoutId);
+    if (hoveredSettleTimeoutId) clearTimeout(hoveredSettleTimeoutId);
+  });
 
   return {
     initNavDecorators,
     navItemClicked,
     navItemHovered,
+    navItemKeydown,
     resetHoverToActivePosition,
-  }
-}
+  };
+};
 
-export default useTabs
+export default useTabs;

package/app/types/components/index.ts

@@ -18,3 +18,5 @@ export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
 export * from "./display-tooltip-defined.d"
 export * from "./marquee-scroller.d"
+export * from "./rotating-carousel-image.d"
+export * from "./skip-links.d"

package/app/types/components/rotating-carousel-image.d.ts

@@ -0,0 +1,4 @@
+export interface CarouselImageData {
+  src: string
+  alt: string
+}

package/app/types/components/skip-links.d.ts

@@ -0,0 +1,4 @@
+export interface SkipLink {
+  href: string
+  label: string
+}

package/app/types/forms/types.forms.d.ts

@@ -16,7 +16,7 @@ export type CheckboxStyle = "check" | "cross";
 export type RadioAppearance = null | "with-decorator";
 export type OptionsLayout = "block" | "inline" | "equal-widths";
 export type LabelWeight = "normal" | "semi-bold" | "bold";
-export type InputTypesText = "text" | "email" | "password" | "number" | "tel" | "url";
+export type InputTypesText = "text" | "email" | "password" | "number" | "tel" | "url" | "date";
 export type InputMode = "text" | "email" | "tel" | "url" | "search" | "numeric" | "none" | "decimal";
 
 // Weight types for form components

package/package.json

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

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/DataGrid.spec.ts.snap

@@ -1,11 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
-"<section class="auto-grid custom-class" aria-labelledby="v-0-0">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</section>"
-`;
-
-exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/masonry-grid/MasonryGrid.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="masonry-grid-wrapper"
-    :class="[elementClasses]"
-    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
-  >
-    <template v-for="item in gridData" :key="item.id">
-      <div class="masonry-grid-item">
-        <slot :name="item.id"></slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  itemMinWidth: {
-    type: Number,
-    default: 300,
-  },
-  gap: {
-    type: Number,
-    default: 1.2,
-  },
-  unit: {
-    type: String,
-    default: "rem",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridData = toRef(() => props.gridData);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-wrapper {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  columns: auto var(--_item-min-width);
-  column-gap: var(--_masonry-grid-gap);
-
-  .masonry-grid-item {
-    break-inside: avoid;
-    outline: 0.1rem solid var(--_border-color);
-    padding: 1.2rem;
-    margin-block-end: var(--_masonry-grid-gap);
-  }
-}
-}
-</style>