# Дизайн-система Vuestic UI

## Предварительный просмотр интерфейса дизайн-системы Vuestic UI

Оцените ясность, иерархию и обратную связь, добавьте содержательное наблюдение и сохраните локальную оценку.

## Справочник по дизайну дизайн-системы Vuestic UI

Vuestic UI 1.10.3. Значения наборов считываются из установленного сервиса цвета, а переменные компонентов — из его CSS. В листе используется стандартный светлый набор, но значение --va-font-family намеренно переопределено на system-ui. Декоративные формы и окружающая их шкала — оригинальные решения.

### Стандартный светлый цветовой набор

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primary | #154EC1 | Оценка и основное действие. |
| secondary | #767C88 | Вторичная роль. |
| success | #3D9209 | Сохранённый результат. |
| info | #158DE3 | Информационная роль. |
| danger | #E42222 | Роль ошибки. |
| warning | #FFD43A | Роль предупреждения. |
| backgroundPrimary | #f6f6f6 | Стандартная основная поверхность. |
| backgroundSecondary | #FFFFFF | Стандартная приподнятая поверхность. |
| backgroundElement | #ECF0F1 | Поверхность элемента. |
| backgroundBorder | #DEE5F2 | Роль границы. |
| textPrimary | #262824 | Основной текст. |
| textInverted | #FFFFFF | Инвертированный текст. |
| focus | #49A8FF | Роль фокуса. |
### Сравнение со стандартным тёмным набором

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primary | #3472F0 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| success | #66BE33 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| danger | #F34030 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| backgroundPrimary | #050A10 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| backgroundSecondary | #1F262F | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| backgroundElement | #131A22 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| backgroundBorder | #3D4C58 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| textPrimary | #F1F1F1 | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
| textInverted | #0B121A | Справочник по официальному тёмному набору; локальный пример остаётся светлым. |
### Встроенные CSS и явно заданные масштабы приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Значение библиотеки по умолчанию; в примере явно переопределено на system-ui. |
| --va-button-border-radius | 0.25rem | Скомпилированный радиус встроенной кнопки. |
| --va-form-element-border-radius | 0.25rem | Скомпилированный общий радиус элементов формы. |
| --va-button-content-py | 0.5rem | Вертикальный внутренний отступ содержимого кнопки. |
| --va-button-content-px | 0.75rem | Горизонтальный внутренний отступ содержимого кнопки. |
| --va-rating-number-item-margin | 0.1em | Справочное значение интервала для встроенного режима number. |
| --va-rating-number-item-font-weight | 700 | Справочное значение усиления для встроенного режима number. |
| Application title | 34px / 1.15; 29px narrow | Оригинальная иерархия заголовков. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Фактические значения оригинальной таблицы стилей, а не шкала токенов Vuestic. |
| Application panel radius | 14px | Оригинальная геометрия окружающего пространства. |
| Layout | Flexible form + 280px summary; stack below 760px | Встроенная компоновка по высоте содержимого. |
## Полное руководство по дизайн-системе Vuestic UI

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Vuestic UI: настраиваемая библиотека Vue с именованными цветовыми наборами

### Настраиваемая библиотека Vue с именованными цветовыми наборами

> Vuestic регистрирует общие сервисы с помощью createVuestic. В примере используются встроенные компоненты, импортированные из vuestic-ui, и стандартный светлый цветовой набор. Оценка, кнопки, индикатор прогресса и уведомление об успешном результате получают семантические имена цветов через этот же сервис.

Лист оценки — практический пример использования этих компонентов: он разделяет три вопроса для проверки, собирает подтверждающее наблюдение, рассчитывает среднее значение и блокирует сохранённый локальный результат. Цветные отметки критериев и двухколоночная композиция — оригинальный дизайн приложения, а не дополнительные компоненты Vuestic.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: отличайте наборы сервиса от переменных геометрии CSS

### Отличайте наборы сервиса от переменных геометрии CSS

В проверенном светлом пресете заданы primary #154EC1, success #3D9209 и textPrimary #262824. В тёмном пресете используются другие значения primary, текста и поверхности, а не просто инвертируются цвета светлой страницы. В справочной таблице указаны оба пресета, а предварительный просмотр намеренно остаётся в светлом режиме.

Геометрия компонентов настраивается с помощью переменных CSS, таких как --va-button-border-radius и --va-form-element-border-radius; обе имеют значение 0.25rem в установленной таблице стилей. Цветовой пресет и переопределение переменной CSS решают разные задачи: используйте сервис для семантических ролей, а документированную переменную — для поддерживаемой геометрии компонентов.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: подключите необходимые значки и укажите переопределение шрифта

### Подключите необходимые значки и укажите переопределение шрифта

По умолчанию Vuestic задаёт для --va-font-family значение Source Sans Pro. В примере эта переменная переопределена на system-ui, чтобы не полагаться незаметно на шрифт, который не был загружен. Таким образом, подписи компонентов и текст приложения используют явно указанный стек доступных шрифтов.

В значках рейтинга по умолчанию используются имена Material Icons, например star и star_outline. Таблица стилей локального шрифта импортируется из @quasar/extras и собирается вместе с файлами шрифта. Без этого ресурса вместо ожидаемых изображений звёзд могут отображаться буквальные названия значков. Шрифт значков отделён от переопределения семейства шрифтов приложения.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: используйте ноль для состояния «без оценки», а не для низкой оценки

### Используйте ноль как состояние «нет ответа», а не как низкую оценку

Каждый VaRating привязан к числовому значению одного критерия. Максимум равен пяти, а параметр clearable включён, поэтому повторный выбор текущей оценки обнуляет значение этого критерия. Для нуля в интерфейсе отображается «Нет оценки», а не завершённая оценка ноль из пяти.

Среднее значение рассчитывается по числу положительных оценок. Это позволяет не учитывать критерии без ответа, пока рабочий лист заполняется. Для сохранения всё равно нужно оценить все три критерия, поэтому итоговое среднее всегда отражает полную оценку. При изменении оценки сразу обновляются индикатор завершения, полоса прогресса и сводка.

1. Сохраните пустой рабочий лист и проверьте сообщения об отсутствующих оценках и заметке.

2. Укажите для ясности оценку 4, для иерархии — 3, для обратной связи — 2; среднее значение станет равным 3.0.

3. Запишите конкретное наблюдение и сохраните его, затем нажмите «Начать заново», чтобы сбросить весь рабочий лист.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: для полезного наблюдения нужен содержательный текст и достаточно места

### Полезное наблюдение требует содержательного текста и достаточного места

У VaTextarea есть видимая подпись, ограничение в четыреста символов и счётчик. После попытки сохранения приложение проверяет, что длина текста после удаления пробелов в начале и конце составляет не менее двадцати символов. Поэтому строка из пробелов не удовлетворяет требованию, несмотря на формальную длину.

В VaTextarea включён автоматический подбор высоты; минимальное число строк — четыре, максимальное — двенадцать. Это функциональная настройка, а не просто пример параметра: без autosize минимальное число строк не обеспечивало нужного расширения поля заметки. Исправленный вариант позволяет видеть наблюдение на узком экране, сохраняя обычную прокрутку для очень длинных заметок.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: рассчитывайте прогресс по завершённости, а не по среднему баллу

### Рассчитывайте прогресс по завершённым пунктам, а не по среднему рейтингу

Полоса прогресса показывает, сколько критериев получили положительную оценку: число оценённых критериев делится на три и умножается на сто. Крупное число рядом показывает средний балл. Это разные показатели с разными знаменателями, их не следует смешивать: даже три низкие оценки могут означать стопроцентное завершение.

В предложении о завершении напрямую указаны числитель и знаменатель. Среднее значение подписано как «Среднее по оценённым критериям», а в сводке повторяется оценка каждого критерия. Эти подписи помогают понять расчёт и не принять необъяснённую полосу прогресса за общую оценку качества.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: заблокируйте завершённую локальную оценку до явного сброса

### Блокируйте завершённую локальную оценку до явного сброса

При сохранении сначала устанавливается attempted, затем проверяются все оценки и заметка, и только после этого активируется состояние сохранения. Флаг saved переводит оценки и текстовое поле в режим только для чтения и отключает кнопку сохранения. В сообщении об успехе указано, что оценка сохранена локально и никуда не отправлена.

Обработчик кнопки «Начать заново» за один раз очищает все оценки, заметку, отображение проверки и состояние сохранения. Сброс намеренно выполняется явно: иначе изменение одного значения после сохранения сделало бы подтверждение неактуальным. Этот пример не предполагает наличия серверной части, учётной записи или получателя отзыва.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: укажите для каждого элемента оценки критерий и значение

### Укажите для каждого элемента оценки критерий и значение

Для встроенных элементов VaRating в дереве доступности представлены кнопки. В aria-item-label входят название критерия и подстановочные значения value/max, благодаря чему получаются подписи, например «Оценка ясности — 4 из 5». Это позволяет не путать пятнадцать одинаковых элементов со звёздами, когда на странице показаны три оценки.

У текстового поля есть собственная видимая подпись, у полосы прогресса — подпись завершения, а сообщение о сохранении обозначено как статусная область. Декоративные маркеры критериев скрыты от вспомогательных технологий. При локальной проверке нажимали реальные подписанные кнопки оценки, проверяли валидацию и просматривали итоговый макет при ширине 280px, а не ограничивались проверкой наличия атрибутов ARIA.

- Для каждого повторяющегося элемента оценки задайте отдельную подпись с названием критерия.

- Визуально различайте состояния «без оценки» и «только для чтения».

- После взаимодействия с реальными встроенными элементами проверьте числовую сводку.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: подключите плагин, компонент CSS и локальный ресурс значков

### Подключите плагин, компонент CSS и локальный ресурс значка

В точке входа регистрируется createVuestic, а vuestic-ui/css импортируется перед исходной таблицей стилей макета. В App.vue импортирован каждый используемый компонент, поэтому пример не зависит от недокументированной настройки автоматического импорта. Общее переопределение шрифта применяется после библиотеки CSS.

Команда установки пакета включает @quasar/extras только как источник локального шрифта Material Icons; он не регистрирует Quasar и не добавляет его компоненты в рабочий лист. Полные SFC и таблицу стилей выше можно добавить в приведённую ниже настройку Vite для Vue. В отдельном предварительном просмотре необходимые ресурсы встроены, удалённый шрифт не загружается.

Прочитать вспомогательную спецификацию

## Дизайн-система Vuestic UI: примеры компонентов

### Полный встроенный рабочий лист для критической оценки

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar и VaAlert связаны с одной моделью оценки.

```
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&&note.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&&note.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
```

Справочник по коду

- Ноль означает «нет оценки» и не учитывается в среднем значении.

- Для сохранения нужно оценить все три критерия и добавить заметку длиной не менее двадцати символов без пробелов по краям.

- После сохранения оценки и текст становятся доступны только для чтения до нажатия «Начать заново».

### Полная исходная настройка макета и типографики

Явное переопределение шрифта, адаптивные карточки и декоративные маркеры критериев.

```
:root{--va-font-family:system-ui,sans-serif}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:#f3f5f8;color:#262824;font-family:system-ui,sans-serif}.review-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:#667182}h1{font-size:34px;line-height:1.15;margin:12px 0;max-width:710px}header>p:last-child{max-width:640px;line-height:1.6;font-size:15px;color:#677080}.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.review-form,.summary{background:white;border:1px solid #dee5f2;border-radius:14px;padding:24px;min-width:0}.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.form-head h2{font-size:20px;font-weight:650}.criterion{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid #e6eaf0}.criterion:last-of-type{margin-bottom:24px}.criterion-body{min-width:0;flex:1}.criterion h3{font-size:16px;font-weight:650;margin:0 0 6px}.criterion p{font-size:13px;line-height:1.5;color:#677080;margin:0 0 12px}.criterion-mark{width:58px;height:58px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;background:#e8efff}.criterion-mark i,.criterion-mark b{position:absolute;display:block}.mark-0 i{width:27px;height:27px;background:#7a9cdf;border-radius:50%;left:10px;top:14px}.mark-0 b{width:14px;height:14px;background:#154ec1;border-radius:50%;left:31px;top:22px}.mark-1{background:#eee8f8}.mark-1 i{width:15px;height:34px;background:#9273b6;left:10px;top:13px}.mark-1 b{width:15px;height:19px;background:#c2aedb;left:32px;top:28px}.mark-2{background:#e6f0e0}.mark-2 i{width:36px;height:23px;border-radius:6px;background:#86a16f;left:11px;top:14px}.mark-2 b{border:8px solid transparent;border-top-color:#86a16f;left:17px;top:33px}.score{display:block;font-size:11px;color:#667182;margin-top:7px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.average{font-size:64px;line-height:1.2;font-weight:650;margin-top:16px;color:#154ec1}.average span{font-size:19px;color:#78828f;font-weight:400;margin-left:8px}.average-label{font-size:12px;color:#697482;margin:5px 0 24px}.completion{font-size:11px;color:#687387;margin-top:10px}.guidance{font-size:14px;line-height:1.6;margin:24px 0}.summary dl>div{display:flex;justify-content:space-between;border-top:1px solid #e6eaf0;padding:12px 0;font-size:13px}.summary dd{font-weight:700}.saved{margin-top:16px;font-size:13px;line-height:1.6}.saved p{margin-top:7px}.local-note{font-size:12px;line-height:1.6;color:#687387;padding:16px 5px}.error{font-size:13px;color:#b71717;margin-bottom:16px}@media(max-width:760px){.review-shell{padding:20px}.review-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.review-shell{padding:14px}.review-form,.summary{padding:16px}.criterion{gap:12px}.criterion-mark{width:38px;height:48px}.criterion-mark i,.criterion-mark b{transform:scale(.7);transform-origin:left}.criterion-mark i{left:4px}.criterion-mark b{left:18px}.actions>*{width:100%}.va-textarea{max-width:100%}}
```

Справочник по коду

- Для Material Icons сохраняется отдельное семейство шрифта.

- Минимальная высота документа не задаётся.

## Дизайн-система Vuestic UI: настройка агента

### Отправная точка для реализации

Проверено на Vuestic UI 1.10.3; локальные Material Icons подключены из @quasar/extras 2.1.0. Приведены оба полных примера исходного кода; внешний сервис шрифтов не требуется.

```
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install vuestic-ui@1.10.3 @quasar/extras@2.1.0
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Запрос для вашего проекта

```
Используйте Vuestic UI 1.10.3, чтобы воспроизвести рабочий лист для критической оценки с тремя встроенными критериями VaRating, VaTextarea, индикатором прогресса, статусом и кнопками сохранения и сброса. Рассчитывайте среднее только по оценённым критериям; для сохранения требуйте оценок по всем трём критериям и заметку длиной не менее двадцати символов после удаления пробелов по краям. Сохраните автоматическое изменение высоты текстового поля, чтобы весь отзыв оставался видимым, и обеспечьте согласованность режима только для чтения после сохранения и поведения сброса. Подключите createVuestic, встроенный CSS и локальный шрифт значков. Это локальная запись критической оценки, а не сервис пакетной проверки.
```

## Дизайн-система Vuestic UI: источники и область применения

Vuestic UI 1.10.3 со светлым цветовым пресетом по умолчанию и явным переопределением системного шрифта. Исходные вопросы и иллюстрации для критической оценки. Сохранённое состояние хранится локально; отправка на внешнюю проверку не выполняется, после перезагрузки данные не сохраняются.

- Установка Настройка плагина и таблицы стилей.

- Настройка цветов Именованные семантические пресеты.

- Переменные CSS Поддерживаемая геометрия компонентов и переопределения шрифтов.

- Оценка Сброс состояния, подписи и модель.

- Текстовая область Автоматический подбор высоты, границы числа строк и отображение проверки.

- Полоса прогресса Семантика значений и максимума.

- Alert Оформление видимого результата.

## Дизайн-система Vuestic UI: связанные материалы

### Web Awesome

Изучите фактические семантические токены Web Awesome в нативных пользовательских элементах, включая локальные изменения радиуса и интервалов, стилизацию Shadow DOM, поведение списков выбора и валидацию полей ввода.

### Ariakit

Ariakit предоставляет неоформленные компоненты React с явно заданным общим состоянием и доступными составными элементами. Компонент combobox отделяет ввод текста от подтверждённого выбора, поэтому подходит для средств выбора с поиском; расположенный ниже справочник демонстрирует эту разницу на сгруппированных и недоступных результатах.

### Bits UI

Bits UI предоставляет компоненты Svelte без предустановленной разметки, которые можно объединять с помощью встроенных частей и состояния Svelte 5. В примере сочетаются флажок с вычисляемым смешанным состоянием, независимо раскрываемые секции аккордеона и диалоговое окно проверки на основе портала; конфигурация стилизации приведена полностью.


- [Справочник по реализации](https://ui.vuestic.dev/ui-elements/rating/)
- [Источник](https://ui.vuestic.dev/services/colors-config/)
- [Источник](https://ui.vuestic.dev/styles/css-variables/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/getting-started/installation/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/services/colors-config/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/styles/css-variables/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/ui-elements/rating/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/ui-elements/textarea/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Прочитать вспомогательную спецификацию](https://ui.vuestic.dev/ui-elements/alert/)
- [Справочник по коду](https://ui.vuestic.dev/ui-elements/rating/)
- [Справочник по коду](https://ui.vuestic.dev/styles/css-variables/)
- [Установка Настройка плагина и таблицы стилей.](https://ui.vuestic.dev/getting-started/installation/)
- [Настройка цветов Именованные семантические пресеты.](https://ui.vuestic.dev/services/colors-config/)
- [Переменные CSS Поддерживаемая геометрия компонентов и переопределения шрифтов.](https://ui.vuestic.dev/styles/css-variables/)
- [Оценка Сброс состояния, подписи и модель.](https://ui.vuestic.dev/ui-elements/rating/)
- [Текстовая область Автоматический подбор высоты, границы числа строк и отображение проверки.](https://ui.vuestic.dev/ui-elements/textarea/)
- [Полоса прогресса Семантика значений и максимума.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alert Оформление видимого результата.](https://ui.vuestic.dev/ui-elements/alert/)