@lism-css/mcp 0.26.0 → 0.28.0

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

@@ -29,7 +29,9 @@ import { Button } from '@lism-css/ui/astro/Button';
 - [Details](#details)
 - [Modal](#modal)
 - [NavMenu](#navmenu)
+- [Popover](#popover)
 - [Tabs](#tabs)
+- [Tooltip](#tooltip)
 - [ShapeDivider](#shapedivider)
 - [DummyText](#dummytext)
 - [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
@@ -89,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 ベースの円形画像表示。`b--avatar` クラスが付与される。
+アバター（プロフィール画像）コンポーネント。円形の画像表示で、`b--avatar` クラスが付与される。`src` ありは `l--frame`、`src` 未指定時は `l--center` に切り替わり、ルートに `b--avatar--initial`（背景色 `--base-2`）が付いて `name` の先頭1文字をイニシャルとして `span` で表示する（画像ロード失敗時の自動切替は無い）。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
-| `src` | `string` | — | 画像URL |
-| `alt` | `string` | — | 代替テキスト |
+| `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 で上書き可 */}
 ```
 
 
@@ -218,7 +223,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | --- | --- | --- | --- | --- |
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
-| `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
+| `itemP` | Root | `string` | — | 各アイテムのパディング。`--item-p` 変数として出力 |
 | `href` | Link | `string` | — | リンク先URL（Link は常に `a` 要素として出力） |
 | `hov` | Link | `string` | `-bgc` | ホバー時のスタイル。デフォルトで背景色が変化 |
 
@@ -234,6 +239,40 @@ 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)
@@ -263,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)
@@ -274,8 +342,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `viewBox` | `string` | — | SVG の viewBox |
 | `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
 | `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
-| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--_inner-stretch` 変数として出力 |
-| `offset` | `string` | — | 水平方向のオフセット。`--_inner-offset` 変数として出力 |
+| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--inner-stretch` 変数として出力 |
+| `offset` | `string` | — | 水平方向のオフセット。`--inner-offset` 変数として出力 |
 | `isEmpty` | `boolean` | — | シェイプを非表示にしてスペーサーとして使用 |
 | `isAnimation` | `boolean` | — | アニメーションを有効化。`data-has-animation` 属性として出力 |
 

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

@@ -37,10 +37,9 @@ Settings（トークン定義）
 
 `lism-block` は `lism-trait` / `lism-primitive` より弱い位置にあるため、`b--` のベーススタイルには、明示的に付与したクラス（`is--` / `has--` / `l--` など）が勝ちます。
 
-なお、この優先関係が保証されるのはレイヤーありの標準ビルド（`main.css` / `full.css`）だけです。`main_no_layer.css` / `full_no_layer.css` にはレイヤーがないため、読み込み順と詳細度に依存します。
+なお、レイヤーによるこの優先関係が保証されるのは標準ビルド（`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` に置きます。
+独自クラス・上書きスタイルも対応するレイヤーに置きます。トークン・ベーススタイルの上書きは `@layer lism-base`、`b--` のベーススタイルは `@layer lism-block`、それ以外の独自クラス（`c--`）は `@layer lism-custom`（書き方は「カスタムCSS を追加する場合」）。
 
 ## クラス分類とプレフィックス
 
@@ -57,7 +56,7 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 | 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` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--trimAll`, `u--clipText` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
@@ -130,7 +129,7 @@ BEM 構造（本体クラス / Modifier / Element）を持つのは `b--` と `c
 | 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 は `_`（アンダースコア）一つ区切り
+- 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`
@@ -171,7 +170,7 @@ BEM 構造（本体クラス / Modifier / Element）を持つのは `b--` と `c
 
 他の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 を優先 -->
@@ -214,9 +213,9 @@ CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず
 }
 ```
 
-カスタム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内でも、できる限り 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` 内に記述します。
@@ -248,13 +247,6 @@ Lism のトークン変数のカスタマイズやベーススタイルの上書
 コンポーネント固有のスタイルは、そのコンポーネントを定義しているファイルに紐づけます。
 
 - `.jsx` / `.tsx` ファイル: CSS ファイルを `import` する
-- `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
+- `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述（`<style>` 内でも `@layer` で囲む）
 
-```css
-/* 独自クラスの CSS は lism-custom 内に定義する（b-- のベーススタイルだけ lism-block） */
-@layer lism-custom {
-  .c--yourComponent {
-    ...
-  }
-}
-```
+置くレイヤーは「カスタムCSS を追加する場合」と同じです。

package/dist/data/guides/customize.md

@@ -12,8 +12,8 @@
 詳細（公式ドキュメント）:
 
 - 概要: [https://lism-css.com/docs/customize/](https://lism-css.com/docs/customize/)
-- CSSビルドの選択（`@layer` / `full.css` / `isFullMode`）: [https://lism-css.com/docs/customize/build/](https://lism-css.com/docs/customize/build/)
-- `lism.config.js`（props / tokens / traits・breakpoints・追加スタイル）: [https://lism-css.com/docs/customize/config/](https://lism-css.com/docs/customize/config/)
+- CSSファイルの種類（`@layer` なし版 / `full.css`）: [https://lism-css.com/docs/css-files/](https://lism-css.com/docs/css-files/)
+- `lism.config.js`（props / tokens / traits・breakpoints・`isFullMode`・追加スタイル）: [https://lism-css.com/docs/customize/config/](https://lism-css.com/docs/customize/config/)
 - SCSS（`$setting` / `$props`・BP上書き）: [https://lism-css.com/docs/customize/scss/](https://lism-css.com/docs/customize/scss/)
 - CSS Purge: [https://lism-css.com/docs/customize/purge/](https://lism-css.com/docs/customize/purge/)
 
@@ -22,7 +22,7 @@
 ## `@layer` をオフにする
 
 `lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
-なお、no-layer版ではレイヤーによる優先度管理（`b--`よりProperty Classが必ず強い等の保証）が効かず、読み込み順・詳細度に依存します。
+no-layer版は既存サイトや WordPress テーマなど、カスケードを制御できない環境向けです。レイヤーの代わりに、Property Class は常に `!important` 付き、`u--trim` / `u--trimAll` / `u--cbox` はセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で出力され、「Property Class > Utility Class > 単一クラス」の序列を再現します。`lism.config.js` の `defaultImportant: false`・`$default_important: 0`・`props` の個別 `important: 0` を指定しても `!important` は外れません。`b--` など上記以外のクラス同士の優先度は読み込み順・詳細度に依存します。
 
 ```js
 // 通常
@@ -48,7 +48,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` |
+| `$default_important` | Property Class にデフォルトで `!important` を付与するか（no-layer版では無視され、常に付与） | `0` |
 | `$props` | Property Class ごとの個別出力設定 | `prop-config` のデフォルト |
 
 ### 基本フォーマット
@@ -183,7 +183,7 @@ export default {
 
 これだけで、ブレイクポイント対応の全 Property Class が `xs` / `xl` のレスポンシブクラス（`-p_xs` / `-p_xl` 等）も出力するようになります。prop ごとの個別指定は不要です。
 
-統合プラグイン（型自動生成が有効）を使っている場合、有効化したブレイクポイントを反映した `lism-env.d.ts` がプロジェクト直下に**自動生成**されます。型補完も有効化したブレイクポイントのキーを自動で提示するため、`BreakpointRegistry` をプロジェクト側の `.d.ts` で手書き拡張する必要はありません。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
+統合プラグイン使用時は有効化したブレイクポイントがプロジェクト直下の `lism-env.d.ts` に自動反映され、`BreakpointRegistry` の手書き拡張は不要です。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
 
 > SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
 
@@ -257,31 +257,18 @@ export default {
 
 ### 追加した prop / trait の型解禁
 
-統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です。
+統合プラグイン使用時は、追加した prop / trait も `lism-env.d.ts`（`CustomPropRegistry` / `CustomTraitRegistry` の拡張）で自動解禁され、手書きの型拡張は不要です。
 
 なお、既存 prop への値追加（`ta="justify"` 等）はもともと任意の文字列を受け付けるため、型エラーにはなりません（ただし補完候補には出ません）。
 
 
 ## 追加スタイルを読み込ませる方法
 
-`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルが必要になります。構成によって反映方法が異なります。
+`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルが必要になります。構成によって反映方法が異なります。`traits` はクラス名だけを追加するため、`is--*` のスタイルはどの構成でも手動追記 / SCSS で用意します。
 
 ### Vite / Astro（統合プラグイン使用時）は自動反映（手動ビルド不要）
 
-`@lism-css/plugin` の統合プラグインを登録している場合、`lism.config.js` に props / tokens を追加すると、**dev サーバ / ビルドの CSS に自動反映されます**。追加クラス分の CSS を手動で追記したり `npx lism-css build` を回したりする必要はありません。dev 中に `lism.config.js` を変更すると HMR で CSS が再生成され、型 `.d.ts` も追従します。
-
-参照先の **CSS 変数の値そのもの**（`:root { --lts--2xl: .5em }` のような定義）も、`tokens` に値を書けば自動生成されます。値の定義・ユーティリティ生成・props 受理がまとめて反映されるため、`global.css` への手書きは不要です（既定値の上書きも可能）。
-
-```js
-// lism.config.js — 値そのものも config に集約できる
-export default {
-  tokens: {
-    lts: { '2xl': '.5em' }, // :root { --lts--2xl: .5em } + .-lts:2xl を自動生成
-  },
-};
-```
-
-> `is--*` クラスのスタイルは `traits` ではクラス名のみを追加するため、対応するスタイルは別途必要です（後述の手動追記 / SCSS を参照）。
+`@lism-css/plugin` の統合プラグインを登録している場合、`lism.config.js` に props / tokens を追加すると、**dev サーバ / ビルドの CSS に自動反映されます**。手動追記や `npx lism-css build` は不要で、dev 中の変更は HMR で CSS と型 `.d.ts` が追従します。`tokens` に書いた値は CSS 変数の定義（`:root { --lts--2xl: .5em }`）・ユーティリティクラス・props 受理がまとめて反映されるため、`global.css` への手書きも不要です（既定値の上書きも可）。
 
 軽微な追加であれば、props を増やさず Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きだけで済ませることもできます。
 
@@ -317,8 +304,7 @@ npx lism-css build --full   # full.css / full_no_layer.css も生成
 ```
 
 > **注意**:
-> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（`lh` のように CSS 変数を持たないものや、実値を手書きSCSS側へ置くもの）。
-> - `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - `tokens` の値は CLI ビルドでも CSS 変数とユーティリティクラスの両方が出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（`flow` や `bdrs.inner` のように実値を手書きSCSS側へ置くもの）。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
 
 ### 手動で CSS を追記
@@ -337,16 +323,15 @@ CLI を使わず、追加クラス分の CSS をプロジェクト側で書い
 }
 ```
 
-### SCSS で `lism.config.js` と整合させる
+### SCSS だけで値を追加する（`lism.config.js` を使わない構成）
 
-SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
+`@lism-css/plugin` を使わない構成では `lism.config.js` は読み込まれない。SCSS の `$props` の `utilities` で値を追加し、コンポーネントからは `:value` 記法（`p=":box"`）で強制クラス化するか、HTML に直接クラスを書いて使う。
 
 ```scss
 @use '../path-to/node_modules/lism-css/scss/setting' with (
   $props: (
     'ta': ( utilities: ( 'justify': 'justify' ) ),
     'p': ( utilities: ( 'box': '2em' ) ),
-    'filter': ( utilities: ( 'blur': 'blur(3px)' ) ),
     'lts': ( utilities: ( '2xl': 'var(--lts--2xl)' ) ),
   )
 );

package/dist/data/guides/naming.md

@@ -28,12 +28,11 @@
 | 表記 | 条件 | 例 |
 | --- | --- | --- |
 | `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
-| `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
+| `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--hl--base` |
 | `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
 | セマンティック名 | 上記に当てはまらない場合 | `--ar--og` |
 
-> 🎵 **例外: opacity トークン**
-> opacity（`--o--mp` / `--o--p` / `--o--pp` / `--o--ppp`）は、音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用している。`p`（piano / 弱く）の反復回数が多いほど透明度が増す構造で、「文字の反復回数で段階を表す」命名は Lism 内で opacity のみの例外。
+例外: opacity トークン（`--o--mp` / `--o--p` / `--o--pp` / `--o--ppp`）は文字の反復回数で段階を表す（由来は [tokens.md](./tokens.md#透明度-o)）。
 
 ### Property Class 用の変数
 
@@ -46,10 +45,14 @@
 
 | 形式 | 用途 | 例 |
 | --- | --- | --- |
-| `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
+| `--{target}-{prop}` | 特定のセレクタを起点に、子要素へ設定するプロパティ | `--link-td`, `--headings-ff`, `--icon-size` |
 | `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
-| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
-| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+| `--_{varName}` | 上書きを想定しない内部処理用の変数・状態判定用の変数 | `--_panelH`、`--_flipX`、`--_isHov` |
+
+`--{target}-{prop}`は、`:root`を起点にする場合も、`.b--*`や`.c--*`を起点にする場合も同じ形式です。`:root`以外を起点にする変数は、次のルールで外部からの影響を閉じます。
+
+- 起点のセレクタで必ず初期値をセットする（例: `.b--list { --icon-size: 1em; }`）。祖先や他のコンポーネントから同名の値を継承しないため。
+- 値を変えるときは`:root`ではなく、起点の要素にインラインstyleやpropsで指定する。
 
 ## クラスの命名規則
 
@@ -185,23 +188,8 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 .-bdrs:20         → border-radius: var(--bdrs--20);
 ```
 
-opacity トークンは音楽記号に由来する例外的な命名で、そのままクラス化される。
-
-```
-.-o:mp            → opacity: var(--o--mp);
-.-o:p             → opacity: var(--o--p);
-.-o:pp            → opacity: var(--o--pp);
-.-o:ppp           → opacity: var(--o--ppp);
-```
+opacity トークンもそのままクラス化される（`.-o:p` → `opacity: var(--o--p)`）。
 
 ### 長いキーワード値の省略
 
-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` |
+6文字以上かつ省略しても意味が通るものは省略可（`uppercase` → `-tt:upper` 等）。一覧は [property-class.md](./property-class.md#値の省略形例外一覧) を参照。

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

@@ -25,14 +25,14 @@
 | `fw` | `font-weight` | `-fw:light`, `-fw:normal`, `-fw:bold`, `-fw:100`〜`-fw:900` | — |
 | `ff` | `font-family` | `-ff:base`, `-ff:accent`, `-ff:mono` | — |
 | `fs` | `font-style` | `-fs:italic` | — |
-| `hl` | `--hl`（ハーフレディング） | `-hl:base`, `-hl:xs`, `-hl:s`, `-hl:l`, `-hl:0` | ✔ |
-| `lh` | `line-height`（`--hl` 経由・互換） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
+| `hl` | `--hl`（ハーフレディング） | `-hl:base`, `-hl:xs`, `-hl:s`, `-hl:l`, `-hl:xl`, `-hl:0` | ✔ |
+| `lh` | `line-height`（倍率・`--lh` 経由） | `-lh:xs`, `-lh:s`, `-lh:m`, `-lh:l`, `-lh:xl`, `-lh:1` | — |
 | `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l`, `-lts:xl` | — |
 | `ta` | `text-align` | `-ta:center`, `-ta:left`, `-ta:right` | — |
 | `td` | `text-decoration` | `-td:none` | — |
 | `tt` | `text-transform` | `-tt:upper`, `-tt:lower` | — |
 
-**注意:** Lism はハーフレディングで `line-height` を管理します（`line-height: calc(1em + var(--hl) * 2)`）。正規のプロパティは `hl` で、`--hl` にトークン値をセットします（`hl="0"` でハーフレディングなし、BP 指定可）。`lh` は互換ショートカットで、トークン値・`1` は `--hl` を制御し、`lh="1.7"` のような任意値はそのまま CSS `line-height` を出力します。新規コードでは `hl` を推奨します。
+**注意:** `line-height` は全要素で `var(--lh, calc(1em + var(--hl) * 2))` として管理されます。基本は `hl`（fz 非依存の固定量）を使い、fz に比例した行送りを保ちたい場合だけ `lh`（倍率）を使います。`lh` を指定した要素の子孫では `hl` は効きません。
 
 ### 表示・可視性
 
@@ -101,7 +101,7 @@
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 | --- | --- | --- | --- |
-| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | ✔ |
+| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:50`, `-bdrs:99`, `-bdrs:inner` | ✔ |
 | `bdrs-tl` | `border-top-left-radius` | — | — |
 | `bdrs-tr` | `border-top-right-radius` | — | — |
 | `bdrs-br` | `border-bottom-right-radius` | — | — |
@@ -153,7 +153,7 @@
 | `pt` | `padding-top` | `-pt:5`, `-pt:10`, `-pt:20`, ... (SPACEトークン) | ✔ |
 | `pb` | `padding-bottom` | `-pb:5`, `-pb:10`, `-pb:20`, ... (SPACEトークン) | ✔ |
 
-SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
+SPACEトークンの全値（`5`〜`70`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
 
 ### 余白 — Margin
 

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

@@ -12,10 +12,13 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 `-bd` または `-bd-{side}` クラスが付くと、以下の初期値がセットされる。
 
 ```scss
+/* 変数の初期値だけ弱い位置に置く（@layer ビルドでは @layer lism-base、no_layer ビルドでは :where()） */
 :where(.-bd, [class*=" -bd-"], [class^="-bd-"]) {
   --bds: solid;
   --bdw: 1px;
   --bdc: var(--divider);
+}
+.-bd, [class*=" -bd-"], [class^="-bd-"] {
   border-width: var(--bdw);
   border-color: var(--bdc);
 }

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

@@ -31,6 +31,7 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 | `-hov:-bgc` | `background-color` | `var(--hov-bgc, var(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))` |
 | `-hov:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
 | `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
+| `-hov:-transform` | `transform` | `var(--hov-transform, translate(0, -4px))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 

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

@@ -107,7 +107,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
 | `-hov:in:{preset}` | 親の `set--hov` を起点に子のスタイルを変化させる | 親に `set--hov` が必要 |
 
-**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
+**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:-transform`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
 
 **`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。