@codecavepro/brand 3.5.2 → 3.5.4

package/dist/src/common/Button.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
   type: 'button',
 })
 
-const buttonBaseClass = `flex items-center justify-center
+const buttonBaseClass = `flex items-center justify-center text-center
 ${props.isDisabled
     ? 'cursor-not-allowed opacity-60'
     : 'cursor-pointer'}

package/dist/src/common/Review.vue

@@ -30,7 +30,7 @@ const messages = useBrandMessages()
 <template>
   <div :class="`mx-1 lg:mx-2 testimonial space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
     <div class="flex flex-col lg:flex-row gap-5 lg:items-center">
-      <img v-if="item.photo.name !== ''" 
+      <img loading="lazy" v-if="item.photo.name !== ''" 
             class="w-12 lg:w-16 h-12 lg:h-16" :src="imageUrl(item.photo.url)"
            :alt=item.photo.name />
       <div>

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

@@ -79,13 +79,22 @@ 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 max-h-140' : 'pb-0']">
+      <div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh max-h-90' : '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" />
           </a>
-          <button @click="isMenuOpen = !isMenuOpen" :aria-label="messages.mobileMenu.toggle" :aria-expanded="isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
-            <span></span>
+
+          <button
+            @click="isMenuOpen = !isMenuOpen"
+            :aria-label="messages.mobileMenu.toggle"
+            :aria-expanded="isMenuOpen"
+            :class="[
+              'burger-menu',
+              isMenuOpen ? 'text-action' : 'text-heading'
+            ]"
+          >
+            <span :class="isMenuOpen ? 'cross' : 'burger'"></span>
           </button>
         </div>
         <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-hidden text-sm">
@@ -123,21 +132,39 @@ const handleCloseMenu = () => {
 <style scoped>
 .burger-menu {
   display: flex;
-  justify-content: space-around;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 0.625rem;
   width: 3rem;
   height: 3rem;
 }
 
-.burger-menu::before,
-.burger-menu::after,
-.burger-menu span {
-  content: '';
+.burger {
   width: 100%;
   height: 0.1rem;
   background-color: currentColor;
   border-radius: 3rem;
+  box-shadow:
+    0 -0.4rem 0 currentColor,
+    0 0.4rem 0 currentColor;
+}
+
+.cross {
+  width: 100%;
+  height: 0.1rem;
+  background-color: currentColor;
+  border-radius: 3rem;
+  transform: rotate(45deg);
+  position: relative;
+}
+
+.cross::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  border-radius: 3rem;
+  transform: rotate(90deg);
 }
 
 .services-scroll {

package/dist/src/header/services-list.vue

@@ -26,7 +26,7 @@ defineProps<{
           <h3 class="font-bold text-heading group-active:text-hovered group-hover:text-hovered transition-colors">
             {{ item.name }}
           </h3>
-          <p class="text-body-secondary-lighter group-active:text-hovered group-hover:text-hovered transition-colors">
+          <p class="text-body-secondary-lighter">
             {{ item.description }}
           </p>
         </div>

package/package.json

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