@lism-css/mcp 0.24.0 → 0.27.0

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

@@ -67,7 +67,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 <Media as={Image} src="..." p="20" bd />
 // → Image コンポーネントに { className: '-p:20 -bd' } が渡される
 
-// className でコンポーネントクラスを付与（c--* も className に直接書く）
+// className で独自クラスを付与（c--* も className に直接書く）
 <Lism className="c--myComponent" p="10">...</Lism>
 // → <div class="c--myComponent -p:10">...</div>
 
@@ -158,11 +158,10 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 
 #### レスポンシブ指定
 
-レスポンシブ対応プロパティは、配列またはオブジェクトでブレイクポイント（`sm`,`md`）ごとの値を指定できます。（`lg`は要カスタマイズ）
-
+レスポンシブ対応プロパティは、配列またはオブジェクトでブレイクポイント（`sm` / `md` / `lg`）ごとの値を指定できます。`xs` / `xl` は opt-in（→ [responsive.md](./responsive.md#ブレイクポイント)）。
 
 ```jsx
-// 配列（base → sm → md の順）
+// 配列（[base, sm, md, lg] の順）
 <Lism p={['20', '30', '40']}>...</Lism>
 // <div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">...</div>
 
@@ -190,6 +189,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `isSide` | `is--side` |
 | `isSkipFlow` | `is--skipFlow` |
 | `hasTransition` | `has--transition` |
+| `hasTransition="{props}"` | `has--transition` + `--transitionProps:{props}` |
 | `hasGutter` | `has--gutter` |
 | `hasSnap` | `has--snap` |
 | `hasMask` | `has--mask` |
@@ -218,6 +218,8 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `<Link>` | `<a>`（固定） | — |
 | `<Media>` | `<img>` | `img`, `video`, `iframe`, `picture` |
 
+デフォルト要素と同じ`as`（`<Text as="p">`、`<Inline as="span">`など）は書かず、要素を変える時だけ`as`を付ける。
+
 ```jsx
 <Heading level="3" fz="xl">見出し</Heading>
 // → <h3 class="-fz:xl">見出し</h3>
@@ -239,8 +241,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `<Divider>` | `a--divider` | 区切り線 |
 | `<Decorator>` | `a--decorator` | 装飾要素（SCSS定義なし、クラス名のみ出力） |
 
-
-各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+各プリミティブの詳細は `primitives/{クラス名}.md`（例: [`primitives/a--icon.md`](./primitives/a--icon.md)）を参照。
 
 
 ## Trait Components
@@ -254,7 +255,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `<Layer>` | `isLayer` | `is--layer` |
 | `<BoxLink>` | `isBoxLink` | `is--boxLink` |
 
-各 Trait クラスの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `trait-class/` 配下の各ファイルを参照。`has--*` については [trait-class.md](./trait-class.md) を参照。
+各 Trait クラスの詳細は `trait-class/{クラス名}.md`（例: [`trait-class/is--container.md`](./trait-class/is--container.md)）を参照。`has--*` については [trait-class.md](./trait-class.md) を参照。
 
 
 ## Layout Primitives
@@ -277,7 +278,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `<SwitchColumns>` | `l--switchColumns` |
 | `<WithSide>` | `l--withSide` |
 
-各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+各プリミティブの詳細は `primitives/{クラス名}.md`（例: [`primitives/l--stack.md`](./primitives/l--stack.md)）を参照。
 
 ## `getLismProps()` — 外部コンポーネントとの連携
 

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

@@ -26,11 +26,12 @@ import { Button } from '@lism-css/ui/astro/Button';
 - [Badge](#badge)
 - [Button](#button)
 - [Callout](#callout)
-- [Chat](#chat)
 - [Details](#details)
 - [Modal](#modal)
 - [NavMenu](#navmenu)
+- [Popover](#popover)
 - [Tabs](#tabs)
+- [Tooltip](#tooltip)
 - [ShapeDivider](#shapedivider)
 - [DummyText](#dummytext)
 - [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
@@ -52,7 +53,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 | `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,7 +71,7 @@ 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 | 型 | デフォルト | 説明 |
@@ -90,16 +91,19 @@ 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` クラスが付与される。
+アバター（プロフィール画像）コンポーネント。円形の画像表示で、`b--avatar` クラスが付与される。`src` ありは `l--frame`、`src` 未指定時は `l--center` に切り替わり、ルートに `b--avatar--initial`（背景色 `--base-2`）が付いて `name` の先頭1文字をイニシャルとして `span` で表示する（画像ロード失敗時の自動切替は無い）。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
-| `src` | `string` | — | 画像URL |
-| `alt` | `string` | — | 代替テキスト |
-| `size` | `string` | `'1.5em'` | アバターのサイズ |
+| `src` | `string` | — | 画像URL。未指定なら `name` のイニシャルを表示 |
+| `name` | `string` | — | ユーザー名。イニシャルの生成元。`alt` 未指定時は代替テキストにも使う |
+| `alt` | `string` | — | 代替テキスト。指定時は `name` より優先。`alt=''` で装飾扱い（イニシャル表示時は `aria-hidden`） |
+| `size` | `string` | `'2em'` | アバターのサイズ |
 
 ```jsx
 <Avatar src='/avatar.jpg' alt='User' size='48px' />
+<Avatar name='Yamada Taro' size='48px' /> {/* イニシャル "Y" を表示 */}
+<Avatar name='Yamada Taro' bgc='brand' c='base' /> {/* 背景色はルートの Prop で上書き可 */}
 ```
 
 
@@ -107,11 +111,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 +127,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,7 +144,7 @@ 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) と同一）。
+記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される（プリセット内容は [Alert](#alert) と同一）。`b--callout` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
@@ -155,26 +159,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)
@@ -231,7 +215,7 @@ 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` でネスト可能）
 
@@ -255,11 +239,45 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ```
 
 
+## Popover
+
+ソース: [Popover/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Popover)
+
+クリックで開くインタラクティブなパネル。ネイティブ Popover API（`popover` 属性）で開閉し、CSS Anchor Positioning でトリガーの隣に配置する。クライアント JS なし。開閉・外側クリック/Esc での light dismiss・フォーカス復帰・`aria-expanded` はブラウザに任せる。Anchor Positioning 非対応ブラウザでは画面中央のカードとして開く。ホバーで出す補足テキストは `Tooltip` を使う。
+
+**構造:** `Popover.Root > Popover.Trigger + Popover.Popup > (Content + Popover.Close)`
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+| --- | --- | --- | --- | --- |
+| `popoverId` | Root | `string` | 自動生成 | Trigger の `popovertarget`・Popup の `id`・Close の `popovertarget` に配布する ID。Root 配下では子に ID を指定しない |
+| `popoverId` | Trigger / Close | `string` | — | Root 外で単体利用するときだけ指定（Popup の `id` と揃える） |
+| `offset` | Root | `string` | `var(--s5)` | トリガーとの距離。`--popover-offset` 変数として出力 |
+| `side` | Popup | `'top' \| 'bottom' \| 'start' \| 'end'` | `'bottom'` | 表示位置。`data-side` として出力。`start`/`end` は横方向で、書字方向に追従する inline 軸の論理方向（LTR では `start`=左）。viewport 端で自動反転 |
+| `align` | Popup | `'start' \| 'center' \| 'end'` | `'center'` | トリガーに対する揃え。`data-align` として出力。`side` が `top`/`bottom` のとき書字方向、横方向のとき `start`=上・`end`=下 |
+| `type` | Popup | `'auto' \| 'manual'` | `'auto'` | `popover` 属性の値。`manual` は light dismiss と Esc が無効になるので `Close` を必ず置く |
+| `icon` / `srText` | Close | `string` | `'x'` / `'Close'` | 子要素が無いときのアイコンとスクリーンリーダー向けテキスト |
+
+- CSS 変数（`--popover-offset`・`--popover-duration`）は Root（`.b--popover`）で受け取る。Root かその祖先に指定する。Popup に書いても効かない。
+- Trigger / Close は `button` 要素でなければ `popovertarget` が効かない。
+- 色・余白・角丸・影は Lism props（`bgc`・`p`・`bdrs`・`bxsh` 等）で上書きする。開閉フェードの時間は `--popover-duration`。
+- フォームを含む場合は Popup に `role='dialog'` と `aria-label` を付ける。
+
+```jsx
+<Popover.Root>
+  <Popover.Trigger>Open</Popover.Trigger>
+  <Popover.Popup side='bottom' align='start'>
+    Content
+    <Popover.Close srText='閉じる' />
+  </Popover.Popup>
+</Popover.Root>
+```
+
+
 ## Tabs
 
 ソース: [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` も利用可能）
 
@@ -268,7 +286,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `tabId` | Root | `string` | — | タブを特定するための ID 文字列 |
 | `defaultIndex` | Root | `number` | `1` | 初期アクティブタブ（1始まり） |
 | `listProps` | Root | `object` | — | タブボタンリスト要素へ渡す props |
-| `variant` | Root | `string` | — | バリエーション。`c--tabs--{variant}` クラスが出力 |
+| `variant` | Root | `string` | `'default'` | バリエーション。`b--tabs--{variant}` クラスが出力。`'default'` のほか `'line'` を標準提供。独自 variant 指定時は既定バリアント（`b--tabs--default`）の装飾が適用されない |
 
 ```jsx
 <Tabs.Root>
@@ -284,6 +302,35 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ```
 
 
+## Tooltip
+
+ソース: [Tooltip/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Tooltip)
+
+ホバー / キーボードフォーカスで出る補足テキスト。表示制御は CSS のみで、JS は「Esc で閉じる」だけ（`scripts/tooltip.js`）。CSS Anchor Positioning でトリガーの隣に配置し、非対応ブラウザではトリガー基準の絶対配置にフォールバックする。中にリンク・ボタンを置かない（それは `Popover`）。重要な情報をツールチップだけに入れない（タッチでは見えない）。
+
+**構造:** `Tooltip.Root > Tooltip.Trigger + Tooltip.Popup`（Popup は Root 直下に置く）
+
+| Prop | 対象 | 型 | デフォルト | 説明 |
+| --- | --- | --- | --- | --- |
+| `tooltipId` | Root | `string` | 自動生成 | Trigger の `aria-describedby` と Popup の `id` に配布する ID。Root 配下では子に ID を指定しない |
+| `tooltipId` | Trigger | `string` | — | Root 外で単体利用するときだけ指定（Popup の `id` と揃える） |
+| `delay` | Root | `string` | `0.4s` | 表示までのディレイ。`--tooltip-delay` 変数として出力（退場猶予は `--tooltip-delay--close`、既定 `0.15s`） |
+| `offset` | Root | `string` | `var(--s5)` | トリガーとの距離。`--tooltip-offset` 変数として出力 |
+| `side` | Popup | `'top' \| 'bottom' \| 'start' \| 'end'` | `'top'` | 表示位置。`data-side` として出力。`start`/`end` は横方向で、書字方向に追従する inline 軸の論理方向（LTR では `start`=左）。viewport 端で自動反転 |
+| `align` | Popup | `'start' \| 'center' \| 'end'` | `'center'` | `side` と直交する方向の揃え。`data-align` として出力。`side` が `top`/`bottom` のとき `start`/`end` は書字方向に追従 |
+
+- CSS 変数（`--tooltip-offset`・`--tooltip-delay`・`--tooltip-delay--close`・`--tooltip-duration`）は Root（`.b--tooltip`）で受け取る。Root かその祖先に指定する。Popup に書いても効かない。
+- Trigger の既定は `button`。`as='span'` 等にするなら `tabindex='0'` でフォーカス可能にする。
+- 既定は反転配色（`--text` 背景・`--base` 文字）。色・余白・角丸は Lism props（`bgc`・`c`・`p`・`bdrs` 等）で上書きする。フェード時間は `--tooltip-duration`。
+
+```jsx
+<Tooltip.Root>
+  <Tooltip.Trigger>Save</Tooltip.Trigger>
+  <Tooltip.Popup side='top'>Shortcut: ⌘S</Tooltip.Popup>
+</Tooltip.Root>
+```
+
+
 ## ShapeDivider
 
 ソース: [ShapeDivider/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/ShapeDivider)

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

@@ -4,9 +4,10 @@
 
 - [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` では、Property Class は常に `!important`、`u--` クラスはセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で「Property Class > Utility Class > 単一クラス」の序列だけを再現し、それ以外は読み込み順と詳細度に依存します。
+
+独自クラス・上書きスタイルも対応するレイヤーに置きます。トークン・ベーススタイルの上書きは `@layer lism-base`、`b--` のベーススタイルは `@layer lism-block`、それ以外の独自クラス（`c--`）は `@layer lism-custom`（書き方は「カスタムCSS を追加する場合」）。
+
 ## クラス分類とプレフィックス
 
 [詳細](https://lism-css.com/docs/naming.md)
@@ -45,7 +52,8 @@ 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` |
@@ -53,12 +61,14 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 
 **併用ルール:**
 
-- `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--` 同士の併用ルールとBEM構造は[Component Class（`c--`）](#component-classc--)を参照
+- 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--` の判定軸:**
 
@@ -71,20 +81,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 -->
@@ -96,33 +107,73 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
 
-## Component Class（`c--`）
+## 独自クラスの選び方（2分類）
+
+Lism CSS が提供するクラス（`set--` / `is--` / `has--` / `l--` / `a--` / `u--` / Property Class）以外の、ユーザーが自分で定義するクラスは次の2分類で命名します。
 
-`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+| 分類 | 命名 | 例 | スタイルの書き方 |
+| --- | --- | --- | --- |
+| サイト共通で繰り返し使う基礎部品（ボタン・バッジ・カード級） | `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` で管理。 |
+
+- `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 は本体クラスと併記して使用: `.b--btn.b--btn--outline` / `.c--pricing.c--pricing--featured`
+- Element は `_`（アンダースコア）一つ区切り。CSS で参照する子要素にだけ付ける（[Custom Class（`c--`）](#custom-classc--)）
+- 同じプレフィックスの本体クラス同士の併用（`.b--xxx.b--yyy` / `.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
+  - 本体クラスと自身の Modifier: `.c--xxx.c--xxx--modifier`
+  - 本体クラスと他の本体クラスの Element: `.c--xxx.c--yyy_elem`
+
+### Block Class（`b--`）
+
+`b--` プレフィックスで定義する **Block Class** は、サイト内で繰り返し使う基礎部品（ボタン・バッジ・カード級）で、ベーススタイルを CSS 側（`@layer lism-block`）で管理します。コアの `lism-css` は専用レイヤーを用意するだけで、`b--` クラス自体は提供しません。
+
+次の3条件を**すべて**満たす場合に `b--` を使います。満たさない場合は `c--` にします。
 
-- Modifier は Block と併記して使用: `.c--button.c--button--outline`
-- 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--` には適用しない
+1. サイト内の複数ページ・複数箇所で繰り返し使う共通部品である
+2. クラスを1つ付けるだけでベーススタイルがほぼ決まるようにしたい部品である
+3. 粒度がボタン・バッジ・カード級の自己完結した部品である
 
-`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
+例: 
+```css
+@layer lism-block {
+  .b--btn {
+    --bgc: transparent;
+    --bdc: transparent;
+    padding: var(--s10) var(--s20);
+    border-radius: var(--bdrs--20);
+    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` レイヤーと対応）。コンポーネント・サイトの領域（ヘッダーやサイドバーなど）・ページ固有の要素など、粒度を問わず使えます。
 
-`c--*`は意味名として残し、レイアウトと単一プロパティ値はPrimitive/Property Classへ寄せます。CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。
+他のLismクラス（Trait, Primitive, Property Class等）との組み合わせを前提に設計し、CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。（明確な意図があればCSSに一般的なスタイルを書くことも可）
+
+スタイルが全くなく、何のパーツかを示す名前付けのためだけに使っても構いません。ただし名前付けだけで残すのは本体クラス（`c--{name}`）だけです。Element（`c--{name}_{element}`）は、子孫セレクタ・擬似要素・状態切替など CSS でその子要素を参照する時だけ付けます（NG→OK 例は [antipatterns-layout.md](./antipatterns-layout.md#css-の無い-element-クラスを付ける)）。
 
 ```html
-<!-- HTMLで書く場合も、意味名 + Primitive + Property Class を優先 -->
+<!-- HTMLで書く場合も、何のパーツかを示す名前 + Primitive + Property Class を優先 -->
 <div class="c--myCard l--stack -g:20 -p:30 -bdrs:20 -bxsh:20 -bd">...</div>
 ```
 
@@ -134,38 +185,37 @@ export default function MyCard(props) {
 ```
 
 ```css
-@layer lism-component {
+@layer lism-custom {
   .c--myCard::before {
     /* 擬似要素など、Props/Property Classで表せないものだけを書く */
   }
 }
 ```
 
-CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、マークアップ上の意味名として`c--myCard`だけ残して構いません。
+CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、何のパーツかを示す名前として`c--myCard`だけ残して構いません。
 
 ## カスタムCSS を追加する場合
 
 独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
 
 ```css
-/* カスタムコンポーネント → lism-component に追加 */
-@layer lism-component {
-  .c--myCard[data-is-active]::before {
-    border-color: var(--brand);
-  }
+/* ユーザーの独自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--myTheme {
-    --brand: #c00;
-  }
+  .set--myTheme { --brand: #c00; }
 }
 ```
 
-カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。ただし、`padding`/`border-radius`/`font-size`/`color`などProperty Class/Propsへ移せる宣言は、CSSに書く前にマークアップ側へ移します（NG→OK例は[antipatterns.md](./antipatterns.md#property-class-で書けるのに-css-で書く)を参照）。
+カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。`c--` でCSSに残す宣言の基準は [Custom Class（`c--`）](#custom-classc--)、`b--` は [Block Class（`b--`）](#block-classb--) を参照。
 
-明確にその数値に意図があり、トークン化・丸め・Property Class化ができない場合だけ、生のCSS値を例外として使用できます。その場合は実装プランに理由を残します。
+トークン外の生のCSS値は、[antipatterns.md の「直書きしてよい例外」](./antipatterns.md#px--固定値の直書き)に該当する場合だけ使い、実装プランに理由を残します。
 
 **レイヤー外に書く場合:**
 `@layer` の外（レイヤーなし）でカスタムCSSを書くのは、**Property Class（`-{prop}:{value}`）を拡張する場合のみ**としてください。それ以外のカスタムスタイルは必ずいずれかの `@layer` 内に記述します。
@@ -175,43 +225,6 @@ CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず
 .-myProp\:myValue { ... }
 ```
 
-## 独自プレフィックス
-
-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 {
-    /* ... */
-  }
-}
-```
-
-### `z--`/`p--`/`c--`の使い分け
-
-| 用途 | 推奨 | 理由 |
-| --- | --- | --- |
-| 再利用可能なUI部品 | `c--featureCard` | componentとして再利用され、Block/Element/Modifier構造を持てる |
-| サイトの大まかな領域 | `z--header`/`z--main`/`z--footer` | 再利用UIではなくゾーニングなので`c--`にしない |
-| ページ固有の領域 | `p--frontHero`/`p--postBody` | ページ依存の見た目をcomponent命名から分離する |
-| 外部JS・CMS・E2Eが参照するclass | 既存名を維持、または⏸ | 外部契約なのでrenameはユーザー確認が必要 |
-
-`c--header`や`c--sidebar`のような命名は、UI部品として再利用する意図がある場合だけ使います。サイト構造の領域名なら`z--header`、ページ限定なら`p--*`を優先してください。
-
-公開API、CMS出力、外部JS、E2Eセレクタ、ドキュメントで案内済みのclass名を変える場合は、内部参照を全更新できる場合でも⏸としてユーザー確認します。CSSだけrenameしてJS/テスト/HTML生成側を漏らさないでください。
-
 ## CSS の配置場所
 
 ### グローバル CSS（サイト全体）
@@ -234,13 +247,6 @@ Lism のトークン変数のカスタマイズやベーススタイルの上書
 コンポーネント固有のスタイルは、そのコンポーネントを定義しているファイルに紐づけます。
 
 - `.jsx` / `.tsx` ファイル: CSS ファイルを `import` する
-- `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
+- `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述（`<style>` 内でも `@layer` で囲む）
 
-```css
-/* コンポーネント用CSS は lism-component 内に定義する */
-@layer lism-component {
-  .c--yourComponent {
-    ...
-  }
-}
-```
+置くレイヤーは「カスタムCSS を追加する場合」と同じです。