@lism-css/mcp 0.14.0 → 0.15.1

package/dist/data/guides/customize.md

@@ -0,0 +1,220 @@
+# カスタマイズ
+
+`lism-css` パッケージから読み込む CSS や、コンポーネントが受け付ける Props の挙動を上書きしてカスタマイズする方法をまとめます。
+
+## TOC
+
+- [`@layer` をオフにする](#layer-をオフにする)
+- [SCSS でのカスタマイズ](#scss-でのカスタマイズ)
+- [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
+- [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
+
+[詳細](https://lism-css.com/docs/customize.md)
+
+---
+
+## `@layer` をオフにする
+
+`lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
+
+```js
+// 通常
+import 'lism-css/main.css';
+
+// @layer なしのCSSを読み込む場合はこちら
+import 'lism-css/main_no_layer.css';
+```
+
+`@layer` のオン・オフは SCSS 変数では管理されません。**読み込むファイル自体を切り替える**点に注意してください。
+
+
+## SCSS でのカスタマイズ
+
+`lism-css/scss/_setting.scss` で定義された変数を `@use ... with (...)` で上書きできます。
+上書き定義をしてから `lism-css/scss/main.scss` を読み込むことでカスタマイズが反映されます。
+
+ソース: [`_setting.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/_setting.scss)
+
+### 上書き可能な変数
+
+| 変数 | 用途 | デフォルト |
+|------|------|-----------|
+| `$breakpoints` | ブレイクポイント数値の定義 | `('sm': '480px', 'md': '800px', 'lg': '1120px')` |
+| `$common_support_bp` | 主要な Property Class が共通サポートするブレイクポイント上限 | `'md'` |
+| `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
+| `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
+| `$props` | Property Class ごとの個別出力設定 | `prop-config` のデフォルト |
+
+### 基本フォーマット
+
+```scss
+// 1. 設定変数を上書き
+@use '../path-to/node_modules/lism-css/scss/setting' with (
+  $breakpoints: (
+    'sm': '400px',  // 個別キーの上書き可
+  ),
+  $common_support_bp: 'lg',
+  $is_container_query: 0,
+  $default_important: 1,
+  $props: (
+    // 個別 Prop の設定（後述）
+  )
+);
+
+// 2. main.scss を読み込む（@layer なしにする場合は main_no_layer）
+@use '../path-to/node_modules/lism-css/scss/main';
+```
+
+> Astro の場合、`../path-to/node_modules/` 部分は不要で `lism-css/scss/setting` のように書けます。
+
+### `$props` の個別カスタマイズ
+
+各 Property Class について、出力範囲やユーティリティクラスを追加できます。
+
+```scss
+@use '../path-to/node_modules/lism-css/scss/setting' with (
+  $props: (
+    'fz': (
+      important: 1,        // .-fz:* に !important を付与
+    ),
+    'h': (
+      bp: 0,               // .-h_sm 等のブレイクポイント版を出力しない
+    ),
+    'p': (
+      bp: 'lg',            // .-p_sm / .-p_md / .-p_lg まで出力
+      utilities: (
+        'box': '2em',      // .-p:box { --p: 2em } を追加
+      ),
+    ),
+  )
+);
+@use '../path-to/node_modules/lism-css/scss/main';
+```
+
+### 注意点
+
+SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体 CSS と読み込み順がずれる可能性があります。意図しない上書きが起きないよう、レイヤー順を確認してください。
+
+
+## `lism.config.js` でのカスタマイズ
+
+プロジェクトのルート直下に `lism.config.js` を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+
+> **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
+
+### フォーマット
+
+```js
+// lism.config.js
+export default {
+  props: {
+    // Property Class の出力をカスタマイズ
+  },
+  tokens: {
+    // トークン値を追加
+  },
+  traits: {
+    // Trait（is--* / has--*）用の props を追加
+  },
+};
+```
+
+デフォルト値は以下を参照：
+
+- props: [`config/defaults/props.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
+- tokens: [`config/defaults/tokens.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/tokens.ts)
+- traits: [`config/defaults/traits.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/traits.ts)
+
+### カスタマイズ例
+
+```js
+// lism.config.js
+import DEFAULT_CONFIG from 'lism-css/default-config';
+const { props, tokens } = DEFAULT_CONFIG;
+
+export default {
+  props: {
+    d: { presets: [...(props.d.presets || []), 'flex', 'grid'] },
+    p: { utils: { box: '2em' } },
+  },
+  tokens: {
+    bdrs: [...(tokens.bdrs || []), '5'],
+  },
+  traits: {
+    isHoge: 'is--hoge',
+  },
+};
+```
+
+これによってコンポーネント側で次のような挙動が追加されます：
+
+| 入力 | 出力されるクラス |
+|------|----------------|
+| `d="flex"` | `-d:flex` |
+| `d="grid"` | `-d:grid` |
+| `p="box"` | `-p:box` |
+| `bdrs="5"` | `-bdrs:5` |
+| `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>
+```
+
+
+## 追加スタイルを読み込ませる方法
+
+`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
+
+### 1. CLI コマンドで CSS を再ビルド
+
+```bash
+npx lism-css build
+```
+
+`lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
+
+```css
+.-d\:flex { display: flex; }
+.-d\:grid { display: grid; }
+.-p\:box { padding: 2em; }
+.-bdrs\:5 { border-radius: var(--bdrs--5); }
+```
+
+> **注意**:
+> - トークン CSS 変数（例: `--bdrs--5`）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
+
+### 2. 手動で CSS を追記
+
+CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
+
+```css
+:root { --bdrs--5: 0.125rem; }
+.is--hoge { /* ... */ }
+```
+
+### 3. 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',
+      ),
+    ),
+    'p': ( utilities: ( 'box': '2em' ) ),
+    'bdrs': ( utilities: ( '5': 'var(--bdrs--5)' ) ),
+  )
+);
+@use '../path-to/node_modules/lism-css/scss/main';
+
+// トークン追記
+@layer lism-base {
+  :root { --bdrs--5: 0.125rem; }
+}
+```

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 用の変数
 
 | 形式 | 説明 | 例 |
@@ -45,7 +47,7 @@
 | 形式 | 用途 | 例 |
 |------|------|-----|
 | `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
-| `--{propName}` | プリミティブの主要機能変数 | `--sideW`, `--mainW` |
+| `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
 | `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
 | `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
 
@@ -57,17 +59,31 @@
 - Component: `c--`
 - Atomic Primitives: `a--`
 - Layout Primitives: `l--`
-- Trait Primitives: `is--`
+- Trait（役割宣言）: `is--`
+- Trait（機能付与）: `has--`
 - Set Class: `set--`
 - Utility Class: `u--`
 
 プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
 
+**使い分けの判断軸:**
+
+| プレフィックス | 責務 | 代表例 |
+|---|---|---|
+| `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--divide`, `u--cells` |
+
+- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
+- `is--` / `has--` は `lism-trait` 層に属する。
+
 Property Class の形式:
 
 - 特定の値とセット: `-{prop}:{value}`
 - `--{prop}` 変数を受け取る: `-{prop}`
 - ブレークポイント値を受け取る: `-{prop}_{bp}`
+- 修飾子 + Property Class 合成: `-{modifier}:-{prop}`（例: `-hov:-c` は `-c` の hover バリアント）
 
 
 ## `{prop}` の省略ルール
@@ -180,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

@@ -1,16 +1,17 @@
 # Primitive クラス
 
-Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
+Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`l--` / `a--`）を提供します。
+これらは `@layer lism-primitive` に属します（サブレイヤーは `layout` / `atomic`）。
 
 
 ## TOC
 
 - [プレフィックス一覧](#プレフィックス一覧)
-- [Trait Primitive（`is--`）](#trait-primitiveis--)
 - [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)
 
 ---
 
@@ -18,33 +19,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 
 | プレフィックス | 種類 | サブレイヤー | 役割 |
 |--------------|------|------------|------|
-| `is--` | Trait Primitive | `lism-primitive.trait` | 要素に静的な構造的特性を付与する汎用クラス |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
 
-**併用ルール:**
-- `is--` は他のすべての Primitive と併用可能（複数の `is--` 同士もOK）
-- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
-- `a--` / `l--` には `variant` の BEM 展開は適用されない（BEM Modifier は `c--` 専用）
-
-
-## Trait Primitive（`is--`）
-
-[詳細](https://lism-css.com/docs/primitives/#trait-primitives)
-
-要素に**静的な構造的特性 (trait)** を付与するクラスです。他の Primitive / Component と自由に組み合わせられます。
-
-| クラス | 用途 |
-|--------|------|
-| `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
-| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
-| `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
-| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
-| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
-| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
-| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
-
-Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。（例: `<Lism isContainer>`)
+併用ルールは [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
 
 
 ## Layout Primitive（`l--`）
@@ -63,13 +41,87 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
 | `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
 
@@ -40,4 +40,4 @@
 
 - [a--spacer](./a--spacer.md) — 要素間スペース
 - [a--divider](./a--divider.md) — 区切り線
-- [is--layer](./is--layer.md) — `position: absolute` のオーバーレイ
+- [is--layer](../trait-class/is--layer.md) — `position: absolute` のオーバーレイ

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
 
@@ -28,4 +28,4 @@
 
 - [l--flow](./l--flow.md) — テキスト主体のフローレイアウト
 - [l--stack](./l--stack.md) — Flex 縦並び
-- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー
+- [is--wrapper](../trait-class/is--wrapper.md) — コンテンツ幅ラッパー

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
 
@@ -51,7 +51,7 @@ Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`,
 
 ### 子要素の Flex プロパティ
 
-子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxs`（flex-shrink）などで個別制御できます。
+子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxsh`（flex-shrink）などで個別制御できます。
 
 ```jsx
 <Flex g="20">