# Dell デザインシステム

## Dell デザインシステム インターフェースプレビュー

ローカル検索を実行し、結果を 1 件確認してから、「クリア」で一覧を復元します。

## Dell デザインシステム デザインリファレンス

DDS v3 の基礎と、検証済みの Vanilla 3.2.0 Storybook。カラー値は「Text Input」トークン表に記載されたライトモードのプレビュー値であり、すべてのテーマに共通する値ではありません。プレビューはこれらのルールを独自の HTML/CSS で使用します。コード例では、バージョンを指定した実際の DDS CDN を読み込みます。

### スペーシング

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --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 内部向けです。公開 npm レジストリがあるかのように扱うことなく、この構成を試せる具体的な方法として、文書化された CDN を利用できます。

関連する仕様を確認する

## Dell デザインシステム セマンティックな背景と境界

### 公開されている役割名を使用する

リファレンス表には、公式コンポーネントのドキュメントに記載されたライトモードの入力色が掲載されています。DDS のスタイルを読み込んだ後、製品コードではセマンティックな CSS 変数を使用してください。プライマリテキストとセカンダリ背景によって、読みやすい結果領域を構成します。ブランドカラーのボーダーは入力欄の境界を示します。非アクティブ時の前景色は意図的に抑えられているため、メタデータの標準色として使用しないでください。

関連する仕様を確認する

### DDS トークンを再定義しない

グローバルなカラーの基本値はセマンティックな役割に適用され、その役割をもとにコンポーネント固有の表現が決まります。アプリケーションの作成者は、グローバルなカラー尺度を上書きせず、セマンティックな役割を参照してください。ダーク表示には、実際にサポートされているトークンモードが必要です。ページの背景色だけを変更すると、フィールド、ラベル、フォーカスの色に一貫性がなくなります。このローカルのサンプルはライトモードのままです。

関連する仕様を確認する

## Dell デザインシステム 文書構造を変えずに、画面幅に応じた文字サイズを適用する

### 1つのセマンティック見出し、2つの文字サイズ

ページ見出しは、どのビューポートでもh1のままです。広いレイアウトでは文書化されたHeading 1のサイズ48/56を、1024px未満では40/48を使用します。このサンプルは独立したローカル実装のため、システムフォールバックフォントを使用しています。標準のスタイルシートでは、DDSのフォントリソースが提供されます。説明文にはBody 2を、コンパクトなデバイスのメタデータにはBody 3を使用します。

関連する仕様を確認する

### 実際の名称が収まる余白を確保する

デバイスのモデル名、オフィス名、サポート状況は折り返される場合があります。識別情報は読みやすく保ち、資産タグの唯一の表示を省略しないでください。コンパクトなレイアウトでは、視覚的な優先順位と列の配置を変えつつ、ラベルと値の対応関係を維持します。

関連する仕様を確認する

## Dell デザインシステム 分割ビューに4pxのリズムを適用する

### 間隔の関係に応じてスケールの段階を割り当てる

関連する操作の間にはsm、検索結果の行内にはlg、検索クエリと結果領域の間にはxlを使用します。画面幅が広い場合は、外側のシェルに2xlを使用できます。これらは公開されたスケールをアプリケーションに適用した例であり、すべての検索ページで同じ余白が必要だという公式の指定ではありません。

関連する仕様を確認する

### 密度とリフロー

DDSでは、compact、default、comfortableのグリッドが定義されています。この例では検索コントロールにcomfortableを採用し、各検索結果内のメタデータにはcompactを使用しています。画面が狭い場合、選択したデバイスのパネルは検索結果一覧の後に配置され、読み進める順序が保たれます。詳細パネルは固定表示されず、最後の検索結果を隠すこともありません。

- 画面幅にかかわらず、検索ラベルと補足テキストをフィールドの上に配置します。

- 行に収まらない場合は、送信操作をフィールドの下に移動します。

- 横スクロールが発生しないよう、選択したデバイスの詳細を検索結果の下に移動します。

関連する仕様を確認する

## Dell デザインシステム 検索の構成と動作

### 手動送信を採用する

先頭の検索アイコンは装飾用です。在庫の対象範囲は、表示されたラベルで示します。末尾のクリアボタンは、入力がある場合にのみ表示されます。手動モードではフォームから検索を送信するため、Enterキーと画面上のSearch devicesボタンは同じ動作をします。入力を変更しただけでは、適用済みの検索結果は変わりません。

関連する仕様を確認する

### 自動検索は別の仕様

DDSでは、4文字目の入力後に検索を開始する自動モードも定義されています。このモードとして文書化されたUIに、1文字入力ごとの即時絞り込みを追加しないでください。自動検索に切り替える場合は、手動送信ボタンを削除し、開始文字数のしきい値、キャンセル、検索結果の通知を意図的に実装してください。このサンプルでは手動モードを採用しています。

関連する仕様を確認する

## Dell デザインシステム 入力中のクエリ、適用済みクエリ、選択項目

### サンプルでの状態遷移

クリアすると入力値と適用済みのフィルターがリセットされ、サンプルの全在庫が再表示されて、フィールドにフォーカスが戻ります。選択は別のボタン操作です。検索クエリを変更せずに、資産の詳細を表示します。検索結果が0件の場合は、適用済みの検索語句と明示的なリセット方法を表示します。リモートの在庫を検索したかのように示すことはありません。

1. 資産名またはタグを入力してください。送信するまで現在の検索結果は変わりません。

2. フォームを送信し、フィルター適用後のローカル配列に基づいて検索結果数を更新します。

3. 検索結果を確認するか、クエリをクリアします。操作を開始したコントロールにフォーカスを維持します。

関連する仕様を確認する

## Dell デザインシステム ラベル、ランドマーク、通知

### 検索対象を明確にする

フォームは「Device inventory」という名前の検索ランドマークです。入力中も、持続的なラベルと補足テキストを表示します。クリアアイコンにはクリックハンドラーを持つspanではなく、aria-labelを備えたボタンを使用します。装飾用の記号は支援技術から隠します。検索結果数はpoliteなステータスメッセージとして、キー入力のたびではなく送信後に更新します。

関連する仕様を確認する

### 選択はページ移動ではない

各検索結果には、押下状態と完全なアクセシブルネームを備えた実際のボタンを使用します。詳細見出しで、確認中の項目を識別できます。このサンプルには管理バックエンドがないため、デバイス管理ページを開くように見せかけるリンクは設けません。現在の選択項目はテキストラベルだけでなく、枠線でも示します。

関連する仕様を確認する

## Dell デザインシステム 実際のアセットを読み込み、グループを初期化する

### 文書化されたバンドルから始める

許可された社内アプリケーションでは、Dell Artifactoryから@dds/componentsをインストールし、プロジェクトのスタイルシート処理を通じてdds-styles.cssを読み込みます。単独の概念実証では、以下に示すバージョン固定済みの公開CDNリンクを使用してください。マークアップの生成後にInputGroupを初期化します。送信、クリア、絞り込みのイベントハンドラーは、アプリケーション側で実装します。

関連する仕様を確認する

### 画面構成ができてから最適化する

まずはスタイルシート全体を使用するのが簡単です。必要なものだけを選択して組み込む場合は、global/semantic tokensとフォントに加え、使用する各コンポーネントのスタイルシートが必要です。トークンだけではコンポーネントのトークンが不足し、アイコンのクラスだけではフォントは読み込まれません。これらの補助バンドルを削除すると、コントロールが表示されているように見えても、スタイルが不完全になることがあります。

関連する仕様を確認する

## 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として保存し、文書化されたDDS 3.2.0 CDNにネットワーク接続できる状態でローカル配信します。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ドキュメントには、単独の検索 API はありません。

- アイコンのみのボタンにはaria-labelを使用します。フィルタリングはアプリケーション側で行います。

## Dell デザインシステム エージェント設定

### 実装の出発点

index.htmlとして保存し、文書化されたDDS 3.2.0 CDNにネットワーク接続できる状態でローカル配信します。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>
```

### あなたのプロジェクト向けプロンプト

```
DDS 3.2.0のInputGroupを完全な構成で使用し、デバイス台帳の検索をスコープ内で構築します。手動送信、視認できるスコープラベル、ローカルでの結果通知、クリア動作を維持してください。DDSのセマンティックトークンとレスポンシブな文字サイズを使用し、検索 API を独自に作成したり、旧v2のインポートに置き換えたりしないでください。
```

## Dell デザインシステム 情報源と対象範囲

DDS v3を独立して参照した資料です。内部パッケージの利用にはDellレジストリへのアクセスが必要です。公開されているバージョン指定CDNはプロトタイプ向けに案内されています。DellのID、資産管理との接続、公式認定を示すものではありません。

- DDS 3.2.0のインストール 内部パッケージへのアクセス、公開プロトタイプ用CDN、必須のスタイルバンドル。

- 検索の実装 検索はInputGroupを組み合わせて実装します。単独の検索 API はありません。

- 検索の設計 手動検索と自動検索の動作、スコープラベル、ランドマーク。

- スペーシング セマンティックな間隔を11段階で定義。

- タイポグラフィ 標準とコンパクトのスケール。

- 入力欄のトークン 入力欄に使用する、ドキュメントで定義されたセマンティックカラー。

- トークンの構造 グローバル、セマンティック、コンポーネント各トークンの境界。

- グリッド 密度と4ピクセルのリズム。

## Dell デザインシステム 関連リソース

### Duet デザインシステム

Duet の LocalTapiola のカラーと間隔のスケールを、日付範囲のワークフローを通して確認します。ISO 形式の日付値、明示的な範囲検証、コンポーネントのフォーカスメソッド、オープンソースの日付選択コンポーネントとの明確な境界を扱います。

### Elastic UI

検証済みの Borealis スケール、ネイティブのテーブルと検索コントロール、重大度フィルター、ローカルに保存するイベントを備えた Elastic UI ログエクスプローラーを構築し、完全な React ソースを確認できます。

### Emplifi Soul

Soulのデータテーブルの仕様を、6ピクセルの間隔、階層化されたカラーの役割、コンパクトな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を組み合わせて実装します。単独の検索 API はありません。](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [検索の設計 手動検索と自動検索の動作、スコープラベル、ランドマーク。](https://www.delldesignsystem.com/components/search)
- [スペーシング セマンティックな間隔を11段階で定義。](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)
- [グリッド 密度と4ピクセルのリズム。](https://www.delldesignsystem.com/foundations/grid)