@lism-css/mcp 0.20.0 → 0.23.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.
Files changed (30) hide show
  1. package/dist/data/docs-index.json +822 -141
  2. package/dist/data/guides/SKILL.md +7 -2
  3. package/dist/data/guides/antipatterns.md +2 -2
  4. package/dist/data/guides/base-styles.md +12 -16
  5. package/dist/data/guides/components-core.md +7 -7
  6. package/dist/data/guides/components-ui.md +8 -4
  7. package/dist/data/guides/css-rules.md +3 -3
  8. package/dist/data/guides/customize.md +116 -34
  9. package/dist/data/guides/naming.md +3 -3
  10. package/dist/data/guides/primitive-class.md +2 -2
  11. package/dist/data/guides/primitives/a--icon.md +2 -2
  12. package/dist/data/guides/primitives/l--autoColumns.md +8 -8
  13. package/dist/data/guides/property-class/hov.md +7 -7
  14. package/dist/data/guides/property-class/max-sz.md +2 -2
  15. package/dist/data/guides/property-class.md +23 -18
  16. package/dist/data/guides/responsive.md +24 -5
  17. package/dist/data/guides/set-class.md +64 -27
  18. package/dist/data/guides/tokens.md +31 -30
  19. package/dist/data/guides/trait-class/has--gutter.md +20 -4
  20. package/dist/data/guides/trait-class/has--transition.md +1 -1
  21. package/dist/data/guides/trait-class/is--boxLink.md +6 -6
  22. package/dist/data/guides/trait-class/is--container.md +1 -1
  23. package/dist/data/guides/trait-class/is--wrapper.md +11 -5
  24. package/dist/data/guides/trait-class.md +2 -2
  25. package/dist/data/guides/utility-class.md +1 -1
  26. package/dist/data/meta.js +2 -2
  27. package/dist/lib/markdown-utils.d.ts +1 -1
  28. package/dist/tools/convert-css.js +1 -1
  29. package/dist/tools/get-guide.js +1 -1
  30. package/package.json +1 -1
package/dist/data/guides/SKILL.md CHANGED
@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
9
9
 
10
10
  調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
11
11
 
12
- > **バージョン情報:** このガイドは `lism-css@0.20.0` / `@lism-css/ui@0.20.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
12
+ > **バージョン情報:** このガイドは `lism-css@0.23.0` / `@lism-css/ui@0.23.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
13
13
 
14
14
  公式ドキュメント: https://lism-css.com/docs/overview.md
15
15
 
@@ -19,12 +19,13 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
19
19
  ### CDNでCSSファイルのみ読み込む場合
20
20
 
21
21
  ```html
22
- <link href="https://cdn.jsdelivr.net/npm/lism-css@0.16.0/dist/css/main.css" rel="stylesheet" />
22
+ <link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
23
23
  ```
24
24
 
25
25
  ### npm パッケージ
26
26
 
27
27
  - `lism-css` — コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
28
+ - `@lism-css/plugin` — Vite / Astro / Next.js 統合、動的CSSビルド、CSS purge、`lism-css build` CLIを提供。
28
29
  - `@lism-css/ui` — `lism-css` を使って構築された UI コンポーネントライブラリ。Accordion, Modal, Tabs, Button, Badge, Callout 等を React/Astro で提供。
29
30
 
30
31
  ### CSS 読み込み
@@ -49,6 +50,10 @@ import { Tabs } from '@lism-css/ui/astro/Tabs';
49
50
  import { Button } from '@lism-css/ui/astro/Button';
50
51
  ```
51
52
 
53
+ ### CSS Purge（未使用CSSの削除）
54
+
55
+ 本番ビルド時に未使用の Lism CSS クラスを取り除いて出力 CSS を軽量化できます。`@lism-css/plugin/vite` / `@lism-css/plugin/astro` の統合プラグインを使っている場合は、各エントリの `lismCss({ purge: true })` で有効化するのが簡単です。統合プラグインを使わない場合は単体プラグイン `@lism-css/plugin/purge/vite`（Vite）/ `@lism-css/plugin/purge/astro`（Astro）も利用できます。詳細は https://lism-css.com/docs/customize/purge/ を参照。
56
+
52
57
 
53
58
  ## 実装ルール
54
59
 
package/dist/data/guides/antipatterns.md CHANGED
@@ -327,9 +327,9 @@ BP 専用クラス（`-{prop}_{bp}`）やコンポーネントの BP キー（`{
327
327
 
328
328
  ### ブレイクポイントの誤用
329
329
 
330
- Lism CSS の標準出力で有効な BP は `sm: 480px` / `md: 800px` まで。`lg` 以降を使う場合は SCSS 設定で出力範囲を拡張する必要がある。`xs` は BP キーとして存在しない。
330
+ Lism CSS の標準出力で有効な BP は `sm: 480px` / `md: 800px` / `lg: 1120px`。`xs` は BP キーとして存在しない。
331
331
 
332
332
  | NG | OK | 理由 |
333
333
  |---|---|---|
334
334
  | `<Box p={{ xs: 10, sm: 20 }}>` | `<Box p={{ base: 10, sm: 20 }}>` | デフォルトは `base`（`xs` キーは無い） |
335
- | `cols={[1, 2, 3, 4]}` | `cols={[1, 2, 3]}` | 標準出力では `[base, sm, md]` までが有効。`lg` 以降は SCSS 設定が必要 |
335
+ | `cols={[1, 2, 3, 4, 5]}` | `cols={[1, 2, 3, 4]}` | 標準出力では `[base, sm, md, lg]` までが有効。`xl` 以降は SCSS 設定が必要 |
package/dist/data/guides/base-styles.md CHANGED
@@ -21,9 +21,10 @@ Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベ
21
21
 
22
22
  - `box-sizing: border-box` の全要素適用
23
23
  - `margin: 0` の全要素適用（`<dialog>` を除く）
24
- - `overflow: clip` を `<html>` に適用（横スクロール防止）
25
- - `body` に `min-height: 100dvh`
26
- - メディア要素（`img`, `video`, `iframe`）に `max-inline-size: 100%`, `block-size: auto`
24
+ - `overflow-x: clip` を `<html>` に適用（横スクロール防止）。`:modal[open]` がある間は `overflow: clip`
25
+ - `body` に `min-height: 100dvh`、`overflow: inherit`
26
+ - メディア要素（`svg`, `img`, `video`, `audio`, `iframe`, `object`, `canvas`）に `max-inline-size: 100%`。`img` / `video` には `block-size: auto`
27
+ - クラスを持つリスト（`menu`, `:is(ul, ol)[class]`）は `list-style: none` + `padding: 0`
27
28
  - フォーム要素のフォント・カラー継承
28
29
 
29
30
 
@@ -49,7 +50,8 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
49
50
  | `--lts--base` | ベース字間 |
50
51
  | `--text` | テキスト色 |
51
52
  | `--base` | 背景色 |
52
- | `--under-offset` | `text-underline-offset`（デフォルト: `0.125em`） |
53
+
54
+ 加えて `text-underline-offset: 0.125em`（リンク下線位置）と `tab-size: 4`（タブ文字の表示幅）が直接指定されている。
53
55
 
54
56
  ### 見出し（h1〜h6）
55
57
 
@@ -75,20 +77,13 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
75
77
  |------|------------|------|
76
78
  | `--list-ps` | `1.75em` | リストの `padding-inline-start` |
77
79
 
78
- ### テーブル（table, td, th）
80
+ ### テーブル（td, th）
79
81
 
80
82
  | 変数 | フォールバック | 用途 |
81
83
  |------|------------|------|
82
- | `--td-c` | `inherit` | セルのテキスト色 |
83
- | `--td-bgc` | `transparent` | セルの背景色 |
84
- | `--td-p` | `var(--s10) var(--s15)` | セルのパディング |
85
- | `--td-min-sz` | `initial` | セルの最小幅 |
86
- | `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
87
- | `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |
88
- | `--th-p` | `var(--td-p)` | 見出しセルのパディング |
89
- | `--th-min-sz` | `var(--td-min-sz)` | 見出しセルの最小幅 |
84
+ | `--cells-p` | `0.625em 0.875em` | セルのパディング |
90
85
 
91
- `th` は `td` の変数をフォールバックとして参照するため、`--td-*` だけで両方に反映される。
86
+ `td` と `th` の両方に `--cells-p` が適用される。色や最小幅などのカスタマイズは必要な要素にスタイルを直接当てる。
92
87
 
93
88
  ### フォーム要素
94
89
 
@@ -96,8 +91,9 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
96
91
  |------|------------|------|
97
92
  | `--controls-bgc` | `var(--base-2)` | 背景色 |
98
93
  | `--controls-bdc` | `var(--divider)` | ボーダー色 |
99
- | `--controls-p` | `var(--s5) var(--s10)` | パディング |
100
- | `--controls-bdrs` | `var(--bdrs--10)` | 角丸 |
94
+ | `--controls-p` | `0.25em 0.5em` | パディング |
95
+
96
+ 角丸はブラウザのデフォルトに委ねている。テーマで丸めたい場合は各セレクタに `border-radius` を直接指定する。
101
97
 
102
98
  ### その他
103
99
 
package/dist/data/guides/components-core.md CHANGED
@@ -53,7 +53,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
53
53
  | `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
54
54
  | `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
55
55
  | `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
56
- | `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="var:hov var:bxsh"`, `set="-plain"` |
56
+ | `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="hov bxsh"`, `set="-plain"` |
57
57
  | `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
58
58
  | `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
59
59
 
@@ -79,12 +79,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
79
79
  // → p, fz は Lism が処理、size は HogeIcon に直接渡される
80
80
 
81
81
  // set でセットクラスを付与（layout と同じ要領）
82
- <Box set="var:bxsh" p="30">...</Box>
83
- // → <div class="l--box set--var:bxsh -p:30">...</div>
82
+ <Box set="bxsh" p="30">...</Box>
83
+ // → <div class="l--box set--bxsh -p:30">...</div>
84
84
 
85
85
  // set を複数指定（スペース区切り）
86
- <Stack set="var:bxsh var:hov" p="30">...</Stack>
87
- // → <div class="l--stack set--var:bxsh set--var:hov -p:30">...</div>
86
+ <Stack set="bxsh hov" p="30">...</Stack>
87
+ // → <div class="l--stack set--bxsh set--hov -p:30">...</div>
88
88
 
89
89
  // `-` prefix で除外（コンポーネント内部で適用済みの set を打ち消す用途）
90
90
  <AccordionButton set="-plain">...</AccordionButton>
@@ -180,7 +180,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
180
180
  | Prop | 出力クラス |
181
181
  |------|-----------|
182
182
  | `isWrapper` | `is--wrapper` |
183
- | `isWrapper="{s\|l}"` | `is--wrapper` + `-contentSize:{s\|l}` |
183
+ | `isWrapper="{s\|m\|l\|xl}"` | `is--wrapper` + `-contentSize:{s\|m\|l\|xl}` |
184
184
  | `isWrapper="{value}"` | `is--wrapper` + `-contentSize` + `--contentSize:{value}` |
185
185
  | `isLayer` | `is--layer` |
186
186
  | `isBoxLink` | `is--boxLink` |
@@ -211,7 +211,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
211
211
  |-------------|-------------|---------|
212
212
  | `<Text>` | `<p>` | `p`, `div`, `blockquote`, `address`, `figcaption`, `pre` |
213
213
  | `<Heading>` | `<h2>` | `h1`〜`h6`（`level` prop で指定） |
214
- | `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd` |
214
+ | `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd`, `label` |
215
215
  | `<Group>` | `<div>` | `div`, `section`, `article`, `figure`, `nav`, `aside`, `header`, `footer`, `main`, `fieldset`, `hgroup` |
216
216
  | `<List>` | `<ul>` | `ul`, `ol`, `dl` |
217
217
  | `<Link>` | `<a>`（固定） | — |
package/dist/data/guides/components-ui.md CHANGED
@@ -50,6 +50,7 @@ import { Button } from '@lism-css/ui/astro/Button';
50
50
  | Prop | 対象 | 型 | デフォルト | 説明 |
51
51
  |------|------|-----|----------|------|
52
52
  | `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
53
+ | `isOpen` | Item / Button / Panel | `boolean` | `false` | アイテムを初期展開。Item・Button・Panel の3つ揃えて指定（Item=`data-opened` 付与、Button=`aria-expanded`、Panel=`hidden` 解除） |
53
54
  | `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
54
55
  | `flow` | Panel | `string` | — | パネル内コンテンツ領域（`c--accordion_content`）のフロー余白 |
55
56
 
@@ -70,10 +71,11 @@ import { Button } from '@lism-css/ui/astro/Button';
70
71
  ソース: [Alert/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Alert)
71
72
 
72
73
  短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。
74
+ プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
73
75
 
74
76
  | Prop | 型 | デフォルト | 説明 |
75
77
  |------|-----|----------|------|
76
- | `type` | `'alert' \| 'point' \| 'warning' \| 'check' \| 'help' \| 'info'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
78
+ | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
77
79
  | `keycolor` | `string` | — | キーカラー |
78
80
  | `icon` | `ReactNode \| string` | — | カスタムアイコン |
79
81
  | `layout` | `'flex' \| 'withSide'` | `'flex'` | レイアウトプリミティブ |
@@ -139,17 +141,18 @@ import { Button } from '@lism-css/ui/astro/Button';
139
141
  ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
140
142
 
141
143
  記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される。
144
+ プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
142
145
 
143
146
  | Prop | 型 | デフォルト | 説明 |
144
147
  |------|-----|----------|------|
145
- | `type` | `'note' \| 'alert' \| 'point' \| 'warning' \| 'check' \| 'help'` | `'note'` | コールアウトタイプ |
148
+ | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'note'` | コールアウトタイプ |
146
149
  | `keycolor` | `string` | — | キーカラー |
147
150
  | `icon` | `ReactNode \| string` | — | カスタムアイコン |
148
151
  | `title` | `string` | — | タイトルテキスト |
149
152
  | `flow` | `string` | `'s'` | コンテンツ部分のフロー余白 |
150
153
 
151
154
  ```jsx
152
- <Callout type='note' title='Important' keycolor='blue'>Important note</Callout>
155
+ <Callout type='note' title='Note'>Supplemental note</Callout>
153
156
  ```
154
157
 
155
158
 
@@ -237,7 +240,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
237
240
  | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
238
241
  | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
239
242
  | `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
240
- | `href` | Link | `string` | — | リンク先URL。指定ありで `a` 要素、なしで `span` 要素 |
243
+ | `href` | Link | `string` | — | リンク先URL（Link は常に `a` 要素として出力） |
244
+ | `hov` | Link | `string` | `-bgc` | ホバー時のスタイル。デフォルトで背景色が変化 |
241
245
 
242
246
  ```jsx
243
247
  <NavMenu.Root>
package/dist/data/guides/css-rules.md CHANGED
@@ -43,13 +43,13 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
43
43
 
44
44
  | 分類 | 役割 | プレフィックス | 例 |
45
45
  |---|---|---|---|
46
- | Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
46
+ | Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
47
47
  | Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
48
48
  | Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
49
49
  | Component Class | BEM 構造を持つ UI 部品 | `c--` | `c--button`, `c--accordion` |
50
50
  | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
51
51
  | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
52
- | Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--cells` |
52
+ | Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
53
53
  | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
54
54
 
55
55
  **併用ルール:**
@@ -83,7 +83,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
83
83
  | 2 | Component（`c--`） | `c--box`, `c--box--primary` |
84
84
  | 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
85
85
  | 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
86
- | 5 | Set Class（`set--`） | `set--var:hov`, `set--var:bxsh` |
86
+ | 5 | Set Class（`set--`） | `set--hov`, `set--bxsh` |
87
87
  | 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
88
88
  | 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
89
89
  | 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
package/dist/data/guides/customize.md CHANGED
@@ -9,7 +9,13 @@
9
9
  - [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
10
10
  - [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
11
11
 
12
- [詳細](https://lism-css.com/docs/customize.md)
12
+ 詳細（公式ドキュメント）:
13
+
14
+ - 概要: [https://lism-css.com/docs/customize/](https://lism-css.com/docs/customize/)
15
+ - CSSビルドの選択（`@layer` / `full.css` / `isFullMode`）: [https://lism-css.com/docs/customize/build/](https://lism-css.com/docs/customize/build/)
16
+ - `lism.config.js`（props / tokens / traits・breakpoints・追加スタイル）: [https://lism-css.com/docs/customize/config/](https://lism-css.com/docs/customize/config/)
17
+ - SCSS（`$setting` / `$props`・BP上書き）: [https://lism-css.com/docs/customize/scss/](https://lism-css.com/docs/customize/scss/)
18
+ - CSS Purge: [https://lism-css.com/docs/customize/purge/](https://lism-css.com/docs/customize/purge/)
13
19
 
14
20
  ---
15
21
 
@@ -39,8 +45,7 @@ import 'lism-css/main_no_layer.css';
39
45
 
40
46
  | 変数 | 用途 | デフォルト |
41
47
  |------|------|-----------|
42
- | `$breakpoints` | ブレイクポイント数値の定義 | `('sm': '480px', 'md': '800px', 'lg': '1120px')` |
43
- | `$common_support_bp` | 主要な Property Class が共通サポートするブレイクポイント上限 | `'md'` |
48
+ | `$breakpoints` | ブレイクポイント数値の定義（`0` は無効＝クエリを出力しない） | `('xs': 0, 'sm': '480px', 'md': '800px', 'lg': '1120px', 'xl': 0)` |
44
49
  | `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
45
50
  | `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
46
51
  | `$props` | Property Class ごとの個別出力設定 | `prop-config` のデフォルト |
@@ -53,7 +58,6 @@ import 'lism-css/main_no_layer.css';
53
58
  $breakpoints: (
54
59
  'sm': '400px', // 個別キーの上書き可
55
60
  ),
56
- $common_support_bp: 'lg',
57
61
  $is_container_query: 0,
58
62
  $default_important: 1,
59
63
  $props: (
@@ -69,7 +73,7 @@ import 'lism-css/main_no_layer.css';
69
73
 
70
74
  ### `$props` の個別カスタマイズ
71
75
 
72
- 各 Property Class について、出力範囲やユーティリティクラスを追加できます。
76
+ 各 Property Class について、出力するブレイクポイントを絞ったり、ユーティリティクラスを追加したりできます。
73
77
 
74
78
  ```scss
75
79
  @use '../path-to/node_modules/lism-css/scss/setting' with (
@@ -81,7 +85,7 @@ import 'lism-css/main_no_layer.css';
81
85
  bp: 0, // .-h_sm 等のブレイクポイント版を出力しない
82
86
  ),
83
87
  'p': (
84
- bp: 'lg', // .-p_sm / .-p_md / .-p_lg まで出力
88
+ bp: ('sm', 'md'), // BP対応クラスを .-p_sm / .-p_md だけに限定（bp は 0 / 1 / BPキーのリストのみ）
85
89
  utilities: (
86
90
  'box': '2em', // .-p:box { --p: 2em } を追加
87
91
  ),
@@ -100,30 +104,86 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
100
104
 
101
105
  プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
102
106
 
103
- > **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
107
+ ### Vite / Astro プラグインの登録（推奨セットアップ）
104
108
 
105
- ### Vite プラグインの登録（必須）
109
+ `lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `@lism-css/plugin` の統合プラグインを登録します。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
106
110
 
107
- `lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `lism-css/vite-plugin` を登録する必要があります。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
111
+ ```bash
112
+ pnpm add -D @lism-css/plugin
113
+ ```
114
+
115
+ ```js
116
+ // vite.config.js
117
+ import { defineConfig } from 'vite';
118
+ import { lismCss } from '@lism-css/plugin/vite';
119
+
120
+ export default defineConfig({
121
+ plugins: [lismCss()],
122
+ });
123
+ ```
108
124
 
109
125
  ```js
110
126
  // astro.config.mjs
111
127
  import { defineConfig } from 'astro/config';
112
- import lismCss from 'lism-css/vite-plugin';
128
+ import { lismCss } from '@lism-css/plugin/astro';
113
129
 
114
130
  export default defineConfig({
115
- vite: {
116
- plugins: [lismCss()],
117
- },
131
+ integrations: [lismCss()],
118
132
  });
119
133
  ```
120
134
 
121
- プラグインはプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
135
+ この統合プラグイン1つで、以下がまとめて有効になります。
136
+
137
+ - **config alias**: コンポーネント（JS ランタイム）が `lism.config.js` を読み込めるようになる
138
+ - **動的CSSビルド**: `import 'lism-css/main.css'` 等を捕捉し、`lism.config.js` を反映済みの CSS をその場で生成する（props / tokens を追加すると CSS に自動反映される）
139
+ - **型の自動生成**: 有効化したブレイクポイント・追加した props / traits を反映した `lism-env.d.ts` を起動時に自動生成する
140
+
141
+ `lism.config.js` はプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
122
142
 
123
143
  ```js
144
+ // Vite
124
145
  plugins: [lismCss({ configPath: './config/lism.config.js' })],
146
+ // Astro
147
+ integrations: [lismCss({ configPath: './config/lism.config.js' })],
148
+ ```
149
+
150
+ ### Next.js（16 以降）での導入
151
+
152
+ Next.js には Vite / Astro のような「import をその場で変換する仕組み」が無いため、`@lism-css/plugin/next` の `withLism()` で `next.config.mjs` をラップします。`lism.config.js` を反映した CSS を `.lism-css/css/` へ事前生成し、`lism-css/main.css` 等の import をその生成物へ alias します（型生成・dev 中の config 変更追従も含む）。
153
+
154
+ ```js
155
+ // next.config.mjs
156
+ import { withLism } from '@lism-css/plugin/next';
157
+
158
+ export default withLism({ /* nextConfig */ });
159
+ ```
160
+
161
+ - `app/layout.tsx` などで `import 'lism-css/main.css'` をグローバル読み込みする。
162
+ - `.lism-css/` は `.gitignore`、`lism-env.d.ts` は `tsconfig.json` の `include` に追加してコミットする。
163
+ - CSS purge は現状 Vite / Astro のみ対応（Next.js は未対応）。
164
+
165
+ ### ブレイクポイントの有効化（xs / xl）
166
+
167
+ デフォルトのブレイクポイントは **`xs: 0`（無効） / `sm: 480px` / `md: 800px` / `lg: 1120px` / `xl: 0`（無効）** です。値 `0` は「無効＝CSSクエリを出力しない」を表します。
168
+
169
+ `xs` / `xl` を有効にするには、`lism.config.js` の `breakpoints` にサイズを差分指定するだけで済みます。
170
+
171
+ ```js
172
+ // lism.config.js
173
+ export default {
174
+ breakpoints: {
175
+ xs: '360px', // xs を有効化
176
+ xl: '1400px', // xl を有効化
177
+ },
178
+ };
125
179
  ```
126
180
 
181
+ これだけで、ブレイクポイント対応の全 Property Class が `xs` / `xl` のレスポンシブクラス（`-p_xs` / `-p_xl` 等）も出力するようになります。prop ごとの個別指定は不要です。
182
+
183
+ 統合プラグイン（型自動生成が有効）を使っている場合、有効化したブレイクポイントを反映した `lism-env.d.ts` がプロジェクト直下に**自動生成**されます。型補完も有効化したブレイクポイントのキーを自動で提示するため、`BreakpointRegistry` をプロジェクト側の `.d.ts` で手書き拡張する必要はありません。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
184
+
185
+ > SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も引き続き利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
186
+
127
187
  ### フォーマット
128
188
 
129
189
  ```js
@@ -133,7 +193,7 @@ export default {
133
193
  // Property Class の出力をカスタマイズ
134
194
  },
135
195
  tokens: {
136
- // トークン値を追加
196
+ // トークンを { key: value } の値マップで定義（CSS変数の値出力・ユーティリティ生成・props受理を一括）
137
197
  },
138
198
  traits: {
139
199
  // Trait（is--* / has--*）用の props を追加
@@ -152,7 +212,7 @@ export default {
152
212
  ```js
153
213
  // lism.config.js
154
214
  import DEFAULT_CONFIG from 'lism-css/default-config';
155
- const { props, tokens } = DEFAULT_CONFIG;
215
+ const { props } = DEFAULT_CONFIG;
156
216
 
157
217
  export default {
158
218
  props: {
@@ -164,8 +224,12 @@ export default {
164
224
  filter: { utils: { blur: 'blur(3px)' } },
165
225
  },
166
226
  tokens: {
167
- // tokenClass:1 のpropは、tokens を追加するだけで自動でユーティリティ化される
168
- lts: [...(tokens.lts || []), '2xl'],
227
+ // トークンは { key: value } の値マップで定義（既定に deep-merge される）
228
+ // → :root { --lts--2xl: .5em } を出力し、tokenClass:1 の lts は -lts:2xl も自動生成される
229
+ lts: { '2xl': '.5em' },
230
+ // space は --s{key}、color は --{key} の変数名で出力される
231
+ space: { '90': '6rem' }, // → --s90: 6rem
232
+ color: { success: 'oklch(0.6 0.15 150)' }, // → --success: ...
169
233
  },
170
234
  traits: {
171
235
  isHoge: 'is--hoge',
@@ -188,23 +252,37 @@ export default {
188
252
  // → <div class="l--box is--hoge -p:box -ta:justify -filter:blur -lts:2xl">Box</div>
189
253
  ```
190
254
 
255
+ ### 追加した prop / trait の型解禁
256
+
257
+ 統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です（`lism-env.d.ts` は git にコミットしてください）。
258
+
259
+ なお、既存 prop への値追加（`ta="justify"` 等）はもともと任意の文字列を受け付けるため、型エラーにはなりません（ただし補完候補には出ません）。
260
+
191
261
 
192
262
  ## 追加スタイルを読み込ませる方法
193
263
 
194
- `lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
264
+ `lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルが必要になります。構成によって反映方法が異なります。
195
265
 
196
- ### 1. 軽微な追加であれば手書きで済ませる（推奨ライト）
266
+ ### Vite / Astro（統合プラグイン使用時）は自動反映（手動ビルド不要）
197
267
 
198
- カスタムトークンが少数で済むなら、CLI 再ビルドや SCSS 構成変更まで踏み込まず、Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きで十分。
268
+ `@lism-css/plugin` の統合プラグインを登録している場合、`lism.config.js` に props / tokens を追加すると、**dev サーバ / ビルドの CSS に自動反映されます**。追加クラス分の CSS を手動で追記したり `npx lism-css build` を回したりする必要はありません。dev 中に `lism.config.js` を変更すると HMR で CSS が再生成され、型 `.d.ts` も追従します。
199
269
 
200
- ```css
201
- /* global.css */
202
- @layer lism-base {
203
- :root {
204
- --lts--2xl: 0.15em;
205
- }
206
- }
270
+ 参照先の **CSS 変数の値そのもの**（`:root { --lts--2xl: .5em }` のような定義）も、`tokens` に値を書けば自動生成されます。値の定義・ユーティリティ生成・props 受理がまとめて反映されるため、`global.css` への手書きは不要です（既定値の上書きも可能）。
207
271
 
272
+ ```js
273
+ // lism.config.js — 値そのものも config に集約できる
274
+ export default {
275
+ tokens: {
276
+ lts: { '2xl': '.5em' }, // :root { --lts--2xl: .5em } + .-lts:2xl を自動生成
277
+ },
278
+ };
279
+ ```
280
+
281
+ > `is--*` クラスのスタイルは `traits` ではクラス名のみを追加するため、対応するスタイルは別途必要です（後述の手動追記 / SCSS を参照）。
282
+
283
+ 軽微な追加であれば、props を増やさず Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きだけで済ませることもできます。
284
+
285
+ ```css
208
286
  /* Property Class は @layer を付けない */
209
287
  .-lts\:2xl {
210
288
  letter-spacing: var(--lts--2xl);
@@ -215,12 +293,15 @@ export default {
215
293
  <Text lts=":2xl">...</Text>
216
294
  ```
217
295
 
218
- トークンを体系的に拡張したい場合のみ、後述の CLI / SCSS 経由に切り替える。
296
+ ### CLI コマンドで CSS を再ビルド（Vite / Astro を使わない構成）
297
+
298
+ 純 SCSS 構成や他バンドラなど、Vite / Astro の統合プラグインを使わない構成では、`@lism-css/plugin` が提供する `npx lism-css build` が `lism.config.js` を CSS に反映するための正規の手段です。
219
299
 
220
- ### 2. CLI コマンドで CSS を再ビルド
300
+ webpack 主導のバンドラ（`@wordpress/scripts` 等）では `@lism-css/plugin/webpack` の `withLismWebpack()` で webpack config をラップできます。自前の SCSS ビルドで config 適用済みの `setting` を `@use` したい構成では、`@lism-css/plugin/builder` の `generateLismScss()` が bridge SCSS（`@use 'lism-setting'`）を生成します。
221
301
 
222
302
  ```bash
223
- npx lism-css build
303
+ npx lism-css build # lism.config.js 反映の CSS を再生成
304
+ npx lism-css build --full # full.css / full_no_layer.css も生成
224
305
  ```
225
306
 
226
307
  `lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
@@ -233,10 +314,11 @@ npx lism-css build
233
314
  ```
234
315
 
235
316
  > **注意**:
236
- > - 生成されるのはあくまで `var(--lts--2xl)` を参照する **ユーティリティクラスまで**。参照先の CSS 変数（`:root { --lts--2xl: ... }` のような **値そのもの** の定義）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
317
+ > - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（実値は手書きSCSS側）。
318
+ > - `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
237
319
  > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
238
320
 
239
- ### 3. 手動で CSS を追記
321
+ ### 手動で CSS を追記
240
322
 
241
323
  CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
242
324
 
@@ -252,7 +334,7 @@ CLI を使わず、追加クラス分の CSS をプロジェクト側で書い
252
334
  }
253
335
  ```
254
336
 
255
- ### 4. SCSS で `lism.config.js` と整合させる
337
+ ### SCSS で `lism.config.js` と整合させる
256
338
 
257
339
  SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
258
340
 
package/dist/data/guides/naming.md CHANGED
@@ -39,7 +39,7 @@
39
39
 
40
40
  | 形式 | 説明 | 例 |
41
41
  |------|------|-----|
42
- | `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--max-sz` |
42
+ | `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--m` |
43
43
  | `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
44
44
 
45
45
  ### その他の変数
@@ -70,10 +70,10 @@
70
70
 
71
71
  | プレフィックス | 責務 | 代表例 |
72
72
  |---|---|---|
73
- | `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
73
+ | `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
74
74
  | `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
75
75
  | `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
76
- | `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--cells` |
76
+ | `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--enclose` |
77
77
 
78
78
  - `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
79
79
  - `is--` / `has--` は `lism-trait` 層に属する。
package/dist/data/guides/primitive-class.md CHANGED
@@ -81,10 +81,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
81
81
  ##### 2. カラム幅が指定値を下回ったら自動で折り返したい
82
82
 
83
83
  - **推奨**: `l--autoColumns` (`<AutoColumns cols="20rem" />`)
84
- - **理由**: BP に依存せず、カラム最小幅基準で `auto-fit` / `auto-fill` の挙動を簡潔に書ける
84
+ - **理由**: BP に依存せず、カラム最小幅基準で `auto-fill` / `auto-fit` の挙動を簡潔に書ける
85
85
  - **典型例**: カード一覧、商品リスト、ロゴ並び等
86
86
  - **代替**:
87
- - `l--grid`: `gtc="repeat(auto-fit, minmax(20rem, 1fr))"` を直書きできるが冗長
87
+ - `l--grid`: `gtc="repeat(auto-fill, minmax(20rem, 1fr))"` を直書きできるが冗長
88
88
 
89
89
  ##### 3. 「横並び」と「縦 1 列」を一括で切り替えたい（多段階の列数変化が不要）
90
90
 
package/dist/data/guides/primitives/a--icon.md CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
  ## Usage
33
33
 
34
- `<Icon>` には**4つの使い方**があります。
34
+ `<Icon>` には**5つの使い方**があります。
35
35
 
36
36
  ### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
37
37
 
@@ -92,7 +92,7 @@ import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
92
92
 
93
93
  ### 5. `src` で画像をアイコンとして使う
94
94
 
95
- `src` を指定すると `<img>` として出力されます（厳密には4パターンに加えて画像指定も可能）。
95
+ `src` を指定すると `<img>` として出力されます。
96
96
 
97
97
  ```jsx
98
98
  <Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />
package/dist/data/guides/primitives/l--autoColumns.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # l--autoColumns / `<AutoColumns>`
2
2
 
3
- カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
3
+ カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fill` / `auto-fit` を使った流動カラムを簡潔に記述できます。
4
4
 
5
5
  ## 基本情報
6
6
 
@@ -14,7 +14,7 @@
14
14
  | Prop | CSS変数 | デフォルト | 説明 |
15
15
  |------|--------|-----------|------|
16
16
  | `cols` | `--cols` | `20rem` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
17
- | `autoFill` | `--autoMode` | `auto-fit` | `auto-fill` モードに切り替え |
17
+ | `autoFit` | `--autoMode` | `auto-fill` | `auto-fit` モードに切り替え |
18
18
 
19
19
  ## Usage
20
20
 
@@ -38,27 +38,27 @@
38
38
  </div>
39
39
  ```
40
40
 
41
- ### `auto-fill`を使用する
41
+ ### `auto-fit`を使用する
42
42
 
43
- `l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
43
+ `l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fill`）。`--autoMode:auto-fit`（`autoFit`）を指定することで、要素数が少ない時の挙動が変わります。
44
44
 
45
45
  ```jsx
46
- <AutoColumns cols="12em" autoFill g="20" fz="s">
46
+ <AutoColumns cols="12em" g="20" fz="s">
47
47
  <Lism as="div" p="20" bd>auto-fill</Lism>
48
48
  <Lism as="div" p="20" bd>auto-fill</Lism>
49
49
  </AutoColumns>
50
- <AutoColumns cols="12em" g="20" fz="s">
50
+ <AutoColumns cols="12em" autoFit g="20" fz="s">
51
51
  <Lism as="div" p="20" bd>auto-fit</Lism>
52
52
  <Lism as="div" p="20" bd>auto-fit</Lism>
53
53
  </AutoColumns>
54
54
  ```
55
55
 
56
56
  ```html
57
- <div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
57
+ <div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
58
58
  <div class="-p:20 -bd">auto-fill</div>
59
59
  <div class="-p:20 -bd">auto-fill</div>
60
60
  </div>
61
- <div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
61
+ <div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fit">
62
62
  <div class="-p:20 -bd">auto-fit</div>
63
63
  <div class="-p:20 -bd">auto-fit</div>
64
64
  </div>