@codecavepro/brand 2.5.5 → 2.7.0

package/dist/src/common/BrandNav.vue

@@ -198,8 +198,22 @@ withDefaults(defineProps<{
   height: 10px;
   border-radius: 50%;
   background: var(--color-error-400);
-  box-shadow: 0 0 12px 0 var(--color-error-400),
-              0 0 4px 0 hsl(from var(--color-error-400) h s l / 0.5);
+  box-shadow:
+    0 0 12px 0 var(--color-error-400),
+    0 0 4px 0 hsl(from var(--color-error-400) h s l / 0.5);
+
+  animation: pulse-opacity 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
 }
 
 .brand-nav-logo {
@@ -223,12 +237,13 @@ withDefaults(defineProps<{
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 14px;
+  margin-top: 13px;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   border-radius: 1rem;
   padding: 1.25rem;
+   z-index: 100;
   background: var(--color-surface-primary);
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);

package/dist/src/common/SubNav.vue

@@ -1,28 +1,46 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { type MenuItem } from '../lib/menus/menuTypes';
+import { type MenuItem } from '../lib/menus/menuTypes.ts';
 
 interface Props {
-  items: MenuItem[];
+  section?: string;
+  current?: string;
+  subMenu: Record<string, MenuItem[]>;
 }
+
 const props = defineProps<Props>();
+
+const items = computed<MenuItem[]>(() => {
+  return props.section ? props.subMenu[props.section] ?? [] : [];
+});
+
+if (
+  props.current &&
+  props.section &&
+  !(props.subMenu[props.section] ?? []).some(i => i.name === props.current)
+) {
+  throw new Error(
+    `SubNav: no item named "${props.current}" in SUB["${props.section}"]`
+  );
+}
 </script>
 
 <template>
   <nav
-    v-if="items.length > 0"
+    v-if="items.length"
     class="ds-subnav"
     aria-label="Section"
   >
-    <div class="page-container ds-subnav-inner">
-      <ul>
+    <div class="ds-subnav-inner">
+      <ul class="flex w-max min-w-full flex-nowrap">
         <li
           v-for="item in items"
           :key="item.name"
         >
           <a
-            class="btn btn-ghost"
-            :href="`${item.href}`"
+            class="btn btn-ghost whitespace-nowrap"
+            :href="item.href"
+            :aria-current="item.name === current ? 'page' : undefined"
           >
             {{ item.label }}
           </a>

package/dist/src/header/mobile-menu.vue

@@ -75,7 +75,7 @@ const handleCloseMenu = () => {
 
 <template>
   <div>
-    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl ${isMenuOpen ? 'rounded-b-3xl' : 'rounded-none'}`">
+    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary`">
       <div :class="`h-full px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all`">
         <div class="flex justify-between items-center py-1.5">
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
@@ -85,12 +85,12 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <nav v-if="isMenuOpen" class="h-full text-sm">
+        <nav v-if="isMenuOpen" class="h-full text-sm flex-1 overflow-y-auto min-h-0">
           <div v-if="isServicesOpen">
             <h2 class="text-center font-bold text-body-primary py-2.5">
               {{ servicesItem?.submenuTitle }}
             </h2>
-            <ServicesList :items="servicesItem?.submenu ?? []" />
+            <slot name="services" />
             <button class="pt-4" @click="isServicesOpen = false">
               <component class="w-11 h-11 text-action" :is="BackIcon" />
             </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.5.5",
+  "version": "2.7.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",