@lism-css/mcp 0.15.0 → 0.17.0

package/dist/data/guides/customize.md

@@ -9,7 +9,7 @@
 - [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
 - [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
 
-[詳細](https://lism-css.com/docs/customize/)
+[詳細](https://lism-css.com/docs/customize.md)
 
 ---
 
@@ -98,10 +98,32 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 ## `lism.config.js` でのカスタマイズ
 
-プロジェクトのルート直下に `lism.config.js` を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
 
 > **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
 
+### Vite プラグインの登録（必須）
+
+`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `lism-css/vite-plugin` を登録する必要があります。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import lismCss from 'lism-css/vite-plugin';
+
+export default defineConfig({
+  vite: {
+    plugins: [lismCss()],
+  },
+});
+```
+
+プラグインはプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
+
+```js
+plugins: [lismCss({ configPath: './config/lism.config.js' })],
+```
+
 ### フォーマット
 
 ```js
@@ -134,11 +156,16 @@ const { props, tokens } = DEFAULT_CONFIG;
 
 export default {
   props: {
-    d: { presets: [...(props.d.presets || []), 'flex', 'grid'] },
+    // 既存propにpresetsを追加
+    ta: { presets: [...(props.ta.presets || []), 'justify'] },
+    // 既存propにutility値を追加
     p: { utils: { box: '2em' } },
+    // 新しいpropの追加（filterはデフォルトに含まれない）
+    filter: { utils: { blur: 'blur(3px)' } },
   },
   tokens: {
-    bdrs: [...(tokens.bdrs || []), '5'],
+    // tokenClass:1 のpropは、tokens を追加するだけで自動でユーティリティ化される
+    lts: [...(tokens.lts || []), '2xl'],
   },
   traits: {
     isHoge: 'is--hoge',
@@ -150,15 +177,15 @@ export default {
 
 | 入力 | 出力されるクラス |
 |------|----------------|
-| `d="flex"` | `-d:flex` |
-| `d="grid"` | `-d:grid` |
+| `ta="justify"` | `-ta:justify` |
 | `p="box"` | `-p:box` |
-| `bdrs="5"` | `-bdrs:5` |
+| `filter="blur"` | `-filter:blur` |
+| `lts="2xl"` | `-lts:2xl` |
 | `isHoge` | `is--hoge` |
 
 ```jsx
-<Box p="box" d="flex" bdrs="5" isHoge>Box</Box>
-// → <div class="l--box is--hoge -p:box -d:flex -bdrs:5">Box</div>
+<Box p="box" ta="justify" filter="blur" lts="2xl" isHoge>Box</Box>
+// → <div class="l--box is--hoge -p:box -ta:justify -filter:blur -lts:2xl">Box</div>
 ```
 
 
@@ -166,7 +193,31 @@ export default {
 
 `lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
 
-### 1. CLI コマンドで CSS を再ビルド
+### 1. 軽微な追加であれば手書きで済ませる（推奨ライト）
+
+カスタムトークンが少数で済むなら、CLI 再ビルドや SCSS 構成変更まで踏み込まず、Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きで十分。
+
+```css
+/* global.css */
+@layer lism-base {
+  :root {
+    --lts--2xl: 0.15em;
+  }
+}
+
+/* Property Class は @layer を付けない */
+.-lts\:2xl {
+  letter-spacing: var(--lts--2xl);
+}
+```
+
+```jsx
+<Text lts=":2xl">...</Text>
+```
+
+トークンを体系的に拡張したい場合のみ、後述の CLI / SCSS 経由に切り替える。
+
+### 2. CLI コマンドで CSS を再ビルド
 
 ```bash
 npx lism-css build
@@ -175,46 +226,49 @@ npx lism-css build
 `lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
 
 ```css
-.-d\:flex { display: flex; }
-.-d\:grid { display: grid; }
+.-ta\:justify { text-align: justify; }
 .-p\:box { padding: 2em; }
-.-bdrs\:5 { border-radius: var(--bdrs--5); }
+.-filter\:blur { filter: blur(3px); }
+.-lts\:2xl { letter-spacing: var(--lts--2xl); }
 ```
 
 > **注意**:
-> - トークン CSS 変数（例: `--bdrs--5`）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - 生成されるのはあくまで `var(--lts--2xl)` を参照する **ユーティリティクラスまで**。参照先の CSS 変数（`:root { --lts--2xl: ... }` のような **値そのもの** の定義）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
 
-### 2. 手動で CSS を追記
+### 3. 手動で CSS を追記
 
 CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
 
 ```css
-:root { --bdrs--5: 0.125rem; }
-.is--hoge { /* ... */ }
+@layer lism-base {
+  :root {
+    --lts--2xl: 0.15em;
+  }
+}
+
+@layer lism-trait {
+  .is--hoge { /* ... */ }
+}
 ```
 
-### 3. SCSS で `lism.config.js` と整合させる
+### 4. SCSS で `lism.config.js` と整合させる
 
 SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
 
 ```scss
 @use '../path-to/node_modules/lism-css/scss/setting' with (
   $props: (
-    'd': (
-      utilities: (
-        'flex': 'flex',
-        'grid': 'grid',
-      ),
-    ),
+    'ta': ( utilities: ( 'justify': 'justify' ) ),
     'p': ( utilities: ( 'box': '2em' ) ),
-    'bdrs': ( utilities: ( '5': 'var(--bdrs--5)' ) ),
+    'filter': ( utilities: ( 'blur': 'blur(3px)' ) ),
+    'lts': ( utilities: ( '2xl': 'var(--lts--2xl)' ) ),
   )
 );
 @use '../path-to/node_modules/lism-css/scss/main';
 
 // トークン追記
 @layer lism-base {
-  :root { --bdrs--5: 0.125rem; }
+  :root { --lts--2xl: 0.15em; }
 }
 ```

package/dist/data/guides/naming.md

@@ -7,7 +7,7 @@
 - [`{prop}` の省略ルール](#prop-の省略ルール)
 - [`{value}` の省略ルール](#value-の省略ルール)
 
-[詳細](https://lism-css.com/docs/naming/)
+[詳細](https://lism-css.com/docs/naming.md)
 
 ---
 
@@ -30,9 +30,11 @@
 | `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
 | `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
 | `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
-| `-10`, `-20`, `-30`... | `0`(`none`)基準で段階的に減少 | `--o---10`, `--o---20` |
 | セマンティック名 | 上記に当てはまらない場合 | `--ar--og` |
 
+> 🎵 **例外: opacity トークン**
+> opacity（`--o--mp` / `--o--p` / `--o--pp` / `--o--ppp`）は、音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用している。`p`（piano / 弱く）の反復回数が多いほど透明度が増す構造で、「文字の反復回数で段階を表す」命名は Lism 内で opacity のみの例外。
+
 ### Property Class 用の変数
 
 | 形式 | 説明 | 例 |
@@ -71,10 +73,10 @@
 | `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
 | `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
 | `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--collapseGrid` |
+| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--cells` |
 
-- `set--` は `@lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
-- `is--` / `has--` は `@lism-trait` 層に属する。
+- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
+- `is--` / `has--` は `lism-trait` 層に属する。
 
 Property Class の形式:
 
@@ -194,15 +196,18 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 ```
 .-c:text-2        → color: var(--text-2);
 .-fz:l            → font-size: var(--fz--l);
-.-p10             → padding: var(--s10);
+.-p:10            → padding: var(--s10);
 .-fw:bold         → font-weight: var(--fw--bold);
 .-bdrs:20         → border-radius: var(--bdrs--20);
 ```
 
-トークン値が `-{NUM}` のものも、値をそのまま連結した変数名になる。
+opacity トークンは音楽記号に由来する例外的な命名で、そのままクラス化される。
 
 ```
-.-o:-10          → opacity: var(--o---10);
+.-o:mp            → opacity: var(--o--mp);
+.-o:p             → opacity: var(--o--p);
+.-o:pp            → opacity: var(--o--pp);
+.-o:ppp           → opacity: var(--o--ppp);
 ```
 
 ### 長いキーワード値の省略

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