adata-ui 2.1.41-beta.0 → 2.1.41-beta.10

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,13 +61,25 @@
   z-index: 2;
 }
 
-.carousel:before {
+.carousel--fade-gradient:before {
   left: 0;
   background: linear-gradient(to left, transparent, var(--background-color-main));
 }
 
-.carousel:after {
+.carousel--fade-gradient:after {
   right: 0;
   background: linear-gradient(to right, transparent, var(--background-color-main));
 }
+
+/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
+   исключение из запрета сырых hex). */
+.carousel--fade-mask {
+  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll {
+    animation: none;
+  }
+}
 </style>

package/components/elements/section-heading/ASectionHeading.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Заголовок блока лендинга: Display/Small → Display/Large + подзаголовок.
+// Бейджи-eyebrow в блоках не используются — они живут только в hero и форме обратной связи.
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  center?: boolean
+}>(), {
+  title: '',
+  subtitle: '',
+  center: false,
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5"
+    :class="center ? 'items-center text-center' : 'text-left'"
+  >
+    <h2 class="text-display-sm text-primary md:text-display-lg">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+    <p
+      v-if="subtitle || $slots.subtitle"
+      class="text-body-lg text-quaternary"
+      :class="{ 'max-w-2xl': center }"
+    >
+      <slot name="subtitle">
+        {{ subtitle }}
+      </slot>
+    </p>
+  </div>
+</template>