# Дизайн-система Scottish Government

## Предпросмотр интерфейса дизайн-система Scottish Government

Попробуйте ввести длинное примечание, сократите его до допустимого объёма, просмотрите локальный результат, отредактируйте текст и сбросьте его.

## Справочник по дизайн-система Scottish Government

Опубликованные CSS и JavaScript версии Scottish Government Design System 4.3.0 содержат актуальные официальные рекомендации по типографике, цветам и сетке. Нативный CharacterCount и стили работают в предпросмотре. Arial явно указан как запасной шрифт в независимом примере; для подразделений правительства Шотландии обязателен Roboto. Ресурсы текущего пакета отличаются от приведённых в старых примерах установки.

### Адаптивная типографика

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular 400; нативные крупные стили включаются при ширине от 48rem. |
| H1 | 30/40px →44/56px | Bold 700. |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Используйте семантические уровни заголовков; ds_h3 может изменить оформление, не меняя уровень. |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Bold 700. |
| Lead | 19/32px →24/40px | Light 300; не более одного краткого вводного абзаца на страницу. |
| Font | Roboto | Обязателен для подразделений и направлений политики правительства Шотландии; в независимом примере явно указан Arial. |
### Роли цветов Sass

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | Основной синий; при наведении ссылка меняет цвет на #00437e. |
| $ds_colour__text | #1a1a1a | Вторичный цвет текста #5e5e5e. |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | Сохраняйте эти роли цветов для фокуса даже в адаптированной фирменной теме. |
| $ds_colour__state--negative | #d32205 | Сообщения о превышении лимита и ошибки поля. |
| $ds_colour__state--positive | #1a7032 | Положительное сообщение; не означает, что локальный текст отправлен. |
| $ds_colour__border | #b3b3b3 | Тёмный #1a1a1a и светлый #ebebeb варианты. |
### Адаптивные утилиты для интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | Не меняется при ширине 48rem. |
| ds_!_margin-bottom--4 | 24px →32px | При ширине 48rem значение меняется с малого на большое. |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Адаптивный интервал вместо одного фиксированного значения. |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | Используйте для увеличения расстояния; не применяйте максимальный интервал повсюду. |
### Сетка и полезная внутренняя ширина

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | Число столбцов увеличивается с 2 до 6, затем до 12 и остаётся равным 12. |
| Content width at medium/large/xl | 736 /928 /1120px | Опубликованная ширина внутренней сетки; отличается от ширины контейнера. |
| Native ds_wrapper box | 768 /960 /1152px | Включает отступы по 16px с каждой стороны в выпуске CSS. |
| Gutter / side padding | 32px /16px | При ширине меньше 768px контейнер занимает доступную ширину. |
| Reading width in specimen | 42rem maximum | Настройка приложения внутри нативного контейнера, а не универсальный официальный токен. |
### Поведение CharacterCount

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Root | data-module="ds-character-count" | Содержит нативный input или textarea. |
| Limit | maxlength="200" | Используется при инициализации, затем удаляется; текст сверх лимита остаётся доступным для редактирования. |
| Alternative | data-maxlength on root | Если JavaScript недоступен, нативное ограничение maxlength не применяется. |
| Threshold | data-threshold="80" | Порог равен 80% от лимита; при лимите 200 счётчик появляется после ввода 160 символов. |
| Error state | ds_input--error;aria-invalid="true" | Применяется, когда оставшееся количество символов становится отрицательным; отображается вместе с количеством символов сверх лимита. |
| Announcements | Separate hidden message;1000ms delay | aria-describedby сохраняет существующую подсказку и добавляет идентификаторы сгенерированных сообщений. |
| Counting unit | JavaScript value.length | Подсчёт ведётся в кодовых единицах UTF-16; не обещайте подсчёт эмодзи по графемам. |
## Полное руководство дизайн-система Scottish Government

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

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

## Практическое руководство по вводу текста дизайн-система Scottish Government

### Не допускайте потери введённого текста

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

Это пример примечания для практического задания, а не сервис правительства Шотландии и не запрос медицинской информации. Здесь нет фирменной графики, сохранения данных или отправки. Подсказка в поле предлагает указать практическую потребность для доступа и рекомендует не сообщать личные сведения. Так назначение поля понятно без имитации официальной транзакции.

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

## Roboto и адаптивная иерархия дизайн-система Scottish Government

### Сохраняйте опубликованные размеры

Для подразделений и направлений политики правительства Шотландии обязательный шрифт — Roboto. Другие организации, внедряющие систему, могут выбрать другой удобочитаемый шрифт, сохранив размеры и высоту строк и проверив результат. В автономном примере запасным шрифтом явно указан Arial; отсутствие веб-шрифта не означает, что используется Roboto.

Размер основного текста меняется с 16/24px на 19/32px, а главного заголовка — с 30/40px на 44/56px. Оба изменения заданы в нативной таблице стилей для больших экранов. Класс ds_h3 меняет визуальный размер, не требуя семантического заголовка третьего уровня. Это важно, когда для короткой формы нужен заголовок раздела поменьше, но добавлять искусственный уровень в структуру документа не следует.

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

## Хорошо заметное оформление фокуса дизайн-система Scottish Government

### Различайте фокус, ошибку и завершение

Синий задаёт основную роль бренда и ссылок, чёрный используется для текста, а жёлтый — для оформления фокуса. Это именованные параметры Sass, а не выдуманный набор пользовательских свойств CSS. Адаптацию фирменных цветов выполняют до загрузки системы через модуль настроек. В официальных рекомендациях сказано сохранять палитру фокуса, даже если другие цвета бренда изменяются.

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

- Сохраняйте заметную обводку фокуса клавиатуры на текстовом поле и кнопках действий.

- Описывайте превышение лимита текстом, а не только красной рамкой.

- Связывайте сводки об ошибках и подсказки полей со стабильным идентификатором поля.

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

## Ширина контейнера и интервалы дизайн-система Scottish Government

### Не путайте внешнюю и внутреннюю ширину

В официальной таблице сетки указана внутренняя ширина контента: 736, 928 и 1120px для средних, больших и сверхбольших контрольных точек. Соответствующие контейнеры в исходной реализации имеют ширину 768, 960 и 1152px, поскольку с каждой стороны у них есть внутренний отступ 16px. Это различие важно: если вложить контейнеры друг в друга, можно случайно дважды уменьшить ширину макета.

В примере колонка шириной 42rem для чтения размещена внутри исходного контейнера. Это ограничение по ширине выбрано для приложения и подходит для короткой формы; оно не является новой настройкой дизайн-системы. При ширине экрана меньше 768px контейнер становится адаптивным, а тот же боковой отступ 16px не даёт текстовому полю касаться края экрана.

Утилиты отступов адаптируются к размеру экрана. Например, ds_!_margin-bottom--4 при 48rem увеличивается с 24 до 32px; на более высоких уровнях значения тоже растут. В справочнике приведены оба значения, чтобы снимок экрана на компьютере не приняли за универсальный фиксированный отступ.

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

## Дизайн-система Scottish Government Поле с нативным подсчётом символов

### Начните с обычного текстового поля

Корневой элемент ds_question содержит data-module и необязательный порог в процентах. Связанные с ним подпись и подсказка — обычные доступные элементы HTML. Атрибут maxlength у текстового поля обеспечивает полезный резервный вариант без JavaScript. После улучшения компонент считывает это значение и снимает жёсткое ограничение, чтобы при вставке текста он не обрезался незаметно.

Для поля с лимитом 200 символов и порогом 80% счётчик появляется на отметке 160 символов. В примере на странице общедоступного компонента используются другие числа, а в примере кода указан лимит 250 символов. Здесь для наглядности везде используется один и тот же лимит. Без JavaScript в видимой подсказке по-прежнему указан лимит, а атрибут maxlength работает в браузере.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

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

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

## Дизайн-система Scottish Government Что обеспечивает нативный компонент

### Сообщения, задержка и подсчёт

Версионированная реализация создаёт видимое сообщение с aria-hidden и отдельное скрытое сообщение для вспомогательных технологий. Она добавляет необходимые идентификаторы к уже существующему aria-describedby, не удаляя написанную автором подсказку. Перед обновлением скрытого объявления компонент ждёт 1000ms, чтобы сначала завершилась обратная связь во время ввода.

Фактическая длина определяется выражением JavaScript string.value.length: оно подсчитывает 16-битные кодовые единицы UTF-16. Символ за пределами базовой многоязыковой плоскости может занимать две единицы, а составной эмодзи — ещё больше. Если службе нужна другая политика подсчёта символов, ей следует согласовать счётчик с серверной проверкой, а не ожидать, что этот компонент будет считать символы так, как их воспринимает человек.

Компонент отслеживает события input. Если приложение программно заполняет поле примером или очищает его, оно должно также отправить событие input. Именно так работают действия с примером и сбросом в демонстрации. В комментарии к исходному коду упоминается периодическая проверка распознавания речи, но в изученной реализации такой интервал не запускается; поэтому в этом руководстве такое поведение не заявляется.

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

## Дизайн-система Scottish Government Используйте актуальные пути к файлам

### Загрузка модуля и инициализация компонента

Актуальное имя пакета — @scottish-government/design-system. В версии 4.3.0 скомпилированная таблица стилей находится по пути dist/css/design-system.min.css, хотя в старом разделе об установке всё ещё указан dist/styles/main.css. В этом примере используется фактический путь к опубликованному файлу. Скрипт экспортирует ES-модуль, поэтому импортируйте его с type="module", а не подключайте обычным классическим тегом script.

Создайте экземпляр CharacterCount для этого поля и вызовите init. Для страниц с несколькими компонентами также доступен DS.initAll, но в этом примере инициализируется только нужный счётчик. Дополнительные службы аналитики не настроены. Серверная проверка выполняется отдельно от библиотеки: счётчик помогает редактировать текст, но не обеспечивает соблюдение лимита.

1. Установите пакет с зафиксированной версией 4.3.0 и скопируйте скомпилированную CSS и модуль в локальную папку для ресурсов.

2. Добавьте на страницу полную структуру с подписью, подсказкой и текстовым полем до импорта модуля.

3. Инициализируйте счётчик один раз, затем свяжите действия предварительного просмотра и сброса в приложении с обычными событиями input.

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

## Дизайн-система Scottish Government Проверьте восстановление после превышения лимита

### Не ограничивайтесь проверкой пустого поля

Начните ввод ниже порога, превысьте 160 символов, а затем вставьте текст длиной более 200 символов. Весь текст должен остаться в поле, при этом должно появиться сообщение о превышении лимита, а aria-invalid должен получить значение true. Уменьшите текст до значения ниже лимита и убедитесь, что класс ошибки и состояние недопустимого значения сбросились.

Действие «Предварительный просмотр» в приложении блокирует пустые заметки и заметки, превышающие лимит, и показывает связанную с полем ошибку. Допустимая заметка отображается в локальном предварительном просмотре с помощью textContent, поэтому введённая разметка показывается как текст, а не обрабатывается браузером. Действие «Редактировать заметку» возвращает к тому же текстовому полю с сохранённым значением. Сброс очищает поле через событие input, поэтому нативный счётчик также обнуляется.

При ширине 390px проверьте перенос заголовка, ширину текстового поля, перенос кнопок и сводку ошибок. На более широких экранах колонка для чтения не должна превращаться в слишком широкую полосу текста. Эти проверки относятся к данному примеру; для реальной службы дополнительно нужны исследования с пользователями, проверка шрифтов и тестирование со вспомогательными технологиями в конечном контексте.

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

## Дизайн-система Scottish Government Примеры компонентов дизайн-системы

### Лимит символов без потери текста

Подпись, подсказка, текстовое поле и порог 80% с постепенным улучшением.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

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

### Скомпилированные ресурсы актуальной версии 4.3.0

Проверенный по версии путь CSS и инициализация ES-модуля.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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

### Полный автономный пример

Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
```

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

- Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Дизайн-система Scottish Government Настройка агента

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

Локальная демонстрация использует настоящие модуль CharacterCount и дизайн-систему версии 4.3.0 CSS. Резервный шрифт указан явно; устаревший путь dist/styles со страницы установки не используется. Полный ZIP-архив с работающим примером в разделе «Источники» также содержит точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, запустите в этой папке команду python3 -m http.server 8080 и откройте http://localhost:8080/scottish-government.html. Не открывайте примеры с модулями через file://.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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

```
Используйте настоящий компонент CharacterCount из Scottish Government Design System 4.3.0 в отдельной форме для заметки о доступности. Зафиксируйте проверенные пути dist/css/design-system.min.css и dist/scripts/design-system.js для ES-модуля. Добавьте текстовое поле на 200 символов с порогом 80%, связанную подсказку и локальную инициализацию компонента. Сохраняйте вставленный текст, даже если он превышает лимит; подсчёт и обновления ARIA оставьте библиотеке, а отдельную локальную проверку, безопасный текстовый предварительный просмотр, редактирование и сброс реализуйте на уровне приложения. При программном заполнении примера и сбросе отправляйте события input. Используйте опубликованные адаптивные настройки типографики и отступов, явно укажите выбранный шрифт и не добавляйте официальную айдентику или фиктивную отправку данных.
```

## Дизайн-система Scottish Government Источники и область применения

Справочный пример независимой реализации. Подразделения Scottish Government должны использовать Roboto; в этом примере без брендинга явно выбран Arial как резервный шрифт. Оригинальный текст; данные не сохраняются и не отправляются; официальной связи нет. Лицензия на код и разрешения на использование графических материалов правительства — отдельные вопросы.

- Тип Правила типографики и использования шрифтов.

- Цвет Роли палитры Sass и границы тем.

- Сетка Внутренняя ширина сетки, колонки и отступы.

- Счётчик Лимиты без потери текста и поведение порога.

- JS API инициализации и улучшение компонента.

- Установка Установка пакета; сравните с актуальными путями опубликованных файлов.

- Фокус Рекомендации по видимому фокусу при навигации с клавиатуры.

- Вопрос Структура группировки вопросов.

- Ошибка Рекомендации по восстановлению после ошибки и сводке ошибок.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Дизайн-система Scottish Government Связанные ресурсы

### Singapore Government дизайн-система

Используйте актуальные веб-компоненты SGDS, настоящие адаптивные токены, дневную и ночную темы, а также встроенные ограничения количества, синхронизирующие локальный план.

### Decanter

Создавайте академические редакционные страницы с пресетом Tailwind от Decanter, адаптивной типографической шкалой и гибкими отступами по краям экрана. Изучите оригинальные карточки мероприятий с работающими фильтрами по темам и раскрывающимися аннотациями.

### Suomi.fi дизайн-система

Создавайте понятные формы для финских государственных услуг с Source Sans 3, явными токенами интервалов и восстанавливаемым сценарием выбора документов.


- [Справочник по реализации](https://designsystem.gov.scot/components/character-count)
- [Источник](https://designsystem.gov.scot/styles/typography)
- [Источник](https://designsystem.gov.scot/styles/colour)
- [Источник](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [Источник](https://designsystem.gov.scot/styles/column-grid)
- [Источник](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/components/character-count)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/styles/typography)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/styles/colour)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/styles/column-grid)
- [Справочник по коду](https://designsystem.gov.scot/components/character-count)
- [Прочитать вспомогательную спецификацию](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/get-started/javascript)
- [Прочитать вспомогательную спецификацию](https://designsystem.gov.scot/components/error-summary)
- [Справочник по коду](https://designsystem.gov.scot/get-started/javascript)
- [Тип Правила типографики и использования шрифтов.](https://designsystem.gov.scot/styles/typography)
- [Цвет Роли палитры Sass и границы тем.](https://designsystem.gov.scot/styles/colour)
- [Сетка Внутренняя ширина сетки, колонки и отступы.](https://designsystem.gov.scot/styles/column-grid)
- [Счётчик Лимиты без потери текста и поведение порога.](https://designsystem.gov.scot/components/character-count)
- [JS API инициализации и улучшение компонента.](https://designsystem.gov.scot/get-started/javascript)
- [Установка Установка пакета; сравните с актуальными путями опубликованных файлов.](https://designsystem.gov.scot/get-started/installation)
- [Фокус Рекомендации по видимому фокусу при навигации с клавиатуры.](https://designsystem.gov.scot/styles/focus-states)
- [Вопрос Структура группировки вопросов.](https://designsystem.gov.scot/components/question)
- [Ошибка Рекомендации по восстановлению после ошибки и сводке ошибок.](https://designsystem.gov.scot/components/error-summary)