@lism-css/mcp 0.18.0 → 0.22.0

package/dist/data/docs-index.json

@@ -4,7 +4,7 @@
     "title": "概要",
     "description": "Lism CSS の概要と特徴について解説します。",
     "category": "guide",
-    "headings": ["Why Lism CSS?", "ゼロビルドでどんな環境でも使えます。", "Lism CSS のエコシステム", "Inspirations"],
+    "headings": ["Why Lism CSS?", "ゼロビルドでどんな環境でも使えます。", "Lism CSS のエコシステム", "JSXコンポーネントの使用例", "Inspirations"],
     "keywords": ["overview", "概要", "特徴", "レイアウトファースト", "ゼロビルド", "コンテナクエリ", "Every Layout", "framework"],
     "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワーク。CSS設計不要でCDNから1行で導入可能。React/Astro向け専用コンポーネントも提供。エコシステムとして @lism-css/ui、@lism-css/cli、@lism-css/mcp も用意。"
   },
@@ -13,16 +13,57 @@
     "title": "インストール",
     "description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
     "category": "guide",
-    "headings": ["CSS設計のみを導入する", "クイックスタート", "React/Astro コンポーネントを使用する", "Lism UI の導入", "AIツール連携"],
-    "keywords": ["install", "インストール", "CDN", "npm", "setup", "セットアップ", "導入", "MCP", "AI"],
-    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。UIコンポーネントは別パッケージ @lism-css/ui として提供。AIコーディングツール向けのSkills・MCPサーバーも提供。"
+    "headings": [
+      "CSS設計のみを導入する",
+      "クイックスタート",
+      "テンプレートを指定して実行する",
+      "利用可能なテンプレート",
+      "React/Astro コンポーネントを使用する",
+      "1. パッケージ(lism-css)のインストール",
+      "2. CSS(main.css)の読み込み",
+      "3. コンポーネントの読み込み",
+      "Lism UI の導入",
+      "パッケージとして利用する",
+      "CLI でプロジェクトにコピーする",
+      "AIツール連携"
+    ],
+    "keywords": [
+      "install",
+      "インストール",
+      "CDN",
+      "npm",
+      "setup",
+      "セットアップ",
+      "導入",
+      "MCP",
+      "AI",
+      "template",
+      "テンプレート",
+      "create lism",
+      "lism-cli"
+    ],
+    "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サーバーも提供。"
   },
   {
     "sourcePath": "css-methodology.mdx",
     "title": "CSS設計",
     "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
     "category": "guide",
-    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "独自クラスの命名と定義場所", "動的な状態管理はdata属性"],
+    "headings": [
+      "Lism CSSの階層構造",
+      "デザイントークン",
+      "CSSのクラス設計",
+      "Set Class",
+      "Primitive Class",
+      "Trait Class",
+      "Component Class",
+      "Utility Class",
+      "Property Class",
+      "レスポンシブ対応の Property Class",
+      "独自クラスの命名と定義場所",
+      "独自分類の追加",
+      "動的な状態管理はdata属性"
+    ],
     "keywords": [
       "CSS設計",
       "methodology",
@@ -47,7 +88,30 @@
     "title": "命名規則",
     "description": "Lism CSS における Property Class の Prop 名・値名の省略ルールや、CSS変数の命名規則について解説します。",
     "category": "guide",
-    "headings": ["CSS変数の命名規則", "クラスの命名規則", "`{prop}` の省略ルール", "`{value}` の省略ルール"],
+    "headings": [
+      "CSS変数の命名規則",
+      "トークン変数",
+      "トークンのバリエーション表現",
+      "Property Class 用の変数",
+      "その他の変数",
+      "クラスの命名規則",
+      "クラスプレフィックスの責務一覧",
+      "is-- / has-- / set-- / u-- の使い分け",
+      "{prop} の省略ルール",
+      "1文字プロパティ",
+      "プロパティグループ",
+      "方向指定系の形式",
+      "方向指定系の例外: p, m のみ、ハイフンを省略",
+      "グループ略称の衝突禁止",
+      "max- / min- プロパティ",
+      "その他のプロパティ",
+      "1文字プロパティの短縮名の再利用",
+      "{value} の省略ルール",
+      "基本ルール: CSS の実値をそのまま使う",
+      "トークン値を利用する場合",
+      "値の表記ルール",
+      "長いキーワード値、かつ意味が通りやすいものは省略可"
+    ],
     "keywords": [
       "命名規則",
       "naming",
@@ -77,23 +141,37 @@
     "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 トークンを掲載。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
+    "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）を採用。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
     "title": "カラートークン",
     "description": "Lism CSS で定義されているセマンティックカラーとパレットカラーのトークン、カスタマイズ方法について解説します。",
     "category": "guide",
-    "headings": ["COLOR", "PALETTE", "パレットカラーの活用", "カスタマイズ例"],
-    "keywords": ["color", "カラー", "palette", "パレット", "OKLCH", "brand", "accent", "dark mode", "ダークモード", "u--cbox", "keycolor"],
-    "snippet": "セマンティックカラー（base, text, brand, accent等）とOKLCHベースのパレットカラー（red, blue, green等）を定義。u--cboxユーティリティでの活用例、ダークモード対応などのカスタマイズ方法を紹介。"
+    "headings": [
+      "セマンティックカラー",
+      "パレットカラー",
+      "パレットカラーの活用",
+      "カスタマイズ例",
+      "ダークモード対応",
+      "セマンティックカラーのカスタマイズ"
+    ],
+    "keywords": ["color", "カラー", "palette", "パレット", "OKLCH", "brand", "accent", "neutral", "dark mode", "ダークモード", "u--cbox", "keycolor"],
+    "snippet": "セマンティックカラー（base, base-2, text, text-2, divider, link, brand, accent, neutral）とOKLCHベースのパレットカラー（red, orange, yellow, green, blue, purple, pink, gray, black, white）を定義。--neutral は背景やhover色生成に使う中立的補助色。u--cboxユーティリティでの活用例、ダークモード対応（--L/--Cで全体調整）などのカスタマイズ方法を紹介。"
   },
   {
     "sourcePath": "tokens/typography.mdx",
     "title": "タイポグラフィトークン",
     "description": "Lism CSS で使用するフォントファミリー、フォントサイズ、行間などのタイポグラフィ関連のデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["FF: font-family", "FW : font-weight", "FZ: font-size", "LH: line-height", "LTS: letter-spacing"],
+    "headings": [
+      "FF: font-family",
+      "FW : font-weight",
+      "FZ: font-size",
+      "フォントサイズのスケーリング規則について",
+      "LH: line-height",
+      "LTS: letter-spacing"
+    ],
     "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "font-size"],
     "snippet": "フォントサイズ（調和数列ベース）、文字間隔などのタイポグラフィ設計を解説。フォントサイズのスケーリング規則を紹介。"
   },
@@ -111,9 +189,15 @@
     "title": "余白トークン",
     "description": "Lism CSS のフィボナッチ数列に基づく余白トークンと、対応するpropertyクラスについて解説します。",
     "category": "guide",
-    "headings": ["SPACE: 余白のスケーリング", "対応する Property Class"],
-    "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class"],
-    "snippet": "フィボナッチ数列に基づいた余白スケーリング（5〜80）を定義。p, px, py, m, mx, my, g等のpropertyクラスでフルサポート。方向別プロパティはBP対応のみなど、対応範囲を詳細に解説。"
+    "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での値指定は可）。"
   },
   {
     "sourcePath": "property-class.mdx",
@@ -125,11 +209,19 @@
       "Typography",
       "Colors",
       "Spacing",
+      "Padding",
+      "Margin",
       "Width & Height",
       "Displays",
       "Positions",
       "Layouts",
+      "Gap",
+      "Flex",
+      "Grid",
+      "Places",
       "Styling",
+      "Shadow & Radius",
+      "Border",
       "Background",
       "Other Properties",
       "hover"
@@ -152,6 +244,9 @@
       "d",
       "ta",
       "td",
+      "tt",
+      "fs",
+      "f",
       "c",
       "bgc",
       "bd",
@@ -161,29 +256,75 @@
       "h",
       "pos",
       "ov",
+      "ov-x",
+      "ov-y",
+      "ovw",
       "ar",
       "o",
+      "v",
       "ai",
+      "ji",
       "jc",
       "ac",
+      "aslf",
+      "jslf",
+      "order",
       "fx",
+      "fxw",
+      "fxd",
+      "fxsh",
+      "fxg",
+      "fxb",
       "gt",
+      "gta",
+      "gtc",
+      "gtr",
+      "gaf",
+      "gar",
+      "gac",
+      "ga",
       "gc",
       "gr",
+      "gcs",
+      "grs",
+      "gce",
+      "gre",
       "z",
+      "i",
+      "i-x",
+      "i-y",
       "gap",
       "padding",
       "margin",
       "font-size",
+      "font-style",
+      "font-transform",
       "display",
+      "visibility",
       "text-align",
+      "text-decoration",
+      "text-transform",
       "color",
       "background",
       "border",
       "width",
       "height",
+      "max-w",
+      "max-h",
+      "min-w",
+      "min-h",
+      "sz",
+      "max-sz",
+      "min-sz",
+      "bsz",
+      "max-bsz",
+      "min-bsz",
+      "contentSize",
       "position",
       "overflow",
+      "overflow-x",
+      "overflow-y",
+      "overflow-wrap",
       "opacity",
       "flex",
       "grid",
@@ -194,18 +335,53 @@
       "float",
       "clear",
       "whs",
-      "white-space"
+      "white-space",
+      "ps",
+      "pe",
+      "pbs",
+      "pbe",
+      "ms",
+      "me",
+      "mbs",
+      "mbe",
+      "padding-inline-start",
+      "padding-inline-end",
+      "padding-block-start",
+      "padding-block-end",
+      "margin-inline-start",
+      "margin-inline-end",
+      "margin-block-start",
+      "margin-block-end",
+      "i-s",
+      "i-e",
+      "i-bs",
+      "i-be",
+      "inset-inline-start",
+      "inset-inline-end",
+      "inset-block-start",
+      "inset-block-end",
+      "align-items",
+      "justify-items",
+      "justify-content",
+      "align-self",
+      "justify-self",
+      "grid-area",
+      "grid-column",
+      "grid-row",
+      "aspect-ratio",
+      "bdi",
+      "bgs"
     ],
-    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。"
+    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。BPカラムは sm/md 対応が ✔、lg まで対応が ✔ lg、非対応が - で示される。"
   },
   {
     "sourcePath": "responsive.mdx",
     "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
-    "headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
-    "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md"],
-    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm, md ブレークポイントの値を指定。"
+    "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 までサポート。"
   },
   {
     "sourcePath": "reset-css.mdx",
@@ -221,7 +397,23 @@
     "title": "Customize",
     "description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
     "category": "guide",
-    "headings": ["`@layer`をオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
+    "headings": [
+      "@layerをオフにする",
+      "SCSS でのカスタマイズ",
+      "上書き可能な変数",
+      "基本フォーマット",
+      "$props の個別カスタマイズ",
+      "SCSSのコンパイル処理について",
+      "lism.config.js でのカスタマイズ",
+      "Vite プラグインの登録（必須）",
+      "フォーマット",
+      "カスタマイズ例",
+      "追加スタイルを読み込ませる方法",
+      "軽微な追加なら手書きで済ませる",
+      "lism-css のCLIコマンドでCSSビルドする",
+      "手動で追加する方法",
+      "SCSSファイルへの追加上書き"
+    ],
     "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
     "snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
   },
@@ -230,25 +422,38 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--divide & u--cells", "u--clipText", "Opt-in"],
-    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--divide", "u--cells", "u--clipText"],
-    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--divide, u--cells 等を解説。"
+    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--divide & u--enclose", "u--clipText", "Opt-in", "u--inlineCenter"],
+    "keywords": [
+      "utility",
+      "ユーティリティ",
+      "class",
+      "クラス",
+      "u--cbox",
+      "u--trim",
+      "u--trimAll",
+      "u--srOnly",
+      "u--divide",
+      "u--enclose",
+      "u--clipText",
+      "u--inlineCenter"
+    ],
+    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox（keycolorベースの色自動生成）, u--trim/u--trimAll（ハーフレディング余白調整）, u--srOnly（スクリーンリーダー専用）, u--divide/u--enclose（区切り線・セル枠）, u--clipText（テキストで背景クリッピング）等を解説。Opt-inとして u--inlineCenter（絵文字・インラインアイコン中央揃え）の作成例も紹介。"
   },
   {
     "sourcePath": "set-class.mdx",
     "title": "Set Class",
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": [],
-    "keywords": ["set", "set class", "set--plain", "set--revert", "set--var:bxsh", "set--var:hov", "set--var:bdrsInner"],
-    "snippet": "HTML 要素の基礎スタイリングや変数セットを行うためのクラス (.set--{style})。set--plain / set--revert（基礎スタイリング）と set--var:bxsh / set--var:hov / set--var:bdrsInner（変数のセット）の 2 カテゴリで解説。"
+    "headings": ["set--plain", "set--revert", "set--bxsh", "set--s", "set--hov", "set--bleed", "set--bdrsInner"],
+    "keywords": ["set", "set class", "set--plain", "set--revert", "set--bxsh", "set--hov", "set--bdrsInner", "set--bleed", "set--s"],
+    "snippet": "HTML 要素の基礎スタイリングや変数セットを行うためのクラス (.set--{style})。set--plain / set--revert（基礎スタイリング）と set--bxsh / set--hov / set--bdrsInner / set--bleed / set--s（変数のセット）の 2 カテゴリで解説。set--bleed は contentSize の外側余白量（--bleed 変数）を生成し片側ブリードレイアウトに活用。"
   },
   {
     "sourcePath": "primitives.mdx",
     "title": "Primitive Class",
     "description": "Lism CSS のプリミティブクラス（l--, a--）の分類と使い方について解説します。",
     "category": "guide",
-    "headings": ["Layout Primitives", "Atomic Primitives"],
+    "headings": ["Layout Primitives", "カラムレイアウト Primitive の使い分けガイド", "比較表", "選び方", "Atomic Primitives"],
     "keywords": [
       "primitive",
       "プリミティブ",
@@ -268,11 +473,48 @@
   {
     "sourcePath": "base-styles.mdx",
     "title": "Base Styles",
-    "description": "@lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
+    "description": "lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
     "category": "guide",
-    "headings": ["Reset CSS", "Base styles", "HTML基本スタイルのプレビュー"],
-    "keywords": ["html", "base", "ベース", "スタイル", "要素", "reset"],
-    "snippet": "Lism CSS がHTML要素に対して適用するベーススタイルについて解説。Reset CSSと@lism-baseレイヤーで定義されるベーススタイルを紹介。"
+    "headings": [
+      "Reset CSS",
+      "Lism CSS の reset.css だけを読み込む方法",
+      "Base styles",
+      "body",
+      "全要素の行間",
+      "見出し（h1〜h6）",
+      "リンク（a）",
+      "インラインテキスト要素",
+      "引用・整形済みテキスト",
+      "その他のテキスト要素",
+      "区切り",
+      "リスト（ul, ol）",
+      "定義リスト（dl）",
+      "テーブル",
+      "フォーム要素",
+      "その他",
+      "HTML基本スタイルのプレビュー"
+    ],
+    "keywords": [
+      "html",
+      "base",
+      "ベース",
+      "スタイル",
+      "要素",
+      "reset",
+      "body",
+      "line-height",
+      "heading",
+      "link",
+      "a",
+      "ul",
+      "ol",
+      "table",
+      "form",
+      "input",
+      "hr",
+      "blockquote"
+    ],
+    "snippet": "Lism CSS がHTML要素に対して適用するベーススタイルについて解説。lism-base.reset レイヤーのReset CSS、body・全要素の行間（ハーフレディング）・見出し・リンク・リスト・テーブル・フォームなど各要素のベーススタイルを詳述。CSS変数（--link-c, --headings-ff, --controls-bgc 等）でのカスタマイズ方法も紹介。"
   },
   {
     "sourcePath": "changelog.mdx",
@@ -280,28 +522,58 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.22.0 (2026.05.28)",
+      "AutoColumns のデフォルトモード変更 (#408)",
+      "ユーティリティ・トークン名の整理",
+      "フォームコントロールのスタイル調整",
+      "その他",
+      "@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 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 v.0.18.0 (2026.05.17)",
+      "--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 タグのリンク装飾スタイル廃止",
       "Bug Fixes",
+      "@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)",
-      "`@lism-css/ui` v.0.15.0 (2026.04.21)",
+      "CSSレイヤー構造の再編 (#304)",
+      "set-- クラスの刷新 (#304)",
+      "-hov: クラスの命名整理 (#300)",
+      "シャドウトークンの刷新 (#311)",
+      "@lism-css/ui v.0.15.0 (2026.04.21)",
       "lism-css v.0.14.0 (2026.04.17)",
-      "`@lism-css/ui` v.0.14.0 (2026.04.17)",
+      "Props システムの整理",
+      "Property Class のリネーム",
+      "Trait Class / トークンの整理",
+      "@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)",
-      "`@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)",
+      "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)",
       "v.0.12.0 (2026.04.10)",
       "v.0.11.0 (2026.04.05)",
       "v.0.10.5 (2026.04.05)",
@@ -309,8 +581,8 @@
       "v.0.10.3 (2026.04.04)",
       "v.0.10.2 (2026.04.04)",
       "v.0.10.1 (2026.04.03)",
-      "`lism-css` v.0.9.4 (2026.03.31)",
-      "`@lism-css/ui` v.0.9.3 (2026.03.30)",
+      "lism-css v.0.9.4 (2026.03.31)",
+      "@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)",
@@ -318,15 +590,15 @@
       "v.0.8.2",
       "v.0.8 (大幅な変更)"
     ],
-    "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。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）、u--trimChildren → u--trimAll へのリネームと除外方式整理（#324/#326）、u--collapseGrid → u--cells へのリネームと u--divide の新設（#323）、opacity トークンのセマンティック命名変更（#316）などがある。"
+    "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）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
     "title": "-bd",
     "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
     "category": "property-class",
-    "headings": ["方向指定", "bdwをブレイクポイントで切り替える"],
+    "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "ボーダーの方向を切り替える", "任意のborderをインライン出力する方法"],
     "keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
     "snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
@@ -335,9 +607,36 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": ["-hov:-{prop} の使い方", "-hov:{preset} の使い方", "-hov:in:{preset} の使い方", "トランジションを設定する方法"],
-    "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--var:hov", "has--transition", "transition"],
-    "snippet": "ホバー関連のProp。-hov:-{prop} クラスでホバーエフェクトを設定。has--transition との組み合わせでアニメーション実現。set--var:hov と -hov:in:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
+    "headings": [
+      "-hov:-{prop}",
+      "初期値の活用",
+      "任意の値へ変化させる例",
+      "<Lism>コンポーネントでの hov の指定方法",
+      "文字列で指定する場合",
+      "オブジェクトで指定する場合",
+      "-hov:{preset}",
+      "-hovクラスを自作する例",
+      "-hov:in:{preset}",
+      "トランジションを設定する方法"
+    ],
+    "keywords": [
+      "hover",
+      "ホバー",
+      "hov",
+      "インタラクション",
+      "animation",
+      "set--hov",
+      "has--transition",
+      "transition",
+      "-hov:-bgc",
+      "-hov:-c",
+      "-hov:-o",
+      "-hov:-bxsh",
+      "in:zoom",
+      "in:show",
+      "in:hide"
+    ],
+    "snippet": "ホバー関連のProp。-hov:-{prop}（変数受け取り型）、-hov:{preset}（プリセット型）、-hov:in:{preset}（親ホバー連動型）の3形式。各クラスの初期値あり（-hov:-bgc は color-mix で neutral mix）。has--transition との組み合わせでアニメーション実現。set--hov と -hov:in:xxx クラスで親要素ホバー時の子要素スタイル制御も可能（in:zoom, in:show, in:hide）。Lismコンポーネントでは hov prop に文字列またはオブジェクトを渡して制御。"
   },
   {
     "sourcePath": "property-class/max-sz.mdx",
@@ -362,7 +661,21 @@
     "title": "Lism Props",
     "description": "<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。",
     "category": "core-components",
-    "headings": ["as", "className", "set / util", "layout / atomic", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "headings": [
+      "as",
+      "className",
+      "set / util",
+      "複数指定",
+      "- prefix で除外",
+      "layout / atomic",
+      "Trait Props",
+      "CSS Props",
+      "コード例",
+      ": でクラスとして強制的に出力",
+      "レスポンシブ指定",
+      "exProps",
+      "クラスの出力順"
+    ],
     "keywords": [
       "Lism Props",
       "props",
@@ -379,16 +692,21 @@
       "isWrapper",
       "isLayer",
       "isBoxLink",
+      "isCoverLink",
       "isContainer",
+      "isSide",
+      "isSkipFlow",
       "hasTransition",
       "hasGutter",
       "hasSnap",
+      "hasMask",
       "responsive",
       "レスポンシブ",
       "shorthand",
-      "省略記法"
+      "省略記法",
+      "contentSize"
     ],
-    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で c-- クラス（Component Class）や任意クラスを直接指定、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isContainer, hasTransition, hasGutter, hasSnap などの 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 で 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-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -405,8 +723,8 @@
     "description": "<span>タグを出力するLismコンポーネントです。",
     "category": "core-components",
     "headings": ["Import", "基本的な使い方"],
-    "keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント"],
-    "snippet": "<span>タグを出力するLismコンポーネント。<Lism as=\"span\">のエイリアス。テキストの一部にスタイルを適用したい場合に使用。as prop で em / strong / small / code 等に変更可能。"
+    "keywords": ["Inline", "インライン", "span", "em", "strong", "small", "code", "time", "mark", "abbr", "label", "コンポーネント"],
+    "snippet": "<span>タグを出力するLismコンポーネント。<Lism as=\"span\">のエイリアス。テキストの一部にスタイルを適用したい場合に使用。as prop で em / strong / small / code / time / i / b / mark / abbr / cite / kbd / label 等に変更可能。"
   },
   {
     "sourcePath": "core-components/Group.mdx",
@@ -444,12 +762,21 @@
     "keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント"],
     "snippet": "<ul>タグを出力するListと<li>タグを出力するListItemのLismコンポーネント。as prop で ol / dl や li / dt / dd に変更可能。"
   },
+  {
+    "sourcePath": "core-components/Media.mdx",
+    "title": "Media",
+    "description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "Next.js の<Image>を使う方法", "Astro版での<Image> / <Picture>の使い方", "リモート画像で使用する例"],
+    "keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image", "動画"],
+    "snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Astro版では as='img' で Astro Image、as='picture' で Astro Picture に自動マッピング。Next.js の Image コンポーネントとの連携も可能。"
+  },
   {
     "sourcePath": "ui/DummyText.mdx",
     "title": "DummyText",
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
+    "headings": ["How to use", "Import", "Props", "Examples"],
     "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
@@ -458,7 +785,7 @@
     "title": "Box / l--box",
     "description": "l--box は、コンテンツをグループ化するだけのシンプルなクラスです。",
     "category": "primitives",
-    "headings": ["Lismコンポーネント", "Usage"],
+    "headings": ["Lismコンポーネント", "Import", "Usage", "使用例"],
     "keywords": ["Box", "ボックス", "layout", "レイアウト", "l--box"],
     "snippet": "最も基本的なレイアウトプリミティブ。コンテンツをグループ化するだけのシンプルな汎用ボックス要素。l--box クラスが付与される。"
   },
@@ -467,7 +794,7 @@
     "title": "Flex / l--flex",
     "description": "l--flex は、コンテンツを Flex レイアウトで配置するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "Usage", "基本的な使い方", "flexプロパティの指定", "子要素のflexプロパティ"],
     "keywords": ["Flex", "flexbox", "フレックス", "layout", "l--flex", "横並び", "display", "display: flex", "flex-direction", "flex-wrap"],
     "snippet": "Flexboxレイアウトを構成。display: flex が適用される。g, ai, jc, fxw, fxd 等で配置を制御。"
   },
@@ -476,7 +803,7 @@
     "title": "Stack / l--stack",
     "description": "l--stack は、複数の要素を Flex レイアウトで縦並びに配置するクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "Usage", "基本的な使い方", "センター寄せレイアウト"],
     "keywords": [
       "Stack",
       "スタック",
@@ -497,7 +824,16 @@
     "title": "Grid / l--grid",
     "description": "l--grid は、コンテンツを Grid レイアウトで配置するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "Usage",
+      "基本的な使い方",
+      "ブレイクポイントでエリアを切り替える",
+      "子要素を重ねて表示する",
+      "subgridの活用"
+    ],
     "keywords": [
       "Grid",
       "グリッド",
@@ -518,7 +854,7 @@
     "title": "TileGrid / l--tileGrid",
     "description": "l--tileGrid は、列数と行数を指定して均等なタイル型グリッドレイアウトを構成するクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "専用Props", "Usage", "基本的な使い方", "ブレイクポイント指定"],
     "keywords": [
       "TileGrid",
       "タイル",
@@ -542,7 +878,7 @@
     "title": "Center / l--center",
     "description": "l--center は、要素を上下左右中央揃えで配置するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "Usage", "水平方向に中央配置", "上下左右中央に配置する"],
     "keywords": ["Center", "中央揃え", "center", "layout", "l--center", "display", "display: grid", "place-items", "place-items: center", "中央配置"],
     "snippet": "子要素を中央揃えにするレイアウト。place-items: center の Grid。高さがあれば上下左右中央揃え。"
   },
@@ -551,7 +887,7 @@
     "title": "Cluster / l--cluster",
     "description": "l--cluster は、複数の要素を横方向に並べて配置し、数が多ければ折り返すクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "Usage", "使用例"],
     "keywords": ["Cluster", "クラスター", "横並び", "wrap", "l--cluster", "タグ", "display", "display: flex", "flex-wrap", "badge list"],
     "snippet": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。"
   },
@@ -560,7 +896,18 @@
     "title": "Columns / l--columns",
     "description": "l--columns は、ブレイクポイントごとに指定した列数で表示できるカラムクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "専用Props",
+      "Usage",
+      "2列レイアウト",
+      "1列 → 2列 → 3列",
+      "2列 → 4列",
+      "gc(grid-column)の活用",
+      "subgrid の活用"
+    ],
     "keywords": [
       "Columns",
       "カラム",
@@ -581,20 +928,33 @@
     "title": "Flow / l--flow",
     "description": "l--flow は、子要素間の余白を margin で管理するフロークラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage", "`l--flow` を入れ子にする時の注意点"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "専用Props",
+      "Usage",
+      "基本的な使い方",
+      "-flow:sを併用する",
+      "任意の値をセットする",
+      "is--skipFlow",
+      "l--flow を入れ子にする時の注意点"
+    ],
     "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root", "article body", "縦方向余白"],
-    "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin で管理。見出しタグは余白が大きくなる。is--skipFlowで余白打ち消しも可能。"
+    "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin（--flow と margin-block-start）で管理。見出しタグは余白が大きくなる。-flow:s で余白を小さく、任意値の指定も可能。is--skipFlow で次の兄弟要素との余白を打ち消しも可能。"
   },
   {
     "sourcePath": "primitives/l--autoColumns.mdx",
     "title": "AutoColumns / l--autoColumns",
     "description": "l--autoColumns は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "専用Props", "Usage", "--colsでサイズを指定する", "auto-fitを使用する"],
     "keywords": [
       "AutoColumns",
       "流動カラム",
       "auto-fill",
+      "auto-fit",
+      "autoFit",
       "fluid",
       "l--autoColumns",
       "display",
@@ -605,14 +965,24 @@
       "メディアクエリなし",
       "折り返しグリッド"
     ],
-    "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
+    "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。デフォルトモードは auto-fill（autoFit prop で auto-fit に切り替え可能）。"
   },
   {
     "sourcePath": "primitives/l--frame.mdx",
     "title": "Frame / l--frame",
     "description": "l--frame は、直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "Usage",
+      "アスペクト比の指定",
+      "figure, figcaptionの使用",
+      "videoの使用",
+      "iframeの使用",
+      "Layer系を活用する"
+    ],
     "keywords": ["Frame", "フレーム", "aspect-ratio", "アスペクト比", "l--frame", "画像", "video", "iframe", "比率維持"],
     "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラス。arでアスペクト比を指定。"
   },
@@ -621,7 +991,16 @@
     "title": "SwitchColumns / l--switchColumns",
     "description": "l--switchColumns は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "専用Props",
+      "Usage",
+      "デフォルト幅で利用する",
+      "breakSizeの指定",
+      "flex-growで比率を調整する"
+    ],
     "keywords": ["SwitchColumns", "切り替え", "switch", "カラム", "l--switchColumns", "responsive columns", "メディアクエリなし"],
     "snippet": "複数列以上と1列への切り替えをコンテナクエリ・メディアクエリを使わずに実装するクラス。breakSizeで切り替えポイントを指定。"
   },
@@ -630,7 +1009,17 @@
     "title": "WithSide / l--withSide",
     "description": "l--withSide は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "専用Props",
+      "Usage",
+      "使用例",
+      "反転",
+      "メディアとテキストが交互に並ぶレイアウト",
+      "Gridを使って似たレイアウトを構成する例"
+    ],
     "keywords": ["WithSide", "サイドバー", "sidebar", "メイン", "l--withSide", "2カラム", "is--side", "two column"],
     "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。メディアクエリ・コンテナクエリに依存せず自動で切り替わる。"
   },
@@ -639,7 +1028,7 @@
     "title": "Container / is--container",
     "description": "is--container は、container-type を宣言してコンテナクエリを有効にするためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Import", "Usage", "使用例"],
     "keywords": ["Container", "コンテナ", "container query", "is--container", "isContainer", "レスポンシブ基準"],
     "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
   },
@@ -648,7 +1037,7 @@
     "title": "Layer / is--layer",
     "description": "is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Import", "Usage", "使用例", "backdrop-filterの活用", "メディアレイヤー"],
     "keywords": [
       "Layer",
       "レイヤー",
@@ -669,7 +1058,17 @@
     "title": "BoxLink / is--boxLink",
     "description": "is--boxLink は、ボックス全体をクリック可能にするクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage", "Opt-in"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネントでの使い方",
+      "Import",
+      "専用Props",
+      "Usage",
+      "1. <BoxLink>をaタグにして使う",
+      "2. 内部にis--coverLinkを配置する",
+      "Opt-in",
+      "Tabキーでフォーカスした時のアウトラインをBoxLink全体に広げる"
+    ],
     "keywords": [
       "BoxLink",
       "LinkBox",
@@ -690,16 +1089,28 @@
     "title": "Wrapper / is--wrapper",
     "description": "is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
-    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize", "幅制限", "width limiter"],
-    "snippet": "コンテンツ幅を制限するラッパー要素。isWrapperプロパティでどのコンポーネントからでも呼び出し可能。contentSizeで幅を指定。s, lのプリセットサイズや任意値も設定可能。"
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Import", "専用Props", "Usage", "使用例", "任意のコンテナサイズをセットする", "DEMOページ"],
+    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize", "幅制限", "width limiter", "isWrapper"],
+    "snippet": "コンテンツ幅を制限するラッパー要素。isWrapperプロパティでどのコンポーネントからでも呼び出し可能。contentSizeで幅を指定（s/m/l/xl のプリセットサイズや任意値）。isWrapper='s' とすると is--wrapper + -contentSize:s が出力される。<Wrapper>コンポーネントも利用可能。直下の子要素に inline-size: 100% が適用されるため stack 配下でも横幅が揃う。"
   },
   {
     "sourcePath": "primitives/a--icon.mdx",
     "title": "Icon / a--icon",
     "description": "a--icon は、アイコン要素を表示するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "出力されるHTML構造",
+      "専用Props",
+      "Usage",
+      "外部のパッケージを利用する方法",
+      "as, exProps のを icon にまとめて指定する",
+      "プリセットアイコンを呼び出す方法",
+      "svgを直接記述する方法",
+      "src でimgを指定する方法"
+    ],
     "keywords": ["Icon", "アイコン", "SVG", "a--icon", "phosphor-icons"],
     "snippet": "アイコンを表示するコンポーネント。外部パッケージ(react-icons, phosphor-icons等)のアイコン、プリセットアイコン、SVG直接記述、img指定に対応。"
   },
@@ -708,25 +1119,26 @@
     "title": "Divider / a--divider",
     "description": "a--divider は、コンテンツ間に区切り線を描画するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": ["CSS", "Lismコンポーネント", "Import", "出力されるHTML構造", "Usage", "基本例", "スタイルの変更例", "縦方向の区切り線"],
     "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border", "separator", "仕切り"],
     "snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
   },
-  {
-    "sourcePath": "core-components/Media.mdx",
-    "title": "Media",
-    "description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
-    "category": "core-components",
-    "headings": ["Import"],
-    "keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image", "動画"],
-    "snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Astro版では as='img' で Astro Image、as='picture' で Astro Picture に自動マッピング。Next.js の Image コンポーネントとの連携も可能。"
-  },
   {
     "sourcePath": "primitives/a--spacer.mdx",
     "title": "Spacer / a--spacer",
     "description": "a--spacer は、要素間にスペースを確保するためのクラスです。",
     "category": "primitives",
-    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "headings": [
+      "CSS",
+      "Lismコンポーネント",
+      "Import",
+      "出力されるHTML構造",
+      "専用Props",
+      "Usage",
+      "基本例",
+      "SPACEトークンを使う例",
+      "横方向のスペーサー"
+    ],
     "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer", "スペース", "gap element"],
     "snippet": "空白を挿入するコンポーネント。w, h で幅・高さを指定。SPACEトークンの値も使用可能。"
   },
@@ -735,7 +1147,7 @@
     "title": "Decorator / a--decorator",
     "description": "a--decorator は、コンテンツを装飾するための空要素として使うクラスです。",
     "category": "primitives",
-    "headings": ["Lismコンポーネント", "Usage"],
+    "headings": ["Lismコンポーネント", "Import", "出力されるHTML構造", "専用Props", "Usage", "装飾に使用する例"],
     "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator", "visual decoration"],
     "snippet": "装飾用の空要素を出力するコンポーネント。aria-hidden='true'がデフォルトで付与される。"
   },
@@ -744,7 +1156,16 @@
     "title": "Accordion",
     "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "基本構造",
+      "ソースコード",
+      "Examples",
+      "見出しタグを変更する",
+      "アニメーション時間を変更し、複数同時展開を許可する"
+    ],
     "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
     "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
   },
@@ -753,7 +1174,7 @@
     "title": "Modal",
     "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
+    "headings": ["How to use", "Import", "Props", "基本構造", "ソースコード", "Examples", "ドロワーメニューの作成例"],
     "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ", "popup"],
     "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
   },
@@ -762,16 +1183,53 @@
     "title": "Tabs",
     "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Opt-in"],
-    "keywords": ["Tabs", "タブ", "切り替え", "panel", "tab navigation"],
-    "snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "基本構造",
+      "ソースコード",
+      "Examples",
+      "基本例",
+      "最初に開いておくタブ番号を指定する",
+      "タブコンテンツを横並び配置にする",
+      "Opt-in",
+      "スタイルバリエーションの作成例",
+      "c--tabs--line",
+      "c--tabs--emboss",
+      "高さを固定する方法"
+    ],
+    "keywords": [
+      "Tabs",
+      "タブ",
+      "切り替え",
+      "panel",
+      "tab navigation",
+      "defaultIndex",
+      "variant",
+      "Tabs.Root",
+      "Tabs.Item",
+      "Tabs.Tab",
+      "Tabs.Panel",
+      "--_isSelected"
+    ],
+    "snippet": "タブ切り替えUI。Tabs.Root / Tabs.Item / Tabs.Tab / Tabs.Panel で構成。defaultIndex で初期タブ指定、listProps でタブリストへの props 渡しが可能。横並び配置やスタイルバリエーション（line/emboss 等）、高さ固定のOpt-in解説あり。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Details.mdx",
     "title": "Details",
     "description": "@lism-css/ui で提供する Details コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "基本構造",
+      "ソースコード",
+      "Examples",
+      "タイトルのHTMLタグを変更し、複数同時展開を制限する例",
+      "アニメーション時間を変更する例"
+    ],
     "keywords": ["Details", "details", "summary", "開閉", "disclosure"],
     "snippet": "HTMLのdetails/summary要素をラップ。ネイティブのHTML要素を使用したアコーディオン。@lism-css/uiパッケージで提供。"
   },
@@ -780,7 +1238,17 @@
     "title": "Alert",
     "description": "@lism-css/ui で提供する Alert コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "ソースコード",
+      "Examples",
+      "layout を切り替える",
+      "type一覧",
+      "カラーとアイコンを指定する例",
+      "Only lism-css"
+    ],
     "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知"],
     "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
   },
@@ -789,7 +1257,7 @@
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css"],
+    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "icon、keycolorを指定", "Only lism-css"],
     "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
     "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
   },
@@ -798,7 +1266,20 @@
     "title": "Button",
     "description": "@lism-css/ui で提供する Button コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Opt-in", "Only lism-css"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "ソースコード",
+      "Examples",
+      "variant: outline",
+      "アイコンを使う例",
+      "サイズの調整",
+      "Gridでアイコンを端に寄せる",
+      "Opt-in",
+      "hov=\"reverse\"",
+      "Only lism-css"
+    ],
     "keywords": ["Button", "ボタン", "クリック", "outline", "action", "CTA", "submit"],
     "snippet": "ボタンコンポーネント。variant (outline 等) と keycolor でバリエーションを表現。@lism-css/uiパッケージで提供。"
   },
@@ -807,7 +1288,17 @@
     "title": "Badge",
     "description": "@lism-css/ui で提供する Badge コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "ソースコード",
+      "Examples",
+      "variant: outline",
+      "u--cbox との併用",
+      "アイコンを使用する例",
+      "Only lism-css"
+    ],
     "keywords": ["Badge", "バッジ", "ラベル", "タグ", "status", "ステータス表示", "tag label", "カテゴリ表示"],
     "snippet": "バッジ (ラベル) コンポーネント。カテゴリやステータスの表示に使用。@lism-css/uiパッケージで提供。"
   },
@@ -816,7 +1307,7 @@
     "title": "Avatar",
     "description": "@lism-css/ui で提供する Avatar コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css"],
+    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "Only lism-css"],
     "keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸", "user icon", "ユーザーアイコン"],
     "snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。@lism-css/uiパッケージで提供。"
   },
@@ -825,7 +1316,7 @@
     "title": "Chat",
     "description": "@lism-css/ui で提供する Chat コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Opt-in"],
+    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "Opt-in", "variant=\"think\"", "Astroでのslotの活用"],
     "keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon", "message bubble", "speech bubble"],
     "snippet": "チャット風の吹き出しコンポーネント。会話形式のUI表現に使用。@lism-css/uiパッケージで提供。"
   },
@@ -834,16 +1325,53 @@
     "title": "NavMenu",
     "description": "@lism-css/ui で提供する NavMenu コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
-    "keywords": ["NavMenu", "ナビ", "メニュー", "navigation", "リンク"],
-    "snippet": "ナビゲーションメニュー。リンクリストの表示に使用。@lism-css/uiパッケージで提供。"
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "基本構造",
+      "ソースコード",
+      "Examples",
+      "シンプルな例",
+      "アイコンやバッジを表示する例",
+      "各リストのpaddingを一括で調整する方法",
+      "メニューのネスト",
+      "ネストしたメニューをアコーディオンで展開する",
+      "横並びメニューでホバー時に子メニューを表示する例"
+    ],
+    "keywords": [
+      "NavMenu",
+      "ナビ",
+      "メニュー",
+      "navigation",
+      "リンク",
+      "ネスト",
+      "accordion",
+      "アコーディオン",
+      "dropdown",
+      "NavMenu.Root",
+      "NavMenu.Item",
+      "NavMenu.Link",
+      "NavMenu.Nest"
+    ],
+    "snippet": "ナビゲーションメニューコンポーネント（c--navMenu）。NavMenu.Root / NavMenu.Item / NavMenu.Link / NavMenu.Nest で構成。hovBgc/hovC/itemP などの専用Props で一括スタイル指定が可能。ネスト構造・アコーディオン展開・横並びhoverドロップダウンなど様々なパターンを実装可能。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/ShapeDivider.mdx",
     "title": "ShapeDivider",
     "description": "@lism-css/ui で提供する ShapeDivider コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples"],
+    "headings": [
+      "How to use",
+      "Import",
+      "Props",
+      "ソースコード",
+      "Examples",
+      "シェイプをセクションの上下に配置する",
+      "空のShapeDividerをスペーサーとして利用する",
+      "アニメーションをオンにする例",
+      "内部のSVGをずらして配置する例"
+    ],
     "keywords": ["ShapeDivider", "波", "wave", "区切り", "SVG", "セクション", "section separator"],
     "snippet": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。@lism-css/uiパッケージで提供。"
   },
@@ -852,9 +1380,18 @@
     "title": "Card",
     "description": "Lism CSS で実装するカード型コンテンツレイアウトの実装例です。",
     "category": "ui",
-    "headings": ["Examples"],
-    "keywords": ["Card", "カード", "example", "実装例"],
-    "snippet": "Lism CSS を使ったカードレイアウトの実装例。"
+    "headings": [
+      "Examples",
+      "縦向き・横向きのレイアウトが自動で切り替わるカードリンク",
+      "カード内に別のリンクを配置する例",
+      "画像の上にコンテンツを配置するカードの例",
+      "set--bdrsInner のカードへの活用例",
+      "画像比率を指定しながらコンテンツに合わせる",
+      "横並びと縦並びをブレイクポイントで切り替え、メディア比率も変更する",
+      "ホバーでテキストを出現させる例"
+    ],
+    "keywords": ["Card", "カード", "example", "実装例", "is--boxLink", "isCoverLink", "WithSide", "set--bdrsInner", "BoxLink", "ホバー"],
+    "snippet": "Lism CSS を使ったカードレイアウトの実装例。WithSide+is--boxLink で縦横自動切り替えカード、is--coverLink でカード内別リンク配置、set--bdrsInner での内側角丸活用、ホバーでテキストを出現させる例など多様なパターンを紹介。"
   },
   {
     "sourcePath": "ui/examples/Banner.mdx",
@@ -870,7 +1407,7 @@
     "title": "Hero",
     "description": "Lism CSS で実装するヒーローセクションの実装例です。",
     "category": "ui",
-    "headings": ["Examples", "別ページで確認する"],
+    "headings": ["Examples", "ヘッダー・フッター・レイヤー要素 を追加", "is--layer, ShapeDivider との組み合わせ", "別ページで確認する"],
     "keywords": ["Hero", "ヒーロー", "メインビジュアル", "example"],
     "snippet": "ヒーローセクション（メインビジュアル）の実装例。"
   },
@@ -897,7 +1434,7 @@
     "title": "Timeline",
     "description": "Lism CSS で実装するタイムラインレイアウトの実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Usage"],
+    "headings": ["Create Component", "Source Code", "Import", "Usage", "End, Startの指定, シェイプの協調", "アイコンの使用例", "横並び"],
     "keywords": ["Timeline", "タイムライン", "年表", "example"],
     "snippet": "タイムライン表示の実装例。"
   },
@@ -915,7 +1452,7 @@
     "title": "DividerLabel",
     "description": "Lism CSS で実装する、ラベル付き区切り線コンポーネントの実装例です。",
     "category": "ui",
-    "headings": ["Examples"],
+    "headings": ["Examples", "縦方向"],
     "keywords": ["DividerLabel", "区切り", "ラベル", "example"],
     "snippet": "ラベル付き区切り線の実装例。"
   },
@@ -942,7 +1479,7 @@
     "title": "Decorations",
     "description": "Lism CSS で実装する装飾ボックスパターンの実装例です。",
     "category": "ui",
-    "headings": ["Examples"],
+    "headings": ["Examples", "Call", "Kakko", "Sticky"],
     "keywords": ["Decorations", "装飾", "デコレーション", "ボックス", "example"],
     "snippet": "装飾ボックスの実装例。Call, Kakko, Sticky など様々な装飾パターンを紹介。"
   },
@@ -951,7 +1488,7 @@
     "title": "List",
     "description": "Lism CSS で実装する、アイコン付き装飾リストの実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Usage"],
+    "headings": ["Create Component", "Source Code", "Import", "Usage"],
     "keywords": ["List", "リスト", "アイコン", "装飾リスト", "example"],
     "snippet": "アイコンを使った装飾リストの作成例。List(.c--list)コンポーネントの実装と使い方を紹介。"
   },
@@ -969,7 +1506,7 @@
     "title": "Table",
     "description": "Lism CSS で実装する、行・列の固定表示に対応した汎用テーブルレイアウトの実装例です。",
     "category": "ui",
-    "headings": ["Create Component", "Usage"],
+    "headings": ["Create Component", "Source Code", "Import", "Usage", "スクロール時の固定表示"],
     "keywords": ["Table", "テーブル", "表", "固定", "スクロール", "example"],
     "snippet": "行・列の固定表示に対応した汎用Tableレイアウトの実装例。CSS変数でボーダースタイルを調整可能。"
   },
@@ -987,7 +1524,7 @@
     "title": "u--trim / u--trimAll",
     "description": "テキストのハーフレディング分の余白を調整するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--trim", "u--trimAll"],
+    "headings": ["u--trim & u--trimAll"],
     "keywords": ["u--trim", "u--trimAll", "ハーフレディング", "行間調整", "テキスト余白", "margin-block", "トリム"],
     "snippet": "u--trimは自身のmargin-blockを調整。u--trimAllは直下の子要素（:empty・figure・picture・video・button・textarea・table を除く）の上下マージンを一括調整する除外方式のクラス。"
   },
@@ -1011,12 +1548,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--divide & u--cells",
+    "title": "u--divide & u--enclose",
     "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--divide & u--cells"],
-    "keywords": ["u--divide", "u--cells", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
-    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--cells は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
+    "headings": ["u--divide & u--enclose"],
+    "keywords": ["u--divide", "u--enclose", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--enclose は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
   },
   {
     "sourcePath": "trait-class.mdx",
@@ -1056,20 +1593,20 @@
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--var:bxsh",
+    "title": "set--bxsh",
     "description": "シャドウを構成するCSS変数を再定義するSetクラス。",
     "category": "guide",
-    "headings": ["set--var:bxsh"],
-    "keywords": ["set--var:bxsh", "シャドウ", "影", "box-shadow", "--shc"],
-    "snippet": "set--var:bxsh クラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
+    "headings": ["set--bxsh"],
+    "keywords": ["set--bxsh", "シャドウ", "影", "box-shadow", "--shc"],
+    "snippet": "set--bxsh クラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--var:hov",
+    "title": "set--hov",
     "description": "ホバー状態の判定変数（--_isHov, --_notHov）をセットするSetクラス。",
     "category": "guide",
-    "headings": ["set--var:hov"],
-    "keywords": ["set--var:hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
+    "headings": ["set--hov"],
+    "keywords": ["set--hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
     "snippet": "hover/focus-within状態を空変数トリックで判定。var(--_isHov, 値)でhover時のみスタイル適用。親要素に付与して子要素のホバースタイルを制御可能。"
   },
   {
@@ -1079,25 +1616,43 @@
     "category": "guide",
     "headings": ["has--transition"],
     "keywords": ["has--transition", "トランジション", "アニメーション", "transition"],
-    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--var:hov と組み合わせてスムーズなホバーアニメーションを実現。"
+    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--hov と組み合わせてスムーズなホバーアニメーションを実現。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--var:bdrsInner",
+    "title": "set--bdrsInner",
     "description": "親要素の角丸とPaddingから内側の角丸を自動計算するSetクラス。",
     "category": "guide",
-    "headings": ["set--var:bdrsInner"],
-    "keywords": ["set--var:bdrsInner", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
+    "headings": ["set--bdrsInner"],
+    "keywords": ["set--bdrsInner", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
     "snippet": "親要素の --bdrs と --p から内側の角丸 --bdrs--inner を自動計算。子要素で -bdrs:inner を使って適用。レスポンシブ対応。"
   },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--s",
+    "description": "余白トークン（--s5〜--s80）を現在のフォントサイズ基準で再計算するSetクラス。",
+    "category": "guide",
+    "headings": ["set--s"],
+    "keywords": ["set--s", "余白", "フォントサイズ", "--s-unit", "spacing", "スペーシング", "em", "ボタン", "バッジ"],
+    "snippet": "set--s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s80 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--bleed",
+    "description": "片側ブリードレイアウト用の --bleed 変数を生成するSetクラス。",
+    "category": "guide",
+    "headings": ["set--bleed"],
+    "keywords": ["set--bleed", "ブリード", "bleed", "full-bleed", "--bleed", "--contentSize", "片側ブリード", "ガター"],
+    "snippet": "コンテンツ幅（--contentSize）の外側の余白量を --bleed 変数としてセット。ガター幅（--gutter / --gutter--base）を下限として、片側ブリードレイアウト（コンテナ外まではみ出す要素）を組む際に活用。"
+  },
   {
     "sourcePath": "trait-class.mdx",
     "title": "has--gutter",
     "description": "コンテンツの左右に統一した余白をつける Trait クラス。",
     "category": "guide",
     "headings": ["has--gutter"],
-    "keywords": ["has--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
-    "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter-size変数（初期値 var(--s30)）で余白量を制御。"
+    "keywords": ["has--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter", "--gutter--base"],
+    "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter--base を基準値とし、.has--gutter が要素ローカルの --gutter へ初期化して余白量を制御。"
   },
   {
     "sourcePath": "features.mdx",
@@ -1110,7 +1665,8 @@
       "レイアウトファーストなプリミティブ設計",
       "CSS変数を活かしたユーティリティ設計",
       "CSSを書くことを前提にした設計思想",
-      "メディアクエリに依存しないレイアウト"
+      "メディアクエリに依存しないレイアウト",
+      "デフォルトでコンテナクエリを採用している"
     ],
     "keywords": ["特徴", "設計思想", "レイアウトファースト", "トークン", "プリミティブ", "CSS変数", "メディアクエリなし", "フレームワーク"],
     "snippet": "Lism CSS はサイト全体のCSS設計を丸ごと引き受けるフレームワーク。デザイントークン・命名規則・@layer階層を包括的に定義。レイアウトファーストなプリミティブ設計とCSS変数を活かしたユーティリティ設計が特徴。メディアクエリに依存しないレイアウトパターンも提供。"
@@ -1129,7 +1685,7 @@
     "title": "Skills",
     "description": "プロジェクトにSKILL.mdファイルを配置して、AIエージェントに Lism CSS の設計ルール・Props・トークン・命名規則を伝える方法。",
     "category": "guide",
-    "headings": ["セットアップ"],
+    "headings": ["セットアップ", "skills.sh 経由", "gh コマンド経由", "lism-cli 経由", "配置先の対応表", "アップデート"],
     "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
     "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
   },
@@ -1138,7 +1694,7 @@
     "title": "Trait Class",
     "description": "役割宣言の is--* と機能付与の has--* からなる Trait Class について解説します。",
     "category": "guide",
-    "headings": ["`is--*`（役割宣言）", "`has--*`（機能付与）", "has--transition", "has--gutter", "has--snap", "has--mask"],
+    "headings": ["is--*（役割宣言）", "has--*（機能付与）", "has--transition", "has--gutter", "has--snap", "has--mask"],
     "keywords": [
       "trait",
       "trait class",