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

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
-type PillTabsType = 'pill' | 'underline'
+/* pill-round — полностью округлый переключатель-«тумблер» (ДС-2026, тарифы):
+   меняется не только радиус, но и поверхность трека, плотность и цвет активного
+   таба, поэтому это отдельная шкура, а не проп радиуса. */
+type PillTabsType = 'pill' | 'pill-round' | 'underline'
 
 export interface PillTab {
   key: string
@@ -55,6 +58,7 @@ const COUNT_COLOR_CLASS: Record<CountColor, string> = {
 const { t, te } = useI18n()
 
 const isUnderline = computed(() => props.type === 'underline')
+const isPillRound = computed(() => props.type === 'pill-round')
 
 function hasCount(option: PillTab) {
   if (typeof option.count === 'string') {
@@ -142,11 +146,13 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="pill-tabs-v2 min-w-0 max-w-full"
+    class="pill-tabs-v2 max-w-full min-w-0"
     :class="[
       isUnderline
         ? 'border-b border-default'
-        : 'rounded-lg border border-default bg-muted p-1',
+        : isPillRound
+          ? 'rounded-full border border-default bg-canvas p-0.5'
+          : 'rounded-lg border border-default bg-muted p-1',
       block ? 'w-full' : 'w-fit',
       disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
     ]"
@@ -168,26 +174,35 @@ onBeforeUnmount(() => {
         :aria-disabled="isDisabled(option) || undefined"
         :disabled="isDisabled(option)"
         :tabindex="modelValue === option.key ? 0 : -1"
-        class="inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors duration-150"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap transition-colors duration-150"
         :class="[
           SIZE_CLASS[size],
           isUnderline
             ? [
-              'px-4 py-2',
+              'px-4 py-2 font-medium',
               isDisabled(option)
                 ? 'cursor-not-allowed text-icon-disabled'
                 : modelValue === option.key
                   ? 'text-brand'
                   : 'text-quaternary hover:text-primary',
             ]
-            : [
-              'rounded-md px-3 py-1.5',
-              isDisabled(option)
-                ? 'cursor-not-allowed text-icon-disabled'
-                : modelValue === option.key
-                  ? 'bg-main text-primary shadow-xs dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
-                  : 'text-quaternary hover:bg-action-secondary-hover hover:text-primary',
-            ],
+            : isPillRound
+              ? [
+                'rounded-full px-3.5 py-1 font-semibold',
+                isDisabled(option)
+                  ? 'cursor-not-allowed text-icon-disabled'
+                  : modelValue === option.key
+                    ? 'bg-main text-brand shadow-xs dark:shadow-none dark:ring-1 dark:ring-white/10 dark:ring-inset'
+                    : 'text-secondary hover:text-primary',
+              ]
+              : [
+                'rounded-md px-3 py-1.5 font-medium',
+                isDisabled(option)
+                  ? 'cursor-not-allowed text-icon-disabled'
+                  : modelValue === option.key
+                    ? 'bg-main text-primary shadow-xs dark:shadow-none dark:ring-1 dark:ring-white/10 dark:ring-inset'
+                    : 'text-quaternary hover:bg-action-secondary-hover hover:text-primary',
+              ],
           block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
         ]"
         @click="select(option)"
@@ -197,7 +212,7 @@ onBeforeUnmount(() => {
 
           <span
             v-if="showCount && !option.hideCount"
-            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm leading-5 font-semibold"
             :class="COUNT_COLOR_CLASS[resolveCountColor(option)]"
           >
             {{ formatCount(option) }}

package/icons/letter/letter-a.vue

@@ -1,6 +1,8 @@
 <template>
+  <!-- Плитка-бейдж A–E: цвета через токены, иначе в тёмной теме светлая
+       подложка светится (палитра пар — как у бейджей сравнения в макете). -->
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" rx="7" fill="#F0F8FF"/>
-    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="#068DFF">A</text>
+    <rect width="24" height="24" rx="7" fill="var(--background-color-brand-subtle)"/>
+    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="var(--text-color-brand)">A</text>
   </svg>
 </template>

package/icons/letter/letter-b.vue

@@ -1,6 +1,6 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" rx="7" fill="#F5F3FF"/>
-    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="#7C3AED">B</text>
+    <rect width="24" height="24" rx="7" fill="var(--background-color-success-subtle)"/>
+    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="var(--text-color-success)">B</text>
   </svg>
 </template>

package/icons/letter/letter-c.vue

@@ -1,6 +1,6 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" rx="7" fill="#F0FDF4"/>
-    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="#059669">C</text>
+    <rect width="24" height="24" rx="7" fill="var(--background-color-violet-subtle)"/>
+    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="var(--color-icon-violet)">C</text>
   </svg>
 </template>

package/icons/letter/letter-d.vue

@@ -1,6 +1,6 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" rx="7" fill="#FEFCE8"/>
-    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="#D97706">D</text>
+    <rect width="24" height="24" rx="7" fill="var(--background-color-warning-subtle)"/>
+    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="var(--text-color-warning)">D</text>
   </svg>
 </template>

package/icons/letter/letter-e.vue

@@ -1,6 +1,6 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" rx="7" fill="#FEF2F2"/>
-    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="#DC2626">E</text>
+    <rect width="24" height="24" rx="7" fill="var(--background-color-pink-subtle)"/>
+    <text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="700" fill="var(--color-icon-pink)">E</text>
   </svg>
 </template>

package/nuxt.config.ts

@@ -38,6 +38,13 @@ export default defineNuxtConfig({
   colorMode: {
     preference: 'light',
     classSuffix: '',
+    storage: 'cookie',
+    storageKey: 'colorMode',
+    cookieAttrs: {
+      path: '/',
+      maxAge: 60 * 60 * 24 * 365,
+      domain: process.env.COLOR_MODE_COOKIE_DOMAIN,
+    },
   },
 
   googleFonts: {
@@ -85,8 +92,4 @@ export default defineNuxtConfig({
     },
   },
 
-  // Tailwind + токены + глобальные стили; мержится в приложение-консьюмер
-  // штатно, как любой css: слоя.
-  css: [resolve('./assets/styles/main.css')],
-
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.41-beta.0",
+  "version": "2.1.41-beta.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -39,7 +39,7 @@
     "@headlessui/vue": "^1.7.23",
     "@nuxt/image": "1.8.1",
     "@nuxt/kit": "^3.18.1",
-    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/color-mode": "^4.0.1",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/i18n": "9.3.3",
     "@popperjs/core": "^2.11.8",