@lism-css/mcp 0.11.0 → 0.13.0

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

@@ -0,0 +1,55 @@
+# l--center / `<Center>`
+
+要素を上下左右中央揃えで配置するクラス。高さの有無で水平中央のみ / 上下左右中央を自動的に切り替えます。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 動作の仕組み
+
+- 高さを持たない場合: コンテンツを**水平方向のみ**中央揃え（内在的な中央寄せ。長いテキストは左寄せのまま）
+- 高さ・アスペクト比（`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>` と組み合わせられる）
+- [l--stack](./l--stack.md) — `ai="center"` で水平中央の内在的な中央寄せが可能
+- [l--grid](./l--grid.md) — `ga="1/1"` で重ね配置のオーバーレイ

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

@@ -0,0 +1,38 @@
+# l--cluster / `<Cluster>`
+
+複数の要素を横方向に並べ、数が多ければ自動的に折り返すクラス。タグリスト・ボタングループなどに使います。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 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>
+```
+
+## 関連プリミティブ
+
+- [l--flex](./l--flex.md) — 汎用 Flex 横並び（折り返しなしが基本）
+- [l--stack](./l--stack.md) — Flex 縦並び
+- [l--switchCols](./l--switchCols.md) — ブレイクポイントで縦横切り替えるカラム

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

@@ -0,0 +1,72 @@
+# l--columns / `<Columns>`
+
+ブレイクポイントごとに指定した列数で表示できるカラムクラス。等幅の複数カラムを定義したい場合に使います。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 専用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) — 列数×行数を指定する均等タイル
+- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
+- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列切り替え

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

@@ -0,0 +1,74 @@
+# l--flex / `<Flex>`
+
+コンテンツを Flex レイアウトで配置するためのクラス。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 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）, `fxs`（flex-shrink）などで個別制御できます。
+
+```jsx
+<Flex g="20">
+  <Lism fx="1">Flex Content</Lism>
+  <Lism fxb={['33%', '25%']}>Flex Content</Lism>
+</Flex>
+```
+
+```html
+<div class="l--flex -g:20">
+  <div class="-fx:1">Flex Content</div>
+  <div class="-fxb -fxb_sm" style="--fxb:33%;--fxb_sm:25%">Flex Content</div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--stack](./l--stack.md) — 縦積みの Flexbox（`flex-direction: column`）
+- [l--cluster](./l--cluster.md) — 折り返し前提の横並び（`flex-wrap: wrap`）
+- [l--grid](./l--grid.md) — CSS Grid レイアウト

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

@@ -0,0 +1,134 @@
+# l--flow / `<Flow>`
+
+子要素間の余白を `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/
+
+## 余白の仕組み
+
+`l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h2`〜`h6`）のみ余白が大きくなる（`--flow-hScale` で調整可能）。
+
+| クラス | 余白量 |
+|--------|-------|
+| `.l--flow` | `--flow--base`（`--s30`） |
+| `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
+| `.l--flow.-flow:` | `--flow` を直接指定した値 |
+
+## 専用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変数で出力されます。
+
+```jsx
+<Flow flow="10px">
+  <p>本文...</p>
+  <p>本文...</p>
+</Flow>
+```
+
+```html
+<div class="l--flow -flow:" style="--flow:10px">
+  <p>本文...</p>
+  <p>本文...</p>
+</div>
+```
+
+## `is--skipFlow`
+
+`l--flow` 直下で使用し、**次の兄弟要素との余白を打ち消す**トレイトクラス。フローコンテンツの先頭に `position: absolute` な要素を配置したい場合などに使用します。
+
+```html
+<div class="l--flow">
+  <div class="is--skipFlow">スキップ対象</div>
+  <p>本文1（上の要素との余白が打ち消される）</p>
+  <p>本文2</p>
+</div>
+```
+
+`is--skipFlow` は `l--flow` 専用のトレイトクラスで、独立したドキュメントは持ちません。
+
+## 入れ子時の注意点
+
+`l--flow` の直下で `l--flow` をネストして `--flow` をカスタム値で直接指定すると、**その子側の `l--flow` 自身の `margin-block-start` にも影響**が出ます。直下にネストせず、別要素で一度ラップすれば回避できます。
+
+```jsx
+// NG: 直下ネストで --flow を上書きすると親子両方に影響
+<Flow>
+  <p>親コンテンツ</p>
+  <Flow flow="5px">  {/* この Flow 自体の上マージンも 5px になる */}
+    <p>子コンテンツ</p>
+  </Flow>
+</Flow>
+
+// OK: 間に1段ラップを挟む
+<Flow>
+  <p>親コンテンツ</p>
+  <div>
+    <Flow flow="5px">
+      <p>子コンテンツ</p>
+    </Flow>
+  </div>
+</Flow>
+```
+
+またネストされた `l--flow` は、`--flow` が未定義の場合 `--flow--base` ではなく**親の値を継承**することにも注意してください。
+
+## 関連プリミティブ
+
+- [l--stack](./l--stack.md) — `gap` で余白を管理する縦積み（こちらは Flexbox）
+- [is--wrapper](./is--wrapper.md) — 記事コンテンツ幅の制限用ラッパー（`l--flow` とセットで使うことが多い）

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

@@ -0,0 +1,68 @@
+# l--fluidCols / `<FluidCols>`
+
+カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
+
+## 基本情報
+
+- クラス名: `l--fluidCols`
+- コンポーネント: `<FluidCols>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_fluidCols.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--fluidCols/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 |
+|------|--------|------|
+| `cols` | `--cols` | カラムが維持する最小幅を指定（`12rem`, `320px` など） |
+| `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
+
+## Usage
+
+### デフォルト幅で利用する
+
+```jsx
+<FluidCols g="20">
+  <Box bxsh="20" p="20"><p>カード1のコンテンツ</p></Box>
+  <Box bxsh="20" p="20"><p>カード2のコンテンツ</p></Box>
+  <Box bxsh="20" p="20"><p>カード3のコンテンツ</p></Box>
+</FluidCols>
+```
+
+```html
+<div class="l--fluidCols -g:20">
+  <div class="l--box -bxsh:20 -p:20"><p>カード1のコンテンツ</p></div>
+  <div class="l--box -bxsh:20 -p:20"><p>カード2のコンテンツ</p></div>
+  <div class="l--box -bxsh:20 -p:20"><p>カード3のコンテンツ</p></div>
+</div>
+```
+
+### カラム最小幅と `auto-fill` の指定
+
+```jsx
+<FluidCols cols="12rem" autoFill g="20" fz="s">
+  <Box bxsh="20" p="20"><p>A</p></Box>
+  <Box bxsh="20" p="20"><p>B</p></Box>
+  <Box bxsh="20" p="20"><p>C</p></Box>
+</FluidCols>
+```
+
+### 2列 → 1列
+
+カラム最小幅を大きめに設定すれば「2列 → コンテナが狭まれば 1列」のような段階的段組も自然に作れます。
+
+```jsx
+<FluidCols cols="320px" g="20">
+  <Frame ar="16/9">
+    <img src="/img/a-1.jpg" width="600" height="400" />
+  </Frame>
+  <Frame ar="16/9">
+    <img src="/img/a-3.jpg" width="600" height="400" />
+  </Frame>
+</FluidCols>
+```
+
+## 関連プリミティブ
+
+- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
+- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列の2段階切り替え
+- [l--sideMain](./l--sideMain.md) — メイン幅ベースの2カラム自動切替

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

@@ -0,0 +1,94 @@
+# l--frame / `<Frame>`
+
+直下のメディア要素（`img`, `video`, `iframe`）を自身のサイズにフィットさせて表示するクラス。アスペクト比固定のメディア枠を簡単に作れます。
+
+## 基本情報
+
+- クラス名: `l--frame`
+- コンポーネント: `<Frame>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_frame.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--frame/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `ar` | フレームのアスペクト比を指定（`16/9` など）。`ar` 自体はどのコンポーネントにも指定できる汎用 CSS Prop |
+
+## Usage
+
+### アスペクト比の指定
+
+```jsx
+<Frame ar="16/9">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</Frame>
+```
+
+```html
+<div class="l--frame -ar:16/9">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</div>
+```
+
+### `figure` / `figcaption` の使用
+
+`as="figure"` を指定してセマンティックな `<figure>` 要素として出力できます。
+
+```jsx
+<Frame as="figure" ar="16/9" pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Flex as="figcaption" pos="absolute" b="0" w="100%" jc="center" p="10" c="white" bgc="rgb(0 0 0 / 40%)">
+    Caption text
+  </Flex>
+</Frame>
+```
+
+### `iframe` / `video` の使用
+
+`iframe`（YouTube 埋め込みなど）や `video` も同様に `l--frame` 直下に配置すれば自動的にフィットします。
+
+```jsx
+<Frame ar="16/9">
+  <iframe src="https://www.youtube.com/embed/xxx" allowfullscreen />
+</Frame>
+```
+
+### Layer 系を活用したオーバーレイ
+
+`<Layer>` と組み合わせると、メディア上にテキストやオーバーレイを重ねられます。
+
+```jsx
+<Frame ar="3/2" pos="relative" c="#fff">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Layer bgc="rgb(0 0 0 / 40%)" />
+  <Layer p="30">
+    <Center min-h="100%" g="15">
+      <h2>Heading</h2>
+      <Text>オーバーレイ内のテキスト...</Text>
+    </Center>
+  </Layer>
+</Frame>
+```
+
+### レスポンシブな `ar`
+
+`ar` はブレイクポイント別に配列で指定できます。
+
+```jsx
+<Frame ar={['1/1', '3/2', '16/9']} pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</Frame>
+```
+
+```html
+<div class="l--frame -ar:1/1 -ar_sm -ar_md" style="--ar_sm: 3/2; --ar_md: 16/9">
+  <img src="/img/a-1.jpg" alt="" />
+</div>
+```
+
+## 関連プリミティブ
+
+- [is--layer](./is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
+- [l--center](./l--center.md) — フレーム内でテキストを中央配置する時に組み合わせる
+- [a--icon](./a--icon.md) — アイコン画像の表示（`src` 指定）

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

@@ -0,0 +1,68 @@
+# l--grid / `<Grid>`
+
+コンテンツを CSS Grid レイアウトで配置するクラス。`gtc` / `gta` / `ga` などの Grid プロパティと組み合わせて使います。
+
+## 基本情報
+
+- クラス名: `l--grid`
+- コンポーネント: `<Grid>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_grid.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--grid/
+
+## Usage
+
+### 基本的な使い方
+
+`gtc`（`grid-template-columns`）で列を定義します。
+
+```jsx
+<Grid gtc="auto 1fr auto" g="15">
+  <Center p="20" bgc="base-2">L</Center>
+  <Center p="20" bd>Center</Center>
+  <Center p="20" bgc="base-2">R</Center>
+</Grid>
+```
+
+```html
+<div class="l--grid -gtc -g:15" style="--gtc: auto 1fr auto">
+  <div class="l--center -p:20 -bgc:base-2">L</div>
+  <div class="l--center -p:20 -bd">Center</div>
+  <div class="l--center -p:20 -bgc:base-2">R</div>
+</div>
+```
+
+### ブレイクポイントでエリアを切り替える
+
+`gta`（`grid-template-areas`）と `gtc` を配列で渡すと、ブレイクポイントごとに別レイアウトを定義できます。子要素には `ga`（`grid-area`）で対応するエリア名を指定します。
+
+```jsx
+<Grid g="15" gtc={['1fr 1fr', '8em 1fr 8em']} gta={[`'main main' 'left right'`, `'left main right'`]}>
+  <Box ga="left" p="15" bgc="base-2">Left</Box>
+  <Box ga="main" p="15" bd>Center</Box>
+  <Box ga="right" p="15" bgc="base-2">Right</Box>
+</Grid>
+```
+
+### 子要素を重ねて表示する（`ga="1/1"`）
+
+`position: absolute` を使わず、`grid-area: 1/1` を複数子要素に指定することで要素を重ねられます。
+
+```jsx
+<Grid ar="16/9">
+  <Frame ga="1/1" w="100%" h="100%" pos="relative">
+    <Media src="/img/a-1.jpg" alt="" inferSize />
+    <Layer bgc="rgb(0 0 0 / 40%)" />
+  </Frame>
+  <Center ga="1/1" fz="3xl" z="1" c="white">SAMPLE TEXT</Center>
+</Grid>
+```
+
+### subgrid の活用
+
+`gtc="subgrid"` を入れ子の Grid に指定することで親 Grid のトラックを継承し、複数行を揃えたレイアウトが作れます。記事一覧やテーブル風レイアウトに活用できます。
+
+## 関連プリミティブ
+
+- [l--tileGrid](./l--tileGrid.md) — 自動繰り返しのタイル型 Grid
+- [l--columns](./l--columns.md) — 等幅カラム専用
+- [l--sideMain](./l--sideMain.md) — コンテンツ幅自動切り替え型 2 カラム