srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/responsive-header/NavigationItems.vue

@@ -39,7 +39,7 @@
         >
           <ExpandingPanel
             name="overflow-navigation-group"
-            :animation-duration="detailsAanimationDuration"
+            :animation-duration="DETAILS_ANIMATION_DURATION"
             icon-size="medium"
             :style-class-passthrough="['overflow-navigation-details']"
           >
@@ -79,39 +79,49 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderState } from "../../types/components"
+import type { ResponsiveHeaderState } from "../../types/components";
 
-const props = defineProps({
-  mainNavigationState: {
-    type: Object as PropType<ResponsiveHeaderState>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  mainNavigationState?: ResponsiveHeaderState;
+  styleClassPassthrough?: string | string[];
+}
 
-const detailsAanimationDuration = 200
-const detailsAanimationDurationString = `${detailsAanimationDuration}ms`
+const props = withDefaults(defineProps<Props>(), {
+  mainNavigationState: () => ({ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }),
+  styleClassPassthrough: () => [],
+});
 
+// Performance: Use const assertion for static values
+const DETAILS_ANIMATION_DURATION = 200 as const;
+// const DETAILS_ANIMATION_DURATION_STRING = `${DETAILS_ANIMATION_DURATION}ms` as const;
+
+// Performance: Memoize expensive computed with proper dependencies
 const widestNavLinkWidthInMainNavigationState = computed(() => {
-  return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
-    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0))
-  }, 0)
-})
+  const clonedNavLinks = props.mainNavigationState?.clonedNavLinks;
+  if (!clonedNavLinks || Object.keys(clonedNavLinks).length === 0) {
+    return 0;
+  }
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+  return Object.values(clonedNavLinks).reduce((maxWidth, group) => {
+    if (!Array.isArray(group)) return maxWidth;
+    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0));
+  }, 0);
+});
 
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+// Performance: Use immediate flag and more efficient watching
 watch(
   () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
+  (newValue) => {
+    resetElementClasses(newValue);
+  },
+  { immediate: false, flush: "post" }
+);
 </script>
 
 <style lang="css">
+@layer components {
 .overflow-navigation-wrapper {
   --overflow-nav-padding-inline: 0.8rem;
   --overflow-nav-items-gap: 0px;
@@ -217,4 +227,5 @@ watch(
     }
   }
 }
+}
 </style>

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper" role="banner">
-    <nav class="main-navigation" ref="mainNav" aria-label="Main navigation">
+  <div ref="navigationWrapper" class="navigation" :class="[elementClasses, { loaded: navLoaded }]" role="banner">
+    <nav ref="mainNav" class="main-navigation" aria-label="Main navigation">
       <ul
         v-for="(navGroup, groupKey) in responsiveNavLinks"
         :key="groupKey"
-        class="main-navigation-list"
         :ref="
           (el: Element | ComponentPublicInstance | null) => setNavRef(String(groupKey), el as HTMLUListElement | null)
         "
+        class="main-navigation-list"
       >
         <li
           v-for="(link, localIndex) in navGroup"
           :key="localIndex"
+          ref="mainNavigationItems"
           class="main-navigation-item"
           :class="{
             'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible,
@@ -20,7 +21,6 @@
             '--_main-navigation-item-width':
               mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
           }"
-          ref="mainNavigationItems"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           @mouseenter="handleNavigationItemHover"
@@ -35,14 +35,14 @@
             <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
             {{ link.name }}
           </NuxtLink>
-          <details v-else class="main-navigation-details" name="navigation-group" ref="navigationDetails">
+          <details v-else ref="navigationDetails" class="main-navigation-details" name="navigation-group">
             <summary
+              class="main-navigation-details-summary has-toggle-icon"
+              :aria-label="`${link.childLinksTitle} submenu`"
               @mouseenter="handleSummaryHover($event)"
               @focusin="handleSummaryHover($event)"
               @click.prevent="handleSummaryAction($event)"
               @keyup.prevent.stop="handleSummaryAction($event)"
-              class="main-navigation-details-summary has-toggle-icon"
-              :aria-label="`${link.childLinksTitle} submenu`"
             >
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
               <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
@@ -51,7 +51,7 @@
             </summary>
             <div class="main-navigation-sub-nav" role="menu">
               <ul class="main-navigation-sub-nav-list">
-                <li class="main-navigation-sub-nav-item" v-for="childLink in link.childLinks" :key="childLink.name">
+                <li v-for="childLink in link.childLinks" :key="childLink.name" class="main-navigation-sub-nav-item">
                   <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">
                     {{ childLink.name }}
                   </NuxtLink>
@@ -62,11 +62,11 @@
         </li>
       </ul>
     </nav>
-    <nav class="secondary-navigation" ref="secondaryNav" aria-label="Secondary navigation">
+    <nav ref="secondaryNav" class="secondary-navigation" aria-label="Secondary navigation">
       <details
+        ref="overflowDetails"
         class="overflow-details"
         :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
-        ref="overflowDetails"
         name="overflow-group"
       >
         <summary class="overflow-details-summary has-toggle-icon">
@@ -108,47 +108,36 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "../../types/components"
-import { useResizeObserver, onClickOutside } from "@vueuse/core"
+import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "../../types/components";
+import { useResizeObserver, onClickOutside } from "@vueuse/core";
+
+interface Props {
+  responsiveNavLinks?: ResponsiveHeaderProp;
+  gapBetweenFirstAndSecondNav?: number;
+  overflowDetailsSummaryIcons?: Record<string, string>;
+  collapseBreakpoint?: number | null;
+  collapseAtMainNavIntersection?: boolean;
+  styleClassPassthrough?: string | string[];
+  allowExpandOnGesture?: boolean;
+}
 
-const props = defineProps({
-  responsiveNavLinks: {
-    type: Object as PropType<ResponsiveHeaderProp>,
-    default: () => [],
-  },
-  gapBetweenFirstAndSecondNav: {
-    type: Number,
-    default: 12, // px
-  },
-  overflowDetailsSummaryIcons: {
-    type: Object as PropType<Record<string, string>>,
-    default: {
-      more: "gravity-ui:ellipsis",
-      burger: "gravity-ui:bars",
-    },
-  },
-  collapseBreakpoint: {
-    type: Number,
-    default: null, // px
-  },
-  collapseAtMainNavIntersection: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  allowExpandOnGesture: {
-    type: Boolean,
-    default: true,
-  },
-})
+const props = withDefaults(defineProps<Props>(), {
+  responsiveNavLinks: () => ({}),
+  gapBetweenFirstAndSecondNav: 12,
+  overflowDetailsSummaryIcons: () => ({
+    more: "gravity-ui:ellipsis",
+    burger: "gravity-ui:bars",
+  }),
+  collapseBreakpoint: null,
+  collapseAtMainNavIntersection: false,
+  styleClassPassthrough: () => [],
+  allowExpandOnGesture: true,
+});
 
 const collapseNavigationBelowWidth = computed(
   () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
-)
-const collapseBreakpoint = ref(props.collapseBreakpoint)
+);
+const collapseBreakpoint = ref(props.collapseBreakpoint);
 
 // Use global navigation state for caching between route changes
 const {
@@ -156,65 +145,64 @@ const {
   navigationInitialized,
   navigationWrapperRects: cachedNavigationWrapperRects,
   secondaryNavRects: cachedSecondaryNavRects,
-  clearNavigationCache,
-} = useNavigationState()
+} = useNavigationState();
 
-const slots = useSlots()
+const slots = useSlots();
 
-const navigationWrapperRef = useTemplateRef<HTMLDivElement>("navigationWrapper")
+const navigationWrapperRef = useTemplateRef<HTMLDivElement>("navigationWrapper");
 
 const closeAllNavigationDetails = () => {
   navigationDetailsRefs.value?.forEach((element) => {
-    element?.removeAttribute("open")
-  })
-  overflowDetailsRef.value?.removeAttribute("open")
-}
+    element?.removeAttribute("open");
+  });
+  overflowDetailsRef.value?.removeAttribute("open");
+};
 
 const toggleDetailsElement = (event: Event) => {
-  const summaryElement = event.currentTarget as HTMLElement
-  const parentDetailsElement = summaryElement.closest("details")
-  if (!parentDetailsElement) return
+  const summaryElement = event.currentTarget as HTMLElement;
+  const parentDetailsElement = summaryElement.closest("details");
+  if (!parentDetailsElement) return;
 
   if (parentDetailsElement.hasAttribute("open")) {
-    parentDetailsElement.removeAttribute("open")
+    parentDetailsElement.removeAttribute("open");
   } else {
-    parentDetailsElement.setAttribute("open", "")
+    parentDetailsElement.setAttribute("open", "");
   }
-  overflowDetailsRef.value?.removeAttribute("open")
-}
+  overflowDetailsRef.value?.removeAttribute("open");
+};
 
 const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
   if (!props.allowExpandOnGesture) {
-    return
+    return;
   }
 
   // Close all other open navigation details first
-  const summaryElement = event.currentTarget as HTMLElement
-  const parentDetailsElement = summaryElement.closest("details")
+  const summaryElement = event.currentTarget as HTMLElement;
+  const parentDetailsElement = summaryElement.closest("details");
 
   navigationDetailsRefs.value?.forEach((element) => {
     if (element !== parentDetailsElement) {
-      element?.removeAttribute("open")
+      element?.removeAttribute("open");
     }
-  })
-  overflowDetailsRef.value?.removeAttribute("open")
+  });
+  overflowDetailsRef.value?.removeAttribute("open");
 
   // Then toggle the current one
-  toggleDetailsElement(event)
-}
+  toggleDetailsElement(event);
+};
 
 const handleNavigationItemHover = () => {
   if (!props.allowExpandOnGesture) {
-    return
+    return;
   }
 
   // Close all open navigation details when hovering over regular nav items
-  closeAllNavigationDetails()
-}
+  closeAllNavigationDetails();
+};
 
 const handleSummaryAction = (event: MouseEvent | KeyboardEvent) => {
-  toggleDetailsElement(event)
-}
+  toggleDetailsElement(event);
+};
 
 // Initialize main navigation state
 const mainNavigationState = ref<ResponsiveHeaderState>({
@@ -224,64 +212,64 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
   },
   clonedNavLinks: props.responsiveNavLinks,
   hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
-})
+});
 
-const navRefs = ref<Record<string, HTMLUListElement | null>>({})
+const navRefs = ref<Record<string, HTMLUListElement | null>>({});
 
 const setNavRef = (key: string, el: Element | ComponentPublicInstance | null) => {
-  navRefs.value[key] = el as HTMLUListElement | null
-}
+  navRefs.value[key] = el as HTMLUListElement | null;
+};
 
 const navigationWrapperRects = computed({
   get: () => cachedNavigationWrapperRects.value,
   set: (value: IFlooredRect | null) => {
-    cachedNavigationWrapperRects.value = value
+    cachedNavigationWrapperRects.value = value;
   },
-})
+});
 
-const firstNavRef = ref<HTMLUListElement | null>(null)
-const firstNavRects = ref<IFlooredRect | null>(null)
+const firstNavRef = ref<HTMLUListElement | null>(null);
+const firstNavRects = ref<IFlooredRect | null>(null);
 
-const secondNavRef = ref<HTMLUListElement | null>(null)
-const secondNavRects = ref<IFlooredRect | null>(null)
+const secondNavRef = ref<HTMLUListElement | null>(null);
+const secondNavRects = ref<IFlooredRect | null>(null);
 
-const secondaryNavRef = useTemplateRef<HTMLElement>("secondaryNav")
+const secondaryNavRef = useTemplateRef<HTMLElement>("secondaryNav");
 const secondaryNavRects = computed({
   get: () => cachedSecondaryNavRects.value,
   set: (value: IFlooredRect | null) => {
-    cachedSecondaryNavRects.value = value
+    cachedSecondaryNavRects.value = value;
   },
-})
+});
 
-const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>("mainNavigationItems")
+const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>("mainNavigationItems");
 
-const navigationDetailsRefs = useTemplateRef<HTMLElement[]>("navigationDetails")
+const navigationDetailsRefs = useTemplateRef<HTMLElement[]>("navigationDetails");
 
-const overflowDetailsRef = useTemplateRef<HTMLDetailsElement>("overflowDetails")
+const overflowDetailsRef = useTemplateRef<HTMLDetailsElement>("overflowDetails");
 
 const showOverflowDetails = computed(() => {
   const hasHiddenNav =
     !mainNavigationState.value.navListVisibility["firstNav"] ||
-    (!mainNavigationState.value.navListVisibility["secondNav"] && mainNavigationState.value.hasSecondNav)
-  return hasHiddenNav
-})
+    (!mainNavigationState.value.navListVisibility["secondNav"] && mainNavigationState.value.hasSecondNav);
+  return hasHiddenNav;
+});
 
 const mainNavigationMarginBlockEnd = computed(() => {
-  return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0
-})
+  return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
+});
 
 const mainNavigationMarginBlockEndStr = computed(() => {
-  return mainNavigationMarginBlockEnd.value + "px"
-})
+  return mainNavigationMarginBlockEnd.value + "px";
+});
 
 const initTemplateRefs = async () => {
-  firstNavRef.value = navRefs.value["firstNav"] as HTMLUListElement | null
-  secondNavRef.value = navRefs.value["secondNav"] as HTMLUListElement | null
-  return
-}
+  firstNavRef.value = navRefs.value["firstNav"] as HTMLUListElement | null;
+  secondNavRef.value = navRefs.value["secondNav"] as HTMLUListElement | null;
+  return;
+};
 
 const getFlooredRect = (rect: DOMRect | null) => {
-  if (!rect) return null
+  if (!rect) return null;
   return {
     left: Math.floor(rect.left),
     right: Math.floor(rect.right),
@@ -289,36 +277,38 @@ const getFlooredRect = (rect: DOMRect | null) => {
     bottom: Math.floor(rect.bottom),
     width: Math.floor(rect.width),
     height: Math.floor(rect.height),
-  }
-}
+  };
+};
 
-const updateNavigationConfig = async (source: string) => {
+const updateNavigationConfig = async (_source?: string) => {
   navigationWrapperRects.value =
-    getFlooredRect((navigationWrapperRef.value && navigationWrapperRef.value.getBoundingClientRect()) ?? null) || null
+    getFlooredRect((navigationWrapperRef.value && navigationWrapperRef.value.getBoundingClientRect()) ?? null) || null;
   secondaryNavRects.value =
-    getFlooredRect((secondaryNavRef.value && secondaryNavRef.value.getBoundingClientRect()) ?? null) || null
-  firstNavRects.value = getFlooredRect((firstNavRef.value && firstNavRef.value.getBoundingClientRect()) ?? null) || null
+    getFlooredRect((secondaryNavRef.value && secondaryNavRef.value.getBoundingClientRect()) ?? null) || null;
+  firstNavRects.value =
+    getFlooredRect((firstNavRef.value && firstNavRef.value.getBoundingClientRect()) ?? null) || null;
   secondNavRects.value =
-    getFlooredRect((secondNavRef.value && secondNavRef.value.getBoundingClientRect()) ?? null) || null
+    getFlooredRect((secondNavRef.value && secondNavRef.value.getBoundingClientRect()) ?? null) || null;
 
   if (collapseNavigationBelowWidth.value && firstNavRects.value) {
-    collapseBreakpoint.value = firstNavRects.value?.right
+    collapseBreakpoint.value = firstNavRects.value?.right;
   }
-}
+};
 
 const allowNavigationCollapse = computed(() => {
   return (
     collapseNavigationBelowWidth.value &&
     navigationWrapperRects.value &&
     secondaryNavRects.value !== null &&
+    collapseBreakpoint.value !== null &&
     Math.floor(secondaryNavRects.value.left - props.gapBetweenFirstAndSecondNav) <= collapseBreakpoint.value
-  )
-})
+  );
+});
 
 const determineNavigationItemVisibility = (rect: DOMRect) => {
   // Check if navigation should be collapsed based on width breakpoint
   if (allowNavigationCollapse.value) {
-    return false
+    return false;
   }
 
   // Use default responsive visibility logic if wrapper exists
@@ -326,22 +316,22 @@ const determineNavigationItemVisibility = (rect: DOMRect) => {
     return (
       Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) <
       navigationWrapperRects.value.right
-    )
+    );
   }
 
   // Default to visible
-  return true
-}
+  return true;
+};
 
 const initMainNavigationState = () => {
-  if (!mainNavigationItemsRefs.value) return
+  if (!mainNavigationItemsRefs.value) return;
 
-  mainNavigationItemsRefs.value.forEach(async (item, index) => {
+  mainNavigationItemsRefs.value.forEach(async (item) => {
     // await nextTick()
-    const rect = item.getBoundingClientRect()
+    const rect = item.getBoundingClientRect();
 
-    const groupKey = item.dataset.groupKey
-    const localIndex = item.dataset.localIndex ? parseInt(item.dataset.localIndex, 10) : 0
+    const groupKey = item.dataset.groupKey;
+    const localIndex = item.dataset.localIndex ? parseInt(item.dataset.localIndex, 10) : 0;
     if (
       groupKey !== undefined &&
       groupKey !== null &&
@@ -357,7 +347,7 @@ const initMainNavigationState = () => {
           width: item.offsetWidth,
           visible: determineNavigationItemVisibility(rect),
         },
-      }
+      };
     }
 
     // Check if a single item has visible set to false and set the visibility of the group accordingly
@@ -368,61 +358,63 @@ const initMainNavigationState = () => {
       mainNavigationState.value.clonedNavLinks[groupKey][localIndex] &&
       mainNavigationState.value.clonedNavLinks[groupKey][localIndex].config?.visible === false
     ) {
-      mainNavigationState.value.navListVisibility[groupKey] = false
+      mainNavigationState.value.navListVisibility[groupKey] = false;
     } else if (typeof groupKey === "string") {
-      mainNavigationState.value.navListVisibility[groupKey] = true
+      mainNavigationState.value.navListVisibility[groupKey] = true;
     }
-  })
-}
+  });
+};
 
 // Function to set up click outside listeners
 const setupClickOutsideListeners = () => {
   navigationDetailsRefs.value?.forEach((element, index) => {
     onClickOutside(element, () => {
-      navigationDetailsRefs.value?.[index]?.removeAttribute("open")
-    })
-  })
+      navigationDetailsRefs.value?.[index]?.removeAttribute("open");
+    });
+  });
   // Add onClickOutside to overflowDetailsRef
-  overflowDetailsRef.value &&
+  if (overflowDetailsRef.value) {
     onClickOutside(overflowDetailsRef.value, () => {
-      overflowDetailsRef.value?.removeAttribute("open")
-    })
-}
+      overflowDetailsRef.value?.removeAttribute("open");
+    });
+  }
+};
 
 onMounted(async () => {
   // If navigation is already initialized and loaded, skip the template refs setup
   if (navigationInitialized.value && navLoaded.value) {
     // But still set up click outside listeners as DOM elements may have changed
-    await nextTick()
-    setupClickOutsideListeners()
-    return
+    await nextTick();
+    setupClickOutsideListeners();
+    return;
   }
 
   await initTemplateRefs().then(() => {
-    navLoaded.value = true
-    navigationInitialized.value = true
-  })
+    navLoaded.value = true;
+    navigationInitialized.value = true;
+  });
 
-  setupClickOutsideListeners()
-})
+  setupClickOutsideListeners();
+});
 
 useResizeObserver(navigationWrapperRef, async () => {
   await updateNavigationConfig("useResizeObserver").then(() => {
-    initMainNavigationState()
-  })
-})
+    initMainNavigationState();
+  });
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
+@layer components {
 .navigation {
   ul,
   ol {
@@ -448,12 +440,6 @@ watch(
   display: grid;
   grid-template-areas: "navStack";
 
-  margin: 12px;
-  border-radius: 8px;
-  background-color: #efefef05;
-  border: 1px solid #efefef75;
-  padding: 12px;
-
   .main-navigation {
     /* Set up some global vars */
     --_link-padding-block: 0.8rem;
@@ -462,7 +448,7 @@ watch(
     --_link-margin-inline: 0.1rem;
     --_link-focus-visible-outline-width: 0.2rem;
     --_link-border-default: 2px solid transparent;
-    --_link-border-bottom-hover: var(--green-8);
+    --_link-border-bottom-hover: var(--green-08);
 
     grid-area: navStack;
     display: flex;
@@ -552,6 +538,7 @@ watch(
             margin-block: var(--_link-margin-block);
             margin-inline: var(--_link-margin-inline);
             border-bottom: var(--_link-border-default);
+            white-space: nowrap;
 
             &::-webkit-details-marker,
             &::marker {
@@ -611,6 +598,25 @@ watch(
           }
         }
       }
+
+      &:last-child {
+        .main-navigation-item {
+          /* border: 2px solid red; */
+
+          .main-navigation-details {
+            /* border: 2px solid blue; */
+            /* position: relative; */
+            /* isolation: isolate; */
+
+            .main-navigation-sub-nav {
+              /* border: 2px solid yellow; */
+              /* left: initial; */
+              /* right: 0; */
+              translate: calc(-1 * var(--_main-navigation-item-width)) 12px;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -682,7 +688,6 @@ watch(
         background-color: Canvas;
 
         width: var(--_icon-size);
-        height: var(--_icon-size);
         overflow: hidden;
         transition-property: all;
         transition-timing-function: linear;
@@ -753,4 +758,5 @@ watch(
     }
   }
 }
+}
 </style>

package/app/components/rotating-carousel/RotatingCarouselImage.vue

@@ -145,6 +145,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="css">
+@layer components {
 /* @property --_rotate-x {
   syntax: '<angle>';
   inherits: false;
@@ -211,4 +212,5 @@ onUnmounted(() => {
     }
   }
 }
+}
 </style>