@codecavepro/brand 2.7.3 → 2.7.5

package/dist/src/common/Button.vue

@@ -21,7 +21,7 @@ const variantClass = computed(() => {
     case 'tertiary':
       return `${buttonBaseClass} px-6 py-1 border border-primary-500 hover:border-hovered`
     case 'icon':
-      return `${buttonBaseClass} p-5 border border-primary-500 hover:border-primary-700`
+      return `${buttonBaseClass} p-5 border border-primary-500 hover:border-hovered`
     case 'ghost':
       return `${linkBaseClass} text-body-primary hover:text-primary-200 active:text-primary-200 font-bold px-6 py-2`
     case 'text':

package/dist/src/common/InputText.vue

@@ -25,7 +25,7 @@ defineEmits(['update:modelValue'])
     <input :id="id" :type="type" :autocomplete="autocomplete" :placeholder="placeholder" :required="isRequired" :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" 
     :class="`
         w-full p-3 pt-7 bg-surface-secondary rounded-lg placeholder:text-xs placeholder:text-body-secondary
-        focus:outline-none transition-colors
+        focus:outline-none transition-colors border border-surface-tertiary
         hover:bg-surface-tertiary
         ${isError ? 'text-error input-error focus:text-error' : 'text-hovered focus:text-hovered'}
        `" />

package/dist/src/common/Radio.vue

@@ -18,7 +18,7 @@ const labelClass = computed(() => {
     case 'secondary':
       return `${baseLabelClass} gap-3 p-3 pr-4 bg-surface-primary-transparent rounded-custom border-2 border-surface-quaternary group-hover:bg-surface-tertiary`
     default:
-      return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
+      return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg  border border-surface-tertiary`
   }
 })
 

package/dist/src/common/Review.vue

@@ -25,7 +25,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
 </script>
 
 <template>
-  <div :class="`mx-1 lg:mx-2 testimonial rounded-custom space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
+  <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">
       <LazyImage v-if="item.photo.name !== 'no-image.svg'" 
             class="w-12 lg:w-16 h-12 lg:h-16" :src="imageUrl(item.photo.url)"
@@ -55,10 +55,4 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
       <span>{{ item.verification }}</span>
     </div>
   </div>
-</template>
-
-<style scoped>
-.testimonial {
-  backdrop-filter: blur(32px);
-}
-</style>
+</template>

package/dist/src/common/TextField.vue

@@ -24,7 +24,7 @@ defineEmits(['update:modelValue'])
 
 <template>
   <div class="w-full relative">
-    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary hover:bg-surface-tertiary transition-colors text-heading 
+    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary border border-surface-tertiary hover:bg-surface-tertiary transition-colors text-heading 
       ${isError ? 'input-error' : ''}`">
       <label :for="id" class="font-bold text-sm select-none">
         {{ label }}

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

@@ -75,9 +75,9 @@ 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="`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">
+    <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 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all max-h-screen`">
+        <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>
@@ -85,25 +85,28 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <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">
+        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-y-auto text-sm">
+          <div v-if="isServicesOpen" class="h-full flex flex-col min-h-0">
+            <h2 class="text-center font-bold text-body-primary py-2.5 shrink-0">
               {{ servicesItem?.submenuTitle }}
             </h2>
-            <slot name="services" />
-            <button class="pt-4" @click="isServicesOpen = false">
-              <component class="w-11 h-11 text-action" :is="BackIcon" />
+            <div class="flex-1 min-h-0 overflow-y-auto">
+              <slot name="services" />
+            </div>
+
+            <button class="pt-4 shrink-0" @click="isServicesOpen = false">
+              <component :is="BackIcon" class="w-11 h-11 text-action" />
             </button>
           </div>
-          <ul v-else class="h-full flex flex-col items-center gap-3 justify-around px-4 pt-2">
+          <ul v-else class="flex flex-col items-center gap-3 px-4 pt-2 overflow-y-auto">
             <li v-for="(item, index) in items" :key="index">
               <div v-if="item.submenu?.length">
-                <Button :title="item.name" variant="ghost" @click="isServicesOpen = true" class="transition-transform duration-150 pr-1">
-                  <Shevron class="rotate-270 ml-1" />
+                <Button :title="item.name" variant="ghost" class="pr-1 transition-transform duration-150" @click="isServicesOpen = true">
+                  <Shevron class="ml-1 rotate-270" />
                 </Button>
               </div>
               <Button v-else-if="item.emphasis" as="link" :href="item.link" :title="item.mobileTitle ?? item.name" variant="tertiary" @click="handleCloseMenu" />
-              <Button v-else as="link" variant="ghost" :title="item.mobileTitle ?? item.name" :href="item.link" />
+              <Button v-else as="link" variant="ghost" :title="item.mobileTitle ?? item.name" :href="item.link" @click="handleCloseMenu" />
             </li>
           </ul>
         </nav>

package/package.json

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