@lism-css/mcp 0.22.0 → 0.24.0

package/dist/data/guides/customize.md

@@ -9,7 +9,13 @@
 - [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
 - [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
 
-[詳細](https://lism-css.com/docs/customize.md)
+詳細（公式ドキュメント）:
+
+- 概要: [https://lism-css.com/docs/customize/](https://lism-css.com/docs/customize/)
+- CSSビルドの選択（`@layer` / `full.css` / `isFullMode`）: [https://lism-css.com/docs/customize/build/](https://lism-css.com/docs/customize/build/)
+- `lism.config.js`（props / tokens / traits・breakpoints・追加スタイル）: [https://lism-css.com/docs/customize/config/](https://lism-css.com/docs/customize/config/)
+- SCSS（`$setting` / `$props`・BP上書き）: [https://lism-css.com/docs/customize/scss/](https://lism-css.com/docs/customize/scss/)
+- CSS Purge: [https://lism-css.com/docs/customize/purge/](https://lism-css.com/docs/customize/purge/)
 
 ---
 
@@ -38,9 +44,8 @@ import 'lism-css/main_no_layer.css';
 ### 上書き可能な変数
 
 | 変数 | 用途 | デフォルト |
-|------|------|-----------|
-| `$breakpoints` | ブレイクポイント数値の定義 | `('sm': '480px', 'md': '800px', 'lg': '1120px')` |
-| `$common_support_bp` | 主要な Property Class が共通サポートするブレイクポイント上限 | `'md'` |
+| --- | --- | --- |
+| `$breakpoints` | ブレイクポイント数値の定義（`0` は無効＝クエリを出力しない） | `('xs': 0, 'sm': '480px', 'md': '800px', 'lg': '1120px', 'xl': 0)` |
 | `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
 | `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
 | `$props` | Property Class ごとの個別出力設定 | `prop-config` のデフォルト |
@@ -53,7 +58,6 @@ import 'lism-css/main_no_layer.css';
   $breakpoints: (
     'sm': '400px',  // 個別キーの上書き可
   ),
-  $common_support_bp: 'lg',
   $is_container_query: 0,
   $default_important: 1,
   $props: (
@@ -69,7 +73,7 @@ import 'lism-css/main_no_layer.css';
 
 ### `$props` の個別カスタマイズ
 
-各 Property Class について、出力範囲やユーティリティクラスを追加できます。
+各 Property Class について、出力するブレイクポイントを絞ったり、ユーティリティクラスを追加したりできます。
 
 ```scss
 @use '../path-to/node_modules/lism-css/scss/setting' with (
@@ -81,7 +85,7 @@ import 'lism-css/main_no_layer.css';
       bp: 0,               // .-h_sm 等のブレイクポイント版を出力しない
     ),
     'p': (
-      bp: 'lg',            // .-p_sm / .-p_md / .-p_lg まで出力
+      bp: ('sm', 'md'),    // BP対応クラスを .-p_sm / .-p_md だけに限定（bp は 0 / 1 / BPキーのリストのみ）
       utilities: (
         'box': '2em',      // .-p:box { --p: 2em } を追加
       ),
@@ -98,32 +102,90 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 ## `lism.config.js` でのカスタマイズ
 
-プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+プロジェクトのルート直下に `lism.config.js`（または `lism.config.ts` / `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+
+設定ファイルの型チェック・補完には `lism-css/config-types` の `LismConfig` 型を使います。`.ts` は `export default { ... } satisfies LismConfig`、`.js` は `/** @type {import('lism-css/config-types').LismConfig} */` を付けると、キー名の typo や値の形をエディタが検出します（コンポーネント側の prop/trait を解禁する生成物 `lism-env.d.ts` とは別物）。
 
-> **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
+### Vite / Astro プラグインの登録（推奨セットアップ）
 
-### Vite プラグインの登録（必須）
+`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `@lism-css/plugin` の統合プラグインを登録します。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
+
+```bash
+pnpm add -D @lism-css/plugin
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { lismCss } from '@lism-css/plugin/vite';
 
-`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `lism-css/vite-plugin` を登録する必要があります。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
+export default defineConfig({
+  plugins: [lismCss()],
+});
+```
 
 ```js
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
-import lismCss from 'lism-css/vite-plugin';
+import { lismCss } from '@lism-css/plugin/astro';
 
 export default defineConfig({
-  vite: {
-    plugins: [lismCss()],
-  },
+  integrations: [lismCss()],
 });
 ```
 
-プラグインはプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
+この統合プラグイン1つで、以下がまとめて有効になります。
+
+- **config alias**: コンポーネント（JS ランタイム）が `lism.config.js` を読み込めるようになる
+- **動的CSSビルド**: `import 'lism-css/main.css'` 等を捕捉し、`lism.config.js` を反映済みの CSS をその場で生成する（props / tokens を追加すると CSS に自動反映される）
+- **型の自動生成**: 有効化したブレイクポイント・追加した props / traits を反映した `lism-env.d.ts` を起動時に自動生成する
+
+設定ファイルはプロジェクトルートから `lism.config.ts` → `lism.config.mjs` → `lism.config.js` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
 
 ```js
+// Vite
 plugins: [lismCss({ configPath: './config/lism.config.js' })],
+// Astro
+integrations: [lismCss({ configPath: './config/lism.config.js' })],
 ```
 
+### Next.js（16 以降）での導入
+
+Next.js には Vite / Astro のような「import をその場で変換する仕組み」が無いため、`@lism-css/plugin/next` の `withLism()` で `next.config.mjs` をラップします。`lism.config.js` を反映した CSS を `.lism-css/css/` へ事前生成し、`lism-css/main.css` 等の import をその生成物へ alias します（型生成・dev 中の config 変更追従も含む）。
+
+```js
+// next.config.mjs
+import { withLism } from '@lism-css/plugin/next';
+
+export default withLism({ /* nextConfig */ });
+```
+
+- `app/layout.tsx` などで `import 'lism-css/main.css'` をグローバル読み込みする。
+- `.lism-css/` は `.gitignore`、`lism-env.d.ts` は `tsconfig.json` の `include` に追加してコミットする。
+- CSS purge は現状 Vite / Astro のみ対応（Next.js は未対応）。
+
+### ブレイクポイントの有効化（xs / xl）
+
+デフォルトのブレイクポイントは **`xs: 0`（無効） / `sm: 480px` / `md: 800px` / `lg: 1120px` / `xl: 0`（無効）** です。値 `0` は「無効＝CSSクエリを出力しない」を表します。
+
+`xs` / `xl` を有効にするには、`lism.config.js` の `breakpoints` にサイズを差分指定するだけで済みます。
+
+```js
+// lism.config.js
+export default {
+  breakpoints: {
+    xs: '360px',  // xs を有効化
+    xl: '1400px', // xl を有効化
+  },
+};
+```
+
+これだけで、ブレイクポイント対応の全 Property Class が `xs` / `xl` のレスポンシブクラス（`-p_xs` / `-p_xl` 等）も出力するようになります。prop ごとの個別指定は不要です。
+
+統合プラグイン（型自動生成が有効）を使っている場合、有効化したブレイクポイントを反映した `lism-env.d.ts` がプロジェクト直下に**自動生成**されます。型補完も有効化したブレイクポイントのキーを自動で提示するため、`BreakpointRegistry` をプロジェクト側の `.d.ts` で手書き拡張する必要はありません。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
+
+> SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も引き続き利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
+
 ### フォーマット
 
 ```js
@@ -133,7 +195,7 @@ export default {
     // Property Class の出力をカスタマイズ
   },
   tokens: {
-    // トークン値を追加
+    // トークンを { key: value } の値マップで定義（CSS変数の値出力・ユーティリティ生成・props受理を一括）
   },
   traits: {
     // Trait（is--* / has--*）用の props を追加
@@ -152,7 +214,7 @@ export default {
 ```js
 // lism.config.js
 import DEFAULT_CONFIG from 'lism-css/default-config';
-const { props, tokens } = DEFAULT_CONFIG;
+const { props } = DEFAULT_CONFIG;
 
 export default {
   props: {
@@ -164,8 +226,12 @@ export default {
     filter: { utils: { blur: 'blur(3px)' } },
   },
   tokens: {
-    // tokenClass:1 のpropは、tokens を追加するだけで自動でユーティリティ化される
-    lts: [...(tokens.lts || []), '2xl'],
+    // トークンは { key: value } の値マップで定義（既定に deep-merge される）
+    // → :root { --lts--2xl: .5em } を出力し、tokenClass:1 の lts は -lts:2xl も自動生成される
+    lts: { '2xl': '.5em' },
+    // space は --s{key}、color は --{key} の変数名で出力される
+    space: { '90': '6rem' }, // → --s90: 6rem
+    color: { success: 'oklch(0.6 0.15 150)' }, // → --success: ...
   },
   traits: {
     isHoge: 'is--hoge',
@@ -176,7 +242,7 @@ export default {
 これによってコンポーネント側で次のような挙動が追加されます：
 
 | 入力 | 出力されるクラス |
-|------|----------------|
+| --- | --- |
 | `ta="justify"` | `-ta:justify` |
 | `p="box"` | `-p:box` |
 | `filter="blur"` | `-filter:blur` |
@@ -188,23 +254,37 @@ export default {
 // → <div class="l--box is--hoge -p:box -ta:justify -filter:blur -lts:2xl">Box</div>
 ```
 
+### 追加した prop / trait の型解禁
+
+統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です。
+
+なお、既存 prop への値追加（`ta="justify"` 等）はもともと任意の文字列を受け付けるため、型エラーにはなりません（ただし補完候補には出ません）。
+
 
 ## 追加スタイルを読み込ませる方法
 
-`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
+`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルが必要になります。構成によって反映方法が異なります。
 
-### 1. 軽微な追加であれば手書きで済ませる（推奨ライト）
+### Vite / Astro（統合プラグイン使用時）は自動反映（手動ビルド不要）
 
-カスタムトークンが少数で済むなら、CLI 再ビルドや SCSS 構成変更まで踏み込まず、Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きで十分。
+`@lism-css/plugin` の統合プラグインを登録している場合、`lism.config.js` に props / tokens を追加すると、**dev サーバ / ビルドの CSS に自動反映されます**。追加クラス分の CSS を手動で追記したり `npx lism-css build` を回したりする必要はありません。dev 中に `lism.config.js` を変更すると HMR で CSS が再生成され、型 `.d.ts` も追従します。
 
-```css
-/* global.css */
-@layer lism-base {
-  :root {
-    --lts--2xl: 0.15em;
-  }
-}
+参照先の **CSS 変数の値そのもの**（`:root { --lts--2xl: .5em }` のような定義）も、`tokens` に値を書けば自動生成されます。値の定義・ユーティリティ生成・props 受理がまとめて反映されるため、`global.css` への手書きは不要です（既定値の上書きも可能）。
 
+```js
+// lism.config.js — 値そのものも config に集約できる
+export default {
+  tokens: {
+    lts: { '2xl': '.5em' }, // :root { --lts--2xl: .5em } + .-lts:2xl を自動生成
+  },
+};
+```
+
+> `is--*` クラスのスタイルは `traits` ではクラス名のみを追加するため、対応するスタイルは別途必要です（後述の手動追記 / SCSS を参照）。
+
+軽微な追加であれば、props を増やさず Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きだけで済ませることもできます。
+
+```css
 /* Property Class は @layer を付けない */
 .-lts\:2xl {
   letter-spacing: var(--lts--2xl);
@@ -215,12 +295,15 @@ export default {
 <Text lts=":2xl">...</Text>
 ```
 
-トークンを体系的に拡張したい場合のみ、後述の CLI / SCSS 経由に切り替える。
+### CLI コマンドで CSS を再ビルド（Vite / Astro を使わない構成）
+
+純 SCSS 構成や他バンドラなど、Vite / Astro の統合プラグインを使わない構成では、`@lism-css/plugin` が提供する `npx lism-css build` が `lism.config.js` を CSS に反映するための正規の手段です。
 
-### 2. CLI コマンドで CSS を再ビルド
+webpack 主導のバンドラ（`@wordpress/scripts` 等）では `@lism-css/plugin/webpack` の `withLismWebpack()` で webpack config をラップできます。自前の SCSS ビルドで config 適用済みの `setting` を `@use` したい構成では、`@lism-css/plugin/builder` の `generateLismScss()` が bridge SCSS（`@use 'lism-setting'`）を生成します。
 
 ```bash
-npx lism-css build
+npx lism-css build          # lism.config.js 反映の CSS を再生成
+npx lism-css build --full   # full.css / full_no_layer.css も生成
 ```
 
 `lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
@@ -233,10 +316,11 @@ npx lism-css build
 ```
 
 > **注意**:
-> - 生成されるのはあくまで `var(--lts--2xl)` を参照する **ユーティリティクラスまで**。参照先の CSS 変数（`:root { --lts--2xl: ... }` のような **値そのもの** の定義）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（実値は手書きSCSS側）。
+> - `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
 
-### 3. 手動で CSS を追記
+### 手動で CSS を追記
 
 CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
 
@@ -252,7 +336,7 @@ CLI を使わず、追加クラス分の CSS をプロジェクト側で書い
 }
 ```
 
-### 4. SCSS で `lism.config.js` と整合させる
+### SCSS で `lism.config.js` と整合させる
 
 SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
 

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`, `--max-sz` |
+| --- | --- | --- |
+| `--{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`）。
+クラス分類ごとのプレフィックス（`c--`/`a--`/`l--`/`is--`/`has--`/`set--`/`u--`）と各分類の責務・所属レイヤーは、[css-rules.md](./css-rules.md#クラス分類とプレフィックス)の分類表を正本とします。
 
-**使い分けの判断軸:**
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。`is--`/`has--`/`set--`/`u--`にも同じ規則が適用されます。
 
-| プレフィックス | 責務 | 代表例 |
-|---|---|---|
-| `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--*`の命名
 
-- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
-- `is--` / `has--` は `lism-trait` 層に属する。
+Block/Element/Modifierの形式（Block=`c--{name}`、Element=`_`ひとつ、Modifier=`--`ふたつ）は[css-rules.md](./css-rules.md#component-classc--)を参照。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
 
 ## 関連プリミティブ