srcdev-nuxt-components 6.1.1 → 6.1.3

package/app/assets/styles/extends-layer/srcdev-components/components/_expanding-panel.css

@@ -0,0 +1,37 @@
+.srcdev-components-extended {
+  .expanding-panel {
+    .expanding-panel-details {
+      .expanding-panel-summary {
+        &::-webkit-details-marker,
+        &::marker {
+          display: none;
+        }
+
+        .label-wrapper {
+        }
+        .icon-wrapper {
+          .icon {
+          }
+        }
+      }
+
+      &[open] {
+        .expanding-panel-summary {
+          .icon-wrapper {
+            .icon {
+            }
+          }
+        }
+        + .expanding-panel-content {
+          .inner {
+          }
+        }
+      }
+    }
+
+    .expanding-panel-content {
+      .inner {
+      }
+    }
+  }
+}

package/app/assets/styles/extends-layer/srcdev-components/components/index.css

@@ -1 +1,2 @@
-@import './_display-prompt-core';
+@import "./_display-prompt-core";
+@import "./_expanding-panel";

package/app/assets/styles/setup/utility-classes/_margin.css

@@ -0,0 +1,334 @@
+/* Margin */
+.mi-auto {
+  margin-inline: auto;
+}
+.mis-auto {
+  margin-inline-start: auto;
+}
+.mie-auto {
+  margin-inline-end: auto;
+}
+.mb-auto {
+  margin-block: auto;
+}
+.mbs-auto {
+  margin-block-start: auto;
+}
+.mbe-auto {
+  margin-block-end: auto;
+}
+
+.mb-0 {
+  margin-block: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+
+.m-0 {
+  margin: 0;
+}
+.mbs-0 {
+  margin-block-start: 0;
+}
+.mbe-0 {
+  margin-block-end: 0;
+}
+.mis-0 {
+  margin-inline-start: 0;
+}
+.mie-0 {
+  margin-inline-end: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+.mb-0 {
+  margin-block: 0;
+}
+
+.m-1 {
+  margin: 0.1rem;
+}
+.mbs-1 {
+  margin-block-start: 0.1rem;
+}
+.mbe-1 {
+  margin-block-end: 0.1rem;
+}
+.mis-1 {
+  margin-inline-start: 0.1rem;
+}
+.mie-1 {
+  margin-inline-end: 0.1rem;
+}
+.mi-1 {
+  margin-inline: 0.1rem;
+}
+.mb-1 {
+  margin-block: 0.1rem;
+}
+
+.m-2 {
+  margin: 0.2rem;
+}
+.mbs-2 {
+  margin-block-start: 0.2rem;
+}
+.mbe-2 {
+  margin-block-end: 0.2rem;
+}
+.mis-2 {
+  margin-inline-start: 0.2rem;
+}
+.mie-2 {
+  margin-inline-end: 0.2rem;
+}
+.mi-2 {
+  margin-inline: 0.2rem;
+}
+.mb-2 {
+  margin-block: 0.2rem;
+}
+
+.m-4 {
+  margin: 0.4rem;
+}
+.mbs-4 {
+  margin-block-start: 0.4rem;
+}
+.mbe-4 {
+  margin-block-end: 0.4rem;
+}
+.mis-4 {
+  margin-inline-start: 0.4rem;
+}
+.mie-4 {
+  margin-inline-end: 0.4rem;
+}
+.mi-4 {
+  margin-inline: 0.4rem;
+}
+.mb-4 {
+  margin-block: 0.4rem;
+}
+
+.m-6 {
+  margin: 0.6rem;
+}
+.mbs-6 {
+  margin-block-start: 0.6rem;
+}
+.mbe-6 {
+  margin-block-end: 0.6rem;
+}
+.mis-6 {
+  margin-inline-start: 0.6rem;
+}
+.mie-6 {
+  margin-inline-end: 0.6rem;
+}
+.mi-6 {
+  margin-inline: 0.6rem;
+}
+.mb-6 {
+  margin-block: 0.6rem;
+}
+
+.m-8 {
+  margin: 0.8rem;
+}
+.mbs-8 {
+  margin-block-start: 0.8rem;
+}
+.mbe-8 {
+  margin-block-end: 0.8rem;
+}
+.mis-8 {
+  margin-inline-start: 0.8rem;
+}
+.mie-8 {
+  margin-inline-end: 0.8rem;
+}
+.mi-8 {
+  margin-inline: 0.8rem;
+}
+.mb-8 {
+  margin-block: 0.8rem;
+}
+
+.m-10 {
+  margin: 1rem;
+}
+.mbs-10 {
+  margin-block-start: 1rem;
+}
+.mbe-10 {
+  margin-block-end: 1rem;
+}
+.mis-10 {
+  margin-inline-start: 1rem;
+}
+.mie-10 {
+  margin-inline-end: 1rem;
+}
+.mi-10 {
+  margin-inline: 1rem;
+}
+.mb-10 {
+  margin-block: 1rem;
+}
+
+.m-12 {
+  margin: 1.2rem;
+}
+.mbs-12 {
+  margin-block-start: 1.2rem;
+}
+.mbe-12 {
+  margin-block-end: 1.2rem;
+}
+.mis-12 {
+  margin-inline-start: 1.2rem;
+}
+.mie-12 {
+  margin-inline-end: 1.2rem;
+}
+.mi-12 {
+  margin-inline: 1.2rem;
+}
+.mb-12 {
+  margin-block: 1.2rem;
+}
+
+.m-18 {
+  margin: 1.8rem;
+}
+.mbs-18 {
+  margin-block-start: 1.8rem;
+}
+.mbe-18 {
+  margin-block-end: 1.8rem;
+}
+.mis-18 {
+  margin-inline-start: 1.8rem;
+}
+.mie-18 {
+  margin-inline-end: 1.8rem;
+}
+.mi-18 {
+  margin-inline: 1.8rem;
+}
+.mb-18 {
+  margin-block: 1.8rem;
+}
+
+.m-20 {
+  margin: 2rem;
+}
+.mbs-20 {
+  margin-block-start: 2rem;
+}
+.mbe-20 {
+  margin-block-end: 2rem;
+}
+.mis-20 {
+  margin-inline-start: 2rem;
+}
+.mie-20 {
+  margin-inline-end: 2rem;
+}
+.mi-20 {
+  margin-inline: 2rem;
+}
+.mb-20 {
+  margin-block: 2rem;
+}
+
+.m-24 {
+  margin: 2.4rem;
+}
+.mbs-24 {
+  margin-block-start: 2.4rem;
+}
+.mbe-24 {
+  margin-block-end: 2.4rem;
+}
+.mis-24 {
+  margin-inline-start: 2.4rem;
+}
+.mie-24 {
+  margin-inline-end: 2.4rem;
+}
+.mi-24 {
+  margin-inline: 2.4rem;
+}
+.mb-24 {
+  margin-block: 2.4rem;
+}
+
+.m-32 {
+  margin: 3.2rem;
+}
+.mbs-32 {
+  margin-block-start: 3.2rem;
+}
+.mbe-32 {
+  margin-block-end: 3.2rem;
+}
+.mis-32 {
+  margin-inline-start: 3.2rem;
+}
+.mie-32 {
+  margin-inline-end: 3.2rem;
+}
+.mi-32 {
+  margin-inline: 3.2rem;
+}
+.mb-32 {
+  margin-block: 3.2rem;
+}
+
+.m-40 {
+  margin: 4rem;
+}
+.mbs-40 {
+  margin-block-start: 4rem;
+}
+.mbe-40 {
+  margin-block-end: 4rem;
+}
+.mis-40 {
+  margin-inline-start: 4rem;
+}
+.mie-40 {
+  margin-inline-end: 4rem;
+}
+.mi-40 {
+  margin-inline: 4rem;
+}
+.mb-40 {
+  margin-block: 4rem;
+}
+
+.m-60 {
+  margin: 6rem;
+}
+.mbs-60 {
+  margin-block-start: 6rem;
+}
+.mbe-60 {
+  margin-block-end: 6rem;
+}
+.mis-60 {
+  margin-inline-start: 6rem;
+}
+.mie-60 {
+  margin-inline-end: 6rem;
+}
+.mi-60 {
+  margin-inline: 6rem;
+}
+.mb-60 {
+  margin-block: 6rem;
+}

package/app/assets/styles/setup/utility-classes/_padding.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 0.1rem;
+}
+.pbs-1 {
+  padding-block-start: 0.1rem;
+}
+.pbe-1 {
+  padding-block-end: 0.1rem;
+}
+.pis-1 {
+  padding-inline-start: 0.1rem;
+}
+.pie-1 {
+  padding-inline-end: 0.1rem;
+}
+.pi-1 {
+  padding-inline: 0.1rem;
+}
+.pb-1 {
+  padding-block: 0.1rem;
+}
+
+.p-2 {
+  padding: 0.2rem;
+}
+.pbs-2 {
+  padding-block-start: 0.2rem;
+}
+.pbe-2 {
+  padding-block-end: 0.2rem;
+}
+.pis-2 {
+  padding-inline-start: 0.2rem;
+}
+.pie-2 {
+  padding-inline-end: 0.2rem;
+}
+.pi-2 {
+  padding-inline: 0.2rem;
+}
+.pb-2 {
+  padding-block: 0.2rem;
+}
+
+.p-4 {
+  padding: 0.4rem;
+}
+.pbs-4 {
+  padding-block-start: 0.4rem;
+}
+.pbe-4 {
+  padding-block-end: 0.4rem;
+}
+.pis-4 {
+  padding-inline-start: 0.4rem;
+}
+.pie-4 {
+  padding-inline-end: 0.4rem;
+}
+.pi-4 {
+  padding-inline: 0.4rem;
+}
+.pb-4 {
+  padding-block: 0.4rem;
+}
+
+.p-6 {
+  padding: 0.6rem;
+}
+.pbs-6 {
+  padding-block-start: 0.6rem;
+}
+.pbe-6 {
+  padding-block-end: 0.6rem;
+}
+.pis-6 {
+  padding-inline-start: 0.6rem;
+}
+.pie-6 {
+  padding-inline-end: 0.6rem;
+}
+.pi-6 {
+  padding-inline: 0.6rem;
+}
+.pb-6 {
+  padding-block: 0.6rem;
+}
+
+.p-8 {
+  padding: 0.8rem;
+}
+.pbs-8 {
+  padding-block-start: 0.8rem;
+}
+.pbe-8 {
+  padding-block-end: 0.8rem;
+}
+.pis-8 {
+  padding-inline-start: 0.8rem;
+}
+.pie-8 {
+  padding-inline-end: 0.8rem;
+}
+.pi-8 {
+  padding-inline: 0.8rem;
+}
+.pb-8 {
+  padding-block: 0.8rem;
+}
+
+.p-10 {
+  padding: 1rem;
+}
+.pbs-10 {
+  padding-block-start: 1rem;
+}
+.pbe-10 {
+  padding-block-end: 1rem;
+}
+.pis-10 {
+  padding-inline-start: 1rem;
+}
+.pie-10 {
+  padding-inline-end: 1rem;
+}
+.pi-10 {
+  padding-inline: 1rem;
+}
+.pb-10 {
+  padding-block: 1rem;
+}
+
+.p-12 {
+  padding: 1.2rem;
+}
+.pbs-12 {
+  padding-block-start: 1.2rem;
+}
+.pbe-12 {
+  padding-block-end: 1.2rem;
+}
+.pis-12 {
+  padding-inline-start: 1.2rem;
+}
+.pie-12 {
+  padding-inline-end: 1.2rem;
+}
+.pi-12 {
+  padding-inline: 1.2rem;
+}
+.pb-12 {
+  padding-block: 1.2rem;
+}
+
+.p-18 {
+  padding: 1.8rem;
+}
+.pbs-18 {
+  padding-block-start: 1.8rem;
+}
+.pbe-18 {
+  padding-block-end: 1.8rem;
+}
+.pis-18 {
+  padding-inline-start: 1.8rem;
+}
+.pie-18 {
+  padding-inline-end: 1.8rem;
+}
+.pi-18 {
+  padding-inline: 1.8rem;
+}
+.pb-18 {
+  padding-block: 1.8rem;
+}
+
+.p-20 {
+  padding: 2rem;
+}
+.pbs-20 {
+  padding-block-start: 2rem;
+}
+.pbe-20 {
+  padding-block-end: 2rem;
+}
+.pis-20 {
+  padding-inline-start: 2rem;
+}
+.pie-20 {
+  padding-inline-end: 2rem;
+}
+.pi-20 {
+  padding-inline: 2rem;
+}
+.pb-20 {
+  padding-block: 2rem;
+}
+
+.p-24 {
+  padding: 2.4rem;
+}
+.pbs-24 {
+  padding-block-start: 2.4rem;
+}
+.pbe-24 {
+  padding-block-end: 2.4rem;
+}
+.pis-24 {
+  padding-inline-start: 2.4rem;
+}
+.pie-24 {
+  padding-inline-end: 2.4rem;
+}
+.pi-24 {
+  padding-inline: 2.4rem;
+}
+.pb-24 {
+  padding-block: 2.4rem;
+}
+
+.p-32 {
+  padding: 3.2rem;
+}
+.pbs-32 {
+  padding-block-start: 3.2rem;
+}
+.pbe-32 {
+  padding-block-end: 3.2rem;
+}
+.pis-32 {
+  padding-inline-start: 3.2rem;
+}
+.pie-32 {
+  padding-inline-end: 3.2rem;
+}
+.pi-32 {
+  padding-inline: 3.2rem;
+}
+.pb-32 {
+  padding-block: 3.2rem;
+}
+
+.p-40 {
+  padding: 4rem;
+}
+.pbs-40 {
+  padding-block-start: 4rem;
+}
+.pbe-40 {
+  padding-block-end: 4rem;
+}
+.pis-40 {
+  padding-inline-start: 4rem;
+}
+.pie-40 {
+  padding-inline-end: 4rem;
+}
+.pi-40 {
+  padding-inline: 4rem;
+}
+.pb-40 {
+  padding-block: 4rem;
+}
+
+.p-60 {
+  padding: 6rem;
+}
+.pbs-60 {
+  padding-block-start: 6rem;
+}
+.pbe-60 {
+  padding-block-end: 6rem;
+}
+.pis-60 {
+  padding-inline-start: 6rem;
+}
+.pie-60 {
+  padding-inline-end: 6rem;
+}
+.pi-60 {
+  padding-inline: 6rem;
+}
+.pb-60 {
+  padding-block: 6rem;
+}

package/app/assets/styles/setup/utility-classes/index.css

@@ -1,2 +1,4 @@
-@import './_fluid-spacing';
-@import './animations/';
+@import "./animations/";
+@import "./_fluid-spacing";
+@import "./_margin";
+@import "./_padding";

package/app/components/display-details/DisplayDetailsCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <details @click.prevent="handleClick()" :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
+  <details :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
     <summary class="display-details-summary" :id="triggerId" :aria-controls="contentId" ref="summaryRef">
       <span class="label">
         <slot name="summary"></slot>
@@ -9,175 +9,13 @@
       </slot>
     </summary>
     <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
-      <slot name="content"></slot>
+      <div class="inner">
+        <slot name="details-content"></slot>
+      </div>
     </div>
   </details>
 </template>
 
-<script lang="ts">
-// 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,
-  animationDuration: number
-) => {
-  // State
-  const animation = ref<Animation | null>(null);
-  const isClosing = ref(false);
-  const isExpanding = ref(false);
-
-  // Check if refs are available
-  if (!detailsRef.value || !summaryRef.value || !contentRef.value) {
-    console.warn('Details, summary, or content ref is null');
-    return {
-      clickAction: () => console.warn('Component not fully initialized'),
-    };
-  }
-
-  const closeOtherDetailsWithSameName = () => {
-    const currentDetails = detailsRef.value;
-    if (!currentDetails || !name) return;
-
-    // Get the currently open details with the same name
-    const openDetails = openDetailsByName.get(name);
-
-    // If there's an open details with the same name and it's not the current one, close it
-    if (openDetails && openDetails !== currentDetails && openDetails.open) {
-      // Simulate a click on the other details to close it with animation
-      const otherSummary = openDetails.querySelector('summary');
-      if (otherSummary) {
-        otherSummary.click();
-      } else {
-        // Fallback: close directly without animation
-        openDetails.open = false;
-      }
-    }
-
-    // Update the map with the current details if it's open
-    if (currentDetails.open) {
-      openDetailsByName.set(name, currentDetails);
-    } else {
-      // If it's closed and was the one in the map, remove it
-      if (openDetailsByName.get(name) === currentDetails) {
-        openDetailsByName.delete(name);
-      }
-    }
-  };
-
-  const clickAction = () => {
-    const details = detailsRef.value;
-    const summary = summaryRef.value;
-    const content = contentRef.value;
-
-    if (!details || !summary || !content) return;
-
-    // Add overflow hidden to avoid content jumping
-    details.style.overflow = 'hidden';
-
-    if (isClosing.value || !details.open) {
-      // Close other details with the same name first
-      closeOtherDetailsWithSameName();
-
-      // Open the details
-      details.open = true;
-      isExpanding.value = true;
-      isClosing.value = false;
-
-      // Get the height of the content
-      const detailsHeight = details.offsetHeight;
-      const contentHeight = content.offsetHeight;
-      const summaryHeight = summary.offsetHeight;
-
-      const startHeight = `${detailsHeight - contentHeight}px`;
-      const endHeight = `${summaryHeight + contentHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'linear',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isExpanding.value = false;
-        animation.value = null;
-
-        // Register this as the open details for this name
-        openDetailsByName.set(name, details);
-      };
-
-      animation.value.oncancel = () => {
-        isExpanding.value = false;
-      };
-    } else if (isExpanding.value || details.open) {
-      // Close the details
-      isClosing.value = true;
-      isExpanding.value = false;
-
-      // Get the height of the content
-      const startHeight = `${details.offsetHeight}px`;
-      const endHeight = `${details.offsetHeight - content.offsetHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'linear',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.open = false;
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isClosing.value = false;
-        animation.value = null;
-
-        // Remove this from the open details map if it's there
-        if (openDetailsByName.get(name) === details) {
-          openDetailsByName.delete(name);
-        }
-      };
-
-      animation.value.oncancel = () => {
-        isClosing.value = false;
-      };
-    }
-  };
-
-  return {
-    clickAction,
-    isClosing,
-    isExpanding,
-  };
-};
-</script>
-
 <script setup lang="ts">
 const props = defineProps({
   name: {
@@ -188,58 +26,31 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  animationDuration: {
-    type: Number,
-    default: 400,
-  },
   iconSize: {
     type: String,
-    default: 'small',
+    default: "small",
     validator(value: string) {
-      return ['small', 'medium', 'large'].includes(value);
+      return ["small", "medium", "large"].includes(value)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
-
-const triggerId = computed(() => `${props.id}-trigger`);
-const contentId = computed(() => `${props.id}-content`);
+})
 
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const triggerId = computed(() => `${props.id}-trigger`)
+const contentId = computed(() => `${props.id}-content`)
 
-updateElementClasses([props.iconSize]);
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
+  props.styleClassPassthrough
+)
 
-const detailsRef = ref<HTMLDetailsElement | null>(null);
-const summaryRef = ref<HTMLElement | null>(null);
-const contentRef = ref<HTMLDivElement | null>(null);
+updateElementClasses([props.iconSize])
 
-// Initialize with dummy function that will be replaced when refs are available
-let clickAction = () => console.warn('Component not fully initialized');
-
-// Handle click with the current clickAction function
-const handleClick = () => {
-  clickAction();
-};
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-
-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, props.animationDuration);
-    clickAction = details.clickAction; // Assign the real click handler
-  } else {
-    console.error('Refs not available after mounting');
-  }
-});
+const detailsRef = useTemplateRef<HTMLDetailsElement>("detailsRef")
+const summaryRef = useTemplateRef<HTMLElement | null>("summaryRef")
+const contentRef = useTemplateRef<HTMLDivElement | null>("contentRef")
 </script>
 
 <style lang="css">
@@ -255,6 +66,10 @@ onMounted(() => {
         transform: scaleY(-1);
       }
     }
+    .display-details-content {
+      grid-template-rows: 1fr;
+      overflow: hidden;
+    }
   }
 
   .display-details-summary {
@@ -282,7 +97,6 @@ onMounted(() => {
       display: block;
 
       transform: scaleY(1);
-      transition: transform 200ms;
 
       font-size: 1.2rem;
       &.medium {
@@ -295,7 +109,12 @@ onMounted(() => {
   }
 
   .display-details-content {
-    /* Use an inner element for styling */
+    display: grid;
+    grid-template-rows: 0;
+
+    .inner {
+      overflow: hidden;
+    }
   }
 }
 </style>

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

@@ -57,17 +57,17 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       align-items: center;
       justify-content: space-between;
       flex-direction: row;
-      gap: 0;
+      gap: 1rem;
       list-style: none;
 
-      padding-inline: 0.5rem;
+      padding-block: 0.5rem;
 
       &::-webkit-details-marker,
       &::marker {
         display: none;
       }
 
-      overflow: clip;
+      overflow: hidden;
 
       .label-wrapper {
       }
@@ -77,8 +77,6 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
         justify-content: space-between;
 
         aspect-ratio: 1;
-        outline: 1px solid var(--gray-3);
-        padding: 1rem;
         overflow: hidden;
 
         .icon {
@@ -101,7 +99,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       + .expanding-panel-content {
         grid-template-rows: 1fr;
         .inner {
-          /* transform: scaleY(1); */
+          transition: all v-bind(animationDurationStr) ease-in-out;
         }
       }
     }
@@ -114,10 +112,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     .inner {
       overflow: hidden;
-      padding: 0.5rem;
-
-      /* transform: scaleY(0); */
-      /* transition: transform v-bind(animationDurationStr) ease-in-out; */
+      margin-top: 0;
     }
   }
 }

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

@@ -13,7 +13,10 @@
           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' }"
+          :style="{
+            '--_main-navigation-item-width':
+              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+          }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           role="none"
@@ -26,28 +29,41 @@
           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' }"
+          :style="{
+            '--_main-navigation-item-width':
+              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+          }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           role="none"
         >
-          <DisplayDetailsCore
-            :id="useId()"
+          <ExpandingPanel
             name="overflow-navigation-group"
             :animation-duration="detailsAanimationDuration"
             icon-size="medium"
             :style-class-passthrough="['overflow-navigation-details']"
           >
             <template #summary>
-              <span class="overflow-navigation-text" :aria-label="`${link.childLinksTitle} submenu`" role="menuitem" :aria-haspopup="true">{{ link.childLinksTitle }}</span>
+              <span
+                class="overflow-navigation-text"
+                :aria-label="`${link.childLinksTitle} submenu`"
+                role="menuitem"
+                :aria-haspopup="true"
+              >
+                {{ link.childLinksTitle }}
+              </span>
             </template>
-            <template #summaryIcon>
+            <template #icon>
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
             </template>
-            <template #layout-content>
+            <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">
+                  <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" role="menuitem">
                       <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
                     </NuxtLink>
@@ -55,7 +71,7 @@
                 </ul>
               </div>
             </template>
-          </DisplayDetailsCore>
+          </ExpandingPanel>
         </li>
       </template>
     </ul>
@@ -63,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderState } from '@/types/responsiveHeader';
+import type { ResponsiveHeaderState } from "@/types/responsiveHeader"
 
 const props = defineProps({
   mainNavigationState: {
@@ -74,32 +90,35 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const detailsAanimationDuration = 200;
-const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
+const detailsAanimationDuration = 200
+const detailsAanimationDurationString = `${detailsAanimationDuration}ms`
 
 const widestNavLinkWidthInMainNavigationState = computed(() => {
   return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
-    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0));
-  }, 0);
-});
+    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0))
+  }, 0)
+})
 
-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">
 .overflow-navigation-wrapper {
+  --overflow-nav-padding-inline: 0.8rem;
+  --overflow-nav-items-gap: 0px;
+  --overflow-nav-items-padding-block: 0.8rem;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--overflow-nav-items-gap);
 
   .overflow-navigation-list {
     display: none;
@@ -107,7 +126,7 @@ watch(
     &.visible {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: var(--overflow-nav-items-gap);
       min-width: var(--_overflow-navigation-list-min-width, auto);
     }
 
@@ -121,41 +140,72 @@ watch(
       .overflow-navigation-link {
         text-decoration: none;
         color: inherit;
+        padding-block: var(--overflow-nav-items-padding-block);
+        padding-inline: var(--overflow-nav-padding-inline);
+        display: flex;
+        /* background-color: red; */
+        border-bottom: 0.1rem solid #efefef75;
       }
 
       .overflow-navigation-details {
-        --_overflow-navigation-sub-nav-list-margin-block-start: 0;
-
-        &[open] {
-          --_overflow-navigation-sub-nav-list-margin-block-start: 12px;
-        }
-
-        &.display-details {
+        &.expanding-panel {
           margin-block-end: 0;
 
-          .display-details-summary {
-            .label {
-              .overflow-navigation-text {
-                text-wrap: nowrap;
+          .expanding-panel-details {
+            .expanding-panel-summary {
+              padding-block: var(--overflow-nav-items-padding-block);
+              padding-inline: var(--overflow-nav-padding-inline);
+              gap: 1rem;
+              /* background-color: red; */
+              border-bottom: 0.1rem solid #efefef75;
+
+              .label-wrapper {
+                .overflow-navigation-text {
+                  text-wrap: nowrap;
+                }
+              }
+              .icon-wrapper {
+                padding: 0;
+              }
+            }
+
+            &[open] {
+              .expanding-panel-summary {
+                border-bottom: 0.1rem solid transparent;
+              }
+              + .expanding-panel-content {
+                border-bottom: 0.1rem solid #efefef75;
+                .inner {
+                  .overflow-navigation-sub-nav-inner {
+                    margin-top: var(--overflow-nav-items-gap);
+                  }
+                }
               }
             }
-            /* .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(detailsAanimationDurationString) ease;
-
-                .overflow-navigation-sub-nav-item {
-                  .overflow-navigation-sub-nav-link {
-                    text-decoration: none;
-                    color: inherit;
-
-                    /* .overflow-navigation-sub-nav-text {} */
+
+          .expanding-panel-content {
+            border-bottom: 0.1rem solid transparent;
+
+            .inner {
+              margin-top: 0;
+
+              .overflow-navigation-sub-nav-inner {
+                margin-top: 0;
+
+                .overflow-navigation-sub-nav-list {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 2px;
+
+                  .overflow-navigation-sub-nav-item {
+                    padding-block: var(--overflow-nav-items-padding-block);
+                    padding-inline: var(--overflow-nav-padding-inline);
+
+                    .overflow-navigation-sub-nav-link {
+                      text-decoration: none;
+                      color: inherit;
+                    }
                   }
                 }
               }

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

@@ -696,7 +696,7 @@ watch(
         background-color: #000;
         border: 1px solid #ffffff90;
         border-radius: 8px;
-        padding: 12px;
+        padding-block: 12px;
         margin: 0;
         z-index: 999;
         min-width: var(--_overflow-drop-down-width, fit-content);

package/package.json

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