From be734fc026b75bc8c921e9401ba6e97f65356cec Mon Sep 17 00:00:00 2001
From: Horu <73709188+HigherOrderLogic@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:38:58 +0700
Subject: [PATCH] fix(Tabs): add visible focus indicator on active tabs (#690)

---
 package.json             |  1 +
 pnpm-lock.yaml           | 12 ++++++++++++
 src/module.ts            |  2 ++
 src/runtime/ui.config.ts |  2 +-
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bad9c5f4..fc894ad8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.1.0",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@iconify-json/heroicons": "^1.1.12",
     "@nuxt/kit": "^3.7.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ac086a5..e566bc75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@egoist/tailwindcss-icons':
         specifier: ^1.1.0
         version: 1.1.0(tailwindcss@3.3.3)
+      '@headlessui/tailwindcss':
+        specifier: ^0.2.0
+        version: 0.2.0(tailwindcss@3.3.3)
       '@headlessui/vue':
         specifier: ^1.7.16
         version: 1.7.16(vue@3.3.4)
@@ -1022,6 +1025,15 @@ packages:
       '@hapi/hoek': 9.3.0
     dev: true
 
+  /@headlessui/tailwindcss@0.2.0(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      tailwindcss: ^3.0
+    dependencies:
+      tailwindcss: 3.3.3
+    dev: false
+
   /@headlessui/vue@1.7.16(vue@3.3.4):
     resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
     engines: {node: '>=10'}
diff --git a/src/module.ts b/src/module.ts
index 5e6e5f26..f4c072bd 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,6 +2,7 @@ import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, creat
 import defaultColors from 'tailwindcss/colors.js'
 import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
+import headlessUiPlugin from '@headlessui/tailwindcss'
 import { name, version } from '../package.json'
 import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
 import createTemplates from './templates'
@@ -135,6 +136,7 @@ export default defineNuxtModule<ModuleOptions>({
 
       tailwindConfig.plugins = tailwindConfig.plugins || []
       tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
+      tailwindConfig.plugins.push(headlessUiPlugin({}))
     })
 
     createTemplates(nuxt)
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 57d11a23..5f416fdc 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -864,7 +864,7 @@ export const tabs = {
       shadow: 'shadow-sm'
     },
     tab: {
-      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
+      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
       background: '',
       active: 'text-gray-900 dark:text-white',
       inactive: 'text-gray-500 dark:text-gray-400',