@lism-css/mcp 0.11.0 → 0.13.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/ui/)
+
+---
+
+## 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,166 @@
+# 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-primitive
+      → @layer trait（.is-- Trait Primitive）
+      → @layer layout（.l-- Layout Primitive）
+      → @layer atomic（.a-- Atomic Primitive）
+  → @layer lism-component（.c-- Component Class — BEM 構造を持つ UI 部品）
+  → @layer lism-custom（ユーザーカスタマイズ用）
+  → @layer lism-utility（.u-- ユーティリティクラス）
+  → Property Class（レイヤー外 — 最も詳細度が高い）
+```
+
+
+## 命名規則とプレフィックス
+
+[詳細](https://lism-css.com/docs/primitives/)
+
+クラス名のプレフィックスによって、役割とレイヤーの所属が決まります。
+
+| プレフィックス | レイヤー | 役割 | 例 |
+|--------------|---------|------|-----|
+| `.set--` | lism-base | ベーススタイル上書き・トークン再定義 | `.set--plain`, `.set--transition` |
+| `.is--` | lism-primitive.trait | Trait Primitive（要素の静的特性） | `.is--container`, `.is--wrapper` |
+| `.l--` | lism-primitive.layout | Layout Primitive | `.l--grid`, `.l--flex`, `.l--stack` |
+| `.a--` | lism-primitive.atomic | Atomic Primitive | `.a--icon`, `.a--divider` |
+| `.c--` | lism-component | Component Class（BEM 構造を持つ UI 部品） | `.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">`）
+- 同カテゴリ内の Primitive 併用は不可（例: `.l--flex` と `.l--grid`、`.a--icon` と `.a--divider` は同要素に付けない）
+- `.l--` × `.a--` は非推奨（役割的に同居しない想定）
+- `.is--` 同士は併用OK（Trait は複数併用できる）
+- `.is--` × `.l--` / `.a--` も併用OK
+- `c--` の Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし以下は許容:
+  - Block と自身の Modifier: `.c--button.c--button--outline`
+  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
+- 子要素: `.c--card_header`, `.c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
+
+**記述順序:**
+class 属性にクラスを直接記述する場合は、以下の順序で並べてください。粒度の大きい（塊としての役割を持つ）クラスから、粒度の小さい（単一プロパティ制御）クラスの順です。
+
+```
+[customClass] [c--/a--] [l--] [is--*] [set--*] [u--*] [Property Class...]
+```
+
+| # | 区分 | 例 |
+|---|---|---|
+| 1 | 独自クラス（`customClass`） | `my-card`, `hoge` |
+| 2 | Component / Atomic Primitive（`c--` / `a--`） | `c--box`, `a--icon`, `c--box c--box--primary` |
+| 3 | Layout Primitive（`l--`） | `l--flex`, `l--grid` |
+| 4 | Trait Primitives（`is--`） | `is--wrapper`, `is--layer` |
+| 5 | Set Class（`set--`） | `set--hov`, `set--card` |
+| 6 | ユーティリティ（`u--`） | `u--cbox`, `u--trim` |
+| 7 | Property Class（`-`） | `-p:20`, `-bgc:base-2` |
+
+```html
+<!-- OK -->
+<div class="c--nav l--flex -p:20 -g:20">...</div>
+
+<!-- NG: Property Class が先 -->
+<div class="-p:20 -g:20 l--flex c--nav">...</div>
+```
+
+なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
+
+
+## カスタムCSS を追加する場合
+
+独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
+
+```css
+/* カスタムコンポーネント → lism-component に追加 */
+@layer lism-component {
+  .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-component 内に定義する */
+@layer lism-component {
+  .c--yourComponent {
+    ...
+  }
+}
+```

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

@@ -0,0 +1,148 @@
+# Primitive クラス
+
+Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
+
+具体的な UI 部品は **Component クラス**（`c--`）として `@layer lism-component` に配置されますが、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [Trait Primitive（`is--`）](#trait-primitiveis--)
+- [Layout Primitive（`l--`）](#layout-primitivel--)
+- [Atomic Primitive（`a--`）](#atomic-primitivea--)
+- [Component（`c--`）](#componentc--)
+
+[詳細](https://lism-css.com/docs/primitives/)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | サブレイヤー | 役割 |
+|--------------|------|------------|------|
+| `is--` | Trait Primitive | `lism-primitive.trait` | 要素に静的な構造的特性を付与する汎用クラス |
+| `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
+| `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
+| `c--` | Component | `lism-component` | BEM 構造を持つ具体的な UI 部品 |
+
+**併用ルール:**
+- `is--` は他のすべての Primitive / Component と併用可能（複数の `is--` 同士もOK）
+- `l--` と `c--` は併用可能（例: `class="l--flex c--nav"`）
+- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
+- `c--` のみ Modifier との併記が可能（`.c--button.c--button--outline`）
+
+
+## Trait Primitive（`is--`）
+
+[詳細](https://lism-css.com/docs/primitives/#trait-primitives)
+
+要素に**静的な構造的特性 (trait)** を付与するクラスです。他の Primitive / Component と自由に組み合わせられます。
+
+| クラス | 用途 |
+|--------|------|
+| `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
+| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
+| `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
+| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
+| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
+| `is--vertical` | 縦書きモードを定義する（`writing-mode: var(--vertical-mode)`） |
+| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
+| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
+
+Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。
+
+
+## Layout Primitive（`l--`）
+
+レイアウト構造を定義するメインの Primitive 群です。
+
+| クラス | 用途 |
+|--------|-------------|
+| `l--box` | 汎用ボックス |
+| `l--flex` | 横方向の基本的なFlexboxレイアウト |
+| `l--stack` | 縦方向の縦積みFlexboxレイアウト（`flex-direction: column`）。 |
+| `l--cluster` | タグの表示UIなど、複数要素を水平に並べて配置し、数が多ければ折り返すようなレイアウト。（`flex-wrap: wrap; align-items: center`） |
+| `l--grid` | 基本的なGridレイアウト。 |
+| `l--center` | 要素を縦横中央に配置するレイアウト（`place-content: center; place-items: center`） |
+| `l--flow` | 記事コンテンツなどのフローレイアウト。子要素間の余白を `margin-block-start` で管理する。 |
+| `l--frame` | アスペクト比や高さが固定されたメディア要素を配置する。直下のメディア要素に `object-fit: cover` を付与する。 |
+| `l--columns` | `repeat`と`minmax(0, 1fr))`を使ったカラムレイアウト。レスポンシブ対応の`--cols`用のProperty Classでカラム数の切り替え可能。 |
+| `l--tileGrid` | `--cols`だけではなく`--rows`も組み合わせた均等タイルグリッド（`grid-template: repeat(var(--rows,1), minmax(0, 1fr)) / repeat(var(--cols,1), minmax(0, 1fr))`） |
+| `l--fluidCols` | ブレイクポイントに依存せず、自動段組のできる流動カラムレイアウト。`--cols: 16em`のようにして最小維持幅を指定できる。 |
+| `l--sideMain` | 画像とコンテンツ、メインエリアとサイドバーなどの「"Side" + "Main"」に分かれ、横並びと縦並びが切り替わるレイアウト。"Main"が`--mainW`で指定したサイズ以上の横幅を維持できる範囲内で横並びを維持し、下回る場合は縦並びへ自動で切り替わる。横並びの間の"Side"の横幅は`--sideW`で指定する。 |
+| `l--switchCols` | 任意のサイズで一括カラム切り替えができるカラムレイアウト。`--breakSize` で制御 |
+
+それぞれ対応するLismコンポーネント（`<Flex>`, `<Stack>`, `<Cluster>` 等）があります。
+
+
+## Atomic Primitive（`a--`）
+
+レイアウト構成物の最小単位となる Primitive です。
+
+| クラス | 用途 |
+|--------|------|
+| `a--icon` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
+| `a--divider` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
+| `a--spacer` | 空白要素（`min-height: 1px; min-width: 1px`） |
+| `a--decorator` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
+
+それぞれ対応するコンポーネント（`<Icon>`, `<Divider>`, `<Spacer>`, `<Decorator>`）があります。
+
+
+## Component（`c--`）
+
+`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+
+`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
+
+| 分類 | 形式 | 例 |
+|---|---|---|
+| Block | `.c--{name}` | `.c--button`, `.c--card` |
+| Modifier | `.c--{name}--{modifier}` | `.c--button--outline` |
+| Element | `.c--{name}_{element}` | `.c--card_header`, `.c--card_body` |
+
+- Modifier は Block と併記して使用: `.c--button.c--button--outline`
+- Element は `_`（アンダースコア）一つ区切り
+- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
+  - Block と自身の Modifier: `.c--xxx.c--xxx--variant`
+  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
+
+`c--`を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`.l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることでCSSの記述量を削減できます。`c--`クラスにスタイルが全くなく、HTML側での可視性を高める名前付けのためだけに利用しても構いません。
+
+### 作成例
+
+`l--stack` と併用する前提でのカスタムクラス例
+
+```css
+@layer lism-component {
+  .c--myCard {
+    gap: var(--s20);
+    padding: var(--s30);
+    border-radius: var(--bdrs--20);
+    box-shadow: var(--bxsh--20);
+    border: 1px solid currentColor;
+    /* ... */
+  }
+}
+```
+
+```html
+<div class="c--myCard l--stack">
+  ...
+</div>
+```
+
+素のHTMLサイトではこのように`c--`クラスにCSSを書いてスタイリングしても大丈夫ですが、Reactなどでコンポーネントを作成できる場合は、特別な理由がない限りProperty Classを活用してください。
+
+```jsx
+export default function MyCard(props) {
+  return <Stack lismClass="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
+}
+```
+```css
+@layer lism-component {
+  .c--myCard {
+    /* 複雑なスタイルあれば css で書く */
+  }
+}
+```