@lism-css/mcp 0.23.0 → 0.26.0

package/dist/data/guides/naming.md

@@ -18,7 +18,7 @@
 ### トークン変数
 
 | 種類 | 形式 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
 | カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
 | 余白 | `--s{Token}` | `--s10`, `--s40` |
@@ -26,7 +26,7 @@
 トークンのバリエーション:
 
 | 表記 | 条件 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
 | `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
 | `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
@@ -38,45 +38,28 @@
 ### Property Class 用の変数
 
 | 形式 | 説明 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--m` |
 | `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
 
 ### その他の変数
 
 | 形式 | 用途 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
 | `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
 | `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
 | `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
 
-
 ## クラスの命名規則
 
-プレフィックスとクラス分類の対応:
-
-- Component: `c--`
-- Atomic Primitives: `a--`
-- Layout Primitives: `l--`
-- Trait（役割宣言）: `is--`
-- Trait（機能付与）: `has--`
-- Set Class: `set--`
-- Utility Class: `u--`
-
-プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
+クラス分類ごとのプレフィックス（`b--`/`c--`/`a--`/`l--`/`is--`/`has--`/`set--`/`u--`）と各分類の責務・所属レイヤーは、[css-rules.md](./css-rules.md#クラス分類とプレフィックス)の分類表を正本とします。ユーザー定義クラスの2分類（`b--`/`c--`）の使い分けは[css-rules.md](./css-rules.md#独自クラスの選び方2分類)を参照してください。
 
-**使い分けの判断軸:**
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。`is--`/`has--`/`set--`/`u--`にも同じ規則が適用されます。ページ固有の要素は、ページslug等を含めると名前だけで由来がわかります（例: `c--landingHero`）。
 
-| プレフィックス | 責務 | 代表例 |
-|---|---|---|
-| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--hov`, `set--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--enclose` |
+### `c--*`/`b--*`の命名
 
-- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
-- `is--` / `has--` は `lism-trait` 層に属する。
+Block/Element/Modifierの形式（Block=`c--{name}` / `b--{name}`、Element=`_`ひとつ、Modifier=`--`ふたつ）は[css-rules.md の独自クラスの選び方](./css-rules.md#独自クラスの選び方2分類)を参照。Block名はcamelCaseを第一候補にし、既存コードがアンダースコア区切りならそれに合わせます。単語区切りのハイフン（`c--feature-card`）とBEM風の`__`は使いません（NG→OK例は[antipatterns-layout.md](./antipatterns-layout.md#クラス名の命名ミス)を参照）。
 
 Property Class の形式:
 
@@ -85,7 +68,6 @@ Property Class の形式:
 - ブレークポイント値を受け取る: `-{prop}_{bp}`
 - 修飾子 + Property Class 合成: `-{modifier}:-{prop}`（例: `-hov:-c` は `-c` の hover バリアント）
 
-
 ## `{prop}` の省略ルール
 
 基本は [Emmet](https://docs.emmet.io/cheat-sheet/) 準拠。
@@ -97,15 +79,15 @@ Property Class の形式:
 1文字に省略する主要プロパティは以下の通り（このリストが全て）。
 
 | 省略 | プロパティ | 省略 | プロパティ |
-|------|-----------|------|-----------|
-| `p` | `padding`    | `i` | `inset` |
-| `m` | `margin`     | `t` | `top` |
-| `g` | `gap`        | `b` | `bottom` |
-| `c` | `color`      | `l` | `left` |
-| `f` | `font`       | `r` | `right` |
-| `w` | `width`      | `o` | `opacity` |
-| `h` | `height`     | `v` | `visibility` |
-| `d` | `display`    | `z` | `z-index` |
+| --- | --- | --- | --- |
+| `p` | `padding` | `i` | `inset` |
+| `m` | `margin` | `t` | `top` |
+| `g` | `gap` | `b` | `bottom` |
+| `c` | `color` | `l` | `left` |
+| `f` | `font` | `r` | `right` |
+| `w` | `width` | `o` | `opacity` |
+| `h` | `height` | `v` | `visibility` |
+| `d` | `display` | `z` | `z-index` |
 
 Emmet と異なるのは `o` (`opacity`) のみ。
 
@@ -114,7 +96,7 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 #### 基本形式: 「グループ略称」+「サブプロパティ名の省略形」
 
 | CSS プロパティ | Prop |
-|-------------|------|
+| --- | --- |
 | font-size | `fz` |
 | font-weight | `fw` |
 | background-color | `bgc` |
@@ -130,7 +112,7 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 `inline-start`/`inline-end`は`is`/`ie`ではなく、すでに普及しているCSSフレームワークの慣習に沿って`s`/`e`とする。
 
 | 方向 | サフィックス | 例 |
-|------|-----------|-----|
+| --- | --- | --- |
 | physical | `-t` / `-b` / `-l` / `-r` | `bd-t`, `bd-b`, `bd-l`, `bd-r` |
 | inline / block | `-x` / `-y` | `bd-x`, `bd-y` |
 | inline-start / end | `-s` / `-e` | `bd-s`, `bd-e`, `ps`, `pe`, `ms`, `me`, `i-s`, `i-e` |
@@ -154,7 +136,7 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 2. ハイフン繋がり、または6文字以上: Emmet形式または認識しやすい範囲で省略
 
 | CSS プロパティ | Prop | 分類 |
-|-------------|------|------|
+| --- | --- | --- |
 | float | `float` | そのまま |
 | order | `order` | そのまま |
 | position | `pos` | 省略 |
@@ -170,13 +152,12 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 グループを持たない1文字プロパティや、方向プロパティのみをサブプロパティに持つ場合は、衝突しない範囲で再利用可。
 
 | 1文字 Prop | 再利用先 | 展開例 |
-|-----------|---------|--------|
+| --- | --- | --- |
 | `t`(`top`) | `text-*` | `ta`(`text-align`) |
 | `l`(`left`) | `line-*` | `lh`(`line-height`) |
 | `w`(`width`) | `writing-*` | `wm`(`writing-mode`) |
 | `p`(`padding`) | `place-*` | `pi`(`place-items`) |
 
-
 ## `{value}` の省略ルール
 
 ### 基本: CSS の実値をそのまま使う
@@ -218,7 +199,7 @@ opacity トークンは音楽記号に由来する例外的な命名で、その
 6文字以上かつ省略しても意味が通るものは省略可:
 
 | 実際の値 | 省略名 | クラスの例 |
-|--------|------------|-----|
+| --- | --- | --- |
 | `uppercase` | `upper` | `-tt:upper` |
 | `lowercase` | `lower` | `-tt:lower` |
 | `fit-content` | `fit` | `-w:fit`, `-h:fit` |

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

@@ -18,11 +18,11 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 ## プレフィックス一覧
 
 | プレフィックス | 種類 | サブレイヤー | 役割 |
-|--------------|------|------------|------|
+| --- | --- | --- | --- |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
 
-併用ルールは [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
+併用ルールは [css-rules.md](./css-rules.md#クラス分類とプレフィックス) を参照してください。
 
 
 ## Layout Primitive（`l--`）
@@ -30,7 +30,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 レイアウト構造を定義するメインの Primitive 群です。
 
 | クラス | 用途 |
-|--------|-------------|
+| --- | --- |
 | `l--box` | 汎用ボックス |
 | `l--flex` | 横方向の基本的なFlexboxレイアウト |
 | `l--stack` | 縦方向の縦積みFlexboxレイアウト（`flex-direction: column`）。 |
@@ -57,7 +57,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 各 Primitive がどの用途に向いているか：
 
 | やりたいこと | `l--columns` | `l--autoColumns` | `l--switchColumns` | `l--withSide` | `l--grid` |
-|---|---|---|---|---|---|
+| --- | --- | --- | --- | --- | --- |
 | 等幅 N 列 | ◯ | ◯ | ✗ | ✗ | △ |
 | 横並び ↔ 1 列の一括切替 | ◯ | ✗ | ◯ | ✗ | △ |
 | カラム最小幅で自動折返し | ✗ | ◯ | ✗ | ✗ | △ |
@@ -127,7 +127,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 レイアウト構成物の最小単位となる Primitive です。
 
 | クラス | 用途 |
-|--------|------|
+| --- | --- |
 | `a--icon` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
 | `a--divider` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
 | `a--spacer` | 空白要素（`min-height: 1px; min-width: 1px`） |

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

@@ -2,40 +2,14 @@
 
 コンテンツを装飾するための空要素として使うクラス。`<Decorator>` は `<Lism atomic="decorator" aria-hidden="true" />` のエイリアスとして用意されています。
 
-## 基本情報
-
-- クラス名: `a--decorator`
-- コンポーネント: `<Decorator>`
-- 公式ドキュメント: https://lism-css.com/docs/primitives/a--decorator.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--decorator.md
 
 ## 専用Props
 
 | Prop | 説明 |
-|------|------|
+| --- | --- |
 | `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
 
-## Usage
-
-### 装飾に使用する例（コーナー装飾）
-
-`pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
-
-```jsx
-<Box p="30" pos="relative">
-  <p>本文テキスト...</p>
-  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
-  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be bdc="current" />
-</Box>
-```
-
-```html
-<div class="l--box -p:30 -pos:relative">
-  <p>本文テキスト...</p>
-  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
-  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-e -bd-be -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
-</div>
-```
-
 ## 関連プリミティブ
 
 - [a--spacer](./a--spacer.md) — 要素間スペース

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

@@ -2,58 +2,7 @@
 
 コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` は `<Lism atomic="divider" aria-hidden="true" />` のエイリアスとして用意されています。
 
-## 基本情報
-
-- クラス名: `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.md
-
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
-<Divider />
-<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
-```
-
-```html
-<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
-<div class="a--divider" aria-hidden="true"></div>
-<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
-```
-
-### スタイルの変更
-
-```jsx
-<Divider bds="dotted" bdw="4px" bdc="blue" />
-```
-
-```html
-<div class="a--divider" aria-hidden="true" style="--bds: dotted; --bdw: 4px; --bdc: var(--blue)"></div>
-```
-
-### 縦方向の区切り線
-
-Property Class `-wm:vertical-rl`（または `<Divider wm="vertical-rl">`）を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
-
-```jsx
-<Flex ai="center" g="20">
-  <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
-  <Divider wm="vertical-rl" bds="dashed" bdw="2px" aslf="stretch" />
-  <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
-</Flex>
-```
-
-```html
-<div class="l--flex -g:20 -ai:center">
-  <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
-  <div class="a--divider -wm:vertical-rl -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
-  <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
-</div>
-```
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--divider.md
 
 ## 関連プリミティブ
 

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

@@ -2,12 +2,7 @@
 
 アイコン要素を表示するためのクラス。`flex-shrink: 0`、デフォルトサイズ `1em`。
 
-## 基本情報
-
-- クラス名: `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.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--icon.md
 
 ## 出力されるHTML構造
 
@@ -24,80 +19,11 @@
 ## 専用Props
 
 | Prop | 説明 |
-|------|------|
+| --- | --- |
 | `icon` | アイコンを指定。文字列（プリセット名）・オブジェクト（`{as, ...exProps}`）のどちらでも可 |
 | `size` | プリセットアイコン使用時の `width` / `height`（通常は `fz` で指定するほうが推奨） |
 | `label` | `aria-label` として出力。指定があれば `role="img"`、なければ `aria-hidden="true"` |
 
-## Usage
-
-`<Icon>` には**5つの使い方**があります。
-
-### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
-
-`react-icons`, `@phosphor-icons/react`, `lucide-react` などのサードパーティアイコンコンポーネントを `as` で渡すと、Lism が未処理の props は自動的にそのコンポーネントに転送されます。外部コンポーネント専用の props を明示的に分離したい場合は `exProps` を使います。
-
-```jsx
-import { SmileyIcon } from '@phosphor-icons/react';
-import { Icon } from 'lism-css/react';
-
-// 基本形
-<Icon as={SmileyIcon} fz="2rem" />
-
-// exProps で外部 props を明示的に分離
-<Icon as={SmileyIcon} exProps={{ weight: 'fill', size: '3em' }} c="blue" />
-
-// 上と同じ結果（Lism が "weight" を処理しないため最終的に SmileyIcon に渡る）
-<Icon as={SmileyIcon} weight="fill" c="blue" />
-```
-
-### 2. `as` と `exProps` を `icon` prop に一括指定
-
-`icon={{as: Component, ...exProps}}` の形式で、`as` と `exProps` を1つのオブジェクトとしてまとめて渡せます。アイコンを選択制にする親コンポーネントを作るときに便利です。
-
-```jsx
-import { Home } from 'lucide-react';
-
-<Icon icon={{ as: Home, strokeWidth: 1, size: 64 }} />
-
-// 同じ結果（分割形式）
-<Icon as={Home} exProps={{ strokeWidth: 1, size: 64 }} />
-```
-
-### 3. プリセットアイコンを使う
-
-`lism-css` パッケージ内に [Phosphor Icons](https://phosphoricons.com/) ベースのプリセットアイコンが同梱されています。`icon="アイコン名"` の文字列で呼び出せます。
-
-```jsx
-<Icon icon="menu" />
-<Icon icon="lightbulb" fz="2xl" c="blue" />
-<Icon icon="warning" size="40px" />
-```
-
-プリセット一覧のエクスポート元:
-
-```jsx
-import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
-```
-
-### 4. SVG の `path` を直接記述する
-
-`viewBox` を指定すると `<svg>` 要素として出力されるため、子要素に `<path>` 等をそのまま書けます。
-
-```jsx
-<Icon viewBox="0 0 256 256" label="Smiley icon" fz="4xl" c="blue">
-  <path d="M128,24A104,104,0,1,0,232,128..." />
-</Icon>
-```
-
-### 5. `src` で画像をアイコンとして使う
-
-`src` を指定すると `<img>` として出力されます。
-
-```jsx
-<Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />
-```
-
 ## 関連プリミティブ
 
 - [a--divider](./a--divider.md) — 区切り線

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

@@ -2,60 +2,12 @@
 
 要素間のスペースを確保するクラス。`<Spacer>` は `<Lism atomic="spacer" aria-hidden="true" />` のエイリアスとして用意されています。
 
-## 基本情報
-
-- クラス名: `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.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--spacer.md
 
 ## 専用Props
 
 `<Spacer>`では **`w` / `h` に対してSPACEトークンの値**が使えます（他のコンポーネントではSIZEトークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
 
-## Usage
-
-### 縦方向のスペース
-
-```jsx
-<p>Content...</p>
-<Spacer h="100px" />
-<p>Content...</p>
-```
-
-```html
-<p>Content...</p>
-<div class="a--spacer -h" style="--h:100px" aria-hidden="true"></div>
-<p>Content...</p>
-```
-
-### SPACEトークンを使う
-
-```jsx
-<p>Content...</p>
-<Spacer h="60" />
-<p>Content...</p>
-```
-
-```html
-<p>Content...</p>
-<div class="a--spacer -h" style="--h:var(--s60)" aria-hidden="true"></div>
-<p>Content...</p>
-```
-
-### 横方向のスペーサー
-
-Flex コンテナ内で `w` を指定すれば横方向のスペーサーとしても使えます。
-
-```jsx
-<Flex g="10">
-  <Box p="20" bd>Box</Box>
-  <Spacer w="40" />
-  <Box p="20" bd>Box</Box>
-  <Box p="20" bd>Box</Box>
-</Flex>
-```
-
 ## 関連プリミティブ
 
 - [a--divider](./a--divider.md) — 区切り線

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

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

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

@@ -2,27 +2,7 @@
 
 コンテンツをグループ化するだけのシンプルなクラス。汎用的な箱として、パディング・ボーダー・背景色などの指定に使います。
 
-## 基本情報
-
-- クラス名: `l--box`
-- コンポーネント: `<Box>`
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--box.md
-
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Box p="30" bgc="base-2" bxsh="10" bdrs="10">
-  <p>コンテンツ...</p>
-</Box>
-```
-
-```html
-<div class="l--box -p:30 -bgc:base-2 -bxsh:10 -bdrs:10">
-  <p>コンテンツ...</p>
-</div>
-```
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--box.md
 
 ## 関連プリミティブ
 

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

@@ -2,52 +2,19 @@
 
 要素を上下左右中央揃えで配置するクラス。高さの有無で水平中央のみ / 上下左右中央を自動的に切り替えます。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--center.md
 
-- クラス名: `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.md
+## 既定の挙動
+
+- `display:grid`。
+- `place-content:center`と`place-items:center`で子要素を中央配置します。
+- 中央配置のために`d="grid"`、`pc="center"`、`pi="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>` と組み合わせられる）

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

@@ -2,34 +2,14 @@
 
 複数の要素を横方向に並べ、数が多ければ自動的に折り返すクラス。タグリスト・ボタングループなどに使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--cluster.md
 
-- クラス名: `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.md
+## 既定の挙動
 
-## 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>
-```
+- `display:flex`。
+- `flex-wrap:wrap`で折り返しを有効化済み。
+- `align-items:center`でstretchを解除済み。
+- `gap`は既定で持たないため、間隔は`g`/`-g:*`で指定します。通常`fxw="wrap"`や`ai="center"`は足しません。
 
 ## 関連プリミティブ