@lism-css/mcp 0.24.0 → 0.27.0

package/dist/data/docs-index.json

@@ -68,12 +68,12 @@
       "Set Class",
       "Primitive Class",
       "Trait Class",
-      "Component Class",
+      "Block Class",
+      "Custom Class",
       "Utility Class",
       "Property Class",
       "レスポンシブ対応の Property Class",
-      "独自クラスの命名と定義場所",
-      "独自分類の追加",
+      "既存クラスの追加・上書き",
       "動的な状態管理はdata属性"
     ],
     "keywords": [
@@ -87,13 +87,17 @@
       "Property Class",
       "Primitive Class",
       "Trait Class",
-      "Component Class",
+      "Custom Class",
       "Set Class",
       "Utility Class",
       "省略",
-      "Emmet"
+      "Emmet",
+      "b--",
+      "Block Class",
+      "c--",
+      "2分類"
     ],
-    "snippet": "CSSの階層構造を明確に定義。@layer lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility の順。Primitive Class (.l--name, .a--name)、Trait Class (.is--name, .has--name)、Component Class (.c--name)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
+    "snippet": "CSSの階層構造を明確に定義。@layer lism-base → lism-block → lism-trait → lism-primitive → lism-custom → lism-utility の順（Property Class はレイヤーの外）。lism-block は trait / primitive より弱いレイヤーのため、`b--` のベーススタイルには明示的に付与したクラス（`is--` / `has--` / `l--` など）が勝つ（レイヤーによるこの優先関係が保証されるのは標準ビルド（`main.css` / `full.css`）のみ。`main_no_layer.css` / `full_no_layer.css` では Property Class は常に `!important`、`u--` はセレクタ二重化（0-2-0）で「Property Class > Utility Class > 単一クラス」の序列だけを再現し、それ以外は読み込み順と詳細度に依存する）。Primitive Class (.l--name, .a--name)、Trait Class (.is--name, .has--name)、Block Class (.b--name)、Custom Class (.c--name)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。独自クラスは、サイト共通で繰り返し使う基礎部品（ボタン・バッジ・カード級）はベーススタイルをCSS側で管理する `b--{name}`（@layer lism-block）、それ以外の粒度不問なカスタムクラス全般は `c--{name}`（Custom Class、@layer lism-custom）の2分類で整理する。`b--` と `c--` はどちらも同じBEM構造（Block/Modifier/Element）を持てる。"
   },
   {
     "sourcePath": "naming.mdx",
@@ -137,6 +141,8 @@
       "カスタムプロパティ",
       "Property Class",
       "prefix",
+      "b--",
+      "Block Class",
       "camelCase",
       "token",
       "breakpoint",
@@ -144,16 +150,30 @@
       "max-",
       "min-"
     ],
-    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、状態管理用の内部変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
+    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、状態管理用の内部変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`b--`, `c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
   },
   {
     "sourcePath": "tokens.mdx",
     "title": "デザイントークン",
     "description": "Lism CSS で定義されているカラー、余白、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
-    "headings": ["COLOR", "Typography", "SPACE", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
-    "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size", "color", "spacing", "typography"],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。SPACEは --s5〜--s80（s25/s35 を含む12段階）、SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
+    "headings": ["COLOR", "Typography", "RADIUS", "SHADOW", "SPACE", "OPACITY", "SIZE"],
+    "keywords": [
+      "token",
+      "トークン",
+      "design token",
+      "shadow",
+      "radius",
+      "opacity",
+      "size",
+      "color",
+      "spacing",
+      "余白",
+      "フィボナッチ",
+      "--s-unit",
+      "typography"
+    ],
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, RADIUS, SHADOW, SPACE, OPACITY, SIZE トークンを掲載。SPACEはフィボナッチ数列ベースの余白スケール --s5〜--s80（s25/s35 を含む12段階）で、--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出。SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィは個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -181,35 +201,21 @@
       "FW : font-weight",
       "FZ: font-size",
       "フォントサイズのスケーリング規則について",
+      "HL: half-leading",
       "LH: line-height",
       "LTS: letter-spacing"
     ],
-    "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "font-size"],
-    "snippet": "フォントサイズ（調和数列ベース）、文字間隔などのタイポグラフィ設計を解説。フォントサイズのスケーリング規則を紹介。"
+    "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "font-size", "line-height", "hl", "lh", "行間"],
+    "snippet": "フォントサイズ（調和数列ベース）、行間（ハーフレディングトークン --hl--xs〜xl と -hl:{token} クラス、line-height比率トークン --lh--xs〜xl と -lh:{token} クラス）、文字間隔などのタイポグラフィ設計を解説。フォントサイズのスケーリング規則を紹介。"
   },
   {
-    "sourcePath": "tokens/half-leading.mdx",
+    "sourcePath": "half-leading.mdx",
     "title": "ハーフレディング（line-height）",
-    "description": "Lism CSS のハーフレディングによる line-height 管理の仕組みと、関連するデザイントークンについて解説します。",
+    "description": "Lism CSS が line-height をハーフレディングで管理する仕組みと、その設計のメリットについて解説します。",
     "category": "guide",
-    "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",
-    "title": "余白トークン",
-    "description": "Lism CSS のフィボナッチ数列に基づく余白トークンと、対応するpropertyクラスについて解説します。",
-    "category": "guide",
-    "headings": [
-      "SPACE: 余白のスケーリング",
-      "対応する Property Class",
-      "フルサポート（トークン値 5〜80）",
-      "プリセットクラスなし",
-      "margin 系の auto 対応"
-    ],
-    "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class", "set--s", "--s-unit"],
-    "snippet": "フィボナッチ数列ベースの余白スケーリング（--s5〜--s80、s25/s35 を含む12段階）を定義。--s-unit（calc(var(--fz--base) * 0.5) ≒ 8px）を基準単位として算出。set--s クラスを使うと --s-unit が 0.5em に切り替わり、余白がフォントサイズ基準で再計算される。p, px, py, m, mx, my, mbs, g 等のpropertyクラスでフルサポート（トークン値 5〜80）。ps/pe/pbs/pbe/pl/pr/pt/pb・ms/me/mbe・ml/mr/mt/mb・cg/rg はプリセットクラスなし（CSS変数やjsx propでの値指定は可）。"
+    "headings": ["仕組み", "トークン", "lh（line-height）", "hl との棲み分け", "ハーフレディング管理のメリット"],
+    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "hl", "lh", "--hl", "--lh"],
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理するCSS設計を解説。`var(--lh, calc(1em + var(--hl) * 2))` によりフォントサイズに依存しない一定の行間を実現。line-heightは全要素ルールで管理されるため素のCSS指定は子要素へ継承されない点、実line-height（unitless比率）を--lh経由で管理する独立プロパティlh（-lh:{token}・任意数値）とhlとの棲み分け、ハーフレディング管理のメリットも紹介。"
   },
   {
     "sourcePath": "property-class.mdx",
@@ -432,32 +438,31 @@
   {
     "sourcePath": "customize.mdx",
     "title": "Customize",
-    "description": "Lism CSS のカスタマイズ方法の全体像。ビルドCSSの選択・lism.config.js・SCSS・CSS Purge のどれを使うべきかを目的別に案内します。",
+    "description": "Lism 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つの入口を案内する概要ハブページ。"
+    "snippet": "Lism CSS のカスタマイズ方法の全体像。ビルド構成に応じて「lism.config.js でのカスタマイズ」（@lism-css/plugin を使う構成向け。プラグインなしでも CLI ビルドで反映可）「SCSS でのカスタマイズ」（lism-css/scss を直接読み込む構成向け）「CSS Purge」（両者と併用可）の3つの入口を案内する概要ハブページ。@layer なし版や full.css への切り替えは設定ではなくファイル選択のため「CSSファイルの種類」ページへ誘導。"
   },
   {
-    "sourcePath": "customize/build.mdx",
-    "title": "CSSビルドの選択",
-    "description": "@layer のオン / オフや full.css への切り替えなど、読み込むビルド済みCSSを選ぶ方法を解説します。",
+    "sourcePath": "css-files.mdx",
+    "title": "CSSファイルの種類",
+    "description": "lism-css に同梱される main.css / main_no_layer.css / full.css / full_no_layer.css の違いと、@layer なし版・全部入りビルドを使うときの注意点を解説します。",
     "category": "guide",
-    "headings": ["@layer をオフにする", "全部入りビルド（full.css）を使う", "isFullMode"],
+    "headings": ["@layer をオフにする", "全部入りビルド（full.css）を使う"],
     "keywords": [
-      "customize",
-      "カスタマイズ",
-      "build",
-      "ビルド",
       "CSS",
+      "CSSファイル",
+      "配布ファイル",
       "@layer",
       "full.css",
       "isFullMode",
       "main.css",
       "main_no_layer.css",
-      "full_no_layer.css"
+      "full_no_layer.css",
+      "!important"
     ],
-    "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 生成）。"
+    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。@layer なし版は既存サイト・WordPress テーマなどカスケードを制御できない環境向けで、Property Class は常に !important 付き、u--trim / u--trimAll / u--cbox / u--divide / u--enclose はセレクタ二重化（.u--trim.u--trim = 0-2-0）で出力され「Property Class > Utility Class > 単一クラス」の序列を再現する（lism.config.js の defaultImportant: false・$default_important: 0・props の個別 important: 0 でも !important は外れない）。full.css には main.css 非収録の Property Class ブレイクポイント対応クラス（isVar 系・border ショートハンド系を除く。border は bds / bdc のサブプロパティで BP 対応）と、カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など。main.css は厳選したセマンティックカラーと keycolor のみ）を含む。スペーシング系（padding / margin / gap）のトークンユーティリティは main.css に収録済み。コンポーネント出力も full.css に合わせるには lism.config.js の isFullMode を使う（詳細は customize/config.mdx）。"
   },
   {
     "sourcePath": "customize/config.mdx",
@@ -465,16 +470,17 @@
     "description": "lism.config.js と @lism-css/plugin を使って、コンポーネントの props / tokens / traits やブレイクポイントを拡張する方法を解説します。",
     "category": "guide",
     "headings": [
-      "Vite / Astro プラグインの登録（必須）",
+      "セットアップ",
+      "設定ファイルの書き方",
       "フォーマット",
-      "型サポート（LismConfig）",
       "カスタマイズ例",
       "ブレイクポイント（xs / xl）の有効化",
-      "追加スタイルを読み込ませる方法",
-      "Vite / Astro プラグイン使用時は自動反映される",
-      "軽微な追加なら手書きで済ませる",
-      "lism-css のCLIコマンドでCSSビルドする",
-      "SCSSファイルへの追加上書き"
+      "isFullMode",
+      "型サポート",
+      "設定ファイルを書くときの型（LismConfig）",
+      "コンポーネントを使うときの型（lism-env.d.ts）",
+      "統合プラグインを使わない構成で反映する",
+      "CLI ビルド"
     ],
     "keywords": [
       "customize",
@@ -498,9 +504,11 @@
       "型",
       "型チェック",
       "補完",
-      "TypeScript"
+      "TypeScript",
+      "isFullMode",
+      "full.css"
     ],
-    "snippet": "lism.config.js（または lism.config.ts / lism.config.mjs）を使ったコンポーネントの挙動カスタマイズ方法。プラグインはプロジェクトルートから lism.config.ts → lism.config.mjs → lism.config.js の順で自動検出し、configPath オプションで別パスも指定可能。@lism-css/plugin の統合プラグイン登録（必須）から props / tokens / traits の追加・拡張、lism-css/config-types の LismConfig 型による設定ファイルの型チェック・補完（.ts は satisfies LismConfig、.js は JSDoc @type）、ブレイクポイント（xs / xl）の有効化、追加スタイルの読み込み方法（自動反映・CLI・手書き・SCSS）まで解説。"
+    "snippet": "lism.config.js（または lism.config.ts / lism.config.mjs）を使ったコンポーネントの props / tokens / traits・ブレイクポイントの拡張方法。冒頭で構成別の反映範囲を整理: Vite / Astro（@lism-css/plugin の統合プラグイン）と Next.js（withLism）はコンポーネント・CSS とも自動反映、lism.config.js を使うには @lism-css/plugin が必須。それ以外の構成ではコンポーネントに lism.config.js は読み込まれず、CSS のみ同梱 CLI（lism-css build / --full）で手動反映し、コンポーネントからは :value 記法で強制クラス化（クライアント側は window._LISM_CSS_CONFIG_ で実行時マージ可、isFullMode は除く）。プラグインは lism.config.ts → .mjs → .js の順で自動検出、configPath で別パス指定可。設定ファイルの書き方（フォーマット・デフォルト値・カスタマイズ例）、ブレイクポイント（xs / xl）の有効化（bp の配列指定で絞り込み可、purge 併用前提）、isFullMode の効果と例外、型サポート（設定ファイルを書くときの LismConfig と、コンポーネントを使うときの自動生成 lism-env.d.ts。未使用時は FullModeRegistry を手書き拡張）まで解説。"
   },
   {
     "sourcePath": "customize/scss.mdx",
@@ -511,8 +519,9 @@
       "上書き可能な変数",
       "基本フォーマット",
       "$props の個別カスタマイズ",
+      "追加した値をコンポーネントから使う",
       "ブレイクポイント（xs / xl）の有効化",
-      "SCSSのコンパイル処理について"
+      "CSS の出力順について"
     ],
     "keywords": [
       "customize",
@@ -526,7 +535,7 @@
       "ブレイクポイント",
       "CSS出力"
     ],
-    "snippet": "lism-css の setting モジュールの SCSS 変数を @use ... with (...) で上書きして、出力されるクラスやブレイクポイントを調整する方法。$breakpoints / $is_container_query / $default_important / $props の個別カスタマイズ（bp・important・utilities）、ブレイクポイント（xs / xl）の有効化などを解説。純 SCSS 構成向け。"
+    "snippet": "lism-css の setting モジュールの SCSS 変数を @use ... with (...) で上書きして、出力されるクラスやブレイクポイントを調整する方法。$breakpoints / $is_container_query / $default_important（@layer なし版では無視され常に !important 付与）/ $props の個別カスタマイズ（bp・important・utilities）、SCSS で追加した値をコンポーネントから使う方法（コンポーネント側には届かないため :value 記法で強制クラス化するか HTML に直接クラスを書く。少数なら global.css に手書きでも可）、ブレイクポイント（xs / xl）の有効化などを解説。lism.config.js と @lism-css/plugin を使わない構成向け。"
   },
   {
     "sourcePath": "customize/purge.mdx",
@@ -534,17 +543,18 @@
     "description": "ビルド時に未使用の Lism CSS クラスを削除し、本番 CSS を軽量化するパージプラグインのセットアップと使い方。",
     "category": "guide",
     "headings": [
-      "推奨セットアップ（統合プラグイン経由）",
+      "推奨セットアップ（統合プラグインを使う）",
       "仕組み",
       "単体プラグインを直接使う場合",
       "full.css と組み合わせる",
       "オプション",
       "safelist",
       "report",
+      "known",
       "注意事項"
     ],
     "keywords": ["purge", "CSS purge", "パージ", "軽量化", "未使用", "full.css", "@lism-css/plugin", "lismPurge", "safelist", "build"],
-    "snippet": "ビルド成果物をスキャンして使用中の Lism CSS クラスだけを残すパージ機能。@lism-css/plugin の統合プラグインで purge: true を渡すだけで有効化可能。仕組み・単体プラグイン直接利用・full.css との併用・safelist / report オプション・注意事項を解説。"
+    "snippet": "ビルド出力をスキャンして使われている Lism CSS クラスだけを残すパージ機能。@lism-css/plugin の統合プラグインで purge: true を渡すだけで有効化可能。仕組み・単体プラグイン直接利用・full.css との併用・safelist / report / known オプション（known 未指定時は lism.config.js 反映済み full.css から自動構築。safelist に RegExp / 関数があると未一致の属性セレクタは全て残す）・注意事項を解説。"
   },
   {
     "sourcePath": "utility-class.mdx",
@@ -651,6 +661,18 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.26.0 (2026.08.16)",
+      "`lism-block` レイヤーの追加 (#546, #559)",
+      "独自クラスの命名規約を2分類へ統一 (#546)",
+      "その他",
+      "`@lism-css/ui` v.0.26.0 (2026.08.16)",
+      "lism-css v.0.25.0 (2026.08.06)",
+      "構造変数を lism.config から上書き可能に (#530)",
+      "spacing系の方向指定 props を main.css でもクラス化 (#531)",
+      "カラー系 Property Class の拡充 (#533)",
+      "その他",
+      "`@lism-css/plugin` v.0.4.2 (2026.08.06)",
+      "`@lism-css/ui` v.0.25.0 (2026.08.06)",
       "lism-css v.0.24.0 (2026.07.06)",
       "AI スキル群の刷新 (#459)",
       "`@lism-css/plugin` v.0.4.0 (2026.07.06)",
@@ -697,9 +719,13 @@
       "migration",
       "移行",
       "LismConfig",
-      "AIスキル"
+      "AIスキル",
+      "lism-block",
+      "Block Class",
+      "Custom Class",
+      "破壊的変更"
     ],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.24.0 (2026.07.06) では config の値（utils/presets/token）から型を導出しコンポーネント補完に反映（#505）、lism.config 執筆用の LismConfig 型追加（#472）、body に display: flow-root 追加、pre のデフォルトスタイル変更（#477）。AIスキル群を刷新し lism-css-refactor を新設（#459）。@lism-css/plugin v.0.4.0 では lism.config.ts 読み込み対応（#461）、purge の Astro SSR/hybrid 対応強化（#495, #503）。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）など。v0.18.0 以前は主要な変更点のみ抜粋掲載（--sz--* トークンの px 統一、-max-sz:bleed 新設、ユーティリティ・Layout Primitive のリネーム、CSSレイヤー構造の再編など）。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.26.0 (2026.08.16) ではベーススタイルをCSSで管理する `b--` 用の `lism-block` レイヤーを追加（`lism-base` の直後に配置し、`is--`/`has--`/`l--` など明示的に付与したクラスが常に勝つ設計、#546, #559）、独自クラスの命名規約を `b--`（Block Class）/ `c--`（Custom Class）の2分類へ統一し `p--`/`z--` を廃止（#546）。`@lism-css/ui` v.0.26.0（破壊的変更）では全コンポーネントのクラスを `c--` から `b--` へ移行しCSSレイヤーも `lism-component` から `lism-block` へ移行、Badge/Tabs/Avatar/Button/Accordion/Details/NavMenu 等のデフォルトスタイルをCSS管理へ移行、Tabs/Modalのアクセシビリティ改善（roving tabindex、reduced-motion対応等）、Chatコンポーネントを削除（#559, #563, #564）。v.0.25.0 (2026.08.06) では `--L`/`--C`/`--fz-mol` 等の構造変数をトークンの `vars` グループへ移動し `lism.config` の `tokens` から上書き可能に（#530）、spacing系の方向指定props（ps/pe/pl/pt等 全18種）をmain.cssでもトークンクラス・BPクラス化（#531）、カラー系Property Class拡充（`-c:keycolor`等をmain.cssへ追加、full.cssで全カラートークンクラス化、`-bgc:current`追加）（#533）。v.0.24.0 (2026.07.06) では config の値（utils/presets/token）から型を導出しコンポーネント補完に反映（#505）、lism.config 執筆用の LismConfig 型追加（#472）、body に display: flow-root 追加、pre のデフォルトスタイル変更（#477）。AIスキル群を刷新し lism-css-refactor を新設（#459）。@lism-css/plugin v.0.4.0 では lism.config.ts 読み込み対応（#461）、purge の Astro SSR/hybrid 対応強化（#495, #503）。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）など。v0.18.0 以前は主要な変更点のみ抜粋掲載（--sz--* トークンの px 統一、-max-sz:bleed 新設、ユーティリティ・Layout Primitive のリネーム、CSSレイヤー構造の再編など）。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
@@ -762,7 +788,7 @@
     "category": "core-components",
     "headings": ["Import", "Lism Props"],
     "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "className", "layout", "atomic", "as", "exProps"],
-    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。className で c-- クラスや任意クラスを指定、layout で l-- クラス、atomic で a-- クラス（divider / spacer / decorator）を指定可能。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。className で b-- / c-- クラス（Block Class / Custom Class）や任意クラスを指定、layout で l-- クラス、atomic で a-- クラス（divider / spacer / decorator）を指定可能。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
   },
   {
     "sourcePath": "core-components/lism-props.mdx",
@@ -815,7 +841,7 @@
       "省略記法",
       "contentSize"
     ],
-    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で c-- クラス（Component Class）や任意クラスを直接指定（以前の lismClass/variant を一本化）、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isCoverLink, isContainer, isSide, isSkipFlow, hasTransition, hasGutter, hasSnap, hasMask などの Trait Props も提供。CSS Props (p, fz, c 等) は値の種類に応じて class / CSS変数 / style属性を自動で切り替え、配列・オブジェクト形式でレスポンシブ指定も可能。exProps で外部コンポーネント向け props を明示的に渡せる。生成される class 属性は className → a-- → l-- → set-- → is-- / has-- → u-- → - の順で出力される。"
+    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で b-- / c-- クラス（Block Class / Custom Class）や任意クラスを直接指定（以前の lismClass/variant を一本化）、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isCoverLink, isContainer, isSide, isSkipFlow, hasTransition, hasGutter, hasSnap, hasMask などの Trait Props も提供。CSS Props (p, fz, c 等) は値の種類に応じて class / CSS変数 / style属性を自動で切り替え、配列・オブジェクト形式でレスポンシブ指定も可能。exProps で外部コンポーネント向け props を明示的に渡せる。生成される class 属性は className → a-- → l-- → set-- → is-- / has-- → u-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -1266,12 +1292,13 @@
     "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "基本構造",
-      "ソースコード",
       "Examples",
+      "スタイリング例",
       "見出しタグを変更する",
       "アニメーション時間を変更する",
       "最初の一つを開いた状態にする",
@@ -1296,7 +1323,7 @@
     "title": "Modal",
     "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "基本構造", "ソースコード", "Examples", "ドロワーメニューの作成例"],
+    "headings": ["Overview", "Styles", "How to use", "Import", "Props", "Examples", "コンテンツが長い場合の例", "ドロワーメニューの作成例"],
     "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ", "popup"],
     "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
   },
@@ -1306,20 +1333,21 @@
     "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "基本構造",
-      "ソースコード",
+      "キーボード操作",
       "Examples",
-      "基本例",
+      "variant=\"line\"",
       "最初に開いておくタブ番号を指定する",
-      "タブコンテンツを横並び配置にする",
+      "URLパラメータで初期タブを指定する",
+      "縦並びタブ",
       "Opt-in",
-      "スタイルバリエーションの作成例",
-      "c--tabs--line",
-      "c--tabs--emboss",
-      "高さを固定する方法"
+      "variant=\"emboss\"",
+      "variant=\"folder\"",
+      "高さを固定する"
     ],
     "keywords": [
       "Tabs",
@@ -1335,7 +1363,7 @@
       "Tabs.Panel",
       "--_isSelected"
     ],
-    "snippet": "タブ切り替えUI。Tabs.Root / Tabs.Item / Tabs.Tab / Tabs.Panel で構成。defaultIndex で初期タブ指定、listProps でタブリストへの props 渡しが可能。横並び配置やスタイルバリエーション（line/emboss 等）、高さ固定のOpt-in解説あり。@lism-css/uiパッケージで提供。"
+    "snippet": "タブ切り替えUI。Tabs.Root / Tabs.Item / Tabs.Tab / Tabs.Panel で構成。defaultIndex で初期タブ指定、listProps でタブリストへの props 渡しが可能。variant の初期値は default で、独自 variant 指定時は既定装飾（b--tabs--default）が外れる。左右キー・Home/End でのキーボード操作（listProps で aria-orientation=\"vertical\" を指定すると上下キー）と、URLパラメータ（?lism-tab=）での初期タブ指定に対応。line variant は標準提供。emboss / folder などの独自バリアント作成例や横並び配置、高さ固定の Opt-in 解説あり。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Details.mdx",
@@ -1343,14 +1371,16 @@
     "description": "@lism-css/ui で提供する Details コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "基本構造",
-      "ソースコード",
       "Examples",
-      "タイトルのHTMLタグを変更し、複数同時展開を制限する例",
-      "アニメーション時間を変更する例"
+      "スタイリング例",
+      "タイトルのHTMLタグを変更する",
+      "複数同時展開を制限する",
+      "アニメーション時間を変更する"
     ],
     "keywords": ["Details", "details", "summary", "開閉", "disclosure"],
     "snippet": "HTMLのdetails/summary要素をラップ。ネイティブのHTML要素を使用したアコーディオン。@lism-css/uiパッケージで提供。"
@@ -1361,17 +1391,17 @@
     "description": "@lism-css/ui で提供する Alert コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "ソースコード",
       "Examples",
       "カラーとアイコンを指定する例",
       "`l--withSide` を使ってレスポンシブ対応",
       "ボタン付き + ブレイクポイントによるレスポンシブ対応",
-      "`l--withSide` を使ったレスポンシブ対応",
       "type一覧",
-      "Only lism-css"
+      "Without @lism-css/ui"
     ],
     "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パッケージで提供。"
@@ -1381,7 +1411,18 @@
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "`icon`、`keycolor`を指定", "Only lism-css"],
+    "headings": [
+      "Overview",
+      "Styles",
+      "How to use",
+      "Import",
+      "Props",
+      "Examples",
+      "type一覧",
+      "`icon`、`keycolor`を指定",
+      "`title` を指定しない場合",
+      "Without @lism-css/ui"
+    ],
     "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight", "type", "keycolor", "icon", "title"],
     "snippet": "記事の中で重要なポイントを示すためのコンポーネント。type prop（info/alert/warning/point/check/help/note/tip）でアイコンとキーカラーをまとめて設定。title でタイトルテキストを表示。@lism-css/uiパッケージで提供。"
   },
@@ -1391,18 +1432,19 @@
     "description": "@lism-css/ui で提供する Button コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "ソースコード",
       "Examples",
       "variant: outline",
       "アイコンを使う例",
-      "サイズの調整",
+      "スタイルの調整",
       "Gridでアイコンを端に寄せる",
-      "Opt-in",
-      "hov=\"reverse\"",
-      "Only lism-css"
+      "Without @lism-css/ui",
+      "Opt-in Styles",
+      "hov=\"reverse\""
     ],
     "keywords": ["Button", "ボタン", "クリック", "outline", "action", "CTA", "submit"],
     "snippet": "ボタンコンポーネント。variant (outline 等) と keycolor でバリエーションを表現。@lism-css/uiパッケージで提供。"
@@ -1413,15 +1455,18 @@
     "description": "@lism-css/ui で提供する Badge コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "ソースコード",
       "Examples",
+      "カラーパレットの活用",
       "variant: outline",
       "u--cbox との併用",
+      "スタイルの調整例",
       "アイコンを使用する例",
-      "Only lism-css"
+      "Without @lism-css/ui"
     ],
     "keywords": ["Badge", "バッジ", "ラベル", "タグ", "status", "ステータス表示", "tag label", "カテゴリ表示"],
     "snippet": "バッジ (ラベル) コンポーネント。カテゴリやステータスの表示に使用。@lism-css/uiパッケージで提供。"
@@ -1431,18 +1476,32 @@
     "title": "Avatar",
     "description": "@lism-css/ui で提供する Avatar コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "Only lism-css"],
-    "keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸", "user icon", "ユーザーアイコン"],
-    "snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。@lism-css/uiパッケージで提供。"
+    "headings": ["Overview", "Styles", "How to use", "Import", "Props", "Examples", "イニシャル表示", "Without @lism-css/ui"],
+    "keywords": [
+      "Avatar",
+      "アバター",
+      "プロフィール",
+      "画像",
+      "丸",
+      "user icon",
+      "ユーザーアイコン",
+      "イニシャル",
+      "initial",
+      "プレースホルダー",
+      "placeholder",
+      "name",
+      "b--avatar--initial"
+    ],
+    "snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。src 未指定時はルートに b--avatar--initial が付き、name の先頭1文字をイニシャルとして中央に表示し、alt は name より優先される代替テキスト（alt=\"\" で装飾扱い）。@lism-css/uiパッケージで提供。"
   },
   {
-    "sourcePath": "ui/Chat.mdx",
+    "sourcePath": "ui/block-examples/Chat.mdx",
     "title": "Chat",
-    "description": "@lism-css/ui で提供する Chat コンポーネントについて解説します。",
+    "description": "Lism CSS で実装するチャット風UI（b--chat）の実装例です。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "Opt-in", "variant=\"think\"", "Astroでのslotの活用"],
+    "headings": ["Overview", "Styles", "Markup", "Examples", "思考スタイル（b--chat--think）"],
     "keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon", "message bubble", "speech bubble"],
-    "snippet": "チャット風の吹き出しコンポーネント。会話形式のUI表現に使用。@lism-css/uiパッケージで提供。"
+    "snippet": "チャット風の吹き出しUIの実装例。primitivesと少量のCSS（b--chat）で構成し、CSSをlism-blockレイヤーへコピーして利用。"
   },
   {
     "sourcePath": "ui/NavMenu.mdx",
@@ -1450,18 +1509,17 @@
     "description": "@lism-css/ui で提供する NavMenu コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "基本構造",
-      "ソースコード",
       "Examples",
-      "シンプルな例",
-      "アイコンやバッジを表示する例",
       "各リストの共通スタイルを一括で指定する方法",
+      "アイコンやバッジを表示する例",
       "メニューのネスト",
       "ネストしたメニューをアコーディオンで展開する",
-      "横並びメニューでホバー時に子メニューを表示する例"
+      "ホバー時にサブメニューを表示する例"
     ],
     "keywords": [
       "NavMenu",
@@ -1478,7 +1536,7 @@
       "NavMenu.Link",
       "NavMenu.Nest"
     ],
-    "snippet": "ナビゲーションメニューコンポーネント（c--navMenu）。NavMenu.Root / NavMenu.Item / NavMenu.Link / NavMenu.Nest で構成。hovBgc/hovC/itemP などの専用Props で一括スタイル指定が可能。ネスト構造・アコーディオン展開・横並びhoverドロップダウンなど様々なパターンを実装可能。@lism-css/uiパッケージで提供。"
+    "snippet": "ナビゲーションメニューコンポーネント（b--navMenu）。NavMenu.Root / NavMenu.Item / NavMenu.Link / NavMenu.Nest で構成。hovBgc/hovC/itemP などの専用Props で一括スタイル指定が可能。ネスト構造・アコーディオン展開・横並びhoverドロップダウンなど様々なパターンを実装可能。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/ShapeDivider.mdx",
@@ -1486,10 +1544,11 @@
     "description": "@lism-css/ui で提供する ShapeDivider コンポーネントについて解説します。",
     "category": "ui",
     "headings": [
+      "Overview",
+      "Styles",
       "How to use",
       "Import",
       "Props",
-      "ソースコード",
       "Examples",
       "シェイプをセクションの上下に配置する",
       "空のShapeDividerをスペーサーとして利用する",
@@ -1500,7 +1559,7 @@
     "snippet": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。@lism-css/uiパッケージで提供。"
   },
   {
-    "sourcePath": "ui/examples/Card.mdx",
+    "sourcePath": "ui/components/Card.mdx",
     "title": "Card",
     "description": "Lism CSS で実装するカード型コンテンツレイアウトの実装例です。",
     "category": "ui",
@@ -1518,7 +1577,7 @@
     "snippet": "Lism CSS を使ったカードレイアウトの実装例。WithSide+is--boxLink で縦横自動切り替えカード、is--coverLink でカード内別リンク配置、set--bdrsInner での内側角丸活用、ホバーでテキストを出現させる例など多様なパターンを紹介。"
   },
   {
-    "sourcePath": "ui/examples/Banner.mdx",
+    "sourcePath": "ui/components/Banner.mdx",
     "title": "Banner",
     "description": "Lism CSS で実装するバナーリンクの実装例です。",
     "category": "ui",
@@ -1527,7 +1586,7 @@
     "snippet": "バナーの実装例。"
   },
   {
-    "sourcePath": "ui/examples/Hero.mdx",
+    "sourcePath": "ui/components/Hero.mdx",
     "title": "Hero",
     "description": "Lism CSS で実装するヒーローセクションの実装例です。",
     "category": "ui",
@@ -1536,16 +1595,7 @@
     "snippet": "ヒーローセクション（メインビジュアル）の実装例。"
   },
   {
-    "sourcePath": "ui/examples/FAQ.mdx",
-    "title": "FAQ",
-    "description": "Lism CSS で実装するQ&A（よくある質問）レイアウトの実装例です。",
-    "category": "ui",
-    "headings": ["Examples"],
-    "keywords": ["FAQ", "よくある質問", "example", "accordion"],
-    "snippet": "FAQ（よくある質問）セクションの実装例。"
-  },
-  {
-    "sourcePath": "ui/examples/Steps.mdx",
+    "sourcePath": "ui/components/Steps.mdx",
     "title": "Steps",
     "description": "Lism CSS で実装する、手順を示すステップレイアウトの実装例です。",
     "category": "ui",
@@ -1554,16 +1604,24 @@
     "snippet": "ステップ（手順）表示の実装例。"
   },
   {
-    "sourcePath": "ui/examples/Timeline.mdx",
+    "sourcePath": "ui/block-examples/Timeline.mdx",
     "title": "Timeline",
-    "description": "Lism CSS で実装するタイムラインレイアウトの実装例です。",
+    "description": "Lism CSS で実装するタイムラインUI（b--timeline）の実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Source Code", "Import", "Usage", "End, Startの指定, シェイプの協調", "アイコンの使用例", "横並び"],
-    "keywords": ["Timeline", "タイムライン", "年表", "example"],
-    "snippet": "タイムライン表示の実装例。"
+    "headings": [
+      "Overview",
+      "Styles",
+      "Markup",
+      "Examples",
+      "先頭・末尾の指定とシェイプの強調",
+      "アイコンの表示",
+      "横並び（b--timeline--horizontal）"
+    ],
+    "keywords": ["Timeline", "b--timeline", "タイムライン", "年表", "時系列", "沿革", "history"],
+    "snippet": "出来事を時系列に並べるタイムラインUIの実装例。primitivesと少量のCSS（b--timeline）で構成し、CSSをlism-blockレイヤーへコピーして利用。data-timelineで先頭・末尾を指定でき、b--timeline--horizontalで横並びにできる。"
   },
   {
-    "sourcePath": "ui/examples/Breadcrumb.mdx",
+    "sourcePath": "ui/components/Breadcrumb.mdx",
     "title": "Breadcrumb",
     "description": "Lism CSS で実装するパンくずリストナビゲーションの実装例です。",
     "category": "ui",
@@ -1572,7 +1630,7 @@
     "snippet": "パンくずリストの実装例。"
   },
   {
-    "sourcePath": "ui/examples/DividerLabel.mdx",
+    "sourcePath": "ui/components/DividerLabel.mdx",
     "title": "DividerLabel",
     "description": "Lism CSS で実装する、ラベル付き区切り線コンポーネントの実装例です。",
     "category": "ui",
@@ -1581,7 +1639,7 @@
     "snippet": "ラベル付き区切り線の実装例。"
   },
   {
-    "sourcePath": "ui/examples/Reel.mdx",
+    "sourcePath": "ui/components/Reel.mdx",
     "title": "Reel",
     "description": "Lism CSS で実装する、コンテンツを横スクロールで表示するリールコンポーネントの実装例です。",
     "category": "ui",
@@ -1590,7 +1648,7 @@
     "snippet": "横スクロール（リール）レイアウトの実装例。Flex/Grid両方の実装パターンを紹介。"
   },
   {
-    "sourcePath": "ui/examples/BalloonBox.mdx",
+    "sourcePath": "ui/components/BalloonBox.mdx",
     "title": "BalloonBox",
     "description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
     "category": "ui",
@@ -1599,7 +1657,7 @@
     "snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
   },
   {
-    "sourcePath": "ui/examples/Decorations.mdx",
+    "sourcePath": "ui/components/Decorations.mdx",
     "title": "Decorations",
     "description": "Lism CSS で実装する装飾ボックスパターンの実装例です。",
     "category": "ui",
@@ -1608,16 +1666,23 @@
     "snippet": "装飾ボックスの実装例。Call, Kakko, Sticky など様々な装飾パターンを紹介。"
   },
   {
-    "sourcePath": "ui/examples/List.mdx",
+    "sourcePath": "ui/block-examples/List.mdx",
     "title": "List",
-    "description": "Lism CSS で実装する、アイコン付き装飾リストの実装例です。",
+    "description": "Lism CSS で実装する、アイコン付き装飾リストUI（b--list）の実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Source Code", "Import", "Usage"],
-    "keywords": ["List", "リスト", "アイコン", "装飾リスト", "example"],
-    "snippet": "アイコンを使った装飾リストの作成例。List(.c--list)コンポーネントの実装と使い方を紹介。"
+    "headings": [
+      "Overview",
+      "Styles",
+      "Markup",
+      "Examples",
+      "チェックマークのリスト（b--list--check）",
+      "アイコンを差し替える（--_icon-c / --_icon-img）"
+    ],
+    "keywords": ["List", "b--list", "リスト", "箇条書き", "アイコン", "チェックマーク", "checklist"],
+    "snippet": "行頭にアイコンを表示する装飾リストUIの実装例。primitivesと少量のCSS（b--list）で構成し、CSSをlism-blockレイヤーへコピーして利用。b--list--checkでチェックマークに切り替え、--_icon-c / --_icon-imgでアイコンの色・画像を変更できる。"
   },
   {
-    "sourcePath": "ui/examples/Others.mdx",
+    "sourcePath": "ui/components/Others.mdx",
     "title": "Others",
     "description": "Lism CSS で実装する、ステップナビゲーションやメニュー表などその他のUIパターンの実装例です。",
     "category": "ui",
@@ -1626,13 +1691,87 @@
     "snippet": "ステップナビゲーションやメニュー表など、その他のUIパターンの実装例。"
   },
   {
-    "sourcePath": "ui/examples/Table.mdx",
+    "sourcePath": "ui/block-examples/Table.mdx",
     "title": "Table",
-    "description": "Lism CSS で実装する、行・列の固定表示に対応した汎用テーブルレイアウトの実装例です。",
+    "description": "Lism CSS で実装する、行・列の固定表示に対応したテーブルUI（b--table）の実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Source Code", "Import", "Usage", "スクロール時の固定表示"],
-    "keywords": ["Table", "テーブル", "表", "固定", "スクロール", "example"],
-    "snippet": "行・列の固定表示に対応した汎用Tableレイアウトの実装例。CSS変数でボーダースタイルを調整可能。"
+    "headings": ["Overview", "Styles", "Markup", "Examples", "ボーダーと th の色を調整する", "スクロール時の固定表示"],
+    "keywords": ["Table", "b--table", "テーブル", "表", "固定表示", "スクロール", "sticky"],
+    "snippet": "行・列の固定表示に対応したテーブルUIの実装例。primitivesと少量のCSS（b--table）で構成し、CSSをlism-blockレイヤーへコピーして利用。data-table-stickyでtheadや1列目を固定でき、ボーダーやthの色はCSS変数で調整する。"
+  },
+  {
+    "sourcePath": "ui/Tooltip.mdx",
+    "title": "Tooltip",
+    "description": "@lism-css/ui で提供する Tooltip コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": [
+      "Overview",
+      "Styles",
+      "How to use",
+      "Import",
+      "Props",
+      "CSS変数",
+      "Examples",
+      "表示する向きを変える",
+      "揃え位置を変える",
+      "待ち時間と間隔を変える",
+      "配色を変える",
+      "ブラウザ対応"
+    ],
+    "keywords": [
+      "Tooltip",
+      "ツールチップ",
+      "ホバー",
+      "hover",
+      "focus-visible",
+      "aria-describedby",
+      "role=tooltip",
+      "side",
+      "align",
+      "delay",
+      "offset",
+      "CSS Anchor Positioning",
+      "anchor positioning",
+      "b--tooltip",
+      "Esc"
+    ],
+    "snippet": "ホバーやキーボードフォーカスで補足テキストを表示するツールチップ。表示切り替えはCSSのみで行い、JavaScriptはEscで閉じる処理だけを担当する。Tooltip.Root / Tooltip.Trigger / Tooltip.Popupで構成し、side（top/bottom/start/end、初期値top）・align（start/center/end、初期値center）はTooltip.Popup、delay（表示までの待ち時間）・offset（トリガーとの間隔）はTooltip.Rootのpropsで調整できる。CSS変数は--tooltip-offset・--tooltip-delay・--tooltip-delay--close（退場猶予、初期値0.15s）・--tooltip-durationで、いずれもRoot（.b--tooltip）で受け取るためRootかその祖先に指定する（Popupに指定しても効かない）。配置にCSS Anchor Positioningを使用し、未対応ブラウザではTooltip.Root基準の絶対配置にフォールバックする（自動反転とoffsetは無効）。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Popover.mdx",
+    "title": "Popover",
+    "description": "@lism-css/ui で提供する Popover コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": [
+      "Overview",
+      "Styles",
+      "How to use",
+      "Import",
+      "Props",
+      "CSS変数",
+      "Examples",
+      "表示位置を変える",
+      "閉じるボタンを置く（`type=\"manual\"`）",
+      "ブラウザ対応"
+    ],
+    "keywords": [
+      "Popover",
+      "ポップオーバー",
+      "popover API",
+      "popovertarget",
+      "popover属性",
+      "light dismiss",
+      "type=manual",
+      "side",
+      "align",
+      "offset",
+      "CSS Anchor Positioning",
+      "anchor positioning",
+      "b--popover",
+      "role=dialog",
+      "Esc"
+    ],
+    "snippet": "クリックで開閉するポップオーバー。ブラウザ標準のPopover API（popover属性・popovertarget属性）のみで動作し、クライアントJavaScriptは不要。Popover.Root / Popover.Trigger / Popover.Popup / Popover.Closeで構成し、side（top/bottom/start/end、初期値bottom）・align（start/center/end、初期値center）・type（auto/manual、初期値auto）はPopover.Popup、offset（トリガーとの間隔）はPopover.Rootのpropsで調整する。type=\"manual\"にするとlight dismissが無効になりPopover.Closeでのみ閉じられる。CSS変数は--popover-offset・--popover-durationで、いずれもRoot（.b--popover）で受け取るためRootかその祖先に指定する（Popupに指定しても効かない）。配置にCSS Anchor Positioningを使用し、未対応ブラウザでは画面中央配置にフォールバックする（side/align/offsetは無効、開閉・light dismiss・フォーカス制御はPopover APIのためそのまま動作）。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "utility-class.mdx",
@@ -1739,8 +1878,8 @@
     "description": "CSS変数を用いてtransitionプロパティをセットする Trait クラス。",
     "category": "guide",
     "headings": ["has--transition"],
-    "keywords": ["has--transition", "トランジション", "アニメーション", "transition"],
-    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--hov と組み合わせてスムーズなホバーアニメーションを実現。"
+    "keywords": ["has--transition", "hasTransition", "--transitionProps", "トランジション", "アニメーション", "transition"],
+    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。--transitionProps の初期値は all ではなく color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter に限定。実際に変化させるプロパティを --transitionProps で明示指定することを推奨。Lismコンポーネントでは hasTransition=\"color, opacity\" のように文字列を渡すと --transitionProps として出力。set--hov と組み合わせてスムーズなホバーアニメーションを実現。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -1819,11 +1958,12 @@
       "コーディング支援",
       "lism-css-guide",
       "lism-css-refactor",
+      "lism-mockup-guide",
       "skills.sh",
       "gh skill install",
       "lism-cli skill"
     ],
-    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。配布スキルは新規実装向けの lism-css-guide と既存コードのリファクタ用 lism-css-refactor の2つ。skills.sh / gh skill install / lism-cli skill add の3通りの導入方法と、lism-cli skill check によるローカル差分確認・アップデート方法を解説。"
+    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。配布スキルは新規実装向けの lism-css-guide、既存コードのリファクタ用 lism-css-refactor、@lism-css/mockup で画面モックアップを組むための lism-mockup-guide の3つ。skills.sh / gh skill install / lism-cli skill add の3通りの導入方法と、lism-cli skill check によるローカル差分確認・アップデート方法を解説。"
   },
   {
     "sourcePath": "trait-class.mdx",