# Duet デザインシステム

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

出発日と帰着日を設定し、無効な期間を試して、両端を含む日数を算出します。

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

Duetの公開ドキュメントのスナップショットです。主要なシステムコンポーネント、LocalTapiolaのデフォルトトークン、ドキュメントに記載された10.7.0/CDN連携を掲載しています。別パッケージの@duetds/date-picker 1.xではありません。一部の角丸トークンには「レビュー中」の表示が残っています。

### デフォルトテーマとTurvaテーマの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --color-primary | #0077b3 | LocalTapiolaのアクションカラー。 |
| --color-primary-dark | #004b81 | より濃いインタラクティブ状態。 |
| --color-primary-darker | #00619b | リンクの役割。 |
| --color-primary-light | #c6e1ee | 範囲の色合い。 |
| --color-secondary | #082a4d | 本文テキスト。 |
| --color-primary-turva | #e61740 | 別テーマであるTurvaのアクションカラー。 |
| --color-danger | #d61c52 | バリデーション。 |
| --radius-default | 4px | 入力欄とコンテナ。 |
| --radius-pill | 20rem | ボタン。 |
| --radius-medium | 8px; In Review | 本番利用可能とは表記しないでください。 |
### スペーシングトークン

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --space-xxx-small | 2px | 狭い間隔。 |
| --space-xx-small | 4px | 狭い間隔。 |
| --space-x-small | 8px | コンパクト。 |
| --space-small | 12px | 小。 |
| --space-medium | 16px | デフォルト。 |
| --space-large | 20px | コンポーネント間。 |
| --space-x-large | 28px | 広めの間隔。 |
| --space-xx-large | 36px | ボタンの左右のパディング。 |
| --space-xxx-large | 48px | セクション。 |
| --size-layout-max-width | 1110px | ドキュメントに記載されたレイアウトの最大幅。 |
### 文字のサイズ階層

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $font-size-medium | 16px / 1rem | 本文とH5。 |
| $font-size-large | 20px / 1.25rem | H4. |
| $font-size-x-large | 24px / 1.5rem | H3. |
| $font-size-xx-large | 36px / 2.25rem | H2. |
| $font-size-xxx-large | 48px / 3rem | H1. |
| $font-size-xxxx-large | 72px / 4.5rem | H0. |
### Date Pickerの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| value / min / max | YYYY-MM-DD strings | 保存形式はISO形式で、表示用テキストではありません。 |
| duetChange | detail.value and detail.valueAsDate | 選択日イベント。 |
| validity | badInput / valueMissing / rangeOverflow / rangeUnderflow / customError | 受け入れる前に確認してください。 |
| setFocus() | Promise<void> | 入力欄にフォーカスします。ホストのfocus()ではありません。 |
| show() / hide() | Promise<void> | カレンダーとフォーカス管理。 |
| language | Deprecated | html langを使用してください。 |
| disallow-weekends | Boolean | コンポーネント単位の除外。 |
### アクションのプロパティ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| variation="primary" | Main action | 1つのビューにつき、主要なアクションは1つにします。 |
| submit | Boolean, default false | フォーム送信を明示的に有効化します。 |
| url | Anchor destination | ナビゲーションのセマンティクス。 |
| expand | 100% container | 幅広のアクション。 |
| theme | default / turva / inherited empty | ブランドの選択。 |
| margin="none" | Remove automatic margin | アプリケーション側でスペーシングを調整します。 |
## Duet デザインシステム Duetデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Duet デザインシステム Duetの主要システムとオープンソースのピッカーは別々です

### サンプルにはパッケージの仕様を適用してください

> Duetは、テーマ付きのコンポーネントと基盤を通じてLocalTapiolaとTurvaを提供しています。別途公開されている@duetds/date-pickerプロジェクトは、より限定的なオープンソース配布物です。タグ名が同じでも、プロパティ、ローカライズの設定、CSS変数に互換性があるとは限りません。現行の主要なデザインシステムとは別のものです。

このページの連携コードは主要なシステムを対象としています。オフラインプレビューでは、ネイティブの日付入力と、リンク先のDuetトークンをもとにしたオリジナルのスタイルを使用しています。範囲のルールを示すものであり、Duetのカレンダーポップアップやキーボード操作モデルを実行するものではありません。

関連する仕様を確認する

## Duet デザインシステム ブランドブルーとステータスレッドは役割が異なります

### アクセントカラーだけを入れ替えず、テーマを切り替えます

LocalTapiolaのデフォルトテーマでは、アクションにブルー、本文テキストに濃いブルーを使用します。Turvaには、独自のレッドのアクションカラーとセカンダリテキストの役割があります。アクションカラーだけを切り替えても、テーマ全体の関係性は反映されません。また、現行の表では旧Turvaの色合いに非推奨の表示が付いています。過去のパレット項目をすべてコピーすると、古い指針まで残ってしまいます。

オリジナルの旅行日程サンプルでは、次のアクションにブルーを使い、選択した期間の修正が必要な場合に限ってレッドを使います。これは日程調整の例であり、保険の推奨、見積もり、購入を示すものではありません。

関連する仕様を確認する

## Duet デザインシステム 16pxの本文が階層の基準になります

### どこでも大きなタイトルを使う必要はありません

Duetのサイズ表は、大きいサイズの段階で16、20、24、36、48、72pxと進みます。フォームと日付ラベルを目立たせつつも、計画パネル内に収まるよう、24pxの段階を使用しています。マーケティング向けの72pxは、コンパクトなフォームの標準サイズではありません。

LocalTapiolaとTurvaのフォントパッケージは別々のアセットです。オフライン版の解釈ではシステムフォントにフォールバックし、ブランドフォントファイルは同梱していません。認可されたアプリケーションでは、ドキュメントに記載されたフォントの読み込み方法で選択したファミリーを読み込み、それに対応するウェイトトークンを使用してください。

関連する仕様を確認する

## Duet デザインシステム 実際の20pxと28pxの段階を使用します

### Duetは一般的な8px刻みではありません

このスケールには、一般的な2の累乗に加えて12、20、28、36pxが含まれます。システムのフォームのリズムに合わせるには、こうした中間の間隔も重要です。横幅の広いレイアウトでは2つの入力欄の間を20px空け、縦に並べる場合も各ラベルを対応する入力欄とセットにしてください。サンプルのブレークポイントはアプリケーション側で決めるものです。

デフォルトでは、コントロールの角丸は4px、ボタンはピル型の角丸です。トークンリファレンスにある新しいコンテナ角丸値の一部には、明示的に「レビュー中」と表示されています。このガイドでもその状態を維持し、記載されたすべてのトークンを承認済みとして扱うことはしません。

関連する仕様を確認する

## Duet デザインシステム ISO形式の値を保存し、表示形式を説明します

### ローカライズされた表示文字列をデータとして解析しないでください

コンポーネントの値と範囲指定にはYYYY-MM-DDを使用します。選択日イベントには文字列とDateオブジェクトの両方が含まれます。比較と保存には文字列を使い、フィールドのローカライズされた表示はプレゼンテーション上の扱いとしてください。現在のローカライズ設定の入口はドキュメント言語です。以前のlanguageプロパティは非推奨です。

この例では、2027年6月の期間だけ日付を選べます。この固定期間はテストの再現性を高めるためのもので、サンプル上の制約であることが明確です。本番フォームでは、許可する期間をプロダクトのルールに基づいて決め、そのルールをフィールドの近くで説明してください。

関連する仕様を確認する

## Duet デザインシステム 日付が有効でも、期間が有効とは限りません

### 各フィールドの有効性を確認したうえで、日付同士の関係を確認します

コンポーネントのvalidityオブジェクトは、各フィールドのエラーを示します。帰着日が出発日より前でも、暦上の日付としては有効な場合があるため、アプリケーション側で2つの日付を別途確認する必要があります。ネイティブの例では、明確なエラーを設定し、内部の入力欄にフォーカスを移動するドキュメント記載のメソッドsetFocus()を使用します。

日数は出発日と帰着日を含めて数えます。同じ日の出発と帰着なら1暦日です。ISO形式の日付をUTCの午前0時として変換すると、夏時間の変更によって暦日間の日数が端数になるのを防げます。この計算はオリジナルのアプリケーションロジックであり、Duetの料金ルールではありません。

1. 開始日または終了日が未入力、形式不正、あるいは範囲外の場合は無効とします。

2. 帰着日が出発日より前の場合は無効とします。

3. 修正が必要なフィールドにフォーカスを移動します。

4. 両方の確認に通った場合に限り、両端を含む期間を計算します。

関連する仕様を確認する

## Duet デザインシステム 主要アクションはフォーム送信を意味しません

### Duetではsubmitプロパティで明示的に指定します

主要システムのボタンでは、submitを指定してフォーム送信を有効にします。デフォルトはfalseです。ここで示す構成では、クリック時にローカルの結果を準備するため、このプロパティは必要ありません。遷移先はurlで指定すると、アンカーとしてのセマンティクスが適用されます。

プレビューでは、どちらかの入力値が変更されると、準備済みのメッセージを消去します。そうしないと、訪問者がすでに変更した値を確認したかのようにメッセージが表示されてしまいます。非同期処理はないため、スピナーは表示しません。

- 主要な準備アクションは1つにします。

- 結果がローカルで生成されることを明記します。

- ポリシーの作成を示すために、成功を表す文言を使い回さないでください。

関連する仕様を確認する

## Duet デザインシステム メインシステムのアセットを互換性のある一式として固定する

### このサンプルはドキュメント化されたスナップショットであり、最新バージョンであることを保証するものではありません

調査した使用方法のページでは、コンポーネント10.7.0とCSS 5.1.4が使われていますが、検索インデックスのスナップショットには、すでにそれ以降のリリースが記載されています。この例では、直接確認した2つのバージョンを意図的に組み合わせて使用しています。本番環境に導入する際は、1つのリリースを選び、対応するCSS、フォント、コンポーネントの動作を確認してください。

日付フィールドはカスタム要素です。メソッドを呼び出す前に定義されるのを待ち、duetChangeにリスナーを登録し、ネイティブのchangeイベントを想定せず、ドキュメントに記載されたペイロードを読み取ってください。同じページでメインシステムのCDNモジュールと単独のピッカーを混在させないでください。どちらも同じタグを定義します。

関連する仕様を確認する

## Duet デザインシステムのコンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。オフライン時のHTML解釈には、ブラウザー標準の日付入力と、検証済みのDuet標準テーマ値を使用します。Duetのカレンダーランタイムではありません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Duet travel period interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f7fa;color:#082a4d;font:16px/1.5 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:36px 28px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}h1{font-size:36px;line-height:1.2;font-weight:600;margin:0 0 20px}p{margin:0 0 20px}.hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-bottom:28px}.art{height:170px;position:relative;overflow:hidden;border-radius:50%;background:#c6e1ee}.sun{position:absolute;top:25px;right:60px;width:36px;height:36px;border-radius:50%;background:white}.hill{position:absolute;background:#0077b3;width:210px;height:170px;bottom:-95px;left:-10px;transform:rotate(25deg);border-radius:24px}.hill.two{left:135px;background:#00619b;bottom:-110px;transform:rotate(-25deg)}.road{position:absolute;width:150px;height:200px;border:12px solid white;border-radius:50%;top:65px;left:95px;transform:rotate(25deg)}.card{background:white;border-radius:4px;padding:28px;box-shadow:0 2px 8px #082a4d0d;display:grid;grid-template-columns:1fr 230px;gap:28px}h2{font-size:24px;line-height:1.3;margin:0 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-weight:600;margin-bottom:8px}input{width:100%;max-width:100%;min-width:0;border:1px solid #909599;border-radius:4px;font:inherit;color:inherit;padding:12px;background:white}input[aria-invalid=true]{border-color:#d61c52}button{background:#0077b3;color:white;border:0;border-radius:20rem;padding:12px 36px;font:600 16px/1.5 system-ui;cursor:pointer}button:hover{background:#004b81}button:focus-visible,input:focus-visible{outline:3px solid #082a4d;outline-offset:3px}.error{font-size:14px;color:#d61c52;min-height:24px;margin:8px 0 20px}.calendar{background:#f0f7fa;border-radius:4px;padding:20px}.calendar strong{display:block;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}.grid span{padding:3px 0}.grid .in-range{background:#c6e1ee}.grid .endpoint{background:#0077b3;color:white;border-radius:50%}.caption{font-size:12px;margin:12px 0 0}.result{margin-top:20px;background:#e4f1f7;padding:20px;border-radius:4px}.result:empty{display:none}.boundary{font-size:12px;margin-top:28px}.hint{font-size:14px}@media(max-width:650px){main{padding:24px 16px}.hero{grid-template-columns:1fr}.art{display:none}h1{font-size:28px}.card{grid-template-columns:1fr;padding:20px}.fields{grid-template-columns:1fr;gap:16px}.calendar{max-width:300px;width:100%}button{width:100%;padding:12px 20px}}
</style><main><div class="hero"><div><div class="eyebrow">Travel period planner</div><h1>Make time for a change of scenery.</h1><p>Choose a departure and return date to explore an inclusive calendar-day count.</p></div><div class="art" aria-hidden="true"><div class="sun"></div><div class="hill"></div><div class="hill two"></div><div class="road"></div></div></div><div class="card"><section><h2>When will you travel?</h2><p class="hint" id="hint">Use dates from 1–30 June 2027. This fixed month is for demonstration.</p><form novalidate><div class="fields"><div><label for="start">Departure</label><input id="start" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-10" required aria-describedby="hint error"></div><div><label for="end">Return</label><input id="end" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-17" required aria-describedby="hint error"></div></div><div class="error" id="error" role="alert"></div><button type="submit">Prepare date range</button></form></section><aside class="calendar"><strong>June 2027</strong><div class="grid" id="calendar" aria-hidden="true"></div><p class="caption" id="range-caption">10–17 June selected</p></aside></div><div class="result" id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Duet tokens with native date fields. The calendar image is a non-interactive range overview. No insurance quote, booking or policy is created.</p></main><script>const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result'),error=document.querySelector('#error');function valid(){return start.validity.valid&&end.validity.valid&&start.value&&end.value&&end.value>=start.value}function draw(){let days=['M','T','W','T','F','S','S'].map(d=>'<span>'+d+'</span>').join('')+'<span></span>';for(let i=1;i<=30;i++){let iso='2027-06-'+String(i).padStart(2,'0'),range=valid()&&iso>=start.value&&iso<=end.value,edge=range&&(iso===start.value||iso===end.value);days+='<span class="'+(edge?'endpoint':range?'in-range':'')+'">'+i+'</span>'}document.querySelector('#calendar').innerHTML=days;document.querySelector('#range-caption').textContent=valid()?start.value+' to '+end.value:'Choose a valid range to highlight it.'}function changed(){result.textContent='';error.textContent='';start.removeAttribute('aria-invalid');end.removeAttribute('aria-invalid');draw()}[start,end].forEach(el=>el.oninput=changed);document.querySelector('form').onsubmit=e=>{e.preventDefault();let bad;if(!start.value||!start.validity.valid){error.textContent='Choose a departure date in June 2027.';bad=start}else if(!end.value||!end.validity.valid){error.textContent='Choose a return date in June 2027.';bad=end}else if(end.value<start.value){error.textContent='Return must be on or after departure.';bad=end}if(bad){bad.setAttribute('aria-invalid','true');bad.focus();result.textContent='';return}const days=(Date.parse(end.value+'T00:00:00Z')-Date.parse(start.value+'T00:00:00Z'))/86400000+1;result.textContent=days+' calendar '+(days===1?'day':'days')+', including departure and return. Local draft: '+start.value+' to '+end.value+'. No policy created.'};draw();</script></html>
```

コードリファレンス

- このドキュメントでは、ブラウザー標準の日付コントロールを使用しています。別のDuetの例ではメインシステムのピッカーを使用しているため、単独のオープンソース日付ピッカーパッケージと混同しないでください。

### メインシステムのDate Pickerを2つ使って検証する

ラベル付きのフィールドを2つ配置し、6月の日付範囲を設定して開始日と終了日の順序を確認します。無効なピッカーにフォーカスを移し、両端を含む日数を計算します。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

コードリファレンス

- これはメインシステムのCDN経由で@duetds/componentsを使用しており、@duetds/date-picker 1.xは使用していません。

- 同じ日付の範囲は、両端を含めて暦日1日です。

- 日数の計算にはUTCを使い、夏時間によるずれを避けます。

## Duet デザインシステム AIエージェントのセットアップ

### 実装の出発点

調査した連携ページに明記されているバージョンを使った、メインシステムのCDNによる完全な構成です。公開されている検索スナップショットには、より新しいバージョンも記載されています。これが最新だと仮定せず、互換性のあるリリースを固定してください。ここではフォントを再配布していません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

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

```
Duetメインシステムで、ラベル付きの日付ピッカーを2つ使った日付範囲を作成します。ISO形式の値と有効性チェックを使用します。開始日と終了日の順序は個別に検証し、エラー時にはsetFocusを呼び出します。準備のための明示的なローカル操作を用意してください。同じページでは、スタンドアロンの日付ピッカーパッケージを使用しないでください。
```

## Duet デザインシステム ソースと対象範囲

独立したOpenDesignのリファレンスです。オリジナルのプランナーであり、保険契約、予約、見積もりは作成されません。Duetメインシステムと、別途提供されるオープンソースの日付ピッカーでは仕様が異なります。

- デザイントークン テーマカラー、スペーシング、トークンのステータス。

- タイポグラフィ スケールとブランド専用フォント。

- 日付ピッカー ISO形式の値、検証、メソッド。

- Button オプトインの送信とバリエーション。

- コンポーネントの使い方 メインシステムのCDNとパッケージ。

- スタンドアロンの日付ピッカー 別途配布されるオープンソース版です。このコードの対象ではありません。

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

### Elastic UI

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

### Emplifi Soul

Soulのデータテーブルの仕様を、6ピクセルの間隔、階層化されたカラーの役割、コンパクトなInterの文字組みとあわせて確認してください。一括選択、欠損データの表記、集計行を比較したうえで、確認済みの非公開 React パッケージのエントリーポイントを調べてください。

### Esri Calcite

集中的な空間ツールに役立つ Calcite の実践的なリファレンスです。意味に即した界面表面と青いアクション、コンパクトな検査パネル、実際の入力 API、サイトレビューの完全なローカル実例を掲載しています。


- [実装リファレンス](https://www.duetds.com/components/date-picker/)
- [ソース](https://www.duetds.com/tokens/)
- [ソース](https://www.duetds.com/typography/)
- [ソース](https://www.duetds.com/components/date-picker/)
- [ソース](https://www.duetds.com/components/button/)
- [関連する仕様を確認する](https://www.duetds.com/using-components/)
- [関連する仕様を確認する](https://www.duetds.com/tokens/)
- [関連する仕様を確認する](https://www.duetds.com/typography/)
- [関連する仕様を確認する](https://www.duetds.com/components/date-picker/)
- [関連する仕様を確認する](https://www.duetds.com/components/button/)
- [コードリファレンス](https://www.duetds.com/components/date-picker/)
- [デザイントークン テーマカラー、スペーシング、トークンのステータス。](https://www.duetds.com/tokens/)
- [タイポグラフィ スケールとブランド専用フォント。](https://www.duetds.com/typography/)
- [日付ピッカー ISO形式の値、検証、メソッド。](https://www.duetds.com/components/date-picker/)
- [Button オプトインの送信とバリエーション。](https://www.duetds.com/components/button/)
- [コンポーネントの使い方 メインシステムのCDNとパッケージ。](https://www.duetds.com/using-components/)
- [スタンドアロンの日付ピッカー 別途配布されるオープンソース版です。このコードの対象ではありません。](https://github.com/duetds/date-picker)