@lism-css/mcp 0.11.0 → 0.12.0

package/dist/data/guides/components-ui.md

@@ -0,0 +1,351 @@
+# UI コンポーネント（`@lism-css/ui`）
+
+`@lism-css/ui` パッケージには、Lism CSS の上に構築されたインタラクティブな UI コンポーネントが含まれます。
+
+```jsx
+// React
+import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/react';
+
+// Astro
+import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
+```
+
+## TOC
+
+- [Accordion](#accordion)
+- [Alert](#alert)
+- [Avatar](#avatar)
+- [Badge](#badge)
+- [Button](#button)
+- [Callout](#callout)
+- [Chat](#chat)
+- [Details](#details)
+- [Modal](#modal)
+- [NavMenu](#navmenu)
+- [Tabs](#tabs)
+- [ShapeDivider](#shapedivider)
+- [DummyText](#dummytext)
+- [DummyImage](#dummyimage)
+- [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
+
+[詳細](https://lism-css.com/docs/components/)
+
+---
+
+## Accordion
+
+ソース: [Accordion/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Accordion)
+
+アコーディオン UI。クリックでコンテンツの開閉を切り替える。JSで開閉アニメーションを制御。パネルに `hidden='until-found'` を使用しブラウザのページ内検索に対応。
+
+**構造:** `Accordion.Root > Accordion.Item > (Accordion.Heading > Accordion.Button) + Accordion.Panel`（`Accordion.Icon` は自動で含まれる）
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+|------|------|-----|----------|------|
+| `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
+| `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
+| `flow` | Panel | `string` | — | パネル内コンテンツ領域（`c--accordion_content`）のフロー余白 |
+
+```jsx
+<Accordion.Root>
+  <Accordion.Item>
+    <Accordion.Heading>
+      <Accordion.Button>Label</Accordion.Button>
+    </Accordion.Heading>
+    <Accordion.Panel>Content</Accordion.Panel>
+  </Accordion.Item>
+</Accordion.Root>
+```
+
+
+## Alert
+
+ソース: [Alert/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Alert)
+
+短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `type` | `'alert' \| 'point' \| 'warning' \| 'check' \| 'help' \| 'info'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
+| `keycolor` | `string` | — | キーカラー |
+| `icon` | `ReactNode \| string` | — | カスタムアイコン |
+| `layout` | `'flex' \| 'sideMain'` | `'flex'` | レイアウトモジュール |
+| `flow` | `string` | `'s'` | コンテンツを囲む要素のフロー余白 |
+
+```jsx
+<Alert type='warning'>Warning message</Alert>
+```
+
+
+## Avatar
+
+ソース: [Avatar/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Avatar)
+
+アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`c--avatar` クラスが付与される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `src` | `string` | — | 画像URL |
+| `alt` | `string` | — | 代替テキスト |
+| `size` | `string` | `'1.5em'` | アバターのサイズ |
+
+```jsx
+<Avatar src='/avatar.jpg' alt='User' size='48px' />
+```
+
+
+## Badge
+
+ソース: [Badge/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Badge)
+
+バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`c--badge` クラスが付与される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `variant` | `string` | — | バリエーション（`'outline'` 等）。`c--badge--{variant}` クラスが出力 |
+| `keycolor` | `string` | — | キーカラー |
+
+```jsx
+<Badge keycolor='green'>New</Badge>
+```
+
+
+## Button
+
+ソース: [Button/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Button)
+
+ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`c--button` クラスが付与される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`c--button--{variant}` クラスが出力 |
+| `keycolor` | `string` | — | キーカラー |
+| `href` | `string` | — | リンク先URL |
+
+```jsx
+<Button variant='fill' href='#'>Click me</Button>
+```
+
+
+## Callout
+
+ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
+
+記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `type` | `'note' \| 'alert' \| 'point' \| 'warning' \| 'check' \| 'help'` | `'note'` | コールアウトタイプ |
+| `keycolor` | `string` | — | キーカラー |
+| `icon` | `ReactNode \| string` | — | カスタムアイコン |
+| `title` | `string` | — | タイトルテキスト |
+| `flow` | `string` | `'s'` | コンテンツ部分のフロー余白 |
+
+```jsx
+<Callout type='note' title='Important' keycolor='blue'>Important note</Callout>
+```
+
+
+## Chat
+
+ソース: [Chat/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Chat)
+
+チャット風の吹き出しコンポーネント。Grid ベースの会話形式 UI。`c--chat` クラスが付与される。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `name` | `string` | — | 発言者の名前 |
+| `avatar` | `string` | — | アバター画像の src |
+| `variant` | `'speak' \| 'think'` | `'speak'` | チャットタイプ |
+| `direction` | `'start' \| 'end'` | `'start'` | 表示位置 |
+| `keycolor` | `string` | `'gray'` | キーカラー |
+| `flow` | `string` | `'s'` | コンテンツ要素のフロー余白 |
+
+```jsx
+<Chat name='Alice' avatar='/alice.jpg'>Hello!</Chat>
+```
+
+
+## Details
+
+ソース: [Details/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Details)
+
+HTML の `details/summary` 要素をラップしたコンポーネント。Accordion とは違い JS を使わず CSS のみで実装。
+
+**構造:** `Details.Root > Details.Summary > (Details.Title + Details.Icon) + Details.Content`
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+|------|------|-----|----------|------|
+| `as` | Title | `string` | `'span'` | Title の HTML タグ |
+| `--duration` | Root | `string` | — | 展開アニメーションの秒数（style 経由で指定） |
+
+```jsx
+<Details.Root>
+  <Details.Summary>
+    <Details.Title>Title</Details.Title>
+    <Details.Icon />
+  </Details.Summary>
+  <Details.Content>Content</Details.Content>
+</Details.Root>
+```
+
+
+## Modal
+
+ソース: [Modal/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Modal)
+
+モーダルダイアログ UI。`dialog` 要素を使用。`data-modal-open` / `data-modal-close` 属性で開閉を制御。
+
+**構造:** `Modal.OpenBtn + Modal.Root > Modal.Inner > Modal.Body + Modal.CloseBtn`
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+|------|------|-----|----------|------|
+| `id` | Root | `string` | — | モーダルの ID（必須） |
+| `modalId` | OpenBtn / CloseBtn | `string` | — | 対象モーダルの ID |
+| `duration` | Root | `string` | — | アニメーション持続時間。`--duration` 変数として出力 |
+| `offset` | Inner | `string` | — | 非表示時の位置オフセット。`--offset` 変数として出力 |
+| `layout` | Inner | `string` | — | Inner 要素のレイアウトモジュール |
+
+```jsx
+<Modal.OpenBtn modalId='modal-01'>Open</Modal.OpenBtn>
+<Modal.Root id='modal-01'>
+  <Modal.Inner>
+    <Modal.Body>Content</Modal.Body>
+    <Modal.CloseBtn modalId='modal-01' />
+  </Modal.Inner>
+</Modal.Root>
+```
+
+
+## NavMenu
+
+ソース: [NavMenu/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/NavMenu)
+
+ナビゲーションメニューコンポーネント。`c--navMenu` クラスが付与される。
+
+**構造:** `NavMenu.Root > NavMenu.Item > NavMenu.Link`（`NavMenu.Nest` でネスト可能）
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+|------|------|-----|----------|------|
+| `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
+| `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
+| `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
+| `href` | Link | `string` | — | リンク先URL。指定ありで `a` 要素、なしで `span` 要素 |
+
+```jsx
+<NavMenu.Root>
+  <NavMenu.Item>
+    <NavMenu.Link href='/'>Home</NavMenu.Link>
+  </NavMenu.Item>
+  <NavMenu.Item>
+    <NavMenu.Link href='/about'>About</NavMenu.Link>
+  </NavMenu.Item>
+</NavMenu.Root>
+```
+
+
+## Tabs
+
+ソース: [Tabs/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Tabs)
+
+タブ切り替え UI。タブクリックでコンテンツパネルを切り替える。スタイリングはほぼなく動きのみ提供。
+
+**構造:** `Tabs.Root > Tabs.Item > (Tabs.Tab + Tabs.Panel)`（`Tabs.List` も利用可能）
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+|------|------|-----|----------|------|
+| `tabId` | Root | `string` | — | タブを特定するための ID 文字列 |
+| `defaultIndex` | Root | `number` | `1` | 初期アクティブタブ（1始まり） |
+| `listProps` | Root | `object` | — | タブボタンリスト要素へ渡す props |
+
+```jsx
+<Tabs.Root>
+  <Tabs.Item>
+    <Tabs.Tab>Tab 1</Tabs.Tab>
+    <Tabs.Panel>Content 1</Tabs.Panel>
+  </Tabs.Item>
+  <Tabs.Item>
+    <Tabs.Tab>Tab 2</Tabs.Tab>
+    <Tabs.Panel>Content 2</Tabs.Panel>
+  </Tabs.Item>
+</Tabs.Root>
+```
+
+
+## ShapeDivider
+
+ソース: [ShapeDivider/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/ShapeDivider)
+
+セクション間の波型などの装飾的な区切り要素。SVG ベースの形状で区切りを表現。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `viewBox` | `string` | — | SVG の viewBox |
+| `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
+| `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
+| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--_inner-stretch` 変数として出力 |
+| `offset` | `string` | — | 水平方向のオフセット。`--_inner-offset` 変数として出力 |
+| `isEmpty` | `boolean` | — | シェイプを非表示にしてスペーサーとして使用 |
+| `isAnimation` | `boolean` | — | アニメーションを有効化。`data-has-animation` 属性として出力 |
+
+```jsx
+<ShapeDivider viewBox='0 0 100 10'>
+  <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'/>
+</ShapeDivider>
+```
+
+
+## DummyText
+
+ソース: [DummyText/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/DummyText)
+
+ダミーテキストを生成するコンポーネント。プレビューやテスト用。複数の言語とテキスト長に対応。
+
+| Prop | 型 | デフォルト | 説明 |
+|------|-----|----------|------|
+| `lang` | `'ja' \| 'en' \| 'ar'` | `'en'` | テキストの言語 |
+| `length` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'codes'` | `'m'` | テキストの長さ。`'codes'` は `b`, `i`, `a`, `code` 要素を含むテキスト |
+| `pre` | `string` | — | テキストの前に表示する文字列 |
+| `offset` | `number` | `0` | テキストのオフセット。区切り文字単位で先頭を切り捨て |
+
+```jsx
+<DummyText lang='ja' />
+```
+
+
+## DummyImage
+
+ソース: [DummyImage/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/DummyImage)
+
+ダミーのプレースホルダー画像を出力するコンポーネント。`cdn.lism-css.com` からダミー画像を取得。
+
+```jsx
+<DummyImage />
+```
+
+
+## CLI でプロジェクトにコピーして使う
+
+`@lism-css/ui` の UI コンポーネントは、CLI コマンドで自分のプロジェクトにソースコードをコピーして使うこともできます。コピーしたファイルは自由にカスタマイズ可能です。
+
+```bash
+# 初期設定（framework、出力先ディレクトリを対話的に設定）
+npx lism-ui init
+
+# コンポーネントを追加
+npx lism-ui add Button Modal
+npx lism-ui add -a          # 全コンポーネントを追加
+
+# 利用可能なコンポーネント一覧を表示
+npx lism-ui list
+```
+
+`init` で生成される `lism-ui.json`:
+
+```json
+{
+  "framework": "react",
+  "componentsDir": "src/components/ui",
+  "helperDir": "src/components/ui/_helper"
+}
+```

package/dist/data/guides/css-rules.md

@@ -0,0 +1,146 @@
+# CSS 設計ルール
+
+## TOC
+
+- [CSS Layer 構造](#css-layer-構造)
+- [命名規則とプレフィックス](#命名規則とプレフィックス)
+- [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
+- [CSS の配置場所](#css-の配置場所)
+
+[詳細](https://lism-css.com/docs/css-methodology/)
+
+---
+
+## CSS Layer 構造
+
+Lism CSS は CSS Layers による詳細度管理を採用しています。
+カスタムCSSを追加する場合は、この順序を意識してください。
+
+```
+Settings（トークン定義）
+  → @layer lism-base（Reset CSS・トークン・.set--クラス）
+      → @layer reset（リセットCSS）
+  → @layer lism-modules
+      → @layer state（.is-- ステートモジュール）
+      → @layer layout（.l-- レイアウトモジュール）
+      → @layer atomic（.a-- アトミックモジュール）
+      → .c-- は sublayer なし（lism-modules 直下、または lism-custom で定義）
+  → @layer lism-custom（ユーザーカスタマイズ用）
+  → @layer lism-utility（.u-- ユーティリティクラス）
+  → Property Class（レイヤー外 — 最も詳細度が高い）
+```
+
+
+## 命名規則とプレフィックス
+
+[詳細](https://lism-css.com/docs/module-class/)
+
+クラス名のプレフィックスによって、役割とレイヤーの所属が決まります。
+
+| プレフィックス | レイヤー | 役割 | 例 |
+|--------------|---------|------|-----|
+| `.set--` | lism-base | ベーススタイル上書き・トークン再定義 | `.set--plain`, `.set--transition` |
+| `.is--` | lism-modules | 付け外し可能な状態モジュール | `.is--container`, `.is--wrapper` |
+| `.l--` | lism-modules | レイアウト構成モジュール | `.l--grid`, `.l--flex`, `.l--stack` |
+| `.a--` | lism-modules | レイアウト最小単位モジュール | `.a--icon`, `.a--divider` |
+| `.c--` | lism-modules | 具体的な役割のコンポーネント | `.c--button`, `.c--accordion` |
+| `.u--` | lism-utility | 用途が明確なユーティリティ | `.u--cbox`, `.u--trim` |
+| `.-` | レイヤー外 | 単一プロパティ制御（Property Class） | `.-fz:l`, `.-p:20`, `.-d:none` |
+
+**併用ルール:**
+- `.l--` と `.c--` は併用OK（例: `<div class="l--flex c--nav">`）
+- 同カテゴリ内の併用は不可（例: `.l--flex` と `.l--grid` は同要素に付けない）
+- バリエーション: `.c--button.c--button--outline`
+- 子要素: `.c--card_header`, `.c--card_body`
+
+**記述順序:**
+class 属性にクラスを直接記述する場合、Property Class（`-` プレフィックス）はモジュールクラスやユーティリティクラスの**後ろ**に書いてください。
+
+```html
+<!-- OK: モジュールクラス → Property Class -->
+<div class="l--flex c--nav -p:20 -g:20">...</div>
+<div class="l--box u--cbox -bd -p:20">...</div>
+
+<!-- NG: Property Class が先 -->
+<div class="-p:20 -g:20 l--flex c--nav">...</div>
+```
+
+
+## カスタムCSS を追加する場合
+
+独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
+
+```css
+/* カスタムコンポーネント → lism-modules に追加 */
+@layer lism-modules {
+  .c--my-card {
+    border: 1px solid var(--brand);
+    border-radius: var(--bdrs--20);
+    padding: var(--s30);
+  }
+}
+
+/* ベーススタイルの拡張 → lism-base に追加 */
+@layer lism-base {
+  .set--my-theme {
+    --brand: #c00;
+  }
+}
+```
+
+カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。
+
+```css
+/* NG */
+.c--my-card { padding: 24px; border-radius: 8px; }
+
+/* OK */
+.c--my-card { padding: var(--s30); border-radius: var(--bdrs--20); }
+```
+
+ただし、明確にその数値に意図がある場合は、生のCSS値を使用しても構いません。
+
+**レイヤー外に書く場合:**
+`@layer` の外（レイヤーなし）でカスタムCSSを書くのは、**Property Class（`-{prop}:{value}`）を拡張する場合のみ**としてください。それ以外のカスタムスタイルは必ずいずれかの `@layer` 内に記述します。
+
+```css
+/* OK: Property Class の拡張はレイヤー外 */
+.-myProp\:myValue { ... }
+
+/* NG: コンポーネントやユーティリティをレイヤー外に書かない */
+.c--my-card { ... }
+```
+
+
+## CSS の配置場所
+
+### グローバル CSS（サイト全体）
+
+Lism のトークン変数のカスタマイズやベーススタイルの上書きは、サイト全体で読み込むグローバル CSS ファイルに記述します。（lism-cssの`main.css`ファイルよりあとで読み込むこと）。
+
+```css
+/* global.css などで適切な @layer で定義すること */
+@layer lism-base {
+  :root {
+    --brand: #c00;
+    --link-c: #0066cc;
+    --fw--bold: 700;
+  }
+}
+```
+
+### コンポーネント CSS
+
+コンポーネント固有のスタイルは、そのコンポーネントを定義しているファイルに紐づけます。
+
+- `.jsx` / `.tsx` ファイル: CSS ファイルを `import` する
+- `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
+
+```css
+/* コンポーネント用CSS は lism-modules 内に定義する */
+@layer lism-modules {
+  .c--yourComponent {
+    ...
+  }
+}
+```

package/dist/data/guides/module-class.md

@@ -0,0 +1,162 @@
+# モジュールクラス
+
+Lism CSS では、クラス名のプレフィックスによってモジュールの種類と CSS Layer の所属が決まります。  
+すべてのモジュールクラスは `@layer lism-modules` に属します（`set--` を除く）。
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [State Module（`is--`）](#state-moduleis--)
+- [Layout Module（`l--`）](#layout-modulel--)
+- [Atomic Module（`a--`）](#atomic-modulea--)
+- [Component（`c--`）](#componentc--)
+
+[詳細](https://lism-css.com/docs/module-class/)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | 役割 |
+|--------------|------|------|
+| `is--` | State Module | 複数のモジュールに付け外しできる汎用的な状態クラス |
+| `l--` | Layout Module | レイアウトの構成単位となるモジュール |
+| `a--` | Atomic Module | レイアウトの最小単位（アイコン・区切り線等） |
+| `c--` | Component | 具体的な役割を持つコンポーネント |
+
+**併用ルール:**
+- `is--` は他のすべてのモジュールと併用可能
+- `l--` と `c--` は併用可能（例: `class="l--flex c--nav"`）
+- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
+
+
+## State Module（`is--`）
+
+[詳細](https://lism-css.com/docs/state/)
+
+要素に構造的な振る舞い（状態）を付与するクラスです。他のモジュールクラスと自由に組み合わせられます。
+
+| クラス | 用途 | 備考 |
+|--------|------|------|
+| `is--container` | コンテナクエリの基準要素にする（`container-type: inline-size`） | Lism のレスポンシブ機能の前提。判定基準にしたいラッパーに付与する |
+| `is--wrapper` | 直下の子要素のコンテンツ幅を制限する | `-contentSize:s` / `-contentSize:l` でプリセットサイズ指定可能。デフォルト: `--sz--m` |
+| `is--layer` | `position: absolute; inset: 0` の絶対配置レイヤー | `overflow: hidden` も適用される |
+| `is--linkBox` | ボックス全体をクリッカブルなリンク領域にする | `position: relative; isolation: isolate` を適用 |
+| `is--vertical` | 縦書きモード（`writing-mode: var(--vertical-mode)`） | `is--vertical@sm`, `is--vertical@md` でブレークポイント指定可能 |
+| `is--skipFlow` | `l--flow` 内で次の兄弟要素のフロー余白をリセット | `is--skipFlow + *` で `--flow: 0px` |
+| `is--side` | `l--sideMain` 内でサイド要素を示す | `l--sideMain` と組み合わせて使用 |
+
+### コンポーネントでの対応
+
+| JSX Prop | HTML クラス |
+|----------|-----------|
+| `isContainer` | `is--container` |
+| `isWrapper` / `isWrapper='s'` | `is--wrapper` / `is--wrapper -contentSize:s` |
+| `isLayer` | `is--layer` |
+| `isLinkBox` | `is--linkBox` |
+| `isVertical` | `is--vertical` |
+
+```jsx
+// Layout 優先の書き方（推奨）
+<Stack isLayer>背景レイヤー</Stack>
+// → <div class="l--stack is--layer">...</div>
+
+<Flex isWrapper="l">コンテンツ</Flex>
+// → <div class="l--flex is--wrapper -contentSize:l">...</div>
+```
+
+
+## Layout Module（`l--`）
+
+レイアウト構造を定義するメインのモジュール群です。Lism コンポーネントでは `layout` prop が内部で固定されており、対応するクラスが自動出力されます。
+
+| クラス | コンポーネント | CSS display | 用途 |
+|--------|-------------|-------------|------|
+| `l--box` | `<Box>` | — | 汎用ボックス |
+| `l--flex` | `<Flex>` | `flex` | Flexbox（横方向）。子要素に `min-width: 0` |
+| `l--stack` | `<Stack>` | `flex` | 縦積み（`flex-direction: column`） |
+| `l--cluster` | `<Cluster>` | `flex` | 折り返し Flex（`flex-wrap: wrap; align-items: center`） |
+| `l--grid` | `<Grid>` | `grid` | CSS Grid。`--gtc`, `--gtr`, `--gta` 変数で制御 |
+| `l--center` | `<Center>` | `grid` | 中央配置（`place-content: center; place-items: center`） |
+| `l--flow` | `<Flow>` | `flow-root` | フローコンテンツ。子要素間に `margin-block-start: var(--flow)` |
+| `l--frame` | `<Frame>` | — | アスペクト比フレーム。直下メディアに `object-fit: cover` |
+| `l--columns` | `<Columns>` | `grid` | 固定カラム数（`grid-template-columns: repeat(var(--cols), minmax(0, 1fr))`） |
+| `l--tileGrid` | `<TileGrid>` | `grid` | 均等タイルグリッド（`grid-template: repeat(var(--rows,1), minmax(0, 1fr)) / repeat(var(--cols,1), minmax(0, 1fr))`） |
+| `l--fluidCols` | `<FluidCols>` | `grid` | 流動カラム（`auto-fit` / `auto-fill`）。`--cols` で最小幅指定 |
+| `l--switchCols` | `<SwitchCols>` | `flex` | ブレークポイントでカラム切り替え。`--breakSize` で制御 |
+| `l--sideMain` | `<SideMain>` | `flex` | サイド＋メインの2カラム。`--sideW`, `--mainW` で制御 |
+
+### レイアウト固有の Props
+
+```jsx
+<Grid gtc="1fr 1fr" gtr="auto">...</Grid>
+<Columns cols={3}>...</Columns>              // --cols: 3
+<FluidCols autoFill>...</FluidCols>           // --autoMode: auto-fill
+<SwitchCols breakSize="480px">...</SwitchCols>  // --breakSize: 480px
+<SideMain sideW="200px" mainW="1fr">...</SideMain>
+<Flow flow="30">...</Flow>                    // --flow: var(--s30)
+```
+
+
+## Atomic Module（`a--`）
+
+レイアウトの最小単位となる単機能モジュールです。
+
+| クラス | コンポーネント | 用途 |
+|--------|-------------|------|
+| `a--icon` | `<Icon>` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
+| `a--divider` | `<Divider>` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
+| `a--spacer` | `<Spacer>` | 空白要素（`min-height: 1px; min-width: 1px`） |
+| `a--decorator` | `<Decorator>` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
+
+```jsx
+<Icon as={LucideArrowRight} fz="xl" />
+<Media as="img" src="/image.jpg" alt="説明" ar="16/9" />
+<Divider />
+<Spacer h="40" />
+```
+
+
+## Component（`c--`）
+
+[詳細](https://lism-css.com/docs/components/)
+
+より具体的な役割を持つコンポーネントのクラスです。他のクラスとの組み合わせを前提とした設計になっています。
+
+### ユーザー定義コンポーネント
+
+独自のコンポーネントを作成する場合は `c--{name}` の命名規則に従います。
+
+```css
+@layer lism-modules {
+  .c--my-card {
+    border: 1px solid var(--brand);
+    border-radius: var(--bdrs--20);
+    padding: var(--s30);
+  }
+  .c--my-card_header { ... }  /* 子要素 */
+  .c--my-card_body { ... }
+}
+```
+
+- バリエーション: `.c--button.c--button--outline`
+- 子要素: `.c--card_header`, `.c--card_body`
+
+### `@lism-css/ui` で提供されるコンポーネント
+
+`@lism-css/ui` パッケージでは、以下の `c--` クラスを持つ UI コンポーネントが利用できます。
+
+| クラス | コンポーネント | 用途 |
+|--------|-------------|------|
+| `c--button` | `<Button>` | ボタン（`c--button--outline` バリエーションあり） |
+| `c--badge` | `<Badge>` | ラベル・バッジ（`c--badge--outline` バリエーションあり） |
+| `c--avatar` | `<Avatar>` | ユーザーアイコン |
+| `c--accordion` | `<Accordion>` | 折りたたみパネル（`_item`, `_panel`, `_button`, `_content`, `_icon` 子要素あり） |
+| `c--tabs` | `<Tabs>` | タブ切り替え UI（`_list`, `_tab`, `_panel` 子要素あり） |
+| `c--modal` | `<Modal>` | モーダルダイアログ（`_inner` 子要素あり） |
+| `c--details` | `<Details>` | details/summary（`_summary`, `_icon`, `_body` 子要素あり） |
+| `c--alert` | `<Alert>` | 警告・通知ボックス |
+| `c--callout` | `<Callout>` | 注釈・補足（`_head`, `_icon`, `_title`, `_body` 子要素あり） |
+| `c--chat` | `<Chat>` | チャット風 UI（`_avatar`, `_name`, `_body`, `_content`, `_deco` 子要素あり） |
+| `c--navMenu` | `<NavMenu>` | ナビゲーションメニュー（`_item`, `_link`, `_nest` 子要素あり） |
+| `c--shapeDivider` | `<ShapeDivider>` | 図形区切り線（`_inner`, `_svg` 子要素あり） |