@saasmakers/ui 2.1.6 → 2.1.7

package/app/components/bases/BaseButton.vue

@@ -72,7 +72,7 @@ function onClick(event: MouseEvent) {
 <template>
   <component
     :is="to ? NuxtLinkLocale : 'button'"
-    class="relative inline-block select-none appearance-none border uppercase focus-visible:outline-none"
+    class="relative inline-block select-none appearance-none border uppercase base-focus-visible"
     :class="{
       'flex items-center justify-center': hasFixedSize,
       'cursor-not-allowed opacity-50': disabled,

package/app/components/bases/BaseChip.vue

@@ -68,7 +68,7 @@ function onMouseEnter(event: MouseEvent) {
   <component
     :is="as"
     :id="id"
-    class="min-h-8 inline-flex items-center border rounded-md font-normal tracking-tight outline-none transition-colors"
+    class="min-h-8 inline-flex items-center border rounded-md font-normal tracking-tight transition-colors base-focus-visible"
     :class="{
       'max-w-full': maxWidth,
       'gap-1': hasLeadingIcon || hasTrailingIcon,

package/app/components/bases/BaseToast.vue

@@ -61,12 +61,12 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <button
       v-if="action"
-      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 uppercase transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
+      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 uppercase transition-colors base-focus-visible"
       :class="{
-        'bg-red-100 text-red-700 hover:bg-red-200 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
-        'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',
-        'bg-green-100 text-green-700 hover:bg-green-200 focus-visible:ring-green-500 dark:bg-green-400/15 dark:text-green-400 dark:hover:bg-green-400/25': status === 'success',
-        'bg-orange-100 text-orange-700 hover:bg-orange-200 focus-visible:ring-orange-500 dark:bg-orange-400/15 dark:text-orange-400 dark:hover:bg-orange-400/25': status === 'warning',
+        'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
+        'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',
+        'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-400/15 dark:text-green-400 dark:hover:bg-green-400/25': status === 'success',
+        'bg-orange-100 text-orange-700 hover:bg-orange-200 dark:bg-orange-400/15 dark:text-orange-400 dark:hover:bg-orange-400/25': status === 'warning',
       }"
       type="button"
       @click.stop="onAction"

package/app/components/fields/FieldAvatar.vue

@@ -75,8 +75,9 @@ function onOpenFilePicker() {
 
     <div
       :aria-label="loading ? t('actionLoading') : (typeof action === 'string' ? action : (action?.base || t('action')))"
-      class="w-full flex items-center gap-2 uppercase outline-none"
+      class="w-full flex items-center gap-2 uppercase"
       :class="{
+        'base-focus-visible': !disabled && !loading,
         'cursor-pointer': !disabled && !loading,
         'field-disabled': disabled,
         'pointer-events-none opacity-50': disabled,

package/app/components/fields/FieldCheckbox.vue

@@ -58,7 +58,7 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
             'h-4 w-4': size === 'sm',
             'h-4.5 w-4.5': size === 'base',
             'h-5 w-5': size === 'lg',
-            'peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500/40 peer-focus-visible:ring-offset-2 peer-focus-visible:outline-none': !disabled,
+            'base-focus-ring-peer': !disabled,
           }"
         >
           <Icon

package/app/components/fields/FieldDate.vue

@@ -416,8 +416,9 @@ function syncFocusedDayIndex() {
     >
       <div
         :id="id"
-        class="flex cursor-pointer items-center gap-2 outline-none"
+        class="flex cursor-pointer items-center gap-2 rounded-lg"
         :class="{
+          'base-focus-visible-inset': !disabled,
           'h-sm': size === 'sm',
           'h-base': size === 'base',
           'h-lg': size === 'lg',
@@ -471,7 +472,7 @@ function syncFocusedDayIndex() {
         <button
           v-if="modelValue"
           :aria-label="t('clear')"
-          class="mr-3 inline-flex shrink-0 items-center self-center justify-center rounded-full base-control-hover p-1 text-gray-600 outline-none transition-[transform,colors] hover:scale-105 dark:text-gray-400"
+          class="mr-3 inline-flex shrink-0 items-center self-center justify-center rounded-full base-control-hover p-1 text-gray-600 transition-[transform,colors] base-focus-visible hover:scale-105 dark:text-gray-400"
           type="button"
           @click="onClearClick"
         >
@@ -494,7 +495,7 @@ function syncFocusedDayIndex() {
             v-if="!calendarOpen"
             :id="chipListId"
             ref="chipListRef"
-            class="flex flex-wrap gap-1.5 outline-none"
+            class="flex flex-wrap gap-1.5 base-focus-visible"
             :class="{
               'text-xs': size === 'sm',
               'text-sm': size === 'base',
@@ -554,7 +555,7 @@ function syncFocusedDayIndex() {
             <div class="grid grid-cols-7 mb-0.5 gap-px">
               <button
                 :aria-label="t('prevMonth')"
-                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover transition-colors base-focus-visible"
                 type="button"
                 @click="onPreviousMonth"
               >
@@ -571,7 +572,7 @@ function syncFocusedDayIndex() {
 
               <button
                 :aria-label="t('nextMonth')"
-                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover transition-colors base-focus-visible"
                 type="button"
                 @click="onNextMonth"
               >
@@ -601,14 +602,14 @@ function syncFocusedDayIndex() {
               <button
                 v-for="(cell, index) in calendarCells"
                 :key="`${cell.date.toISOString()}-${index}`"
-                class="relative min-h-7 min-w-7 inline-flex items-center justify-center border border-transparent rounded-md text-xs font-medium outline-none"
+                class="relative min-h-7 min-w-7 inline-flex items-center justify-center border border-transparent rounded-md text-xs font-medium base-focus-visible"
                 :class="{
                   'cursor-not-allowed text-gray-400 opacity-40 dark:text-gray-600': !cell.inMonth || isDayDisabled(cell.date),
                   'base-bg-hover': cell.inMonth && !isDayDisabled(cell.date) && !(modelValue && isSameDay(cell.date, modelValue)),
                   'text-indigo-600 font-bold dark:text-indigo-400': cell.inMonth && !isDayDisabled(cell.date) && isSameDay(cell.date, today) && !(modelValue && isSameDay(cell.date, modelValue)),
                   'text-gray-600 dark:text-gray-400': cell.inMonth && !isDayDisabled(cell.date) && !isSameDay(cell.date, today) && !(modelValue && isSameDay(cell.date, modelValue)),
                   'border-indigo-600/35 bg-indigo-600/[0.08] text-gray-900 dark:border-indigo-400/35 dark:bg-indigo-400/[0.08] dark:text-gray-100': modelValue && isSameDay(cell.date, modelValue),
-                  'ring-2 ring-indigo-600/35 dark:ring-indigo-400/35': index === focusedDayIndex && calendarOpen && !(modelValue && isSameDay(cell.date, modelValue)),
+                  'base-focus-ring': index === focusedDayIndex && calendarOpen && !(modelValue && isSameDay(cell.date, modelValue)),
                 }"
                 :disabled="!cell.inMonth || isDayDisabled(cell.date)"
                 role="gridcell"

package/app/components/fields/FieldSelect.vue

@@ -338,14 +338,14 @@ function toggle() {
       <div
         :id="id"
         ref="triggerRef"
-        class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
+        class="group flex items-center rounded-lg bg-white dark:bg-gray-900"
         :class="{
           'base-box': border === 'full',
           'base-border-b': border === 'bottom',
           'border-0': border === 'none',
           'base-border-active': isOpen,
           'base-border-hover': !isOpen && !disabled,
-          'base-border-interactive-focus-visible': !disabled,
+          'base-focus-visible': !disabled,
           'text-xs h-sm': size === 'sm' && !square,
           'text-sm h-base': size === 'base' && !square,
           'text-base h-lg': size === 'lg' && !square,
@@ -502,7 +502,7 @@ function toggle() {
               <div
                 v-for="option in column.options"
                 :key="option.value"
-                class="flex cursor-pointer items-center outline-none"
+                class="flex cursor-pointer items-center base-focus-visible-inset"
                 :class="{
                   'base-border-b base-bg-hover last:border-b-0': !isMultiColumn,
                   'h-sm px-sm': size === 'sm' && !isMultiColumn,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/uno.config.ts

@@ -34,6 +34,12 @@ export const shortcuts: Record<string, string> = {
   'base-border-interactive': 'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600',
   'base-border-interactive-focus-visible': 'hover:border-gray-300 focus-visible:border-gray-400 dark:hover:border-gray-700 dark:focus-visible:border-gray-600',
   'base-border-interactive-focus-within': 'hover:border-gray-300 focus-within:border-gray-400 dark:hover:border-gray-700 dark:focus-within:border-gray-600',
+  'base-focus-overlay': 'pointer-events-none rounded-lg opacity-0 outline outline-2 outline-gray-900 dark:outline-gray-100',
+  'base-focus-ring': 'outline outline-2 outline-offset-2 outline-gray-900 dark:outline-gray-100',
+  'base-focus-ring-peer': 'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-900 dark:peer-focus-visible:outline-gray-100',
+  'base-focus-ring-inset': 'outline outline-2 outline-offset--2 outline-gray-900 dark:outline-gray-100',
+  'base-focus-visible': 'focus-visible:base-focus-ring',
+  'base-focus-visible-inset': 'focus-visible:base-focus-ring-inset',
   'base-bg': 'bg-white dark:bg-gray-900',
   'base-box': 'border shadow-sm base-border rounded-lg',
   'base-highlight-indigo': 'border border-indigo-600/35 bg-indigo-600/[0.08] shadow-indigo-600/15 dark:border-indigo-400/35 dark:bg-indigo-400/[0.08] dark:shadow-indigo-400/15',