@lism-css/mcp 0.22.0 → 0.24.0

package/dist/data/guides/primitives/a--icon.md

@@ -2,12 +2,7 @@
 
 アイコン要素を表示するためのクラス。`flex-shrink: 0`、デフォルトサイズ `1em`。
 
-## 基本情報
-
-- クラス名: `a--icon`
-- コンポーネント: `<Icon>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_icon.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/a--icon.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--icon.md
 
 ## 出力されるHTML構造
 
@@ -24,80 +19,11 @@
 ## 専用Props
 
 | Prop | 説明 |
-|------|------|
+| --- | --- |
 | `icon` | アイコンを指定。文字列（プリセット名）・オブジェクト（`{as, ...exProps}`）のどちらでも可 |
 | `size` | プリセットアイコン使用時の `width` / `height`（通常は `fz` で指定するほうが推奨） |
 | `label` | `aria-label` として出力。指定があれば `role="img"`、なければ `aria-hidden="true"` |
 
-## Usage
-
-`<Icon>` には**4つの使い方**があります。
-
-### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
-
-`react-icons`, `@phosphor-icons/react`, `lucide-react` などのサードパーティアイコンコンポーネントを `as` で渡すと、Lism が未処理の props は自動的にそのコンポーネントに転送されます。外部コンポーネント専用の props を明示的に分離したい場合は `exProps` を使います。
-
-```jsx
-import { SmileyIcon } from '@phosphor-icons/react';
-import { Icon } from 'lism-css/react';
-
-// 基本形
-<Icon as={SmileyIcon} fz="2rem" />
-
-// exProps で外部 props を明示的に分離
-<Icon as={SmileyIcon} exProps={{ weight: 'fill', size: '3em' }} c="blue" />
-
-// 上と同じ結果（Lism が "weight" を処理しないため最終的に SmileyIcon に渡る）
-<Icon as={SmileyIcon} weight="fill" c="blue" />
-```
-
-### 2. `as` と `exProps` を `icon` prop に一括指定
-
-`icon={{as: Component, ...exProps}}` の形式で、`as` と `exProps` を1つのオブジェクトとしてまとめて渡せます。アイコンを選択制にする親コンポーネントを作るときに便利です。
-
-```jsx
-import { Home } from 'lucide-react';
-
-<Icon icon={{ as: Home, strokeWidth: 1, size: 64 }} />
-
-// 同じ結果（分割形式）
-<Icon as={Home} exProps={{ strokeWidth: 1, size: 64 }} />
-```
-
-### 3. プリセットアイコンを使う
-
-`lism-css` パッケージ内に [Phosphor Icons](https://phosphoricons.com/) ベースのプリセットアイコンが同梱されています。`icon="アイコン名"` の文字列で呼び出せます。
-
-```jsx
-<Icon icon="menu" />
-<Icon icon="lightbulb" fz="2xl" c="blue" />
-<Icon icon="warning" size="40px" />
-```
-
-プリセット一覧のエクスポート元:
-
-```jsx
-import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
-```
-
-### 4. SVG の `path` を直接記述する
-
-`viewBox` を指定すると `<svg>` 要素として出力されるため、子要素に `<path>` 等をそのまま書けます。
-
-```jsx
-<Icon viewBox="0 0 256 256" label="Smiley icon" fz="4xl" c="blue">
-  <path d="M128,24A104,104,0,1,0,232,128..." />
-</Icon>
-```
-
-### 5. `src` で画像をアイコンとして使う
-
-`src` を指定すると `<img>` として出力されます（厳密には4パターンに加えて画像指定も可能）。
-
-```jsx
-<Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />
-```
-
 ## 関連プリミティブ
 
 - [a--divider](./a--divider.md) — 区切り線

package/dist/data/guides/primitives/a--spacer.md

@@ -2,60 +2,12 @@
 
 要素間のスペースを確保するクラス。`<Spacer>` は `<Lism atomic="spacer" aria-hidden="true" />` のエイリアスとして用意されています。
 
-## 基本情報
-
-- クラス名: `a--spacer`
-- コンポーネント: `<Spacer>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_spacer.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/a--spacer.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--spacer.md
 
 ## 専用Props
 
 `<Spacer>`では **`w` / `h` に対してSPACEトークンの値**が使えます（他のコンポーネントではSIZEトークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
 
-## Usage
-
-### 縦方向のスペース
-
-```jsx
-<p>Content...</p>
-<Spacer h="100px" />
-<p>Content...</p>
-```
-
-```html
-<p>Content...</p>
-<div class="a--spacer -h" style="--h:100px" aria-hidden="true"></div>
-<p>Content...</p>
-```
-
-### SPACEトークンを使う
-
-```jsx
-<p>Content...</p>
-<Spacer h="60" />
-<p>Content...</p>
-```
-
-```html
-<p>Content...</p>
-<div class="a--spacer -h" style="--h:var(--s60)" aria-hidden="true"></div>
-<p>Content...</p>
-```
-
-### 横方向のスペーサー
-
-Flex コンテナ内で `w` を指定すれば横方向のスペーサーとしても使えます。
-
-```jsx
-<Flex g="10">
-  <Box p="20" bd>Box</Box>
-  <Spacer w="40" />
-  <Box p="20" bd>Box</Box>
-  <Box p="20" bd>Box</Box>
-</Flex>
-```
-
 ## 関連プリミティブ
 
 - [a--divider](./a--divider.md) — 区切り線

package/dist/data/guides/primitives/l--autoColumns.md

@@ -2,68 +2,21 @@
 
 カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fill` / `auto-fit` を使った流動カラムを簡潔に記述できます。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--autoColumns.md
 
-- クラス名: `l--autoColumns`
-- コンポーネント: `<AutoColumns>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_autoColumns.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--autoColumns.md
+## 既定の挙動
+
+- `display:grid`。
+- `--cols:20rem`、`--autoMode:auto-fill`を初期値にします。
+- `grid-template-columns:repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr))`で最小幅ベースの自動段組みを作ります。
 
 ## 専用Props
 
 | Prop | CSS変数 | デフォルト | 説明 |
-|------|--------|-----------|------|
+| --- | --- | --- | --- |
 | `cols` | `--cols` | `20rem` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
 | `autoFit` | `--autoMode` | `auto-fill` | `auto-fit` モードに切り替え |
 
-## Usage
-
-### `--cols`でサイズを指定する
-
-```jsx
-<AutoColumns cols="16em" g="20">
-  <Lism as="div" p="20" bd>Item A</Lism>
-  <Lism as="div" p="20" bd>Item B</Lism>
-  <Lism as="div" p="20" bd>Item C</Lism>
-  <Lism as="div" p="20" bd>Item D</Lism>
-</AutoColumns>
-```
-
-```html
-<div class="l--autoColumns -g:20" style="--cols: 16em">
-  <div class="-p:20 -bd">Item A</div>
-  <div class="-p:20 -bd">Item B</div>
-  <div class="-p:20 -bd">Item C</div>
-  <div class="-p:20 -bd">Item D</div>
-</div>
-```
-
-### `auto-fit`を使用する
-
-`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fill`）。`--autoMode:auto-fit`（`autoFit`）を指定することで、要素数が少ない時の挙動が変わります。
-
-```jsx
-<AutoColumns cols="12em" g="20" fz="s">
-  <Lism as="div" p="20" bd>auto-fill</Lism>
-  <Lism as="div" p="20" bd>auto-fill</Lism>
-</AutoColumns>
-<AutoColumns cols="12em" autoFit g="20" fz="s">
-  <Lism as="div" p="20" bd>auto-fit</Lism>
-  <Lism as="div" p="20" bd>auto-fit</Lism>
-</AutoColumns>
-```
-
-```html
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
-  <div class="-p:20 -bd">auto-fill</div>
-  <div class="-p:20 -bd">auto-fill</div>
-</div>
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fit">
-  <div class="-p:20 -bd">auto-fit</div>
-  <div class="-p:20 -bd">auto-fit</div>
-</div>
-```
-
 ## 関連プリミティブ
 
 - [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム

package/dist/data/guides/primitives/l--box.md

@@ -2,27 +2,7 @@
 
 コンテンツをグループ化するだけのシンプルなクラス。汎用的な箱として、パディング・ボーダー・背景色などの指定に使います。
 
-## 基本情報
-
-- クラス名: `l--box`
-- コンポーネント: `<Box>`
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--box.md
-
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Box p="30" bgc="base-2" bxsh="10" bdrs="10">
-  <p>コンテンツ...</p>
-</Box>
-```
-
-```html
-<div class="l--box -p:30 -bgc:base-2 -bxsh:10 -bdrs:10">
-  <p>コンテンツ...</p>
-</div>
-```
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--box.md
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--center.md

@@ -2,52 +2,19 @@
 
 要素を上下左右中央揃えで配置するクラス。高さの有無で水平中央のみ / 上下左右中央を自動的に切り替えます。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--center.md
 
-- クラス名: `l--center`
-- コンポーネント: `<Center>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_center.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--center.md
+## 既定の挙動
+
+- `display:grid`。
+- `place-content:center`と`place-items:center`で子要素を中央配置します。
+- 中央配置のために`d="grid"`、`pc="center"`、`pi="center"`などを重ねる必要はありません。
 
 ## 動作の仕組み
 
 - 高さを持たない場合: コンテンツを**水平方向のみ**中央揃え（内在的な中央寄せ。長いテキストは左寄せのまま）
 - 高さ・アスペクト比（`h`, `min-h`, `ar` など）が設定されている場合: **垂直方向も中央揃え**
 
-## Usage
-
-### 水平方向に中央配置
-
-```jsx
-<Center bd p="30">
-  <Text fz="l">TEXT</Text>
-</Center>
-```
-
-```html
-<div class="l--center -bd -p:30">
-  <p class="-fz:l">TEXT</p>
-</div>
-```
-
-### 上下左右中央に配置する
-
-`ar` や高さを指定すると、垂直方向に対しても中央揃えになります。
-
-```jsx
-<Center g="10" ar="3/2" bd>
-  <Text fz="l">TEXT</Text>
-  <Text fz="s">Lorem ipsum dolor sit amet.</Text>
-</Center>
-```
-
-```html
-<div class="l--center -bd -g:10 -ar:3/2">
-  <p class="-fz:l">TEXT</p>
-  <p class="-fz:s">Lorem ipsum dolor sit amet.</p>
-</div>
-```
-
 ## 関連プリミティブ
 
 - [l--frame](./l--frame.md) — アスペクト比付きメディアフレーム（`<Center>` と組み合わせられる）

package/dist/data/guides/primitives/l--cluster.md

@@ -2,34 +2,14 @@
 
 複数の要素を横方向に並べ、数が多ければ自動的に折り返すクラス。タグリスト・ボタングループなどに使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--cluster.md
 
-- クラス名: `l--cluster`
-- コンポーネント: `<Cluster>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_cluster.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--cluster.md
+## 既定の挙動
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Cluster g="15">
-  <Lism bd px="10" bdrs="10">Lorem</Lism>
-  <Lism bd px="10" bdrs="10">ipsum</Lism>
-  <Lism bd px="10" bdrs="10">Dolor</Lism>
-  <Lism bd px="10" bdrs="10">Sit amet</Lism>
-</Cluster>
-```
-
-```html
-<div class="l--cluster -g:15">
-  <span class="-bd -px:10 -bdrs:10">Lorem</span>
-  <span class="-bd -px:10 -bdrs:10">ipsum</span>
-  <span class="-bd -px:10 -bdrs:10">Dolor</span>
-  <span class="-bd -px:10 -bdrs:10">Sit amet</span>
-</div>
-```
+- `display:flex`。
+- `flex-wrap:wrap`で折り返しを有効化済み。
+- `align-items:center`でstretchを解除済み。
+- `gap`は既定で持たないため、間隔は`g`/`-g:*`で指定します。通常`fxw="wrap"`や`ai="center"`は足しません。
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--columns.md

@@ -2,69 +2,20 @@
 
 ブレイクポイントごとに指定した列数で表示できるカラムクラス。等幅の複数カラムを定義したい場合に使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--columns.md
 
-- クラス名: `l--columns`
-- コンポーネント: `<Columns>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_columns.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--columns.md
+## 既定の挙動
+
+- `display:grid`。
+- `--cols:2`を初期値にし、`grid-template-columns:repeat(var(--cols), minmax(0, 1fr))`で等幅列を作ります。
+- 等幅N列は`Grid gtc="repeat(...)"`ではなく`Columns cols={...}`を優先します。
 
 ## 専用Props
 
 | Prop | CSS変数 | 説明 | デフォルト |
-|------|--------|------|------------|
+| --- | --- | --- | --- |
 | `cols` | `--cols` | 列数を指定。配列でブレイクポイント指定可 | `2` |
 
-## Usage
-
-### 2列レイアウト
-
-```jsx
-<Columns cols={2} g="20">
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-</Columns>
-```
-
-```html
-<div class="l--columns -g:20" style="--cols: 2">
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-</div>
-```
-
-### ブレイクポイント別指定
-
-```jsx
-<Columns cols={[1, 2, 3]} g="20">
-  <Box>Box1</Box>
-  <Box>Box2</Box>
-  <Box>Box3</Box>
-</Columns>
-```
-
-```html
-<div class="l--columns -cols_sm -cols_md -g:20" style="--cols: 1; --cols_sm: 2; --cols_md: 3">
-  <div class="l--box">Box1</div>
-  <div class="l--box">Box2</div>
-  <div class="l--box">Box3</div>
-</div>
-```
-
-`null` でブレイクポイントをスキップ可：`cols={[2, null, 4]}` で「デフォルト2列、`md` から4列」になります。
-
-### `gc`（grid-column）で子要素の横幅を個別制御
-
-子要素側で `gc="span 2"` のように指定すると、その子だけ複数列にまたがって配置できます。`cols="6"` 等の多めの列数と組み合わせると、不揃いなブロックレイアウトを作れます。
-
-### subgrid でカード高さ揃え
-
-子要素を `<Grid gtr="subgrid" gr="span 4">` にすると、親 Columns の行グリッドを継承しカード内のメディア・タイトル・本文・フッタを縦方向に揃えられます。
-
 ## 関連プリミティブ
 
 - [l--tileGrid](./l--tileGrid.md) — 列数×行数を指定する均等タイル

package/dist/data/guides/primitives/l--flex.md

@@ -2,70 +2,13 @@
 
 コンテンツを Flex レイアウトで配置するためのクラス。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--flex.md
 
-- クラス名: `l--flex`
-- コンポーネント: `<Flex>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_flex.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flex.md
+## 既定の挙動
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Flex>
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-</Flex>
-```
-
-```html
-<div class="l--flex">
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-</div>
-```
-
-### Flex プロパティの指定
-
-Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`, `ai`, `fxd` など）を指定できます。レスポンシブ対応プロパティは配列・オブジェクトで指定可能。
-
-```jsx
-<Flex fxw="wrap" jc="center" g="20">
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-</Flex>
-```
-
-```html
-<div class="l--flex -fxw:wrap -g:20 -jc:center">
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-</div>
-```
-
-### 子要素の Flex プロパティ
-
-子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxsh`（flex-shrink）などで個別制御できます。
-
-```jsx
-<Flex g="20">
-  <Lism fx="1">Flex Content</Lism>
-  <Lism fxb={['50%', null, '25%']}>Flex Content</Lism>
-</Flex>
-```
-
-```html
-<div class="l--flex -g:20">
-  <div class="-fx:1">Flex Content</div>
-  <div class="-fxb -fxb_md" style="--fxb:50%;--fxb_md:25%">Flex Content</div>
-</div>
-```
+- `display:flex`。
+- 直下の子要素に`min-width:0`を付与し、flex itemのはみ出しを抑えます。
+- `gap`、`flex-wrap`、`align-items`、`justify-content`、`flex-direction`は既定では指定しません。必要な時だけ`g`/`fxw`/`ai`/`jc`/`fxd`で指定します。
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--flow.md

@@ -2,93 +2,32 @@
 
 子要素間の余白を `margin-block-start` で管理するフローレイアウト。**記事コンテンツなどテキスト主体のフローレイアウト**に最適。
 
-## 基本情報
-
-- クラス名: `l--flow`
-- コンポーネント: `<Flow>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_flow.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flow.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--flow.md
 
 ## 余白の仕組み
 
 `l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h1`〜`h6`）のみ余白が大きくなり、`calc(var(--flow) * 2 + 0.5em)` で計算されます。
 
 | クラス | 余白量 |
-|--------|-------|
+| --- | --- |
 | `l--flow` | `--flow--base`（`--s30`、`lang="ja"` 時は `--s35`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
 `--flow--base` / `--flow--s` は `:root` で定義されたトークン（[tokens](../tokens.md#フロー余白-flow) 参照）。日本語環境では文字密度に合わせて `--flow--base` が広めに上書きされる。
 
-## 専用Props
-
-| Prop | 説明 |
-|------|------|
-| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `-flow:{value}` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
-
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Flow>
-  <p>本文1...</p>
-  <p>本文2...</p>
-  <h2>Heading 2</h2>
-  <p>本文3...</p>
-  <ul>
-    <li>リスト項目1</li>
-    <li>リスト項目2</li>
-  </ul>
-</Flow>
-```
-
-```html
-<div class="l--flow">
-  <p>本文1...</p>
-  <p>本文2...</p>
-  <h2>Heading 2</h2>
-  <p>本文3...</p>
-  <ul>...</ul>
-</div>
-```
-
-### 余白量をトークンで変える（`flow="s"`）
+## 既定の挙動
 
-```jsx
-<Flow flow="s">
-  <p>本文...</p>
-  <h2>Heading</h2>
-  <p>本文...</p>
-</Flow>
-```
-
-```html
-<div class="l--flow -flow:s">
-  <p>本文...</p>
-  <h2>Heading</h2>
-  <p>本文...</p>
-</div>
-```
-
-### 任意の値を指定する
-
-トークン値以外を `flow` に渡すと、`-flow:` クラスと `--flow` CSS変数で出力されます。
+- `display:flow-root`。
+- 直下の`* + *`へ`margin-block-start:var(--flow)`を付与し、`--flow`は`--flow--base`を初期値にします。
+- 直下の見出しは上余白を広めにし、先頭要素と`is--skipFlow + *`は余白を打ち消します。
+- 直下の`img`/`video`/`iframe`は`display:block`へ初期化します。
 
-```jsx
-<Flow flow="10px">
-  <p>本文...</p>
-  <p>本文...</p>
-</Flow>
-```
+## 専用Props
 
-```html
-<div class="l--flow -flow:" style="--flow:10px">
-  <p>本文...</p>
-  <p>本文...</p>
-</div>
-```
+| Prop | 説明 |
+| --- | --- |
+| `flow` | `--flow` の値を指定。トークン値 `s` を渡すと `-flow:s` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
 
 ## `is--skipFlow`