srcdev-nuxt-components 6.1.0 → 6.1.1

package/app/components/accordian/AccordianCore.vue

@@ -14,7 +14,7 @@
       <template #icon>
         <slot :name="`accordian-${key}-icon`"></slot>
       </template>
-      <template #layout-content>
+      <template #content>
         <slot :name="`accordian-${key}-content`"></slot>
       </template>
     </ExpandingPanel>

package/app/components/content-grid/ContentGrid.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="ui-content-grid" :class="[applyClasses]" :data-testid="dataTestid">
-    <div v-if="hasSlot1" class="col-1">
+    <div v-if="slots.slot1" class="col-1">
       <slot name="slot1"></slot>
     </div>
-    <div v-if="hasSlot2" class="col-2">
+    <div v-if="slots.slot2" class="col-2">
       <slot name="slot2"></slot>
     </div>
   </div>
@@ -13,17 +13,15 @@
 const props = defineProps({
   dataTestid: {
     type: String,
-    default: 'ui-content-grid',
+    default: "ui-content-grid",
   },
   applyClasses: {
     type: String,
-    default: '',
+    default: "",
   },
-});
+})
 
-const slots = useSlots();
-const hasSlot1 = ref(slots.slot1 !== undefined);
-const hasSlot2 = ref(slots.slot2 !== undefined);
+const slots = useSlots()
 </script>
 
 <style lang="css">

package/app/components/display-dialog/DisplayDialogCore.vue

@@ -1,9 +1,18 @@
 <template>
-  <dialog class="display-dialog-core" :class="[elementClasses]" role="dialog" :align-dialog :justify-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
+  <dialog
+    class="display-dialog-core"
+    :class="[elementClasses]"
+    role="dialog"
+    :align-dialog
+    :justify-dialog
+    :open
+    :data-dialog-id="dataDialogId"
+    ref="dialogRef"
+  >
     <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
       <div class="inner" :class="[variant]">
         <div class="header">
-          <div v-if="hasDialogTitle" class="col-left">
+          <div v-if="slots.dialogTitle" class="col-left">
             <slot name="dialogTitle"></slot>
           </div>
 
@@ -11,16 +20,24 @@
             <p class="text-normal wght-700">Center col</p>
           </div>
           <div class="col-right">
-            <button @click.prevent="closeDialog()" data-test-id="display-dialog-header-close" class="display-prompt-action">
+            <button
+              @click.prevent="closeDialog()"
+              data-test-id="display-dialog-header-close"
+              class="display-prompt-action"
+            >
               <Icon name="bitcoin-icons:cross-filled" class="icon" />
               <span class="sr-only">Really Close</span>
             </button>
           </div>
         </div>
-        <div v-if="hasDialogContent" class="dialog-content" :class="[{ 'allow-content-scroll': allowContentScroll }]">
+        <div
+          v-if="slots.dialogContent"
+          class="dialog-content"
+          :class="[{ 'allow-content-scroll': allowContentScroll }]"
+        >
           <slot name="dialogContent"></slot>
         </div>
-        <div v-if="hasActionButtons" class="footer">
+        <div v-if="slots.actionButtons" class="footer">
           <slot name="actionButtons"></slot>
         </div>
       </div>
@@ -29,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { FocusTrap } from 'focus-trap-vue';
+import { FocusTrap } from "focus-trap-vue"
 const props = defineProps({
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -37,18 +54,18 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'dialog',
-    validator: (val) => ['dialog', 'modal', 'confirm'].includes(val as string),
+    default: "dialog",
+    validator: (val) => ["dialog", "modal", "confirm"].includes(val as string),
   },
   justifyDialog: {
     type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].includes(val as string),
+    default: "center",
+    validator: (val) => ["start", "center", "end"].includes(val as string),
   },
   alignDialog: {
     type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].includes(val as string),
+    default: "center",
+    validator: (val) => ["start", "center", "end"].includes(val as string),
   },
   lockViewport: {
     type: Boolean,
@@ -62,33 +79,30 @@ const props = defineProps({
     type: String,
     required: true,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const open = defineModel<boolean>();
-const bodyTag = ref<HTMLBodyElement | null>(null);
-const lockViewport = toRef<boolean>(props.lockViewport);
+const open = defineModel<boolean>()
+const bodyTag = ref<HTMLBodyElement | null>(null)
+const lockViewport = toRef<boolean>(props.lockViewport)
 
 const closeDialog = () => {
-  open.value = false;
+  open.value = false
 
   if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.remove('lock');
+    bodyTag.value.classList.remove("lock")
   }
-};
+}
 
-const slots = useSlots();
-const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
-const hasDialogContent = computed(() => slots.dialogContent !== undefined);
-const hasActionButtons = computed(() => slots.actionButtons !== undefined);
+const slots = useSlots()
 
 onMounted(() => {
-  bodyTag.value = document.querySelector('body');
+  bodyTag.value = document.querySelector("body")
   if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.add('lock');
+    bodyTag.value.classList.add("lock")
   }
-});
+})
 </script>
 
 <style lang="css">
@@ -121,26 +135,26 @@ onMounted(() => {
   }
 
   /* * Positioning the dialog */
-  &[justify-dialog='start'] {
+  &[justify-dialog="start"] {
     justify-content: flex-start;
   }
 
-  &[justify-dialog='center'] {
+  &[justify-dialog="center"] {
     justify-content: center;
   }
 
-  &[justify-dialog='end'] {
+  &[justify-dialog="end"] {
     justify-content: flex-end;
   }
 
-  &[align-dialog='start'] {
+  &[align-dialog="start"] {
     align-items: flex-start;
   }
 
-  &[align-dialog='center'] {
+  &[align-dialog="center"] {
     align-items: center;
   }
-  &[align-dialog='end'] {
+  &[align-dialog="end"] {
     align-items: flex-end;
   }
 

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -1,21 +1,35 @@
 <template>
-  <div class="display-prompt-core" :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]" :data-test-id="`display-prompt-core-${theme}`">
-    <div class="display-prompt-wrapper" :data-component-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+  <div
+    class="display-prompt-core"
+    :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]"
+    :data-test-id="`display-prompt-core-${theme}`"
+  >
+    <div
+      class="display-prompt-wrapper"
+      :data-component-theme="theme"
+      :class="[elementClasses]"
+      data-test-id="display-prompt"
+    >
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
           <slot name="customDecoratorIcon">
-            <Icon :name="displayPromptIcons[theme]" class="icon" :color="iconColor" />
+            <Icon :name="displayPromptIcons[theme] ?? 'akar-icons:circle-alert'" class="icon" :color="iconColor" />
           </slot>
         </div>
         <div class="display-prompt-content">
           <p class="title" data-test-id="display-prompt-title">
             <slot name="title"></slot>
           </p>
-          <p v-if="hasContent" class="text" data-test-id="display-prompt-content">
+          <p v-if="slots.content" class="text" data-test-id="display-prompt-content">
             <slot name="content"></slot>
           </p>
         </div>
-        <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
+        <button
+          v-if="dismissible"
+          @click.prevent="dismissPrompt()"
+          data-test-id="display-prompt-action"
+          class="display-prompt-action"
+        >
           <slot name="customCloseIcon">
             <Icon name="bitcoin-icons:cross-filled" class="icon" />
           </slot>
@@ -36,9 +50,9 @@ const props = defineProps({
   },
   theme: {
     type: String,
-    default: 'error',
+    default: "error",
     validator(value: string) {
-      return ['error', 'info', 'success', 'warning', 'secondary'].includes(value);
+      return ["error", "info", "success", "warning", "secondary"].includes(value)
     },
   },
   styleClassPassthrough: {
@@ -47,9 +61,9 @@ const props = defineProps({
   },
   iconColor: {
     type: String as PropType<string>,
-    default: 'dark-grey',
+    default: "dark-grey",
     validator(value: string) {
-      return ['dark-grey', 'white'].includes(value);
+      return ["dark-grey", "white"].includes(value)
     },
   },
   useLocalStyleOverrides: {
@@ -59,24 +73,23 @@ const props = defineProps({
   displayPromptIcons: {
     type: Object as PropType<Record<string, string>>,
     default: () => ({
-      error: 'akar-icons:circle-alert',
-      info: 'akar-icons:info',
-      success: 'akar-icons:check',
-      warning: 'akar-icons:circle-alert',
-      secondary: 'akar-icons:info',
+      error: "akar-icons:circle-alert",
+      info: "akar-icons:info",
+      success: "akar-icons:check",
+      warning: "akar-icons:circle-alert",
+      secondary: "akar-icons:info",
     }),
   },
-});
+})
 
-const slots = useSlots();
-const hasContent = ref(slots.content !== undefined);
-const hide = ref(false);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const hide = ref(false)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const dismissPrompt = () => {
   // styleClassPassthrough.value = '';
-  hide.value = true;
-};
+  hide.value = true
+}
 </script>
 
 <style lang="css">

package/app/components/display-prompt/variants/DisplayPromptError.vue

@@ -6,7 +6,7 @@
     <template #title>
       <slot name="title"></slot>
     </template>
-    <template v-if="hasContent" #content>
+    <template v-if="slots.content" #content>
       <slot name="content"></slot>
     </template>
   </DisplayPromptCore>
@@ -22,11 +22,9 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasContent = ref(slots.content !== undefined);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
 </script>
 
 <style lang="css">

package/app/components/expanding-panel/ExpandingPanel.vue

@@ -24,11 +24,11 @@
 const props = defineProps({
   name: {
     type: String,
-    default: '',
+    default: "",
   },
   iconSize: {
     type: String,
-    default: 'medium',
+    default: "medium",
   },
   animationDuration: {
     type: Number,
@@ -38,15 +38,15 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const name = computed(() => props.name || useId());
+const name = computed(() => props.name || useId())
 
-const triggerId = computed(() => `id-${name.value}-trigger`);
-const contentId = computed(() => `id-${name.value}-content`);
-const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+const triggerId = computed(() => `id-${name.value}-trigger`)
+const contentId = computed(() => `id-${name.value}-content`)
+const animationDurationStr = computed(() => `${props.animationDuration}ms`)
 
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

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

@@ -1,13 +1,23 @@
 <template>
   <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper" role="banner">
     <nav class="main-navigation" ref="mainNav" aria-label="Main navigation">
-      <ul v-for="(navGroup, groupKey) in responsiveNavLinks" :key="groupKey" class="main-navigation-list" :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)">
+      <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' }"
+            :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"
@@ -22,8 +32,13 @@
           <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' }"
+            :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"
@@ -45,7 +60,9 @@
               <div class="main-navigation-sub-nav" role="menu" :aria-labelledby="`summary-${groupKey}-${localIndex}`">
                 <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" role="menuitem">{{ childLink.name }}</NuxtLink>
+                    <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">
+                      {{ childLink.name }}
+                    </NuxtLink>
                   </li>
                 </ul>
               </div>
@@ -55,16 +72,31 @@
       </ul>
     </nav>
     <nav class="secondary-navigation" ref="secondaryNav" aria-label="Secondary navigation">
-      <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]" ref="overflowDetails" name="overflow-group">
+      <details
+        class="overflow-details"
+        :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
+        ref="overflowDetails"
+        name="overflow-group"
+      >
         <summary class="overflow-details-summary has-toggle-icon">
-          <Icon :name="overflowDetailsSummaryIcons.more" class="icon" :class="[{ show: !allowNavigationCollapse }]" :aria-hidden="true" />
-          <Icon :name="overflowDetailsSummaryIcons.burger" class="icon" :class="[{ show: allowNavigationCollapse }]" :aria-hidden="true" />
+          <Icon
+            :name="overflowDetailsSummaryIcons.more ?? 'gravity-ui:ellipsis'"
+            class="icon"
+            :class="[{ show: !allowNavigationCollapse }]"
+            :aria-hidden="true"
+          />
+          <Icon
+            :name="overflowDetailsSummaryIcons.burger ?? 'gravity-ui:bars'"
+            class="icon"
+            :class="[{ show: allowNavigationCollapse }]"
+            :aria-hidden="true"
+          />
         </summary>
         <div class="overflow-details-nav" role="menu">
           <NavigationItems :main-navigation-state="mainNavigationState" />
         </div>
       </details>
-      <slot v-if="hasSecondaryNavigation" name="secondaryNavigation"></slot>
+      <slot v-if="slots.secondaryNavigation" name="secondaryNavigation"></slot>
     </nav>
     <LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
       <ClientOnly>
@@ -85,8 +117,8 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, onClickOutside } from '@vueuse/core';
-import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from '@/types/responsiveHeader';
+import { useResizeObserver, onClickOutside } from "@vueuse/core"
+import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "@/types/responsiveHeader"
 
 const props = defineProps({
   responsiveNavLinks: {
@@ -100,8 +132,8 @@ const props = defineProps({
   overflowDetailsSummaryIcons: {
     type: Object as PropType<Record<string, string>>,
     default: {
-      more: 'gravity-ui:ellipsis',
-      burger: 'gravity-ui:bars',
+      more: "gravity-ui:ellipsis",
+      burger: "gravity-ui:bars",
     },
   },
   collapseBreakpoint: {
@@ -120,67 +152,68 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-});
+})
 
-const slots = useSlots();
-const hasSecondaryNavigation = computed(() => slots.secondaryNavigation !== undefined);
-const collapseNavigationBelowWidth = computed(() => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection);
-const collapseBreakpoint = ref(props.collapseBreakpoint);
-const navLoaded = ref(false);
-const navigationWrapperRef = useTemplateRef('navigationWrapper');
+const slots = useSlots()
+const collapseNavigationBelowWidth = computed(
+  () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
+)
+const collapseBreakpoint = ref(props.collapseBreakpoint)
+const navLoaded = ref(false)
+const navigationWrapperRef = useTemplateRef("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');
+  if (parentDetailsElement.hasAttribute("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)
+}
 
 const mainNavigationState = ref<ResponsiveHeaderState>({
   navListVisibility: {
@@ -189,51 +222,53 @@ 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: HTMLUListElement | null) => {
-  navRefs.value[key] = el;
-};
+  navRefs.value[key] = el
+}
 
-const navigationWrapperRects = ref<IFlooredRect | null>(null);
-const firstNavRef = ref<HTMLUListElement | null>(null);
-const firstNavRects = ref<IFlooredRect | null>(null);
+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 secondNavRef = ref<HTMLUListElement | null>(null)
+const secondNavRects = ref<IFlooredRect | null>(null)
 
-const secondaryNavRef = useTemplateRef('secondaryNav');
-const secondaryNavRects = ref<IFlooredRect | null>(null);
+const secondaryNavRef = useTemplateRef("secondaryNav")
+const secondaryNavRects = ref<IFlooredRect | null>(null)
 
-const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>('mainNavigationItems');
+const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>("mainNavigationItems")
 
-const navigationDetailsRefs = useTemplateRef<HTMLElement[]>('navigationDetails');
+const navigationDetailsRefs = useTemplateRef<HTMLElement[]>("navigationDetails")
 
-const overflowDetailsRef = useTemplateRef('overflowDetails');
+const overflowDetailsRef = useTemplateRef("overflowDetails")
 
 const showOverflowDetails = computed(() => {
-  const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || (!mainNavigationState.value.navListVisibility['secondNav'] && mainNavigationState.value.hasSecondNav);
-  return hasHiddenNav;
-});
+  const hasHiddenNav =
+    !mainNavigationState.value.navListVisibility["firstNav"] ||
+    (!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),
@@ -241,19 +276,22 @@ 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) => {
-  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;
+  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
 
   if (collapseNavigationBelowWidth.value && firstNavRects.value) {
-    collapseBreakpoint.value = firstNavRects.value?.right;
+    collapseBreakpoint.value = firstNavRects.value?.right
   }
-};
+}
 
 const allowNavigationCollapse = computed(() => {
   return (
@@ -261,32 +299,35 @@ const allowNavigationCollapse = computed(() => {
     navigationWrapperRects.value &&
     secondaryNavRects.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
   if (navigationWrapperRects.value) {
-    return Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) < navigationWrapperRects.value.right;
+    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((item, index) => {
-    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 &&
@@ -302,56 +343,57 @@ 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
     if (
-      typeof groupKey === 'string' &&
+      typeof groupKey === "string" &&
       mainNavigationState.value.clonedNavLinks &&
       mainNavigationState.value.clonedNavLinks[groupKey] &&
+      mainNavigationState.value.clonedNavLinks[groupKey][localIndex] &&
       mainNavigationState.value.clonedNavLinks[groupKey][localIndex].config?.visible === false
     ) {
-      mainNavigationState.value.navListVisibility[groupKey] = false;
-    } else if (typeof groupKey === 'string') {
-      mainNavigationState.value.navListVisibility[groupKey] = true;
+      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);
-  });
+      navLoaded.value = true
+    }, 100)
+  })
 
   navigationDetailsRefs.value?.forEach((element, index) => {
     onClickOutside(element, () => {
-      navigationDetailsRefs.value?.[index]?.removeAttribute('open');
-    });
-  });
+      navigationDetailsRefs.value?.[index]?.removeAttribute("open")
+    })
+  })
   // Add onClickOutside to overflowDetailsRef
   overflowDetailsRef.value &&
     onClickOutside(overflowDetailsRef.value, () => {
-      overflowDetailsRef.value?.removeAttribute('open');
-    });
-});
+      overflowDetailsRef.value?.removeAttribute("open")
+    })
+})
 
 useResizeObserver(navigationWrapperRef, async () => {
-  await updateNavigationConfig('useResizeObserver').then(() => {
-    initMainNavigationState();
-  });
-});
+  await updateNavigationConfig("useResizeObserver").then(() => {
+    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">
@@ -378,7 +420,7 @@ watch(
 
   /* flex-grow: 1; */
   display: grid;
-  grid-template-areas: 'navStack';
+  grid-template-areas: "navStack";
 
   margin: 12px;
   border-radius: 8px;
@@ -599,7 +641,7 @@ watch(
         --_transition-duration: 0.2s;
 
         display: grid;
-        grid-template-areas: 'icon';
+        grid-template-areas: "icon";
         align-items: center;
         justify-content: center;
         padding-inline: 5px;

package/app/components/skip-links/SkipLinks.vue

@@ -1,13 +1,15 @@
 <template>
   <ul class="home-link-navigation" aria-label="Home Navigation">
-    <li v-if="hasHomeLink" class="home-link">
+    <li v-if="slots.homeLink" class="home-link">
       <slot name="homeLink">
         <NuxtLink to="/" class="home-link-default">Logo</NuxtLink>
       </slot>
     </li>
     <li class="skip-links">
       <ul class="skip-links-nav">
-        <li class="skip-link-item"><a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a></li>
+        <li class="skip-link-item">
+          <a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a>
+        </li>
         <li class="skip-link-item"><a href="#footer" class="skip-link">Skip to footer</a></li>
       </ul>
     </li>
@@ -15,8 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-const slots = useSlots();
-const hasHomeLink = ref(slots.homeLink !== undefined);
+const slots = useSlots()
 </script>
 
 <style lang="css">

package/package.json

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