# CoreUI デザインシステム

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

メモを選択して一括アーカイブし、アーカイブタブを確認してから、直前の操作を元に戻します。

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

インストール済みのコンパイル済みスタイルシートに基づく、Bootstrap 5.9.0のCoreUIライトテーマの既定値です。これらの--cui-*名は実際のランタイム変数です。サンプルアプリケーションでは無料コンポーネントを使用し、CoreUI PROウィジェットを前提としていません。

### ライトテーマのロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --cui-primary | #5856d6 | CoreUIのプライマリパープル。 |
| --cui-primary-contrast | #fff | プライマリカラーと組み合わせるテキスト。 |
| --cui-secondary | #6b7785 | セカンダリロール。 |
| --cui-success | #1b9e3e | 成功状態の役割。 |
| --cui-info | #39f | 情報ロール。 |
| --cui-warning | #f9b115 | 警告ロール。 |
| --cui-danger | #e55353 | 危険ロール。 |
| --cui-primary-bg-subtle | #cfc7f3 | プライマリのコンテキストカードに使う淡い背景。 |
| --cui-primary-text-emphasis | #3634a3 | 淡いプライマリの表面上に置くテキスト。 |
| --cui-primary-border-subtle | #9d92e6 | コンテキストカードの境界線。 |
| --cui-danger-bg-subtle | #f9d4d4 | 高優先度バッジの表面。 |
| --cui-danger-text-emphasis | #671414 | 高優先度バッジのテキスト。 |
| --cui-warning-bg-subtle | #feecc5 | 中優先度バッジの表面。 |
| --cui-warning-text-emphasis | #764705 | 中優先度バッジのテキスト。 |
### タイポグラフィと表面の既定値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | システムUIフォントスタック。 |
| --cui-body-font-size | 1rem | 本文の既定サイズは1rem。情報密度の高いテーブルでは独自に14pxを指定しています。 |
| --cui-body-line-height | 1.5 | 本文の既定の行の高さ。 |
| --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | ライトテーマのプライマリ本文色。 |
| --cui-body-bg | #fff | プライマリの表面。 |
| --cui-tertiary-bg | #f3f4f7 | この例でのページ背景。 |
| --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | 補助テキストのロール。 |
| --cui-border-color | #dbdfe6 | 既定の区切り線の色。 |
### 角丸とフォーカス関連の変数

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --cui-border-radius | 0.375rem | 16pxをルートサイズとした場合の既定値は6px相当。 |
| --cui-border-radius-sm | 0.25rem | 小サイズは4px相当。 |
| --cui-border-radius-lg | 0.5rem | 大サイズは8px相当。 |
| --cui-border-radius-xl | 1rem | 特大サイズは16px相当。 |
| --cui-border-radius-pill | 50rem | ピル型。 |
| --cui-focus-ring-width | 0.25rem | フォーカスリングの幅。 |
| --cui-focus-ring-opacity | 0.25 | フォーカスリングの不透明度。 |
| --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | プライマリカラーを基にしたフォーカスリングの色。 |
### 独自に設定したキューの密度

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Page padding | 32px; 24px 14px mobile | 独自に設定したアプリケーションの内側余白。 |
| Table minimum width | 740px | ローカルのレスポンシブなスクロール領域で、列の読みやすさを保ちます。 |
| Table cell padding | 16px | ネイティブなテーブル構造を基にした独自の密度設定。 |
| Table text | 14px; headings 12px | 独自に設定したコンパクトな階層構造。 |
| g-3 summary row | 1rem native gutter | レスポンシブな指標カードでは標準のグリッド間隔を使用します。 |
| Toast behavior | autohide: false | 元に戻す操作は、閉じるか、後続の一括操作に置き換わるまで使用できます。 |
## CoreUIデザインシステム 完全ガイド

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

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

## CoreUIデザインシステム 実際に使用しているCoreUIランタイムを選ぶ

### 実際に使用しているCoreUIランタイムを選ぶ

> このサンプルでは、Bootstrap 5.9.0向けのCoreUIを使用します。CSSであり、ブラウザー向けのJavaScriptパッケージです。CoreUIにはフレームワーク別のパッケージもありますが、そこで使うコンポーネントのインポートは、この例のデータ属性とは互換性がありません。セットアップでは、ReactやVueのプロバイダーを前提とせず、対応するスタイルシートとバンドル済みスクリプトを1つずつ使用します。

このレビュー用デスクでは、無料のカード、テーブル、フォーム、タブ、トーストを使用します。有料のPROデータグリッドや高機能な有料セレクターに置き換えることはありません。この境界を明確にすることで、文書化されていないテンプレートの購入を必要とせず、記載されたパッケージからサンプル全体を再現できます。

関連する仕様を確認する

## CoreUIデザインシステム 実際のパープルのプライマリカラーと対応するステータスロールを使う

### 実際のパープルのプライマリカラーと対応するステータスロールを使う

CoreUIのライトテーマでは、プライマリカラーに#5856d6、コントラストカラーに白を使用します。レビューの原則を示すカードでは、primary-bg-subtle、primary-border-subtle、primary-text-emphasisを組み合わせています。これらの名前は連携した表面のスタイルを表すため、色を付けた背景に根拠のない前景色を組み合わせることはありません。

高優先度と中優先度のバッジも同様に、dangerまたはwarningの淡い表面と、対応する強調テキストを組み合わせています。テキストラベルによって、色とは独立して分類が伝わります。これらはデザインレビュー用のサンプル優先度であり、製品内のすべての赤いバッジが同じ状態を表すという意味ではありません。

関連する仕様を確認する

## CoreUIデザインシステム 本文の既定タイポグラフィと、情報密度の高い作業テーブルを分ける

### 本文の既定タイポグラフィと、情報密度の高い作業テーブルを分ける

コンパイル済みのCoreUIでは、本文の既定サイズは1rem、行の高さは1.5です。このサンプルでは、情報密度の高いレビューキューに合わせ、テーブル内のテキストを14px、列見出しを12pxにしています。ページの見出しと概要の値には、独自に設定したより大きなサイズを使用します。ガイドでは、こうしたアプリケーション固有の上書きをライブラリ全体の既定値とは区別しています。

3つのコンテキストカードには、ネイティブのレスポンシブグリッドとg-3の間隔を使用します。小さな画面では「受信トレイ」と「アーカイブ」が横並びになり、3つ目の説明カードは1行全体を使います。すべての数値は、表示されている5件のサンプルレコードから算出しています。無関係なダッシュボード指標や、作り上げた成長グラフはありません。

関連する仕様を確認する

## CoreUIデザインシステム データ属性で実際のタブパネルを制御する

### CoreUIのデータ属性で実際のタブパネルを制御する

「受信トレイ」と「アーカイブ」は、data-coreui-toggle="tab"と対応するタブパネルへのターゲットを持つボタンベースのタブです。マークアップには、tablist、tab、tabpanel、aria-controls、aria-labelledbyの関連付けが含まれています。CoreUI JavaScriptコンポーネントがアクティブ状態と表示を更新するため、アプリケーションのハンドラーで下線だけを切り替える仕組みではありません。

このコンポーネントの見た目は、nav-underline-borderクラスで定義しています。タブを切り替えても、レコードはアーカイブされず、選択も解除されません。タブで切り替わるのはローカルキューの表示範囲です。アプリケーションの選択済みSetとアーカイブ済みSetは、それぞれ独立した状態として管理されます。

関連する仕様を確認する

## CoreUIデザインシステム：全選択に意味のある混在状態を設ける

### 全選択には意味のある混合状態を設定する

各ノートには固定のRシリーズIDが割り当てられています。行にチェックを入れると、そのIDが選択済みSetに追加されます。ヘッダーのチェックボックスは、受信トレイ内のすべてのレコードが選択されている場合はチェック済み、一部が選択されている場合は混在状態、受信トレイが空の場合は無効になります。これらの状態は、キューを描画するたびに再計算されます。

選択がない場合、バッチ操作ボタンは無効になり、隣のテキストに現在の選択件数が表示されます。アーカイブ操作の後は選択を解除し、すでにアーカイブされたレコードが次のバッチに誤って残らないようにします。汎用的な「解決済み」ラベルに置き換えるのではなく、元のノートと担当者をレコードに保持します。

1. ノートを2件選択し、ヘッダーのチェックボックスが混在状態になることを確認します。

2. 選択したレコードをアーカイブし、受信トレイの件数が2件減ることを確認します。

3. 「アーカイブ」を開き、元の依頼と担当者を確認します。

関連する仕様を確認する

## CoreUIデザインシステム：取り消し可能な特定の操作をトーストで通知する

### トーストには、取り消し可能な特定の操作を1つ表示する

アプリケーションは、直近にアーカイブしたバッチの正確なIDを記録してから、ネイティブのToastインスタンスのshowメソッドを呼び出します。通知に「元に戻す」操作が含まれるため、autohideはfalseに設定されています。任意の短いタイマーで操作の機会を失わせる例ではありません。トーストは明示的に閉じることもできます。

「元に戻す」を選ぶと、保存済みIDだけがアーカイブ済みSetから削除され、直近のバッチのスナップショットが消去され、操作ボタンが無効になります。後続のバッチを元に戻しても、それ以前のアーカイブバッチはそのままアーカイブされています。完全な取り消し履歴があるかのように誤解させない、意図的な1段階の操作です。

関連する仕様を確認する

## CoreUIデザインシステム：アーカイブ後も依頼内容を読めるようにする

### アーカイブ後もリクエストを読み取れる状態に保つ

受信トレイのテーブルには、ノートのタイトル、具体的な変更依頼、対象領域、優先度、担当者が表示されます。アーカイブには、タイトル、ID、担当者、依頼全文を保持した簡潔なリストが表示されます。解決後はテーブルの装飾を減らしつつ、変更内容の把握に必要な情報は削除しません。

モバイルでは、table-responsive内のテーブルに最小幅740pxを維持します。名前付き領域はキーボードでフォーカスでき、フォーカス時には視覚的なスタイルが表示されます。横方向のスクロールはテーブル内に収まり、ドキュメント全体の幅は広がりません。スクロールバーを避けるためだけに重要な列を削除すると、レビュー作業の質が損なわれます。

関連する仕様を確認する

## CoreUIデザインシステム：バックエンドを装わずに結果を持続的に表示する

### バックエンドを想定せず、永続的な結果を表示する

トーストにはpoliteのステータスロールとアトミックな通知を設定しています。別のインラインステータスで、ローカルでのアーカイブまたは取り消しの結果を伝えます。ページには外部の課題管理ツールが接続されていないため、どちらも外部の課題がクローズされたとは伝えません。このプレビューが変更するのはメモリ内のSetだけなので、再読み込みすると元の5件のノートに戻ります。

アーカイブリストを含め、レコードのタイトルと説明はtextContentで挿入します。2種類の優先度は固定のクラスマッピングで表現します。これにより、ユーザー入力に似たテキストをHTMLの構造から分離でき、サンプル内のデータの流れを確認しやすくなります。

- バッチの実際の件数とローカル処理であることを明示します。

- スナップショットが有効な間は「元に戻す」ボタンを使用できる状態に保ちます。

- ローカルDOMの更新を、リモート処理が成功したかのように表現しないでください。

関連する仕様を確認する

## CoreUIデザインシステム：ローカルモジュールより先にCoreUIバンドルを読み込む

### ローカルモジュールより先にCoreUIバンドルを読み込む

セットアップ全体では、パッケージのdistアセットをローカルの公開パスにコピーし、app.jsより前にcoreui.bundle.min.jsを読み込みます。このバンドルはcoreui.Toastを公開し、data-coreui属性を使ったタブの動作を提供します。この構成でBootstrapのランタイムを別途追加する必要はなく、重複した制御による混乱を招くおそれがあります。

data-coreui-theme="light"でライトテーマを明示します。より大規模なアプリケーションでは、CoreUIのカラーモード機能を採用できますが、セマンティックなテキストと背景レイヤーの組み合わせをまとめて確認してください。ローカルでの検証では、一部選択、2件のバッチ操作、アーカイブタブでの内容確認、元に戻す操作による復元、幅390pxのビューポートを確認しました。

関連する仕様を確認する

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

### キュー、アーカイブタブ、取り消し可能なトースト

CoreUIのdata属性、テーブル操作、セマンティックな優先度バッジ、持続的に表示されるトースト。

```
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>
```

コードリファレンス

- このバンドルではdata-coreui-*属性を使用してください。他のライブラリのdata-bs-*属性を流用しないでください。

- テーブルには、名前付きのローカル水平スクロール領域があります。

- 優先度の色には、「高」「中」の明示的なラベルを添えています。

### バッチ選択と直近のバッチを元に戻す操作

固定のレコードIDで選択済みSetとアーカイブ済みSetを管理し、ネイティブのToastで通知の表示を制御します。

```
const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false});
function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='<td><input class="form-check-input" type="checkbox"></td><td><strong></strong><p class="small text-body-secondary mb-0 mt-1"></p></td><td></td><td><span class="badge"></span></td><td></td>';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();}
function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size<total;}
q('#select-all').onchange=e=>{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render();
```

コードリファレンス

- 全選択では、チェック済み、未チェック、混在の各状態を表示します。

- 「元に戻す」では、直近のバッチに含まれるIDだけを復元します。

- すべてのレコードテキストはtextContentで挿入します。

### 元のキューの情報密度

ネイティブのCoreUIカードとテーブルスタイルを使ったページ構成。

```
html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}}
```

コードリファレンス

- テーブル幅を740pxにしているのは、アプリケーションで読みやすさを確保するための選択であり、CoreUIのデフォルトではありません。

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

### 実装の出発点

Bootstrap 5.9.0用のCoreUIを検証済みです。提供されるapp.jsはキュー全体のマークアップを前提としており、ネットワーク操作は行いません。HTMLラッパーには本文全体のマークアップが含まれます。提供されるインタラクション例とCSSの例は、ここで参照するファイル名で保存してください。

```
<!-- npm install @coreui/coreui@5.9.0 -->
<!-- Copy node_modules/@coreui/coreui/dist to public/vendor/coreui. -->
<html lang="en" data-coreui-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/coreui/css/coreui.min.css">
<link rel="stylesheet" href="style.css">
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>

<script src="/vendor/coreui/js/coreui.bundle.min.js"></script>
<script src="app.js"></script>
</html>
```

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

```
CoreUI 5.9.0を使ったデザインレビュー用オペレーションデスクをベースにしてください。data-coreui属性を使ったネイティブのタブと取り消し可能なトースト、5件のレビュー記録、選択IDのSetを維持し、混在状態を導出する一括選択を実装します。選択したバッチをアーカイブしてアーカイブタブに表示し、「元に戻す」で直近のバッチを復元できるようにします。テーブルの水平スクロールは領域内に収め、選択状態とアーカイブ済み状態を区別してください。対応するCoreUIバンドルを使用し、Bootstrapの属性名に置き換えたり、サーバー側でアーカイブされると表現したりしないでください。
```

## CoreUIデザインシステム：参照元と適用範囲

Bootstrap 5.9.0の無料コンポーネントに対応するCoreUIです。テーマのデフォルトと、元の情報密度を保つための選択を区別しています。アーカイブと取り消しの対象は、ローカルのサンプルレコードだけです。

- 概要 対応するCSSと、バンドル版JavaScriptを使用しています。

- CSS変数 実行時のテーマカスタマイズ。

- カラー セマンティックなテーマロール。

- タイポグラフィ 標準のタイポグラフィ基盤。

- タブ データ属性とパネルのセマンティクス。

- トースト 固定通知とコンポーネントのメソッド。

- チェックボックス ネイティブのチェックボックスの状態。

- テーブル レスポンシブなテーブル構成。

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

### daisyUI

CSSネイティブの招待状作成ツール。daisyUIの5つのセマンティックテーマ、文字色との組み合わせ、ラジオボタンの連結、範囲コントロール、ブラウザー標準の検証、実際のダイアログを使った確認ステップを紹介します。

### Element Plus

Element Plusの実際のTransferモデル、フィルター、無効化されたオプションを使って、モジュール選択用のワークベンチを構築します。色、文字サイズ、コントロールの寸法は検証済みの値に基づいています。

### Flowbite

ネイティブなFlowbite 4のアコーディオンとドロワーを組み合わせ、セマンティックなテーマエイリアスを検証済みです。固定表示の持ち物チェックリストと、アクセシブルなローカル素材メモのワークフローを備えています。


- [実装リファレンス](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [ソース](https://coreui.io/bootstrap/docs/customize/color/)
- [ソース](https://coreui.io/bootstrap/docs/content/typography/)
- [ソース](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [ソース](https://coreui.io/bootstrap/docs/layout/gutters/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/customize/color/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/content/typography/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/components/toasts/)
- [関連する仕様を確認する](https://coreui.io/bootstrap/docs/content/tables/)
- [コードリファレンス](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [コードリファレンス](https://coreui.io/bootstrap/docs/components/toasts/)
- [コードリファレンス](https://coreui.io/bootstrap/docs/content/tables/)
- [概要 対応するCSSと、バンドル版JavaScriptを使用しています。](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [CSS変数 実行時のテーマカスタマイズ。](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [カラー セマンティックなテーマロール。](https://coreui.io/bootstrap/docs/customize/color/)
- [タイポグラフィ 標準のタイポグラフィ基盤。](https://coreui.io/bootstrap/docs/content/typography/)
- [タブ データ属性とパネルのセマンティクス。](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [トースト 固定通知とコンポーネントのメソッド。](https://coreui.io/bootstrap/docs/components/toasts/)
- [チェックボックス ネイティブのチェックボックスの状態。](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [テーブル レスポンシブなテーブル構成。](https://coreui.io/bootstrap/docs/content/tables/)