@lism-css/mcp 0.13.0 → 0.15.0

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,42 @@
       "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",
+    "title": "命名規則",
+    "description": "Lism CSS における Property Class の Prop 名・値名の省略ルールや、CSS変数の命名規則について解説します。",
+    "category": "guide",
+    "headings": ["CSS変数の命名規則", "クラスの命名規則", "`{prop}` の省略ルール", "`{value}` の省略ルール"],
+    "keywords": [
+      "命名規則",
+      "naming",
+      "省略",
+      "省略形",
+      "shorthand",
+      "Emmet",
+      "prop",
+      "value",
+      "CSS変数",
+      "カスタムプロパティ",
+      "Property Class",
+      "prefix",
+      "camelCase",
+      "token",
+      "breakpoint",
+      "方向指定",
+      "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}` 部分を採用。"
   },
   {
     "sourcePath": "tokens.mdx",
@@ -102,7 +131,8 @@
       "Layouts",
       "Styling",
       "Background",
-      "Other CSS"
+      "Other Properties",
+      "hover"
     ],
     "keywords": [
       "property class",
@@ -156,7 +186,15 @@
       "overflow",
       "opacity",
       "flex",
-      "grid"
+      "grid",
+      "wm",
+      "writing-mode",
+      "iso",
+      "isolation",
+      "float",
+      "clear",
+      "whs",
+      "white-space"
     ],
     "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。"
   },
@@ -192,8 +230,8 @@
     "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"],
+    "headings": ["u--cbox", "u--trim & u--trimChildren", "u--srOnly", "u--collapseGrid", "u--clipText", "Opt-in"],
+    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--collapseGrid", "u--clipText"],
     "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--collapseGrid 等を解説。"
   },
   {
@@ -202,17 +240,17 @@
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
     "headings": [],
-    "keywords": ["set", "set class", "set--plain", "set--shadow", "set--transition", "set--hov", "set--bp", "set--innerRs", "set--gutter"],
-    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, 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", "is--vertical"],
-    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name}, .a--{name}, .is--{name} 等の命名規則。Trait Primitives (is--container, is--wrapper, is--layer, is--boxLink, is--vertical) も解説。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) の命名規則を説明。"
   },
   {
     "sourcePath": "base-styles.mdx",
@@ -229,7 +267,12 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
-      "v.0.13.0 (unreleased)",
+      "`@lism-css/ui` v.0.14.0 (2026.04.17)",
+      "v.0.14.0 (2026.04.17)",
+      "`@lism-css/ui` v.0.13.1 (2026.04.15)",
+      "v.0.13.1 (2026.04.15)",
+      "`@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)",
@@ -265,14 +308,14 @@
     "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",
-    "title": "サイズ制御クラス -max-sz:",
-    "description": "コンテンツの最大幅を制御する -max-sz ユーティリティクラスの使い方について解説します。",
+    "title": "-max-sz",
+    "description": "コンテンツの最大幅を制御する -max-sz プロパティクラスの使い方について解説します。",
     "category": "property-class",
     "headings": ["-max-sz:full, -max-sz:container", "DEMOページ"],
     "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "container"],
@@ -284,8 +327,41 @@
     "description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
     "category": "core-components",
     "headings": ["Import", "Lism Props"],
-    "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
-    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+    "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "className", "layout", "atomic", "as", "exProps"],
+    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。className で c-- クラスや任意クラスを指定、layout で l-- クラス、atomic で a-- クラス（divider / spacer / decorator）を指定可能。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+  },
+  {
+    "sourcePath": "core-components/lism-props.mdx",
+    "title": "Lism Props",
+    "description": "<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。",
+    "category": "core-components",
+    "headings": ["as", "className", "set / util", "layout / atomic", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "keywords": [
+      "Lism Props",
+      "props",
+      "プロパティ",
+      "as",
+      "className",
+      "layout",
+      "atomic",
+      "set",
+      "util",
+      "exProps",
+      "CSS Props",
+      "Trait Props",
+      "isWrapper",
+      "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, 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",
@@ -346,19 +422,10 @@
     "title": "DummyText",
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
-    "headings": ["Props", "Import", "使用例"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
-  {
-    "sourcePath": "ui/DummyImage.mdx",
-    "title": "DummyImage",
-    "description": "プレースホルダー用のダミー画像を出力するコンポーネントです。",
-    "category": "ui",
-    "headings": ["Import", "使用例"],
-    "keywords": ["DummyImage", "ダミー画像", "プレースホルダー", "テスト画像"],
-    "snippet": "cdn.lism-css.comからダミーのプレースホルダー画像を出力するコンポーネント。@lism-css/uiパッケージから提供。"
-  },
   {
     "sourcePath": "primitives/l--box.mdx",
     "title": "Box / l--box",
@@ -541,7 +608,7 @@
     "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",
@@ -550,7 +617,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",
@@ -571,7 +638,7 @@
     "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。backdrop-filterの活用も解説。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "BoxLink / is--boxLink",
     "description": "is--boxLink は、ボックス全体をクリック可能にするクラスです。",
     "category": "primitives",
@@ -592,7 +659,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",
@@ -650,7 +717,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パッケージで提供。"
   },
@@ -659,7 +726,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パッケージで提供。"
   },
@@ -668,7 +735,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パッケージで提供。"
   },
@@ -695,7 +762,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パッケージで提供。"
   },
@@ -839,7 +906,7 @@
     "title": "BalloonBox",
     "description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
     "category": "ui",
-    "headings": ["Import", "Props", "Usage"],
+    "headings": ["Source Code", "Props", "Usage"],
     "keywords": ["BalloonBox", "吹き出し", "ふきだし", "balloon", "装飾", "ボックス", "example"],
     "snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
   },
@@ -898,7 +965,7 @@
     "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "is--coverLink",
     "description": "クリック範囲を親要素全体に広げるためのクラス。is--boxLinkと併用。",
     "category": "primitives",
@@ -925,12 +992,12 @@
     "snippet": "box-shadowで子要素間に区切りボーダーを表示。p='0' ov='clip'で周囲のボーダーを非表示にでき、bd追加でカレンダー風の表現も可能。"
   },
   {
-    "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変数でセットできるようにするクラス。"
   },
   {
@@ -953,58 +1020,58 @@
   },
   {
     "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)）で余白量を制御。"
   },
-  {
-    "sourcePath": "set-class.mdx",
-    "title": "set--bp",
-    "description": "特定のブレイクポイント以上でのみスタイルを適用するSetクラス。",
-    "category": "guide",
-    "headings": ["set--bp"],
-    "keywords": ["set--bp", "ブレイクポイント", "メディアクエリ", "レスポンシブ", "--_is_sm", "条件付きスタイル"],
-    "snippet": "特定のブレイクポイント以上でのみスタイルを適用するクラス。var(--_is_sm) 等の変数を使い、レスポンシブ対応していないプロパティを条件付きで変化させるハック的手段。"
-  },
   {
     "sourcePath": "features.mdx",
     "title": "Lism CSSの特徴",
@@ -1026,7 +1093,7 @@
     "title": "MCP Server",
     "description": "AIコーディングツールが Lism CSS のコンポーネント・Props・トークン情報をリアルタイムに参照できる MCP サーバーのセットアップ方法。",
     "category": "guide",
-    "headings": ["できること", "セットアップ"],
+    "headings": ["セットアップ", "できること"],
     "keywords": ["MCP", "AI", "Claude", "Cursor", "セットアップ", "コーディング支援", "Model Context Protocol"],
     "snippet": "@lism-css/mcp は Lism CSS の情報をAIコーディングツールに提供するMCPサーバー。コンポーネント情報の参照・Props↔CSSマッピング・デザイントークン参照・ドキュメント検索・CSS→Lism変換に対応。Claude Code, Cursor 等から利用可能。"
   },
@@ -1035,17 +1102,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": "primitives/is--vertical.mdx",
-    "title": "is--vertical",
-    "description": "is--vertical は、要素に縦書きモード（writing-mode）を適用するクラスです。",
-    "category": "primitives",
-    "headings": ["CSS", "Usage"],
-    "keywords": ["is--vertical", "縦書き", "writing-mode", "vertical-rl", "vertical-lr", "縦方向", "テキスト方向"],
-    "snippet": "要素に縦書きモード（writing-mode）を適用するクラス。--vertical-modeトークンで値を管理。is--vertical@sm / is--vertical@md でブレイクポイント以上のみ縦書きにするバリエーションも提供。set--bp との併用が必要。"
+    "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 変数でマスクの表示をコントロール可能。"
   }
 ]

package/dist/data/guides/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: lism-css-guide
-description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIやページレイアウトの実装・コーディング、JSX・React・Astroでコンポーネントを実装・編集する時に参照。ユーティリティクラス・デザイントークン・レイアウトプリミティブ・命名規則・CSSのLayer規則・レスポンシブ対応・ベーススタイリングのルール・CSS設計を提供する。"
+description: "Lism CSS の設計・実装に関するガイド。CSSの編集・追加、UIコンポーネントやレイアウトの実装・編集時に参照。c--*, l--*, a--*, is--*, has--*, set--*, u--* -prop:value 形式のクラス・トークン(CSS変数)・命名規則・Layer規則・レスポンシブ対応について調べる時にも参照。
 ---
 
 # Lism CSS Best Practices
@@ -9,7 +9,7 @@ description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIや
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.13.0` / `@lism-css/ui@0.12.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.15.0` / `@lism-css/ui@0.15.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview/
 
@@ -19,7 +19,7 @@ description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIや
 ### CDNでCSSファイルのみ読み込む場合
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.13.0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.15.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
@@ -78,7 +78,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 | NG | OK | 理由 |
 |----|-----|------|
 | `<Heading level={3}>` | `<Heading level="3">` | `level` は文字列型（`'1'`〜`'6'`） |
-| `hov="shadow"` | `hov="bxsh"` | Lism の省略名は `bxsh`（box-shadow） |
+| `hov="shadow"` | `hov="-bxsh"` | Lism の省略名は `bxsh`（box-shadow） |
 | `bgc="secondary"` | `bgc="base-2"` | カラートークンの間違い |
 | `p="8"`, `g="6"` | `p="20"`, `g="10"` | スペーストークンの間違い |
 
@@ -100,21 +100,23 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 このスキルには以下の詳細ファイルが含まれます。必要に応じて参照してください。
 
 - [tokens.md](./tokens.md) — Lismで利用できるデザイントークンとCSS変数。（余白・フォントサイズ・タイポグラフィ・角丸・影・カラー・不透明度）
-- [css-rules.md](./css-rules.md) — CSS設計の概要。（Layer構造・クラスの分類・命名規則・プレフィックスのつけ方・カスタムCSSの追加ルール）
+- [css-rules.md](./css-rules.md) — CSS設計の概要。（Layer構造・クラスの分類・プレフィックスのつけ方・Component クラス（`c--`）・カスタムCSSの追加ルール）
+- [naming.md](./naming.md) — 命名規則の詳細。（CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルール）
 - [base-styles.md](./base-styles.md) — HTML要素のベーススタイリング。（Reset CSSやHTML要素の基本スタイルをカスタマイズできるCSS変数）
 - [set-class.md](./set-class.md) — ベーススタイル・変数セットに使用する`set--` クラスの一覧と用途。
-- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`is--`/`l--`/`a--`）と Component クラス（`c--`）の一覧と用途。
+- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`l--`/`a--`）の一覧と用途。
+- [trait-class.md](./trait-class.md) — 要素に役割・機能を宣言する Trait クラス（`is--`/`has--`）の一覧と用途。
 - [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
 - [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
 - [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
 - [components-core.md](./components-core.md) — `lism-css`パッケージに含まれるコアコンポーネントの一覧と用途。（React, Astroで使える`<Lism>`・Lism Props・getLismProps ）
 - [components-ui.md](./components-ui.md) — `@lism-css/ui`パッケージに含まれるUIコンポーネント（Accordion・Modal・Tabs・Button 等）の Props・構造とCLIコマンドによるインストール方法。
+- [customize.md](./customize.md) — SCSS変数の上書きによる、lism-cssのコアCSSの挙動カスタマイズ方法・`lism.config.js` によるコアコンポーネント挙動のカスタマイズ方法。
 
 これら各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。
 
-### Primitive 単位の詳細リファレンス
+### クラス単位の詳細リファレンス
 
-`l--*` / `is--*` / `a--*` クラスや対応するコンポーネント（`<Flex>`, `<Grid>` 等）を使ってUIを実装する時は、以下の Primitive 別ファイルを参照してください。
 
 **Layout Primitives**
 
@@ -132,13 +134,19 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `l--switchCols` / `<SwitchCols>`: [primitives/l--switchCols.md](./primitives/l--switchCols.md)
 - `l--sideMain` / `<SideMain>`: [primitives/l--sideMain.md](./primitives/l--sideMain.md)
 
-**Trait Primitives**
+**Trait Class (is--)**
 
-- `is--container` / `<Container>`: [primitives/is--container.md](./primitives/is--container.md)
-- `is--wrapper` / `<Wrapper>`: [primitives/is--wrapper.md](./primitives/is--wrapper.md)
-- `is--layer` / `<Layer>`: [primitives/is--layer.md](./primitives/is--layer.md)
-- `is--boxLink` / `<BoxLink>`: [primitives/is--boxLink.md](./primitives/is--boxLink.md)
-- `is--vertical`: [primitives/is--vertical.md](./primitives/is--vertical.md)
+- `is--container` / `<Container>`: [trait-class/is--container.md](./trait-class/is--container.md)
+- `is--wrapper` / `<Wrapper>`: [trait-class/is--wrapper.md](./trait-class/is--wrapper.md)
+- `is--layer` / `<Layer>`: [trait-class/is--layer.md](./trait-class/is--layer.md)
+- `is--boxLink` / `<BoxLink>`: [trait-class/is--boxLink.md](./trait-class/is--boxLink.md)
+
+**Trait Class (has--)**
+
+- `has--transition` (`hasTransition` prop): [trait-class/has--transition.md](./trait-class/has--transition.md)
+- `has--gutter` (`hasGutter` prop): [trait-class/has--gutter.md](./trait-class/has--gutter.md)
+- `has--snap` (`hasSnap` prop): [trait-class/has--snap.md](./trait-class/has--snap.md)
+- `has--mask` (`hasMask` prop): [trait-class/has--mask.md](./trait-class/has--mask.md)
 
 **Atomic Primitives**
 
@@ -147,8 +155,14 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `a--spacer` / `<Spacer>`: [primitives/a--spacer.md](./primitives/a--spacer.md)
 - `a--decorator` / `<Decorator>`: [primitives/a--decorator.md](./primitives/a--decorator.md)
 
+**Property Class（特殊仕様）**
+
+- `-bd` / `-bd-{side}` 系: [property-class/bd.md](./property-class/bd.md)
+- `-hov:*` 系: [property-class/hov.md](./property-class/hov.md)
+- `-max-sz:full` / `-max-sz:container`: [property-class/max-sz.md](./property-class/max-sz.md)
+
 
 ## このスキルファイル自身のアップデート方法
 
 `skills add lism-css/lism-css` を再実行してください。
-更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/.claude/skills/lism-css-guide) を直接チェックしてください。
+更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/skills/lism-css-guide) を直接チェックしてください。

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

@@ -71,6 +71,8 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 
 ### リスト（ul, ol）
 
+class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動で復活する（`_html.scss`）。Property Class のみが付いた `ul` / `ol` では list-style が消えたままになるため、箇条書き表示を維持したい場合は [`set--revert`](./set-class.md#set--revert) を付与する。
+
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
 | `--list-px-s` | `var(--s30)` | リストの `padding-inline-start` |