@monoharada/wcf-mcp 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -3
- package/core/constants.mjs +12 -6
- package/core/prefix.mjs +13 -1
- package/core/register.mjs +170 -16
- package/core.mjs +8 -0
- package/data/component-selector-guide.json +198 -56
- package/data/custom-elements.json +174 -6
- package/data/design-tokens.json +1 -1
- package/data/guidelines-index.json +1 -1
- package/data/llms-full.txt +85 -19
- package/data/pattern-registry.json +18 -0
- package/data/skills-registry.json +41 -0
- package/package.json +1 -1
- package/validator.mjs +314 -0
|
@@ -1,23 +1,165 @@
|
|
|
1
1
|
{
|
|
2
|
-
"schemaVersion":
|
|
2
|
+
"schemaVersion": 2,
|
|
3
|
+
"componentPatternMap": [
|
|
4
|
+
{
|
|
5
|
+
"pattern": "タブ切替 / tablist",
|
|
6
|
+
"componentIds": ["tab"],
|
|
7
|
+
"usage": "<dads-tab><div data-tab-label=\"概要\">内容</div><div data-tab-label=\"詳細\">内容</div></dads-tab>",
|
|
8
|
+
"note": "role=\"tablist\" の独自実装は不要です。",
|
|
9
|
+
"keywords": ["tab", "tabs", "tablist", "tab panel", "タブ", "タブ切替", "セクション切替"]
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"pattern": "モーダルダイアログ",
|
|
13
|
+
"componentIds": ["dialog"],
|
|
14
|
+
"note": "フォーカストラップと Escape 閉じを自動提供します。",
|
|
15
|
+
"keywords": ["dialog", "modal", "ダイアログ", "モーダル", "確認ダイアログ"]
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"pattern": "ドロワー / サイドパネル",
|
|
19
|
+
"componentIds": ["drawer"],
|
|
20
|
+
"note": "フィルターパネルや補助導線のオーバーレイ表示に使います。",
|
|
21
|
+
"keywords": ["drawer", "side panel", "ドロワー", "サイドパネル", "フィルターパネル"]
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"pattern": "アコーディオン / 折りたたみ",
|
|
25
|
+
"componentIds": ["accordion-details", "accordion-item-details"],
|
|
26
|
+
"note": "FAQ や設定グループ向けです。",
|
|
27
|
+
"keywords": ["accordion", "collapsible", "アコーディオン", "折りたたみ"]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"pattern": "単一の折りたたみ",
|
|
31
|
+
"componentIds": ["disclosure"],
|
|
32
|
+
"note": "詳細表示の開閉に使います。",
|
|
33
|
+
"keywords": ["disclosure", "details", "expand", "ディスクロージャー"]
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"pattern": "ステップナビゲーション / ウィザード",
|
|
37
|
+
"componentIds": ["step-navigation"],
|
|
38
|
+
"note": "multi-step フォームの進捗表示です。",
|
|
39
|
+
"keywords": ["step", "wizard", "multi-step", "stepper", "ステップ", "ウィザード"]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"pattern": "ファイルアップロード / ドラッグ&ドロップ",
|
|
43
|
+
"componentIds": ["file-upload"],
|
|
44
|
+
"note": "ネイティブ file input を置き換える標準候補です。",
|
|
45
|
+
"keywords": ["file upload", "drag drop", "file input", "アップロード", "ドラッグ&ドロップ"]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"pattern": "ローディング / スピナー",
|
|
49
|
+
"componentIds": ["spinner", "progress-bar"],
|
|
50
|
+
"note": "indeterminate は spinner、determinate は progress-bar を使います。",
|
|
51
|
+
"keywords": ["spinner", "loading", "progress", "progress bar", "ローディング", "スピナー", "進捗"]
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"pattern": "ローディングアイコン（静的）",
|
|
55
|
+
"componentIds": ["loading-icon"],
|
|
56
|
+
"note": "アニメーションなしの読み込みアイコンです。",
|
|
57
|
+
"keywords": ["loading icon", "static loading", "読み込みアイコン", "砂時計"]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"pattern": "パンくずリスト",
|
|
61
|
+
"componentIds": ["breadcrumb"],
|
|
62
|
+
"note": "階層ナビゲーションを表します。",
|
|
63
|
+
"keywords": ["breadcrumb", "パンくず", "現在位置"]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"pattern": "リソースリスト / ファイルDL一覧",
|
|
67
|
+
"componentIds": ["resource-list"],
|
|
68
|
+
"usage": "<dads-resource-list href=\"/files/guide.pdf\" download data-interaction=\"whole\" data-style=\"frame\"><span slot=\"title\">申請ガイド</span></dads-resource-list>",
|
|
69
|
+
"note": "独自の .doc-item カードリストを置き換える候補です。",
|
|
70
|
+
"keywords": ["resource list", "file list", "download list", "download", "リソースリスト", "ファイル一覧", "ダウンロード"]
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"pattern": "説明リスト / dt+dd",
|
|
74
|
+
"componentIds": ["description-list"],
|
|
75
|
+
"note": "独自の dl + CSS grid を置き換える候補です。",
|
|
76
|
+
"keywords": ["description list", "definition list", "dl", "説明リスト", "詳細情報"]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"pattern": "ステータスバッジ / ラベル",
|
|
80
|
+
"componentIds": ["chip-label"],
|
|
81
|
+
"note": "badge 風 UI は chip-label の color + variant を使います。",
|
|
82
|
+
"keywords": ["badge", "status badge", "label", "tag", "ステータスバッジ", "チップ"]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"pattern": "タグ / フィルタートークン",
|
|
86
|
+
"componentIds": ["chip-tag"],
|
|
87
|
+
"note": "remove/filter 可能なタグです。",
|
|
88
|
+
"keywords": ["tag", "filter token", "chip", "タグ", "フィルター"]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"pattern": "通知バナー",
|
|
92
|
+
"componentIds": ["notification-banner"],
|
|
93
|
+
"note": "info / warning / error の通知表示に使います。",
|
|
94
|
+
"keywords": ["notification", "alert banner", "info banner", "通知", "お知らせ"]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"pattern": "緊急バナー",
|
|
98
|
+
"componentIds": ["emergency-banner"],
|
|
99
|
+
"note": "障害・緊急告知用です。",
|
|
100
|
+
"keywords": ["emergency", "urgent", "critical alert", "緊急", "障害通知"]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"pattern": "ページナビゲーション / ページ送り",
|
|
104
|
+
"componentIds": ["page-navigation"],
|
|
105
|
+
"note": "URL 連携は as=\"link\"、JS 連携は as=\"button\" を使います。",
|
|
106
|
+
"keywords": ["pagination", "page navigation", "ページ送り", "ページネーション"]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"pattern": "検索ボックス",
|
|
110
|
+
"componentIds": ["search-box"],
|
|
111
|
+
"note": "独自の input[type=search] + button を置き換える候補です。",
|
|
112
|
+
"keywords": ["search", "search box", "検索", "検索ボックス"]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"pattern": "グローバルメニュー",
|
|
116
|
+
"componentIds": ["global-menu"],
|
|
117
|
+
"note": "サイト全体のグローバルナビゲーションです。",
|
|
118
|
+
"keywords": ["global menu", "site navigation", "グローバルメニュー"]
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"pattern": "メニューリスト / サイドナビ",
|
|
122
|
+
"componentIds": ["menu-list"],
|
|
123
|
+
"note": "サイドバー内のナビゲーションリストです。",
|
|
124
|
+
"keywords": ["menu", "side nav", "navigation list", "メニュー", "サイドナビ"]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"pattern": "日付入力",
|
|
128
|
+
"componentIds": ["date-picker", "calendar"],
|
|
129
|
+
"note": "日付入力は date-picker、カレンダー単体は calendar を使います。",
|
|
130
|
+
"keywords": ["date picker", "calendar", "日付選択", "カレンダー"]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"pattern": "コンボボックス / オートコンプリート",
|
|
134
|
+
"componentIds": ["combobox"],
|
|
135
|
+
"note": "検索可能なセレクトです。",
|
|
136
|
+
"keywords": ["combobox", "autocomplete", "typeahead", "コンボボックス", "オートコンプリート"]
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"pattern": "スイッチ / トグル",
|
|
140
|
+
"componentIds": ["switch"],
|
|
141
|
+
"note": "ON/OFF 切替向けです。",
|
|
142
|
+
"keywords": ["switch", "toggle", "スイッチ", "トグル", "on/off"]
|
|
143
|
+
}
|
|
144
|
+
],
|
|
3
145
|
"categories": [
|
|
4
146
|
{
|
|
5
147
|
"key": "Form",
|
|
6
148
|
"label": "フォーム入力",
|
|
7
149
|
"description": "User input, selection, and form control components",
|
|
8
150
|
"components": [
|
|
9
|
-
{ "id": "input-text", "tagName": "dads-input-text", "useCase": "Single-line text input (name, email, phone, etc.)" },
|
|
10
|
-
{ "id": "textarea", "tagName": "dads-textarea", "useCase": "Multi-line text input (comments, descriptions, notes)" },
|
|
11
|
-
{ "id": "select", "tagName": "dads-select", "useCase": "Dropdown selection from predefined options" },
|
|
12
|
-
{ "id": "checkbox", "tagName": "dads-checkbox", "useCase": "Boolean toggle or multi-select checkboxes" },
|
|
13
|
-
{ "id": "radio", "tagName": "dads-radio", "useCase": "Single selection from mutually exclusive options" },
|
|
14
|
-
{ "id": "switch", "tagName": "dads-switch", "useCase": "On/off toggle for settings or preferences" },
|
|
15
|
-
{ "id": "combobox", "tagName": "dads-combobox", "useCase": "Text input with autocomplete/suggestion dropdown" },
|
|
16
|
-
{ "id": "date-picker", "tagName": "dads-date-picker", "useCase": "Date selection with calendar interface" },
|
|
17
|
-
{ "id": "file-upload", "tagName": "dads-file-upload", "useCase": "File attachment and upload" },
|
|
18
|
-
{ "id": "fieldset", "tagName": "dads-fieldset", "useCase": "Group related form fields with legend" },
|
|
19
|
-
{ "id": "search-box", "tagName": "dads-search-box", "useCase": "Search input with clear/submit actions" },
|
|
20
|
-
{ "id": "calendar", "tagName": "dads-calendar", "useCase": "Calendar date picker component" }
|
|
151
|
+
{ "id": "input-text", "tagName": "dads-input-text", "useCase": "Single-line text input (name, email, phone, etc.)", "keywords": ["text input", "name", "email", "phone", "入力"] },
|
|
152
|
+
{ "id": "textarea", "tagName": "dads-textarea", "useCase": "Multi-line text input (comments, descriptions, notes)", "keywords": ["textarea", "multiline", "comments", "notes", "複数行入力"] },
|
|
153
|
+
{ "id": "select", "tagName": "dads-select", "useCase": "Dropdown selection from predefined options", "keywords": ["select", "dropdown", "選択"] },
|
|
154
|
+
{ "id": "checkbox", "tagName": "dads-checkbox", "useCase": "Boolean toggle or multi-select checkboxes", "keywords": ["checkbox", "multi-select", "チェックボックス"] },
|
|
155
|
+
{ "id": "radio", "tagName": "dads-radio", "useCase": "Single selection from mutually exclusive options", "keywords": ["radio", "single choice", "ラジオ"] },
|
|
156
|
+
{ "id": "switch", "tagName": "dads-switch", "useCase": "On/off toggle for settings or preferences", "keywords": ["switch", "toggle", "スイッチ", "トグル", "on/off"] },
|
|
157
|
+
{ "id": "combobox", "tagName": "dads-combobox", "useCase": "Text input with autocomplete/suggestion dropdown", "keywords": ["combobox", "autocomplete", "typeahead", "コンボボックス", "オートコンプリート"] },
|
|
158
|
+
{ "id": "date-picker", "tagName": "dads-date-picker", "useCase": "Date selection with calendar interface", "keywords": ["date picker", "calendar", "日付選択", "カレンダー"] },
|
|
159
|
+
{ "id": "file-upload", "tagName": "dads-file-upload", "useCase": "File attachment and upload", "keywords": ["file upload", "drag drop", "file input", "アップロード", "ドラッグ&ドロップ"] },
|
|
160
|
+
{ "id": "fieldset", "tagName": "dads-fieldset", "useCase": "Group related form fields with legend", "keywords": ["fieldset", "group", "legend", "フォームグループ"] },
|
|
161
|
+
{ "id": "search-box", "tagName": "dads-search-box", "useCase": "Search input with clear/submit actions", "keywords": ["search", "search box", "検索", "検索ボックス"] },
|
|
162
|
+
{ "id": "calendar", "tagName": "dads-calendar", "useCase": "Calendar date picker component", "keywords": ["calendar", "日付", "カレンダー"] }
|
|
21
163
|
]
|
|
22
164
|
},
|
|
23
165
|
{
|
|
@@ -25,12 +167,12 @@
|
|
|
25
167
|
"label": "アクション",
|
|
26
168
|
"description": "Interactive elements that trigger actions or reveal content",
|
|
27
169
|
"components": [
|
|
28
|
-
{ "id": "button", "tagName": "dads-button", "useCase": "Primary action trigger (submit, save, cancel, delete)" },
|
|
29
|
-
{ "id": "dialog", "tagName": "dads-dialog", "useCase": "Modal dialog for confirmations, alerts, or focused tasks" },
|
|
30
|
-
{ "id": "drawer", "tagName": "dads-drawer", "useCase": "Slide-out panel for secondary content or navigation" },
|
|
31
|
-
{ "id": "disclosure", "tagName": "dads-disclosure", "useCase": "Expandable content section (show/hide)" },
|
|
32
|
-
{ "id": "accordion-details", "tagName": "dads-accordion-details", "useCase": "Accordion container for collapsible FAQ or grouped content" },
|
|
33
|
-
{ "id": "accordion-item-details", "tagName": "dads-accordion-item-details", "useCase": "Individual accordion item within an accordion group" }
|
|
170
|
+
{ "id": "button", "tagName": "dads-button", "useCase": "Primary action trigger (submit, save, cancel, delete)", "keywords": ["button", "action", "ボタン"] },
|
|
171
|
+
{ "id": "dialog", "tagName": "dads-dialog", "useCase": "Modal dialog for confirmations, alerts, or focused tasks", "keywords": ["dialog", "modal", "confirm", "ダイアログ", "モーダル"] },
|
|
172
|
+
{ "id": "drawer", "tagName": "dads-drawer", "useCase": "Slide-out panel for secondary content or navigation", "keywords": ["drawer", "side panel", "ドロワー", "サイドパネル"] },
|
|
173
|
+
{ "id": "disclosure", "tagName": "dads-disclosure", "useCase": "Expandable content section (show/hide)", "keywords": ["disclosure", "details", "expand", "折りたたみ"] },
|
|
174
|
+
{ "id": "accordion-details", "tagName": "dads-accordion-details", "useCase": "Accordion container for collapsible FAQ or grouped content", "keywords": ["accordion", "faq", "collapsible", "アコーディオン"] },
|
|
175
|
+
{ "id": "accordion-item-details", "tagName": "dads-accordion-item-details", "useCase": "Individual accordion item within an accordion group", "keywords": ["accordion item", "faq item", "アコーディオン項目"] }
|
|
34
176
|
]
|
|
35
177
|
},
|
|
36
178
|
{
|
|
@@ -38,16 +180,16 @@
|
|
|
38
180
|
"label": "ナビゲーション",
|
|
39
181
|
"description": "Page navigation, breadcrumbs, tabs, and menu components",
|
|
40
182
|
"components": [
|
|
41
|
-
{ "id": "breadcrumb", "tagName": "dads-breadcrumb", "useCase": "Hierarchical page location indicator" },
|
|
42
|
-
{ "id": "page-navigation", "tagName": "dads-page-navigation", "useCase": "Pagination for multi-page content (tables, search results)" },
|
|
43
|
-
{ "id": "step-navigation", "tagName": "dads-step-navigation", "useCase": "Step-by-step wizard progress indicator" },
|
|
44
|
-
{ "id": "menu-list", "tagName": "dads-menu-list", "useCase": "Vertical navigation menu list" },
|
|
45
|
-
{ "id": "tab", "tagName": "dads-tab", "useCase": "Tab interface for switching between related content panels" },
|
|
46
|
-
{ "id": "global-menu", "tagName": "dads-global-menu", "useCase": "Site-wide header navigation menu" },
|
|
47
|
-
{ "id": "language-selector", "tagName": "dads-language-selector", "useCase": "Language/locale switcher" },
|
|
48
|
-
{ "id": "hamburger-menu-button", "tagName": "dads-hamburger-menu-button", "useCase": "Mobile menu toggle button" },
|
|
49
|
-
{ "id": "utility-link", "tagName": "dads-utility-link", "useCase": "Utility navigation link (login, settings, help)" },
|
|
50
|
-
{ "id": "mobile-menu", "tagName": "dads-mobile-menu", "useCase": "Mobile-optimized navigation menu" }
|
|
183
|
+
{ "id": "breadcrumb", "tagName": "dads-breadcrumb", "useCase": "Hierarchical page location indicator", "keywords": ["breadcrumb", "パンくず", "現在位置"] },
|
|
184
|
+
{ "id": "page-navigation", "tagName": "dads-page-navigation", "useCase": "Pagination for multi-page content (tables, search results)", "keywords": ["pagination", "page navigation", "ページ送り", "ページネーション"] },
|
|
185
|
+
{ "id": "step-navigation", "tagName": "dads-step-navigation", "useCase": "Step-by-step wizard progress indicator", "keywords": ["step", "wizard", "multi-step", "stepper", "ステップ", "ウィザード"] },
|
|
186
|
+
{ "id": "menu-list", "tagName": "dads-menu-list", "useCase": "Vertical navigation menu list", "keywords": ["menu", "side nav", "navigation list", "メニュー", "サイドナビ"] },
|
|
187
|
+
{ "id": "tab", "tagName": "dads-tab", "useCase": "Tab interface for switching between related content panels", "keywords": ["tab", "tabs", "tablist", "tab panel", "タブ", "タブ切替"] },
|
|
188
|
+
{ "id": "global-menu", "tagName": "dads-global-menu", "useCase": "Site-wide header navigation menu", "keywords": ["global menu", "site navigation", "グローバルメニュー"] },
|
|
189
|
+
{ "id": "language-selector", "tagName": "dads-language-selector", "useCase": "Language/locale switcher", "keywords": ["language", "locale", "言語切替"] },
|
|
190
|
+
{ "id": "hamburger-menu-button", "tagName": "dads-hamburger-menu-button", "useCase": "Mobile menu toggle button", "keywords": ["hamburger", "mobile menu", "ハンバーガー"] },
|
|
191
|
+
{ "id": "utility-link", "tagName": "dads-utility-link", "useCase": "Utility navigation link (login, settings, help)", "keywords": ["utility link", "login", "settings", "help", "補助リンク"] },
|
|
192
|
+
{ "id": "mobile-menu", "tagName": "dads-mobile-menu", "useCase": "Mobile-optimized navigation menu", "keywords": ["mobile menu", "drawer menu", "モバイルメニュー"] }
|
|
51
193
|
]
|
|
52
194
|
},
|
|
53
195
|
{
|
|
@@ -55,17 +197,17 @@
|
|
|
55
197
|
"label": "コンテンツ表示",
|
|
56
198
|
"description": "Text, list, table, and structured content display",
|
|
57
199
|
"components": [
|
|
58
|
-
{ "id": "card", "tagName": "dads-card", "useCase": "Contained content block (article preview, info card)" },
|
|
59
|
-
{ "id": "heading", "tagName": "dads-heading", "useCase": "Section heading with proper hierarchy (h1-h6)" },
|
|
60
|
-
{ "id": "text", "tagName": "dads-text", "useCase": "Styled text block with typography tokens" },
|
|
61
|
-
{ "id": "blockquote", "tagName": "dads-blockquote", "useCase": "Quoted text or citation block" },
|
|
62
|
-
{ "id": "code-block", "tagName": "dads-code-block", "useCase": "Code snippet display with syntax styling" },
|
|
63
|
-
{ "id": "divider", "tagName": "dads-divider", "useCase": "Visual separator between content sections" },
|
|
64
|
-
{ "id": "list", "tagName": "dads-list", "useCase": "Ordered or unordered list" },
|
|
65
|
-
{ "id": "description-list", "tagName": "dads-description-list", "useCase": "Key-value pair list (terms and definitions)" },
|
|
66
|
-
{ "id": "resource-list", "tagName": "dads-resource-list", "useCase": "List of downloadable resources or links" },
|
|
67
|
-
{ "id": "table", "tagName": "dads-table", "useCase": "Data table with sortable columns" },
|
|
68
|
-
{ "id": "table-control", "tagName": "dads-table-control", "useCase": "Table toolbar with filters and actions" }
|
|
200
|
+
{ "id": "card", "tagName": "dads-card", "useCase": "Contained content block (article preview, info card)", "keywords": ["card", "info card", "カード"] },
|
|
201
|
+
{ "id": "heading", "tagName": "dads-heading", "useCase": "Section heading with proper hierarchy (h1-h6)", "keywords": ["heading", "title", "見出し"] },
|
|
202
|
+
{ "id": "text", "tagName": "dads-text", "useCase": "Styled text block with typography tokens", "keywords": ["text", "typography", "本文"] },
|
|
203
|
+
{ "id": "blockquote", "tagName": "dads-blockquote", "useCase": "Quoted text or citation block", "keywords": ["blockquote", "quote", "引用"] },
|
|
204
|
+
{ "id": "code-block", "tagName": "dads-code-block", "useCase": "Code snippet display with syntax styling", "keywords": ["code block", "snippet", "コード"] },
|
|
205
|
+
{ "id": "divider", "tagName": "dads-divider", "useCase": "Visual separator between content sections", "keywords": ["divider", "separator", "区切り"] },
|
|
206
|
+
{ "id": "list", "tagName": "dads-list", "useCase": "Ordered or unordered list", "keywords": ["list", "ul", "ol", "リスト"] },
|
|
207
|
+
{ "id": "description-list", "tagName": "dads-description-list", "useCase": "Key-value pair list (terms and definitions)", "keywords": ["description list", "definition list", "dl", "説明リスト", "詳細情報"] },
|
|
208
|
+
{ "id": "resource-list", "tagName": "dads-resource-list", "useCase": "List of downloadable resources or links", "keywords": ["resource list", "file list", "download list", "download", "リソースリスト", "ファイル一覧", "ダウンロード"] },
|
|
209
|
+
{ "id": "table", "tagName": "dads-table", "useCase": "Data table with sortable columns", "keywords": ["table", "data table", "sortable table", "テーブル"] },
|
|
210
|
+
{ "id": "table-control", "tagName": "dads-table-control", "useCase": "Table toolbar with filters and actions", "keywords": ["table toolbar", "filter bar", "テーブル操作"] }
|
|
69
211
|
]
|
|
70
212
|
},
|
|
71
213
|
{
|
|
@@ -73,18 +215,18 @@
|
|
|
73
215
|
"label": "表示・フィードバック",
|
|
74
216
|
"description": "Visual indicators, status displays, and feedback elements",
|
|
75
217
|
"components": [
|
|
76
|
-
{ "id": "avatar", "tagName": "dads-avatar", "useCase": "User profile image or initials" },
|
|
77
|
-
{ "id": "icon", "tagName": "dads-icon", "useCase": "SVG icon display" },
|
|
78
|
-
{ "id": "chip-label", "tagName": "dads-chip-label", "useCase": "Label chip for categories or tags" },
|
|
79
|
-
{ "id": "chip-tag", "tagName": "dads-chip-tag", "useCase": "Interactive tag chip (filterable, removable)" },
|
|
80
|
-
{ "id": "notification-banner", "tagName": "dads-notification-banner", "useCase": "Page-level notification or info banner" },
|
|
81
|
-
{ "id": "emergency-banner", "tagName": "dads-emergency-banner", "useCase": "Critical alert banner (system-wide)" },
|
|
82
|
-
{ "id": "carousel", "tagName": "dads-carousel", "useCase": "Image or content carousel/slider" },
|
|
83
|
-
{ "id": "device-mock", "tagName": "dads-device-mock", "useCase": "Device frame mockup for previews" },
|
|
84
|
-
{ "id": "progress-indicator", "tagName": "dads-progress-indicator", "useCase": "Progress display (determinate or indeterminate)" },
|
|
85
|
-
{ "id": "spinner", "tagName": "dads-spinner", "useCase": "Loading spinner for async operations" },
|
|
86
|
-
{ "id": "progress-bar", "tagName": "dads-progress-bar", "useCase": "Linear progress bar" },
|
|
87
|
-
{ "id": "loading-icon", "tagName": "dads-loading-icon", "useCase": "Inline loading indicator" }
|
|
218
|
+
{ "id": "avatar", "tagName": "dads-avatar", "useCase": "User profile image or initials", "keywords": ["avatar", "profile", "アバター"] },
|
|
219
|
+
{ "id": "icon", "tagName": "dads-icon", "useCase": "SVG icon display", "keywords": ["icon", "svg", "アイコン"] },
|
|
220
|
+
{ "id": "chip-label", "tagName": "dads-chip-label", "useCase": "Label chip for categories or tags", "keywords": ["badge", "status badge", "label", "tag", "ステータスバッジ", "チップ"] },
|
|
221
|
+
{ "id": "chip-tag", "tagName": "dads-chip-tag", "useCase": "Interactive tag chip (filterable, removable)", "keywords": ["chip tag", "filter tag", "タグ", "フィルタートークン"] },
|
|
222
|
+
{ "id": "notification-banner", "tagName": "dads-notification-banner", "useCase": "Page-level notification or info banner", "keywords": ["notification", "alert banner", "info banner", "通知", "お知らせ"] },
|
|
223
|
+
{ "id": "emergency-banner", "tagName": "dads-emergency-banner", "useCase": "Critical alert banner (system-wide)", "keywords": ["emergency", "urgent", "critical alert", "緊急", "障害通知"] },
|
|
224
|
+
{ "id": "carousel", "tagName": "dads-carousel", "useCase": "Image or content carousel/slider", "keywords": ["carousel", "slider", "カルーセル"] },
|
|
225
|
+
{ "id": "device-mock", "tagName": "dads-device-mock", "useCase": "Device frame mockup for previews", "keywords": ["device mock", "preview frame", "モック"] },
|
|
226
|
+
{ "id": "progress-indicator", "tagName": "dads-progress-indicator", "useCase": "Progress display (determinate or indeterminate)", "keywords": ["progress indicator", "進捗インジケーター"] },
|
|
227
|
+
{ "id": "spinner", "tagName": "dads-spinner", "useCase": "Loading spinner for async operations", "keywords": ["spinner", "loading", "処理中", "送信中", "読み込み中", "スピナー"] },
|
|
228
|
+
{ "id": "progress-bar", "tagName": "dads-progress-bar", "useCase": "Linear progress bar", "keywords": ["progress", "progress bar", "進捗", "プログレスバー"] },
|
|
229
|
+
{ "id": "loading-icon", "tagName": "dads-loading-icon", "useCase": "Inline loading indicator", "keywords": ["loading icon", "static loading", "読み込みアイコン", "砂時計"] }
|
|
88
230
|
]
|
|
89
231
|
},
|
|
90
232
|
{
|
|
@@ -92,10 +234,10 @@
|
|
|
92
234
|
"label": "レイアウト",
|
|
93
235
|
"description": "Page layout containers and structural components",
|
|
94
236
|
"components": [
|
|
95
|
-
{ "id": "layout-shell", "tagName": "dads-layout-shell", "useCase": "Page-level layout container (website, app-shell, master-detail)" },
|
|
96
|
-
{ "id": "layout-sidebar", "tagName": "dads-layout-sidebar", "useCase": "Sidebar navigation panel for app layouts" },
|
|
97
|
-
{ "id": "layout-aside", "tagName": "dads-layout-aside", "useCase": "Aside panel for detail/supplementary content" },
|
|
98
|
-
{ "id": "header-container", "tagName": "dads-header-container", "useCase": "Header area container with slots" }
|
|
237
|
+
{ "id": "layout-shell", "tagName": "dads-layout-shell", "useCase": "Page-level layout container (website, app-shell, master-detail)", "keywords": ["layout shell", "app shell", "website layout", "レイアウト"] },
|
|
238
|
+
{ "id": "layout-sidebar", "tagName": "dads-layout-sidebar", "useCase": "Sidebar navigation panel for app layouts", "keywords": ["sidebar", "サイドバー"] },
|
|
239
|
+
{ "id": "layout-aside", "tagName": "dads-layout-aside", "useCase": "Aside panel for detail/supplementary content", "keywords": ["aside", "detail pane", "補助パネル"] },
|
|
240
|
+
{ "id": "header-container", "tagName": "dads-header-container", "useCase": "Header area container with slots", "keywords": ["header container", "ヘッダー"] }
|
|
99
241
|
]
|
|
100
242
|
}
|
|
101
243
|
]
|
|
@@ -9648,7 +9648,7 @@
|
|
|
9648
9648
|
"declarations": [
|
|
9649
9649
|
{
|
|
9650
9650
|
"kind": "class",
|
|
9651
|
-
"description": "Checkboxコンポーネント\n\nDADS HTML版の構造・見た目に準拠しつつ、Form-Associated Custom Element
|
|
9651
|
+
"description": "Checkboxコンポーネント\n\nDADS HTML版の構造・見た目に準拠しつつ、Form-Associated Custom Elementとしてフォームに参加します。\nlabel 属性と name 属性を指定して利用してください。子テキストはラベル契約として扱いません。",
|
|
9652
9652
|
"name": "DadsCheckbox",
|
|
9653
9653
|
"cssParts": [
|
|
9654
9654
|
{
|
|
@@ -10501,6 +10501,22 @@
|
|
|
10501
10501
|
"definitionPath": "./packages/components/checkbox/checkbox.ts",
|
|
10502
10502
|
"typeDefinitionPath": "./packages/components/checkbox/checkbox.ts",
|
|
10503
10503
|
"custom": {
|
|
10504
|
+
"authoringGuidance": {
|
|
10505
|
+
"summary": "label 属性と name 属性を必ず指定してください。子テキストはラベル契約として扱いません。",
|
|
10506
|
+
"examples": [
|
|
10507
|
+
{
|
|
10508
|
+
"scenario": "基本チェックボックス",
|
|
10509
|
+
"code": "<dads-checkbox label=\"利用規約に同意する\" name=\"terms\"></dads-checkbox>"
|
|
10510
|
+
}
|
|
10511
|
+
],
|
|
10512
|
+
"pitfalls": [
|
|
10513
|
+
{
|
|
10514
|
+
"issue": "子テキストだけでは label 属性の代わりになりません。",
|
|
10515
|
+
"wrongCode": "<dads-checkbox name=\"terms\">利用規約に同意する</dads-checkbox>",
|
|
10516
|
+
"correctCode": "<dads-checkbox label=\"利用規約に同意する\" name=\"terms\"></dads-checkbox>"
|
|
10517
|
+
}
|
|
10518
|
+
]
|
|
10519
|
+
},
|
|
10504
10520
|
"a11yAnnotations": {
|
|
10505
10521
|
"version": 1,
|
|
10506
10522
|
"summary": "コンポーネント仕様（アクセシビリティ注釈）",
|
|
@@ -10784,6 +10800,13 @@
|
|
|
10784
10800
|
"module": "packages/core/web-components.ts"
|
|
10785
10801
|
}
|
|
10786
10802
|
},
|
|
10803
|
+
{
|
|
10804
|
+
"kind": "field",
|
|
10805
|
+
"name": "color",
|
|
10806
|
+
"type": {
|
|
10807
|
+
"text": "DadsChipLabelColor | null"
|
|
10808
|
+
}
|
|
10809
|
+
},
|
|
10787
10810
|
{
|
|
10788
10811
|
"kind": "method",
|
|
10789
10812
|
"name": "compose",
|
|
@@ -10922,21 +10945,28 @@
|
|
|
10922
10945
|
"name": "WebComponent",
|
|
10923
10946
|
"module": "packages/core/web-components.ts"
|
|
10924
10947
|
}
|
|
10948
|
+
},
|
|
10949
|
+
{
|
|
10950
|
+
"kind": "field",
|
|
10951
|
+
"name": "variant",
|
|
10952
|
+
"type": {
|
|
10953
|
+
"text": "DadsChipLabelVariant | null"
|
|
10954
|
+
}
|
|
10925
10955
|
}
|
|
10926
10956
|
],
|
|
10927
10957
|
"attributes": [
|
|
10928
10958
|
{
|
|
10929
10959
|
"type": {
|
|
10930
|
-
"text": "
|
|
10960
|
+
"text": "'gray' | 'blue' | 'light-blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple'"
|
|
10931
10961
|
},
|
|
10932
|
-
"description": "カラー
|
|
10962
|
+
"description": "カラー",
|
|
10933
10963
|
"name": "color"
|
|
10934
10964
|
},
|
|
10935
10965
|
{
|
|
10936
10966
|
"type": {
|
|
10937
|
-
"text": "
|
|
10967
|
+
"text": "'text' | 'outline' | 'filled-outline' | 'fill'"
|
|
10938
10968
|
},
|
|
10939
|
-
"description": "バリアント
|
|
10969
|
+
"description": "バリアント",
|
|
10940
10970
|
"name": "variant"
|
|
10941
10971
|
}
|
|
10942
10972
|
],
|
|
@@ -10951,6 +10981,22 @@
|
|
|
10951
10981
|
"definitionPath": "./packages/components/chip-label/chip-label.ts",
|
|
10952
10982
|
"typeDefinitionPath": "./packages/components/chip-label/chip-label.ts",
|
|
10953
10983
|
"custom": {
|
|
10984
|
+
"authoringGuidance": {
|
|
10985
|
+
"summary": "status badge の semantic alias はありません。color と variant の組み合わせで表現します。",
|
|
10986
|
+
"examples": [
|
|
10987
|
+
{
|
|
10988
|
+
"scenario": "情報ラベル相当",
|
|
10989
|
+
"code": "<dads-chip-label color=\"blue\" variant=\"filled-outline\">情報</dads-chip-label>"
|
|
10990
|
+
}
|
|
10991
|
+
],
|
|
10992
|
+
"pitfalls": [
|
|
10993
|
+
{
|
|
10994
|
+
"issue": "variant=\"info\" のような semantic 値は未定義です。",
|
|
10995
|
+
"wrongCode": "<dads-chip-label variant=\"info\">情報</dads-chip-label>",
|
|
10996
|
+
"correctCode": "<dads-chip-label color=\"blue\" variant=\"filled-outline\">情報</dads-chip-label>"
|
|
10997
|
+
}
|
|
10998
|
+
]
|
|
10999
|
+
},
|
|
10954
11000
|
"a11yAnnotations": {
|
|
10955
11001
|
"version": 1,
|
|
10956
11002
|
"summary": "チップラベル（ステータスや分類の表示）",
|
|
@@ -27532,6 +27578,50 @@
|
|
|
27532
27578
|
"definitionPath": "./packages/components/heading/heading.ts",
|
|
27533
27579
|
"typeDefinitionPath": "./packages/components/heading/heading.ts",
|
|
27534
27580
|
"custom": {
|
|
27581
|
+
"usageSnippet": "<!-- ページ見出し -->\n<dads-heading level=\"1\" size=\"36\">申請一覧</dads-heading>\n\n<!-- typeset コンテナ内の節見出し -->\n<main data-dads-typeset>\n <dads-heading level=\"2\" size=\"24\" margin=\"top\">基本情報</dads-heading>\n</main>",
|
|
27582
|
+
"authoringGuidance": {
|
|
27583
|
+
"summary": "見出し階層を保つには level だけでなく size も明示してください。",
|
|
27584
|
+
"defaults": [
|
|
27585
|
+
{
|
|
27586
|
+
"attribute": "level",
|
|
27587
|
+
"value": "2",
|
|
27588
|
+
"notes": "runtime default"
|
|
27589
|
+
},
|
|
27590
|
+
{
|
|
27591
|
+
"attribute": "size",
|
|
27592
|
+
"value": "36",
|
|
27593
|
+
"notes": "runtime default。level に応じた自動マッピングはありません。"
|
|
27594
|
+
},
|
|
27595
|
+
{
|
|
27596
|
+
"attribute": "margin",
|
|
27597
|
+
"value": "none",
|
|
27598
|
+
"notes": "runtime default"
|
|
27599
|
+
}
|
|
27600
|
+
],
|
|
27601
|
+
"examples": [
|
|
27602
|
+
{
|
|
27603
|
+
"scenario": "ページ見出し",
|
|
27604
|
+
"code": "<dads-heading level=\"1\" size=\"36\">申請一覧</dads-heading>"
|
|
27605
|
+
},
|
|
27606
|
+
{
|
|
27607
|
+
"scenario": "typeset コンテナ内の節見出し",
|
|
27608
|
+
"code": "<main data-dads-typeset>\n <dads-heading level=\"2\" size=\"24\" margin=\"top\">基本情報</dads-heading>\n</main>"
|
|
27609
|
+
}
|
|
27610
|
+
],
|
|
27611
|
+
"pitfalls": [
|
|
27612
|
+
{
|
|
27613
|
+
"issue": "size を省略すると level に関係なく size=\"36\" になります。",
|
|
27614
|
+
"wrongCode": "<dads-heading level=\"1\">ページタイトル</dads-heading>",
|
|
27615
|
+
"correctCode": "<dads-heading level=\"1\" size=\"36\">ページタイトル</dads-heading>"
|
|
27616
|
+
}
|
|
27617
|
+
],
|
|
27618
|
+
"references": [
|
|
27619
|
+
{
|
|
27620
|
+
"title": "Content Typeset Rules",
|
|
27621
|
+
"path": "docs/rules/content-typeset-rules.md"
|
|
27622
|
+
}
|
|
27623
|
+
]
|
|
27624
|
+
},
|
|
27535
27625
|
"a11yAnnotations": {
|
|
27536
27626
|
"version": 1,
|
|
27537
27627
|
"summary": "見出しコンポーネント仕様（アクセシビリティ注釈）",
|
|
@@ -28584,7 +28674,7 @@
|
|
|
28584
28674
|
"text": "object"
|
|
28585
28675
|
},
|
|
28586
28676
|
"static": true,
|
|
28587
|
-
"default": "{ name: 'dads-input-text', template: html` <div part=\"wrapper\" id=\"wrapper\"> <label part=\"label\" id=\"label\" for=\"input\"> <span part=\"label-text\" id=\"label-text\"> <slot name=\"label\" id=\"label-slot\"></slot> <span id=\"label-fallback\"></span> </span> <span part=\"requirement\" id=\"requirement\"></span> </label> <div part=\"support-text\" id=\"support-text\"> <slot name=\"support-text\" id=\"support-slot\"></slot> <span id=\"support-fallback\"></span> </div> <div part=\"input-wrapper\" id=\"input-wrapper\"> <input part=\"input\" id=\"input\" type=\"text\" /> </div> <div part=\"error-text\" id=\"error-text\"> <slot name=\"error-text\" id=\"error-slot\"></slot> <span id=\"error-fallback\"></span> </div> <!-- バリデーション用カスタムエラーメッセージスロット（非表示） --> <slot name=\"required-error\" id=\"required-error-slot\" hidden></slot> <slot name=\"type-mismatch-error\" id=\"type-mismatch-error-slot\" hidden></slot> </div> `, styles: withReset([ applyDADSTokens(), applySpacingTokens(), inputTextTokens, inputTextStyles, applyDADSFocusStyles(), ], 'minimal'), attributes: [ PropertyAttr('label'), PropertyAttr('support-text'), PropertyAttr('type'), BooleanAttr('required'), BooleanAttr('error'), PropertyAttr('error-text'), BooleanAttr('disabled'), BooleanAttr('readonly'), PropertyAttr('name'), PropertyAttr('size'), PropertyAttr('input-width'), BooleanAttr('auto-validate'), PropertyAttr('autocomplete'), // value は observedAttributes に含めるが、PropertyAttr は使わない { attribute: 'value' }, ], }",
|
|
28677
|
+
"default": "{ name: 'dads-input-text', template: html` <div part=\"wrapper\" id=\"wrapper\"> <label part=\"label\" id=\"label\" for=\"input\"> <span part=\"label-text\" id=\"label-text\"> <slot name=\"label\" id=\"label-slot\"></slot> <span id=\"label-fallback\"></span> </span> <span part=\"requirement\" id=\"requirement\"></span> </label> <div part=\"support-text\" id=\"support-text\"> <slot name=\"support-text\" id=\"support-slot\"></slot> <span id=\"support-fallback\"></span> </div> <div part=\"input-wrapper\" id=\"input-wrapper\"> <input part=\"input\" id=\"input\" type=\"text\" /> </div> <div part=\"error-text\" id=\"error-text\"> <slot name=\"error-text\" id=\"error-slot\"></slot> <span id=\"error-fallback\"></span> </div> <!-- バリデーション用カスタムエラーメッセージスロット（非表示） --> <slot name=\"required-error\" id=\"required-error-slot\" hidden></slot> <slot name=\"type-mismatch-error\" id=\"type-mismatch-error-slot\" hidden></slot> </div> `, styles: withReset([ applyDADSTokens(), applySpacingTokens(), inputTextTokens, inputTextStyles, applyDADSFocusStyles(), ], 'minimal'), attributes: [ PropertyAttr('label'), PropertyAttr('support-text'), PropertyAttr('type'), BooleanAttr('required'), BooleanAttr('error'), PropertyAttr('error-text'), BooleanAttr('disabled'), BooleanAttr('readonly'), PropertyAttr('name'), PropertyAttr('size'), PropertyAttr('input-width'), BooleanAttr('auto-validate'), PropertyAttr('autocomplete'), PropertyAttr('inputmode'), // value は observedAttributes に含めるが、PropertyAttr は使わない { attribute: 'value' }, ], }",
|
|
28588
28678
|
"inheritedFrom": {
|
|
28589
28679
|
"name": "WebComponent",
|
|
28590
28680
|
"module": "packages/core/web-components.ts"
|
|
@@ -28883,6 +28973,13 @@
|
|
|
28883
28973
|
"description": "幅バリアント (short | medium | full | カスタム値)",
|
|
28884
28974
|
"name": "input-width"
|
|
28885
28975
|
},
|
|
28976
|
+
{
|
|
28977
|
+
"type": {
|
|
28978
|
+
"text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
|
|
28979
|
+
},
|
|
28980
|
+
"description": "モバイル向け入力モードヒント",
|
|
28981
|
+
"name": "inputmode"
|
|
28982
|
+
},
|
|
28886
28983
|
{
|
|
28887
28984
|
"type": {
|
|
28888
28985
|
"text": "string"
|
|
@@ -28950,6 +29047,15 @@
|
|
|
28950
29047
|
"definitionPath": "./packages/components/input-text/input-text.ts",
|
|
28951
29048
|
"typeDefinitionPath": "./packages/components/input-text/input-text.ts",
|
|
28952
29049
|
"custom": {
|
|
29050
|
+
"authoringGuidance": {
|
|
29051
|
+
"summary": "モバイル向けキーボード最適化が必要な場合は inputmode を使えます。",
|
|
29052
|
+
"examples": [
|
|
29053
|
+
{
|
|
29054
|
+
"scenario": "数字キーボードを開く入力",
|
|
29055
|
+
"code": "<dads-input-text label=\"郵便番号\" name=\"postal-code\" inputmode=\"numeric\" autocomplete=\"postal-code\"></dads-input-text>"
|
|
29056
|
+
}
|
|
29057
|
+
]
|
|
29058
|
+
},
|
|
28953
29059
|
"a11yAnnotations": {
|
|
28954
29060
|
"version": 1,
|
|
28955
29061
|
"summary": "インプットテキストコンポーネント仕様（アクセシビリティ注釈）",
|
|
@@ -43101,6 +43207,29 @@
|
|
|
43101
43207
|
"definitionPath": "./packages/components/resource-list/resource-list.ts",
|
|
43102
43208
|
"typeDefinitionPath": "./packages/components/resource-list/resource-list.ts",
|
|
43103
43209
|
"custom": {
|
|
43210
|
+
"usageSnippet": "<dads-resource-list\n href=\"/files/guide.pdf\"\n download\n data-interaction=\"whole\"\n data-style=\"frame\"\n>\n <span slot=\"title\">申請ガイド（PDF）</span>\n <span slot=\"support\">PDF 1.2MB</span>\n</dads-resource-list>",
|
|
43211
|
+
"authoringGuidance": {
|
|
43212
|
+
"summary": "項目全体をリンク化する host-level whole link は data-interaction=\"whole\" と href の組み合わせで使います。",
|
|
43213
|
+
"examples": [
|
|
43214
|
+
{
|
|
43215
|
+
"scenario": "全体リンクのリソースリスト",
|
|
43216
|
+
"code": "<dads-resource-list href=\"/files/guide.pdf\" download data-interaction=\"whole\" data-style=\"frame\">\n <span slot=\"title\">申請ガイド（PDF）</span>\n <span slot=\"support\">PDF 1.2MB</span>\n</dads-resource-list>"
|
|
43217
|
+
}
|
|
43218
|
+
],
|
|
43219
|
+
"pitfalls": [
|
|
43220
|
+
{
|
|
43221
|
+
"issue": "href だけでは whole-link モードになりません。",
|
|
43222
|
+
"wrongCode": "<dads-resource-list href=\"/files/guide.pdf\"><span slot=\"title\">申請ガイド</span></dads-resource-list>",
|
|
43223
|
+
"correctCode": "<dads-resource-list href=\"/files/guide.pdf\" data-interaction=\"whole\"><span slot=\"title\">申請ガイド</span></dads-resource-list>"
|
|
43224
|
+
}
|
|
43225
|
+
],
|
|
43226
|
+
"references": [
|
|
43227
|
+
{
|
|
43228
|
+
"title": "resource-list component tests",
|
|
43229
|
+
"path": "packages/components/resource-list/resource-list.test.ts"
|
|
43230
|
+
}
|
|
43231
|
+
]
|
|
43232
|
+
},
|
|
43104
43233
|
"a11yAnnotations": {
|
|
43105
43234
|
"version": 1,
|
|
43106
43235
|
"summary": "リソースリストコンポーネント仕様（アクセシビリティ注釈：リンク版 / フォームコントロール版）",
|
|
@@ -51087,6 +51216,45 @@
|
|
|
51087
51216
|
"definitionPath": "./packages/components/table/table.ts",
|
|
51088
51217
|
"typeDefinitionPath": "./packages/components/table/table.ts",
|
|
51089
51218
|
"custom": {
|
|
51219
|
+
"usageSnippet": "<!-- 基本テーブル -->\n<dads-table>\n <table>\n <thead>\n <tr>\n <th scope=\"col\">項目</th>\n <th scope=\"col\">値</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>サンプル</td>\n <td>1</td>\n </tr>\n </tbody>\n </table>\n</dads-table>\n\n<!-- ソート + 行選択 -->\n<dads-table selectable hover sort-behavior=\"dom\">\n <table>\n <thead>\n <tr>\n <th scope=\"col\"><input type=\"checkbox\" data-select-all aria-label=\"表示中の行をすべて選択\" /></th>\n <th scope=\"col\" data-sort-type=\"string\"><button type=\"button\" data-sort>氏名</button></th>\n <th scope=\"col\" data-sort-type=\"number\"><button type=\"button\" data-sort>金額</button></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><input type=\"checkbox\" data-select-row aria-label=\"行を選択: A001\" /></td>\n <td>山田 太郎</td>\n <td data-sort-value=\"1200\">1,200</td>\n </tr>\n </tbody>\n </table>\n</dads-table>",
|
|
51220
|
+
"authoringGuidance": {
|
|
51221
|
+
"summary": "ソートと行選択は light DOM のネイティブ要素で組み立てます。",
|
|
51222
|
+
"defaults": [
|
|
51223
|
+
{
|
|
51224
|
+
"attribute": "size",
|
|
51225
|
+
"value": "md",
|
|
51226
|
+
"notes": "未指定時は size=\"md\" が適用されます。"
|
|
51227
|
+
}
|
|
51228
|
+
],
|
|
51229
|
+
"examples": [
|
|
51230
|
+
{
|
|
51231
|
+
"scenario": "ソート付きテーブル",
|
|
51232
|
+
"code": "<dads-table hover sort-behavior=\"dom\">\n <table>\n <thead>\n <tr>\n <th scope=\"col\" data-sort-type=\"string\"><button type=\"button\" data-sort>氏名</button></th>\n <th scope=\"col\" data-sort-type=\"date\"><button type=\"button\" data-sort>更新日</button></th>\n <th scope=\"col\">操作</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>山田 太郎</td>\n <td data-sort-value=\"2026-03-17\">2026/03/17</td>\n <td>詳細</td>\n </tr>\n </tbody>\n </table>\n</dads-table>"
|
|
51233
|
+
},
|
|
51234
|
+
{
|
|
51235
|
+
"scenario": "行選択付きテーブル",
|
|
51236
|
+
"code": "<dads-table selectable>\n <table>\n <thead>\n <tr>\n <th scope=\"col\"><input type=\"checkbox\" data-select-all aria-label=\"表示中の行をすべて選択\" /></th>\n <th scope=\"col\">利用者ID</th>\n <th scope=\"col\">氏名</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><input type=\"checkbox\" data-select-row aria-label=\"行を選択: A001\" /></td>\n <td>A001</td>\n <td>山田 太郎</td>\n </tr>\n </tbody>\n </table>\n</dads-table>"
|
|
51237
|
+
}
|
|
51238
|
+
],
|
|
51239
|
+
"pitfalls": [
|
|
51240
|
+
{
|
|
51241
|
+
"issue": "data-sort を <th> に付けると正しく動作しません。",
|
|
51242
|
+
"wrongCode": "<th scope=\"col\" data-sort>氏名</th>",
|
|
51243
|
+
"correctCode": "<th scope=\"col\" data-sort-type=\"string\"><button type=\"button\" data-sort>氏名</button></th>"
|
|
51244
|
+
},
|
|
51245
|
+
{
|
|
51246
|
+
"issue": "data-sort-type は <button> ではなく親 <th> に付けます。",
|
|
51247
|
+
"wrongCode": "<th scope=\"col\"><button type=\"button\" data-sort data-sort-type=\"number\">金額</button></th>",
|
|
51248
|
+
"correctCode": "<th scope=\"col\" data-sort-type=\"number\"><button type=\"button\" data-sort>金額</button></th>"
|
|
51249
|
+
}
|
|
51250
|
+
],
|
|
51251
|
+
"references": [
|
|
51252
|
+
{
|
|
51253
|
+
"title": "showcase table sort example",
|
|
51254
|
+
"path": "src/demos/showcase-components.ts"
|
|
51255
|
+
}
|
|
51256
|
+
]
|
|
51257
|
+
},
|
|
51090
51258
|
"a11yAnnotations": {
|
|
51091
51259
|
"version": 1,
|
|
51092
51260
|
"summary": "テーブル／データテーブル（アクセシビリティ注釈）",
|
package/data/design-tokens.json
CHANGED