adata-ui 2.1.40 → 2.1.41-beta.1

package/components/elements/curve-block-v2/ACurveBlockV2.vue

@@ -1,33 +1,31 @@
 <script setup lang="ts">
 import { NuxtLinkLocale } from '#components'
-import { computed } from 'vue'
 
 // Same logic/props as ACurveBlock — only the visual design differs.
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   icon: Component
   title: string
   description: string
   to?: string
-  /** Accent color as a hex code, e.g. "#068dff". */
   color?: string
+  tint?: string
+  forceActive?: boolean
 }>(), {
-  color: '#068dff',
+  color: 'var(--color-icon-brand)',
+  tint: undefined,
+  forceActive: true,
 })
-
-const bg = computed(() => `${props.color}1A`) // ~10% opacity в hex
 </script>
 
 <template>
-  <component
-    :is="to ? NuxtLinkLocale : 'button'"
+  <nuxt-link-locale
     :to="to"
-    :style="{ '--cb-color': color, '--cb-bg': bg }"
-    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-gray-100 bg-white p-6 text-left transition-all duration-200 hover:-translate-y-1 hover:border-gray-300 hover:shadow-lg dark:border-gray-700 dark:bg-gray-800"
-    :class="{ 'active-item': !to }"
+    :style="{ '--cb-color': color, '--cb-tint': tint }"
+    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left"
+    :class="{ 'active-item': !to && forceActive }"
     active-class="active-item"
   >
-    <!-- arrow, top-right -->
-    <div class="arrow-icon absolute right-4 top-4 flex size-7 items-center justify-center rounded-full p-2  bg-[#068dff]/10 text-[#068dff]">
+    <div class="arrow-icon absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-canvas p-2 text-secondary transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
       <svg
         class="size-2"
         viewBox="16 16 16 16"
@@ -43,7 +41,6 @@ const bg = computed(() => `${props.color}1A`) // ~10% opacity в hex
       </svg>
     </div>
 
-    <!-- icon -->
     <div class="icon-item w-fit rounded-xl p-3">
       <component
         :is="icon"
@@ -52,34 +49,72 @@ const bg = computed(() => `${props.color}1A`) // ~10% opacity в hex
     </div>
 
     <div class="flex flex-col gap-2 pr-6">
-      <p class="title text-base font-semibold text-deepblue-900 dark:text-white">
+      <p class="title text-h5 text-primary transition-colors duration-200">
         {{ title }}
       </p>
-      <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-300">
+      <p class="text-body-md leading-relaxed text-quaternary">
         {{ description }}
       </p>
     </div>
-  </component>
+  </nuxt-link-locale>
 </template>
 
-<style lang="scss" scoped>
-/* icon uses the card's accent color at 10% bg + full-color glyph */
+<style scoped>
+.curve-block-v2 {
+  --cb-fill: var(--cb-tint, color-mix(in srgb, var(--cb-color) 10%, transparent));
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
 .icon-item {
-  background-color: var(--cb-bg);
+  background-color: var(--cb-fill);
+  color: var(--cb-color);
+}
+
+.curve-block-v2:hover {
+  transform: translateY(-4px);
+  border-color: var(--cb-color);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.curve-block-v2:hover .title,
+.curve-block-v2:hover .arrow-icon {
   color: var(--cb-color);
 }
 
-/* active state (route match, or forced when there is no `to`) */
+.curve-block-v2:hover .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
 .active-item {
   border-color: var(--cb-color);
-  background-color: var(--cb-bg);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.active-item:hover {
+  transform: none;
 }
+
 .active-item .title,
 .active-item .arrow-icon {
   color: var(--cb-color);
 }
-.active-item .icon-item {
-  background-color: var(--cb-color);
-  color: #fff;
+
+.active-item .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .curve-block-v2,
+  .curve-block-v2 .title,
+  .curve-block-v2 .arrow-icon {
+    transition: none;
+  }
+
+  .curve-block-v2:hover {
+    transform: none;
+  }
 }
 </style>

package/components/elements/digit-badge/ADigitBadge.vue

@@ -27,8 +27,8 @@ const formattedValue = computed(() => {
 })
 const classes = computed(() =>
   [
-    props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
-    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
+    props.disabled ? 'bg-action-disabled text-action-disabled-fg' : typeSwitchValues[props.view][props.type],
+    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-hidden',
     sizeSwitchValues[props.size],
     props.value && props.value.toString().length > 1 ? 'w-auto' : '',
   ])
@@ -48,24 +48,25 @@ type SizeSwitchValues = {
 
 const typeSwitchValues: ViewType = {
   default: {
-    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
-    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
-    warning: 'bg-yellow-400 text-white dark:text-gray-900',
-    gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
-    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900',
+    primary: 'bg-action-primary text-action-primary-fg',
+    /* осознанно константный text-white: белая цифра на цветных solid-фонах в обеих темах */
+    success: 'bg-success text-white',
+    danger: 'bg-danger text-white',
+    warning: 'bg-warning text-white',
+    gray: 'bg-muted text-secondary',
+    orange: 'bg-warning text-white',
   },
   inverted: {
-    primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
-    success: 'bg-white text-green-500 dark:text-green-400 dark:bg-gray-900',
-    danger: 'bg-white text-red-500 dark:text-red-400 dark:bg-gray-900',
-    warning: 'bg-white text-yellow-400 dark:bg-gray-900',
-    gray: 'bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900',
+    primary: 'bg-main text-brand',
+    success: 'bg-main text-success',
+    danger: 'bg-main text-danger',
+    warning: 'bg-main text-warning',
+    gray: 'bg-main text-secondary',
+    orange: 'bg-main text-primary',
   },
   transparent: {
-    success: 'bg-green-500/20 text-green-500',
-    danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
+    success: 'bg-success-subtle text-success',
+    danger: 'bg-danger-subtle text-danger',
   },
 }
 

package/components/elements/empty-box/empty-box-V2.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import EmptyBan from '#adata-ui/illustrations/empty-ban.vue'
+
+interface Props {
+  icon: Component
+  title?: string
+  subtitle?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="flex min-h-[220px] flex-col items-center justify-center gap-4 p-6 text-center md:p-10"
+  >
+    <!-- Ореол -->
+    <div class="relative grid place-items-center">
+      <!-- свечение -->
+      <span
+        aria-hidden="true"
+        class="pointer-events-none absolute size-[130px] rounded-full bg-[radial-gradient(circle,var(--color-brand-500)/15%,transparent_70%)]"
+      />
+
+      <!-- пульсирующее кольцо -->
+      <span
+        aria-hidden="true"
+        class="halo-ring absolute size-[72px] rounded-full border border-brand-500/20 motion-reduce:animate-none"
+      />
+
+      <!-- иконка -->
+      <div
+        class="relative grid size-[72px] place-items-center rounded-full border border-brand-500/20 bg-brand-500/5 text-brand-500"
+      >
+        <component
+          :is="icon"
+          class="size-[30px]"
+          :stroke-width="2"
+          aria-hidden="true"
+        />
+
+        <!-- нет данных -->
+        <span
+          class="absolute -bottom-1.5 -right-1.5 grid size-[26px] place-items-center rounded-full border border-default bg-main text-icon-default shadow-sm"
+        >
+          <empty-ban class="size-3.5" />
+        </span>
+      </div>
+    </div>
+
+    <!-- текст -->
+    <div class="flex flex-col items-center gap-2">
+      <h3 class="font-semibold text-primary">
+        {{ title }}
+      </h3>
+
+      <p
+        v-if="subtitle"
+        class="mt-1 text-secondary"
+      >
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.halo-ring {
+  animation: halo-pulse 3.2s ease-out infinite;
+}
+
+@keyframes halo-pulse {
+  0% {
+    transform: scale(0.72);
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: scale(1.16);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .halo-ring {
+    animation: none;
+  }
+}
+</style>

package/components/elements/error-template/index.vue

@@ -1,48 +1,116 @@
 <script setup lang="ts">
-import type { ErrorTemplateData } from './types'
+import { AIconArrowLeft, AIconHome } from '#components'
 
 interface Props {
-  error: ErrorTemplateData
+  statusCode: number
 }
+const props = defineProps<Props>()
 
-defineProps<Props>()
+const { t } = useI18n()
+const localePath = useLocalePath()
+const router = useRouter()
+
+const errorTitle = computed(() => t(`errorPage.${props.statusCode}.title`))
+const errorSubTitle = computed(() => t(`errorPage.${props.statusCode}.subTitle`))
+
+function goToMainPage() {
+  return navigateTo(`${localePath('/')}`, { external: true })
+}
+
+function goBack() {
+  if (import.meta.client && window.history.length > 1) {
+    router.back()
+  }
+  else {
+    return navigateTo(`${localePath('/')}`, { external: true })
+  }
+}
 </script>
 
 <template>
-  <div class="flex items-center justify-center gap-14">
-    <slot name="icon">
-      <div class="hidden lg:block max-w-[600px]">
-        <img
-          :src="error.icon"
-          class="hidden lg:block"
-          alt="error-icon"
+  <div class="relative flex min-h-screen flex-col items-center justify-center gap-6 px-4 text-center">
+    <div class="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center">
+      <div class="error-gradient" />
+    </div>
+
+    <p class="text-overline text-secondary uppercase tracking-widest">
+      {{ t('errorPage.error') }} {{ statusCode }}
+    </p>
+    <p class="bignum text-[90px] leading-none md:text-[210px]">
+      {{ statusCode }}
+    </p>
+    <h1 class="text-h2 md:text-display-lg">
+      {{ errorTitle }}
+    </h1>
+    <h2 class="text-body-md md:text-body-lg text-secondary max-w-[560px]">
+      {{ errorSubTitle }}
+    </h2>
+    <slot name="button">
+      <div class="flex w-full flex-col gap-3 md:w-fit md:flex-row md:gap-4">
+        <a-button-v2
+          :icon="AIconHome"
+          size="lg"
+          rounded="md"
+          block
+          @click="goToMainPage"
         >
+          {{ t('actions.goToMainPage') }}
+        </a-button-v2>
+        <a-button-v2
+          :icon="AIconArrowLeft"
+          view="outline"
+          color="gray"
+          size="lg"
+          rounded="md"
+          block
+          @click="goBack"
+        >
+          {{ t('actions.back') }}
+        </a-button-v2>
       </div>
     </slot>
-    <div class="flex min-h-screen flex-col lg:min-h-0">
-      <div class="flex-1 px-4 py-8 lg:p-0">
-        <slot name="status">
-          <p class="mb-6 text-4xl font-bold">
-            {{ error.statusCode }}
-          </p>
-        </slot>
-        <slot name="title">
-          <h2 class="lg:heading-03 text-2xl font-bold ">
-            {{ error.title }}
-          </h2>
-        </slot>
-        <slot
-          name="content"
-          :data="error"
-        />
-      </div>
-      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
-        <slot name="default" />
-      </div>
-    </div>
   </div>
 </template>
 
 <style scoped>
+.error-gradient {
+  width: 760px;
+  height: 520px;
+  max-width: 90vw;
+  background: color-mix(in srgb, var(--color-brand-500) 18%, transparent);
+  filter: blur(80px);
+  border-radius: 50%;
+}
+
+.dark .error-gradient {
+  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
+  filter: blur(130px);
+}
+
+.bignum {
+  position: relative;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 0%,
+    color-mix(in srgb, var(--color-brand-500) 50%, transparent) 50%,
+    color-mix(in srgb, var(--color-brand-500) 12%, transparent) 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
 
+.dark .bignum {
+  background: linear-gradient(
+    180deg,
+    var(--color-brand-400) 0%,
+    var(--color-brand-400) 50%,
+    color-mix(in srgb, var(--color-brand-400) 28%, transparent) 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+}
 </style>

package/components/elements/feature-description/AFeatureDescription.vue

@@ -50,30 +50,30 @@ onUnmounted(() => clearTimer())
   >
     <div
       v-if="selected === idx"
-      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
+      class="absolute left-0 top-0 z-20 h-full w-[2px] rounded-full bg-brand"
       :class="{ 'fill-animation': selected === idx }"
     />
 
     <div
-      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
+      class="absolute left-0 top-0 z-10 h-full w-[2px] rounded-full bg-(--border-color-strong)/50"
     />
 
     <div class="flex items-center gap-2 relative z-10">
       <div
         :class="[
           'transition-all duration-300 ease-in-out',
-          selected === idx ? 'rounded-sm bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
+          selected === idx ? 'rounded-sm bg-action-primary p-2 icon-bg' : 'size-fit'
         ]"
       >
         <component
           :is="item.icon"
           class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
-          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
+          :class="selected === idx ? 'text-action-primary-fg' : 'text-quaternary'"
         />
       </div>
       <p
-        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
-        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
+        class="text-body-lg-strong lg:text-h3 transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? '' : 'text-quaternary'"
       >
         {{ item.title }}
       </p>
@@ -88,7 +88,7 @@ onUnmounted(() => clearTimer())
       <div
         v-if="selected === idx"
       >
-        <p class="text-xs lg:text-sm pt-3">
+        <p class="text-body-sm lg:text-body-md pt-3">
           {{ item.description }}
         </p>
       </div>
@@ -98,7 +98,7 @@ onUnmounted(() => clearTimer())
 
 <style lang="scss" scoped>
 .icon-bg {
-  box-shadow: -4px 4px 0px 0px #007AFF1A;
+  box-shadow: -4px 4px 0 0 color-mix(in srgb, var(--background-color-brand) 10%, transparent);
 }
 
 .fill-animation {

package/components/elements/illustrations/noAccess.vue

@@ -45,7 +45,7 @@ function goAuth() {
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4 text-center text-sm">
+  <div class="flex flex-col items-center gap-4 text-center text-body-md">
     <div v-if="!noIll">
       <slot name="illustration">
         <a-ill-door :class="illClass" />

package/components/elements/infinite-carousel/AInfiniteCarousel.vue

@@ -1,10 +1,31 @@
 <script setup lang="ts">
-
+/* fade: gradient — краевые градиенты на bg-main (историческое поведение,
+   верно только когда карусель лежит на основной поверхности);
+   mask — краевая маска, не зависящая от фона под каруселью. */
+withDefaults(defineProps<{
+  duration?: number
+  pauseOnHover?: boolean
+  fade?: 'gradient' | 'mask' | 'none'
+}>(), {
+  duration: 25,
+  pauseOnHover: false,
+  fade: 'gradient',
+})
 </script>
 
 <template>
-  <div class="carousel overflow-hidden w-full relative">
-    <div class="flex w-max animate-scroll">
+  <div
+    class="carousel relative w-full overflow-hidden"
+    :class="[
+      fade === 'gradient' ? 'carousel--fade-gradient' : '',
+      fade === 'mask' ? 'carousel--fade-mask' : '',
+      pauseOnHover ? 'carousel--pausable' : '',
+    ]"
+  >
+    <div
+      class="animate-scroll flex w-max"
+      :style="{ animationDuration: `${duration}s` }"
+    >
       <div
         v-for="i in 2"
         :key="i"
@@ -16,17 +37,22 @@
   </div>
 </template>
 
-<style lang="scss">
+<style scoped>
 @keyframes scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
 }
+
 .animate-scroll {
   animation: scroll 25s linear infinite;
 }
 
-.carousel:before,
-.carousel:after {
+.carousel--pausable:hover .animate-scroll {
+  animation-play-state: paused;
+}
+
+.carousel--fade-gradient:before,
+.carousel--fade-gradient:after {
   position: absolute;
   top: 0;
   width: 120px;
@@ -35,23 +61,25 @@
   z-index: 2;
 }
 
-.carousel:before {
+.carousel--fade-gradient:before {
   left: 0;
-  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
+  background: linear-gradient(to left, transparent, var(--background-color-main));
 }
 
-.carousel:after {
+.carousel--fade-gradient:after {
   right: 0;
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
+  background: linear-gradient(to right, transparent, var(--background-color-main));
 }
 
-.dark {
-  .carousel:before {
-    background: linear-gradient(to left, rgba(38, 40, 43, 0), #161617);
-  }
+/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
+   исключение из запрета сырых hex). */
+.carousel--fade-mask {
+  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
+}
 
-  .carousel:after {
-    background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll {
+    animation: none;
   }
 }
 </style>

package/components/elements/leave-note/ALeaveNote.vue

@@ -54,13 +54,13 @@ defineExpose({
 
 <template>
   <div class="flex flex-col items-start rounded-sm">
-    <p class="text-sm font-semibold mb-4">
+    <p class="text-body-md-strong mb-4">
       {{ t('forms.leaveNote.title') }}
     </p>
     <a-textarea
       v-model="note"
       class="min-h-[120px]"
-      color-classes="bg-deepblue-900/5 outline outline-1 outline-gray-200 dark:outline-gray-600 dark:bg-gray-200/5 !rounded-[10px]"
+      color-classes="bg-muted outline outline-1 outline-(--border-color-default) !rounded-[10px]"
       size="sm"
       resizeable="y"
       data-test-id="favorites-notes-textarea"

package/components/elements/pagination/APagination.vue

@@ -35,17 +35,17 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         v-if="showFirstPageIndex"
         :class="[
           defaultClasses,
-          { 'bg-blue-700 text-white hover:bg-blue-900': modelValue === 1 },
+          { 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover': modelValue === 1 },
           !!activeClasses && 1 === modelValue ? activeClasses : ''
         ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
         @click="modelValue = 1"
       >
         <double-chevron-right class="rotate-180 text-base" />
       </li>
       <li
         v-show="prevPage"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:text-white"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
         @click="modelValue -= 1"
       >
         <a-icon-chevron-left />
@@ -56,7 +56,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         :key="page"
         :class="[
           defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
         ]"
         @click="modelValue = page"
       >
@@ -66,7 +66,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
       <li
         :class="[
           defaultClasses,
-          'bg-blue-700 text-white hover:bg-blue-900',
+          'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover',
           'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition'
         ]"
       >
@@ -78,7 +78,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         :key="idx"
         :class="[
           defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
         ]"
         @click="modelValue = n"
       >
@@ -88,7 +88,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
       <li
         v-show="nextPage"
         :class="{ disabled: disabled }"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
         @click="modelValue += 1"
       >
         <a-icon-chevron-right />
@@ -100,7 +100,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
           { disabled: disabled },
           !!activeClasses && lastPage === modelValue ? activeClasses : ''
         ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
         @click="modelValue = lastPage"
       >
         <double-chevron-right class="text-base" />