@lism-css/mcp 0.15.0 → 0.15.1

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

@@ -8,9 +8,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 
 - [プレフィックス一覧](#プレフィックス一覧)
 - [Layout Primitive（`l--`）](#layout-primitivel--)
+  - [カラムレイアウト Primitive の使い分けガイド](#カラムレイアウト-primitive-の使い分けガイド)
 - [Atomic Primitive（`a--`）](#atomic-primitivea--)
 
-[詳細](https://lism-css.com/docs/primitives/)
+[詳細](https://lism-css.com/docs/primitives.md)
 
 ---
 
@@ -40,13 +41,87 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 | `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` で制御 |
+| `l--autoColumns` | ブレイクポイントに依存せず、自動段組のできる流動カラムレイアウト。`--cols: 16em`のようにして最小維持幅を指定できる。 |
+| `l--withSide` | 画像とコンテンツ、メインエリアとサイドバーなどの「"Side" + "Main"」に分かれ、横並びと縦並びが切り替わるレイアウト。"Main"が`--mainW`で指定したサイズ以上の横幅を維持できる範囲内で横並びを維持し、下回る場合は縦並びへ自動で切り替わる。横並びの間の"Side"の横幅は`--sideW`で指定する。 |
+| `l--switchColumns` | 任意のサイズで一括カラム切り替えができるカラムレイアウト。`--breakSize` で制御 |
 
 それぞれ対応するLismコンポーネント（`<Flex>`, `<Stack>`, `<Cluster>` 等）があります。
 
 
+### カラムレイアウト Primitive の使い分けガイド
+
+「カラムを並べる」用途で使える Primitive は複数あります。意図に応じて使い分けます。
+
+#### 比較表
+
+各 Primitive がどの用途に向いているか：
+
+| やりたいこと | `l--columns` | `l--autoColumns` | `l--switchColumns` | `l--withSide` | `l--grid` |
+|---|---|---|---|---|---|
+| 等幅 N 列 | ◯ | ◯ | ✗ | ✗ | △ |
+| 横並び ↔ 1 列の一括切替 | ◯ | ✗ | ◯ | ✗ | △ |
+| カラム最小幅で自動折返し | ✗ | ◯ | ✗ | ✗ | △ |
+| サイド + メイン（非対称 2 カラム） | △ | ✗ | ✗ | ◯ | △ |
+| BP で列数切替 | ◯ | ✗ | ✗ | ✗ | △ |
+| 非BPでのレスポンシブ | ✗ | ◯ | ◯ | ◯ | ✗ |
+
+凡例: ◯ 適している / △ 可能だが冗長 / ✗ 不向き
+
+#### 選び方
+
+##### 1. 等幅 N 列、または列数を BP で切り替えたい
+
+- **推奨**: `l--columns` (`<Columns cols={[1, 2, 3]} />`)
+- **理由**: `cols={3}` で固定列数、`cols` 配列で BP ごとの列数を宣言的に書ける
+- **代替**:
+  - `l--grid`: `gtc="repeat(3, 1fr)"` で書けるが、等幅 N 列や列数切替だけなら Columns のほうが簡潔
+  - `l--tileGrid`: 行も指定したい時はこちら
+- **要件**: BP 値を使うため祖先に `is--container` が必要
+
+##### 2. カラム幅が指定値を下回ったら自動で折り返したい
+
+- **推奨**: `l--autoColumns` (`<AutoColumns cols="20rem" />`)
+- **理由**: BP に依存せず、カラム最小幅基準で `auto-fit` / `auto-fill` の挙動を簡潔に書ける
+- **典型例**: カード一覧、商品リスト、ロゴ並び等
+- **代替**:
+  - `l--grid`: `gtc="repeat(auto-fit, minmax(20rem, 1fr))"` を直書きできるが冗長
+
+##### 3. 「横並び」と「縦 1 列」を一括で切り替えたい（多段階の列数変化が不要）
+
+- **推奨**: `l--switchColumns` (`<SwitchColumns breakSize="s" />`)
+- **理由**: 自身の利用可能幅が `breakSize` を下回ったら一気に縦並びに切り替わる。BP / CQ 設計は不要だが、`breakSize` で切り替え幅を指定する
+- **代替**:
+  - `l--columns cols={[1, 2]}`: BP で切り替える場合
+  - `l--autoColumns`: 段階的に列数が変わってよい場合
+
+##### 4. サイド + メイン（非対称 2 カラム）で、コンテンツ幅で自動切替したい
+
+- **推奨**: `l--withSide` (`<WithSide sideW="..." mainW="..." />`)
+- **理由**: メイン側が `mainW` を維持できなくなったら自動で縦並びに。BP 設計不要
+- **典型例**: 画像 + テキスト、メインエリア + サイドバー、メディアとテキストが交互に並ぶ繰り返しブロック（メディア側を `isSide` として先に置き、`fxd="row-reverse"` で交互配置すると、縦並び時はメディア側を上に統一できる）
+- **代替**:
+  - `l--grid` + `gta` 配列: BP で明示的に切替したい場合は Grid + `gta` のテンプレ切替で同じ見た目を実現可能（withSide のほうが宣言的でシンプル）
+
+##### 5. 行 × 列を指定した固定タイルレイアウト
+
+- **推奨**: `l--tileGrid` (`<TileGrid cols="3" rows="2" />`)
+- **理由**: カラムレイアウトというより、行数も固定したい場合の Grid 派生。`cols` / `rows` で `repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr))` を簡潔に書ける
+- **代替**:
+  - `l--columns`: 列だけでよい（行は内容で自動決定）場合
+  - `l--grid`: トラックを個別に細かく制御したい場合
+
+##### 6. Grid テンプレートを主目的にした複雑な配置
+
+- **推奨**: `l--grid` (`<Grid gtc="..." gta="..." />`)
+- **理由**: `gta` / `gtc` 自体は Property Class として他の Primitive にも指定できるが、Grid テンプレートを主軸にするなら `l--grid` が素直
+- **典型例**: 名前付きエリア配置、要素の重ね合わせ（`ga="1/1"`）、subgrid
+
+#### 補足
+
+- 各 Primitive の詳細・使用例は [primitives/](./primitives/) 配下の個別ファイルを参照
+- レスポンシブな値（配列指定）を使う場合は祖先要素に `is--container` が必須（[prop-responsive.md](./prop-responsive.md)）
+
+
 ## Atomic Primitive（`a--`）
 
 レイアウト構成物の最小単位となる Primitive です。

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

@@ -6,7 +6,7 @@
 
 - クラス名: `a--decorator`
 - コンポーネント: `<Decorator>`
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--decorator/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/a--decorator.md
 
 ## 専用Props
 

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

@@ -7,7 +7,7 @@
 - クラス名: `a--divider`
 - コンポーネント: `<Divider>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_divider.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--divider/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/a--divider.md
 
 ## Usage
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/a--icon.md
 
 ## 出力されるHTML構造
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/a--spacer.md
 
 ## 専用Props
 

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

@@ -0,0 +1,71 @@
+# l--autoColumns / `<AutoColumns>`
+
+カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
+
+## 基本情報
+
+- クラス名: `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
+
+## 専用Props
+
+| Prop | CSS変数 | デフォルト | 説明 |
+|------|--------|-----------|------|
+| `cols` | `--cols` | `20rem` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
+| `autoFill` | `--autoMode` | `auto-fit` | `auto-fill` モードに切り替え |
+
+## 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-fill`を使用する
+
+`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
+
+```jsx
+<AutoColumns cols="12em" autoFill 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" 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; --autoMode:auto-fill">
+  <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">
+  <div class="-p:20 -bd">auto-fit</div>
+  <div class="-p:20 -bd">auto-fit</div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
+- [l--switchColumns](./l--switchColumns.md) — 複数列 ↔ 1列の2段階切り替え
+- [l--withSide](./l--withSide.md) — メイン幅ベースの2カラム自動切替

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

@@ -6,7 +6,7 @@
 
 - クラス名: `l--box`
 - コンポーネント: `<Box>`
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--box/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--box.md
 
 ## Usage
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--center.md
 
 ## 動作の仕組み
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--cluster.md
 
 ## Usage
 
@@ -35,4 +35,4 @@
 
 - [l--flex](./l--flex.md) — 汎用 Flex 横並び（折り返しなしが基本）
 - [l--stack](./l--stack.md) — Flex 縦並び
-- [l--switchCols](./l--switchCols.md) — ブレイクポイントで縦横切り替えるカラム
+- [l--switchColumns](./l--switchColumns.md) — ブレイクポイントで縦横切り替えるカラム

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--columns.md
 
 ## 専用Props
 
@@ -68,5 +68,5 @@
 ## 関連プリミティブ
 
 - [l--tileGrid](./l--tileGrid.md) — 列数×行数を指定する均等タイル
-- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
-- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列切り替え
+- [l--autoColumns](./l--autoColumns.md) — カラム幅ベースの自動段組
+- [l--switchColumns](./l--switchColumns.md) — 複数列 ↔ 1列切り替え

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flex.md
 
 ## Usage
 

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

@@ -7,15 +7,15 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flow.md
 
 ## 余白の仕組み
 
-`l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h2`〜`h6`）のみ余白が大きくなる（`--flow-hScale` で調整可能）。
+`l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h1`〜`h6`）のみ余白が大きくなり、`calc(var(--flow) * 2 + 0.5em)` で計算されます。
 
 | クラス | 余白量 |
 |--------|-------|
-| `.l--flow` | `--flow--base`（`--s30`） |
+| `l--flow` | `--flow--base`（`--s30`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
@@ -23,7 +23,7 @@
 
 | Prop | 説明 |
 |------|------|
-| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `.-flow:{value}` クラスが付与、任意値を渡すと `.-flow:` + `style="--flow:..."` が出力される |
+| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `-flow:{value}` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
 
 ## Usage
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--frame.md
 
 ## 専用Props
 

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

@@ -7,7 +7,7 @@
 - クラス名: `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/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--grid.md
 
 ## Usage
 
@@ -65,4 +65,4 @@
 
 - [l--tileGrid](./l--tileGrid.md) — 自動繰り返しのタイル型 Grid
 - [l--columns](./l--columns.md) — 等幅カラム専用
-- [l--sideMain](./l--sideMain.md) — コンテンツ幅自動切り替え型 2 カラム
+- [l--withSide](./l--withSide.md) — コンテンツ幅自動切り替え型 2 カラム

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

@@ -7,7 +7,7 @@
 - クラス名: `l--stack`
 - コンポーネント: `<Stack>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_stack.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--stack/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--stack.md
 
 ## Usage
 

package/dist/data/guides/primitives/{l--switchCols.md → l--switchColumns.md}

@@ -1,34 +1,34 @@
-# l--switchCols / `<SwitchCols>`
+# l--switchColumns / `<SwitchColumns>`
 
 複数列 ↔ 1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラス。Flexbox ベースで、親コンテナ幅に応じて自動的に折り返します。
 
 ## 基本情報
 
-- クラス名: `l--switchCols`
-- コンポーネント: `<SwitchCols>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchCols.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--switchCols/
+- クラス名: `l--switchColumns`
+- コンポーネント: `<SwitchColumns>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchColumns.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--switchColumns.md
 
 ## 専用Props
 
-| Prop | CSS変数 | 説明 |
-|------|--------|------|
-| `breakSize` | `--breakSize` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
+| Prop | CSS変数 | デフォルト | 説明 |
+|------|--------|-----------|------|
+| `breakSize` | `--breakSize` | `var(--sz--xs)` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
 
 ## Usage
 
 ### デフォルト幅で利用する
 
 ```jsx
-<SwitchCols g="20">
+<SwitchColumns g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20">
+<div class="l--switchColumns -g:20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
@@ -38,14 +38,14 @@
 ### `breakSize` の指定
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20" style="--breakSize: var(--sz--s)">
+<div class="l--switchColumns -g:20" style="--breakSize: var(--sz--s)">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
 </div>
@@ -56,14 +56,14 @@
 子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ## 関連プリミティブ
 
-- [l--fluidCols](./l--fluidCols.md) — 最小幅ベースの自動段組
+- [l--autoColumns](./l--autoColumns.md) — 最小幅ベースの自動段組
 - [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
-- [l--sideMain](./l--sideMain.md) — コンテンツ幅基準の2カラム切り替え
+- [l--withSide](./l--withSide.md) — コンテンツ幅基準の2カラム切り替え

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

@@ -7,7 +7,7 @@
 - クラス名: `l--tileGrid`
 - コンポーネント: `<TileGrid>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_tileGrid.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--tileGrid/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--tileGrid.md
 
 ## 専用Props
 
@@ -57,5 +57,5 @@
 ## 関連プリミティブ
 
 - [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム
-- [l--fluidCols](./l--fluidCols.md) — 自動折り返し型段組
+- [l--autoColumns](./l--autoColumns.md) — 自動折り返し型段組
 - [l--grid](./l--grid.md) — 汎用 CSS Grid

package/dist/data/guides/primitives/{l--sideMain.md → l--withSide.md}

@@ -1,13 +1,13 @@
-# l--sideMain / `<SideMain>`
+# l--withSide / `<WithSide>`
 
 メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる2カラムレイアウト**。「画像 + コンテンツ」「メインエリア + サイドバー」などに活用できる。
 
 ## 基本情報
 
-- クラス名: `l--sideMain`
-- コンポーネント: `<SideMain>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_sideMain.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--sideMain/
+- クラス名: `l--withSide`
+- コンポーネント: `<WithSide>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_withSide.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--withSide.md
 
 ## 動作の仕組み
 
@@ -17,15 +17,15 @@
 
 ## 専用Props
 
-| Prop | 出力 | 説明 |
-|------|------|------|
-| `sideW` | `--sideW` | サイド要素の横幅 |
-| `mainW` | `--mainW` | メイン要素で維持したい最小幅 |
+| Prop | 出力 | デフォルト | 説明 |
+|------|------|-----------|------|
+| `sideW` | `--sideW` | `auto` | サイド要素の横幅 |
+| `mainW` | `--mainW` | `max(20rem, 50%)` | メイン要素で維持したい最小幅 |
 
 ## HTML構造
 
 ```html
-<div class="l--sideMain">
+<div class="l--withSide">
   <div>Main Content</div>
   <div class="is--side">Side Content</div>
 </div>
@@ -36,7 +36,7 @@
 ### 基本的な使い方
 
 ```jsx
-<SideMain sideW="12rem" mainW="20rem" g="20">
+<WithSide sideW="12rem" mainW="20rem" g="20">
   <Box p="15" bd bdc="blue">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -44,11 +44,11 @@
   <Box isSide p="15" bd bdc="red">
     <p>Side Content</p>
   </Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -g:20" style="--sideW:12rem;--mainW:20rem">
+<div class="l--withSide -g:20" style="--sideW:12rem;--mainW:20rem">
   <div class="l--box -p:15 -bd" style="--bdc:var(--blue)">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -64,16 +64,16 @@
 `flex-direction: row-reverse` を併用することで、横並びの時だけ順序を反転できます。**横並びで左側・縦並びで下側に Side を配置**したいときに便利。
 
 ```jsx
-<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
+<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
   <Box>
     <p>Main content...</p>
   </Box>
   <Box isSide bgc="blue:20%">Side Content</Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
+<div class="l--withSide -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
   <div class="l--box">
     <p>Main content...</p>
   </div>
@@ -81,9 +81,31 @@
 </div>
 ```
 
+### メディアとテキストが交互に並ぶレイアウト
+
+`l--withSide` は「メディア + テキスト」のペアを複数並べて、横並びの時はメディアの位置（左右）が交互に切り替わりつつも、縦並びの時はメディアが上側に統一されるレイアウトにも活用できる。
+
+```jsx
+<Stack isContainer g="40">
+  <WithSide sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+
+  <WithSide fxd="row-reverse" sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+</Stack>
+```
+
 ## `l--grid` との使い分け
 
-- **`l--sideMain`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
+- **`l--withSide`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
 - **`l--grid`** (`<Grid gta={[...]} gtc={[...]} />`): ブレイクポイント（`sm`/`md`）で明示的に切り替えたい場合
 
 ```jsx
@@ -97,6 +119,6 @@
 ## 関連プリミティブ
 
 - [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
-- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
-- [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
+- [l--autoColumns](./l--autoColumns.md) — カラム幅ベースの自動段組
+- [l--switchColumns](./l--switchColumns.md) — ブレイクポイント一括切り替え型カラム
 - [is--container](../trait-class/is--container.md) — レスポンシブ Property Class 利用時に必要

package/dist/data/guides/prop-responsive.md

@@ -8,7 +8,7 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive/)
+[詳細](https://lism-css.com/docs/responsive.md)
 
 ---
 

package/dist/data/guides/property-class/bd.md

@@ -7,11 +7,11 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 - クラス名: `-bd` / `-bd-{side}` / `-bds:*` / `-bdc:*` / `-bdw` など
 - Lism props: `bd`, `bd-{side}`, `bds`, `bdc`, `bdw`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_border.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/property-class/bd/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/bd.md
 
 ## 仕組み
 
-`.-bd` または `.-bd-{side}` クラスが付くと、以下の初期値がセットされる。
+`-bd` または `-bd-{side}` クラスが付くと、以下の初期値がセットされる。
 
 ```scss
 :where(.-bd, [class*=" -bd-"], [class^="-bd-"]) {
@@ -27,7 +27,7 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 /* ...各 side ごとに style を適用 */
 ```
 
-`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `.-bd` または `.-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
+`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `-bd` または `-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
 
 ## 方向指定クラス
 
@@ -123,5 +123,5 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 
 ## 関連
 
-- [`-bdrs`](https://lism-css.com/docs/property-class/) — 角丸（`border-radius`）
+- [`-bdrs`](https://lism-css.com/docs/property-class.md) — 角丸（`border-radius`）
 - [`-bd-{side}` + `has--gutter`](../trait-class/has--gutter.md) — セクション区切りに使うと相性が良い