@codecavepro/brand 3.2.1 → 3.2.3

package/dist/src/common/Button.vue

@@ -1,19 +1,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isDisabled?: boolean
   title?: string
+  ariaLabel?: string
   as?: 'link'
   href?: string
   variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text' | 'link' | 'icon'
-  type?: 'submit'
+  type?: 'button' | 'submit'
   class?: string
-}>()
+}>(), {
+  type: 'button',
+})
+
 const buttonBaseClass = `flex items-center justify-center
-${props.isDisabled ? 'cursor-not-allowed opacity-20' : 'cursor-pointer'}
+${props.isDisabled
+    ? 'cursor-not-allowed opacity-60'
+    : 'cursor-pointer'}
 w-fit max-w-full min-w-12 min-h-12 rounded-full text-body-primary font-bold transition-colors`
-const linkBaseClass = 'flex transition-colors'
+
+const linkBaseClass = `flex transition-colors
+${props.isDisabled
+    ? 'cursor-not-allowed opacity-60'
+    : 'cursor-pointer'}`
+
 const variantClass = computed(() => {
   switch (props.variant) {
     case 'secondary':
@@ -32,14 +43,29 @@ const variantClass = computed(() => {
       return `${buttonBaseClass} px-6 py-1 bg-primary-500 hover:bg-primary-700 active:bg-primary-900`
   }
 })
+
+const preventDisabledLinkActivation = (event: Event) => {
+  if (props.isDisabled) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+}
 </script>
 
 <template>
-  <a v-if="props.as === 'link'" :href="props.href" :class="[variantClass, props.class ?? '']">
+  <a v-if="props.as === 'link'" 
+    :href="props.isDisabled ? '' : props.href" 
+    :class="[variantClass, props.class ?? '']" 
+    :aria-disabled="props.isDisabled ? 'true' : undefined" 
+    :tabindex="props.isDisabled ? -1 : undefined" 
+    @click="preventDisabledLinkActivation" 
+    @keydown.enter="preventDisabledLinkActivation" 
+    @keydown.space.prevent="preventDisabledLinkActivation">
     <span>{{ title }}</span>
     <slot />
   </a>
-  <button v-else :class="[variantClass, props.class ?? '']">
+
+  <button v-else :type="props.type" :disabled="props.isDisabled" :class="[variantClass, props.class ?? '']" :aria-label="props.ariaLabel">
     {{ title }}
     <slot />
   </button>

package/dist/src/common/TextField.vue

@@ -2,39 +2,53 @@
 import { ref } from "vue";
 
 defineProps<{
-  id: string
-  label: string
-  placeholder: string
-  isRequired?: boolean
-  isError?: boolean
-  errorMessage?: string,
-  modelValue?: string
-}>()
-
-const textareaRef = ref(null)
-const autoResize = () => {
-  if (textareaRef.value) {
-    textareaRef.value.style.height = 'auto'
-    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
-  }
-}
+  id: string;
+  label: string;
+  placeholder: string;
+  isRequired?: boolean;
+  isError?: boolean;
+  errorMessage?: string;
+  modelValue?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+const MAX_HEIGHT = 300;
 
-defineEmits(['update:modelValue'])
+const autoResize = (event: Event) => {
+  const textarea = event.target as HTMLTextAreaElement;
+
+  textarea.style.height = "auto";
+
+  const height = Math.min(textarea.scrollHeight, MAX_HEIGHT);
+  textarea.style.height = `${height}px`;
+  textarea.style.overflowY =
+    textarea.scrollHeight > MAX_HEIGHT ? "auto" : "hidden";
+
+  emit("update:modelValue", textarea.value);
+};
 </script>
 
 <template>
   <div class="w-full relative">
-    <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' : ''}`">
+    <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 }}
       </label>
-      <textarea 
-        @input="autoResize" 
-        ref="textareaRef" 
-        :id="id" :placeholder="placeholder" :value="modelValue" @change="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)" 
-        :class="`w-full flex-grow resize-none overflow-hidden placeholder:pt-1.5 placeholder:text-xs placeholder:text-body-secondary outline-none 
-        ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}`" />
+
+      <textarea
+        ref="textareaRef"
+        :id="id"
+        :placeholder="placeholder"
+        :value="modelValue"
+        @input="autoResize"
+        :class="`w-full flex-grow resize-none placeholder:pt-1.5 placeholder:text-xs placeholder:text-body-secondary outline-none
+        ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}`"
+      />
     </div>
     <span v-if="isError" class="text-error text-xs">
       {{ errorMessage }}
@@ -44,12 +58,14 @@ defineEmits(['update:modelValue'])
 
 <style scoped>
 .focus-area:focus-within {
-  box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+  box-shadow:
+    0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.8);
 }
 
 .input-error {
-  box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+  box-shadow:
+    0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
 }
 </style>

package/dist/src/footer/link-group.vue

@@ -18,19 +18,19 @@ defineProps<{
 </script>
 
 <template>
-  <div class="space-y-4">
-    <p class="text-body-secondary uppercase font-bold text-xs">
+  <nav :aria-labelledby="`${groupName}-label`" class="space-y-4">
+    <p :id="`${groupName}-label`" class="text-body-secondary uppercase font-bold text-xs" >
       {{ groupName }}
     </p>
-    <div class="space-y-3 xl:space-y-2 text-sm">
-      <div :key="index" v-for="(item, index) in items">
+    <ul class="space-y-3 xl:space-y-2 text-sm">
+      <li v-for="(item, index) in items" :key="index">
         <Button
             :title="item.name"
             as="link"
             :href="item.href"
             variant="text"
         />
-      </div>
-    </div>
-  </div>
+      </li>
+    </ul>
+  </nav>
 </template>

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

@@ -76,7 +76,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 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all max-h-screen`">
+      <div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh' : '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" />
@@ -85,12 +85,12 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-y-auto text-sm">
+        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-hidden 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>
-            <div class="flex-1 min-h-0 overflow-y-auto">
+            <div class="services-scroll flex-1 min-h-0 overflow-y-auto overscroll-contain">
               <slot name="services" />
             </div>
 
@@ -136,4 +136,13 @@ const handleCloseMenu = () => {
   background-color: currentColor;
   border-radius: 3rem;
 }
+
+.services-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+}
 </style>

package/package.json

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