deps: upgrade dependencies (#1867)

* update deps

* Update package.json

* update deps and workflows

* refactor workflows

* always checkout

* Update action.yml

* Update action.yml

* Update action.yml

* bump

* Update action.yml

* Update action.yml

* update workflow

* fix pnpm issues

* upgrade eslint

* complete workflows

* Update eslint.config.ts

* upgrade tailwind

* Update .gitignore

* upgrade nuxt content separately

docs/components/ApplicationHeader.vue

@@ -14,7 +14,7 @@ const isScrolled = computed(() => y.value !== 0)
     :class="[
       'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
       isScrolled
-        ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
+        ? 'dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
         : 'dark:bg-transparent',
     ]"
   >
@@ -46,7 +46,7 @@ const isScrolled = computed(() => y.value !== 0)
         "
       ></div>
     </div>
-    <div class="relative flex flex-grow basis-0 items-center">
+    <div class="relative flex grow basis-0 items-center">
       <NuxtLink
         aria-label="Home page"
         href="/"
@@ -111,7 +111,7 @@ const isScrolled = computed(() => y.value !== 0)
         </kbd>
       </button>
     </div>
-    <div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
+    <div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
       <ColorThemeSwitcher />
       <a
         class="group"

docs/components/Button.vue

@@ -15,9 +15,9 @@ const styles = computed(
   () =>
     ({
       primary:
-        'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
+        'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
       secondary:
-        'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
+        'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
     }[props.variant])
 )
 

docs/components/Hero.vue

@@ -29,7 +29,7 @@ import {
           />
           <div class="relative">
             <p
-              class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
+              class="font-display inline bg-linear-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
             >
               The complete Vue.js combobox solution.
             </p>
@@ -74,19 +74,19 @@ import {
               height="567"
             />
             <div
-              class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg"
+              class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg"
             ></div>
             <div
-              class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10"
+              class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10"
             ></div>
             <div
-              class="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur"
+              class="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur-sm"
             >
               <div
-                class="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0"
+                class="absolute -top-px left-20 right-11 h-px bg-linear-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0"
               ></div>
               <div
-                class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
+                class="absolute -bottom-px left-11 right-20 h-px bg-linear-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
               ></div>
               <div class="p-4 dark">
                 <div class="flex items-center space-x-4">

docs/components/PageContent.vue

@@ -20,7 +20,7 @@ import PageTableOfContents from '~/components/PageTableOfContents.vue'
           // links
           'prose-a:font-semibold dark:prose-a:text-sky-400',
           // link underline
-          'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',
+          'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
           // pre
           'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
           // hr

docs/components/SidebarNavigation.vue

@@ -73,7 +73,7 @@ const router = { pathname: '' }
       class="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-16 pl-0.5"
     >
       <div
-        class="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block"
+        class="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block"
       ></div>
       <div
         class="absolute top-28 bottom-0 right-0 hidden w-px bg-slate-800 dark:block"

docs/components/ThemeSwitcher.vue

@@ -58,7 +58,7 @@ const colorMode = useColorMode()
             ]"
           >
             <div
-              class="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+              class="rounded-md bg-white p-1 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
             >
               <Component
                 :is="icon"

docs/components/content/Callout.vue

@@ -17,13 +17,13 @@ const styles = computed(() => {
       container:
         'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
       title: 'text-sky-900 dark:text-sky-400',
-      body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
+      body: 'text-sky-800 [--tw-prose-background:var(--color-sky-50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
     },
     warning: {
       container:
         'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
       title: 'text-amber-900 dark:text-amber-500',
-      body: 'text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300',
+      body: 'text-amber-800 [--tw-prose-underline:var(--color-amber-400)] [--tw-prose-background:var(--color-amber-50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-sky-700)] dark:prose-code:text-slate-300',
     },
   }[props.type]
 })

docs/components/content/QuickLink.vue

@@ -11,7 +11,7 @@ defineProps<{
     class="group relative rounded-xl border border-slate-200 dark:border-slate-800"
   >
     <div
-      class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
+      class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]"
     />
     <div class="relative overflow-hidden rounded-xl p-6">
       <slot name="icon" />