@lism-css/mcp 0.13.0 → 0.14.0

package/dist/data/docs-index.json

@@ -22,7 +22,7 @@
     "title": "CSS設計",
     "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
     "category": "guide",
-    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "命名規則について", "単語の省略について"],
+    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計"],
     "keywords": [
       "CSS設計",
       "methodology",
@@ -41,6 +41,34 @@
     ],
     "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) の命名規則を説明。"
   },
+  {
+    "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",
     "title": "デザイントークン",
@@ -156,7 +184,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} 形式もサポート。"
   },
@@ -202,8 +238,8 @@
     "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--shadow", "set--transition", "set--hov", "set--innerRs", "set--gutter"],
+    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--innerRs, set--gutter を解説。"
   },
   {
     "sourcePath": "primitives.mdx",
@@ -211,8 +247,8 @@
     "description": "Lism CSS のプリミティブクラス（is--, 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）に配置される。"
+    "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）に配置される。"
   },
   {
     "sourcePath": "base-styles.mdx",
@@ -229,7 +265,10 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
-      "v.0.13.0 (unreleased)",
+      "`@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)",
@@ -271,8 +310,8 @@
   },
   {
     "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 +323,38 @@
     "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", "layout / atomic", "set / util", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "keywords": [
+      "Lism Props",
+      "props",
+      "プロパティ",
+      "as",
+      "className",
+      "layout",
+      "atomic",
+      "set",
+      "util",
+      "exProps",
+      "CSS Props",
+      "Trait Props",
+      "isWrapper",
+      "isLayer",
+      "isBoxLink",
+      "isContainer",
+      "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-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -350,15 +419,6 @@
     "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",
@@ -996,15 +1056,6 @@
     "keywords": ["set--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 +1077,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 等から利用可能。"
   },
@@ -1038,14 +1089,5 @@
     "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 との併用が必要。"
   }
 ]

package/dist/data/guides/SKILL.md

@@ -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.14.0` / `@lism-css/ui@0.14.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.14.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
@@ -100,10 +100,11 @@ 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 クラス（`is--`/`l--`/`a--`）の一覧と用途。
 - [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
 - [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
 - [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
@@ -138,7 +139,6 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `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)
 
 **Atomic Primitives**
 

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

@@ -20,7 +20,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 - [Layout Primitives](#layout-primitives)
 - [`getLismProps()`](#getlismprops--外部コンポーネントとの連携)
 
-[詳細](https://lism-css.com/docs/core-components/Lism/)
+[詳細](https://lism-css.com/docs/core-components/lism-props/)
 
 ---
 
@@ -41,7 +41,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 
 ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
 
-`<Lism>` で受け取れる Lism CSS 専用プロパティを **Lism Props** と呼びます。
+`<Lism>`系コンポーネントで受け取れる Lism CSS 専用プロパティを **Lism Props** と呼びます。
 
 
 ### 共通 Props
@@ -51,9 +51,10 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | Prop | 説明 | 例 |
 |------|------|-----|
 | `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
-| `lismClass` | コンポーネントの主要クラス名を指定。（`c--{lismClass}`） | `lismClass="c--myComponent"` |
-| `variant` | `lismClass` に対するバリエーションクラスを指定。（`c--{lismClass}--{variant}`） | `variant="secondary"` |
-| `layout` | レイアウトプリミティブ（`l--{layout}`）を指定。 | `layout="flow"` |
+| `lismClass` | コンポーネント基底となる `c--*` クラスを指定。`variant` による BEM 展開の対象 | `lismClass="c--myComponent"` |
+| `variant` | `lismClass` 先頭クラスに対する BEM Modifier を付与（`c--` 専用。`a--` / `l--` には展開されない） | `variant="secondary"` |
+| `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
+| `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
 | `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="gutter"`, `set="transition plain"`, `set="-plain"` |
 | `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
 | `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
@@ -113,7 +114,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 |------|------|-----|
 | トークン値・プリセット値 | `-{prop}:{value}` クラスのみ | `fz='l'` → `class="-fz:l"` |
 | `true` または `"-"` | `-{prop}` クラスのみ（変数なし） | `bd` / `bd='-'` → `class="-bd"` |
-| `:` で始まる値 | 強制的にユーティリティクラス化 | `p=':hoge'` → `class="-p:hoge"` |
+| `:` で始まる値 | 強制的にクラス化 | `p=':hoge'` → `class="-p:hoge"` |
 | その他の値（レスポンシブ対応プロパティ） | `-{prop}` + `--{prop}` | `fz='20px'` → `class="-fz"` + `style="--fz:20px"` |
 | その他の値（レスポンシブ非対応プロパティ） | `style` 属性に直接出力 | `o='0.7'` → `style="opacity:0.7"` |
 | その他の値（変数プロパティ） | `--{prop}` | `bdw='2px'` → `style="--bdw:2px"` (`border-width`としては出力されない) |
@@ -189,7 +190,6 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 | `isContainer` | `is--container` |
 | `isSide` | `is--side` |
 | `isSkipFlow` | `is--skipFlow` |
-| `isVertical` | `is--vertical` |
 
 ```jsx
 // Trait Props の使用例
@@ -236,6 +236,7 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 | `<Divider>` | `a--divider` | 区切り線 |
 | `<Decorator>` | `a--decorator` | 装飾要素（SCSS定義なし、クラス名のみ出力） |
 
+
 各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
 
 

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

@@ -25,7 +25,6 @@ import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
 - [Tabs](#tabs)
 - [ShapeDivider](#shapedivider)
 - [DummyText](#dummytext)
-- [DummyImage](#dummyimage)
 - [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
 
 [詳細](https://lism-css.com/ui/)
@@ -313,17 +312,6 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ```
 
 
-## DummyImage
-
-ソース: [DummyImage/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/DummyImage)
-
-ダミーのプレースホルダー画像を出力するコンポーネント。`cdn.lism-css.com` からダミー画像を取得。
-
-```jsx
-<DummyImage />
-```
-
-
 ## CLI でプロジェクトにコピーして使う
 
 `@lism-css/ui` の UI コンポーネントは、CLI コマンドで自分のプロジェクトにソースコードをコピーして使うこともできます。コピーしたファイルは自由にカスタマイズ可能です。

package/dist/data/guides/css-rules.md

@@ -3,12 +3,15 @@
 ## TOC
 
 - [CSS Layer 構造](#css-layer-構造)
-- [命名規則とプレフィックス](#命名規則とプレフィックス)
+- [プレフィックスとクラス分類](#プレフィックスとクラス分類)
+- [Component Class（`c--`）](#component-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology/)
 
+> **命名規則の詳細**: CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルールについては [naming.md](./naming.md) を参照してください。
+
 ---
 
 ## CSS Layer 構造
@@ -31,7 +34,7 @@ Settings（トークン定義）
 ```
 
 
-## 命名規則とプレフィックス
+## プレフィックスとクラス分類
 
 [詳細](https://lism-css.com/docs/primitives/)
 
@@ -59,33 +62,96 @@ Settings（トークン定義）
 - 子要素: `.c--card_header`, `.c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
 
 **記述順序:**
-class 属性にクラスを直接記述する場合は、以下の順序で並べてください。粒度の大きい（塊としての役割を持つ）クラスから、粒度の小さい（単一プロパティ制御）クラスの順です。
+class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
 
 ```
-[customClass] [c--/a--] [l--] [is--*] [set--*] [u--*] [Property Class...]
+[customClass] [c--] [a--] [l--] [is--] [set--] [u--] [-]
 ```
 
 | # | 区分 | 例 |
 |---|---|---|
-| 1 | 独自クラス（`customClass`） | `my-card`, `hoge` |
-| 2 | Component / Atomic Primitive（`c--` / `a--`） | `c--box`, `a--icon`, `c--box c--box--primary` |
-| 3 | Layout Primitive（`l--`） | `l--flex`, `l--grid` |
-| 4 | Trait Primitives（`is--`） | `is--wrapper`, `is--layer` |
-| 5 | Set Class（`set--`） | `set--hov`, `set--card` |
-| 6 | ユーティリティ（`u--`） | `u--cbox`, `u--trim` |
-| 7 | Property Class（`-`） | `-p:20`, `-bgc:base-2` |
+| 1 | 独自クラス（`customClass`） | `z--header`, `hoge` |
+| 2 | Component（`c--`） | `c--box`, `c--box--primary` |
+| 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
+| 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
+| 5 | Trait Primitives（`is--`） | `is--wrapper`, `is--layer` |
+| 6 | Set Class（`set--`） | `set--hov`, `set--transition` |
+| 7 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
+| 8 | Property Class（`-`） | `-p:20`, `-bgc:base-2` |
 
 ```html
 <!-- OK -->
 <div class="c--nav l--flex -p:20 -g:20">...</div>
 
-<!-- NG: Property Class が先 -->
+<!-- NG: Property Class が先 になっている -->
 <div class="-p:20 -g:20 l--flex c--nav">...</div>
 ```
 
 なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
 
 
+## Component Class（`c--`）
+
+`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+
+`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
+
+| 分類 | 形式 | 例 |
+|---|---|---|
+| Block | `.c--{name}` | `.c--button`, `.c--card` |
+| Modifier | `.c--{name}--{modifier}` | `.c--button--outline` |
+| Element | `.c--{name}_{element}` | `.c--card_header`, `.c--card_body` |
+
+- Modifier は Block と併記して使用: `.c--button.c--button--outline`
+- Element は `_`（アンダースコア）一つ区切り
+- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
+  - Block と自身の Modifier: `.c--xxx.c--xxx--variant`
+  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
+- `a--` / `l--` には `variant` の BEM 展開は適用されない**
+
+`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`.l--`, `.is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
+
+
+### 作成例
+
+`l--stack` と併用する前提でのカスタムクラス例:
+
+```css
+@layer lism-component {
+  .c--myCard {
+    gap: var(--s20);
+    padding: var(--s30);
+    border-radius: var(--bdrs--20);
+    box-shadow: var(--bxsh--20);
+    border: 1px solid currentColor;
+    /* ... */
+  }
+}
+```
+
+```html
+<div class="c--myCard l--stack">
+  ...
+</div>
+```
+
+素の HTML サイトではこのように `c--` クラスに CSS を書いてスタイリングしても問題ありませんが、React などでコンポーネントを作成できる場合は、特別な理由がない限り Property Class を活用してください。
+
+```jsx
+export default function MyCard(props) {
+  return <Stack lismClass="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
+}
+```
+
+```css
+@layer lism-component {
+  .c--myCard {
+    /* 複雑なスタイルがあれば css で書く */
+  }
+}
+```
+
+
 ## カスタムCSS を追加する場合
 
 独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。

package/dist/data/guides/naming.md

@@ -0,0 +1,204 @@
+# 命名規則
+
+## TOC
+
+- [CSS変数の命名規則](#css変数の命名規則)
+- [クラスの命名規則](#クラスの命名規則)
+- [`{prop}` の省略ルール](#prop-の省略ルール)
+- [`{value}` の省略ルール](#value-の省略ルール)
+
+[詳細](https://lism-css.com/docs/naming/)
+
+---
+
+## CSS変数の命名規則
+
+各ブロックは camelCase で `{varName}` の形式が基本。
+
+### トークン変数
+
+| 種類 | 形式 | 例 |
+|------|------|-----|
+| 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
+| カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
+| スペーシング | `--s{Token}` | `--s10`, `--s40` |
+
+トークンのバリエーション:
+
+| 表記 | 条件 | 例 |
+|------|------|-----|
+| `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
+| `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
+| `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
+| `-10`, `-20`, `-30`... | `0`(`none`)基準で段階的に減少 | `--o---10`, `--o---20` |
+| セマンティック名 | 上記に当てはまらない場合 | `--ar--og` |
+
+### Property Class 用の変数
+
+| 形式 | 説明 | 例 |
+|------|------|-----|
+| `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--max-sz` |
+| `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
+
+### その他の変数
+
+| 形式 | 用途 | 例 |
+|------|------|-----|
+| `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
+| `--{propName}` | プリミティブの主要機能変数 | `--sideW`, `--mainW` |
+| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
+| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+
+
+## クラスの命名規則
+
+プレフィックスとクラス分類の対応:
+
+- Component: `c--`
+- Atomic Primitives: `a--`
+- Layout Primitives: `l--`
+- Trait Primitives: `is--`
+- Set Class: `set--`
+- Utility Class: `u--`
+
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
+
+Property Class の形式:
+
+- 特定の値とセット: `-{prop}:{value}`
+- `--{prop}` 変数を受け取る: `-{prop}`
+- ブレークポイント値を受け取る: `-{prop}_{bp}`
+
+
+## `{prop}` の省略ルール
+
+基本は [Emmet](https://docs.emmet.io/cheat-sheet/) 準拠。
+
+> **Note**: 「1文字プロパティ」セクション以外の表は **代表例** であり、全プロパティの一覧ではない。記載のないプロパティは本ページのルールに沿って省略する。
+
+### 1文字プロパティ
+
+1文字に省略する主要プロパティは以下の通り（このリストが全て）。
+
+| 省略 | プロパティ | 省略 | プロパティ |
+|------|-----------|------|-----------|
+| `p` | `padding`    | `i` | `inset` |
+| `m` | `margin`     | `t` | `top` |
+| `g` | `gap`        | `b` | `bottom` |
+| `c` | `color`      | `l` | `left` |
+| `f` | `font`       | `r` | `right` |
+| `w` | `width`      | `o` | `opacity` |
+| `h` | `height`     | `v` | `visibility` |
+| `d` | `display`    | `z` | `z-index` |
+
+Emmet と異なるのは `o` (`opacity`) のみ。
+
+### プロパティグループ
+
+#### 基本形式: 「グループ略称」+「サブプロパティ名の省略形」
+
+| CSS プロパティ | Prop |
+|-------------|------|
+| font-size | `fz` |
+| font-weight | `fw` |
+| background-color | `bgc` |
+| background-image | `bgi` |
+| flex | `fx` |
+| flex-shrink | `fxsh` |
+| flex-grow | `fxg` |
+| grid-template-columns | `gtc` |
+| grid-template-rows | `gtr` |
+
+#### 方向指定系: 「グループ略称」 + `-` +「方向指定」
+
+| 方向 | サフィックス | 例 |
+|------|-----------|-----|
+| physical | `-t` / `-b` / `-l` / `-r` | `bd-t`, `bd-b`, `bd-l`, `bd-r` |
+| inline / block | `-x` / `-y` | `bd-x`, `bd-y` |
+| start / end | `-s` / `-e` | `bd-x-s`, `bd-x-e`, `bd-y-s`, `bd-y-e` |
+| x / y | `-x` / `-y` | `ov-x`, `ov-y` |
+
+例外: `p`, `m` のみ最初のハイフンを省略 → `pt`, `px`, `my`, `mx-s` 等。
+
+#### グループ略称の衝突禁止
+
+一つのグループで使用された略称は他のグループで再利用しない。
+NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`fx` グループの一貫性を崩すため）。
+
+### max- / min- プロパティ
+
+`max-`, `min-` プレフィックスはハイフンを保持: `max-w`, `min-w`, `max-h`, `min-h`。
+
+### その他のプロパティ
+
+1. 1単語: そのまま使用 or 省略
+2. ハイフン繋がり、または6文字以上: Emmet形式または認識しやすい範囲で省略
+
+| CSS プロパティ | Prop | 分類 |
+|-------------|------|------|
+| float | `float` | そのまま |
+| order | `order` | そのまま |
+| position | `pos` | 省略 |
+| overflow | `ov` | 省略 |
+| inline-size | `sz` | 省略 |
+| block-size | `bsz` | 省略 |
+| aspect-ratio | `ar` | 省略 |
+| writing-mode | `wm` | 省略 |
+| white-space | `whs` | 省略 |
+
+### 1文字プロパティの短縮名の再利用
+
+グループを持たない1文字プロパティや、方向プロパティのみをサブプロパティに持つ場合は、衝突しない範囲で再利用可。
+
+| 1文字 Prop | 再利用先 | 展開例 |
+|-----------|---------|--------|
+| `t`(`top`) | `text-*` | `ta`(`text-align`) |
+| `l`(`left`) | `line-*` | `lh`(`line-height`) |
+| `w`(`width`) | `writing-*` | `wm`(`writing-mode`) |
+| `p`(`padding`) | `place-*` | `pi`(`place-items`) |
+
+
+## `{value}` の省略ルール
+
+### 基本: CSS の実値をそのまま使う
+
+`{prop}` は既に省略されているため、`{value}` はそのまま残して組み合わせから推測可能にする。
+
+```
+.-d:none          → display: none;
+.-d:inline-flex   → display: inline-flex;
+.-pos:relative    → position: relative;
+.-ta:center       → text-align: center;
+.-fx:1            → flex: 1;
+.-fxd:column      → flex-direction: column;
+```
+
+### トークン値を利用する場合
+
+対応するトークンがある場合は、トークン値（`--{token}--{value}` の `{value}` 部分）を使う:
+
+```
+.-c:text-2        → color: var(--text-2);
+.-fz:l            → font-size: var(--fz--l);
+.-p10             → padding: var(--s10);
+.-fw:bold         → font-weight: var(--fw--bold);
+.-bdrs:20         → border-radius: var(--bdrs--20);
+```
+
+トークン値が `-{NUM}` のものも、値をそのまま連結した変数名になる。
+
+```
+.-o:-10          → opacity: var(--o---10);
+```
+
+### 長いキーワード値の省略
+
+6文字以上かつ省略しても意味が通るものは省略可:
+
+| 実際の値 | 省略名 | クラスの例 |
+|--------|------------|-----|
+| `uppercase` | `upper` | `-tt:upper` |
+| `lowercase` | `lower` | `-tt:lower` |
+| `fit-content` | `fit` | `-w:fit`, `-h:fit` |
+| `space-between` | `between` | `-ac:between`, `-jc:between` |
+| `currentColor` | `current` | `-bdc:current` |

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

@@ -2,7 +2,6 @@
 
 Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
 
-具体的な UI 部品は **Component クラス**（`c--`）として `@layer lism-component` に配置されますが、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
 
 ## TOC
 
@@ -10,7 +9,6 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 - [Trait Primitive（`is--`）](#trait-primitiveis--)
 - [Layout Primitive（`l--`）](#layout-primitivel--)
 - [Atomic Primitive（`a--`）](#atomic-primitivea--)
-- [Component（`c--`）](#componentc--)
 
 [詳細](https://lism-css.com/docs/primitives/)
 
@@ -23,13 +21,11 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 | `is--` | Trait Primitive | `lism-primitive.trait` | 要素に静的な構造的特性を付与する汎用クラス |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
-| `c--` | Component | `lism-component` | BEM 構造を持つ具体的な UI 部品 |
 
 **併用ルール:**
-- `is--` は他のすべての Primitive / Component と併用可能（複数の `is--` 同士もOK）
-- `l--` と `c--` は併用可能（例: `class="l--flex c--nav"`）
+- `is--` は他のすべての Primitive と併用可能（複数の `is--` 同士もOK）
 - 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
-- `c--` のみ Modifier との併記が可能（`.c--button.c--button--outline`）
+- `a--` / `l--` には `variant` の BEM 展開は適用されない（BEM Modifier は `c--` 専用）
 
 
 ## Trait Primitive（`is--`）
@@ -45,11 +41,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 | `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
 | `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
 | `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
-| `is--vertical` | 縦書きモードを定義する（`writing-mode: var(--vertical-mode)`） |
 | `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
 | `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
 
-Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。
+Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。（例: `<Lism isContainer>`)
 
 
 ## Layout Primitive（`l--`）
@@ -87,62 +82,3 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
 | `a--decorator` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
 
 それぞれ対応するコンポーネント（`<Icon>`, `<Divider>`, `<Spacer>`, `<Decorator>`）があります。
-
-
-## Component（`c--`）
-
-`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
-
-`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
-
-| 分類 | 形式 | 例 |
-|---|---|---|
-| Block | `.c--{name}` | `.c--button`, `.c--card` |
-| Modifier | `.c--{name}--{modifier}` | `.c--button--outline` |
-| Element | `.c--{name}_{element}` | `.c--card_header`, `.c--card_body` |
-
-- Modifier は Block と併記して使用: `.c--button.c--button--outline`
-- Element は `_`（アンダースコア）一つ区切り
-- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
-  - Block と自身の Modifier: `.c--xxx.c--xxx--variant`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-
-`c--`を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`.l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることでCSSの記述量を削減できます。`c--`クラスにスタイルが全くなく、HTML側での可視性を高める名前付けのためだけに利用しても構いません。
-
-### 作成例
-
-`l--stack` と併用する前提でのカスタムクラス例
-
-```css
-@layer lism-component {
-  .c--myCard {
-    gap: var(--s20);
-    padding: var(--s30);
-    border-radius: var(--bdrs--20);
-    box-shadow: var(--bxsh--20);
-    border: 1px solid currentColor;
-    /* ... */
-  }
-}
-```
-
-```html
-<div class="c--myCard l--stack">
-  ...
-</div>
-```
-
-素のHTMLサイトではこのように`c--`クラスにCSSを書いてスタイリングしても大丈夫ですが、Reactなどでコンポーネントを作成できる場合は、特別な理由がない限りProperty Classを活用してください。
-
-```jsx
-export default function MyCard(props) {
-  return <Stack lismClass="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
-}
-```
-```css
-@layer lism-component {
-  .c--myCard {
-    /* 複雑なスタイルあれば css で書く */
-  }
-}
-```

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

@@ -1,6 +1,6 @@
 # a--decorator / `<Decorator>`
 
-コンテンツを装飾するための空要素として使うクラス。`<Decorator>` はデフォルトで `aria-hidden="true"` が付与されます。
+コンテンツを装飾するための空要素として使うクラス。`<Decorator>` は `<Lism atomic="decorator" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 
@@ -13,12 +13,10 @@
 | Prop | 説明 |
 |------|------|
 | `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
-| `clipPath` | `style.clipPath` に渡す |
-| `boxSizing` | `style.boxSizing` に渡す |
 
 ## Usage
 
-### 使用例（コーナー装飾）
+### 装飾に使用する例（コーナー装飾）
 
 `pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
 

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

@@ -1,6 +1,6 @@
 # a--divider / `<Divider>`
 
-コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` はデフォルトで `aria-hidden="true"` が付与されます。
+コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` は `<Lism atomic="divider" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 
@@ -9,13 +9,6 @@
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_divider.scss
 - ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--divider/
 
-## 専用Props
-
-| Prop | 説明 |
-|------|------|
-| `bdw` / `bds` / `bdc` | 区切り線のボーダー幅 / スタイル / 色 |
-| `isVertical` | 縦方向の区切り線にする（`is--vertical` クラス付与） |
-
 ## Usage
 
 ### 基本的な使い方
@@ -44,12 +37,12 @@
 
 ### 縦方向の区切り線
 
-`isVertical` を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
+Property Class `-wm:vertical-rl`（または `<Divider wm="vertical-rl">`）を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
 
 ```jsx
 <Flex ai="center" g="20">
   <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
-  <Divider isVertical bds="dashed" bdw="2px" aslf="stretch" />
+  <Divider wm="vertical-rl" bds="dashed" bdw="2px" aslf="stretch" />
   <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
 </Flex>
 ```
@@ -57,7 +50,7 @@
 ```html
 <div class="l--flex -g:20 -ai:center">
   <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
-  <div class="a--divider is--vertical -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
+  <div class="a--divider -wm:vertical-rl -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
   <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
 </div>
 ```

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

@@ -1,6 +1,6 @@
 # a--spacer / `<Spacer>`
 
-要素間のスペースを確保するクラス。`<Spacer>` はデフォルトで `aria-hidden="true"` が付与されます。
+要素間のスペースを確保するクラス。`<Spacer>` は `<Lism atomic="spacer" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 

package/dist/data/guides/primitives/l--fluidCols.md

@@ -13,52 +13,55 @@
 
 | Prop | CSS変数 | 説明 |
 |------|--------|------|
-| `cols` | `--cols` | カラムが維持する最小幅を指定（`12rem`, `320px` など） |
+| `cols` | `--cols` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
 | `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
 
 ## Usage
 
-### デフォルト幅で利用する
+### `--cols`でサイズを指定する
 
 ```jsx
-<FluidCols g="20">
-  <Box bxsh="20" p="20"><p>カード1のコンテンツ</p></Box>
-  <Box bxsh="20" p="20"><p>カード2のコンテンツ</p></Box>
-  <Box bxsh="20" p="20"><p>カード3のコンテンツ</p></Box>
+<FluidCols cols="16em" g="20">
+  <Lism as="div" p="20" bd>Item A</Lism>
+  <Lism as="div" p="20" bd>Item B</Lism>
+  <Lism as="div" p="20" bd>Item C</Lism>
+  <Lism as="div" p="20" bd>Item D</Lism>
 </FluidCols>
 ```
 
 ```html
-<div class="l--fluidCols -g:20">
-  <div class="l--box -bxsh:20 -p:20"><p>カード1のコンテンツ</p></div>
-  <div class="l--box -bxsh:20 -p:20"><p>カード2のコンテンツ</p></div>
-  <div class="l--box -bxsh:20 -p:20"><p>カード3のコンテンツ</p></div>
+<div class="l--fluidCols -g:20" style="--cols: 16em">
+  <div class="-p:20 -bd">Item A</div>
+  <div class="-p:20 -bd">Item B</div>
+  <div class="-p:20 -bd">Item C</div>
+  <div class="-p:20 -bd">Item D</div>
 </div>
 ```
 
-### カラム最小幅と `auto-fill` の指定
+### `auto-fill`を使用する
+
+`l--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
 
 ```jsx
-<FluidCols cols="12rem" autoFill g="20" fz="s">
-  <Box bxsh="20" p="20"><p>A</p></Box>
-  <Box bxsh="20" p="20"><p>B</p></Box>
-  <Box bxsh="20" p="20"><p>C</p></Box>
+<FluidCols cols="12em" autoFill g="20" fz="s">
+  <Lism as="div" p="20" bd>auto-fill</Lism>
+  <Lism as="div" p="20" bd>auto-fill</Lism>
+</FluidCols>
+<FluidCols cols="12em" g="20" fz="s">
+  <Lism as="div" p="20" bd>auto-fit</Lism>
+  <Lism as="div" p="20" bd>auto-fit</Lism>
 </FluidCols>
 ```
 
-### 2列 → 1列
-
-カラム最小幅を大きめに設定すれば「2列 → コンテナが狭まれば 1列」のような段階的段組も自然に作れます。
-
-```jsx
-<FluidCols cols="320px" g="20">
-  <Frame ar="16/9">
-    <img src="/img/a-1.jpg" width="600" height="400" />
-  </Frame>
-  <Frame ar="16/9">
-    <img src="/img/a-3.jpg" width="600" height="400" />
-  </Frame>
-</FluidCols>
+```html
+<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
+  <div class="-p:20 -bd">auto-fill</div>
+  <div class="-p:20 -bd">auto-fill</div>
+</div>
+<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em">
+  <div class="-p:20 -bd">auto-fit</div>
+  <div class="-p:20 -bd">auto-fit</div>
+</div>
 ```
 
 ## 関連プリミティブ

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

@@ -98,9 +98,9 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
 | `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:container` | — |
-| `ysz` | `block-size` | — | — |
-| `min-ysz` | `min-block-size` | — | — |
-| `max-ysz` | `max-block-size` | — | — |
+| `bsz` | `block-size` | — | — |
+| `min-bsz` | `min-block-size` | — | — |
+| `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `max-inline-size: 100%`。`.set--gutter` 内では gutter 分を含めた全幅に拡張
@@ -359,11 +359,11 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `ovwrap` | `overflow-wrap` | `-ovwrap:anywhere` | — |
-| `whspace` | `white-space` | `-whspace:nowrap` | — |
+| `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
+| `whs` | `white-space` | `-whs:nowrap` | — |
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
-| `isolation` | `isolation` | `-isolation:isolate` | — |
+| `iso` | `isolation` | `-iso:isolate` | — |
 
 
 ## 値の省略形（例外一覧）

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

@@ -13,8 +13,6 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 - [`set--transition`](#set--transition)
 - [`set--gutter`](#set--gutter)
 - [`set--innerRs`](#set--innerrs)
-- [`set--bp`](#set--bp)
-
 [詳細](https://lism-css.com/docs/set-class/)
 
 ---
@@ -31,8 +29,6 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 | `set--transition` | [`_transition.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_transition.scss) |
 | `set--gutter` | [`_gutter.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_gutter.scss) |
 | `set--innerRs` | [`_innerRs.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_innerRs.scss) |
-| `set--bp` | [`_bp.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bp.scss) |
-
 ---
 
 ## `set--plain`
@@ -86,7 +82,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 .-hov\:test {
   color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
   box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
-  opacity: var(--_notHov, var(--o--n20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
+  opacity: var(--_notHov, var(--o---20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
 }
 ```
 
@@ -177,16 +173,3 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 ```
 
 
-## `set--bp`
-
-ブレークポイント判定用の hack 変数をセットします。コンテナクエリで各ブレークポイントを超えた時に空変数がセットされ、CSS の空変数トリックで条件分岐に使えます。
-`sm`, `md`にのみ対応しています。（`--_is_sm`, `--_is_md`が定義されます。）
-
-smサイズ以上でテキストカラーを赤に変える例:
-
-```html
-<div class="set--bp -p:20" style="color: var(--_is_sm) red">...</div>
-```
-```jsx
-<Lism set="bp" p="20" style={{ color: 'var(--_is_sm) red;' }}>...</Lism>
-```

package/dist/data/guides/tokens.md

@@ -28,18 +28,17 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
-| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{n}` | `--s20` |
+| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
 | 字間 (lts) | `base`, `s`, `l` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
-| 透明度 (o) | `-10`, `-20`, `-30` | `--o--n{n}` | `--o--n10` |
+| 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
-| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{n}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `min`, `full`, `container` | `--sz--{key}` | `--sz--l` |
+| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{N}` | `--bxsh--20` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `container` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
-| 書字方向 (writing) | `vertical` | `--writing--{key}` | `--writing--vertical` |
 | フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
 | セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
@@ -135,9 +134,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
-| `--o--n10` | `0.75` | 75%の不透明度 |
-| `--o--n20` | `0.5` | 50%の不透明度 |
-| `--o--n30` | `0.25` | 25%の不透明度 |
+| `--o---10` | `0.75` | 75%の不透明度 |
+| `--o---20` | `0.5` | 50%の不透明度 |
+| `--o---30` | `0.25` | 25%の不透明度 |
 
 
 ## 角丸 (bdrs)
@@ -154,7 +153,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{n}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
+`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{N}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
 
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-14',
-    sourceCommit: '9a7c9ffa',
+    generatedAt: '2026-04-17',
+    sourceCommit: '38761f59',
     docsVersion: '0.1.0',
 };

package/dist/lib/search.js

@@ -107,7 +107,7 @@ export function searchDocs(entries, query, options) {
  * 例:
  *   `primitives/l--tileGrid.mdx`   → `primitives/l--tileGrid`
  *   `core-components/Group.mdx`    → `core-components/group`
- *   `ui/DummyImage.mdx`            → `ui/dummyimage`
+ *   `ui/DummyText.mdx`             → `ui/dummytext`
  */
 function sourcePathToUrlSlug(sourcePath) {
     const withoutExt = sourcePath.replace(/\.mdx$/, '');

package/dist/tools/get-component.js

@@ -26,8 +26,8 @@ function parsePrimitiveHeading(md) {
 let classAliasMap = null;
 let componentAliasMap = null;
 /** primitives/*.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
- *  angle-bracket 形式の問い合わせ（`<Vertical>` など）には componentAliasMap のみを照合し、
- *  クラス専用プリミティブ（例: is--vertical）を誤ってヒットさせないために分離している。 */
+ *  angle-bracket 形式の問い合わせには componentAliasMap のみを照合し、
+ *  クラス専用プリミティブへの false positive を避けるために分離している。 */
 function buildAliasMaps() {
     if (classAliasMap && componentAliasMap)
         return;
@@ -78,7 +78,7 @@ export function registerGetComponent(server) {
             const isAngle = isAngleBracketNotation(name);
             // --- 1) lism-css コア: primitives/ の個別ファイルを alias map で解決 ---
             //   angle-bracket 形式 (`<Vertical>`) は React コンポーネント alias のみと照合し、
-            //   クラス専用プリミティブ (is--vertical 等) への false positive を避ける。
+            //   クラス専用プリミティブへの false positive を避ける。
             if (!pkg || pkg === 'lism-css') {
                 const componentHit = getComponentAliasMap().get(normalizedKey);
                 if (componentHit) {

package/package.json

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

package/dist/data/guides/primitives/is--vertical.md

@@ -1,52 +0,0 @@
-# is--vertical
-
-要素に縦書きモード（`writing-mode`）を適用するクラス。対応するコンポーネントエイリアスはありません（直接クラス指定で使用）。
-
-## 基本情報
-
-- クラス名: `is--vertical`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_vertical.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--vertical/
-
-## クラスバリエーション
-
-縦書き用の値はトークン（`--vertical-mode`）で管理されており、`lang` 属性に合わせて `vertical-rl` / `vertical-lr` を上書きできます。
-
-| クラス名 | 説明 |
-|---------|------|
-| `is--vertical` | 常に縦書きモードにする |
-| `is--vertical@sm` | `sm` サイズ以上で縦書きにする |
-| `is--vertical@md` | `md` サイズ以上で縦書きにする |
-
-**注意**: `is--vertical@sm`, `is--vertical@md` を使う場合は、**`set--bp` クラスを併用する必要があります**。
-
-## Usage
-
-### 常に縦書き
-
-```html
-<div class="is--vertical">
-  <p>縦書きテキスト...</p>
-</div>
-```
-
-### `sm` 以上で縦書きにする
-
-```jsx
-<Flow set="gutter" py="20" w="100%" h="20em" className="is--vertical@sm set--bp">
-  <p>本文テキスト...</p>
-  <p>本文テキスト...</p>
-</Flow>
-```
-
-```html
-<div class="is--vertical@sm set--bp l--flow set--gutter -py:20 -w:100% -h" style="--h: 20em">
-  <p>本文テキスト...</p>
-  <p>本文テキスト...</p>
-</div>
-```
-
-## 関連プリミティブ
-
-- [l--flow](./l--flow.md) — 縦書きコンテンツと組み合わせる記事フロー
-- [is--wrapper](./is--wrapper.md) — コンテンツ幅の制限