kmcom-nuxt-layers 4.0.1 → 5.0.1

package/layers/content/app/components/Portfolio/Detail.vue

@@ -48,7 +48,7 @@
         v-if="asPortfolio(item).image"
         :src="asPortfolio(item).image"
         :alt="item.title"
-        class="w-full rounded-lg mb-8"
+        class="mb-8 w-full rounded-lg"
       />
     </template>
 

package/layers/content/app/components/Portfolio/List.vue

@@ -56,7 +56,7 @@
           v-if="item.image"
           :src="item.image"
           :alt="item.title"
-          class="w-full h-48 object-cover rounded"
+          class="h-48 w-full rounded object-cover"
         />
         <template #footer>
           <div class="flex flex-wrap gap-1.5">

package/layers/content/app/components/Portfolio/Typography.vue

@@ -8,24 +8,24 @@
 
 <template>
   <div v-if="typography.length" class="space-y-6">
-    <h3 class="text-2xl font-semibold tracking-tight text-highlighted">Typography</h3>
+    <h3 class="text-highlighted text-2xl font-semibold tracking-tight">Typography</h3>
     <div class="mt-8 flex flex-col gap-24">
       <div v-for="font in typography" :key="font.name" class="flex flex-col gap-6">
         <div class="flex items-baseline justify-between gap-4">
-          <p class="font-name font-semibold text-highlighted tracking-tight truncate">
+          <p class="font-name text-highlighted truncate font-semibold tracking-tight">
             {{ font.name }}
           </p>
-          <p v-if="font.usage" class="text-sm text-muted shrink-0">{{ font.usage }}</p>
+          <p v-if="font.usage" class="text-muted shrink-0 text-sm">{{ font.usage }}</p>
         </div>
         <p class="font-sample text-muted tracking-wide">ABCDEFGHabcdefgh 0123456789</p>
         <div class="flex items-center gap-4">
-          <span class="text-xs font-mono text-muted uppercase tracking-widest opacity-50">
+          <span class="text-muted font-mono text-xs tracking-widest uppercase opacity-50">
             Weights
           </span>
           <span
             v-for="weight in font.weights"
             :key="weight"
-            class="text-xs font-mono text-muted uppercase tracking-widest"
+            class="text-muted font-mono text-xs tracking-widest uppercase"
           >
             {{ weight }}
           </span>

package/layers/content/app/components/content/Figure.vue

@@ -17,7 +17,7 @@
 <template>
   <figure class="my-6">
     <img :src :alt :width :height class="w-full rounded-lg" />
-    <figcaption v-if="caption" class="mt-2 text-center text-sm text-muted italic">
+    <figcaption v-if="caption" class="text-muted mt-2 text-center text-sm italic">
       {{ caption }}
     </figcaption>
   </figure>

package/layers/core/app/assets/css/layout.css

@@ -14,7 +14,7 @@
   hr {
     margin: 1rem 0;
     border: 0;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid oklch(84.52% 0 0deg);
   }
 
   img,

package/layers/core/app/components/DiagnosticsPage.vue

@@ -30,7 +30,7 @@
       <ClientOnly>
         <div class="space-y-8">
           <div class="text-center">
-            <h1 class="text-4xl font-bold mb-2">Core Layer Diagnostics</h1>
+            <h1 class="mb-2 text-4xl font-bold">Core Layer Diagnostics</h1>
             <p class="text-gray-500 dark:text-gray-400">Feature detection and system information</p>
           </div>
 
@@ -124,7 +124,7 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Type:</span>
+                <span class="w-24 font-medium">Type:</span>
                 <span v-if="isMobile" class="text-primary">Mobile</span>
                 <span v-else-if="isTablet" class="text-primary">Tablet</span>
                 <span v-else-if="isDesktop" class="text-primary">Desktop</span>
@@ -138,16 +138,16 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Status:</span>
+                <span class="w-24 font-medium">Status:</span>
                 <span v-if="isOnline" class="text-green-500">Online</span>
                 <span v-else class="text-red-500">Offline</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Type:</span>
+                <span class="w-24 font-medium">Type:</span>
                 <span>{{ effectiveType || 'unknown' }}</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Quality:</span>
+                <span class="w-24 font-medium">Quality:</span>
                 <span
                   :class="{
                     'text-green-500': connectionQuality === 'excellent',
@@ -160,13 +160,13 @@
                 </span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Speed:</span>
+                <span class="w-24 font-medium">Speed:</span>
                 <span v-if="isFast" class="text-green-500">Fast</span>
                 <span v-else-if="isSlow" class="text-red-500">Slow</span>
                 <span v-else>Normal</span>
               </div>
               <div v-if="saveData" class="flex items-center gap-2">
-                <span class="font-medium w-24">Data Saver:</span>
+                <span class="w-24 font-medium">Data Saver:</span>
                 <span class="text-yellow-500">Enabled</span>
               </div>
             </div>
@@ -178,16 +178,16 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Mode:</span>
-                <span class="uppercase text-primary">{{ mode }}</span>
+                <span class="w-24 font-medium">Mode:</span>
+                <span class="text-primary uppercase">{{ mode }}</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Environment:</span>
+                <span class="w-24 font-medium">Environment:</span>
                 <span v-if="isClient" class="text-primary">Client</span>
                 <span v-else-if="isServer" class="text-primary">Server</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Hydrated:</span>
+                <span class="w-24 font-medium">Hydrated:</span>
                 <span v-if="isHydrated" class="text-green-500">Yes</span>
                 <span v-else class="text-yellow-500">No</span>
               </div>
@@ -200,17 +200,17 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Installed:</span>
+                <span class="w-24 font-medium">Installed:</span>
                 <span v-if="isInstalled" class="text-green-500">Yes</span>
                 <span v-else class="text-gray-500">No</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Installable:</span>
+                <span class="w-24 font-medium">Installable:</span>
                 <span v-if="canInstall" class="text-green-500">Yes</span>
                 <span v-else class="text-gray-500">No</span>
               </div>
               <div v-if="needRefresh" class="flex items-center gap-2">
-                <span class="font-medium w-24">Update:</span>
+                <span class="w-24 font-medium">Update:</span>
                 <span class="text-yellow-500">Available</span>
               </div>
             </div>
@@ -218,7 +218,7 @@
         </div>
 
         <template #fallback>
-          <div class="text-center text-muted py-16">Loading diagnostics…</div>
+          <div class="text-muted py-16 text-center">Loading diagnostics…</div>
         </template>
       </ClientOnly>
     </UContainer>

package/layers/core/app/components/Element.test.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import Element from './Element.vue'
 

package/layers/core/app/components/ElementTw.test.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import ElementTw from './ElementTw.vue'
 

package/layers/core/app/components/ErrorBoundary.vue

@@ -61,25 +61,25 @@
     <template #error="{ error, clearError }">
       <slot name="error" :error :clear-error>
         <!-- Default error UI -->
-        <div class="rounded-lg border border-error bg-error/10 p-4">
+        <div class="border-error bg-error/10 rounded-lg border p-4">
           <div class="flex items-start gap-3">
             <!-- Error icon -->
             <span
-              class="iconify i-lucide:alert-circle mt-0.5 shrink-0 text-error"
+              class="iconify i-lucide:alert-circle text-error mt-0.5 shrink-0"
               aria-hidden="true"
             />
 
             <!-- Error content -->
             <div class="flex-1 space-y-2">
               <!-- Error message -->
-              <p class="text-sm font-medium text-error">
+              <p class="text-error text-sm font-medium">
                 {{ message }}
               </p>
 
               <!-- Error details (dev only) -->
               <details v-if="showDetails && import.meta.dev" class="text-xs">
-                <summary class="cursor-pointer text-muted">Show error details</summary>
-                <pre class="mt-2 overflow-x-auto rounded bg-elevated p-2">{{ error }}</pre>
+                <summary class="text-muted cursor-pointer">Show error details</summary>
+                <pre class="bg-elevated mt-2 overflow-x-auto rounded p-2">{{ error }}</pre>
               </details>
 
               <!-- Retry button -->

package/layers/core/app/composables/useElementGrid.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementGrid } from './useElementGrid'
 

package/layers/core/app/composables/useElementInteraction.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementInteraction } from './useElementInteraction'
 

package/layers/core/app/composables/useElementLayout.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementLayout } from './useElementLayout'
 

package/layers/core/app/composables/useElementSizing.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementSizing } from './useElementSizing'
 

package/layers/core/app/composables/useElementSurface.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementSurface } from './useElementSurface'
 

package/layers/core/app/composables/useLayoutAttrs.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useLayoutAttrs } from './useLayoutAttrs'
 

package/layers/core/app/error.vue

@@ -34,7 +34,7 @@
           <template #description>
             <div class="space-y-2">
               <p class="text-muted">{{ message }}</p>
-              <code v-if="error?.statusMessage" class="block rounded bg-elevated px-2 py-1 text-sm">
+              <code v-if="error?.statusMessage" class="bg-elevated block rounded px-2 py-1 text-sm">
                 {{ error.statusMessage }}
               </code>
             </div>

package/layers/core/app/pages/[...slug].vue

@@ -88,10 +88,10 @@
         <UEmpty :icon :title :description size="xl">
           <!-- Show attempted path -->
           <template v-if="config.showPath !== false" #description>
-            <p class="mb-2 text-muted">
+            <p class="text-muted mb-2">
               {{ description }}
             </p>
-            <code class="rounded bg-elevated px-2 py-1 text-sm">
+            <code class="bg-elevated rounded px-2 py-1 text-sm">
               {{ attemptedPath }}
             </code>
           </template>

package/layers/core/app/utils/browserInfo.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { getBrowserVersionParts, isBrowserAtLeast, parseBrowserInfo } from './browserInfo'
 

package/layers/core/app/utils/featureClasses.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { FeatureDetection } from '../types/detection'
 import { getFeatureClassNames } from './featureClasses'

package/layers/core/app/utils/scrollGuardClamp.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { isOverflowing, shouldExclude } from './scrollGuardClamp'
 

package/layers/core/app/utils/styleToTailwindClasses.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { styleToTailwindClasses } from './styleToTailwindClasses'
 

package/layers/data/forms/app/utils/contact-schema.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { contactSchema } from './contact-schema'
 

package/layers/data/forms/app/utils/fieldProps.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { FieldConfig } from '../types/fields'
 import {

package/layers/data/metadata/providers/comicvine/server/utils/metadata-comicvine/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { normaliseComicVineIssue, normaliseComicVineVolume } from './normalise'
 import type { ComicVineIssue, ComicVineVolume } from './types'

package/layers/data/metadata/providers/google-books/server/utils/metadata-google-books/client.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { googleBooksCoverUrl, googleBooksMediaType } from './client'
 

package/layers/data/metadata/providers/google-books/server/utils/metadata-google-books/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { googleBooksCoverUrl, googleBooksMediaType } from './client'
 import { normaliseGoogleBooksVolume } from './normalise'

package/layers/data/metadata/providers/openlibrary/server/utils/metadata-openlibrary/client.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { openLibraryCoverUrl } from './client'
 

package/layers/data/metadata/providers/openlibrary/server/utils/metadata-openlibrary/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { openLibraryCoverUrl } from './client'
 import {

package/layers/data/metadata/providers/themoviedb/server/utils/metadata-tmdb/client.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 vi.stubGlobal('useRuntimeConfig', () => ({
   metadataTmdb: {

package/layers/data/metadata/providers/themoviedb/server/utils/metadata-tmdb/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { tmdbImageUrl } from './client'
 import { normaliseTmdbMovie, normaliseTmdbSearchResult, normaliseTmdbTV } from './normalise'

package/layers/data/metadata/server/utils/metadata/cache.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { hashQuery, makeCacheKey } from './cache'
 

package/layers/data/metadata/server/utils/metadata/provider-registry.test.ts

@@ -1,5 +1,5 @@
 import type { MetadataProvider } from '#layers/metadata/shared/types'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { getProvider, getProviders, registerProvider } from './provider-registry'
 

package/layers/data/metadata/server/utils/metadata/search.test.ts

@@ -3,7 +3,7 @@ import type {
   MetadataSearchInput,
   MetadataSearchResult,
 } from '#layers/metadata/shared/types'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 
 import { hashQuery, makeCacheKey } from './cache'
 

package/layers/delivery/feeds/app/assets/css/feeds.css

@@ -17,42 +17,54 @@
 }
 
 .feed-badge-rss {
-  background-color: color-mix(in srgb, var(--color-orange-500, #f97316) 12%, transparent);
-  color: var(--color-orange-600, #ea580c);
+  background-color: color-mix(
+    in srgb,
+    var(--color-orange-500, oklch(70.49% 0.1867 47.6deg)) 12%,
+    transparent
+  );
+  color: var(--color-orange-600, oklch(64.61% 0.1943 41.12deg));
 }
 
 .feed-badge-atom {
-  background-color: color-mix(in srgb, var(--color-purple-500, #a855f7) 12%, transparent);
-  color: var(--color-purple-600, #9333ea);
+  background-color: color-mix(
+    in srgb,
+    var(--color-purple-500, oklch(62.68% 0.2325 303.9deg)) 12%,
+    transparent
+  );
+  color: var(--color-purple-600, oklch(55.75% 0.2525 302.32deg));
 }
 
 .feed-badge-json {
-  background-color: color-mix(in srgb, var(--color-yellow-500, #eab308) 12%, transparent);
-  color: var(--color-yellow-600, #ca8a04);
+  background-color: color-mix(
+    in srgb,
+    var(--color-yellow-500, oklch(79.52% 0.1617 86.05deg)) 12%,
+    transparent
+  );
+  color: var(--color-yellow-600, oklch(68.06% 0.1423 75.83deg));
 }
 
 @media (prefers-color-scheme: dark) {
   .feed-badge-rss {
-    color: var(--color-orange-400, #fb923c);
+    color: var(--color-orange-400, oklch(75.76% 0.159 55.93deg));
   }
 
   .feed-badge-atom {
-    color: var(--color-purple-400, #c084fc);
+    color: var(--color-purple-400, oklch(72.17% 0.1767 305.5deg));
   }
 
   .feed-badge-json {
-    color: var(--color-yellow-400, #facc15);
+    color: var(--color-yellow-400, oklch(86.06% 0.1731 91.94deg));
   }
 }
 
 /* Feed preview code block — used in playground and consuming apps */
 .feed-preview {
   border-radius: var(--ui-radius, 0.375rem);
-  background-color: var(--color-gray-950, #030712);
+  background-color: var(--color-gray-950, oklch(12.96% 0.0274 261.69deg));
   padding: 1rem;
   max-height: 24rem;
   overflow: auto;
-  color: var(--color-gray-100, #f3f4f6);
+  color: var(--color-gray-100, oklch(96.7% 0.0029 264.54deg));
   font-size: 0.75rem;
   line-height: 1.6;
   font-family: var(--font-mono, ui-monospace, monospace);

package/layers/delivery/feeds/app/components/Feeds/Index.vue

@@ -25,10 +25,10 @@
   >
     <div class="pointer-events-none absolute inset-0">
       <div
-        class="absolute -right-20 top-0 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
+        class="absolute top-0 -right-20 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
       />
       <div
-        class="absolute -left-20 bottom-0 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
+        class="absolute bottom-0 -left-20 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
       />
       <div
         class="absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-orange-400/35 to-transparent"
@@ -39,7 +39,7 @@
       <div class="feeds-split grid gap-6">
         <div class="space-y-6">
           <div
-            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-amber-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
+            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold tracking-[0.35em] text-amber-700 uppercase shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
           >
             <UIcon name="i-lucide-rss" class="text-sm" />
             Feeds layer
@@ -63,7 +63,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Default
               </p>
@@ -79,7 +79,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Exposed
               </p>
@@ -95,7 +95,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Limit
               </p>
@@ -113,7 +113,7 @@
             class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
           >
             <span
-              class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              class="text-xs font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
             >
               Site
             </span>
@@ -134,7 +134,7 @@
         >
           <div class="flex items-center justify-between gap-3">
             <p
-              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
             >
               Global routes
             </p>
@@ -162,7 +162,7 @@
         <div class="flex flex-wrap items-end justify-between gap-4">
           <div>
             <p
-              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
             >
               Collection routes
             </p>
@@ -190,7 +190,7 @@
             >
               <div>
                 <p
-                  class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+                  class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
                 >
                   Collection
                 </p>

package/layers/delivery/feeds/app/components/Feeds/RouteCard.vue

@@ -50,7 +50,7 @@
   <UCard
     :to="route.path"
     :ui="{ body: 'p-0' }"
-    class="group relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700 @container"
+    class="group @container relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
   >
     <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
     <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">