# Alberta デザインシステム ## Alberta デザインシステムインターフェースのプレビュー タスクを個別に選択し、進捗を確認して、このページ内で内容をレビューし、ネイティブのコントロールをリセットできます。 ## Alberta デザインシステムデザインリファレンス @abgov/web-components 3.0.0のライトテーマから取得した実際のCSSエクスポートです。ライセンスが必要なAcuminはバンドルされていません。 ### ライトテーマの操作とステータスの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-interactive-hover | #045092 | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-interactive-focus | #006dcc | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-text-default | var(--goa-color-greyscale-black) | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-greyscale-100 | #f2f0f0 | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-emergency-default | #da291c | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-success-default | #006f4c | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | | --goa-color-success-light | #d8f7e6 | ダークテーマの上書きが適用される前の、固定バージョン3.0.0のスタイルシートから抽出した値です。意図する状態に応じたセマンティックな役割を使ってください。 | ### 余白と角丸のスケール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --goa-space-3xs | .125rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-2xs | .25rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-xs | .5rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-s | .75rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-m | 1rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-l | 1.5rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-xl | 2rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-2xl | 3rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-space-3xl | 4rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-border-radius-xs | .25rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-border-radius-s | .375rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-border-radius-m | .5rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | | --goa-border-radius-l | .625rem | 公開されているスペーシングまたは角丸のプリミティブです。アプリケーションの2カラムレイアウトに切り替わるブレークポイントは、実装側で定義したレイアウト上の選択です。 | ### タイポグラフィのプリミティブ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-2 | .875rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-3 | 1rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-4 | 1.125rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-6 | 1.5rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-8 | 2rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-size-9 | 2.5rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-line-height-3 | 1.5rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-line-height-6 | 2.5rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-line-height-7 | 3rem | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-weight-regular | 400 | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | | --goa-font-weight-bold | 700 | 公式のファミリー書き出し情報をここに記録しています。公開用の見本では、ライセンスされたAcuminフォントファイルを再配布せず、代わりにArialを使用しています。 | ## Alberta デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Alberta デザインシステム Web Componentsとバージョンの境界 ### 実際に動作している実装から始める > この見本は@abgov/web-components 3.0.0を使用しています。JavaScriptをインポートするとカスタム要素が登録され、index.cssをインポートするとグローバルなトークンレイヤーが適用されます。生のHTML APIではgoaプレフィックス付きの要素を使用しますが、Reactの例ではイベントの仕様が異なるGoabラッパーを使用します。ReactのonChangeプロパティを、そのまま生のカスタム要素に設定しないでください。 ### パッケージのバージョンとデザインのバージョンを区別する パッケージのバージョンとコンポーネントのスタイルバージョンは、同じ項目ではありません。一部のコントロールでは、独立したversion属性が定義されています。この例では、別のトークン値を参照しながらスタイルバージョンだけを気付かないうちに切り替えることを避け、固定したパッケージの既定値を使用しています。この表には、このビルドで実際に使用されるライトテーマのエクスポートを記載しています。 ## Alberta デザインシステム ロール、リズム、タイポグラフィ ### 色で状態を伝える 主要アクションと進捗のアクセントには、interactive-defaultロールを使用します。確認時に問題がある場合は、緊急性を示すテキストと役立つ案内を表示し、ローカルでの確認が完了した場合は、成功を示す色の補助サーフェスを使用します。成功色が示すのはローカルでの確認状態であり、政府サービスへの申請完了ではありません。テキストラベルと数値も同じ情報を伝えるため、色相だけに頼ることはありません。 ### フォントの使用範囲を明記する 公開されているフォントファミリーはAcuminから始まり、スタイルシートには外部ホストのフォント宣言が含まれています。プレビューではArialを明示的に代替フォントとして使用し、外部フォントへのリクエストを取り除いています。Acuminを再配布することはありません。トークンのリファレンスには実際のファミリー名を残しているため、許可を受けたサービスで承認済みのブランドフォントを読み込めます。代替フォントからライセンス済みフォントに切り替える際は、折り返し位置を再確認してください。 ## Alberta デザインシステム チェックボックスのラベルと説明 ### 独立したタスクには個別の選択肢を使う ネイティブのgoa-checkboxコントロールを4つ使用し、どの順番でも確認できる準備項目を表します。それぞれに重複しないname、表示テキスト、用途を説明する文が設定されています。ラジオボタンでは単一選択を意味し、このタスクを正しく表せません。実際のサービスでは、調査に基づく案内に架空の準備内容を置き換える必要があります。 - 各チェックボックスに、重複しない安定したnameを設定します。 - 表示ラベルは簡潔にし、説明は具体的にします。 - 複数選択に意味がある場合にのみ、独立したチェックボックスを使います。 ### カスタムイベントのペイロードを読み取る 生のWeb Componentは、name、checked、valueをevent.detailに含めた_changeイベントを発行します。アプリケーションではcheckedの真偽値を使って、選択されたインデックスのSetを更新します。ラベルのテキストから状態を推測したり、小さな内部入力欄をクリックさせたりする必要はありません。そのため、表示ラベルのクリックとキーボードによる選択で、同じ状態遷移が行われます。 ## Alberta デザインシステム 進捗と確認状態 ### 選択内容から進捗を算出する 件数とネイティブのHTML progress要素は、同じSetから算出されます。項目を2つ選ぶと4項目中2項目となり、選択を解除すると両方の表示が0に戻ります。progress要素にはアクセシブルな名前があり、隣接するステータステキストには件数が明示されます。アップロード、ネットワークリクエスト、完了までのタイマーを装う処理はありません。 ### 編集後は以前の確認結果を無効にする 確認時に1項目以上が選択されている場合に限り、ローカルでテキストの要約を作成します。何も選択せずに確認しようとするとメッセージを表示し、最初のチェックボックスにフォーカスを移します。その後チェックボックスが変更されるたびに以前の確認結果を非表示にするため、新しい選択内容を反映しているように誤解されません。選択を解除すると、表示上の件数だけでなく、実際のネイティブコントロールも更新されます。 ## Alberta デザインシステム レスポンシブなチェックリストの構成 ### タスクと補足情報を読みやすく保つ デスクトップでは、チェックリストの横に進捗を示す補助パネルを配置します。画面幅が狭い場合は、コントロールの後にパネルを表示します。タスクのラベルは読みやすいサイズを保ち、説明はその下で自然に折り返されます。サイドパネルの青いラインは控えめな目印であり、別のアクションとして競合することはありません。 ### 操作対象のサイズを保つ コンポーネントライブラリは、チェックボックスとボタンの操作スタイルを提供します。アプリケーションのCSSでは、ネイティブの操作領域を置き換えることなく、スペーシングと周囲のグリッドを調整します。画面の小さい端末では、2つのアクションが折り返されます。確認は主要アクションです。選択を解除する操作は視覚的に控えめにし、実際のアプリケーションで次の手順であるかのように見せません。 ## Alberta デザインシステム チェックリストの完全な実装 ### ソース一式を実行する Viteのvanillaプロジェクトを作成し、固定したweb-componentsパッケージをインストールして、用意されたエントリーファイルとCSSを保存します。ルートのマウント要素はそのまま残してください。JavaScriptには、実装する4つのタスク、ネイティブイベントのバインディング、算出される件数、確認とリセット時の状態遷移がすべて含まれています。アカウント、非公開エンドポイント、外部データセットは必要ありません。 1. @abgov/web-components 3.0.0をインストールし、JavaScriptとindex.cssをインポートします。 2. エントリーファイルとalberta.cssの完全版を、ルートのマウント要素とともに保存します。 3. 複数のタスクを選択し、算出された進捗を確認します。 4. 確認して選択内容を見直し、すべてのネイティブ選択を解除します。 ### コンポーネントのイベントとチェックリストの処理を分ける 選択状態の情報源として、生の_changeイベントのevent.detail.checkedを使用します。Reactラッパーのプロパティと、生のgoa-checkboxイベントは別のインターフェースです。ペイロードに合わせて調整せずにハンドラーを流用すると、進捗表示と画面上のチェックボックスの状態が一致しなくなることがあります。 チェックリストの項目数を1つ以上にするのは、組み込みのチェックボックスの仕様ではなく、アプリケーション側のポリシーです。選択数、進捗値、確認テキストは、1つの選択 Set から算出してください。「選択をクリア」を実行するときは、Set だけでなく各カスタム要素の checked プロパティもリセットします。選択肢が編集されたら、以前の選択内容を示す確認結果が残らないよう、すぐに無効化してください。実際の準備サービスでは、未完了のチェックリストを許容する場合もあります。進捗を必須条件にする前に、方針を決めてください。 ## Alberta デザインシステムのコンポーネント例 ### main.js — ネイティブのチェックリスト一式 登録、作成者によるタスクの記述、選択の処理、確認とリセット時の状態遷移をすべて含みます。 ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()}); ``` コードリファレンス - 生のカスタム要素では _change イベントと _click イベントを使用します。React のラッパーコールバックで置き換えないでください。 ### alberta.css — タスクのレイアウトと明示的なフォントフォールバック ネイティブコントロールを使用した、オリジナルのレスポンシブな構成です。 ``` main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}} /* Public specimen font fallback; load approved Acumin only where licensed. */ :root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;} ``` コードリファレンス - ローカルプレビューでは、使用されていない外部フォントのインポートを省略しています。パッケージの完全版スタイルシートには外部フォントの宣言が含まれる場合があります。このオーバーライドにより、この検証では Arial を使用します。 ## Alberta デザインシステム エージェントのセットアップ ### 実装の出発点 固定したネイティブコントロールは、送信バックエンドなしでローカルにブラウザテスト済みです。 ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` web-components 3.0.0、実際のセマンティックな CSS ロール、明示的なフォントライセンスの境界を用いて、Alberta の準備チェックリストを作成します。ネイティブのチェックボックスの説明を使用し、選択内容から進捗を算出し、項目が空の確認を拒否します。編集後に古い要約を無効にし、実際のコントロールをリセットしてください。結果はすべてローカルにとどめ、作成したタスクは説明用の例であることを明確にします。 ``` ## Alberta デザインシステム 出典と対象範囲 明示的な Arial フォントフォールバックを使用する Alberta web components 3.0.0 上で動作する、OpenDesign コンポーネントの検証です。作成したタスクは架空のものであり、政府の受給資格や申請要件を定めるものではありません。 - 開発者向けセットアップ パッケージのインポートと、サポートされている実装。 - チェックボックス API 生のカスタム要素の属性とイベント。 - ボタン API アクションの種類とコンポーネントの動作。 - 公開ソース バージョン管理されたコンポーネントの実装と CSS のエクスポート。 ## Alberta デザインシステム 関連リソース ### Amsterdam Amsterdamの実際のオープンソースSwitchの仕様を、完全なニュートラルテーマ、アクセシブルなラベル、即時反映される閲覧設定とともに使用します。 ### B.C. デザインシステム 実際のセマンティックトークン、ネイティブのReact Ariaコントロール、条件に応じて表示される連絡先項目、完全なバリデーション動作を備えた、B.C.風のリマインダー設定フォームを作成します。 ### Canada.ca デザインシステム GC Design System のタイポグラフィ、セマンティックトークン、ネイティブWebコンポーネントを、開閉表示と空の状態の動作を備えた、検索可能な準備ガイドでご覧ください。 - [実装リファレンス](https://design.alberta.ca/components/checkbox/) - [ソース](https://github.com/GovAlta/ui-components) - [コードリファレンス](https://design.alberta.ca/components/checkbox/) - [コードリファレンス](https://design.alberta.ca/get-started/developers/setup/) - [開発者向けセットアップ パッケージのインポートと、サポートされている実装。](https://design.alberta.ca/get-started/developers/setup/) - [チェックボックス API 生のカスタム要素の属性とイベント。](https://design.alberta.ca/components/checkbox/) - [ボタン API アクションの種類とコンポーネントの動作。](https://design.alberta.ca/components/button/) - [公開ソース バージョン管理されたコンポーネントの実装と CSS のエクスポート。](https://github.com/GovAlta/ui-components)