@lism-css/mcp 0.22.0 → 0.23.0

package/dist/data/docs-index.json

@@ -22,9 +22,16 @@
       "1. パッケージ(lism-css)のインストール",
       "2. CSS(main.css)の読み込み",
       "3. コンポーネントの読み込み",
+      "Next.js での導入",
+      "1. パッケージのインストール",
+      "2. `next.config.mjs` を `withLism()` でラップする",
+      "3. CSS とコンポーネントの読み込み",
+      "4. `lism.config.js` でカスタマイズする（任意）",
+      "5. 生成ファイルの扱い",
       "Lism UI の導入",
       "パッケージとして利用する",
       "CLI でプロジェクトにコピーする",
+      "未使用CSSの削除（パージ）",
       "AIツール連携"
     ],
     "keywords": [
@@ -40,9 +47,14 @@
       "template",
       "テンプレート",
       "create lism",
-      "lism-cli"
+      "lism-cli",
+      "Next.js",
+      "withLism",
+      "@lism-css/plugin",
+      "purge",
+      "パージ"
     ],
-    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。`create lism` コマンドでテンプレートからプロジェクトを作成できる（minimal-astro, blog-astro-*, lp-astro-* 等のテンプレートを提供）。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。UIコンポーネントは別パッケージ @lism-css/ui として提供（パッケージ利用または lism ui add コマンドでCLI追加も可能）。AIコーディングツール向けのSkills・MCPサーバーも提供。"
+    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。`create lism` コマンドでテンプレートからプロジェクトを作成できる（minimal-astro, minimal-vite, blog-astro-*, lp-astro-* 等のテンプレートを提供）。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。Vite/Astro では @lism-css/plugin（lismCss()）を登録して lism.config.js の反映・CSS 動的ビルド・型自動生成を有効化。Next.js（16以降）では `@lism-css/plugin/next` の `withLism()` でセットアップ。UIコンポーネントは別パッケージ @lism-css/ui として提供（パッケージ利用または lism ui add コマンドでCLI追加も可能）。@lism-css/plugin の purge 機能で本番CSS軽量化にも対応。AIコーディングツール向けのSkills・MCPサーバーも提供。"
   },
   {
     "sourcePath": "css-methodology.mdx",
@@ -100,8 +112,8 @@
       "{prop} の省略ルール",
       "1文字プロパティ",
       "プロパティグループ",
-      "方向指定系の形式",
-      "方向指定系の例外: p, m のみ、ハイフンを省略",
+      "方向指定系の形式: 「グループ略称」 + `-` +「方向指定」",
+      "方向指定系の例外: `p`, `m` のみ、ハイフンを省略",
       "グループ略称の衝突禁止",
       "max- / min- プロパティ",
       "その他のプロパティ",
@@ -180,9 +192,9 @@
     "title": "ハーフレディング（line-height）",
     "description": "Lism CSS のハーフレディングによる line-height 管理の仕組みと、関連するデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["仕組み", "トークン", "lh クラス", "ハーフレディング管理のメリット"],
-    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "lh", "--hl"],
-    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -lh:{token} クラスの使い方を解説。"
+    "headings": ["仕組み", "トークン", "hl クラス", "lh（互換ショートカット）", "ハーフレディング管理のメリット"],
+    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "hl", "lh", "--hl"],
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -hl:{token} クラス（正規）・-lh:{token}（互換ショートカット）の使い方を解説。"
   },
   {
     "sourcePath": "tokens/spacing.mdx",
@@ -240,6 +252,7 @@
       "fz",
       "fw",
       "ff",
+      "hl",
       "lh",
       "d",
       "ta",
@@ -372,16 +385,40 @@
       "bdi",
       "bgs"
     ],
-    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。BPカラムは sm/md 対応が ✔、lg まで対応が ✔ lg、非対応が - で示される。"
+    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。BPカラムは sm/md/lg 対応が ✔、非対応が - で示される。"
   },
   {
     "sourcePath": "responsive.mdx",
     "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
-    "headings": ["レスポンシブ対応", "プロパティによってCSSの実装の中身が少し異なります", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
-    "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md", "lg", "alwaysVar"],
-    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm/md ブレークポイントの値を指定。CSSの実装パターンは「ブレークポイントごとに上書き」と「常に変数で参照（alwaysVar）」の2種類がある。ブレークポイントは sm(480px) / md(800px) / lg(1120px) の3段階。d・g・cols・グリッド系（gtc/gta/gtr/ga/gc/gr）は lg までサポート。"
+    "headings": [
+      "レスポンシブ対応",
+      "配列記法とオブジェクト記法",
+      "プロパティによってCSSの実装の中身が少し異なります",
+      "コンテナクエリ・メディアクエリ",
+      "ブレイクポイント",
+      "型補完で提示されるブレイクポイント"
+    ],
+    "keywords": [
+      "responsive",
+      "レスポンシブ",
+      "ブレークポイント",
+      "breakpoint",
+      "コンテナクエリ",
+      "container query",
+      "sm",
+      "md",
+      "lg",
+      "alwaysVar",
+      "xs",
+      "xl",
+      "配列記法",
+      "オブジェクト記法",
+      "BreakpointRegistry",
+      "lism-env.d.ts"
+    ],
+    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40, 50]} のような配列記法（base→sm→md→lg→xl の順で固定）またはオブジェクト記法（{ base, sm, md, lg }）でブレークポイントの値を指定。xs は配列記法では指定できずオブジェクト記法のみ。CSSの実装パターンは「ブレークポイントごとに上書き」と「常に変数で参照（alwaysVar）」の2種類がある。ブレークポイントは sm(480px) / md(800px) / lg(1120px) の3段階で xs / xl は予約済みだがデフォルト無効。型補完は `@lism-css/plugin` 統合プラグイン使用時に lism-env.d.ts で自動生成、不使用時は BreakpointRegistry を手書き拡張。"
   },
   {
     "sourcePath": "reset-css.mdx",
@@ -395,27 +432,108 @@
   {
     "sourcePath": "customize.mdx",
     "title": "Customize",
-    "description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
+    "description": "Lism CSS のカスタマイズ方法の全体像。ビルドCSSの選択・lism.config.js・SCSS・CSS Purge のどれを使うべきかを目的別に案内します。",
+    "category": "guide",
+    "headings": ["カスタマイズの入口"],
+    "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS", "full.css", "isFullMode", "purge"],
+    "snippet": "Lism CSS のカスタマイズ方法の全体像。目的に応じて「CSSビルドの選択」「lism.config.js でのカスタマイズ」「SCSS でのカスタマイズ」「CSS Purge」の4つの入口を案内する概要ハブページ。"
+  },
+  {
+    "sourcePath": "customize/build.mdx",
+    "title": "CSSビルドの選択",
+    "description": "@layer のオン / オフや full.css への切り替えなど、読み込むビルド済みCSSを選ぶ方法を解説します。",
+    "category": "guide",
+    "headings": ["@layer をオフにする", "全部入りビルド（full.css）を使う", "isFullMode"],
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "build",
+      "ビルド",
+      "CSS",
+      "@layer",
+      "full.css",
+      "isFullMode",
+      "main.css",
+      "main_no_layer.css",
+      "full_no_layer.css"
+    ],
+    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。full.css には main.css 非収録の全 Property Class ブレイクポイント対応クラスやスペーシング系トークンユーティリティを含む。isFullMode（lism.config.js で設定）でコンポーネント出力も full.css に合わせられる。@lism-css/plugin の統合プラグイン使用時は型も isFullMode に自動追従（lism-env.d.ts 生成）。"
+  },
+  {
+    "sourcePath": "customize/config.mdx",
+    "title": "lism.config.js でのカスタマイズ",
+    "description": "lism.config.js と @lism-css/plugin を使って、コンポーネントの props / tokens / traits やブレイクポイントを拡張する方法を解説します。",
     "category": "guide",
     "headings": [
-      "@layerをオフにする",
-      "SCSS でのカスタマイズ",
-      "上書き可能な変数",
-      "基本フォーマット",
-      "$props の個別カスタマイズ",
-      "SCSSのコンパイル処理について",
-      "lism.config.js でのカスタマイズ",
-      "Vite プラグインの登録（必須）",
+      "Vite / Astro プラグインの登録（必須）",
       "フォーマット",
       "カスタマイズ例",
+      "ブレイクポイント（xs / xl）の有効化",
       "追加スタイルを読み込ませる方法",
+      "Vite / Astro プラグイン使用時は自動反映される",
       "軽微な追加なら手書きで済ませる",
       "lism-css のCLIコマンドでCSSビルドする",
-      "手動で追加する方法",
       "SCSSファイルへの追加上書き"
     ],
-    "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
-    "snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "config",
+      "lism.config.js",
+      "@lism-css/plugin",
+      "props",
+      "tokens",
+      "traits",
+      "breakpoints",
+      "ブレイクポイント",
+      "xs",
+      "xl"
+    ],
+    "snippet": "lism.config.js を使ったコンポーネントの挙動カスタマイズ方法。@lism-css/plugin の統合プラグイン登録（必須）から props / tokens / traits の追加・拡張、ブレイクポイント（xs / xl）の有効化、追加スタイルの読み込み方法（自動反映・CLI・手書き・SCSS）まで解説。"
+  },
+  {
+    "sourcePath": "customize/scss.mdx",
+    "title": "SCSS でのカスタマイズ",
+    "description": "lism-css の SCSS 変数（setting モジュールの $breakpoints / $props など）を上書きして、出力されるクラスやブレイクポイントを調整する方法を解説します。",
+    "category": "guide",
+    "headings": [
+      "上書き可能な変数",
+      "基本フォーマット",
+      "$props の個別カスタマイズ",
+      "ブレイクポイント（xs / xl）の有効化",
+      "SCSSのコンパイル処理について"
+    ],
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "SCSS",
+      "setting",
+      "$props",
+      "$breakpoints",
+      "Property Class",
+      "出力クラス",
+      "ブレイクポイント",
+      "CSS出力"
+    ],
+    "snippet": "lism-css の setting モジュールの SCSS 変数を @use ... with (...) で上書きして、出力されるクラスやブレイクポイントを調整する方法。$breakpoints / $is_container_query / $default_important / $props の個別カスタマイズ（bp・important・utilities）、ブレイクポイント（xs / xl）の有効化などを解説。純 SCSS 構成向け。"
+  },
+  {
+    "sourcePath": "customize/purge.mdx",
+    "title": "CSS Purge",
+    "description": "ビルド時に未使用の Lism CSS クラスを削除し、本番 CSS を軽量化するパージプラグインのセットアップと使い方。",
+    "category": "guide",
+    "headings": [
+      "推奨セットアップ（統合プラグイン経由）",
+      "仕組み",
+      "単体プラグインを直接使う場合",
+      "full.css と組み合わせる",
+      "オプション",
+      "safelist",
+      "report",
+      "注意事項"
+    ],
+    "keywords": ["purge", "CSS purge", "パージ", "軽量化", "未使用", "full.css", "@lism-css/plugin", "lismPurge", "safelist", "build"],
+    "snippet": "ビルド成果物をスキャンして使用中の Lism CSS クラスだけを残すパージ機能。@lism-css/plugin の統合プラグインで purge: true を渡すだけで有効化可能。仕組み・単体プラグイン直接利用・full.css との併用・safelist / report オプション・注意事項を解説。"
   },
   {
     "sourcePath": "utility-class.mdx",
@@ -522,58 +640,77 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.23.0 (2026.06.19)",
+      "ビルド/プラグイン層を `@lism-css/plugin` へ分離 (#439)",
+      "トークンを値付きの単一情報源に刷新 (#434)",
+      "ブレイクポイント / フルビルド",
+      "その他",
+      "`@lism-css/plugin` v.0.3.0 (2026.06.19)",
+      "`@lism-css/ui` v.0.23.0 (2026.06.19)",
+      "lism-css v.0.22.2 (2026.06.03)",
+      "`@lism-css/ui` v.0.22.2 (2026.06.03)",
+      "lism-css v.0.22.1 (2026.05.30)",
+      "`@lism-css/ui` v.0.22.1 (2026.06.02)",
       "lism-css v.0.22.0 (2026.05.28)",
       "AutoColumns のデフォルトモード変更 (#408)",
       "ユーティリティ・トークン名の整理",
       "フォームコントロールのスタイル調整",
       "その他",
-      "@lism-css/ui v.0.22.0 (2026.05.28)",
+      "`@lism-css/ui` v.0.22.0 (2026.05.28)",
       "lism-css v.0.21.0 (2026.05.26)",
       "set クラスの命名変更 (#404)",
       "contentSize Prop と set--bleed の追加 (#405)",
-      "@lism-css/ui v.0.21.0 (2026.05.26)",
+      "その他",
+      "`@lism-css/ui` v.0.21.0 (2026.05.26)",
       "lism-css v.0.20.0 (2026.05.20)",
       "方向系 Property Class の命名整理 (#378)",
       "ブレークポイント対応プロパティの整理 (#394)",
       "hover 色のデフォルト変更 (#381)",
-      "@lism-css/ui v.0.20.0 (2026.05.20)",
+      "その他",
+      "`@lism-css/ui` v.0.20.0 (2026.05.20)",
       "lism-css v.0.18.0 (2026.05.17)",
-      "--sz--* トークンを px 統一・80px 刻みで再設計 (#364)",
-      "spacing tokens 拡充と set--var:s の新設 (#377)",
+      "`--sz--*` トークンを px 統一・80px 刻みで再設計 (#364)",
+      "spacing tokens 拡充と `set--var:s` の新設 (#377)",
+      "その他",
       "lism-css v.0.17.0 (2026.05.09)",
-      "-max-sz:bleed の新設 (#360)",
-      "--REM 廃止と --fz--base の簡素化",
-      "a タグのリンク装飾スタイル廃止",
+      "`-max-sz:bleed` の新設 (#360)",
+      "`--REM` 廃止と `--fz--base` の簡素化",
+      "`a` タグのリンク装飾スタイル廃止",
       "Bug Fixes",
-      "@lism-css/ui v.0.17.0 (2026.05.09)",
+      "その他",
+      "`@lism-css/ui` v.0.17.0 (2026.05.09)",
       "lism-css v.0.16.1 (2026.04.29)",
       "lism-css v.0.16.0 (2026.04.21)",
-      "u--trimChildren のリネームと除外方式の整理 (#324, #326)",
-      "u--collapseGrid のリネームと u--divide の追加 (#323)",
+      "`u--trimChildren` のリネームと除外方式の整理 (#324, #326)",
+      "`u--collapseGrid` のリネームと `u--divide` の追加 (#323)",
       "opacity トークンの命名変更 (#316)",
       "Layout Primitive の命名整理 (#319)",
-      "@lism-css/ui v.0.16.0 (2026.04.21)",
+      "その他",
+      "`@lism-css/ui` v.0.16.0 (2026.04.21)",
       "lism-css v.0.15.0 (2026.04.21)",
       "CSSレイヤー構造の再編 (#304)",
-      "set-- クラスの刷新 (#304)",
-      "-hov: クラスの命名整理 (#300)",
+      "`set--` クラスの刷新 (#304)",
+      "`-hov:` クラスの命名整理 (#300)",
       "シャドウトークンの刷新 (#311)",
-      "@lism-css/ui v.0.15.0 (2026.04.21)",
+      "その他",
+      "`@lism-css/ui` v.0.15.0 (2026.04.21)",
       "lism-css v.0.14.0 (2026.04.17)",
       "Props システムの整理",
       "Property Class のリネーム",
       "Trait Class / トークンの整理",
-      "@lism-css/ui v.0.14.0 (2026.04.17)",
+      "その他",
+      "`@lism-css/ui` v.0.14.0 (2026.04.17)",
       "lism-css v.0.13.1 (2026.04.15)",
-      "@lism-css/ui v.0.13.1 (2026.04.15)",
+      "`@lism-css/ui` v.0.13.1 (2026.04.15)",
       "lism-css v.0.13.0 (2026.04.14)",
       "Module → Primitive 概念リネーム",
       "State → Trait 識別子の統一",
       "set / util props の統一",
       "Trait Class / 命名整理",
-      "@lism-css/ui v.0.13.0 (2026.04.14)",
-      "@lism-css/ui v.0.12.0 (2026.04.10)",
-      "@lism-css/ui v.0.11.0 (2026.04.05)",
+      "その他",
+      "`@lism-css/ui` v.0.13.0 (2026.04.14)",
+      "`@lism-css/ui` v.0.12.0 (2026.04.10)",
+      "`@lism-css/ui` v.0.11.0 (2026.04.05)",
       "v.0.12.0 (2026.04.10)",
       "v.0.11.0 (2026.04.05)",
       "v.0.10.5 (2026.04.05)",
@@ -581,17 +718,25 @@
       "v.0.10.3 (2026.04.04)",
       "v.0.10.2 (2026.04.04)",
       "v.0.10.1 (2026.04.03)",
+      "`<HTML.xxx>` を廃止し、セマンティックラッパーコンポーネントに置き換え",
       "lism-css v.0.9.4 (2026.03.31)",
-      "@lism-css/ui v.0.9.3 (2026.03.30)",
+      "`@lism-css/ui` v.0.9.3 (2026.03.30)",
       "v.0.9.2 (2026.03.18)",
       "v.0.9.1 (2026.03.18)",
       "v.0.9.0 (2026.03.17)",
       "v.0.8.3",
       "v.0.8.2",
-      "v.0.8 (大幅な変更)"
+      "v.0.8 (大幅な変更)",
+      "[重要] line-heightの仕様を変更しました。",
+      "レイアウトモジュールの変更点",
+      "ダイナミックモジュールの削除",
+      "トークン・CSS変数の変更点",
+      "Property Class の変更点",
+      "ユーティリティクラスの変更点",
+      "コンテンツサイズ管理クラスの変更点"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン", "u--cells", "u--enclose", "rename", "リネーム", "migration", "移行"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.22.0 (2026.05.28) では AutoColumns のデフォルトを auto-fit から auto-fill へ変更、ユーティリティ・トークン名の整理（u--cells → u--enclose, テーブルセル変数を --cells-p に整理, --gutter-size を --gutter/--gutter--base 構造へ整理）、フォームコントロールのスタイル調整（border-radius 削除・padding を em 単位に変更）。v.0.21.0 では set クラスの命名変更（set--var:xxx → set--xxx、#404）、contentSize Prop と set--bleed の追加（#405）。v.0.20.0 の破壊的変更として方向系 Property Class の命名整理（px-s/px-e → ps/pe、bd-x-s → bd-s 等、#378）、bp デフォルトサポート見直し（pl/pr/pt/pb 等廃止、d/g/cols/グリッド系は lg まで拡張、#394）、-hov:-bgc のデフォルト色変更と --neutral トークン追加（#381）など。v.0.18.0 では --sz--* トークンの px 統一・80px 刻みでの再設計（#364）、spacing tokens 拡充と set--s 新設（s25/s35 追加、#377）。v.0.17.0 では -max-sz:container 廃止と -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）などがある。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.23.0 (2026.06.19) では破壊的変更としてビルド/プラグイン層を新パッケージ @lism-css/plugin へ分離（lism-css/vite 等のエクスポートを廃止）、tokens を「キー: 値」のフラットマップに刷新（tokenValues チャンネル廃止・c を color に改名）、xs ブレイクポイントのオプトイン対応・full.css / isFullMode の追加（#428, #423, #425）、標準 BP デフォルトを md → lg に拡大など。@lism-css/ui v.0.23.0 では Badge/Button/Chat の lh を hl へ移行。v.0.22.2 (2026.06.03) では --green 彩度微調整・alert アイコン変更、@lism-css/ui で Alert/Callout に tip プリセット追加・プリセット整理。v.0.22.1 (2026.05.30) では ':' 単体を true 相当のフラグとして対応・0.22.0 パッケージング修正、@lism-css/ui で NavMenu.Link にデフォルト hov 付与・Accordion.Item に isOpen prop 追加・Modal スクロールバーがたつき防止。v.0.22.0 (2026.05.28) では AutoColumns のデフォルトを auto-fit から auto-fill へ変更、ユーティリティ・トークン名の整理（u--cells → u--enclose, --cells-p に整理, --gutter/--gutter--base 構造へ整理）、フォームコントロールのスタイル調整（border-radius 削除・padding を em 単位に変更）。v.0.21.0 では set クラスの命名変更（set--var:xxx → set--xxx、#404）、contentSize Prop と set--bleed の追加（#405）。v.0.20.0 の破壊的変更として方向系 Property Class の命名整理（ps/pe/pbs/pbe、bd-s/bd-e/bd-bs/bd-be 等、#378）、bp デフォルトサポート見直し（pl/pr/pt/pb 等廃止、d/g/cols/グリッド系は lg まで拡張、#394）、-hov:-bgc のデフォルト色変更と --neutral トークン追加（#381）など。v.0.18.0 では --sz--* トークンの px 統一・80px 刻みでの再設計（#364）、spacing tokens 拡充と set--s 新設（s25/s35 追加、#377）。v.0.17.0 では -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
@@ -672,6 +817,7 @@
       "CSS Props",
       "コード例",
       ": でクラスとして強制的に出力",
+      ": 単体を指定した場合",
       "レスポンシブ指定",
       "exProps",
       "クラスの出力順"
@@ -1164,10 +1310,23 @@
       "ソースコード",
       "Examples",
       "見出しタグを変更する",
-      "アニメーション時間を変更し、複数同時展開を許可する"
+      "アニメーション時間を変更する",
+      "最初の一つを開いた状態にする",
+      "複数同時展開を許可する"
+    ],
+    "keywords": [
+      "Accordion",
+      "アコーディオン",
+      "開閉",
+      "toggle",
+      "FAQ",
+      "折りたたみ",
+      "collapsible",
+      "isOpen",
+      "allowMultiple",
+      "hidden until-found"
     ],
-    "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
-    "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
+    "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。div/button ベースで JS により開閉アニメーションを制御。hidden=\"until-found\" によりブラウザのページ内検索対応。isOpen で初期展開、allowMultiple で複数同時展開が可能。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Modal.mdx",
@@ -1244,22 +1403,24 @@
       "Props",
       "ソースコード",
       "Examples",
-      "layout を切り替える",
-      "type一覧",
       "カラーとアイコンを指定する例",
+      "`l--withSide` を使ってレスポンシブ対応",
+      "ボタン付き + ブレイクポイントによるレスポンシブ対応",
+      "`l--withSide` を使ったレスポンシブ対応",
+      "type一覧",
       "Only lism-css"
     ],
-    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知"],
-    "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
+    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知", "type", "keycolor", "icon", "withSide", "layout"],
+    "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。type prop（alert/point/warning/check/info/help/note/tip）でアイコンとキーカラーをまとめて設定。layout=\"withSide\" でコンテナ幅が狭い時に縦並び対応。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Callout.mdx",
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "icon、keycolorを指定", "Only lism-css"],
-    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
-    "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
+    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "`icon`、`keycolor`を指定", "Only lism-css"],
+    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight", "type", "keycolor", "icon", "title"],
+    "snippet": "記事の中で重要なポイントを示すためのコンポーネント。type prop（info/alert/warning/point/check/help/note/tip）でアイコンとキーカラーをまとめて設定。title でタイトルテキストを表示。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Button.mdx",
@@ -1334,7 +1495,7 @@
       "Examples",
       "シンプルな例",
       "アイコンやバッジを表示する例",
-      "各リストのpaddingを一括で調整する方法",
+      "各リストの共通スタイルを一括で指定する方法",
       "メニューのネスト",
       "ネストしたメニューをアコーディオンで展開する",
       "横並びメニューでホバー時に子メニューを表示する例"

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.22.0` / `@lism-css/ui@0.22.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.23.0` / `@lism-css/ui@0.23.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
@@ -19,12 +19,13 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 ### CDNでCSSファイルのみ読み込む場合
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.16.0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
 
 - `lism-css` — コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
+- `@lism-css/plugin` — Vite / Astro / Next.js 統合、動的CSSビルド、CSS purge、`lism-css build` CLIを提供。
 - `@lism-css/ui` — `lism-css` を使って構築された UI コンポーネントライブラリ。Accordion, Modal, Tabs, Button, Badge, Callout 等を React/Astro で提供。
 
 ### CSS 読み込み
@@ -49,6 +50,10 @@ import { Tabs } from '@lism-css/ui/astro/Tabs';
 import { Button } from '@lism-css/ui/astro/Button';
 ```
 
+### CSS Purge（未使用CSSの削除）
+
+本番ビルド時に未使用の Lism CSS クラスを取り除いて出力 CSS を軽量化できます。`@lism-css/plugin/vite` / `@lism-css/plugin/astro` の統合プラグインを使っている場合は、各エントリの `lismCss({ purge: true })` で有効化するのが簡単です。統合プラグインを使わない場合は単体プラグイン `@lism-css/plugin/purge/vite`（Vite）/ `@lism-css/plugin/purge/astro`（Astro）も利用できます。詳細は https://lism-css.com/docs/customize/purge/ を参照。
+
 
 ## 実装ルール
 

package/dist/data/guides/antipatterns.md

@@ -327,9 +327,9 @@ BP 専用クラス（`-{prop}_{bp}`）やコンポーネントの BP キー（`{
 
 ### ブレイクポイントの誤用
 
-Lism CSS の標準出力で有効な BP は `sm: 480px` / `md: 800px` まで。`lg` 以降を使う場合は SCSS 設定で出力範囲を拡張する必要がある。`xs` は BP キーとして存在しない。
+Lism CSS の標準出力で有効な BP は `sm: 480px` / `md: 800px` / `lg: 1120px`。`xs` は BP キーとして存在しない。
 
 | NG | OK | 理由 |
 |---|---|---|
 | `<Box p={{ xs: 10, sm: 20 }}>` | `<Box p={{ base: 10, sm: 20 }}>` | デフォルトは `base`（`xs` キーは無い） |
-| `cols={[1, 2, 3, 4]}` | `cols={[1, 2, 3]}` | 標準出力では `[base, sm, md]` までが有効。`lg` 以降は SCSS 設定が必要 |
+| `cols={[1, 2, 3, 4, 5]}` | `cols={[1, 2, 3, 4]}` | 標準出力では `[base, sm, md, lg]` までが有効。`xl` 以降は SCSS 設定が必要 |

package/dist/data/guides/base-styles.md

@@ -21,9 +21,10 @@ Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベ
 
 - `box-sizing: border-box` の全要素適用
 - `margin: 0` の全要素適用（`<dialog>` を除く）
-- `overflow: clip` を `<html>` に適用（横スクロール防止）
-- `body` に `min-height: 100dvh`
-- メディア要素（`img`, `video`, `iframe`）に `max-inline-size: 100%`, `block-size: auto`
+- `overflow-x: clip` を `<html>` に適用（横スクロール防止）。`:modal[open]` がある間は `overflow: clip`
+- `body` に `min-height: 100dvh`、`overflow: inherit`
+- メディア要素（`svg`, `img`, `video`, `audio`, `iframe`, `object`, `canvas`）に `max-inline-size: 100%`。`img` / `video` には `block-size: auto`
+- クラスを持つリスト（`menu`, `:is(ul, ol)[class]`）は `list-style: none` + `padding: 0`
 - フォーム要素のフォント・カラー継承
 
 

package/dist/data/guides/components-ui.md

@@ -50,6 +50,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 | Prop | 対象 | 型 | デフォルト | 説明 |
 |------|------|-----|----------|------|
 | `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
+| `isOpen` | Item / Button / Panel | `boolean` | `false` | アイテムを初期展開。Item・Button・Panel の3つ揃えて指定（Item=`data-opened` 付与、Button=`aria-expanded`、Panel=`hidden` 解除） |
 | `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
 | `flow` | Panel | `string` | — | パネル内コンテンツ領域（`c--accordion_content`）のフロー余白 |
 
@@ -70,10 +71,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 ソース: [Alert/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Alert)
 
 短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
 
 | Prop | 型 | デフォルト | 説明 |
 |------|-----|----------|------|
-| `type` | `'alert' \| 'point' \| 'warning' \| 'check' \| 'help' \| 'info'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
+| `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
 | `layout` | `'flex' \| 'withSide'` | `'flex'` | レイアウトプリミティブ |
@@ -139,17 +141,18 @@ import { Button } from '@lism-css/ui/astro/Button';
 ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
 
 記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
 
 | Prop | 型 | デフォルト | 説明 |
 |------|-----|----------|------|
-| `type` | `'note' \| 'alert' \| 'point' \| 'warning' \| 'check' \| 'help'` | `'note'` | コールアウトタイプ |
+| `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'note'` | コールアウトタイプ |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
 | `title` | `string` | — | タイトルテキスト |
 | `flow` | `string` | `'s'` | コンテンツ部分のフロー余白 |
 
 ```jsx
-<Callout type='note' title='Important' keycolor='blue'>Important note</Callout>
+<Callout type='note' title='Note'>Supplemental note</Callout>
 ```
 
 
@@ -237,7 +240,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
 | `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
-| `href` | Link | `string` | — | リンク先URL。指定ありで `a` 要素、なしで `span` 要素 |
+| `href` | Link | `string` | — | リンク先URL（Link は常に `a` 要素として出力） |
+| `hov` | Link | `string` | `-bgc` | ホバー時のスタイル。デフォルトで背景色が変化 |
 
 ```jsx
 <NavMenu.Root>

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/)
 
 ---
 
@@ -39,8 +45,7 @@ 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 } を追加
       ),
@@ -100,30 +104,86 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
 
-> **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
+### Vite / Astro プラグインの登録（推奨セットアップ）
 
-### Vite プラグインの登録（必須）
+`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `@lism-css/plugin` の統合プラグインを登録します。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
 
-`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `lism-css/vite-plugin` を登録する必要があります。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
+```bash
+pnpm add -D @lism-css/plugin
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { lismCss } from '@lism-css/plugin/vite';
+
+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.js` はプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `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 +193,7 @@ export default {
     // Property Class の出力をカスタマイズ
   },
   tokens: {
-    // トークン値を追加
+    // トークンを { key: value } の値マップで定義（CSS変数の値出力・ユーティリティ生成・props受理を一括）
   },
   traits: {
     // Trait（is--* / has--*）用の props を追加
@@ -152,7 +212,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 +224,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',
@@ -188,23 +252,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` で型エラーになりません。手書きの型拡張は不要です（`lism-env.d.ts` は git にコミットしてください）。
+
+なお、既存 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 +293,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 +314,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 +334,7 @@ CLI を使わず、追加クラス分の CSS をプロジェクト側で書い
 }
 ```
 
-### 4. SCSS で `lism.config.js` と整合させる
+### SCSS で `lism.config.js` と整合させる
 
 SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
 

package/dist/data/guides/naming.md

@@ -39,7 +39,7 @@
 
 | 形式 | 説明 | 例 |
 |------|------|-----|
-| `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--max-sz` |
+| `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--m` |
 | `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
 
 ### その他の変数

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

@@ -31,7 +31,7 @@
 
 ## Usage
 
-`<Icon>` には**4つの使い方**があります。
+`<Icon>` には**5つの使い方**があります。
 
 ### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
 
@@ -92,7 +92,7 @@ import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
 
 ### 5. `src` で画像をアイコンとして使う
 
-`src` を指定すると `<img>` として出力されます（厳密には4パターンに加えて画像指定も可能）。
+`src` を指定すると `<img>` として出力されます。
 
 ```jsx
 <Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />

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

@@ -65,7 +65,7 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
 | **CSS プロパティ** | 実際に制御される CSS プロパティ |
 | **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
-| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`、`✔ lg` は `lg` まで対応、`—` は非対応 |
+| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`・`lg` に対応、`—` は非対応 |
 
 
 ## 全 Prop 一覧
@@ -77,24 +77,24 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `f` | `font` | `-f:inherit` | — |
-| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
+| `fz` | `font-size` | `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
 | `fw` | `font-weight` | `-fw:light`, `-fw:normal`, `-fw:bold`, `-fw:100`〜`-fw:900` | — |
 | `ff` | `font-family` | `-ff:base`, `-ff:accent`, `-ff:mono` | — |
 | `fs` | `font-style` | `-fs:italic` | — |
-| `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
-| `hl` | `--hl` 変数のみ | — | — |
+| `hl` | `--hl`（ハーフレディング） | `-hl:base`, `-hl:xs`, `-hl:s`, `-hl:l`, `-hl:0` | ✔ |
+| `lh` | `line-height`（`--hl` 経由・互換） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
 | `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l`, `-lts:xl` | — |
 | `ta` | `text-align` | `-ta:center`, `-ta:left`, `-ta:right` | — |
 | `td` | `text-decoration` | `-td:none` | — |
 | `tt` | `text-transform` | `-tt:upper`, `-tt:lower` | — |
 
-**注意:** `lh` は `--hl`（half-leading）変数を介して `line-height: calc(1em + var(--hl) * 2)` を制御します。`hl` は `--hl` 変数を直接セットするだけの isVar タイプです。
+**注意:** Lism はハーフレディングで `line-height` を管理します（`line-height: calc(1em + var(--hl) * 2)`）。正規のプロパティは `hl` で、`--hl` にトークン値をセットします（`hl="0"` でハーフレディングなし、BP 指定可）。`lh` は互換ショートカットで、トークン値・`1` は `--hl` を制御し、`lh="1.7"` のような任意値はそのまま CSS `line-height` を出力します。新規コードでは `hl` を推奨します。
 
 ### 表示・可視性
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ lg |
+| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ |
 | `o` | `opacity` | `-o:0`, `-o:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
@@ -230,7 +230,7 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ lg |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ |
 | `cg` | `column-gap` | — | — |
 | `rg` | `row-gap` | — | — |
 
@@ -251,22 +251,22 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `gt` | `grid-template` | — | ✔ |
-| `gta` | `grid-template-areas` | — | ✔ lg |
-| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ lg |
-| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ lg |
+| `gta` | `grid-template-areas` | — | ✔ |
+| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ |
+| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ |
 | `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | ✔ |
 | `gac` | `grid-auto-columns` | — | — |
 | `gar` | `grid-auto-rows` | — | — |
-| `cols` | `--cols` 変数 | — | ✔ lg |
+| `cols` | `--cols` 変数 | — | ✔ |
 | `rows` | `--rows` 変数 | — | ✔ |
 
 ### Grid アイテム
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ga` | `grid-area` | `-ga:1/1` | ✔ lg |
-| `gc` | `grid-column` | `-gc:1/-1` | ✔ lg |
-| `gr` | `grid-row` | `-gr:1/-1` | ✔ lg |
+| `ga` | `grid-area` | `-ga:1/1` | ✔ |
+| `gc` | `grid-column` | `-gc:1/-1` | ✔ |
+| `gr` | `grid-row` | `-gr:1/-1` | ✔ |
 | `gcs` | `grid-column-start` | — | — |
 | `gce` | `grid-column-end` | — | — |
 | `grs` | `grid-row-start` | — | — |

package/dist/data/guides/responsive.md

@@ -19,16 +19,35 @@ Lism CSS は**コンテナクエリ**をデフォルトで採用しています
 ```
 Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
              │                       │                        │
-          sm:480px                md:800px               (lg:1120px)
+          sm:480px                md:800px               lg:1120px
 ```
 
 | BP | 値 | 効くタイミング |
 |----|-----|----------------|
+| `xs` | 0（無効） | （opt-in） |
 | `sm` | 480px | sm 以上 |
 | `md` | 800px | md 以上 |
-| (`lg`) | 1120px | lg 以上 |
+| `lg` | 1120px | lg 以上 |
+| `xl` | 0（無効） | （opt-in） |
 
-**レスポンシブ対応の Property Class は、基本的に標準では `sm` / `md` まで対応。** ただし `d`（display）/ `g`（gap）/ `cols` / グリッド系（`gta` `gtc` `gtr` `ga` `gc` `gr`）など、大枠のレイアウト構造に関わる一部のプロパティは `lg` まで対応。それ以外のプロパティで `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+**レスポンシブ対応の Property Class は、標準で `sm` / `md` / `lg` のすべてに対応。** どの Prop がレスポンシブ対応かは property-class.md の BP 列を参照。レスポンシブ非対応の Prop でブレイクポイント指定を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+
+**`xs` / `xl` は opt-in**:
+- デフォルト値は `0`（無効）で、CSS は出力されません。`lism.config.js` の `breakpoints` でサイズを与えると有効化されます（customize.md 参照）。
+- 型（Lism コンポーネント）でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`xs` / `xl` を使う場合は `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
+
+  ```ts
+  // src/lism.d.ts など
+  import 'lism-css';
+  declare module 'lism-css' {
+    interface BreakpointRegistry {
+      xl: true; // 配列の 5 要素目 [..., xl] と { xl: ... } を解禁
+      xs: true; // { xs: ... } を解禁（xs は配列記法では書けない）
+    }
+  }
+  ```
+
+- `xs` は配列記法では書けません（配列のインデックス → BP の対応が `[base, sm, md, lg, xl]` で固定のため）。オブジェクト記法（`{ xs: ... }`）でのみ指定します。`xl` は配列記法・オブジェクト記法の両方で利用できます。
 
 例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
 
@@ -99,10 +118,10 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 配列形式またはオブジェクト形式でレスポンシブ値を指定します。
 
 ```jsx
-// 配列形式: [デフォルト, sm, md]
+// 配列形式: 位置は [base, sm, md, lg, xl] で固定（xs は配列記法では書けない）
 <Box p={[20, 30, 40]} fz={['s', 'm', 'l']} />
 
-// オブジェクト形式
+// オブジェクト形式（xs を使う場合はこちら）
 <Box p={{ base: '20', sm: '30', md: '40' }} />
 ```
 

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

@@ -36,11 +36,11 @@ set-- は目的別に 2 カテゴリに分かれます。
 |--------|---------------|
 | `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.scss) |
 | `set--revert` | [`_revert.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_revert.scss) |
-| `set--bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
+| `set--bxsh` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
 | `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
 | `set--bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
 | `set--bleed` | [`_bleed.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bleed.scss) |
-| `set--s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
+| `set--s` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
 
 ---
 

package/dist/data/guides/tokens.md

@@ -10,7 +10,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [トークン概要テーブル](#トークン概要テーブル)
 - [余白 (space)](#余白-space)
 - [フォントサイズ (fz)](#フォントサイズ-fz)
-- [行間 (lh/hl)](#行間-lhhl)
+- [行間 (hl/lh)](#行間-hllh)
 - [字間 (lts)](#字間-lts)
 - [フォント (ff)](#フォント-ff)
 - [ウェイト (fw)](#ウェイト-fw)
@@ -31,18 +31,18 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
 | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
-| フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
-| ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
+| フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
+| ハーフレディング・行間 (hl/lh) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
 | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
 | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `bleed` | `--sz--{key}` | `--sz--l` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `base`, `s` | `--flow--{key}` | `--flow--base` |
-| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
+| セマンティックカラー (color) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
 
 
@@ -103,12 +103,11 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--fz--xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))` | XS（mol/(mol+2)） |
 | `--fz--2xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))` | 最小（mol/(mol+3)） |
 | `--fz--base` | `1rem` | 本文の基本フォントサイズ |
-| `--fz--root` | — | `:root` のフォントサイズ |
 
 `--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
 
 
-## 行間 (lh/hl)
+## 行間 (hl/lh)
 
 ハーフレディングの大きさ。Lism CSSでは、`line-height` は `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`（≒ 2px）を基準単位とする。
 
@@ -134,8 +133,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 |
 |---------|-----|
-| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'` |
-| `--ff--accent` | `'Garamond', 'Baskerville', 'Times New Roman', serif` |
+| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif` |
+| `--ff--accent` | `Georgia, serif` |
 | `--ff--mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
 
 
@@ -188,7 +187,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 初期値 |
 |---------|-----|
-| `--shc` | `hsl(220 4% 8% / 15%)` |
+| `--shadow` | `hsl(220 4% 8% / 12%)` |
+| `--shc` | `var(--shadow)` |
 | `--shsz--10` | `0px 1px 3px` |
 | `--shsz--20` | `0px 2px 6px` |
 | `--shsz--30` | `0px 4px 12px` |
@@ -230,11 +230,11 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | デフォルト値 | 説明 |
 |---------|------------|------|
-| `--base` | `hsl(224 4% 99%)` | ベース背景色 |
-| `--base-2` | `hsl(224 8% 95%)` | 代替背景色 |
-| `--text` | `hsl(224 4% 8%)` | 基本テキスト色 |
-| `--text-2` | `hsl(224 6% 32%)` | 補助テキスト色 |
-| `--divider` | `hsl(224 8% 88%)` | 区切り線色 |
+| `--base` | `hsl(220 0% 99%)` | ベース背景色 |
+| `--base-2` | `hsl(220 4% 95%)` | 代替背景色 |
+| `--text` | `hsl(220 0% 8%)` | 基本テキスト色 |
+| `--text-2` | `hsl(220 4% 32%)` | 補助テキスト色 |
+| `--divider` | `hsl(220 4% 88%)` | 区切り線色 |
 | `--link` | `oklch(50% 0.3 240)` | リンク色 |
 | `--brand` | `#1e5f8c` | ブランド色 |
 | `--accent` | `#d94a6a` | アクセント色 |
@@ -249,7 +249,7 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 | `--red` | `oklch(var(--L) var(--C) 20)` |
 | `--orange` | `oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48)` |
 | `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80)` |
-| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152)` |
+| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)` |
 | `--blue` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264)` |
 | `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288)` |
 | `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352)` |

package/dist/data/guides/trait-class/is--boxLink.md

@@ -28,8 +28,8 @@ BoxLink には主に2通りの使い方があります。
 ```jsx
 <BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="-o">
   <Group fz="xl" fw="bold">Heading text</Group>
-  <Text lh="s" mbs="15">記事の抜粋テキスト...</Text>
-  <Group fz="s" c="text-2" ta="right" lh="1" mbs="10">
+  <Text hl="s" mbs="15">記事の抜粋テキスト...</Text>
+  <Group fz="s" c="text-2" ta="right" hl="0" mbs="10">
     MORE →
   </Group>
 </BoxLink>
@@ -38,8 +38,8 @@ BoxLink には主に2通りの使い方があります。
 ```html
 <a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
   <p class="-fz:xl -fw:bold">Heading text</p>
-  <p class="-c:text-2 -lh:s -mbs:15">記事の抜粋テキスト...</p>
-  <p class="-fz:s -c:text-2 -ta:right -lh:1 -mbs:10">MORE →</p>
+  <p class="-c:text-2 -hl:s -mbs:15">記事の抜粋テキスト...</p>
+  <p class="-fz:s -c:text-2 -ta:right -hl:0 -mbs:10">MORE →</p>
 </a>
 ```
 
@@ -54,7 +54,7 @@ BoxLink には主に2通りの使い方があります。
       Heading link text
     </Link>
   </Group>
-  <Text c="text-2" lh="s" mbs="15">記事の抜粋テキスト...</Text>
+  <Text c="text-2" hl="s" mbs="15">記事の抜粋テキスト...</Text>
   <Group mbs="10">
     <a href="/tag/foo" className="-hov:-o">Inner Link</a>
   </Group>
@@ -66,7 +66,7 @@ BoxLink には主に2通りの使い方があります。
   <div class="-fz:xl -fw:bold">
     <a class="is--coverLink" href="/article/1">Heading link text</a>
   </div>
-  <p class="-c:text-2 -lh:s -mbs:15">記事の抜粋テキスト...</p>
+  <p class="-c:text-2 -hl:s -mbs:15">記事の抜粋テキスト...</p>
   <div class="-mbs:10">
     <a href="/tag/foo" class="-hov:-o">Inner Link</a>
   </div>

package/dist/data/guides/trait-class/is--wrapper.md

@@ -87,13 +87,17 @@
 `is--wrapper` 直下の子要素には次のスタイルが当たる：
 
 ```scss
-.is--wrapper > * {
-  inline-size: 100%;
-  max-inline-size: min(100%, var(--contentSize));
-  margin-inline: auto;
+.is--wrapper {
+  --contentSize: var(--sz--m, 100%);
+  > * {
+    inline-size: 100%;
+    max-inline-size: min(100%, var(--contentSize));
+    margin-inline: auto;
+  }
 }
 ```
 
+- `--contentSize` の初期値は `var(--sz--m, 100%)`（`m` 相当）。`-contentSize:s` / `-contentSize:m` / `-contentSize:l` / `-contentSize:xl` のプリセットクラスは `contentSize` Prop の auto-generated 出力から props 層へ自動生成される
 - `inline-size: 100%` により、自然幅が `--contentSize` 未満の要素（短い段落、`<table>` など）も常に親幅まで広げてから `max-inline-size` で制限される。これにより `l--stack` などの flex 縦並び配下でも横幅が揃い、ガタつきが起きない
 - `<table>` を直下に置くと内容依存の自然幅にはならず、常に wrapper 幅まで広がる。テーブルの自然幅を保ちたい場合は `is--wrapper` を直接の親にしないように、間に別の要素を挟む
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-05-28',
-    sourceCommit: '3c46037f',
+    generatedAt: '2026-06-19',
+    sourceCommit: '2fa37425',
     docsVersion: '0.1.0',
 };

package/dist/lib/markdown-utils.d.ts

@@ -20,7 +20,7 @@ export interface PropRow {
     cssProperty: string;
     /** 所属する ### セクション名 */
     sectionName: string;
-    /** プリセット値クラス列の生テキスト（例: "-fz:root, -fz:base, ..."） */
+    /** プリセット値クラス列の生テキスト（例: "-fz:base, -fz:5xl, ..."） */
     presetColumn: string;
 }
 /**

package/dist/tools/convert-css.js

@@ -56,7 +56,7 @@ function parseCssDeclarations(cssText) {
     }
     return declarations;
 }
-/** プリセット値列から値を抽出する（例: "-fz:root, -fz:base" → ["root", "base"]） */
+/** プリセット値列から値を抽出する（例: "-fz:base, -fz:5xl" → ["base", "5xl"]） */
 function extractPresetValues(presetColumn, propName) {
     if (!presetColumn || presetColumn === '—' || presetColumn === '-')
         return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {