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

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

Выполните локальный поиск, изучите один результат и восстановите список с помощью кнопки «Очистить».

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

Основы DDS v3 и проверенная Storybook-версия Vanilla 3.2.0. Цветовые значения — это примеры для светлой темы из таблицы токенов Text Input, а не универсальная тема. В предпросмотре эти правила применяются в независимых HTML/CSS; в примере кода загружается настоящая CDN-версия DDS с указанием версии.

### Интервалы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --dds-spacing-xs | 4px / 0.25rem | Близость значка к подписи. |
| --dds-spacing-sm | 8px / 0.5rem | Расположение действий поиска рядом друг с другом. |
| --dds-spacing-md | 12px / 0.75rem | Компактные строки объектов. |
| --dds-spacing-lg | 16px / 1rem | Внутренние отступы содержимого результата. |
| --dds-spacing-xl | 24px / 1.5rem | Расстояние между поиском и результатами. |
| --dds-spacing-2xl | 32px / 2rem | Внутренний отступ основной области страницы. |
| --dds-spacing-3xl | 40px / 2.5rem | Расстояние между разделами. |
| --dds-spacing-4xl | 48px / 3rem | Граница крупных разделов. |
| --dds-spacing-5xl | 64px / 4rem | Большие интервалы в макете. |
| --dds-spacing-6xl | 80px / 5rem | Свободная композиция. |
| --dds-spacing-7xl | 96px / 6rem | Наибольший указанный шаг отступа. |
### Примеры семантических цветов для светлой темы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --dds-color-text-primary | #1D2C3B | Основные подписи результатов. |
| --dds-color-background-surface-secondary | #EBF1F6 | Вторичная поверхность содержимого. |
| --dds-color-border-brand-base | #00468B | Цвет рамки фирменного поля ввода. |
| --dds-color-background-surface-inactive | #E1E1E1 | Поверхность неактивного поля. |
| --dds-color-border-inactive-base | #7E7E7E | Граница неактивного элемента. |
| --dds-color-text-inactive | #B6B6B6 | Подпись неактивного элемента; не основной текст. |
### Выбранные роли типографической шкалы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Display 1 ≥1024px | 72px / 88px; weight 300 | Крупный редакционный заголовок, а не плотный список результатов. |
| Heading 1 ≥1024px | 48px / 56px; weight 300 | Широкий заголовок страницы. |
| Heading 1 <1024px | 40px / 48px; weight 300 | Компактный заголовок страницы. |
| Heading 4 ≥1024px | 24px / 32px; weight 400 | Заголовок раздела. |
| Heading 4 <1024px | 20px / 28px; weight 400 | Компактный заголовок раздела. |
| Body 2 | 16px / 24px; weight 400 | Стандартный стиль абзаца. |
| Body 3 | 14px / 20px; weight 400 | Плотно набранные метаданные. |
| Caption | 12px / 20px; weight 400 | Вспомогательный текст поля. |
| Button 1 | 16px / 24px; weight 500 | Стандартная подпись действия. |
### Композиция поиска

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| InputGroup(element) | Initializer exported by @dds/components | Инициализируйте оболочку группы после её создания. |
| dds__input-group | Input and addon wrapper | Расположите начальный и конечный элементы рядом с полем ввода. |
| dds__text-input | Native input class | Приложение управляет запросом и результатами. |
| dds__input-addon | Accessory wrapper | Декоративный значок слева или действие очистки. |
| dds__button--ghost | Low-emphasis button modifier | В этих примерах поиска и очистки используется этот вариант. |
| dds__button--icon-only | Icon-only button modifier | Не забудьте задать кнопке aria-label. |
### Подключение стилей

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| dds-styles.css | All-in-one starter | Включает стили компонентов, токены, шрифты и вспомогательные пакеты. |
| dds-tokens.css | Global and semantic tokens | Не включает токены компонентов. |
| dds-components.css | All component styles and component tokens | Требуется для раздельной загрузки пакетов вместе с токенами и шрифтами. |
| dds-fonts.css | CDN font definitions | Подключите для отображения шрифтов DDS. |
| dds-grid.css | Grid classes | Отдельный пакет макета. |
| dds-icons.css | Icon classes | Сам по себе не загружает шрифт значков; см. инструкции по настройке значков. |
## Дизайн-система Dell Полное руководство

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

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

## Дизайн-система Dell DDS v3 и границы его реализации

### Композиция, а не служба поиска

> DDS отделяет переиспользуемые визуальные основы от поведения продукта. Для этого списка подходящая точка интеграции — InputGroup: нативное поле ввода со слотами для дополнительных элементов. Конструктора Search нет, и дизайн-система не выполняет поиск устройств. Приложение хранит введённый текст, применённый запрос и выбранное устройство как отдельные значения. Благодаря этому разница между вводом и отправкой запроса видна пользователю.

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

### Выберите одну версию

Пример для разработчиков ниже рассчитан на Vanilla 3.2.0. Его CSS и JavaScript используют одну и ту же версию. В существующих интеграциях v2 применяется другая упаковка; перед переходом на эти импорты следуйте документации по миграции. Текущий пакет предназначен для внутреннего использования в Dell; в документации приведён CDN, позволяющий оценить эту композицию без ссылки на несуществующий публичный реестр npm.

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

## Дизайн-система Dell Семантические поверхности и границы

### Используйте опубликованные названия ролей

В справочной таблице указаны значения полей ввода для светлого режима из официальной документации компонентов. После загрузки стилей DDS в коде продукта следует использовать семантические переменные CSS. Основной текст и вторичная поверхность формируют удобную для чтения область результатов; граница фирменного цвета обозначает край поля ввода. Неактивный цвет переднего плана намеренно приглушён и не должен использоваться для метаданных по умолчанию.

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

### Не переопределяйте токены DDS

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

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

## Дизайн-система Dell Адаптивная типографика без изменения структуры документа

### Один семантический заголовок, два визуальных размера

Заголовок страницы остаётся h1 при любом размере экрана. Используются документированные размеры Heading 1: 48/56 для широких экранов и 40/48 при ширине менее 1024px. В примере применяются системные резервные шрифты, поскольку это независимая локальная интерпретация; штатная таблица стилей предоставляет ресурсы шрифтов DDS. Для описаний используется Body 2, а для компактных метаданных устройств — Body 3.

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

### Предусмотрите место для длинных названий

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

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

## Дизайн-система Dell Шаг в четыре пикселя для разделённого представления

### Соотносите шаги шкалы с расстояниями между элементами

Используйте sm между связанными действиями, lg внутри строк результатов и xl между запросом и областью результатов. На широких экранах для внешней оболочки можно использовать 2xl. Это примеры применения опубликованной шкалы в приложении, а не официальные предписания использовать именно такие отступы на каждой странице поиска.

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

### Плотность и перестроение макета

DDS описывает сетки с компактной, стандартной и свободной плотностью. В этом примере элементы управления поиском расположены свободно, а метаданные в каждом результате могут быть компактными. На узких экранах панель выбранного устройства располагается после списка результатов, сохраняя порядок чтения. Панель сведений не закреплена и не перекрывает последний результат.

- На экранах любой ширины оставляйте метку поиска и пояснение над полем.

- Если строка не помещается, переносите кнопку отправки под поле.

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

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

## Дизайн-система Dell Структура и поведение поиска

### Ручная отправка — осознанный выбор

Начальный символ поиска — декоративный; область поиска определяет видимая метка. Кнопка очистки в конце поля отображается, только если введён текст. В ручном режиме форма отправляется явно, поэтому клавиша Enter и видимая кнопка Search devices действуют одинаково. Пока пользователь только вводит текст, текущий набор результатов не меняется.

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

### Автоматический режим работает иначе

DDS также описывает автоматический режим, в котором поиск начинается после ввода четвёртого символа. Не добавляйте фильтрацию после ввода одного символа в интерфейс, для которого документирован такой режим. При переходе на автоматический поиск уберите кнопку ручной отправки и продуманно реализуйте порог запуска, отмену запросов и объявление результатов. В приведённом примере выбран ручной режим.

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

## Дизайн-система Dell Черновик, применённый запрос и выбор

### Переходы между состояниями в примере

Очистка сбрасывает и поле ввода, и применённый фильтр, возвращает полный пример списка устройств и переводит фокус обратно в поле. Выбор — отдельное действие кнопки: оно показывает сведения об устройстве, не меняя запрос. Если ничего не найдено, отображаются применённая фраза и явный способ сбросить поиск. Интерфейс не утверждает, что выполнен поиск по удалённому списку устройств.

1. Введите название или инвентарный номер устройства; текущие результаты не изменятся до отправки запроса.

2. Отправьте форму и обновите количество результатов по отфильтрованному локальному массиву.

3. Просмотрите результат или очистите запрос; оставьте фокус на элементе, инициировавшем действие.

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

## Дизайн-система Dell Метки, области страницы и объявления

### Явно обозначьте область поиска

Форма — это область поиска с именем Device inventory. Постоянные метка и пояснение остаются видимыми и во время ввода. Значок очистки — кнопка с aria-label, а не span с обработчиком щелчка. Декоративные символы скрыты от вспомогательных технологий. Количество результатов объявляется вежливым сообщением состояния и меняется после отправки, а не при каждом нажатии клавиши.

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

### Выбор — это не переход на другую страницу

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

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

## Дизайн-система Dell Подключите реальные ресурсы и инициализируйте группу

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

Для авторизованного внутреннего приложения установите @dds/components из Dell Artifactory и подключите dds-styles.css через конвейер таблиц стилей проекта. Для автономного прототипа используйте приведённые ниже ссылки на публичный CDN с фиксированной версией. Инициализируйте InputGroup после добавления разметки. Обработчики отправки, очистки и фильтрации остаются частью кода приложения.

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

### Сначала добейтесь корректной работы композиции

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

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

## Дизайн-система Dell Проверьте сценарий поиска

### Полезная локальная проверка

Введите Latitude, не отправляя запрос, и убедитесь, что прежнее количество результатов не меняется. Отправьте запрос и проверьте найденное устройство. Выполните поиск по отсутствующему инвентарному номеру, проверьте состояние «ничего не найдено», затем очистите запрос и убедитесь, что снова отображаются все устройства из примера. Повторите проверки с клавиатуры и на узком экране. Эти проверки подтверждают работу примера, но не сертифицируют продукт Dell или сетевую интеграцию на его основе.

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

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

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

Сохраните полный документ как index.html и откройте его в браузере. Независимая интерпретация DDS v3: HTML/CSS, типографика и документированные цвета для полей ввода в светлом режиме; системный резервный шрифт.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
```

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

- В этом документе реализовано собственное поведение поиска. Чтобы проверить инициализацию InputGroup на закреплённых версиях таблицы стилей и скрипта, воспользуйтесь нативным примером DDS.

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

Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

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

- Сохраните файл как index.html и откройте его локально с доступом к сети, чтобы загрузить документированный CDN DDS 3.2.0. Здесь используются настоящая инициализация InputGroup и локальная фильтрация; серверная часть Dell не подключается. Внутренняя альтернатива с npm: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Встроенный предварительный просмотр — это автономная интерпретация HTML/CSS, а не работа с этим CDN.

### InputGroup с поиском, управляемым приложением

В примере нативное поле ввода объединено с дополнительными элементами, инициализируется InputGroup и подключается отправка настоящей формы. Начальный символ — локальный декоративный знак; использование шрифта значков не предполагается.

```
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
```

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

- В проверенной документации v3 нет отдельного Search API.

- Для кнопок только со значком используйте aria-label; фильтрацию обеспечивает приложение.

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

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

Сохраните файл как index.html и откройте его локально с доступом к сети, чтобы загрузить документированный CDN DDS 3.2.0. Здесь используются настоящая инициализация InputGroup и локальная фильтрация; серверная часть Dell не подключается. Внутренняя альтернатива с npm: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Встроенный предварительный просмотр — это автономная интерпретация HTML/CSS, а не работа с этим CDN.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

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

```
Создайте поиск по ограниченному списку устройств, используя полную композицию InputGroup из DDS 3.2.0. Сохраните ручную отправку, видимую метку области поиска, локальное объявление результатов и возможность очистки. Используйте семантические токены DDS и адаптивную типографику; не придумывайте Search API и не заменяйте импорты устаревшими импортами v2.
```

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

Независимое справочное руководство по DDS v3. Для доступа к внутреннему пакету нужны права на реестр Dell; для прототипирования в документации указан публичный CDN с фиксированной версией. Это не означает, что работа выполнена от имени Dell, подключена система управления ресурсами или получена официальная сертификация.

- Установка DDS 3.2.0 Доступ к внутреннему пакету, публичный CDN для прототипирования и необходимые пакеты стилей.

- Реализация поиска Поиск собирается на основе InputGroup; отдельного Search API нет.

- Проектирование поиска Ручной и автоматический поиск, метки области поиска и семантические области страницы.

- Интервалы Одиннадцать шагов семантической шкалы интервалов.

- Типографика Шкалы по умолчанию и компактные шкалы.

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

- Архитектура токенов Границы глобальных, семантических токенов и токенов компонентов.

- Сетка Плотность и ритм с шагом четыре пикселя.

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

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

Изучите цветовую и интервальную шкалы Duet от LocalTapiola на примере выбора диапазона дат: с датами в формате ISO, явной проверкой диапазона, методами управления фокусом компонентов и отдельной границей ответственности внешнего пикера с открытым исходным кодом.

### Elastic UI

Создайте исследовательский интерфейс журналов Elastic UI с проверенными шкалами Borealis, нативными элементами управления таблицей и поиском, фильтрацией по уровню серьёзности, локально сохраняемыми событиями и полным исходным кодом React.

### Emplifi Soul

Изучите контракт таблицы данных Soul, шестипиксельную шкалу отступов, многоуровневые роли цветов и компактную типографику Inter. Сравните массовый выбор, обозначение отсутствующих данных и строки итогов, а затем ознакомьтесь с проверенными точками входа частного пакета React.


- [Справочник по реализации](https://www.delldesignsystem.com/components/search)
- [Источник](https://www.delldesignsystem.com/foundations/spacing)
- [Источник](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Источник](https://www.delldesignsystem.com/foundations/typography/)
- [Источник](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Источник](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Прочитать вспомогательную спецификацию](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Прочитать вспомогательную спецификацию](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/getting-started/tokens)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/foundations/typography/)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/foundations/spacing)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/foundations/grid)
- [Прочитать вспомогательную спецификацию](https://www.delldesignsystem.com/components/search)
- [Справочник по коду](https://www.delldesignsystem.com/components/search)
- [Справочник по коду](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Установка DDS 3.2.0 Доступ к внутреннему пакету, публичный CDN для прототипирования и необходимые пакеты стилей.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Реализация поиска Поиск собирается на основе InputGroup; отдельного Search API нет.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Проектирование поиска Ручной и автоматический поиск, метки области поиска и семантические области страницы.](https://www.delldesignsystem.com/components/search)
- [Интервалы Одиннадцать шагов семантической шкалы интервалов.](https://www.delldesignsystem.com/foundations/spacing)
- [Типографика Шкалы по умолчанию и компактные шкалы.](https://www.delldesignsystem.com/foundations/typography/)
- [Токены полей ввода Документированные семантические цвета, используемые полями ввода.](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Архитектура токенов Границы глобальных, семантических токенов и токенов компонентов.](https://www.delldesignsystem.com/getting-started/tokens)
- [Сетка Плотность и ритм с шагом четыре пикселя.](https://www.delldesignsystem.com/foundations/grid)