@lism-css/mcp 0.1.0 → 0.2.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/dist/data/components.json +243 -86
- package/dist/data/docs-index.json +211 -237
- package/dist/data/meta.js +2 -2
- package/dist/data/overview.json +52 -18
- package/dist/data/props-system.json +563 -27
- package/dist/data/tokens.json +70 -69
- package/dist/index.js +2 -0
- package/dist/lib/schemas.d.ts +3 -0
- package/dist/lib/schemas.js +1 -0
- package/dist/lib/search.d.ts +21 -2
- package/dist/lib/search.js +79 -4
- package/dist/lib/types.d.ts +1 -0
- package/dist/tools/convert-css.d.ts +2 -0
- package/dist/tools/convert-css.js +223 -0
- package/dist/tools/get-component.js +26 -7
- package/dist/tools/get-overview.js +4 -1
- package/dist/tools/get-props-system.js +32 -7
- package/dist/tools/get-tokens.js +7 -3
- package/dist/tools/search-docs.js +16 -8
- package/package.json +5 -5
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
"package": "lism-css",
|
|
5
5
|
"category": "core",
|
|
6
6
|
"description": "全コンポーネントの基盤となるコアコンポーネント。Props システムによる CSS クラス・スタイルの自動変換を提供する。他の全てのコンポーネントは Lism を継承している。",
|
|
7
|
+
"aliases": ["base component", "コア", "基盤"],
|
|
7
8
|
"props": [
|
|
8
9
|
{ "name": "tag", "type": "string", "default": "div", "description": "レンダリングするHTML要素を指定。" },
|
|
9
10
|
{ "name": "as", "type": "Component", "description": "外部コンポーネントとしてレンダリング。" },
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
"name": "HTML",
|
|
19
20
|
"package": "lism-css",
|
|
20
21
|
"category": "core",
|
|
21
|
-
"description": "HTMLの主要なタグに<Lism>と同じプロパティを指定できるようにするためのコンポーネント。HTML.div, HTML.p, HTML.span, HTML.a, HTML.h, HTML.ul, HTML.ol, HTML.li, HTML.button が利用可能。例えば <HTML.p> は <Lism tag='p'> と同じように動作する。",
|
|
22
|
+
"description": "HTMLの主要なタグに<Lism>と同じプロパティを指定できるようにするためのコンポーネント。HTML.div, HTML.p, HTML.span, HTML.a, HTML.h, HTML.img, HTML.ul, HTML.ol, HTML.li, HTML.button が利用可能。例えば <HTML.p> は <Lism tag='p'> と同じように動作する。",
|
|
23
|
+
"aliases": ["HTML要素", "html tags", "セマンティック"],
|
|
22
24
|
"props": [
|
|
23
25
|
{ "name": "lv", "type": "'1' | '2' | '3' | '4' | '5' | '6'", "default": "1", "description": "HTML.h で使用。見出しレベルを指定する。" }
|
|
24
26
|
],
|
|
@@ -28,10 +30,18 @@
|
|
|
28
30
|
"name": "Dummy",
|
|
29
31
|
"package": "lism-css",
|
|
30
32
|
"category": "core",
|
|
31
|
-
"description": "ダミーテキストを生成するコンポーネント。プレビューやテスト用に使用。",
|
|
33
|
+
"description": "ダミーテキストを生成するコンポーネント。プレビューやテスト用に使用。tag='img'でダミー画像、tag='ul'/tag='ol'でダミーリストも出力可能。",
|
|
34
|
+
"aliases": ["placeholder", "lorem ipsum", "ダミーテキスト", "テスト用"],
|
|
32
35
|
"props": [
|
|
33
|
-
{ "name": "lang", "type": "'ja' | 'en'", "default": "en", "description": "ダミーテキストの言語。" },
|
|
34
|
-
{
|
|
36
|
+
{ "name": "lang", "type": "'ja' | 'en' | 'ar'", "default": "en", "description": "ダミーテキストの言語。" },
|
|
37
|
+
{
|
|
38
|
+
"name": "length",
|
|
39
|
+
"type": "'xs' | 's' | 'm' | 'l' | 'xl' | 'codes'",
|
|
40
|
+
"default": "m",
|
|
41
|
+
"description": "テキストの長さ。'codes'の場合はb,i,a,code要素を含むテキストを出力。"
|
|
42
|
+
},
|
|
43
|
+
{ "name": "pre", "type": "string", "description": "ダミーテキストの前に表示するテキスト。" },
|
|
44
|
+
{ "name": "offset", "type": "number", "default": "0", "description": "ダミーテキストのオフセット。区切り文字単位で先頭を切り捨てる。" }
|
|
35
45
|
],
|
|
36
46
|
"usage": "<Dummy lang='ja' />"
|
|
37
47
|
},
|
|
@@ -40,6 +50,7 @@
|
|
|
40
50
|
"package": "lism-css",
|
|
41
51
|
"category": "layout",
|
|
42
52
|
"description": "最も基本的なレイアウトモジュール。汎用的なボックス要素として使用。l--box クラスが付与される。",
|
|
53
|
+
"aliases": ["ボックス", "汎用ボックス", "基本レイアウト"],
|
|
43
54
|
"props": [],
|
|
44
55
|
"usage": "<Box p='20' bgc='base-2'>Content</Box>"
|
|
45
56
|
},
|
|
@@ -48,11 +59,11 @@
|
|
|
48
59
|
"package": "lism-css",
|
|
49
60
|
"category": "layout",
|
|
50
61
|
"description": "Flexboxレイアウトを構成するコンポーネント。display: flex が適用される。",
|
|
62
|
+
"aliases": ["flexbox", "横並び", "フレックス", "inline layout", "display: flex"],
|
|
51
63
|
"props": [
|
|
64
|
+
{ "name": "fxf", "type": "string | array", "description": "flex-flow の値。" },
|
|
52
65
|
{ "name": "fxw", "type": "string | array", "description": "flex-wrap の値。" },
|
|
53
|
-
{ "name": "fxd", "type": "string | array", "description": "flex-direction の値。" }
|
|
54
|
-
{ "name": "ai", "type": "string | array", "description": "align-items の値。" },
|
|
55
|
-
{ "name": "jc", "type": "string | array", "description": "justify-content の値。" }
|
|
66
|
+
{ "name": "fxd", "type": "string | array", "description": "flex-direction の値。" }
|
|
56
67
|
],
|
|
57
68
|
"usage": "<Flex g='20' ai='center' jc='center'>...</Flex>"
|
|
58
69
|
},
|
|
@@ -60,7 +71,8 @@
|
|
|
60
71
|
"name": "Stack",
|
|
61
72
|
"package": "lism-css",
|
|
62
73
|
"category": "layout",
|
|
63
|
-
"description": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。",
|
|
74
|
+
"description": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。Flexで使えるPropsが使える。",
|
|
75
|
+
"aliases": ["縦並び", "vertical layout", "縦積み", "column direction", "display: flex", "flex-direction: column"],
|
|
64
76
|
"props": [],
|
|
65
77
|
"usage": "<Stack g='20'>...</Stack>"
|
|
66
78
|
},
|
|
@@ -69,12 +81,16 @@
|
|
|
69
81
|
"package": "lism-css",
|
|
70
82
|
"category": "layout",
|
|
71
83
|
"description": "CSS Gridレイアウトを構成するコンポーネント。display: grid が適用される。",
|
|
84
|
+
"aliases": ["CSS Grid", "グリッド", "grid layout", "格子", "display: grid"],
|
|
72
85
|
"props": [
|
|
86
|
+
{ "name": "gd", "type": "string | array", "description": "grid の値。" },
|
|
73
87
|
{ "name": "gt", "type": "string | array", "description": "grid-template の値。" },
|
|
88
|
+
{ "name": "gta", "type": "string | array", "description": "grid-template-areas の値。" },
|
|
74
89
|
{ "name": "gtc", "type": "string | array", "description": "grid-template-columns の値。" },
|
|
75
90
|
{ "name": "gtr", "type": "string | array", "description": "grid-template-rows の値。" },
|
|
76
|
-
{ "name": "
|
|
77
|
-
{ "name": "
|
|
91
|
+
{ "name": "gaf", "type": "string | array", "description": "grid-auto-flow の値。" },
|
|
92
|
+
{ "name": "gar", "type": "string | array", "description": "grid-auto-rows の値。" },
|
|
93
|
+
{ "name": "gac", "type": "string | array", "description": "grid-auto-columns の値。" }
|
|
78
94
|
],
|
|
79
95
|
"usage": "<Grid gtc='1fr 1fr' g='20'>...</Grid>"
|
|
80
96
|
},
|
|
@@ -82,7 +98,8 @@
|
|
|
82
98
|
"name": "Center",
|
|
83
99
|
"package": "lism-css",
|
|
84
100
|
"category": "layout",
|
|
85
|
-
"description": "子要素を中央揃えにするレイアウトコンポーネント。place-items: center の Grid。",
|
|
101
|
+
"description": "子要素を中央揃えにするレイアウトコンポーネント。place-items: center の Grid。Gridで使えるpropsが使える。",
|
|
102
|
+
"aliases": ["中央揃え", "centering", "中央配置", "center align", "place-items: center", "place-content: center", "display: grid"],
|
|
86
103
|
"props": [],
|
|
87
104
|
"usage": "<Center p='40' h='200px'>Centered Content</Center>"
|
|
88
105
|
},
|
|
@@ -91,6 +108,7 @@
|
|
|
91
108
|
"package": "lism-css",
|
|
92
109
|
"category": "layout",
|
|
93
110
|
"description": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。",
|
|
111
|
+
"aliases": ["横並び折り返し", "inline wrap", "タグ並び", "badge list", "flex wrap", "display: flex", "flex-wrap: wrap"],
|
|
94
112
|
"props": [],
|
|
95
113
|
"usage": "<Cluster g='10'>...</Cluster>"
|
|
96
114
|
},
|
|
@@ -98,16 +116,18 @@
|
|
|
98
116
|
"name": "Columns",
|
|
99
117
|
"package": "lism-css",
|
|
100
118
|
"category": "layout",
|
|
101
|
-
"description": "
|
|
102
|
-
"
|
|
119
|
+
"description": "ブレイクポイントごとに指定した列数で表示できるカラムレイアウト。Gridベース。",
|
|
120
|
+
"aliases": ["等分割", "equal columns", "均等幅カラム", "multi column", "複数列"],
|
|
121
|
+
"props": [{ "name": "cols", "type": "number | array", "default": "2", "description": "列数。レスポンシブ対応可能。--cols変数として出力。" }],
|
|
103
122
|
"usage": "<Columns cols={[1, 2, 3]} g='20'>...</Columns>"
|
|
104
123
|
},
|
|
105
124
|
{
|
|
106
125
|
"name": "Flow",
|
|
107
126
|
"package": "lism-css",
|
|
108
127
|
"category": "layout",
|
|
109
|
-
"description": "
|
|
110
|
-
"
|
|
128
|
+
"description": "コンテンツフロー用のレイアウト。display:flow-rootで、子要素間に一定の余白を管理する。記事本文のような縦方向のフローコンテンツに適している。見出しタグは余白が2倍になる。",
|
|
129
|
+
"aliases": ["content flow", "記事本文", "本文レイアウト", "article body", "縦方向余白"],
|
|
130
|
+
"props": [{ "name": "flow", "type": "'s' | string", "description": "フロー方向の余白サイズ。's'で小さい余白。" }],
|
|
111
131
|
"usage": "<Flow flow='s'>...</Flow>"
|
|
112
132
|
},
|
|
113
133
|
{
|
|
@@ -115,15 +135,29 @@
|
|
|
115
135
|
"package": "lism-css",
|
|
116
136
|
"category": "layout",
|
|
117
137
|
"description": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない流動的なカラムレイアウト。",
|
|
118
|
-
"
|
|
138
|
+
"aliases": [
|
|
139
|
+
"auto-wrap",
|
|
140
|
+
"自動折り返し",
|
|
141
|
+
"responsive grid",
|
|
142
|
+
"メディアクエリなし",
|
|
143
|
+
"fluid columns",
|
|
144
|
+
"auto-fill",
|
|
145
|
+
"流動カラム",
|
|
146
|
+
"折り返しグリッド"
|
|
147
|
+
],
|
|
148
|
+
"props": [
|
|
149
|
+
{ "name": "cols", "type": "string", "description": "各カラムが維持する最小幅 (例: '320px')。--cols変数として出力。" },
|
|
150
|
+
{ "name": "autoFill", "type": "boolean", "description": "自動折り返しのモードをauto-fillに切り替える。--autoMode変数として出力。" }
|
|
151
|
+
],
|
|
119
152
|
"usage": "<FluidCols cols='320px' g='20'>...</FluidCols>"
|
|
120
153
|
},
|
|
121
154
|
{
|
|
122
155
|
"name": "Frame",
|
|
123
156
|
"package": "lism-css",
|
|
124
157
|
"category": "layout",
|
|
125
|
-
"description": "
|
|
126
|
-
"
|
|
158
|
+
"description": "直下のメディア要素（img, video, iframe）を自身のサイズに合わせて表示するレイアウトモジュール。アスペクト比の指定も可能。",
|
|
159
|
+
"aliases": ["aspect-ratio", "アスペクト比", "画像コンテナ", "動画フレーム", "比率維持"],
|
|
160
|
+
"props": [{ "name": "ar", "type": "string | array", "description": "アスペクト比。(ar自体はどのコンポーネントにも指定できるCSS Props)" }],
|
|
127
161
|
"usage": "<Frame ar='16/9'>...</Frame>"
|
|
128
162
|
},
|
|
129
163
|
{
|
|
@@ -131,80 +165,134 @@
|
|
|
131
165
|
"package": "lism-css",
|
|
132
166
|
"category": "layout",
|
|
133
167
|
"description": "一定の幅で自動的に1カラムと複数カラムを切り替えるレイアウト。メディアクエリに依存しない。",
|
|
134
|
-
"
|
|
168
|
+
"aliases": ["カラム切り替え", "responsive columns", "メディアクエリなし", "breakpoint switch", "1カラム切り替え"],
|
|
169
|
+
"props": [
|
|
170
|
+
{
|
|
171
|
+
"name": "breakSize",
|
|
172
|
+
"type": "string",
|
|
173
|
+
"description": "横並びを維持するのに必要な幅（親のサイズ）。szトークンの指定が可能。--breakSize変数として出力。"
|
|
174
|
+
}
|
|
175
|
+
],
|
|
135
176
|
"usage": "<SwitchCols breakSize='s' g='20'>...</SwitchCols>"
|
|
136
177
|
},
|
|
137
178
|
{
|
|
138
179
|
"name": "SideMain",
|
|
139
180
|
"package": "lism-css",
|
|
140
181
|
"category": "layout",
|
|
141
|
-
"description": "サイドバー + メインコンテンツの2
|
|
182
|
+
"description": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅で、メインの幅が指定値を下回ると自動で1カラムに切り替わる。子要素にisSideが必要。",
|
|
183
|
+
"aliases": ["sidebar layout", "サイドバー", "2カラム", "two column", "サイドメイン"],
|
|
142
184
|
"props": [
|
|
143
|
-
{ "name": "sideW", "type": "string", "description": "
|
|
144
|
-
{ "name": "mainW", "type": "string", "description": "
|
|
185
|
+
{ "name": "sideW", "type": "string", "description": "サイドバーの幅。--sideW変数として出力。" },
|
|
186
|
+
{ "name": "mainW", "type": "string", "description": "メインエリアで維持したい最小幅。--mainW変数として出力。" }
|
|
145
187
|
],
|
|
146
|
-
"usage": "<SideMain sideW='240px'>...</SideMain>"
|
|
188
|
+
"usage": "<SideMain sideW='240px' mainW='20rem'>...</SideMain>"
|
|
147
189
|
},
|
|
148
190
|
{
|
|
149
191
|
"name": "Container",
|
|
150
192
|
"package": "lism-css",
|
|
151
193
|
"category": "layout",
|
|
152
|
-
"description": "
|
|
153
|
-
"
|
|
154
|
-
"
|
|
194
|
+
"description": "コンテナクエリの基準要素。<Lism isContainer>のエイリアスで、is--containerクラスが付与される。sizeを指定するとis--wrapperも同時にセットされる。",
|
|
195
|
+
"aliases": ["container query", "コンテナクエリ", "レスポンシブ基準"],
|
|
196
|
+
"props": [
|
|
197
|
+
{ "name": "size", "type": "boolean | string", "description": "コンテンツサイズ。isWrapperに渡される ('s', 'l' など)。" },
|
|
198
|
+
{ "name": "layout", "type": "string", "description": "展開したいLayoutモジュールを指定。" }
|
|
199
|
+
],
|
|
200
|
+
"usage": "<Container layout='flow'>...</Container>"
|
|
155
201
|
},
|
|
156
202
|
{
|
|
157
203
|
"name": "Layer",
|
|
158
204
|
"package": "lism-css",
|
|
159
205
|
"category": "layout",
|
|
160
|
-
"description": "
|
|
161
|
-
"
|
|
206
|
+
"description": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。<Lism isLayer>のエイリアスで、is--layer クラスが付与される。",
|
|
207
|
+
"aliases": ["overlay", "オーバーレイ", "absolute position", "重ねる", "背景装飾"],
|
|
208
|
+
"props": [
|
|
209
|
+
{
|
|
210
|
+
"name": "blur",
|
|
211
|
+
"type": "string | number",
|
|
212
|
+
"description": "backdrop-filterのblur値。他のフィルタープロパティとまとめてstyle.backdropFilterに出力。"
|
|
213
|
+
},
|
|
214
|
+
{ "name": "contrast", "type": "string | number", "description": "backdrop-filterのcontrast値。" },
|
|
215
|
+
{ "name": "brightness", "type": "string | number", "description": "backdrop-filterのbrightness値。" },
|
|
216
|
+
{ "name": "grayscale", "type": "string | number", "description": "backdrop-filterのgrayscale値。" },
|
|
217
|
+
{ "name": "hueRotate", "type": "string | number", "description": "backdrop-filterのhue-rotate値。" },
|
|
218
|
+
{ "name": "invert", "type": "string | number", "description": "backdrop-filterのinvert値。" },
|
|
219
|
+
{ "name": "saturate", "type": "string | number", "description": "backdrop-filterのsaturate値。" },
|
|
220
|
+
{ "name": "sepia", "type": "string | number", "description": "backdrop-filterのsepia値。" }
|
|
221
|
+
],
|
|
162
222
|
"usage": "<Layer bgc='black' o='-30'>Overlay</Layer>"
|
|
163
223
|
},
|
|
164
224
|
{
|
|
165
225
|
"name": "LinkBox",
|
|
166
226
|
"package": "lism-css",
|
|
167
227
|
"category": "layout",
|
|
168
|
-
"description": "
|
|
169
|
-
"
|
|
228
|
+
"description": "ボックス全体をリンク領域にするコンポーネント。hrefが指定されるとa要素、なければdiv要素として出力。カード全体をクリッカブルにする場合等に使用。",
|
|
229
|
+
"aliases": ["clickable card", "クリッカブル", "カード全体リンク", "リンクカード"],
|
|
230
|
+
"props": [{ "name": "href", "type": "string", "description": "リンク先URL。指定ありでa要素、なしでdiv要素として出力。" }],
|
|
170
231
|
"usage": "<LinkBox href='/path'>Clickable Card</LinkBox>"
|
|
171
232
|
},
|
|
172
233
|
{
|
|
173
234
|
"name": "Wrapper",
|
|
174
235
|
"package": "lism-css",
|
|
175
236
|
"category": "layout",
|
|
176
|
-
"description": "
|
|
177
|
-
"
|
|
178
|
-
"
|
|
237
|
+
"description": "コンテンツ幅を制限するラッパー要素。<Lism isWrapper>のエイリアスで、is--wrapper クラスが付与される。",
|
|
238
|
+
"aliases": ["max-width", "コンテンツ幅制限", "幅制限", "width limiter"],
|
|
239
|
+
"props": [
|
|
240
|
+
{
|
|
241
|
+
"name": "contentSize",
|
|
242
|
+
"type": "boolean | string",
|
|
243
|
+
"description": "コンテンツサイズを指定。's'や'l'などのプリセット値、または任意の値。"
|
|
244
|
+
},
|
|
245
|
+
{ "name": "layout", "type": "string", "description": "展開したいLayoutモジュールを指定。" },
|
|
246
|
+
{ "name": "isContainer", "type": "boolean", "description": "コンテナタイプをセットする。" }
|
|
247
|
+
],
|
|
248
|
+
"usage": "<Wrapper contentSize='s' layout='flow'>...</Wrapper>"
|
|
179
249
|
},
|
|
180
250
|
{
|
|
181
251
|
"name": "Icon",
|
|
182
252
|
"package": "lism-css",
|
|
183
253
|
"category": "atomic",
|
|
184
|
-
"description": "アイコンを表示するコンポーネント。SVGアイコンやアイコンコンポーネントを統一的に扱える。a--icon
|
|
254
|
+
"description": "アイコンを表示するコンポーネント。SVGアイコンやアイコンコンポーネントを統一的に扱える。a--icon クラスが付与される。プリセットアイコン名の文字列、SVG文字列、外部コンポーネントなど多様な指定方法をサポート。",
|
|
255
|
+
"aliases": ["SVGアイコン", "アイコン表示", "icon component"],
|
|
185
256
|
"props": [
|
|
186
|
-
{
|
|
187
|
-
|
|
257
|
+
{
|
|
258
|
+
"name": "icon",
|
|
259
|
+
"type": "ElementType | string | { as: ElementType, [key: string]: unknown }",
|
|
260
|
+
"description": "アイコン要素。プリセット名の文字列、SVG文字列、外部コンポーネント、{as, ...props}オブジェクトを指定可能。"
|
|
261
|
+
},
|
|
262
|
+
{ "name": "label", "type": "string", "description": "aria-labelとして出力。指定ありでrole='img'、なしでaria-hidden='true'が付与される。" }
|
|
188
263
|
],
|
|
189
|
-
"usage": "<Icon icon={SomeIcon}
|
|
264
|
+
"usage": "<Icon icon={SomeIcon} w='1.5em' />"
|
|
190
265
|
},
|
|
191
266
|
{
|
|
192
267
|
"name": "Divider",
|
|
193
268
|
"package": "lism-css",
|
|
194
269
|
"category": "atomic",
|
|
195
|
-
"description": "区切り線を表示するコンポーネント。a--divider
|
|
196
|
-
"
|
|
270
|
+
"description": "区切り線を表示するコンポーネント。a--divider クラスが付与され、aria-hidden='true'がデフォルトで出力される。--bdcがvar(--divider)に初期セット。",
|
|
271
|
+
"aliases": ["separator", "区切り線", "仕切り", "hr"],
|
|
272
|
+
"props": [
|
|
273
|
+
{ "name": "bdw", "type": "string", "description": "区切り線のボーダー幅。" },
|
|
274
|
+
{ "name": "bds", "type": "string", "description": "区切り線のボーダースタイル。" },
|
|
275
|
+
{ "name": "bdc", "type": "string", "description": "区切り線のボーダーカラー。" },
|
|
276
|
+
{ "name": "variant", "type": "string", "description": "区切り線のバリエーション。" }
|
|
277
|
+
],
|
|
197
278
|
"usage": "<Divider />"
|
|
198
279
|
},
|
|
199
280
|
{
|
|
200
281
|
"name": "Media",
|
|
201
282
|
"package": "lism-css",
|
|
202
283
|
"category": "atomic",
|
|
203
|
-
"description": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。a--media
|
|
284
|
+
"description": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。a--media クラスが付与される。デフォルトでimgタグが出力される。",
|
|
285
|
+
"aliases": ["画像", "動画", "img tag", "video tag", "メディア要素"],
|
|
204
286
|
"props": [
|
|
205
|
-
{ "name": "tag", "type": "'img' | 'video' | 'iframe'", "default": "img", "description": "メディア要素の種類。" },
|
|
206
287
|
{ "name": "src", "type": "string", "description": "メディアのURL。" },
|
|
207
|
-
{ "name": "alt", "type": "string", "description": "代替テキスト (img の場合)。" }
|
|
288
|
+
{ "name": "alt", "type": "string", "description": "代替テキスト (img の場合)。" },
|
|
289
|
+
{ "name": "objectPosition", "type": "string", "description": "メディア要素のobject-positionを指定。" },
|
|
290
|
+
{ "name": "objectFit", "type": "string", "description": "メディア要素のobject-fitを指定。" },
|
|
291
|
+
{ "name": "blur", "type": "string | number", "description": "filterのblur値。他のフィルタープロパティとまとめてstyle.filterに出力。" },
|
|
292
|
+
{ "name": "contrast", "type": "string | number", "description": "filterのcontrast値。" },
|
|
293
|
+
{ "name": "brightness", "type": "string | number", "description": "filterのbrightness値。" },
|
|
294
|
+
{ "name": "grayscale", "type": "string | number", "description": "filterのgrayscale値。" },
|
|
295
|
+
{ "name": "saturate", "type": "string | number", "description": "filterのsaturate値。" }
|
|
208
296
|
],
|
|
209
297
|
"usage": "<Media src='/image.jpg' alt='Photo' />"
|
|
210
298
|
},
|
|
@@ -212,27 +300,49 @@
|
|
|
212
300
|
"name": "Spacer",
|
|
213
301
|
"package": "lism-css",
|
|
214
302
|
"category": "atomic",
|
|
215
|
-
"description": "空白を挿入するコンポーネント。a--spacer
|
|
216
|
-
"
|
|
303
|
+
"description": "空白を挿入するコンポーネント。a--spacer クラスが付与され、aria-hidden='true'がデフォルトで出力される。w,hにはSPACEトークンの値が使える。",
|
|
304
|
+
"aliases": ["余白", "空白挿入", "スペース", "gap element"],
|
|
305
|
+
"props": [
|
|
306
|
+
{ "name": "h", "type": "string | number", "description": "高さ (スペーシングトークン値)。" },
|
|
307
|
+
{ "name": "w", "type": "string | number", "description": "幅 (スペーシングトークン値)。" }
|
|
308
|
+
],
|
|
217
309
|
"usage": "<Spacer h='40' />"
|
|
218
310
|
},
|
|
219
311
|
{
|
|
220
312
|
"name": "Decorator",
|
|
221
313
|
"package": "lism-css",
|
|
222
314
|
"category": "atomic",
|
|
223
|
-
"description": "装飾用のコンポーネント。視覚的な装飾要素を追加するために使用。a--decorator
|
|
224
|
-
"
|
|
225
|
-
"
|
|
315
|
+
"description": "装飾用のコンポーネント。視覚的な装飾要素を追加するために使用。a--decorator クラスが付与され、aria-hidden='true'がデフォルトで出力される。",
|
|
316
|
+
"aliases": ["装飾", "visual decoration", "装飾要素"],
|
|
317
|
+
"props": [
|
|
318
|
+
{
|
|
319
|
+
"name": "size",
|
|
320
|
+
"type": "string",
|
|
321
|
+
"description": "デコレーターのサイズ（横幅・高さ）を一括指定。wに渡され、ar='1/1'が自動付与される。"
|
|
322
|
+
},
|
|
323
|
+
{ "name": "clipPath", "type": "string", "description": "style.clipPathへ渡す。" },
|
|
324
|
+
{ "name": "boxSizing", "type": "string", "description": "style.boxSizingへ渡す。" }
|
|
325
|
+
],
|
|
326
|
+
"usage": "<Decorator size='1.25em' pos='abs' t='0' l='0' bd-x-s bd-y-s />"
|
|
226
327
|
},
|
|
227
328
|
{
|
|
228
329
|
"name": "Accordion",
|
|
229
330
|
"package": "@lism-css/ui",
|
|
230
331
|
"category": "interactive",
|
|
231
|
-
"description": "アコーディオン UI。クリックでコンテンツの開閉を切り替える。JavaScript
|
|
332
|
+
"description": "アコーディオン UI。クリックでコンテンツの開閉を切り替える。JavaScriptで開閉アニメーションを制御。パネルにhidden='until-found'を使用しブラウザのページ内検索に対応。サブコンポーネント構造: Accordion.Root > Accordion.Item > (Accordion.Heading > Accordion.Button) + Accordion.Panel。Accordion.Iconは自動で含まれる。",
|
|
333
|
+
"aliases": ["開閉", "折りたたみ", "FAQ", "collapsible", "toggle panel"],
|
|
232
334
|
"props": [
|
|
233
|
-
{
|
|
234
|
-
|
|
235
|
-
|
|
335
|
+
{
|
|
336
|
+
"name": "allowMultiple",
|
|
337
|
+
"type": "boolean",
|
|
338
|
+
"description": "複数のアイテムを同時に開くことを許可 (Root)。デフォルトでは一つしか展開できない。"
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"name": "tag",
|
|
342
|
+
"type": "string",
|
|
343
|
+
"description": "見出しのHTMLタグ (Heading)。デフォルトはdiv (role='heading'が自動付与)。h2〜h6を指定するとroleは付与されない。"
|
|
344
|
+
},
|
|
345
|
+
{ "name": "flow", "type": "string", "description": "パネル内のコンテンツ領域(__content)に渡すフローレイアウトの設定 (Panel)。" }
|
|
236
346
|
],
|
|
237
347
|
"usage": "<Accordion.Root>\n <Accordion.Item>\n <Accordion.Heading>\n <Accordion.Button>Label</Accordion.Button>\n </Accordion.Heading>\n <Accordion.Panel>Content</Accordion.Panel>\n </Accordion.Item>\n</Accordion.Root>"
|
|
238
348
|
},
|
|
@@ -240,22 +350,32 @@
|
|
|
240
350
|
"name": "Modal",
|
|
241
351
|
"package": "@lism-css/ui",
|
|
242
352
|
"category": "interactive",
|
|
243
|
-
"description": "モーダルダイアログ UI。dialog 要素を使用。JavaScript
|
|
353
|
+
"description": "モーダルダイアログ UI。dialog 要素を使用。JavaScriptが付属。data-modal-open/data-modal-close属性で開閉を制御。サブコンポーネント構造: Modal.OpenBtn + Modal.Root > Modal.Inner > Modal.Body + Modal.CloseBtn。",
|
|
354
|
+
"aliases": ["dialog", "popup", "ポップアップ", "ダイアログ", "モーダルウィンドウ"],
|
|
244
355
|
"props": [
|
|
245
356
|
{ "name": "id", "type": "string", "description": "モーダルのID (Root, 必須)。" },
|
|
246
|
-
{
|
|
357
|
+
{
|
|
358
|
+
"name": "modalId",
|
|
359
|
+
"type": "string",
|
|
360
|
+
"description": "対象モーダルのID (OpenBtn/CloseBtn)。data-modal-open/data-modal-closeとして出力。"
|
|
361
|
+
},
|
|
362
|
+
{ "name": "duration", "type": "string", "description": "アニメーションの持続時間 (Root)。--duration変数として出力。" },
|
|
363
|
+
{ "name": "offset", "type": "string", "description": "非表示時の位置をずらすオフセット値 (Inner)。--offset変数として出力。" },
|
|
364
|
+
{ "name": "layout", "type": "string", "description": "Inner要素のレイアウト用コンポーネントを指定 (Inner)。" }
|
|
247
365
|
],
|
|
248
|
-
"usage": "<Modal.OpenBtn modalId='modal-01'>Open</Modal.OpenBtn>\n<Modal.Root id='modal-01'>\n <Modal.Inner
|
|
366
|
+
"usage": "<Modal.OpenBtn modalId='modal-01'>Open</Modal.OpenBtn>\n<Modal.Root id='modal-01'>\n <Modal.Inner>\n <Modal.Body>Content</Modal.Body>\n <Modal.CloseBtn modalId='modal-01' />\n </Modal.Inner>\n</Modal.Root>"
|
|
249
367
|
},
|
|
250
368
|
{
|
|
251
369
|
"name": "Tabs",
|
|
252
370
|
"package": "@lism-css/ui",
|
|
253
371
|
"category": "interactive",
|
|
254
|
-
"description": "タブ切り替え UI。タブをクリックしてコンテンツパネルを切り替える。JavaScript
|
|
372
|
+
"description": "タブ切り替え UI。タブをクリックしてコンテンツパネルを切り替える。JavaScriptが付属。スタイリングはほぼなく動きのみ提供。サブコンポーネント構造: Tabs.Root > Tabs.Item > (Tabs.Tab + Tabs.Panel)。Tabs.Listも利用可能。",
|
|
373
|
+
"aliases": ["タブ切り替え", "tab panel", "パネル切り替え", "tab navigation"],
|
|
255
374
|
"props": [
|
|
256
|
-
{ "name": "tabId", "type": "string", "description": "
|
|
257
|
-
{ "name": "defaultIndex", "type": "number", "default": "1", "description": "初期アクティブタブ (1始まり)。" },
|
|
258
|
-
{ "name": "variant", "type": "string", "description": "
|
|
375
|
+
{ "name": "tabId", "type": "string", "description": "タブを特定するためのID文字列 (Root)。aria-controlsに使用。" },
|
|
376
|
+
{ "name": "defaultIndex", "type": "number", "default": "1", "description": "初期アクティブタブ (1始まり) (Root)。" },
|
|
377
|
+
{ "name": "variant", "type": "string", "description": "スタイルバリエーション (Root)。c--tabs--{variant}クラスが出力。" },
|
|
378
|
+
{ "name": "listProps", "type": "object", "description": "タブボタンを囲むリスト要素(c--tabs_list)へ渡すprops (Root)。" }
|
|
259
379
|
],
|
|
260
380
|
"usage": "<Tabs.Root>\n <Tabs.Item>\n <Tabs.Tab>Tab 1</Tabs.Tab>\n <Tabs.Panel>Content 1</Tabs.Panel>\n </Tabs.Item>\n <Tabs.Item>\n <Tabs.Tab>Tab 2</Tabs.Tab>\n <Tabs.Panel>Content 2</Tabs.Panel>\n </Tabs.Item>\n</Tabs.Root>"
|
|
261
381
|
},
|
|
@@ -263,27 +383,31 @@
|
|
|
263
383
|
"name": "Details",
|
|
264
384
|
"package": "@lism-css/ui",
|
|
265
385
|
"category": "interactive",
|
|
266
|
-
"description": "HTMLの details/summary
|
|
386
|
+
"description": "HTMLの details/summary 要素をラップしたコンポーネント。Accordionとは違いJSを使わずCSSのみで実装。サブコンポーネント構造: Details.Root > Details.Summary > (Details.Title + Details.Icon) + Details.Content。",
|
|
387
|
+
"aliases": ["details summary", "disclosure", "ネイティブ開閉", "summary element"],
|
|
267
388
|
"props": [
|
|
268
|
-
{ "name": "
|
|
269
|
-
{ "name": "
|
|
389
|
+
{ "name": "tag", "type": "string", "description": "Details.Titleで出力するHTMLタグの種類 (Title)。デフォルトはspan。" },
|
|
390
|
+
{ "name": "--duration", "type": "string", "description": "展開アニメーションの秒数 (Root)。style経由で指定。" }
|
|
270
391
|
],
|
|
271
|
-
"usage": "<Details
|
|
392
|
+
"usage": "<Details.Root>\n <Details.Summary>\n <Details.Title>Title</Details.Title>\n <Details.Icon />\n </Details.Summary>\n <Details.Content>Content</Details.Content>\n</Details.Root>"
|
|
272
393
|
},
|
|
273
394
|
{
|
|
274
395
|
"name": "Alert",
|
|
275
396
|
"package": "@lism-css/ui",
|
|
276
397
|
"category": "feedback",
|
|
277
|
-
"description": "
|
|
398
|
+
"description": "短めの文言を目立たせて強調表示するアラートボックス。アイコンとキーカラーでバリエーションを表現。typeプリセットによりアイコンとカラーが自動設定される。",
|
|
399
|
+
"aliases": ["notice", "warning box", "注意書き", "お知らせ", "通知"],
|
|
278
400
|
"props": [
|
|
279
401
|
{
|
|
280
402
|
"name": "type",
|
|
281
|
-
"type": "'alert' | 'point' | 'warning' | 'check' | '
|
|
282
|
-
"
|
|
403
|
+
"type": "'alert' | 'point' | 'warning' | 'check' | 'help' | 'info'",
|
|
404
|
+
"default": "alert",
|
|
405
|
+
"description": "アラートタイプ。keycolorとiconの組み合わせプリセットを呼び出す。"
|
|
283
406
|
},
|
|
284
407
|
{ "name": "keycolor", "type": "string", "description": "アラートのキーカラー。" },
|
|
285
408
|
{ "name": "icon", "type": "ReactNode | string", "description": "カスタムアイコン。" },
|
|
286
|
-
{ "name": "layout", "type": "'flex' | 'sideMain'", "description": "レイアウトモジュール。" }
|
|
409
|
+
{ "name": "layout", "type": "'flex' | 'sideMain'", "default": "flex", "description": "レイアウトモジュール。" },
|
|
410
|
+
{ "name": "flow", "type": "string", "default": "s", "description": "コンテンツを囲むdiv要素のフロー余白。" }
|
|
287
411
|
],
|
|
288
412
|
"usage": "<Alert type='warning'>Warning message</Alert>"
|
|
289
413
|
},
|
|
@@ -291,32 +415,47 @@
|
|
|
291
415
|
"name": "Callout",
|
|
292
416
|
"package": "@lism-css/ui",
|
|
293
417
|
"category": "feedback",
|
|
294
|
-
"description": "
|
|
418
|
+
"description": "記事の中で重要なポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。typeプリセットによりアイコンとカラーが自動設定される。",
|
|
419
|
+
"aliases": ["補足情報", "note box", "強調ボックス", "highlight"],
|
|
295
420
|
"props": [
|
|
421
|
+
{
|
|
422
|
+
"name": "type",
|
|
423
|
+
"type": "'note' | 'alert' | 'point' | 'warning' | 'check' | 'help'",
|
|
424
|
+
"default": "note",
|
|
425
|
+
"description": "コールアウトタイプ。keycolorとiconの組み合わせプリセットを呼び出す。"
|
|
426
|
+
},
|
|
296
427
|
{ "name": "keycolor", "type": "string", "description": "コールアウトのキーカラー。" },
|
|
297
|
-
{ "name": "icon", "type": "ReactNode | string", "description": "コールアウトのアイコン。" }
|
|
428
|
+
{ "name": "icon", "type": "ReactNode | string", "description": "コールアウトのアイコン。" },
|
|
429
|
+
{ "name": "title", "type": "string", "description": "コールアウトのタイトルテキスト。" },
|
|
430
|
+
{ "name": "flow", "type": "string", "default": "s", "description": "コンテンツ部分(_body)のフロー余白。" }
|
|
298
431
|
],
|
|
299
|
-
"usage": "<Callout
|
|
432
|
+
"usage": "<Callout type='note' title='Important' keycolor='blue'>Important note</Callout>"
|
|
300
433
|
},
|
|
301
434
|
{
|
|
302
435
|
"name": "Button",
|
|
303
436
|
"package": "@lism-css/ui",
|
|
304
437
|
"category": "action",
|
|
305
|
-
"description": "
|
|
438
|
+
"description": "ボタン型リンクコンポーネント。c--button クラスが付与される。デフォルトでa要素として出力。バリエーション (fill, outline 等) をサポート。",
|
|
439
|
+
"aliases": ["CTA", "アクションボタン", "リンクボタン", "submit"],
|
|
306
440
|
"props": [
|
|
307
|
-
{
|
|
441
|
+
{
|
|
442
|
+
"name": "variant",
|
|
443
|
+
"type": "string",
|
|
444
|
+
"description": "ボタンのバリエーション ('fill', 'outline' 等)。c--button--{variant}クラスが出力。"
|
|
445
|
+
},
|
|
308
446
|
{ "name": "keycolor", "type": "string", "description": "ボタンのキーカラー。" },
|
|
309
|
-
{ "name": "href", "type": "string", "description": "リンク先URL
|
|
447
|
+
{ "name": "href", "type": "string", "description": "リンク先URL。" }
|
|
310
448
|
],
|
|
311
|
-
"usage": "<Button variant='
|
|
449
|
+
"usage": "<Button variant='fill' href='#'>Click me</Button>"
|
|
312
450
|
},
|
|
313
451
|
{
|
|
314
452
|
"name": "Badge",
|
|
315
453
|
"package": "@lism-css/ui",
|
|
316
454
|
"category": "display",
|
|
317
|
-
"description": "バッジ (ラベル)
|
|
455
|
+
"description": "バッジ (ラベル) コンポーネント。c--badge クラスが付与される。span要素としてインライン表示。カテゴリやステータスの表示に使用。",
|
|
456
|
+
"aliases": ["ラベル", "ステータス表示", "tag label", "カテゴリ表示"],
|
|
318
457
|
"props": [
|
|
319
|
-
{ "name": "variant", "type": "string", "description": "
|
|
458
|
+
{ "name": "variant", "type": "string", "description": "バッジのバリエーション ('outline' 等)。c--badge--{variant}クラスが出力。" },
|
|
320
459
|
{ "name": "keycolor", "type": "string", "description": "バッジのキーカラー。" }
|
|
321
460
|
],
|
|
322
461
|
"usage": "<Badge keycolor='green'>New</Badge>"
|
|
@@ -325,11 +464,12 @@
|
|
|
325
464
|
"name": "Avatar",
|
|
326
465
|
"package": "@lism-css/ui",
|
|
327
466
|
"category": "display",
|
|
328
|
-
"description": "アバター (プロフィール画像)
|
|
467
|
+
"description": "アバター (プロフィール画像) コンポーネント。c--avatar クラスが付与される。Frameベースの円形画像表示。",
|
|
468
|
+
"aliases": ["プロフィール画像", "user icon", "ユーザーアイコン", "丸画像"],
|
|
329
469
|
"props": [
|
|
330
470
|
{ "name": "src", "type": "string", "description": "画像URL。" },
|
|
331
471
|
{ "name": "alt", "type": "string", "description": "代替テキスト。" },
|
|
332
|
-
{ "name": "size", "type": "string", "description": "アバターのサイズ。" }
|
|
472
|
+
{ "name": "size", "type": "string", "default": "1.5em", "description": "アバターのサイズ。" }
|
|
333
473
|
],
|
|
334
474
|
"usage": "<Avatar src='/avatar.jpg' alt='User' size='48px' />"
|
|
335
475
|
},
|
|
@@ -337,10 +477,15 @@
|
|
|
337
477
|
"name": "Chat",
|
|
338
478
|
"package": "@lism-css/ui",
|
|
339
479
|
"category": "display",
|
|
340
|
-
"description": "
|
|
480
|
+
"description": "チャット風の吹き出しコンポーネント。c--chat クラスが付与される。Gridベースの会話形式のUI表現に使用。",
|
|
481
|
+
"aliases": ["吹き出し", "会話UI", "message bubble", "balloon", "speech bubble"],
|
|
341
482
|
"props": [
|
|
342
483
|
{ "name": "name", "type": "string", "description": "発言者の名前。" },
|
|
343
|
-
{ "name": "avatar", "type": "string
|
|
484
|
+
{ "name": "avatar", "type": "string", "description": "アバター画像のsrc。" },
|
|
485
|
+
{ "name": "variant", "type": "'speak' | 'think'", "default": "speak", "description": "チャットタイプ。" },
|
|
486
|
+
{ "name": "direction", "type": "'start' | 'end'", "default": "start", "description": "チャットの表示位置。" },
|
|
487
|
+
{ "name": "keycolor", "type": "string", "default": "gray", "description": "チャットボックスのキーカラー。" },
|
|
488
|
+
{ "name": "flow", "type": "string", "default": "s", "description": "コンテンツを囲む要素(c--chat_content)に渡されるフロー余白。" }
|
|
344
489
|
],
|
|
345
490
|
"usage": "<Chat name='Alice' avatar='/alice.jpg'>Hello!</Chat>"
|
|
346
491
|
},
|
|
@@ -348,19 +493,31 @@
|
|
|
348
493
|
"name": "NavMenu",
|
|
349
494
|
"package": "@lism-css/ui",
|
|
350
495
|
"category": "navigation",
|
|
351
|
-
"description": "
|
|
352
|
-
"
|
|
353
|
-
"
|
|
496
|
+
"description": "ナビゲーションメニューコンポーネント。c--navMenu クラスが付与される。サブコンポーネント構造: NavMenu.Root > NavMenu.Item > NavMenu.Link。NavMenu.Nestでネストも可能。",
|
|
497
|
+
"aliases": ["ナビゲーション", "メニュー", "navigation links", "リンクリスト"],
|
|
498
|
+
"props": [
|
|
499
|
+
{ "name": "hovBgc", "type": "string", "description": "ホバー時の背景カラー (Root)。--hov-bgc変数として出力。" },
|
|
500
|
+
{ "name": "hovC", "type": "string", "description": "ホバー時のテキストカラー (Root)。--hov-c変数として出力。" },
|
|
501
|
+
{ "name": "itemP", "type": "string", "description": "各アイテムのパディング (Root)。--_item-p変数として出力。" },
|
|
502
|
+
{ "name": "href", "type": "string", "description": "リンク先URL (Link)。指定ありでa要素、なしでspan要素。" }
|
|
503
|
+
],
|
|
504
|
+
"usage": "<NavMenu.Root>\n <NavMenu.Item>\n <NavMenu.Link href='/'>Home</NavMenu.Link>\n </NavMenu.Item>\n <NavMenu.Item>\n <NavMenu.Link href='/about'>About</NavMenu.Link>\n </NavMenu.Item>\n</NavMenu.Root>"
|
|
354
505
|
},
|
|
355
506
|
{
|
|
356
507
|
"name": "ShapeDivider",
|
|
357
508
|
"package": "@lism-css/ui",
|
|
358
509
|
"category": "decoration",
|
|
359
|
-
"description": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。",
|
|
510
|
+
"description": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。viewBoxとSVGのpath要素を子要素として渡して使用。",
|
|
511
|
+
"aliases": ["波型", "section separator", "セクション区切り", "wave divider", "装飾区切り"],
|
|
360
512
|
"props": [
|
|
361
|
-
{ "name": "
|
|
362
|
-
{ "name": "
|
|
513
|
+
{ "name": "viewBox", "type": "string", "description": "出力するSVGのviewBox。" },
|
|
514
|
+
{ "name": "level", "type": "number", "default": "5", "description": "シェイプの高さレベル。0で非表示。" },
|
|
515
|
+
{ "name": "flip", "type": "'X' | 'Y' | 'XY'", "description": "X/Y/XYで反転方向を指定。data-flip属性として出力。" },
|
|
516
|
+
{ "name": "stretch", "type": "string", "description": "水平方向の引き伸ばし量。--_inner-stretch変数として出力。" },
|
|
517
|
+
{ "name": "offset", "type": "string", "description": "水平方向のオフセット。--_inner-offset変数として出力。" },
|
|
518
|
+
{ "name": "isEmpty", "type": "boolean", "description": "シェイプを非表示にしてスペーサーとして使用。" },
|
|
519
|
+
{ "name": "isAnimation", "type": "boolean", "description": "アニメーションを有効にする。data-has-animation属性として出力。" }
|
|
363
520
|
],
|
|
364
|
-
"usage": "<ShapeDivider
|
|
521
|
+
"usage": "<ShapeDivider viewBox='0 0 100 10'>\n <path d='M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z'/>\n</ShapeDivider>"
|
|
365
522
|
}
|
|
366
523
|
]
|