@innertia-solutions/innertia-nuxt 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to `@innertia-solutions/innertia-nuxt` are documented here.
+
+## [Unreleased]
+
+### BREAKING CHANGES
+
+#### apps → contexts rename
+
+Aligns frontend with innertia-laravel which already renamed the concept.
+
+**Config (`nuxt.config.ts` in your product):**
+```diff
+- innertia.apps: { backoffice: { ... }, technician: { ... } }
++ innertia.contexts: { backoffice: { ... }, technician: { ... } }
+```
+
+**Types:**
+```diff
+- import type { AppDefinition } from '@innertia-solutions/innertia-nuxt/app.config'
++ import type { ContextDefinition } from '@innertia-solutions/innertia-nuxt/app.config'
+
+- import type { AppMobileMode } from '@innertia-solutions/innertia-nuxt/app.config'
++ import type { ContextMobileMode } from '@innertia-solutions/innertia-nuxt/app.config'
+```
+
+**Composables:**
+```diff
+- const { current, all, accessible, canAccess } = useApp()
++ const { current, all, accessible, canAccess } = useContext()
+```
+
+`useApp()` has been removed. Use `useContext()` for all context/app logic. `useContext()` now also exposes: `contexts` (dict), `currentContext`, `availableContexts`, `switchContext()`, `confirmSwitch()`, `hasAccessToContext()`.
+
+**Login body field:**
+
+`performLogin()` now sends `context` instead of `app` in the POST body — matching what innertia-laravel now expects.

package/app.config.ts

@@ -2,12 +2,12 @@
 //
 //   appConfig: {
 //     innertia: {
-//       apps: { backoffice: {...}, technician: {...} },
+//       contexts: { backoffice: {...}, technician: {...} },
 //       mobile: { breakpoint: 1024 },
 //     },
 //   }
 //
-// Si el producto no declara `apps`, el feature de contextos queda inactivo
+// Si el producto no declara `contexts`, el feature de contextos queda inactivo
 // (middleware no redirige, picker no se muestra).
 export default defineAppConfig({
   innertia: {
@@ -121,11 +121,11 @@ export default defineAppConfig({
     },
 
     /**
-     * Declaración de "apps" (contextos) del producto.
-     * Cada app define un prefijo de URL que mapea a un contexto del backend
+     * Declaración de contextos del producto.
+     * Cada contexto define un prefijo de URL que mapea a un contexto del backend
      * (matching con `availableContexts` que devuelve `auth/me`).
      */
-    apps: {} as Record<string, AppDefinition>,
+    contexts: {} as Record<string, ContextDefinition>,
 
     /**
      * Política mobile global. Se aplica si una `app` no tiene `mobile.mode` propio.
@@ -144,7 +144,7 @@ export default defineAppConfig({
 
 export type InnertiaMode = 'saas' | 'app'
 
-export type AppMobileMode = 'allow' | 'block' | 'redirect'
+export type ContextMobileMode = 'allow' | 'block' | 'redirect'
 
 /** Color: nombre de paleta Tailwind o scale custom 50→950. */
 export type ColorScale = Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>>
@@ -175,8 +175,8 @@ export interface MenuItem {
   pattern?: string
 }
 
-export interface AppDefinition {
-  /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del app. */
+export interface ContextDefinition {
+  /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del contexto. */
   path: string
   /** Clave del contexto que matchea con `availableContexts` del backend. */
   context: string
@@ -186,13 +186,13 @@ export interface AppDefinition {
   description?: string
   /** Nombre del icono de @tabler/icons-vue (sin "Icon"). */
   icon?: string
-  /** Ruta de login del app. */
+  /** Ruta de login del contexto. */
   loginPath: string
   /** Ruta home (post-login). */
   home: string
   /** Política de uso en mobile. */
   mobile: {
-    mode: AppMobileMode
+    mode: ContextMobileMode
     /** Solo si mode === 'redirect' — adónde mandar desde mobile. */
     redirectTo?: string
   }

package/components/Auth/LoginForm.vue

@@ -99,7 +99,7 @@ async function handleOauth(provider: OAuthProvider) {
 
 // ── Cross-links a otros contextos mobile-friendly (opcional) ───────────────
 const { isMobile } = useMobileGuard()
-const { all } = useApp()
+const { all } = useContext()
 const otherMobileApps = computed(() => {
   if (!props.showCrossLinks) return []
   return all.value.filter((a: any) => a.path !== `/${props.context}` && a.mobile?.mode === 'allow')

package/components/DataPreview.vue

@@ -0,0 +1,323 @@
+<script setup>
+/**
+ * <DataPreview> — Panel de preview overlay compartido por Table.Standard y Tree.Standard.
+ *
+ * Encapsula:
+ *   - Panel absoluto a la derecha del container padre (position:relative)
+ *   - Resize por drag del handle vertical en el borde izquierdo
+ *   - Header con título + acciones + botones (abrir, eliminar, minimizar, cerrar)
+ *   - Tabs inferior cuando se pasa `historyEndpoint` (Datos / Bitácora)
+ *   - Cache de la fila previewada en sessionStorage cuando `cached`
+ *   - Chip flotante (Teleport to body) compartido vía `useDockedPreviews` Pinia store
+ *
+ * El parent es dueño de `row` (v-model) — DataPreview lo seteoa a null al cerrar.
+ * El parent también maneja el click fuera + ESC porque conoce su containerRef.
+ *
+ * Slots:
+ *   - header   ({ row, close }) — título del panel
+ *   - actions  ({ row, close }) — botones extra al lado de los built-in
+ *   - default  ({ row, close }) — body del preview
+ */
+
+import {
+  IconExternalLink, IconTrash, IconMinus, IconX, IconMaximize,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+  /** Activa el preview (típicamente derivado de !!slots.preview en el parent). */
+  enabled:           { type: Boolean, default: false },
+  /** Nombre único para cache + dock id. */
+  name:              { type: String,  default: 'default' },
+  /** Si true, persiste la fila previewada en sessionStorage entre navegaciones. */
+  cached:            { type: Boolean, default: false },
+  /** URL fija o (row) => url para botón "abrir externa". */
+  previewHref:       { type: [String, Function], default: null },
+  /** Muestra botón eliminar (emite @delete). */
+  previewDeletable:  { type: Boolean, default: false },
+  /** Porcentaje inicial de la tabla (0-100). */
+  splitRatio:        { type: Number,  default: 55 },
+  /** Endpoint del historial. Cuando se pasa, muestra tabs Datos/Bitácora. */
+  historyEndpoint:   { type: String,  default: null },
+  /** Container ref (HTMLElement) para medir el width al hacer resize. */
+  containerRef:      { type: Object,  default: null },
+})
+
+const emit = defineEmits(['delete'])
+
+// v-model:row → parent es dueño de la fila activa.
+const row = defineModel('row', { default: null })
+
+const previewFromCache = ref(false)
+const currentRatio     = ref(props.splitRatio)
+const panelRef         = ref(null)
+const previewTab       = ref('datos')
+
+const cacheKey = computed(() => `data-preview-${props.name}`)
+
+const resolvedPreviewHref = computed(() => {
+  if (!props.previewHref || !row.value) return null
+  return typeof props.previewHref === 'function'
+    ? props.previewHref(row.value)
+    : props.previewHref
+})
+
+const hasHistory = computed(() => !!props.historyEndpoint)
+
+// Resetear tab al cambiar de fila + reinit tooltips de Preline
+watch(row, async (r) => {
+  previewTab.value = 'datos'
+  if (r) {
+    await nextTick()
+    if (typeof window !== 'undefined') window.HSStaticMethods?.autoInit?.(['Tooltip'])
+  }
+})
+
+// Persistir fila en sessionStorage
+watch(row, (r) => {
+  if (!props.cached) return
+  if (r) sessionStorage.setItem(cacheKey.value, JSON.stringify(r))
+  else sessionStorage.removeItem(cacheKey.value)
+})
+
+const close = () => { row.value = null }
+
+const startResize = (e) => {
+  e.preventDefault()
+  const onMove = (ev) => {
+    const el = props.containerRef
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const ratio = ((ev.clientX - rect.left) / rect.width) * 100
+    currentRatio.value = Math.min(80, Math.max(25, ratio))
+  }
+  const onUp = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+
+// ─── Dock (chip flotante) ─────────────────────────────────────────────────────
+const {
+  docked,
+  dock, undock: undockItem,
+  activeDockId, activeDockRect,
+  collapseDock,
+} = useDockedPreviews()
+const route = useRoute()
+
+const minimize = () => {
+  if (!row.value) return
+  const label    = row.value.name ?? row.value.title ?? row.value.email ?? String(row.value.id)
+  const subtitle = row.value.email ?? row.value.description ?? null
+  dock({
+    id:        `${props.name}-${row.value.id}`,
+    label,
+    subtitle,
+    row:       { ...row.value },
+    tableName: props.name,
+    route:     route.path,
+  })
+  close()
+}
+
+const floatingItem = computed(() =>
+  activeDockId.value
+    ? docked.value.find(d => d.id === activeDockId.value && d.tableName === props.name) ?? null
+    : null
+)
+
+const floatingPanelStyle = computed(() => {
+  const rect   = activeDockRect.value
+  const panelW = 384
+  const bottom = 52
+  if (!rect || typeof window === 'undefined') return { bottom: bottom + 'px', right: '16px' }
+  const tabCenter = rect.left + rect.width / 2
+  let right = window.innerWidth - tabCenter - panelW / 2
+  right = Math.max(8, Math.min(right, window.innerWidth - panelW - 8))
+  return { bottom: bottom + 'px', right: right + 'px' }
+})
+
+const expandToFull = (item) => {
+  row.value = item.row
+  undockItem(item.id)
+}
+
+// Restore from cache on mount
+onMounted(async () => {
+  if (props.cached && props.enabled) {
+    try {
+      const raw = sessionStorage.getItem(cacheKey.value)
+      if (raw) {
+        previewFromCache.value = true
+        row.value = JSON.parse(raw)
+        await nextTick()
+        previewFromCache.value = false
+      }
+    } catch {}
+  }
+})
+
+defineExpose({ panelRef })
+</script>
+
+<template>
+  <!-- Panel overlay (absolute right, dentro del container del parent) -->
+  <Transition
+    :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+    :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+    :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
+    leave-active-class="transition ease-in duration-150"
+    leave-from-class="opacity-100 translate-x-0"
+    leave-to-class="opacity-0 translate-x-6"
+  >
+    <div
+      v-if="row && enabled"
+      ref="panelRef"
+      class="absolute top-0 right-0 bottom-0 z-30 flex flex-col bg-card border border-card-line rounded-card shadow-xl overflow-hidden"
+      :style="{ width: (100 - currentRatio) + '%' }"
+    >
+      <!-- Resize handle -->
+      <div
+        class="absolute left-1 top-1/2 -translate-y-1/2 h-12 w-1 cursor-col-resize rounded-full bg-border hover:bg-primary/50 transition-colors z-10"
+        @mousedown="startResize"
+      />
+
+      <!-- Header -->
+      <div class="shrink-0 flex items-center gap-3 px-5 py-4 border-b border-card-line">
+        <div class="flex-1 min-w-0">
+          <slot name="header" :row="row" :close="close" />
+        </div>
+
+        <div class="flex items-center gap-0.5 shrink-0">
+          <slot name="actions" :row="row" :close="close" />
+
+          <!-- Abrir externa -->
+          <div v-if="resolvedPreviewHref" class="hs-tooltip [--placement:top] inline-block">
+            <NuxtLink
+              :to="resolvedPreviewHref"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+            >
+              <IconExternalLink class="size-3.5" />
+            </NuxtLink>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Abrir</span>
+          </div>
+
+          <!-- Eliminar -->
+          <div v-if="previewDeletable" class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              @click.stop="emit('delete', row)"
+            >
+              <IconTrash class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Eliminar</span>
+          </div>
+
+          <!-- Minimizar -->
+          <div class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+              @click.stop="minimize"
+            >
+              <IconMinus class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Minimizar</span>
+          </div>
+
+          <!-- Cerrar -->
+          <div class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+              @click.stop="close"
+            >
+              <IconX class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Cerrar</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div class="flex-1 overflow-y-auto min-h-0">
+        <slot v-if="previewTab === 'datos'" :row="row" :close="close" />
+        <TablePreviewTimeline
+          v-else-if="previewTab === 'bitacora' && historyEndpoint"
+          :endpoint="historyEndpoint"
+        />
+      </div>
+
+      <!-- Tabs (cuando hay historyEndpoint) -->
+      <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+        <button
+          type="button"
+          @click="previewTab = 'datos'"
+          :class="[
+            'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
+            previewTab === 'datos'
+              ? 'border-t-card text-foreground'
+              : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+          ]"
+        >
+          Datos
+        </button>
+        <button
+          type="button"
+          @click="previewTab = 'bitacora'"
+          :class="[
+            'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
+            previewTab === 'bitacora'
+              ? 'border-t-card text-foreground'
+              : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+          ]"
+        >
+          Bitácora
+        </button>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- Floating chip (dock minimizado) — siempre teleportado a body -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 translate-y-4"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-4"
+    >
+      <div
+        v-if="floatingItem"
+        class="fixed z-[60] w-96 flex flex-col bg-card border border-card-line rounded-t-card shadow-2xl overflow-hidden"
+        :style="{ ...floatingPanelStyle, maxHeight: 'min(480px, calc(100vh - 60px))' }"
+      >
+        <div class="flex items-center gap-2 px-3 py-2.5 border-b border-card-line shrink-0 bg-surface select-none">
+          <span class="size-6 rounded-avatar bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground shrink-0">
+            {{ (floatingItem.label?.[0] ?? '?').toUpperCase() }}
+          </span>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-semibold text-foreground truncate leading-tight">{{ floatingItem.label }}</p>
+            <p v-if="floatingItem.subtitle" class="text-xs text-muted-foreground truncate">{{ floatingItem.subtitle }}</p>
+          </div>
+          <button type="button" title="Expandir" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="expandToFull(floatingItem)">
+            <IconMaximize class="size-3.5" />
+          </button>
+          <button type="button" title="Minimizar" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="collapseDock()">
+            <IconMinus class="size-3.5" />
+          </button>
+          <button type="button" title="Cerrar" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" @click.stop="undockItem(floatingItem.id)">
+            <IconX class="size-3.5" />
+          </button>
+        </div>
+        <div class="flex-1 overflow-y-auto min-h-0">
+          <slot :row="floatingItem.row" :close="() => undockItem(floatingItem.id)" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/DataTable.vue

@@ -436,7 +436,7 @@ const handleRowKeydown = (row, event) => {
                 type="checkbox"
                 :checked="isAllVisibleSelected"
                 @change="toggleSelectAll"
-                class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-blue-900 dark:bg-card border-card-line"
+                class="mx-2 shrink-0 border-gray-300 rounded-control text-blue-900 focus:ring-blue-900 dark:bg-card border-card-line"
               />
             </th>
             <th
@@ -538,7 +538,7 @@ const handleRowKeydown = (row, event) => {
       <!-- Empty overlays -->
       <div
         v-if="!loading && data.length === 0 && !search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-card"
       >
         <slot name="empty">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
@@ -547,7 +547,7 @@ const handleRowKeydown = (row, event) => {
 
       <div
         v-if="!loading && data.length === 0 && search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-card"
       >
         <slot name="empty-search">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
@@ -561,7 +561,7 @@ const handleRowKeydown = (row, event) => {
       <div v-if="loading" :class="gridClass">
         <div v-for="(_, index) in skeletonRows" :key="'grid-skeleton-' + index" class="animate-pulse">
           <slot name="grid-skeleton">
-            <div class="bg-card rounded-lg border border-card-line p-4">
+            <div class="bg-card rounded-card border border-card-line p-4">
               <div class="space-y-3">
                 <div class="h-4 bg-surface-1 rounded w-3/4"></div>
                 <div class="h-4 bg-surface-1 rounded w-1/2"></div>
@@ -583,7 +583,7 @@ const handleRowKeydown = (row, event) => {
           :checkable="checkable"
           :toggleRow="() => toggleRow(row)"
         >
-          <div class="bg-card rounded-lg border border-card-line p-4 hover:shadow-md transition-shadow relative">
+          <div class="bg-card rounded-card border border-card-line p-4 hover:shadow-md transition-shadow relative">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input
                 type="checkbox"
@@ -636,11 +636,11 @@ const handleRowKeydown = (row, event) => {
         <p class="text-sm text-foreground font-medium">{{ meta.total }} registros</p>
 
         <div v-if="isDataFromCache && cached" class="group relative flex items-center">
-          <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-lg cursor-help transition-colors hover:bg-emerald-500/20">
+          <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-badge cursor-help transition-colors hover:bg-emerald-500/20">
             <IconBolt class="size-3.5 fill-current" />
             <span class="text-[10px] font-bold uppercase tracking-wider">Instant</span>
           </div>
-          <div class="absolute bottom-full mb-2 left-0 hidden group-hover:block w-48 p-2.5 bg-slate-900 text-white text-[11px] leading-relaxed rounded-xl shadow-2xl z-50 animate-in fade-in zoom-in duration-200">
+          <div class="absolute bottom-full mb-2 left-0 hidden group-hover:block w-48 p-2.5 bg-slate-900 text-white text-[11px] leading-relaxed rounded-popover shadow-2xl z-50 animate-in fade-in zoom-in duration-200">
             <div class="font-bold mb-1 flex items-center gap-x-1.5 text-emerald-400">
               <IconBolt class="size-3" />
               Datos en Caché
@@ -659,7 +659,7 @@ const handleRowKeydown = (row, event) => {
             v-if="!isCustomPerPage"
             :value="perPage"
             @change="(e) => handlePerPageChange(e.target.value)"
-            class="bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
+            class="bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-control focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
           >
             <option :value="10">10</option>
             <option :value="25">25</option>
@@ -673,7 +673,7 @@ const handleRowKeydown = (row, event) => {
               v-model.number="perPage"
               min="1"
               max="500"
-              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
+              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-control focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
               @blur="perPage = perPage || 10"
             />
             <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
@@ -683,7 +683,7 @@ const handleRowKeydown = (row, event) => {
         <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-control text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page <= 1"
             @click="goToPreviousPage"
           >
@@ -692,13 +692,13 @@ const handleRowKeydown = (row, event) => {
             </svg>
           </button>
           <div class="flex items-center gap-x-1 mx-2">
-            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-lg bg-surface text-foreground">{{ meta.current_page }}</span>
+            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-control bg-surface text-foreground">{{ meta.current_page }}</span>
             <span class="text-[10px] font-bold text-muted-foreground uppercase mx-1">de</span>
             <span class="text-[10px] font-bold text-muted-foreground">{{ meta.last_page }}</span>
           </div>
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-control text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page >= meta.last_page"
             @click="goToNextPage"
           >