adata-ui 2.1.40 → 2.1.41-beta.1

package/components/elements/slider/ASlider.vue

@@ -126,6 +126,7 @@ defineExpose({ next, prev, goTo, index, count })
       class="absolute bottom-0 left-1/2 z-10 flex -translate-x-1/2 gap-2"
       role="tablist"
     >
+      <!-- пастельный бренд-трек: семантического токена нет, dark-компенсация вручную -->
       <button
         v-for="(_, i) in count"
         :key="i"
@@ -133,14 +134,14 @@ defineExpose({ next, prev, goTo, index, count })
         role="tab"
         :aria-selected="index === i"
         :aria-label="`Слайд ${i + 1}`"
-        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-blue-200 transition-all duration-300 dark:bg-blue-900/40"
+        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-brand-200 dark:bg-brand-500/30 transition-all duration-300"
         :class="index === i ? 'w-[30px]' : 'w-[20px]'"
         @click="goTo(i)"
       >
         <span
           v-if="index === i && shouldRun"
           :key="tick"
-          class="a-slider-progress absolute inset-0 rounded-full bg-blue-500 dark:bg-blue-400"
+          class="a-slider-progress absolute inset-0 rounded-full bg-brand"
           :style="timingStyle"
         />
       </button>

package/components/elements/slider/ASliderV2.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts" generic="T">
+import { useElementHover } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  /** Slides. The slider only uses their count and the current one. */
+  slides: readonly T[]
+  /** Time each slide stays active, in ms. Also the progress-bar duration. */
+  interval?: number
+  /** Advance automatically. */
+  autoplay?: boolean
+  /** Freeze autoplay while the cursor is over the slider. */
+  pauseOnHover?: boolean
+  /** Render the built-in progress indicators. */
+  indicators?: boolean
+  /**
+   * CSS transition name for the built-in slide swap, e.g. `"fade"`.
+   * The slider only passes the name through to `<transition>` — the CSS
+   * itself stays with the slide. Without it slides swap instantly.
+   * Ignored when the default slot is used: taking over the rendering means
+   * taking over the transition too.
+   */
+  transition?: string
+  /** Transition mode, as on Vue's `<transition>`. */
+  transitionMode?: 'out-in' | 'in-out' | 'default'
+  /** Explicit transition duration in ms, as on Vue's `<transition>`. */
+  transitionDuration?: number | { enter: number, leave: number }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  indicators: true,
+  transition: undefined,
+  transitionMode: 'out-in',
+  transitionDuration: undefined,
+})
+
+/** Active slide index — usable as `v-model:index`. */
+const index = defineModel<number>('index', { default: 0 })
+
+const root = ref<HTMLElement>()
+const count = computed(() => props.slides.length)
+
+/* ---- navigation (always wraps around) ---- */
+function goTo(to: number) {
+  if (count.value === 0)
+    return
+  index.value = ((to % count.value) + count.value) % count.value
+}
+function next() {
+  goTo(index.value + 1)
+}
+function prev() {
+  goTo(index.value - 1)
+}
+
+/* ---- autoplay ----
+ * Timing is driven by an invisible "clock" element's CSS animation.
+ * `animation-play-state: paused` freezes both the clock and the visible
+ * progress bar in one place, so the pause stays perfectly in sync and
+ * resumes from where it stopped — no JS timers to keep aligned. */
+
+// Bumping this key remounts the clock/progress element, restarting the timing.
+// Watched rather than bumped inside `goTo`, so writing to `v-model:index`
+// from the outside restarts the timing too.
+const tick = ref(0)
+watch(index, () => {
+  tick.value++
+})
+
+// The slide list may have shrunk under the current index.
+watch(count, (n) => {
+  if (index.value >= n)
+    goTo(0)
+})
+
+const hovered = useElementHover(root)
+
+const running = computed(() => props.autoplay && count.value > 1)
+const timingStyle = computed(() => ({
+  animationDuration: `${props.interval}ms`,
+  animationPlayState: props.pauseOnHover && hovered.value ? 'paused' : 'running',
+}))
+
+defineExpose({ next, prev, goTo })
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="relative overflow-hidden"
+    role="group"
+    aria-roledescription="carousel"
+  >
+    <!-- Invisible clock: fires `next` when a slide's time elapses. -->
+    <div
+      v-if="running"
+      :key="tick"
+      class="a-slider-clock"
+      :style="timingStyle"
+      @animationend="next"
+    />
+
+    <!-- Rendered once, for the active slide. Markup and animations are the
+         consumer's job — the slider only says which slide is active.
+         Without a slot the slider still works on its own: it renders the
+         active slide as-is, optionally wrapped in a named transition. -->
+    <slot
+      v-if="$slots.default"
+      :slide="slides[index]"
+      :index="index"
+      :count="count"
+      :go-to="goTo"
+    />
+
+    <!-- БЕЗ `appear` — это принципиально. Под SSR `<transition appear>`
+         сериализует содержимое в литеральный `<template>`: браузер такой узел
+         не рендерит, слайдер стоит пустым до гидратации, а сама гидратация
+         падает с mismatch (проверено на Nuxt 3.18 / Vue 3.5).
+         Вход первого слайда всё равно задаётся обычной CSS-анимацией на
+         монтировании — `appear` при SSR-гидратации Vue и так не проигрывает. -->
+    <transition
+      v-else-if="transition && slides[index]"
+      :name="transition"
+      :mode="transitionMode"
+      :duration="transitionDuration"
+    >
+      <component :is="slides[index]" :key="index" />
+    </transition>
+
+    <component
+      :is="slides[index]"
+      v-else-if="slides[index]"
+      :key="index"
+    />
+
+    <div
+      v-if="indicators && count > 1"
+      class="absolute bottom-0 left-1/2 z-10 flex -translate-x-1/2 gap-2"
+    >
+      <!-- пастельный бренд-трек: семантического токена нет, dark-компенсация вручную -->
+      <button
+        v-for="(_, i) in count"
+        :key="i"
+        type="button"
+        :aria-label="`Слайд ${i + 1}`"
+        :aria-current="index === i"
+        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-brand-200 transition-all duration-300 dark:bg-brand-500/30"
+        :class="index === i ? 'w-[30px]' : 'w-[20px]'"
+        @click="goTo(i)"
+      >
+        <span
+          v-if="index === i && running"
+          :key="tick"
+          class="a-slider-progress absolute inset-0 rounded-full bg-brand"
+          :style="timingStyle"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.a-slider-clock {
+  position: absolute;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.a-slider-clock,
+.a-slider-progress {
+  animation: a-slider-run linear forwards;
+}
+
+@keyframes a-slider-run {
+  from { width: 0; }
+  to   { width: 100%; }
+}
+</style>

package/components/elements/star-rating/AStarRating.vue

@@ -114,7 +114,7 @@ createStars(shouldRound.value)
     <div class="w-full flex items-center gap-2">
       <span
         v-if="ratingPlacement === 'left' && !hideValue"
-        class="text-gray-600 dark:text-gray-300 mt-px"
+        class="text-quaternary mt-px"
         :style="{fontSize: `${fontSize}px`}"
       >
         {{ modelValue }}
@@ -136,7 +136,7 @@ createStars(shouldRound.value)
       </div>
       <span
         v-if="ratingPlacement === 'right' && !hideValue"
-        class="text-sm text-gray-600 dark:text-gray-300 mt-px"
+        class="text-body-md text-quaternary mt-px"
       >
         {{ modelValue }}
       </span>

package/components/elements/status-badge/AStatusBadge.vue

@@ -34,37 +34,41 @@ const props = withDefaults(defineProps<Props>(), {
 
 const typeSwitchValues: ViewType = {
   default: {
-    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
-    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
-    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
-    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
-    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
+    primary: 'bg-brand text-white border-transparent',
+    success: 'bg-success text-white border-transparent',
+    danger: 'bg-danger text-white border-transparent',
+    warning: 'bg-warning text-white border-transparent',
+    /* solid-серый бейдж: токена нет, константный примитив */
+    gray: 'bg-gray-600 text-white border-transparent',
   },
   inverted: {
-    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
-    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
-    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
-    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
-    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
+    primary: 'bg-brand-subtle text-brand border-transparent',
+    success: 'bg-success-subtle text-success border-transparent',
+    danger: 'bg-danger-subtle text-danger border-transparent',
+    warning: 'bg-warning-subtle text-warning border-transparent',
+    gray: 'bg-muted text-quaternary border-transparent',
   },
+  /* бордеры: для brand/green/yellow пастельных токенов нет — примитивы осознанно */
   transparent: {
-    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
-    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
-    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
-    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
-    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+    primary: 'bg-main border-brand-200 text-brand dark:bg-transparent',
+    success: 'bg-main border-green-300 text-success dark:bg-transparent',
+    danger: 'bg-main border-red text-danger dark:bg-transparent',
+    warning: 'bg-main border-yellow-300 text-warning dark:bg-transparent',
+    gray: 'bg-main border-strong text-quaternary dark:bg-transparent',
   },
+  /* тинты и пастельные бордеры subtle-вью: токенов нет — примитивы + dark:-пары осознанно */
   subtle: {
-    primary: 'bg-[#068DFF]/5 border-[#B3DCFF] text-[#068DFF] dark:bg-blue-500/10 dark:border-[#068DFF]/40 dark:text-blue-400',
-    success: 'bg-[#00A63E]/5 border-[#7BF1A8] text-[#00A63E] dark:bg-green-500/10 dark:border-[#00A63E]/40 dark:text-green-400',
-    danger: 'bg-[#E7000B]/5 border-[#FFA2A2] text-[#E7000B] dark:bg-red-500/10 dark:border-[#E7000B]/40 dark:text-red-400',
-    warning: 'bg-[#E17100]/5 border-[#FFD230] text-[#E17100] dark:bg-yellow-500/10 dark:border-[#E17100]/40 dark:text-orange-400',
-    gray: 'bg-[#4A5565]/5 border-[#D1D5DC] text-[#4A5565] dark:bg-gray-500/10 dark:border-[#4A5565]/40 dark:text-gray-300',
+    primary: 'bg-brand-500/5 border-brand-200 text-brand dark:bg-brand-500/10 dark:border-brand-500/40',
+    success: 'bg-green-600/5 border-green-300 text-success dark:bg-green-500/10 dark:border-green-600/40',
+    danger: 'bg-red-600/5 border-red text-danger dark:bg-red-500/10 dark:border-red-600/40',
+    warning: 'bg-amber-600/5 border-yellow-300 text-warning dark:bg-yellow-500/10 dark:border-amber-600/40',
+    gray: 'bg-gray-600/5 border-strong text-quaternary dark:bg-gray-500/10 dark:border-gray-600/40',
   },
 }
 
 const pointSwitchValues: ViewType = {
   default: {
+    /* белая точка на цветной плашке — осознанно константный white */
     primary: 'bg-white',
     success: 'bg-white',
     danger: 'bg-white',
@@ -72,25 +76,25 @@ const pointSwitchValues: ViewType = {
     gray: 'bg-white',
   },
   inverted: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
   },
   transparent: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
   },
   subtle: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
   },
 }
 
@@ -100,7 +104,7 @@ const classes = computed(() =>
     typeSwitchValues[props.view][props.type],
     props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
     props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
-    props.size === 'md' ? 'px-3 py-[6x] text-body-sm font-semibold h-7' : '',
+    props.size === 'md' ? 'px-3 py-[6px] text-body-sm font-semibold h-7' : '',
     props.size === 'lg' ? 'px-4 py-[6px] font-semibold' : '',
   ])
 

package/components/elements/step-slider/AStepSliderColCard.vue

@@ -87,14 +87,18 @@ function goTo(index: number) {
   startTicker()
 }
 
+const isPaused = ref(false)
+
 function onMouseEnter() {
-  if (props.pauseOnHover)
-    stopTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = true
+  stopTicker()
 }
 
 function onMouseLeave() {
-  if (props.pauseOnHover)
-    startTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = false
+  startTicker()
 }
 
 onMounted(startTicker)
@@ -106,43 +110,55 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 </script>
 
 <template>
+  <!-- eslint-disable tailwindcss/no-unnecessary-arbitrary-value --
+       Размеры и типографика скопированы из макета литералами (см. предупреждения
+       правила). Токены здесь не использовать: подсказка leading-1.4 в v4 значит
+       0.35rem, а не line-height 1.4. -->
   <div
-    class="grid grid-cols-1 gap-4 lg:gap-10"
+    class="grid grid-cols-1 gap-8"
     :class="colsClass"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
-    <ol class="flex flex-col gap-3">
+    <ol class="flex flex-col gap-2">
       <li
         v-for="(step, i) in steps"
         :key="i"
-        class="ss-card group relative cursor-pointer overflow-hidden rounded-2xl border bg-white transition-all duration-300"
+        class="ss-card group relative cursor-pointer overflow-hidden rounded-14 border bg-main transition-[background-color,box-shadow,border-color,opacity] duration-300"
         :class="i === active
-          ? 'ss-card-active border-blue-200'
-          : 'border-gray-200 hover:border-blue-100'"
+          ? 'ss-card-active border-strong'
+          : 'border-default opacity-60 hover:bg-brand-subtle hover:opacity-100'"
         @click="goTo(i)"
       >
         <div class="p-4">
           <div
-            class="flex gap-4"
+            class="flex gap-[13px]"
             :class="expandable ? 'items-center' : 'items-start'"
           >
             <span
-              class="flex size-11 shrink-0 items-center justify-center rounded-xl"
-              :class="step.iconBg || 'bg-blue-50'"
+              class="flex size-10 shrink-0 items-center justify-center rounded-[12px]"
+              :class="step.iconBg || 'bg-brand-subtle'"
             >
               <component
                 :is="step.icon"
                 v-if="step.icon"
                 class="size-5"
-                :class="step.iconColor || 'text-blue-600'"
+                :class="step.iconColor || 'text-brand'"
               />
             </span>
             <div class="min-w-0 flex-1">
-              <p class="text-body-md-strong md:text-body-lg-strong text-gray-900">
+              <p
+                class="block text-[14px] font-bold transition-colors"
+                :class="i === active ? 'text-primary' : 'text-quaternary'"
+              >
                 {{ step.title }}
               </p>
 
               <div v-if="!expandable">
-                <p class="mt-1 text-body-sm text-gray-500">
+                <p
+                  class="mt-0.5 block text-[12px] leading-[1.4] transition-colors"
+                  :class="i === active ? 'text-quaternary' : 'text-secondary'"
+                >
                   {{ step.description }}
                 </p>
                 <div
@@ -172,7 +188,7 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
               : 'grid-rows-[0fr] opacity-0'"
           >
             <div class="overflow-hidden">
-              <p class="text-body-sm text-gray-500">
+              <p class="text-body-sm text-quaternary">
                 {{ step.description }}
               </p>
               <div
@@ -194,39 +210,61 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
           </div>
         </div>
 
+        <!-- Прогресс — CSS-анимация scaleX, как в макете (не JS-ширина);
+             длительность приходит переменной: scoped-стили переименовывают
+             @keyframes, поэтому inline-строку animation здесь использовать нельзя.
+             Константный бренд-градиент — одинаков в темах. -->
         <span
           v-if="i === active && autoplay && steps.length > 1"
-          class="absolute inset-x-0 bottom-0 h-1 bg-gray-100"
-        >
-          <span
-            class="block h-full rounded-r-full bg-gradient-to-r from-blue-600 to-blue-400 transition-[width] duration-100 ease-linear"
-            :style="{ width: fillWidth }"
-          />
-        </span>
+          :key="active"
+          class="cap-prog absolute inset-x-0 bottom-0 h-[3px] bg-linear-to-r from-brand to-[#4da8ff]"
+          :class="{ 'is-paused': isPaused }"
+          :style="{ '--cap-dur': `${interval}ms` }"
+        />
       </li>
     </ol>
 
-    <div
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <div class="flex justify-center">
-        <slot
-          name="panel"
-          :active="active"
-          :step="steps[active]"
-          :progress="progress"
-          :count="steps.length"
-          :fill-width="fillWidth"
-          :go-to="goTo"
-        />
-      </div>
+    <div class="flex justify-center">
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
 .ss-card-active {
-  box-shadow: 0 22px 60px -18px rgb(6 141 255 / 22%);
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+}
+
+@keyframes cap-prog {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.cap-prog {
+  transform-origin: left;
+  animation: cap-prog var(--cap-dur, 4600ms) linear;
+}
+
+.cap-prog.is-paused {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cap-prog {
+    animation: none;
+    transform: none;
+  }
 }
 </style>