@lism-css/mcp 0.23.0 → 0.26.0

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

@@ -26,7 +26,6 @@ import { Button } from '@lism-css/ui/astro/Button';
 - [Badge](#badge)
 - [Button](#button)
 - [Callout](#callout)
-- [Chat](#chat)
 - [Details](#details)
 - [Modal](#modal)
 - [NavMenu](#navmenu)
@@ -48,11 +47,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 **構造:** `Accordion.Root > Accordion.Item > (Accordion.Heading > Accordion.Button) + Accordion.Panel`（`Accordion.Icon` は自動で含まれる）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
 | `isOpen` | Item / Button / Panel | `boolean` | `false` | アイテムを初期展開。Item・Button・Panel の3つ揃えて指定（Item=`data-opened` 付与、Button=`aria-expanded`、Panel=`hidden` 解除） |
 | `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
-| `flow` | Panel | `string` | — | パネル内コンテンツ領域（`c--accordion_content`）のフロー余白 |
+| `flow` | Panel | `string` | — | パネル内コンテンツ領域（`b--accordion_content`）のフロー余白 |
 
 ```jsx
 <Accordion.Root>
@@ -70,11 +69,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Alert/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Alert)
 
-短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。`b--alert` クラスが付与される。
 プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
@@ -90,13 +89,13 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Avatar/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Avatar)
 
-アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`c--avatar` クラスが付与される。
+アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`b--avatar` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `src` | `string` | — | 画像URL |
 | `alt` | `string` | — | 代替テキスト |
-| `size` | `string` | `'1.5em'` | アバターのサイズ |
+| `size` | `string` | `'2em'` | アバターのサイズ |
 
 ```jsx
 <Avatar src='/avatar.jpg' alt='User' size='48px' />
@@ -107,11 +106,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Badge/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Badge)
 
-バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`c--badge` クラスが付与される。
+バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`b--badge` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
-| `variant` | `string` | — | バリエーション（`'outline'` 等）。`c--badge--{variant}` クラスが出力 |
+| --- | --- | --- | --- |
+| `variant` | `string` | — | バリエーション（`'outline'` 等）。`b--badge--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 
 ```jsx
@@ -123,11 +122,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Button/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Button)
 
-ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`c--button` クラスが付与される。
+ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`b--button` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
-| `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`c--button--{variant}` クラスが出力 |
+| --- | --- | --- | --- |
+| `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`b--button--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 | `href` | `string` | — | リンク先URL |
 
@@ -140,11 +139,10 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
 
-記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される。
-プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
+記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される（プリセット内容は [Alert](#alert) と同一）。`b--callout` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'note'` | コールアウトタイプ |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
@@ -156,26 +154,6 @@ import { Button } from '@lism-css/ui/astro/Button';
 ```
 
 
-## Chat
-
-ソース: [Chat/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Chat)
-
-チャット風の吹き出しコンポーネント。Grid ベースの会話形式 UI。`c--chat` クラスが付与される。
-
-| Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
-| `name` | `string` | — | 発言者の名前 |
-| `avatar` | `string` | — | アバター画像の src |
-| `variant` | `'speak' \| 'think'` | `'speak'` | チャットタイプ |
-| `direction` | `'start' \| 'end'` | `'start'` | 表示位置 |
-| `keycolor` | `string` | `'gray'` | キーカラー |
-| `flow` | `string` | `'s'` | コンテンツ要素のフロー余白 |
-
-```jsx
-<Chat name='Alice' avatar='/alice.jpg'>Hello!</Chat>
-```
-
-
 ## Details
 
 ソース: [Details/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Details)
@@ -185,8 +163,9 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `Details.Root > Details.Summary > (Details.Title + Details.Icon) + Details.Content`
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `as` | Title | `string` | `'span'` | Title の HTML タグ |
+| `open` | Root | `boolean` | — | 初期展開状態（`details` 要素の `open` 属性） |
 | `--duration` | Root | `string` | — | 展開アニメーションの秒数（style 経由で指定） |
 
 ```jsx
@@ -209,7 +188,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `Modal.OpenBtn + Modal.Root > Modal.Inner > Modal.Body + Modal.CloseBtn`
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `id` | Root | `string` | — | モーダルの ID（必須） |
 | `modalId` | OpenBtn / CloseBtn | `string` | — | 対象モーダルの ID |
 | `duration` | Root | `string` | — | アニメーション持続時間。`--duration` 変数として出力 |
@@ -231,12 +210,12 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 
 ソース: [NavMenu/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/NavMenu)
 
-ナビゲーションメニューコンポーネント。`c--navMenu` クラスが付与される。
+ナビゲーションメニューコンポーネント。`b--navMenu` クラスが付与される。
 
 **構造:** `NavMenu.Root > NavMenu.Item > NavMenu.Link`（`NavMenu.Nest` でネスト可能）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
 | `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
@@ -259,15 +238,16 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 
 ソース: [Tabs/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Tabs)
 
-タブ切り替え UI。タブクリックでコンテンツパネルを切り替える。スタイリングはほぼなく動きのみ提供。
+タブ切り替え UI。タブクリックまたは左右キー・Home/End でコンテンツパネルを切り替える。縦並びにする場合は `listProps` で `aria-orientation="vertical"` を指定すると上下キーに切り替わる。スタイリングはほぼなく動きのみ提供。
 
 **構造:** `Tabs.Root > Tabs.Item > (Tabs.Tab + Tabs.Panel)`（`Tabs.List` も利用可能）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `tabId` | Root | `string` | — | タブを特定するための ID 文字列 |
 | `defaultIndex` | Root | `number` | `1` | 初期アクティブタブ（1始まり） |
 | `listProps` | Root | `object` | — | タブボタンリスト要素へ渡す props |
+| `variant` | Root | `string` | `'default'` | バリエーション。`b--tabs--{variant}` クラスが出力。`'default'` のほか `'line'` を標準提供。独自 variant 指定時は既定バリアント（`b--tabs--default`）の装飾が適用されない |
 
 ```jsx
 <Tabs.Root>
@@ -290,7 +270,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 セクション間の波型などの装飾的な区切り要素。SVG ベースの形状で区切りを表現。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `viewBox` | `string` | — | SVG の viewBox |
 | `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
 | `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
@@ -313,7 +293,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ダミーテキストを生成するコンポーネント。プレビューやテスト用。複数の言語とテキスト長に対応。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `lang` | `'ja' \| 'en' \| 'ar'` | `'en'` | テキストの言語 |
 | `length` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'codes'` | `'m'` | テキストの長さ。`'codes'` は `b`, `i`, `a`, `code` 要素を含むテキスト |
 | `pre` | `string` | — | テキストの前に表示する文字列 |
@@ -331,8 +311,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 コンポーネント名は `import` するときと同じ PascalCase で指定します。
 
 ```bash
-# 初期設定（framework、出力先ディレクトリを対話的に設定）
-npx lism-cli ui init
+# 初期設定（lism.config.js が無い場合に新規生成。framework 等を対話的に設定）
+npx lism-cli init
 
 # コンポーネントを追加
 npx lism-cli ui add Button Modal
@@ -343,14 +323,13 @@ npx lism-cli ui add --all        # 全コンポーネントを追加
 npx lism-cli ui list
 ```
 
-`ui init` で生成される `lism.config.js` の `cli` セクション:
+`init` で生成される `lism.config.js` の `ui` セクション:
 
 ```js
 export default {
-  cli: {
+  ui: {
     framework: 'react',
-    componentsDir: 'src/components/ui',
-    helperDir: 'src/components/ui/_helper',
+    dir: 'src/components/ui', // helper は常に {dir}/_helper に配置される
   },
 };
 ```

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

@@ -3,10 +3,11 @@
 ## TOC
 
 - [CSS Layer 構造](#css-layer-構造)
-- [プレフィックスとクラス分類](#プレフィックスとクラス分類)
-- [Component Class（`c--`）](#component-classc--)
+- [クラス分類とプレフィックス](#クラス分類とプレフィックス)
+- [独自クラスの選び方（2分類）](#独自クラスの選び方2分類)
+  - [Block Class（`b--`）](#block-classb--)
+  - [Custom Class（`c--`）](#custom-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
-- [独自プレフィックス](#独自プレフィックス)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology.md)
@@ -24,16 +25,22 @@ Lism CSS は CSS Layers による詳細度管理を採用しています。
 Settings（トークン定義）
   → @layer lism-base（Reset CSS・トークン・set-- クラス）
       → @layer reset（リセットCSS）
+  → @layer lism-block（b-- Block Class — CSS でベーススタイルを管理する基礎部品）
   → @layer lism-trait（is-- / has-- Trait Class）
   → @layer lism-primitive
       → @layer layout（l-- Layout Primitive）
       → @layer atomic（a-- Atomic Primitive）
-  → @layer lism-component（c-- Component Class — BEM 構造を持つ UI 部品）
-  → @layer lism-custom（ユーザーカスタマイズ用）
+  → @layer lism-custom（ユーザーの独自CSS — c--）
   → @layer lism-utility（u-- ユーティリティクラス）
   → Property Class（レイヤー外 — 最も詳細度が高い）
 ```
 
+`lism-block` は `lism-trait` / `lism-primitive` より弱い位置にあるため、`b--` のベーススタイルには、明示的に付与したクラス（`is--` / `has--` / `l--` など）が勝ちます。
+
+なお、この優先関係が保証されるのはレイヤーありの標準ビルド（`main.css` / `full.css`）だけです。`main_no_layer.css` / `full_no_layer.css` にはレイヤーがないため、読み込み順と詳細度に依存します。
+
+ユーザーが定義する独自クラス・上書きスタイルは、役割に合わせて適切なレイヤーに配置します。
+例えば、トークンやベーススタイルの上書きは `@layer lism-base`、`b--` のベーススタイルは `@layer lism-block`、それ以外の独自クラス（`c--`）は `@layer lism-custom` に置きます。
 
 ## クラス分類とプレフィックス
 
@@ -42,31 +49,32 @@ Settings（トークン定義）
 Lism CSSで定義されるクラスは、その役割とレイヤーの所属が決まっており、その分類によってプレフィックスが定められています。
 
 | 分類 | 役割 | プレフィックス | 例 |
-|---|---|---|---|
+| --- | --- | --- | --- |
 | Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
 | Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
 | Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
-| Component Class | BEM 構造を持つ UI 部品 | `c--` | `c--button`, `c--accordion` |
+| Block Class | ベーススタイルを CSS 側で管理する基礎部品 | `b--` | `b--btn`, `b--badge`, `b--card` |
+| Custom Class | Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス | `c--` | `c--featureList`, `c--header` |
 | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
 | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
 | Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
-- `l--` と `c--` は併用OK（例: `<div class="l--flex c--nav">`）
-- 同カテゴリ内の Primitive 併用は不可（例: `l--flex` と `l--grid`、`a--icon` と `a--divider` は同要素に付けない）
-- `l--` × `a--` は非推奨（役割的に同居しない想定）
-- `is--` / `has--` 同士は併用OK（Trait は複数併用できる）
-- `is--` / `has--` × `l--` / `a--` も併用OK
-- `c--` の Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし以下は許容:
-  - Block と自身の Modifier: `.c--button.c--button--outline`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- 子要素: `c--card_header`, `c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
+
+- Primitive の併用は禁止（`l--`同士、`a--`同士、`l--`+`a--` はNG）
+- Trait の併用は可 (`is--`同士 / `has--`同士、 `is--` + `has--` はOK)
+- Trait + Primitive の併用は可 (`is--`/`has--` + `l--`/`a--` はOK)
+- `b--` + Primitive / Trait の併用は可（`b--` + `l--`/`a--`/`is--`/`has--` はOK）
+- `b--` + `b--` は禁止
+- `c--` + `c--` は禁止
+- `b--` + `c--` は禁止
+
 
 **`is--` と `has--` の判定軸:**
 
 |  | `is--` | `has--` |
-|---|---|---|
+| --- | --- | --- |
 | 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
 | CSS 変数 | 必須ではない | 必須（カスタマイズポイントを提供） |
 
@@ -74,20 +82,21 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
 
 ```
-[customClass] [c--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
+[規約対象外クラス] [c--] [b--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
 ```
 
-| # | 区分 | 例 |
-|---|---|---|
-| 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 | Set Class（`set--`） | `set--hov`, `set--bxsh` |
-| 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
-| 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
-| 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
-| 9 | Property Class（`-`） | `-p:20`, `-bgc:base-2`, `-hov:-c` |
+| # | 区分 |
+| --- | --- | 
+| 1 | Lismの規約対象外のクラス（外部ライブラリ・JSフック等） |
+| 2 | Custom（`c--`） |
+| 3 | Block（`b--`） |
+| 4 | Atomic Primitive（`a--`） |
+| 5 | Layout Primitive（`l--`） |
+| 6 | Set Class（`set--`） |
+| 7 | Trait Class 役割宣言（`is--`） |
+| 8 | Trait Class 機能付与（`has--`） |
+| 9 | Utility Class（`u--`） |
+| 10 | Property Class（`-{prop}:{value}`） |
 
 ```html
 <!-- OK -->
@@ -99,136 +108,124 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
 
+## 独自クラスの選び方（2分類）
+
+Lism CSS が提供するクラス（`set--` / `is--` / `has--` / `l--` / `a--` / `u--` / Property Class）以外の、ユーザーが自分で定義するクラスは次の2分類で命名します。
 
-## Component Class（`c--`）
+| 分類 | 命名 | 例 | スタイルの書き方 |
+| --- | --- | --- | --- |
+| サイト共通で繰り返し使う基礎部品（ボタン・バッジ・カード級） | `b--{name}` | `b--btn`, `b--badge` | ベーススタイルを `@layer lism-block` で管理。BP切り替え・hover・例外的な調整は Property Class等を活用 |
+| それ以外のカスタムクラス全般（コンポーネント・サイトの領域・ページ固有要素など粒度不問） | `c--{name}` | `c--featureList`, `c--header` | Lismクラス（Trait, Primitive, Property Class など）を中心に組む。何のパーツかを示す名前付けとしてだけ使うのも可。CSS を書く場合は `@layer lism-custom` で管理。 |
 
-`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+- `b--` にできるのは [Block Class（`b--`）](#block-classb--)の3条件をすべて満たす部品だけで、それ以外は `c--` にします。
+- 迷ったら `c--` で始め、3条件を満たす部品としてベーススタイルを CSS 側で管理したくなった時点で `b--` へリネームして昇格します。
+- 名前は camelCase で付けます。（例: `c--landingHero`）
 
-`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
+BEM 構造（本体クラス / Modifier / Element）を持つのは `b--` と `c--` のみです。`a--` / `l--` には適用しません。
 
 | 分類 | 形式 | 例 |
-|---|---|---|
-| Block | `c--{name}` | `c--button`, `c--card` |
-| Modifier | `c--{name}--{modifier}` | `c--button--outline` |
-| Element | `c--{name}_{element}` | `c--card_header`, `c--card_body` |
+| --- | --- | --- |
+| 本体クラス | `b--{name}` / `c--{name}` | `b--btn`, `c--pricing` |
+| Modifier | `b--{name}--{modifier}` / `c--{name}--{modifier}` | `b--btn--outline`, `c--pricing--featured` |
+| Element | `b--{name}_{element}` / `c--{name}_{element}` | `b--card_header`, `c--pricing_body` |
 
-- Modifier は Block と併記して使用: `.c--button.c--button--outline`
+- Modifier は本体クラスと併記して使用: `.b--btn.b--btn--outline` / `.c--pricing.c--pricing--featured`
 - Element は `_`（アンダースコア）一つ区切り
-- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
-  - Block と自身の Modifier: `.c--xxx.c--xxx--modifier`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- BEM の Modifier / Element 構造を持つのは `c--` のみ。`a--` / `l--` には適用しない
+- 同じプレフィックスの本体クラス同士の併用（`.b--xxx.b--yyy` / `.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
+  - 本体クラスと自身の Modifier: `.c--xxx.c--xxx--modifier`
+  - 本体クラスと他の本体クラスの Element: `.c--xxx.c--yyy_elem`
 
-`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
+### Block Class（`b--`）
 
+`b--` プレフィックスで定義する **Block Class** は、サイト内で繰り返し使う基礎部品（ボタン・バッジ・カード級）で、ベーススタイルを CSS 側（`@layer lism-block`）で管理します。コアの `lism-css` は専用レイヤーを用意するだけで、`b--` クラス自体は提供しません。
 
-### 作成例
+次の3条件を**すべて**満たす場合に `b--` を使います。満たさない場合は `c--` にします。
 
-`l--stack` と併用する前提でのカスタムクラス例:
+1. サイト内の複数ページ・複数箇所で繰り返し使う共通部品である
+2. クラスを1つ付けるだけでベーススタイルがほぼ決まるようにしたい部品である
+3. 粒度がボタン・バッジ・カード級の自己完結した部品である
 
+例: 
 ```css
-@layer lism-component {
-  .c--myCard {
-    gap: var(--s20);
-    padding: var(--s30);
+@layer lism-block {
+  .b--btn {
+    --bgc: transparent;
+    --bdc: transparent;
+    padding: var(--s10) var(--s20);
     border-radius: var(--bdrs--20);
-    box-shadow: var(--bxsh--20);
-    border: 1px solid currentColor;
-    /* ... */
+    border: solid 1px var(--bdc);
+    background-color: var(--bgc);
   }
+  .b--btn.b--btn--fill { --bgc: var(--brand); }
+  .b--btn.b--btn--outline { --bdc: currentColor; }
 }
 ```
 
+- `b--` は他クラスと併用もできます。すべて CSS 側に書かなくてはいけないというわけではありません。
+- `b--` はレイアウトスタイルも CSS 側で持てますし、`l--` 系クラスとの併用を前提にして組むこともできます。
+- ブレイクポイント切り替え（`-p_sm` 等）、hover 系スタイル、その他例外的な調整には Property Class での調整が便利です。
+
+### Custom Class（`c--`）
+
+`c--` プレフィックスで定義する **Custom Class** は、ユーザーが自由に定義できるカスタムクラスです（名前は `lism-custom` レイヤーと対応）。コンポーネント・サイトの領域（ヘッダーやサイドバーなど）・ページ固有の要素など、粒度を問わず使えます。
+
+他のLismクラス（Trait, Primitive, Property Class等）との組み合わせを前提に設計し、CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。（明確な意図があればCSSに一般的なスタイルを書くことも可）
+
+スタイルが全くなく、何のパーツかを示す名前付けのためだけに使っても構いません。
+
 ```html
-<div class="c--myCard l--stack">
-  ...
-</div>
+<!-- HTMLで書く場合も、何のパーツかを示す名前 + Primitive + Property Class を優先 -->
+<div class="c--myCard l--stack -g:20 -p:30 -bdrs:20 -bxsh:20 -bd">...</div>
 ```
 
-素の HTML サイトではこのように `c--` クラスに CSS を書いてスタイリングしても問題ありませんが、React などでコンポーネントを作成できる場合は、特別な理由がない限り Property Class を活用してください。
-
 ```jsx
+// React/AstroコンポーネントではPropsを優先
 export default function MyCard(props) {
   return <Stack className="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
 }
 ```
 
 ```css
-@layer lism-component {
-  .c--myCard {
-    /* 複雑なスタイルがあれば css で書く */
+@layer lism-custom {
+  .c--myCard::before {
+    /* 擬似要素など、Props/Property Classで表せないものだけを書く */
   }
 }
 ```
 
+CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、何のパーツかを示す名前として`c--myCard`だけ残して構いません。
 
 ## カスタムCSS を追加する場合
 
 独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
 
 ```css
-/* カスタムコンポーネント → lism-component に追加 */
-@layer lism-component {
-  .c--my-card {
-    border: 1px solid var(--brand);
-    border-radius: var(--bdrs--20);
-    padding: var(--s30);
-  }
+/* ユーザーの独自CSS（c--） → lism-custom に追加 */
+@layer lism-custom {
+  .c--myCard[data-is-active]::before { border-color: var(--brand); }
 }
 
+/* b-- 基礎部品のベーススタイル → lism-block に追加 */
+@layer lism-block { .b--badge { padding: var(--s5) var(--s10); } }
+
 /* ベーススタイルの拡張 → lism-base に追加 */
 @layer lism-base {
-  .set--my-theme {
-    --brand: #c00;
-  }
+  .set--myTheme { --brand: #c00; }
 }
 ```
 
-カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。
+カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。また、`c--` のクラスでは、`padding`/`border-radius`/`font-size`/`color`などProperty Class/Propsへ移せる宣言を、CSSに書く前にマークアップ側へ移します（NG→OK例は[antipatterns.md](./antipatterns.md#property-class-で書けるのに-css-で書く)を参照）。ただし`b--`のベーススタイルは対象外で、トークンを使って`@layer lism-block`で管理します。
 
-```css
-/* NG */
-.c--my-card { padding: 24px; border-radius: 8px; }
-
-/* OK */
-.c--my-card { padding: var(--s30); border-radius: var(--bdrs--20); }
-```
-
-ただし、明確にその数値に意図がある場合は、生のCSS値を使用しても構いません。
+明確にその数値に意図があり、トークン化・丸め・Property Class化ができない場合だけ、生のCSS値を例外として使用できます。その場合は実装プランに理由を残します。
 
 **レイヤー外に書く場合:**
 `@layer` の外（レイヤーなし）でカスタムCSSを書くのは、**Property Class（`-{prop}:{value}`）を拡張する場合のみ**としてください。それ以外のカスタムスタイルは必ずいずれかの `@layer` 内に記述します。
 
 ```css
-/* OK: Property Class の拡張はレイヤー外 */
+/* Property Class の拡張のみレイヤー外に書ける */
 .-myProp\:myValue { ... }
-
-/* NG: コンポーネントやユーティリティをレイヤー外に書かない */
-.c--my-card { ... }
-```
-
-
-### 独自プレフィックス
-
-Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `a--` / `c--` / `u--` / `-`）のどれにも該当しないクラスは、独自プレフィックスを付けても、プレフィックスなしで命名しても構いません。
-
-代表的な例：
-
-| 分類 | 形式 | 例 |
-|---|---|---|
-| ゾーニング（サイトの大まかな領域） | `z--{zoneName}` または `{zoneName}` | `z--header`, `z--main`, `z--sidebar`, `z--footer` |
-| ページ分類 | `p--{type}-{id\|slug}` または `{slug}Page` | `p--front`, `p--page--{slug}` |
-
-これらは、特に理由がなければ `@layer lism-custom` に配置することを推奨します。
-
-```css
-@layer lism-custom {
-  .z--header { /* ... */ }
-  .p--front { /* ... */ }
-}
 ```
 
-
 ## CSS の配置場所
 
 ### グローバル CSS（サイト全体）
@@ -254,8 +251,8 @@ Lism のトークン変数のカスタマイズやベーススタイルの上書
 - `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
 
 ```css
-/* コンポーネント用CSS は lism-component 内に定義する */
-@layer lism-component {
+/* 独自クラスの CSS は lism-custom 内に定義する（b-- のベーススタイルだけ lism-block） */
+@layer lism-custom {
   .c--yourComponent {
     ...
   }

package/dist/data/guides/customize.md

@@ -22,6 +22,7 @@
 ## `@layer` をオフにする
 
 `lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
+なお、no-layer版ではレイヤーによる優先度管理（`b--`よりProperty Classが必ず強い等の保証）が効かず、読み込み順・詳細度に依存します。
 
 ```js
 // 通常
@@ -44,7 +45,7 @@ import 'lism-css/main_no_layer.css';
 ### 上書き可能な変数
 
 | 変数 | 用途 | デフォルト |
-|------|------|-----------|
+| --- | --- | --- |
 | `$breakpoints` | ブレイクポイント数値の定義（`0` は無効＝クエリを出力しない） | `('xs': 0, 'sm': '480px', 'md': '800px', 'lg': '1120px', 'xl': 0)` |
 | `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
 | `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
@@ -102,7 +103,9 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 ## `lism.config.js` でのカスタマイズ
 
-プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+プロジェクトのルート直下に `lism.config.js`（または `lism.config.ts` / `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+
+設定ファイルの型チェック・補完には `lism-css/config-types` の `LismConfig` 型を使います。`.ts` は `export default { ... } satisfies LismConfig`、`.js` は `/** @type {import('lism-css/config-types').LismConfig} */` を付けると、キー名の typo や値の形をエディタが検出します（コンポーネント側の prop/trait を解禁する生成物 `lism-env.d.ts` とは別物）。
 
 ### Vite / Astro プラグインの登録（推奨セットアップ）
 
@@ -138,7 +141,7 @@ export default defineConfig({
 - **動的CSSビルド**: `import 'lism-css/main.css'` 等を捕捉し、`lism.config.js` を反映済みの CSS をその場で生成する（props / tokens を追加すると CSS に自動反映される）
 - **型の自動生成**: 有効化したブレイクポイント・追加した props / traits を反映した `lism-env.d.ts` を起動時に自動生成する
 
-`lism.config.js` はプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
+設定ファイルはプロジェクトルートから `lism.config.ts` → `lism.config.mjs` → `lism.config.js` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
 
 ```js
 // Vite
@@ -182,7 +185,7 @@ export default {
 
 統合プラグイン（型自動生成が有効）を使っている場合、有効化したブレイクポイントを反映した `lism-env.d.ts` がプロジェクト直下に**自動生成**されます。型補完も有効化したブレイクポイントのキーを自動で提示するため、`BreakpointRegistry` をプロジェクト側の `.d.ts` で手書き拡張する必要はありません。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
 
-> SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も引き続き利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
+> SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
 
 ### フォーマット
 
@@ -240,7 +243,7 @@ export default {
 これによってコンポーネント側で次のような挙動が追加されます：
 
 | 入力 | 出力されるクラス |
-|------|----------------|
+| --- | --- |
 | `ta="justify"` | `-ta:justify` |
 | `p="box"` | `-p:box` |
 | `filter="blur"` | `-filter:blur` |
@@ -254,7 +257,7 @@ export default {
 
 ### 追加した prop / trait の型解禁
 
-統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です（`lism-env.d.ts` は git にコミットしてください）。
+統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です。
 
 なお、既存 prop への値追加（`ta="justify"` 等）はもともと任意の文字列を受け付けるため、型エラーにはなりません（ただし補完候補には出ません）。
 
@@ -314,7 +317,7 @@ npx lism-css build --full   # full.css / full_no_layer.css も生成
 ```
 
 > **注意**:
-> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（実値は手書きSCSS側）。
+> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（`lh` のように CSS 変数を持たないものや、実値を手書きSCSS側へ置くもの）。
 > - `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。