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

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

@@ -99,80 +99,101 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 
 <template>
   <div
-    class="grid grid-cols-1 items-center gap-4 lg:gap-16"
+    class="grid grid-cols-1 items-start gap-[34px] lg:gap-13"
     :class="colsClass"
   >
-    <ol class="flex flex-col gap-4">
-      <li
-        v-for="(step, i) in steps"
-        :key="i"
-        class="group relative flex cursor-pointer items-start gap-4 px-4 py-3"
-        @click="goTo(i)"
-      >
+    <div class="flex flex-col">
+      <ol class="relative flex flex-col gap-1.5">
+        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
+             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
+             поэтому их фон обязан быть непрозрачным (см. ниже). -->
         <span
-          v-if="i === active"
-          class="ss-card-glow absolute inset-0 z-[1] rounded-2xl bg-main"
-        />
-        <span
-          v-if="i < steps.length - 1"
-          class="absolute left-[34px] top-[46px] z-0 h-[calc(100%_-_18px)] w-0.5 -translate-x-1/2 rounded transition-colors"
-          :class="i < active ? 'bg-brand' : 'bg-badge'"
-        />
-        <span class="relative z-10 flex w-9 shrink-0 justify-center">
+          v-if="steps.length > 1"
+          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
+          aria-hidden="true"
+        >
+          <span
+            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
+            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
+          />
+        </span>
+
+        <li
+          v-for="(step, i) in steps"
+          :key="i"
+          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
+          :class="i === active ? 'ss-step-on bg-main' : ''"
+          @click="goTo(i)"
+        >
+          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
+               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
+               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
           <span
-            class="text-body-md flex items-center justify-center rounded-full font-bold transition-all duration-300"
+            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
             :class="i === active
-              ? 'ss-num-glow size-9 bg-brand text-action-primary-fg'
+              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
               : i < active
-                ? 'size-[34px] bg-brand-subtle text-brand group-hover:bg-blue-subtle'
-                : 'size-[34px] bg-muted text-disabled group-hover:bg-badge'"
+                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
+                : 'bg-canvas text-secondary'"
           >
             {{ i + 1 }}
           </span>
-        </span>
-        <div class="relative z-10">
-          <p
-            class="text-body-lg-strong transition-colors"
-            :class="i === active
-              ? 'text-primary'
-              : i < active
-                ? 'text-quaternary'
-                : 'text-disabled'"
-          >
-            {{ step.title }}
-          </p>
-          <p class="text-body-md text-secondary">
-            {{ step.description }}
-          </p>
-        </div>
-      </li>
-    </ol>
+          <div>
+            <p
+              class="text-body-md-strong transition-colors"
+              :class="i === active ? 'text-primary' : 'text-secondary'"
+            >
+              {{ step.title }}
+            </p>
+            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
+              {{ step.description }}
+            </p>
+          </div>
+        </li>
+      </ol>
+
+      <slot name="steps-footer" />
+    </div>
 
     <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>
+      <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-line-fill {
+  transition: height .6s cubic-bezier(.4, 0, .2, 1);
+}
+
+.ss-step {
+  background: transparent;
+  transition: background .4s, box-shadow .4s;
+}
+
+.ss-step-on {
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
+}
+
 .ss-num-glow {
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-500) 45%, transparent);
+  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
 }
 
-.ss-card-glow {
-  box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+@media (prefers-reduced-motion: reduce) {
+  .ss-line-fill,
+  .ss-step {
+    transition: none;
+  }
 }
 </style>

package/components/features/color-mode/AColorMode.client.vue

@@ -1,36 +1,14 @@
 <script setup lang="ts">
 import Moon from '#adata-ui/icons/moon.vue'
 import Sun from '#adata-ui/icons/sun.vue'
-import { useEventListener } from '@vueuse/core'
 
 const colorMode = useColorMode()
-const setColorMode = useCookie('colorMode')
-
-if (setColorMode.value) {
-  colorMode.preference = setColorMode.value
-}
-
-const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
-
-function cookieDomainAttr(): string {
-  const parts = location.hostname.split('.').reverse()
-  if (parts.length < 2) return ''
-  return `; domain=.${parts[1]}.${parts[0]}`
-}
 
 const isDark = computed(() => colorMode.value === 'dark')
 
 function toggle() {
-  const value = isDark.value ? 'light' : 'dark'
-  colorMode.preference = value
-  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
+  colorMode.preference = isDark.value ? 'light' : 'dark'
 }
-
-useEventListener(window, 'storage', (event: StorageEvent) => {
-  if (event.key === 'nuxt-color-mode' && event.newValue) {
-    colorMode.preference = event.newValue
-  }
-})
 </script>
 
 <template>

package/components/features/go-top/GoTop.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { AIconChevronUp } from "#components";
 
+const { t } = useI18n()
+
 const props = defineProps<{
   bottomOffset?: number
 }>()
@@ -49,9 +51,11 @@ onUnmounted(() => {
     :class="[{ 'opacity-0': !isShow }]"
     :style="{ bottom: footerHeight + 'px' }"
   >
+    <!-- Кнопка только с иконкой: без aria-label скринридер читает её как "button". -->
     <a-button
       @click="goTop"
       form="icon"
+      :aria-label="t('reuse.goTop')"
       :icon="AIconChevronUp"
       icon-class="h-6 w-6"
       size="lg"

package/components/forms/feedback-form/FeedbackFormV2.vue

@@ -5,6 +5,8 @@ import MessageSquare from '#adata-ui/icons/message/message-square.vue'
 import AInputV2 from '#adata-ui/components/forms/input/AInputV2.vue'
 import ATextareaV2 from '#adata-ui/components/forms/input/textarea/ATextareaV2.vue'
 import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { PAGES } from '#adata-ui/shared/constans/pages'
 
 const props = withDefaults(defineProps<{
   userInfo: any
@@ -16,24 +18,22 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits(['submit'])
-
+const { locale } = useI18n()
 const { t } = useI18n()
-
-const isLoading = defineModel< null | any>('isLoading', { default: false })
-const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
-
+const { landing } = useUrls()
+const isLoading = defineModel<null | any>('isLoading', { default: false })
+const isModalOpen = defineModel<null | any>('isModalOpen', { default: false })
 const fullName = ref<string>('')
 const phone = ref<string>('')
 const mail = ref<string>('')
 const comment = ref<string>('')
-
 const submitted = ref(false)
 
 const scheme = z.object({
-  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
+  fullName: z.string(),
   phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+  mail: z.string(),
+  comment: z.string().max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
 })
 
 const { validation, getError } = useUIValidation(
@@ -58,7 +58,6 @@ const send = () => {
   mail.value = props.userInfo?.email || ''
   comment.value = ''
 }
-
 defineExpose({
   reset: () => (submitted.value = false),
 })
@@ -70,10 +69,10 @@ onMounted(() => {
 
 <template>
   <section class="feedback-v2">
-    <!-- осознанно константный: промо-градиент brand-50/100 и shadow-brand-600/10 — константно-яркая промо-карточка, не флипается в тёмной теме -->
-    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-brand-100 bg-linear-to-br from-brand-50 to-brand-100 p-4 md:gap-10 md:p-12 lg:grid-cols-2">
+    <!-- градиент промо-карточки — осознанный литерал (§05 аудита), но флипается в тёмной теме -->
+    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-default bg-linear-to-br from-[#f0f8ff] via-[#eef4ff] to-[#f0f8ff] p-4 md:gap-10 md:p-12 lg:grid-cols-2 dark:from-[#1a2231] dark:via-[#15191f] dark:to-[#121316]">
       <div>
-        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-100 bg-main px-3 py-1.5 text-body-md text-brand">
+        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-default bg-main h-8 px-3 text-body-md text-brand">
           <message-square class="size-3.5" />
           {{ t('forms.feedback.value') }}
         </div>
@@ -99,7 +98,6 @@ onMounted(() => {
             v-model="fullName"
             variant="gray"
             size="md"
-            required
             :label="t('forms.demo.n')"
             :error="getError('fullName')"
             :disabled="isLoading"
@@ -121,7 +119,6 @@ onMounted(() => {
               type="email"
               variant="gray"
               size="md"
-              required
               :label="t('forms.feedback.email')"
               :error="getError('mail')"
               :disabled="isLoading"
@@ -136,7 +133,6 @@ onMounted(() => {
             :label="t('forms.feedback.comment')"
             :error="getError('comment')"
             :disabled="isLoading"
-            required
           />
           <a-button-v2
             type="submit"
@@ -149,9 +145,13 @@ onMounted(() => {
           </a-button-v2>
           <p class="mt-1 text-center text-body-sm text-disabled">
             {{ t('forms.feedback.consent') }}
-            <span class="text-brand">
+            <nuxt-link-locale
+              class="cursor-pointer text-brand"
+              :to="buildLocalizedUrl(locale, landing, PAGES.privacy)"
+              target="_blank"
+            >
               {{ t('forms.feedback.consentAccent') }}
-            </span>
+            </nuxt-link-locale>
           </p>
         </form>
       </div>

package/components/forms/input/AInputV2.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   variant: 'default',
   mask: undefined,
+  dropdownStrategy: 'absolute',
   autocompleteList: () => [] as T[],
   autocompleteKey: undefined,
   autocompleteOption: undefined,
@@ -43,13 +44,15 @@ interface Props {
   disabled?: boolean
   readonly?: boolean
   clearable?: boolean
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md' | 'lg'
   error?: string | string[]
   startIcon?: Component
+  startIconClass?: string
   endIcon?: Component
   loading?: boolean
-  variant?: 'default' | 'gray' | 'blue'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
   mask?: string
+  dropdownStrategy?: 'absolute' | 'fixed'
   inputId?: string
   autocomplete?: string
   autocompleteList?: T[]
@@ -104,7 +107,7 @@ const fieldRef = ref<HTMLElement | null>(null)
 const floatingRef = ref<HTMLElement | null>(null)
 const { x, y, strategy, update } = useFloating(fieldRef, floatingRef, {
   placement: 'bottom-start',
-  strategy: 'absolute',
+  strategy: computed(() => props.dropdownStrategy),
   middleware: [
     offset(6),
     flip({ fallbackPlacements: ['top-start'] }),
@@ -135,7 +138,7 @@ onUnmounted(() => cleanup?.())
 const wrapperRef = ref<HTMLDivElement | null>(null)
 onClickOutside(wrapperRef, () => {
   if (isFocused.value) inputRef.value?.blur()
-})
+}, { ignore: [floatingRef] })
 
 function resolveSelectedValue(item: T): AutocompleteValue {
   if (props.autocompleteFn) return props.autocompleteFn(item) as AutocompleteValue
@@ -255,13 +258,19 @@ defineExpose({ focus, blur, inputRef })
 
 const layoutClass = computed(() => {
   if (!props.label) {
+    if (props.size === 'lg') return 'h-11 py-2'
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
+  if (props.size === 'lg') return 'h-11 pt-4 pb-1'
   return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
 })
 
+/* Компенсация асимметричных паддингов поля с label: иконки возвращаются к
+   визуальному центру. Величина = (pt + контент/2) - h/2:
+   sm 12+11-18=5, md 16+11-20=7, lg 16+12-22=6. */
 const iconOffsetClass = computed(() => {
   if (!props.label) return ''
+  if (props.size === 'lg') return '-translate-y-[6px]'
   return props.size === 'md' ? '-translate-y-[7px]' : '-translate-y-[5px]'
 })
 
@@ -286,11 +295,16 @@ const fieldClass = computed(() => {
     return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-muted'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
     return 'border-brand-200 bg-brand-subtle'
   }
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС + hero-поиск лендинга: bg-canvas глубже bg-muted в дарке */
+    return 'border-default bg-canvas'
+  }
   return 'border-default bg-main'
 })
 
@@ -308,7 +322,7 @@ function rowDisplay(item: T): unknown {
   >
     <div
       ref="fieldRef"
-      class="input-v2__field text-primary relative flex w-full cursor-text items-center gap-2 rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
+      class="input-v2__field relative flex w-full cursor-text items-center gap-2 rounded-10 border border-solid text-primary transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
       :class="[
         layoutClass,
         fieldClass,
@@ -331,11 +345,13 @@ function rowDisplay(item: T): unknown {
         {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
       </label>
 
+      <!-- startIconClass ЗАМЕНЯЕТ дефолтные размер+цвет, а не дописывается:
+           конфликт одинаковых утилит решается порядком в stylesheet, не в class -->
       <component
         :is="startIcon"
         v-if="startIcon"
-        class="size-4 shrink-0 text-icon-disabled"
-        :class="iconOffsetClass"
+        class="shrink-0"
+        :class="[startIconClass || 'size-4 text-icon-disabled', iconOffsetClass]"
       />
 
       <input
@@ -348,7 +364,7 @@ function rowDisplay(item: T): unknown {
         :readonly="readonly"
         :autocomplete="autocomplete"
         :tabindex="disabled ? -1 : 0"
-        class="input-v2__input text-primary w-full min-w-0 bg-transparent leading-tight outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
+        class="input-v2__input w-full min-w-0 bg-transparent leading-tight text-primary outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
         v-bind="inputAttrs"
         @input="onInput"
         @focus="onFocus"
@@ -371,7 +387,7 @@ function rowDisplay(item: T): unknown {
         @mousedown.prevent
         @click.stop="onClear"
       >
-        <a-icon-x-mark class="!m-0 size-3.5" />
+        <a-icon-x-mark class="m-0! size-3.5" />
       </button>
 
       <component
@@ -384,43 +400,45 @@ function rowDisplay(item: T): unknown {
       <slot name="endButton" />
     </div>
 
-    <transition
-      enter-active-class="input-v2__dropdown-enter-active"
-      enter-from-class="input-v2__dropdown-enter-from"
-      enter-to-class="input-v2__dropdown-enter-to"
-      leave-active-class="input-v2__dropdown-leave-active"
-      leave-from-class="input-v2__dropdown-leave-from"
-      leave-to-class="input-v2__dropdown-leave-to"
-    >
-      <div
-        v-if="isDropdownOpen"
-        ref="floatingRef"
-        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-lg border border-default bg-main p-1.5 shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
-        :style="{
-          position: strategy,
-          left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
-        }"
+    <teleport to="body">
+      <transition
+        enter-active-class="input-v2__dropdown-enter-active"
+        enter-from-class="input-v2__dropdown-enter-from"
+        enter-to-class="input-v2__dropdown-enter-to"
+        leave-active-class="input-v2__dropdown-leave-active"
+        leave-from-class="input-v2__dropdown-leave-from"
+        leave-to-class="input-v2__dropdown-leave-to"
       >
-        <ul ref="autocompleteListEl" class="input-v2__list flex flex-col">
-          <li
-            v-for="(item, idx) in autocompleteList"
-            :key="idx"
-            class="cursor-pointer rounded-md px-3 py-2 text-body-md transition-colors duration-100 hover:bg-action-secondary-hover"
-            :class="{ 'input-v2__option--active': currentItemIndex === idx }"
-            @mousedown.prevent="onSelectOption(item)"
-            @touchend.prevent="onTouchEndOption(item)"
-            @touchmove="isTouchScrolling = true"
-          >
-            <slot name="autocomplete-option" :item="item">
-              {{ rowDisplay(item) }}
-            </slot>
-          </li>
-        </ul>
-
-        <slot name="autocomplete-buttons" :value="modelValue" />
-      </div>
-    </transition>
+        <div
+          v-if="isDropdownOpen"
+          ref="floatingRef"
+          class="input-v2__dropdown z-10001 flex flex-col gap-2 rounded-xl border border-default bg-main p-1.5 shadow-[0_24px_50px_-24px] shadow-brand-500/50"
+          :style="{
+            position: strategy,
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+          }"
+        >
+          <ul ref="autocompleteListEl" class="input-v2__list flex flex-col">
+            <li
+              v-for="(item, idx) in autocompleteList"
+              :key="idx"
+              class="cursor-pointer rounded-lg px-3.5 py-2.5 text-body-md transition-colors duration-100 hover:bg-brand-subtle"
+              :class="{ 'input-v2__option--active': currentItemIndex === idx }"
+              @mousedown.prevent="onSelectOption(item)"
+              @touchend.prevent="onTouchEndOption(item)"
+              @touchmove="isTouchScrolling = true"
+            >
+              <slot name="autocomplete-option" :item="item">
+                {{ rowDisplay(item) }}
+              </slot>
+            </li>
+          </ul>
+
+          <slot name="autocomplete-buttons" :value="modelValue" />
+        </div>
+      </transition>
+    </teleport>
 
     <transition
       enter-active-class="input-v2__error-enter-active"
@@ -471,6 +489,10 @@ function rowDisplay(item: T): unknown {
   transform: translateY(-14px);
 }
 
+.input-v2__label--floated[data-size="lg"] {
+  transform: translateY(-19px);
+}
+
 .input-v2__dropdown-enter-active,
 .input-v2__dropdown-leave-active {
   transition:
@@ -491,7 +513,7 @@ function rowDisplay(item: T): unknown {
 }
 
 .input-v2__list {
-  max-height: 250px;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;

package/components/forms/input/textarea/ATextareaV2.vue

@@ -30,7 +30,7 @@ interface Props {
   readonly?: boolean
   error?: string | string[]
   size?: 'sm' | 'md'
-  variant?: 'default' | 'gray' | 'blue'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
   rows?: number
   resize?: 'none' | 'vertical' | 'both'
   maxlength?: number
@@ -60,11 +60,16 @@ const fieldClass = computed(() => {
     return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-muted'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
     return 'border-brand-200 bg-brand-subtle'
   }
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС: bg-canvas глубже bg-muted в дарке (парно с AInputV2) */
+    return 'border-default bg-canvas'
+  }
   return 'border-default bg-main'
 })
 
@@ -124,7 +129,7 @@ defineExpose({ focus, blur, textareaRef })
 <template>
   <div class="textarea-v2 relative w-full text-body-md" v-bind="wrapperAttrs">
     <div
-      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
+      class="textarea-v2__field relative rounded-10 border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
       :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
     >
       <label
@@ -147,7 +152,7 @@ defineExpose({ focus, blur, textareaRef })
         :disabled="disabled"
         :readonly="readonly"
         :tabindex="disabled ? -1 : 0"
-        class="textarea-v2__input text-primary block w-full bg-transparent leading-snug outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
+        class="textarea-v2__input block w-full bg-transparent leading-snug text-primary outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
         :class="[resizeClass, paddingClass]"
         v-bind="inputAttrs"
         @focus="onFocus"
@@ -156,7 +161,7 @@ defineExpose({ focus, blur, textareaRef })
 
       <span
         v-if="maxlength"
-        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-body-sm text-icon-disabled"
+        class="textarea-v2__counter pointer-events-none absolute right-3 bottom-1.5 text-body-sm text-icon-disabled"
       >
         {{ modelValue?.length ?? 0 }}/{{ maxlength }}
       </span>

package/components/modals/ReportBugModal.vue

@@ -100,7 +100,7 @@ async function send() {
 
     <div class="flex flex-col gap-5 px-6 py-4">
       <div class="flex flex-col items-center justify-center gap-4">
-        <a-ill-stop-sign class="size-[140px]" />
+        <a-ill-mail-active class="size-[140px]" />
         <slot name="title">
           <p class="text-body-md text-center">
             {{ name }}

package/components/modals/id/IdModals.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import IdAutoLogoutModal from '#adata-ui/components/modals/id/IdAutoLogoutModal.vue'
-import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
-import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
-import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
-import IdNewPasswordModal from '#adata-ui/components/modals/id/IdNewPasswordModal.vue'
-import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'
-import IdRecoveryModal from '#adata-ui/components/modals/id/IdRecoveryModal.vue'
-import IdRegistrationModal from '#adata-ui/components/modals/id/IdRegistrationModal.vue'
-import IdResetPasswordOtpModal from '#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'
-import IdTwoFactorModal from '#adata-ui/components/modals/id/IdTwoFactorModal.vue'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+// Каждое из этих окон рендерится только под своим v-if, но статический import
+// всё равно тащил все десять (плюс zod, который они используют для валидации)
+// в стартовый чанк каждого приложения-потребителя. defineAsyncComponent грузит
+// чанк в момент открытия окна: поведение то же, стартовый бандл меньше.
+const IdAutoLogoutModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdAutoLogoutModal.vue'))
+const IdConfirmAccountOtpModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'))
+const IdConfirmSuccessfulModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'))
+const IdLoginModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdLoginModal.vue'))
+const IdNewPasswordModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdNewPasswordModal.vue'))
+const IdPasswordSuccessfulModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'))
+const IdRecoveryModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdRecoveryModal.vue'))
+const IdRegistrationModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdRegistrationModal.vue'))
+const IdResetPasswordOtpModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'))
+const IdTwoFactorModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdTwoFactorModal.vue'))
 
 const emit = defineEmits<{
   (e: 'closed', value: boolean): void

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -56,7 +56,7 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
 
 <template>
-  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-default bg-subtle shadow-lg backdrop-blur-lg">
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-default bg-main/10 shadow-lg backdrop-blur-lg backdrop-saturate-140">
     <div class="grid w-full grid-cols-3 justify-items-center">
       <slot>
         <button