@codecavepro/brand 3.4.0 → 3.5.1

package/dist/src/common/SubNavbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, nextTick } from 'vue';
+import { computed, ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import Shevron from '../assets/icons/shevron.vue';
 import { type MenuItem } from '../lib/menus/menuTypes.ts';
 import { useBrandMessages } from '../lib/i18n/messages.ts';
@@ -97,17 +97,31 @@ async function initSubmenu() {
   openItem.value = activeItem.name;
 }
 
+const subnavRef = ref<HTMLElement | null>(null);
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node;
+
+  if (!subnavRef.value?.contains(target)) {
+    openItem.value = null;
+  }
+}
+
 onMounted(async () => {
   await initSubmenu();
+  document.addEventListener('click', handleClickOutside);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
 });
 
 </script>
 
 <template>
-  <nav v-if="items.length" class="ds-subnav" :aria-label="messages.subNavbar.label">
+  <nav v-if="items.length" class="ds-subnav"  ref="subnavRef" :aria-label="messages.subNavbar.label">
     <div class="ds-subnav-inner" :class="{ 'is-submenu-open': openItem }">
-      <ul>
-        <li v-for="item in items" :key="item.name" :ref="el => setItemRef(item.name, el)">
+      <ul class="ds-subnav-list">
+        <li v-for="item in items" :key="item.name" :ref="el => setItemRef(item.name, el)" class="ds-subnav-item">
           <div class="ds-subnav-item" @click="item.subMenu?.length ? openSubmenu(item) : closeSubmenu()">
             <component :is="item.href ? 'a' : 'span'" class="ds-subnav-link" :href="item.href" :aria-current="item.name === current ? 'page' : undefined">
               {{ item.label }}
@@ -171,9 +185,9 @@ onMounted(async () => {
   }
 }
 
-.ds-subnav ul {
+.ds-subnav-list {
   display: flex;
-  align-items: center;
+  align-items: start;
   justify-content: center;
 
   margin: 0;
@@ -186,7 +200,7 @@ onMounted(async () => {
   flex-wrap: nowrap;
 }
 
-.ds-subnav li {
+.ds-subnav-item{
   margin: 0;
   flex-shrink: 0;
 }
@@ -310,10 +324,8 @@ onMounted(async () => {
 
   font-family: var(--font-sans);
   font-size: var(--text-body);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--leading-body);
 
-  text-align: center;
+  text-align: start;
   text-decoration: none;
 
   opacity: 0;

package/dist/src/common/effects/TypingEffect.vue

@@ -43,9 +43,9 @@ watch(() => [props.text1, props.text2],
 
 <template>
   <div ref="typingEffectContainer" class="flex flex-col items-center leading-[130%] text-heading-md md:text-heading-lg font-bold">
-    <h2 :key="text1" class="split-text">
+    <h1 :key="text1" class="split-text text-heading text-[36px] md:text-[44px] xl:text-5xl ">
       <span class="block text-heading">{{ text1 }}</span>
       <span class="block text-action">{{ text2 }}</span>
-    </h2>
+    </h1>
   </div>
 </template>

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

@@ -79,7 +79,7 @@ const handleCloseMenu = () => {
 <template>
   <div>
     <div class="fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary">
-      <div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh' : 'pb-0']">
+      <div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh max-h-140' : 'pb-0']">
         <div class="flex justify-between items-center py-1.5 shrink-0">
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
             <img :src="logo" alt="CODECAVE" />

package/package.json

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