# UIkit デザインシステム

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

3つのセッションを切り替え、準備の詳細を展開し、セッションを選んで、参加者向けのローカルプランを検証します。

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

UIkit 3.25.25 Lessソースとコンパイル済みのデフォルトCSS。@で始まる名前はコンパイル時のLess変数であり、ランタイムのCSSカスタムプロパティではありません。プレビューには、明示した画面固有のオーバーライドが追加されています。

### タイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | デフォルトのシステムフォントスタック。 |
| @global-font-size | 16px | 基本のテキストサイズ。 |
| @global-line-height | 1.5 | 本文の行送り。 |
| @global-large-font-size | 1.5rem | 大きな文字のヘルパー。 |
| @global-medium-font-size | 1.25rem | 中程度の文字のヘルパー。 |
| @global-small-font-size | 0.875rem | 小さな文字のヘルパー。 |
### 色の役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @global-color | #666 | 標準のテキスト。 |
| @global-emphasis-color | #333 | 強調テキストと見出し。 |
| @global-muted-color | #999 | デフォルトの控えめなテキスト。プレビューではメタデータを #65717a に上書きします。 |
| @global-link-color | #1e87f0 | デフォルトのリンクスタイル。 |
| @global-background | #fff | デフォルトのページ／背景面。 |
| @global-muted-background | #f8f8f8 | 控えめなタイル／背景面。 |
| @global-primary-background | #1e87f0 | プライマリのアクセント背景面。 |
| @global-secondary-background | #222 | セカンダリの暗色背景面。 |
| @global-border | #e5e5e5 | 中立色の境界線。 |
### 余白とコントロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @global-margin | 20px | デフォルトの余白リズム。 |
| @global-small-margin | 10px | 小さい余白。 |
| @global-medium-margin | 40px | 中程度の余白。 |
| @global-large-margin | 70px | 大きい余白。 |
| @global-gutter | 30px | デフォルトのグリッドガター。 |
| @global-small-gutter | 15px | 小さいグリッドガター。 |
| @global-medium-gutter | 40px | 中程度のグリッドガター。 |
| @global-control-height | 40px | 標準の入力欄／ボタンの高さ。 |
| @global-control-small-height | 30px | 小さなコントロールの高さ。 |
| @global-control-large-height | 55px | 大きなコントロールの高さ。 |
### レスポンシブ幅の範囲

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @breakpoint-small | 640px | @s の幅ルールが適用されます。 |
| @breakpoint-medium | 960px | @m の幅ルールが適用されます。プランナーは2列レイアウトになります。 |
| @breakpoint-large | 1200px | @l の幅ルールが適用されます。 |
| @breakpoint-xlarge | 1600px | @xl の幅ルールが適用されます。 |
### ワークショップ独自の調整

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Heading | 42px; 34px below 640px | uk-heading-small を明示的にローカルで上書き。 |
| Card padding | 28px; 20px below 640px | 独自のコンパクトなレイアウトを明示的に適用。 |
| Metadata color | #65717a | 淡色の背景面でメタデータの色をローカルで濃く設定。 |
| Focus outline | 3px solid #145ca5, offset 4px | タブ、アコーディオンのタイトル、ボタンにキーボードフォーカス時の強調表示を追加。 |
## UIkit デザインシステム完全ガイド

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

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

## UIkit デザインシステム CSS クラスと属性による動作

### CSSのクラスと属性駆動の動作

> UIkit は CSS フレームワークと JavaScript コンポーネントレイヤーを組み合わせています。uk-card クラスは背景面のスタイルを設定し、uk-switcher 属性はインタラクティブなコンポーネントを初期化します。この違いはワークショップの例で確認できます。カードやフォームコントロールは CSS だけでも表示できますが、セッションの切り替えやアコーディオンの展開には UIkit JavaScript バンドルが必要です。

プレビューでは、コンパイル済みの実際の 3.25.25 スタイルシートとランタイムをローカルで読み込みます。3つのセッションは長さもレイアウトも異なるため、切り替えると、見た目が同じカードのラベルだけが変わるのではなく、実際のコンテンツの動作を確認できます。参加者プラン用のローカルスクリプトは UIkit のランタイムとは別のもので、全体を掲載しています。

関連する仕様を確認する

## UIkit デザインシステムの Less 変数とランタイムスタイリング

### Less変数とランタイムのスタイル設定

@ で始まるリファレンス名は Less 変数です。これらはコンパイル時に解決されるため、通常のブラウザ用スタイルシートに @global-primary-background を記述しても、ランタイムのテーマは変わりません。この表にはインストール済みソースで確認した値を示し、プレビューではパッケージに含まれるコンパイル済みのデフォルト CSS を使用しています。

ブランドに合わせた UIkit テーマを作成するには、ドキュメントに記載された Less のインポート／カスタマイズ手順を使って再コンパイルしてください。ページ単位の調整には、公式スタイルシートの後に通常の CSS を読み込み、クラスを指定して適用できます。この例では後者の方法で、タイトルのサイズ、カードのパディング、メタデータの色を調整しています。これらの上書きが新たな公式 UIkit トークンであるとは述べていません。

関連する仕様を確認する

## UIkit デザインシステムのテキスト、カラー、背景面の階層

### テキスト、カラー、背景面の階層

デフォルトのグローバルフォントは、16ピクセル、行の高さ 1.5 のシステムフォントスタックです。デフォルトのプライマリ背景色は #1e87f0、セカンダリは暗い中立色、控えめな背景面は #f8f8f8 です。これらの役割により、プライマリの選択アクションと、より控えめな説明用タイルを区別できます。提供する仕様表には、装飾的な4色のパレットではなく、テキストと背景面の両方の値を記載しています。

ワークショップでは、大きさに上限を設けた見出し、小さなプログラムラベル、各セッションカード内のタイトルを使用しています。メタデータの色はローカルで #65717a に暗くしています。準備用タイルには独自の淡い青色の背景面と、通常の暗色テキストを使用しています。暗い背景なら自動的に反転色になるという前提はありません。暗い背景には、適切な UIkit の反転スタイル、または明示的に対応させたテキストスタイルが必要です。

関連する仕様を確認する

## UIkit デザインシステムのセッションナビゲーションとコンテンツの連携

### セッションナビゲーションとコンテンツを連携する

ナビゲーションリストには、connect: #sessions とフェードアニメーションを指定した uk-switcher を設定します。コンテンツリストには uk-switcher クラスと対応する ID を設定します。リストの順序で対応関係が決まります。最初の切り替え項目が最初のコンテンツ項目を操作するため、セッションを追加したり順序を変更したりする場合は、両方を合わせて更新してください。connect のセレクターを明示すれば、要素が直後に隣接していることに依存せずに済みます。

ナビゲーションには、見た目を整えるため uk-tab を使用します。アクティブな項目の状態と、それに伴うアクセシビリティ動作は UIkit が処理します。元のプラン状態は意図的に独立しています。別のセッションを表示しても、選択中のセッションが暗黙に変更されることはありません。「セッションを選択」を操作した場合にのみ、選択中のラベルが変わり、参加者入力欄にフォーカスが移動します。

1. 「プロトタイピング」を開いて、内容の違いを確認してください。

2. このセッションを選択し、下の選択中ラベルを確認してください。

3. 「システム相談会」に切り替えても選択しないでください。ローカルのプランには引き続き「プロトタイピング」と表示されます。

関連する仕様を確認する

## UIkit デザインシステムのレスポンシブ幅とガターの仕組み

### レスポンシブな幅とガターの管理

セッションコンテンツでは、uk-grid 内で uk-width-2-3@m と uk-width-1-3@m を使用します。960px の中ブレークポイントでは、コンテンツと準備用タイルが横に並び、それより狭い幅では縦に積み重なります。プランと準備の各セクションにも、同じブレークポイントで幅を半分にするルールを適用し、小さな画面でも論理的なソース順を保ちます。

UIkit のグリッドでは、グリッドクラスに応じてガターが処理されます。この例では、大きなセクションに uk-grid-medium、ヘッダーに uk-grid-small を使用しています。グリッドの子要素に任意のマージンを追加し、分割幅の合計が引き続き正しく収まると想定しないでください。端の余白は外側のコンテナとパディングで確保し、ローカルのモバイル向け調整でカードのパディングと見出しサイズを小さくしています。

関連する仕様を確認する

## UIkit デザインシステムのネイティブな状態管理による準備の詳細

### ネイティブコンポーネントの状態を使った準備の詳細

uk-accordion-default クラスでデフォルトのスタイルが適用されます。uk-accordion 属性には multiple: true を設定しているため、準備に関する回答を開いても、もう一方は閉じません。各項目には uk-accordion-title と uk-accordion-content が含まれます。展開状態とコンテンツの表示はランタイムが制御します。CSS のクラスだけでは、その動作は実現しません。

2つの質問では、「何を持参するか」と「ローカルのプランナーが席を確保するか」という、異なる実用上の懸念に答えます。2つ目の回答を明示することで、外部のイベント処理が行われるとインターフェースが誤解させるのを防ぎます。この境界はアコーディオン内だけでなく、適用済みのステータスにも「席は確保されていません」と表示しています。

- multiple: true にすると、両方の回答を開いたままにできます。

- タイトルとコンテンツは、同じアコーディオン項目内に配置してください。

- 各タイトルでは、キーボードフォーカス時のアウトラインが表示されます。

関連する仕様を確認する

## UIkit デザインシステムでライブラリの見た目とアプリケーションの検証を分ける

### ライブラリの見た目とアプリケーションの検証を分ける

参加者名の入力欄には、uk-form-controls内のuk-inputを使用し、実際のラベルと補足テキストを付けます。ブラウザーの必須入力チェックにより、未入力のまま送信することはできません。アプリケーション側でも空白文字のみの入力をチェックし、入力エラー時にuk-form-dangerとaria-invalidを設定して、見た目とセマンティクスの状態を一致させます。編集すると、以前のエラーはクリアされます。

セッションを選ぶと、選択内容がローカルに更新され、参加者名の入力欄にフォーカスが移ります。送信すると、参加者名と選択したセッションを含むステータスメッセージが表示されます。入力されたテキストはtextContentで挿入するため、マークアップを入力しても実行されません。これはバックエンドを持たないローカルプランナーです。UIkitは、このフォームに登録、保存、通知の機能があるかのような意味を付け加えません。

関連する仕様を確認する

## UIkit デザインシステムの読み込み CSS、ランタイム、アプリケーションコードの順

### CSS、Runtime、アプリケーションコードの順に読み込む

uikit@3.25.25をインストールし、distからコンパイル済みのCSSとJavaScriptをローカルのアセットにコピーします。CSSは小規模なレイアウト調整より前に読み込み、uikit.min.jsはapp.jsより前に読み込みます。2つのスクリプトにはどちらもdeferを指定すると、解析後もソースコード上の順序が維持されます。bodyの例には、すべてのコンポーネント属性とコンテンツが含まれています。

このページではuk-iconを使用しないため、アイコンバンドルは不要です。後からアイコンを追加する場合は、対応するアイコンランタイムを読み込み、アイコンのみのコントロールには意味のあるラベルを付けてください。ファイル名が同じだからといって、新しいJavaScriptのバンドルと古いスタイルシートを組み合わせないでください。コンポーネントの構造とスタイルには、同じバージョンに固定したパッケージのものを使用してください。

関連する仕様を確認する

## UIkit デザインシステム：コンテンツが増えてもスイッチャーの接続を維持する

### コンテンツが増えてもSwitcherとの連携を安定させる

スイッチャーは、ナビゲーション項目とコンテンツ項目を順番で対応付けます。セッションを追加する場合は、両方に同じ位置で追加します。また、connect: #sessionsで接続先を明示します。1ページに複数の独立したスイッチャーを配置する場合は、接続先ごとに一意のIDを付け、初期化属性でも対応関係を維持してください。

選択したワークショップは、アクティブなパネルとは別に保持されます。別のセッションを閲覧しても、プランナーですでに選択した内容が意図せず上書きされないようにします。パネルのコンテンツが長くなる場合は、新たにアクティブになったパネル内の共通レスポンシブグリッドとアコーディオンも確認してください。最初のパネルだけを対象にサイズを調整すると、ユーザーが切り替えるまでレイアウトの問題に気付かないことがあります。

関連する仕様を確認する

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

### UIkitのネイティブ属性を使ったワークショップページ

スイッチャーは#sessionsに接続。アコーディオンは複数セクションの展開に対応。グリッドの幅は@mで有効になります。

```
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
```

コードリファレンス

- uk-switcher属性で動作を初期化し、uk-switcherクラスでコンテンツコンテナを識別します。

- この構成ではUIkitのアイコンパックは必要ありません。

### 元のローカルプランの動作

セッションの選択と入力チェックは、UIkitのネイティブな操作と組み合わせたアプリケーションロジックです。

```
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
```

コードリファレンス

- セッションを選ぶと、参加者名の入力欄にフォーカスが移ります。

- 予約サービスや通知機能は呼び出しません。

### 画面固有の明示的な調整

UIkitのコンポーネントを維持しながら、間隔とフォーカスを小規模に調整します。

```
body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}}
```

コードリファレンス

- これらのオーバーライドは、公式のデフォルトトークン値ではありません。

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

### 実装の出発点

提示された画面の調整内容をstyle.cssとして、ローカルプランの動作をapp.jsとして保存します。SwitchеrとAccordionはUIkitが処理します。この構成ではアイコンバンドルは不要です。HTMLのラッパーにはbodyのマークアップ全体が含まれます。提示されたインタラクションとCSSの例は、ここで参照するファイル名で保存してください。

```
<!-- npm install uikit@3.25.25
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
```

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

```
提示されたワークショッププランナーを拡張する際は、UIkit 3.25.25を使用してください。明示的な#sessions接続を持つuk-switcher、ナビゲーションとコンテンツの順序の一致、uk-gridのレスポンシブな比率、複数項目を同時に開けるネイティブなアコーディオンを維持します。セッションの閲覧と選択は別の操作として扱います。選択すると、ラベル付きの参加者名入力欄にフォーカスが移ります。空白文字だけを入力して送信した場合は、uk-form-dangerとaria-invalidを表示してください。ステータスには選択したセッションと参加者名をローカルプランとして示し、席を予約したと誤解させないでください。アプリケーションスクリプトより前に、対応するUIkitランタイムを読み込みます。
```

## UIkit デザインシステムのソースと適用範囲

UIkit 3.25.25のネイティブコンポーネントを参照します。Lessの値はコンパイル時の定義です。ローカルのタイトル、パディング、フォーカスのオーバーライドは独自のものです。イベントの予約は行いません。

- Less コンパイル時のテーマ変数。

- スイッチャー ナビゲーションとコンテンツが連動します。

- アコーディオン 複数項目の展開と構造。

- グリッド レスポンシブな幅とガター。

- Form 入力欄とバリデーション用クラス。

- インストール ランタイムとスタイルの読み込み。

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

### Vant

Vant 4で構築したモバイル向け住所選択フロー。実際のCSS変数、住所IDの管理、入力検証、テーマ切り替え、ローカルのみへの明示的な保存に対応。

### Vuestic UI

ソースで確認したライト／ダークのプリセット、アクセシブルな評価ラベル、テキストエリアの入力検証、算出される平均値、完了した評価を保持する保存状態を備えた、Vuesticのネイティブな批評ワークシート。

### Web Awesome

ネイティブのカスタム要素におけるWeb Awesomeの実際のセマンティックトークンを確認できます。スコープ付きの角丸と間隔の変更、Shadow DOMのスタイリング、セレクトの動作、入力チェックが含まれます。


- [実装リファレンス](https://getuikit.com/docs/switcher)
- [ソース](https://getuikit.com/docs/less)
- [ソース](https://getuikit.com/docs/utility)
- [関連する仕様を確認する](https://getuikit.com/docs/javascript)
- [関連する仕様を確認する](https://getuikit.com/docs/less)
- [関連する仕様を確認する](https://getuikit.com/docs/card)
- [関連する仕様を確認する](https://getuikit.com/docs/switcher)
- [関連する仕様を確認する](https://getuikit.com/docs/grid)
- [関連する仕様を確認する](https://getuikit.com/docs/accordion)
- [関連する仕様を確認する](https://getuikit.com/docs/form)
- [関連する仕様を確認する](https://getuikit.com/docs/installation)
- [コードリファレンス](https://getuikit.com/docs/switcher)
- [コードリファレンス](https://getuikit.com/docs/form)
- [コードリファレンス](https://getuikit.com/docs/utility)
- [Less コンパイル時のテーマ変数。](https://getuikit.com/docs/less)
- [スイッチャー ナビゲーションとコンテンツが連動します。](https://getuikit.com/docs/switcher)
- [アコーディオン 複数項目の展開と構造。](https://getuikit.com/docs/accordion)
- [グリッド レスポンシブな幅とガター。](https://getuikit.com/docs/grid)
- [Form 入力欄とバリデーション用クラス。](https://getuikit.com/docs/form)
- [インストール ランタイムとスタイルの読み込み。](https://getuikit.com/docs/installation)