@lism-css/mcp 0.12.0 → 0.14.0

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,71 @@
+# 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` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
+| `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
+
+## Usage
+
+### `--cols`でサイズを指定する
+
+```jsx
+<FluidCols 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>
+</FluidCols>
+```
+
+```html
+<div class="l--fluidCols -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--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
+
+```jsx
+<FluidCols 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>
+</FluidCols>
+<FluidCols cols="12em" g="20" fz="s">
+  <Lism as="div" p="20" bd>auto-fit</Lism>
+  <Lism as="div" p="20" bd>auto-fit</Lism>
+</FluidCols>
+```
+
+```html
+<div class="l--fluidCols -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--fluidCols -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--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 カラム

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

@@ -0,0 +1,102 @@
+# l--sideMain / `<SideMain>`
+
+メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる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/
+
+## 動作の仕組み
+
+- サイド側の横幅を `--sideW` で、メイン側で維持したい最小横幅を `--mainW` で指定
+- メイン側が `--mainW` を維持できる範囲内では横並びを保ち、下回ると自動で縦並びに切り替わる
+- 子要素の**一方に `is--side` を付ける必要がある**（コンポーネントでは `isSide` prop）
+
+## 専用Props
+
+| Prop | 出力 | 説明 |
+|------|------|------|
+| `sideW` | `--sideW` | サイド要素の横幅 |
+| `mainW` | `--mainW` | メイン要素で維持したい最小幅 |
+
+## HTML構造
+
+```html
+<div class="l--sideMain">
+  <div>Main Content</div>
+  <div class="is--side">Side Content</div>
+</div>
+```
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<SideMain sideW="12rem" mainW="20rem" g="20">
+  <Box p="15" bd bdc="blue">
+    <p>Main Content</p>
+    <p>メインコンテンツ本文...</p>
+  </Box>
+  <Box isSide p="15" bd bdc="red">
+    <p>Side Content</p>
+  </Box>
+</SideMain>
+```
+
+```html
+<div class="l--sideMain -g:20" style="--sideW:12rem;--mainW:20rem">
+  <div class="l--box -p:15 -bd" style="--bdc:var(--blue)">
+    <p>Main Content</p>
+    <p>メインコンテンツ本文...</p>
+  </div>
+  <div class="l--box is--side -p:15 -bd" style="--bdc:var(--red)">
+    <p>Side Content</p>
+  </div>
+</div>
+```
+
+### Side 要素の位置を反転（`-fxd:row-reverse`）
+
+`flex-direction: row-reverse` を併用することで、横並びの時だけ順序を反転できます。**横並びで左側・縦並びで下側に Side を配置**したいときに便利。
+
+```jsx
+<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
+  <Box>
+    <p>Main content...</p>
+  </Box>
+  <Box isSide bgc="blue:20%">Side Content</Box>
+</SideMain>
+```
+
+```html
+<div class="l--sideMain -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
+  <div class="l--box">
+    <p>Main content...</p>
+  </div>
+  <div class="l--box is--side">Side Content</div>
+</div>
+```
+
+## `l--grid` との使い分け
+
+- **`l--sideMain`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
+- **`l--grid`** (`<Grid gta={[...]} gtc={[...]} />`): ブレイクポイント（`sm`/`md`）で明示的に切り替えたい場合
+
+```jsx
+// ブレイクポイント依存で似たレイアウトを構築する例
+<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g="20">
+  <Box>メインコンテンツ</Box>
+  <Box ga="side">サイドコンテンツ</Box>
+</Grid>
+```
+
+## 関連プリミティブ
+
+- [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
+- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
+- [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
+- [is--container](./is--container.md) — レスポンシブ Property Class 利用時に必要

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

@@ -0,0 +1,56 @@
+# l--stack / `<Stack>`
+
+複数の要素を Flex レイアウトで縦並びに配置するクラス。`gap` で余白を管理します。
+
+## 基本情報
+
+- クラス名: `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/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Stack g="20">
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+</Stack>
+```
+
+```html
+<div class="l--stack -g:20">
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+</div>
+```
+
+### 内在的な中央寄せ（`ai="center"`）
+
+`ai="center"` を併用すると、Every Layout で言うところの**内在的な中央寄せ**（コンテンツ幅が短い要素だけ中央揃え、長い要素はそのまま）になります。
+
+```jsx
+<Stack ai="center" g="20" p="30">
+  <h3>見出し</h3>
+  <p>短いテキスト</p>
+  <p>長めのテキスト...</p>
+</Stack>
+```
+
+```html
+<div class="l--stack -ai:center -p:30 -g:20">
+  <h3>見出し</h3>
+  <p>短いテキスト</p>
+  <p>長めのテキスト...</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flex](./l--flex.md) — 汎用 Flex 横並び
+- [l--flow](./l--flow.md) — `margin-block-start` で余白を管理するテキスト向けフロー
+- [l--cluster](./l--cluster.md) — 折り返し前提の横並び

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

@@ -0,0 +1,69 @@
+# l--switchCols / `<SwitchCols>`
+
+複数列 ↔ 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/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 |
+|------|--------|------|
+| `breakSize` | `--breakSize` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
+
+## Usage
+
+### デフォルト幅で利用する
+
+```jsx
+<SwitchCols 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>
+```
+
+```html
+<div class="l--switchCols -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>
+</div>
+```
+
+### `breakSize` の指定
+
+```jsx
+<SwitchCols breakSize="s" g="20">
+  <div class="-bgc:base-2 -p:20">Box</div>
+  <div class="-bgc:base-2 -p:20">Box</div>
+</SwitchCols>
+```
+
+```html
+<div class="l--switchCols -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>
+```
+
+### `flex-grow` で比率を調整
+
+子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
+
+```jsx
+<SwitchCols 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>
+```
+
+## 関連プリミティブ
+
+- [l--fluidCols](./l--fluidCols.md) — 最小幅ベースの自動段組
+- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
+- [l--sideMain](./l--sideMain.md) — コンテンツ幅基準の2カラム切り替え