@lism-css/mcp 0.14.0 → 0.15.1

package/dist/data/docs-index.json

@@ -13,7 +13,7 @@
     "title": "インストール",
     "description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
     "category": "guide",
-    "headings": ["CSS設計のみを導入したい場合", "Lism専用のJSXコンポーネントを使用したい場合", "Lism UI の導入", "AIツール連携"],
+    "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サーバーも提供。"
   },
@@ -22,7 +22,7 @@
     "title": "CSS設計",
     "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
     "category": "guide",
-    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計"],
+    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "独自クラスの命名と定義場所", "動的な状態管理はdata属性"],
     "keywords": [
       "CSS設計",
       "methodology",
@@ -33,13 +33,14 @@
       "BEM",
       "Property Class",
       "Primitive Class",
+      "Trait Class",
       "Component Class",
       "Set Class",
       "Utility Class",
       "省略",
       "Emmet"
     ],
-    "snippet": "CSSの階層構造を明確に定義。@layer lism-base → lism-primitive → lism-component → lism-custom → lism-utility の順。lism-primitive は trait/layout/atomic のサブレイヤーを持ち、lism-component は BEM 構造の c-- 用、lism-custom はユーザー独自プレフィックスのクラス用レイヤー。Primitive Class (.l--name, .a--name, .is--name 等)、Component Class (.c--name)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
+    "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) の命名規則を説明。"
   },
   {
     "sourcePath": "naming.mdx",
@@ -130,7 +131,8 @@
       "Layouts",
       "Styling",
       "Background",
-      "Other CSS"
+      "Other Properties",
+      "hover"
     ],
     "keywords": [
       "property class",
@@ -228,9 +230,9 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": ["u--cbox", "u--trim & u--trimChildren", "u--srOnly", "u--collapseGrid", "u--snap", "u--clipText", "Opt-in"],
-    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--collapseGrid", "u--snap", "u--clipText"],
-    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--collapseGrid 等を解説。"
+    "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 等を解説。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -238,17 +240,30 @@
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
     "headings": [],
-    "keywords": ["set", "set class", "set--plain", "set--shadow", "set--transition", "set--hov", "set--innerRs", "set--gutter"],
-    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--innerRs, set--gutter を解説。"
+    "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 カテゴリで解説。"
   },
   {
     "sourcePath": "primitives.mdx",
     "title": "Primitive Class",
-    "description": "Lism CSS のプリミティブクラス（is--, l--, a--）の分類と使い方について解説します。",
+    "description": "Lism CSS のプリミティブクラス（l--, a--）の分類と使い方について解説します。",
     "category": "guide",
-    "headings": ["Trait Primitives", "Layout Primitives", "Atomic Primitives"],
-    "keywords": ["primitive", "プリミティブ", "trait", "layout", "レイアウト", "class", "BEM"],
-    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name}, .a--{name}, .is--{name} 等の命名規則。Trait Primitives (is--container, is--wrapper, is--layer, is--boxLink) も解説。BEM 構造を持つ Component Class (.c--{name}) は別レイヤー（lism-component）に配置される。"
+    "headings": ["Layout Primitives", "Atomic Primitives"],
+    "keywords": [
+      "primitive",
+      "プリミティブ",
+      "layout",
+      "レイアウト",
+      "class",
+      "l--",
+      "a--",
+      "比較表",
+      "選び方",
+      "使い分け",
+      "使い分けガイド",
+      "カラムレイアウト"
+    ],
+    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name} (Layout Primitives) と .a--{name} (Atomic Primitives) の命名規則を説明。Layout Primitives 配下にカラムレイアウト Primitive（Columns / AutoColumns / SwitchColumns / WithSide / Grid / TileGrid）の使い分けガイド（比較表と用途別の選び方）も収録。"
   },
   {
     "sourcePath": "base-styles.mdx",
@@ -265,10 +280,20 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.16.0 (2026.04.21)",
+      "`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 v.0.15.0 (2026.04.21)",
+      "`@lism-css/ui` v.0.15.0 (2026.04.21)",
+      "lism-css v.0.14.0 (2026.04.17)",
+      "`@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)",
-      "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)",
-      "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)",
@@ -288,14 +313,14 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.16.0 の破壊的変更として Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）、v.0.15.0 では u--trimChildren → u--trimAll へのリネームと除外方式整理（#324/#326）、u--collapseGrid → u--cells へのリネームと u--divide の新設（#323）、opacity トークンのセマンティック命名変更（#316）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
     "title": "-bd",
     "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
     "category": "property-class",
-    "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意の`border`をインライン出力する方法"],
+    "headings": ["方向指定", "bdwをブレイクポイントで切り替える"],
     "keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
     "snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
@@ -304,9 +329,9 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": ["基本的な使い方", "`.set--hov` と `-hov:to:xxx`"],
-    "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
-    "snippet": "ホバー関連のProp。-hov:{prop} クラスでホバーエフェクトを設定。set--transition との組み合わせでアニメーション実現。set--hov と -hov:to:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
+    "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 クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
   {
     "sourcePath": "property-class/max-sz.mdx",
@@ -331,7 +356,7 @@
     "title": "Lism Props",
     "description": "<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。",
     "category": "core-components",
-    "headings": ["as", "className", "layout / atomic", "set / util", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "headings": ["as", "className", "set / util", "layout / atomic", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
     "keywords": [
       "Lism Props",
       "props",
@@ -349,12 +374,15 @@
       "isLayer",
       "isBoxLink",
       "isContainer",
+      "hasTransition",
+      "hasGutter",
+      "hasSnap",
       "responsive",
       "レスポンシブ",
       "shorthand",
       "省略記法"
     ],
-    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で c-- クラス（Component Class）や任意クラスを直接指定、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isContainer などの Trait Props も提供。CSS Props (p, fz, c 等) は値の種類に応じて class / CSS変数 / style属性を自動で切り替え、配列・オブジェクト形式でレスポンシブ指定も可能。exProps で外部コンポーネント向け props を明示的に渡せる。生成される class 属性は className → a-- → l-- → is-- → set-- → u-- → - の順で出力される。"
+    "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-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -415,7 +443,7 @@
     "title": "DummyText",
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
-    "headings": ["Props", "Import", "使用例"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
@@ -552,17 +580,17 @@
     "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin で管理。見出しタグは余白が大きくなる。is--skipFlowで余白打ち消しも可能。"
   },
   {
-    "sourcePath": "primitives/l--fluidCols.mdx",
-    "title": "FluidCols / l--fluidCols",
-    "description": "l--fluidCols は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
+    "sourcePath": "primitives/l--autoColumns.mdx",
+    "title": "AutoColumns / l--autoColumns",
+    "description": "l--autoColumns は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
-      "FluidCols",
+      "AutoColumns",
       "流動カラム",
       "auto-fill",
       "fluid",
-      "l--fluidCols",
+      "l--autoColumns",
       "display",
       "display: grid",
       "auto-wrap",
@@ -583,25 +611,25 @@
     "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラス。arでアスペクト比を指定。"
   },
   {
-    "sourcePath": "primitives/l--switchCols.mdx",
-    "title": "SwitchCols / l--switchCols",
-    "description": "l--switchCols は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
+    "sourcePath": "primitives/l--switchColumns.mdx",
+    "title": "SwitchColumns / l--switchColumns",
+    "description": "l--switchColumns は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage"],
-    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols", "responsive columns", "メディアクエリなし"],
+    "keywords": ["SwitchColumns", "切り替え", "switch", "カラム", "l--switchColumns", "responsive columns", "メディアクエリなし"],
     "snippet": "複数列以上と1列への切り替えをコンテナクエリ・メディアクエリを使わずに実装するクラス。breakSizeで切り替えポイントを指定。"
   },
   {
-    "sourcePath": "primitives/l--sideMain.mdx",
-    "title": "SideMain / l--sideMain",
-    "description": "l--sideMain は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
+    "sourcePath": "primitives/l--withSide.mdx",
+    "title": "WithSide / l--withSide",
+    "description": "l--withSide は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
-    "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side", "two column"],
+    "keywords": ["WithSide", "サイドバー", "sidebar", "メイン", "l--withSide", "2カラム", "is--side", "two column"],
     "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。メディアクエリ・コンテナクエリに依存せず自動で切り替わる。"
   },
   {
-    "sourcePath": "primitives/is--container.mdx",
+    "sourcePath": "trait-class/is--container.mdx",
     "title": "Container / is--container",
     "description": "is--container は、container-type を宣言してコンテナクエリを有効にするためのクラスです。",
     "category": "primitives",
@@ -610,7 +638,7 @@
     "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
   },
   {
-    "sourcePath": "primitives/is--layer.mdx",
+    "sourcePath": "trait-class/is--layer.mdx",
     "title": "Layer / is--layer",
     "description": "is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。",
     "category": "primitives",
@@ -631,7 +659,7 @@
     "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。backdrop-filterの活用も解説。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "BoxLink / is--boxLink",
     "description": "is--boxLink は、ボックス全体をクリック可能にするクラスです。",
     "category": "primitives",
@@ -652,7 +680,7 @@
     "snippet": "ボックス全体をリンク領域にする。hrefを指定してaタグにする方法と、内部にis--coverLink（旧u--expandedLink）を配置する方法の2通りがある。"
   },
   {
-    "sourcePath": "primitives/is--wrapper.mdx",
+    "sourcePath": "trait-class/is--wrapper.mdx",
     "title": "Wrapper / is--wrapper",
     "description": "is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。",
     "category": "primitives",
@@ -710,7 +738,7 @@
     "title": "Accordion",
     "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["基本構造", "ソースコード", "Import", "Props", "Examples"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
     "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
   },
@@ -719,7 +747,7 @@
     "title": "Modal",
     "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Props", "Usage"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ", "popup"],
     "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
   },
@@ -728,7 +756,7 @@
     "title": "Tabs",
     "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["基本構造", "CSS", "JavaScript", "Import", "Props", "Usage", "スタイルバリエーションの作成例", "Opt-in"],
+    "headings": ["How to use", "Examples", "Opt-in"],
     "keywords": ["Tabs", "タブ", "切り替え", "panel", "tab navigation"],
     "snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
   },
@@ -755,7 +783,7 @@
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css", "Only Core"],
+    "headings": ["How to use", "Examples", "Only lism-css"],
     "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
     "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
   },
@@ -899,7 +927,7 @@
     "title": "BalloonBox",
     "description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
     "category": "ui",
-    "headings": ["Import", "Props", "Usage"],
+    "headings": ["Source Code", "Props", "Usage"],
     "keywords": ["BalloonBox", "吹き出し", "ふきだし", "balloon", "装飾", "ボックス", "example"],
     "snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
   },
@@ -950,15 +978,15 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--trim / u--trimChildren",
+    "title": "u--trim / u--trimAll",
     "description": "テキストのハーフレディング分の余白を調整するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--trim", "u--trimChildren"],
-    "keywords": ["u--trim", "u--trimChildren", "ハーフレディング", "行間調整", "テキスト余白", "margin-block", "トリム"],
-    "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
+    "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 を除く）の上下マージンを一括調整する除外方式のクラス。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "is--coverLink",
     "description": "クリック範囲を親要素全体に広げるためのクラス。is--boxLinkと併用。",
     "category": "primitives",
@@ -977,20 +1005,20 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--collapseGrid",
-    "description": "グリッド・フレックス子要素間にボーダー（区切り線）を表示するユーティリティクラス。",
+    "title": "u--divide & u--cells",
+    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--collapseGrid"],
-    "keywords": ["u--collapseGrid", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
-    "snippet": "box-shadowで子要素間に区切りボーダーを表示。p='0' ov='clip'で周囲のボーダーを非表示にでき、bd追加でカレンダー風の表現も可能。"
+    "headings": ["u--divide & u--cells"],
+    "keywords": ["u--divide", "u--cells", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--cells は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
   },
   {
-    "sourcePath": "utility-class.mdx",
-    "title": "u--snap",
-    "description": "scroll-snap系プロパティをCSS変数で制御するユーティリティクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--snap",
+    "description": "scroll-snap系プロパティをCSS変数で制御する Trait クラス。",
     "category": "guide",
-    "headings": ["u--snap"],
-    "keywords": ["u--snap", "スクロールスナップ", "scroll-snap", "カルーセル"],
+    "headings": ["has--snap"],
+    "keywords": ["has--snap", "スクロールスナップ", "scroll-snap", "カルーセル"],
     "snippet": "scroll-snap-type等のプロパティをCSS変数でセットできるようにするクラス。"
   },
   {
@@ -1013,47 +1041,56 @@
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--shadow",
+    "title": "set--revert",
+    "description": "ブラウザデフォルトの見た目を明示的に復活させるSetクラス。",
+    "category": "guide",
+    "headings": ["set--revert"],
+    "keywords": ["set--revert", "revert", "リバート", "list-style", "ul", "ol", "箇条書き"],
+    "snippet": "ブラウザデフォルトの見た目を明示的に復活させるクラス。単体ではスタイルを持たず、現状は ul / ol のみ対象。Property Class 付きリストで箇条書き表示を維持したい場合に使用。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--var:bxsh",
     "description": "シャドウを構成するCSS変数を再定義するSetクラス。",
     "category": "guide",
-    "headings": ["set--shadow"],
-    "keywords": ["set--shadow", "シャドウ", "影", "box-shadow", "--shc"],
-    "snippet": "set--shadowクラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
+    "headings": ["set--var:bxsh"],
+    "keywords": ["set--var:bxsh", "シャドウ", "影", "box-shadow", "--shc"],
+    "snippet": "set--var:bxsh クラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--hov",
+    "title": "set--var:hov",
     "description": "ホバー状態の判定変数（--_isHov, --_notHov）をセットするSetクラス。",
     "category": "guide",
-    "headings": ["set--hov"],
-    "keywords": ["set--hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
+    "headings": ["set--var:hov"],
+    "keywords": ["set--var:hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
     "snippet": "hover/focus-within状態を空変数トリックで判定。var(--_isHov, 値)でhover時のみスタイル適用。親要素に付与して子要素のホバースタイルを制御可能。"
   },
   {
-    "sourcePath": "set-class.mdx",
-    "title": "set--transition",
-    "description": "CSS変数を用いてtransitionプロパティをセットするSetクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--transition",
+    "description": "CSS変数を用いてtransitionプロパティをセットする Trait クラス。",
     "category": "guide",
-    "headings": ["set--transition"],
-    "keywords": ["set--transition", "トランジション", "アニメーション", "transition"],
-    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--hovと組み合わせてスムーズなホバーアニメーションを実現。"
+    "headings": ["has--transition"],
+    "keywords": ["has--transition", "トランジション", "アニメーション", "transition"],
+    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--var:hov と組み合わせてスムーズなホバーアニメーションを実現。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--innerRs",
+    "title": "set--var:bdrsInner",
     "description": "親要素の角丸とPaddingから内側の角丸を自動計算するSetクラス。",
     "category": "guide",
-    "headings": ["set--innerRs"],
-    "keywords": ["set--innerRs", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
+    "headings": ["set--var:bdrsInner"],
+    "keywords": ["set--var:bdrsInner", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
     "snippet": "親要素の --bdrs と --p から内側の角丸 --bdrs--inner を自動計算。子要素で -bdrs:inner を使って適用。レスポンシブ対応。"
   },
   {
-    "sourcePath": "set-class.mdx",
-    "title": "set--gutter",
-    "description": "コンテンツの左右に統一した余白をつけるSetクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--gutter",
+    "description": "コンテンツの左右に統一した余白をつける Trait クラス。",
     "category": "guide",
-    "headings": ["set--gutter"],
-    "keywords": ["set--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
+    "headings": ["has--gutter"],
+    "keywords": ["has--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
     "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter-size変数（初期値 var(--s30)）で余白量を制御。"
   },
   {
@@ -1086,8 +1123,41 @@
     "title": "Skills",
     "description": "プロジェクトにSKILL.mdファイルを配置して、AIエージェントに Lism CSS の設計ルール・Props・トークン・命名規則を伝える方法。",
     "category": "guide",
-    "headings": ["セットアップ", "アップデート", "ファイル構成"],
+    "headings": ["セットアップ"],
     "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
     "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
+  },
+  {
+    "sourcePath": "trait-class.mdx",
+    "title": "Trait Class",
+    "description": "役割宣言の is--* と機能付与の has--* からなる Trait Class について解説します。",
+    "category": "guide",
+    "headings": ["`is--*`（役割宣言）", "`has--*`（機能付与）", "has--transition", "has--gutter", "has--snap", "has--mask"],
+    "keywords": [
+      "trait",
+      "trait class",
+      "is--",
+      "has--",
+      "is--container",
+      "is--wrapper",
+      "is--layer",
+      "is--boxLink",
+      "has--transition",
+      "has--gutter",
+      "has--snap",
+      "has--mask",
+      "役割宣言",
+      "機能付与"
+    ],
+    "snippet": "Trait Class は要素に「役割」を宣言（is--*）したり「機能」を付与（has--*）するためのクラス群。@layer lism-trait に属する。is--container, is--wrapper, is--layer, is--boxLink, has--transition, has--gutter, has--snap, has--mask を提供。"
+  },
+  {
+    "sourcePath": "trait-class.mdx",
+    "title": "has--mask",
+    "description": "--maskImg 変数と組み合わせて、自身にマスクを適用する Trait クラス。",
+    "category": "guide",
+    "headings": ["has--mask"],
+    "keywords": ["has--mask", "マスク", "mask", "--maskImg", "--maskPos", "--maskSize", "mask-image"],
+    "snippet": "--maskImg変数にSVG等を指定して自身にマスクを適用するクラス。--maskPos, --maskSize, --maskRepeat 変数でマスクの表示をコントロール可能。"
   }
 ]