srcdev-nuxt-components 2.4.0 → 2.5.1

package/components/display-details/DisplayDetailsCore.vue

@@ -18,10 +18,9 @@
 // Create a global store to track open details elements by name
 const openDetailsByName = reactive(new Map<string, HTMLDetailsElement>());
 
-export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>, summaryRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLDivElement | null>, name: string) => {
+export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>, summaryRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLDivElement | null>, name: string, animationDuration: number) => {
   // State
   const animation = ref<Animation | null>(null);
-  const animationDuration = 400;
   const isClosing = ref(false);
   const isExpanding = ref(false);
 
@@ -183,6 +182,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  animationDuration: {
+    type: Number,
+    default: 400,
+  },
   iconSize: {
     type: String,
     default: 'small',
@@ -225,7 +228,7 @@ watch(
 onMounted(() => {
   // Initialize the composable once the component is mounted and refs are available
   if (detailsRef.value && contentRef.value && summaryRef.value) {
-    const details = useDetailsTransition(detailsRef, summaryRef, contentRef, props.name);
+    const details = useDetailsTransition(detailsRef, summaryRef, contentRef, props.name, props.animationDuration);
     clickAction = details.clickAction; // Assign the real click handler
   } else {
     console.error('Refs not available after mounting');
@@ -234,7 +237,6 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-@scope (.display-details) {
   .display-details {
     /* Component setup */
     --_display-details-icon-transform: scaleY(1);
@@ -270,6 +272,11 @@ onMounted(() => {
     margin-block-end: var(--_display-details-mbe);
 
     .display-details-summary {
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
       list-style: none;
 
       &::-webkit-details-marker,
@@ -301,5 +308,5 @@ onMounted(() => {
       padding: var(--_display-details-content-padding);
     }
   }
-}
+
 </style>

package/components/functional/accordian/AccordianCore.vue

@@ -57,6 +57,7 @@ const accordianName = useId();
   }
 
   --_grid-template-rows: 0fr;
+  --_details-content-height: 0px;
   --_icon-transform: scaleY(1);
   --_accordian-content-transform: scaleY(0);
 
@@ -92,28 +93,33 @@ const accordianName = useId();
 
   .accordion-content {
     /* display: block; */
-    display: grid;
-    grid-template-rows: 0fr;
+    /* display: grid; */
+    /* grid-template-rows: 0fr; */
     /* grid-template-rows: var(--_grid-template-rows); */
 
     /* transform: var(--_accordian-content-transform); */
     /* transform: scaleY(0); */
     /* transform-origin: top; */
-    transition: all 2000ms;
+    /* transition: all 2000ms; */
 
     .accordion-content-inner {
-      /* display: grid; */
-      /* grid-template-rows: 0fr; */
+      background-color: red;
 
-      /* transform: scaleY(0); */
-      /* transform-origin: top; */
+      overflow: clip;
+      height: var(--_details-content-height);
+      transition: all 2000ms;
+      transition-behavior: allow-discrete;
 
-      /* transition: all 2000ms; */
+      @starting-style {
+        height: 0;
+      }
     }
   }
 
   &[open] {
     --_grid-template-rows: 1fr;
+    --_details-content-height: calc-size(auto, size);
+
     --_icon-transform: scaleY(-1);
     --_accordian-content-transform: scaleY(1);
 

package/components/responsive-header/NavigationItems.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="overflow-navigation-wrapper" :class="elementClasses">
+    <ul
+      v-for="(navGroup, groupKey) in mainNavigationState.clonedNavLinks"
+      :key="groupKey"
+      class="overflow-navigation-list"
+      :class="[{visible: !mainNavigationState.navListVisibility[groupKey]}]"
+      :style="{ '--_overflow-navigation-list-min-width': widestNavLinkWidthInMainNavigationState + 'px' }"
+    >
+      <template v-for="(link, localIndex) in navGroup" :key="localIndex">
+        <li
+          v-if="link.path"
+          class="overflow-navigation-item"
+          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :data-group-key="groupKey"
+          :data-local-index="localIndex"
+        >
+          <NuxtLink class="overflow-navigation-link" :to="link.path"><span class="overflow-navigation-text">{{ link.name }}</span></NuxtLink>
+        </li>
+        <li
+          v-else
+          class="overflow-navigation-item"
+          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :data-group-key="groupKey"
+          :data-local-index="localIndex"
+        >
+          <DisplayDetailsCore :id="useId()" name="overflow-navigation-group" :animation-duration="detailsAanimationDuration" icon-size="medium" :style-class-passthrough="['overflow-navigation-details']">
+            <template #summary>
+              <span class="overflow-navigation-text">{{ link.childLinksTitle }}</span>
+            </template>
+            <template #summaryIcon>
+              <Icon name="mdi:chevron-down" class="icon" />
+            </template>
+            <template #content>
+              <div class="overflow-navigation-sub-nav-inner">
+                <ul class="overflow-navigation-sub-nav-list">
+                  <li v-for="childLink in link.childLinks" :key="childLink.name" class="overflow-navigation-sub-nav-item">
+                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link"><span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span></NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+  interface NavLinkConfig {
+    left: number;
+    right: number;
+    width?: number;
+    visible: boolean;
+  }
+
+  interface INavLink {
+    name: string;
+    path?: string;
+    isExternal?: boolean;
+    childLinksTitle?: string;
+    childLinks?: INavLink[];
+    config?: NavLinkConfig;
+  }
+
+  interface IResponsiveNavLinks {
+    [key: string]: INavLink[];
+  }
+
+  interface INavigationRefTrackState {
+    navListVisibility: Record<string, boolean>;
+    clonedNavLinks?: IResponsiveNavLinks;
+  }
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  mainNavigationState: {
+    type: Object as PropType<INavigationRefTrackState>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const detailsAanimationDuration = 200;
+
+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 { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+
+.overflow-navigation-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .overflow-navigation-list {
+
+    display: none;
+
+    &.visible {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-width: var(--_overflow-navigation-list-min-width, auto);
+    }
+
+    .overflow-navigation-item {
+
+      display: none;
+
+      &.visible {
+        display: block;
+      }
+
+      .overflow-navigation-link {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .overflow-navigation-details {
+        --_overflow-navigation-sub-nav-list-margin-block-start: 0;
+
+        &[open] {
+          --_overflow-navigation-sub-nav-list-margin-block-start: 12px;
+        }
+
+        &.display-details {
+          margin-block-end: 0;
+
+          .display-details-summary {
+            .label {
+              .overflow-navigation-text {
+                text-wrap: nowrap;
+              }
+            }
+            /* .icon {} */
+          }
+          .display-details-content {
+            .overflow-navigation-sub-nav-inner {
+              .overflow-navigation-sub-nav-list {
+
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                margin-block-start: var(--_overflow-navigation-sub-nav-list-margin-block-start);
+                transition: margin-block-start v-bind(`${detailsAanimationDuration}ms`) ease;
+
+                .overflow-navigation-sub-nav-item {
+
+                  .overflow-navigation-sub-nav-link {
+                    text-decoration: none;
+                    color: inherit;
+
+                    /* .overflow-navigation-sub-nav-text {} */
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/responsive-header/ResponsiveHeader.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper">
+    <nav class="main-navigation" ref="mainNav">
+
+      <ul v-for="(navGroup, groupKey) in responsiveNavLinks" :key="groupKey" class="main-navigation-list"
+        :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)">
+        <template v-for="(link, localIndex) in navGroup" :key="localIndex">
+          <li v-if="link.path" class="main-navigation-item"
+            :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+            :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
+            <NuxtLink class="main-navigation-link" :to="link.path">{{ link.name }}</NuxtLink>
+          </li>
+          <li v-else class="main-navigation-item"
+            :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+            :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
+            <details class="main-navigation-details" name="navigation-group" ref="navigationDetails">
+              <summary @mouseover="handleSummaryHover($event)" @focusin="handleSummaryHover($event)"
+                class="main-navigation-details-summary has-toggle-icon">
+                <Icon name="mdi:chevron-down" class="icon" />
+                {{ link.childLinksTitle }}
+              </summary>
+              <div class="main-navigation-sub-nav">
+                <ul class="main-navigation-sub-nav-list">
+                  <li class="main-navigation-sub-nav-item" v-for="childLink in link.childLinks" :key="childLink.name">
+                    <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link">{{ childLink.name }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </details>
+          </li>
+        </template>
+      </ul>
+
+    </nav>
+    <nav class="secondary-navigation" ref="secondaryNav">
+      <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
+        ref="overflowDetails" name="overflow-group">
+        <summary class="overflow-details-summary has-toggle-icon">
+          <Icon name="gravity-ui:ellipsis" class="icon" />
+        </summary>
+        <div class="overflow-details-nav">
+          <NavigationItems :main-navigation-state="mainNavigationState" />
+        </div>
+      </details>
+      <ul class="secondary-navigation-list">
+        <li class="secondary-navigation-item">
+          <NuxtLink class="secondary-navigation-link" to="/">
+            <Icon name="material-symbols:settings-outline-rounded" class="icon" />
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+  </div>
+
+
+  <LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
+    <ClientOnly>
+      <div>
+        <h2 class="heading-4">navigationWrapperRects</h2>
+        <pre>{{ navigationWrapperRects }}</pre>
+        <hr>
+        <h2 class="heading-4">secondaryNavRects</h2>
+        <pre>{{ secondaryNavRects }}</pre>
+      </div>
+      <div>
+        <h2 class="heading-4">mainNavigationState</h2>
+        <pre>{{ mainNavigationState }}</pre>
+      </div>
+    </ClientOnly>
+
+  </LayoutRow>
+</template>
+
+<script lang="ts">
+
+  interface INavLink {
+    name: string;
+    path?: string;
+    isExternal?: boolean;
+    childLinksTitle?: string;
+    childLinks?: INavLink[];
+    config?: NavLinkConfig;
+  }
+
+  interface IResponsiveNavLinks {
+    [key: string]: INavLink[];
+  }
+
+  interface IFlooredRect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+  }
+
+  interface NavLinkConfig {
+    left: number;
+    right: number;
+    width?: number;
+    visible: boolean;
+  }
+
+  interface INavigationRefTrackState {
+    navListVisibility: Record<string, boolean>;
+    clonedNavLinks?: IResponsiveNavLinks;
+  }
+
+
+</script>
+
+<script setup lang="ts">
+import { useResizeObserver, onClickOutside } from '@vueuse/core';
+
+const props = defineProps({
+  responsiveNavLinks: {
+    type: Object as PropType<IResponsiveNavLinks>,
+    default: () => [],
+  },
+  gapBetweenFirstAndSecondNav: {
+    type: Number,
+    default: 12, // px
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+
+const navLoaded = ref(false);
+const navigationWrapperRef = useTemplateRef('navigationWrapper');
+
+const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
+  const summaryElement = event.currentTarget as HTMLElement;
+  const parentDetailsElement = summaryElement.closest('details');
+  if (!parentDetailsElement) return;
+  if (parentDetailsElement.hasAttribute('open')) {
+    parentDetailsElement.removeAttribute('open');
+  } else {
+    parentDetailsElement.setAttribute('open', '');
+  }
+};
+
+const mainNavigationState = ref<INavigationRefTrackState>({
+  navListVisibility: {
+    firstNav: false,
+    secondNav: false,
+  },
+  clonedNavLinks: props.responsiveNavLinks,
+});
+
+const navRefs = ref<Record<string, HTMLUListElement | null>>({});
+
+const setNavRef = (key: string, el: HTMLUListElement | null) => {
+  navRefs.value[key] = el
+}
+
+const navigationWrapperRects = 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 secondaryNavRef = useTemplateRef('secondaryNav');
+const secondaryNavRects = ref<IFlooredRect | null>(null);
+
+const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>('mainNavigationItems');
+
+const navigationDetailsRefs = useTemplateRef<HTMLElement[]>('navigationDetails');
+
+const overflowDetailsRef = useTemplateRef('overflowDetails');
+
+const showOverflowDetails = computed(() => {
+  const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || !mainNavigationState.value.navListVisibility['secondNav'];
+  return hasHiddenNav;
+});
+
+const mainNavigationMarginBlockEnd = computed(() => {
+    return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
+});
+
+const initTemplateRefs = async () => {
+  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;
+  return {
+    left: Math.floor(rect.left),
+    right: Math.floor(rect.right),
+    top: Math.floor(rect.top),
+    bottom: Math.floor(rect.bottom),
+    width: Math.floor(rect.width),
+    height: Math.floor(rect.height),
+  };
+}
+
+const updateNavigationConfig = async (source: string) => {
+  navigationWrapperRects.value = 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;
+  secondNavRects.value = getFlooredRect((secondNavRef.value && secondNavRef.value.getBoundingClientRect()) ?? null) || null;
+}
+
+const initMainNavigationState = () => {
+  if (!mainNavigationItemsRefs.value) return;
+
+  mainNavigationItemsRefs.value.forEach((item, index) => {
+
+    const rect = item.getBoundingClientRect();
+
+    const groupKey = item.dataset.groupKey;
+    const localIndex = item.dataset.localIndex ? parseInt(item.dataset.localIndex, 10) : 0;
+    if (
+      groupKey !== undefined &&
+      groupKey !== null &&
+      mainNavigationState.value.clonedNavLinks &&
+      mainNavigationState.value.clonedNavLinks[groupKey] &&
+      mainNavigationState.value.clonedNavLinks[groupKey][localIndex]
+    ) {
+      mainNavigationState.value.clonedNavLinks[groupKey][localIndex] = {
+        ...mainNavigationState.value.clonedNavLinks[groupKey][localIndex],
+        config: {
+          left: item.offsetLeft,
+          right: item.offsetLeft + item.offsetWidth,
+          width: item.offsetWidth,
+          visible: navigationWrapperRects.value ? Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) < navigationWrapperRects.value.right : true,
+        },
+      };
+    }
+
+    // Check if a single item has visible set to false and set the visibility of the group accordingly
+    if (
+      typeof groupKey === 'string' &&
+      mainNavigationState.value.clonedNavLinks &&
+      mainNavigationState.value.clonedNavLinks[groupKey] &&
+      mainNavigationState.value.clonedNavLinks[groupKey][localIndex].config?.visible === false
+    ) {
+      mainNavigationState.value.navListVisibility[groupKey] = false;
+    } else if (typeof groupKey === 'string') {
+      mainNavigationState.value.navListVisibility[groupKey] = true;
+    }
+  })
+
+}
+
+onMounted(async() => {
+  await initTemplateRefs().then(() => {
+    setTimeout(() => {
+      navLoaded.value = true;
+    }, 100);
+  });
+
+  navigationDetailsRefs.value?.forEach((element, index) => {
+    onClickOutside(element, () => {
+      navigationDetailsRefs.value?.[index]?.removeAttribute('open');
+    });
+  });
+  // Add onClickOutside to overflowDetailsRef
+  overflowDetailsRef.value && onClickOutside(overflowDetailsRef.value, () => {
+    overflowDetailsRef.value?.removeAttribute('open');
+  });
+});
+
+useResizeObserver(navigationWrapperRef, async () => {
+  await updateNavigationConfig("useResizeObserver").then(() => {
+    initMainNavigationState()
+  });
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+
+  .navigation {
+
+    ul,
+    ol {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        /* text-box-trim: trim-both; */
+        /* text-box-edge: cap alphabetic; */
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    --_link-visibility-transition: none;
+
+    &.loaded {
+      --_link-visibility-transition: all 0.2s ease-in-out;
+    }
+
+    display: grid;
+    grid-template-areas: 'navStack';
+
+    margin: 12px;
+    border-radius: 8px;
+    background-color: #efefef05;
+    border: 1px solid #efefef75;
+    padding: 12px;
+
+    .main-navigation {
+      grid-area: navStack;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-grow: 1;
+      justify-content: space-between;
+      gap: 60px;
+
+      overflow-x: hidden;
+      margin-inline-end: v-bind(`${mainNavigationMarginBlockEnd}px`);
+
+      &.collapsed {
+        justify-content: flex-start;
+      }
+
+      .main-navigation-list {
+        display: flex;
+        flex-wrap: nowrap;
+
+        &:nth-of-type(1) {
+          gap: 30px;
+        }
+
+        &:nth-of-type(2) {
+          gap: 30px;
+        }
+
+        .main-navigation-item {
+
+          width: var(--_main-navigation-item-width);
+          overflow: hidden;
+          transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
+
+          .main-navigation-link {
+            display: flex;
+            text-wrap-mode: nowrap;
+            color: inherit;
+            text-decoration: none;
+            margin-inline-start: 0;
+            transition: var(--_link-visibility-transition);
+          }
+
+          .main-navigation-details {
+
+            --_icon-transform: scaleY(1);
+
+            margin-inline-start: 0;
+            transition: var(--_link-visibility-transition);
+
+            &[open] {
+              --_icon-transform: scaleY(-1);
+            }
+
+            .has-toggle-icon {
+              display: flex;
+              gap: 6px;
+              text-wrap-mode: nowrap;
+
+              .icon {
+                display: block;
+                transform: var(--_icon-transform);
+                transition: transform 0.2s ease-in-out;
+              }
+            }
+
+            .main-navigation-details-summary {
+
+              &::-webkit-details-marker,
+              &::marker {
+                display: none;
+              }
+
+              &:hover {
+                cursor: pointer;
+              }
+
+            }
+
+            .main-navigation-sub-nav {
+              position: absolute;
+              padding: 12px;
+              border: 1px solid #efefef75;
+              border-radius: 8px;
+              background-color: #000;
+              translate: 0 12px;
+
+              min-width: var(--_main-navigation-item-width);
+
+              .main-navigation-sub-nav-list {
+
+                display: grid;
+                grid-template-columns: repeat(2, auto);
+                gap: 12px;
+
+                .main-navigation-sub-nav-item {
+                  margin-bottom: 8px;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+
+                  .main-navigation-sub-nav-link {
+                    display: block;
+                    text-wrap-mode: nowrap;
+                    text-decoration: none;
+                    color: inherit;
+                  }
+                }
+              }
+            }
+          }
+
+          &.visually-hidden {
+            visibility: hidden;
+            opacity: 0;
+
+            .main-navigation-details,
+            .main-navigation-link {
+              margin-inline-start: var(--_main-navigation-item-width);
+            }
+          }
+        }
+      }
+    }
+
+    .secondary-navigation {
+      grid-area: navStack;
+      justify-self: end;
+
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .secondary-navigation-list {
+
+        .secondary-navigation-item {
+
+          .secondary-navigation-link {
+            display: flex;
+            align-items: center;
+            font: inherit;
+            color: inherit;
+
+            .icon {
+              height: 1.35em;
+              width: 1.35em;
+            }
+          }
+        }
+      }
+
+      .main-navigation-link {
+        .icon {
+          height: 1.35em;
+          width: 1.35em;
+        }
+      }
+
+      .overflow-details {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        cursor: pointer;
+        width: fit-content;
+        /* overflow: hidden; */
+
+        transition: all 0.2s ease-in-out;
+
+        &.visually-hidden {
+          opacity: 0;
+          visibility: hidden;
+          /* width: 0; */
+        }
+
+        .overflow-details-summary {
+          --_icon-zoom: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding-inline: 5px;
+          text-wrap: nowrap;
+
+          aspect-ratio: 1;
+          border-radius: 4px;
+          border: 1px solid #ffffff90;
+          outline: 1px solid #ffffff10;
+          background-color: Canvas;
+
+          width: 28px;
+          overflow: hidden;
+
+
+          &::-webkit-details-marker,
+          &::marker {
+            display: none;
+          }
+
+          &:hover {
+            --_icon-zoom: 1.2;
+            outline: 1px solid #ffffff;
+          }
+
+          .icon {
+            scale: var(--_icon-zoom);
+            transition: scale 0.2s ease-in-out;
+          }
+        }
+
+
+        .overflow-details-nav {
+          position: absolute;
+          top: 135%;
+          right: 0;
+          background-color: #000;
+          border: 1px solid #ffffff90;
+          border-radius: 8px;
+          padding: 12px;
+          margin: 0;
+          z-index: 999;
+          min-width: var(--_overflow-drop-down-width, fit-content);
+
+          display: grid;
+          grid-auto-flow: row;
+          gap: 8px;
+        }
+      }
+    }
+  }
+
+  .debug-grid {
+    display: none;
+
+    .layout-row-inner > div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+
+      margin-inline: 12px;
+
+      > div {
+        outline: 1px solid gray;
+        padding: 12px;
+      }
+    }
+  }
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",