@lism-css/mcp 0.14.0 → 0.15.1

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

@@ -7,15 +7,15 @@
 - クラス名: `l--flow`
 - コンポーネント: `<Flow>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_flow.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--flow/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flow.md
 
 ## 余白の仕組み
 
-`l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h2`〜`h6`）のみ余白が大きくなる（`--flow-hScale` で調整可能）。
+`l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h1`〜`h6`）のみ余白が大きくなり、`calc(var(--flow) * 2 + 0.5em)` で計算されます。
 
 | クラス | 余白量 |
 |--------|-------|
-| `.l--flow` | `--flow--base`（`--s30`） |
+| `l--flow` | `--flow--base`（`--s30`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
@@ -23,7 +23,7 @@
 
 | Prop | 説明 |
 |------|------|
-| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `.-flow:{value}` クラスが付与、任意値を渡すと `.-flow:` + `style="--flow:..."` が出力される |
+| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `-flow:{value}` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
 
 ## Usage
 
@@ -131,4 +131,4 @@
 ## 関連プリミティブ
 
 - [l--stack](./l--stack.md) — `gap` で余白を管理する縦積み（こちらは Flexbox）
-- [is--wrapper](./is--wrapper.md) — 記事コンテンツ幅の制限用ラッパー（`l--flow` とセットで使うことが多い）
+- [is--wrapper](../trait-class/is--wrapper.md) — 記事コンテンツ幅の制限用ラッパー（`l--flow` とセットで使うことが多い）

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

@@ -7,7 +7,7 @@
 - クラス名: `l--frame`
 - コンポーネント: `<Frame>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_frame.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--frame/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--frame.md
 
 ## 専用Props
 
@@ -89,6 +89,6 @@
 
 ## 関連プリミティブ
 
-- [is--layer](./is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
+- [is--layer](../trait-class/is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
 - [l--center](./l--center.md) — フレーム内でテキストを中央配置する時に組み合わせる
 - [a--icon](./a--icon.md) — アイコン画像の表示（`src` 指定）

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

@@ -7,7 +7,7 @@
 - クラス名: `l--grid`
 - コンポーネント: `<Grid>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_grid.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--grid/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--grid.md
 
 ## Usage
 
@@ -65,4 +65,4 @@
 
 - [l--tileGrid](./l--tileGrid.md) — 自動繰り返しのタイル型 Grid
 - [l--columns](./l--columns.md) — 等幅カラム専用
-- [l--sideMain](./l--sideMain.md) — コンテンツ幅自動切り替え型 2 カラム
+- [l--withSide](./l--withSide.md) — コンテンツ幅自動切り替え型 2 カラム

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

@@ -7,7 +7,7 @@
 - クラス名: `l--stack`
 - コンポーネント: `<Stack>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_stack.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--stack/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--stack.md
 
 ## Usage
 

package/dist/data/guides/primitives/{l--switchCols.md → l--switchColumns.md}

@@ -1,34 +1,34 @@
-# l--switchCols / `<SwitchCols>`
+# l--switchColumns / `<SwitchColumns>`
 
 複数列 ↔ 1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラス。Flexbox ベースで、親コンテナ幅に応じて自動的に折り返します。
 
 ## 基本情報
 
-- クラス名: `l--switchCols`
-- コンポーネント: `<SwitchCols>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchCols.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--switchCols/
+- クラス名: `l--switchColumns`
+- コンポーネント: `<SwitchColumns>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchColumns.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--switchColumns.md
 
 ## 専用Props
 
-| Prop | CSS変数 | 説明 |
-|------|--------|------|
-| `breakSize` | `--breakSize` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
+| Prop | CSS変数 | デフォルト | 説明 |
+|------|--------|-----------|------|
+| `breakSize` | `--breakSize` | `var(--sz--xs)` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
 
 ## Usage
 
 ### デフォルト幅で利用する
 
 ```jsx
-<SwitchCols g="20">
+<SwitchColumns g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20">
+<div class="l--switchColumns -g:20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
@@ -38,14 +38,14 @@
 ### `breakSize` の指定
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20" style="--breakSize: var(--sz--s)">
+<div class="l--switchColumns -g:20" style="--breakSize: var(--sz--s)">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
 </div>
@@ -56,14 +56,14 @@
 子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ## 関連プリミティブ
 
-- [l--fluidCols](./l--fluidCols.md) — 最小幅ベースの自動段組
+- [l--autoColumns](./l--autoColumns.md) — 最小幅ベースの自動段組
 - [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
-- [l--sideMain](./l--sideMain.md) — コンテンツ幅基準の2カラム切り替え
+- [l--withSide](./l--withSide.md) — コンテンツ幅基準の2カラム切り替え

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

@@ -7,7 +7,7 @@
 - クラス名: `l--tileGrid`
 - コンポーネント: `<TileGrid>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_tileGrid.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--tileGrid/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--tileGrid.md
 
 ## 専用Props
 
@@ -57,5 +57,5 @@
 ## 関連プリミティブ
 
 - [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム
-- [l--fluidCols](./l--fluidCols.md) — 自動折り返し型段組
+- [l--autoColumns](./l--autoColumns.md) — 自動折り返し型段組
 - [l--grid](./l--grid.md) — 汎用 CSS Grid

package/dist/data/guides/primitives/{l--sideMain.md → l--withSide.md}

@@ -1,13 +1,13 @@
-# l--sideMain / `<SideMain>`
+# l--withSide / `<WithSide>`
 
 メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる2カラムレイアウト**。「画像 + コンテンツ」「メインエリア + サイドバー」などに活用できる。
 
 ## 基本情報
 
-- クラス名: `l--sideMain`
-- コンポーネント: `<SideMain>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_sideMain.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--sideMain/
+- クラス名: `l--withSide`
+- コンポーネント: `<WithSide>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_withSide.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--withSide.md
 
 ## 動作の仕組み
 
@@ -17,15 +17,15 @@
 
 ## 専用Props
 
-| Prop | 出力 | 説明 |
-|------|------|------|
-| `sideW` | `--sideW` | サイド要素の横幅 |
-| `mainW` | `--mainW` | メイン要素で維持したい最小幅 |
+| Prop | 出力 | デフォルト | 説明 |
+|------|------|-----------|------|
+| `sideW` | `--sideW` | `auto` | サイド要素の横幅 |
+| `mainW` | `--mainW` | `max(20rem, 50%)` | メイン要素で維持したい最小幅 |
 
 ## HTML構造
 
 ```html
-<div class="l--sideMain">
+<div class="l--withSide">
   <div>Main Content</div>
   <div class="is--side">Side Content</div>
 </div>
@@ -36,7 +36,7 @@
 ### 基本的な使い方
 
 ```jsx
-<SideMain sideW="12rem" mainW="20rem" g="20">
+<WithSide sideW="12rem" mainW="20rem" g="20">
   <Box p="15" bd bdc="blue">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -44,11 +44,11 @@
   <Box isSide p="15" bd bdc="red">
     <p>Side Content</p>
   </Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -g:20" style="--sideW:12rem;--mainW:20rem">
+<div class="l--withSide -g:20" style="--sideW:12rem;--mainW:20rem">
   <div class="l--box -p:15 -bd" style="--bdc:var(--blue)">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -64,16 +64,16 @@
 `flex-direction: row-reverse` を併用することで、横並びの時だけ順序を反転できます。**横並びで左側・縦並びで下側に Side を配置**したいときに便利。
 
 ```jsx
-<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
+<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
   <Box>
     <p>Main content...</p>
   </Box>
   <Box isSide bgc="blue:20%">Side Content</Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
+<div class="l--withSide -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
   <div class="l--box">
     <p>Main content...</p>
   </div>
@@ -81,9 +81,31 @@
 </div>
 ```
 
+### メディアとテキストが交互に並ぶレイアウト
+
+`l--withSide` は「メディア + テキスト」のペアを複数並べて、横並びの時はメディアの位置（左右）が交互に切り替わりつつも、縦並びの時はメディアが上側に統一されるレイアウトにも活用できる。
+
+```jsx
+<Stack isContainer g="40">
+  <WithSide sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+
+  <WithSide fxd="row-reverse" sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+</Stack>
+```
+
 ## `l--grid` との使い分け
 
-- **`l--sideMain`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
+- **`l--withSide`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
 - **`l--grid`** (`<Grid gta={[...]} gtc={[...]} />`): ブレイクポイント（`sm`/`md`）で明示的に切り替えたい場合
 
 ```jsx
@@ -97,6 +119,6 @@
 ## 関連プリミティブ
 
 - [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
-- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
-- [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
-- [is--container](./is--container.md) — レスポンシブ Property Class 利用時に必要
+- [l--autoColumns](./l--autoColumns.md) — カラム幅ベースの自動段組
+- [l--switchColumns](./l--switchColumns.md) — ブレイクポイント一括切り替え型カラム
+- [is--container](../trait-class/is--container.md) — レスポンシブ Property Class 利用時に必要

package/dist/data/guides/prop-responsive.md

@@ -8,7 +8,7 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive/)
+[詳細](https://lism-css.com/docs/responsive.md)
 
 ---
 
@@ -29,9 +29,34 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 ```
 
 **仕組み:**
-1. `-p_sm` クラスは `@container (min-width: 480px)` 内で `padding: var(--p_sm)` を適用
-2. `--p_sm` 変数で切り替え先の値を指定
-3. `overwriteBaseVar` 対応の Prop はベース変数（`--p`）も上書きされる
+- BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
+- 出力形式はプロパティによって 2 パターン（基本 / 例外）
+
+**基本パターン** — BP 用変数を直接読む:
+
+```css
+.-d { display: var(--d) }
+@container (min-width: 480px) {
+  .-d_sm { display: var(--d_sm) }
+}
+@container (min-width: 800px) {
+  .-d_md { display: var(--d_md) }
+}
+```
+
+**例外パターン** — `alwaysVar` 対応の `c`, `bgc`, `p`, `m`, `bdrs` のみ。ベース変数 `--p` が常に現在適用中の値を指すように上書きされる（state 変数扱い）:
+
+```css
+.-p { padding: var(--p) }
+@container (min-width: 480px) {
+  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
+}
+@container (min-width: 800px) {
+  .-p_md { padding: var(--p); --p: var(--p_md) !important }
+}
+```
+
+ソースコードの [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) で `alwaysVar: 1` がセットされているプロパティがこのパターンで出力されます。
 
 ## Lism コンポーネントでの指定
 

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

@@ -0,0 +1,127 @@
+# -bd（ボーダー）
+
+Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理される特殊仕様の Property Class。`-bd` または `-bd-{side}` クラスで変数管理を有効化し、`bds` / `bdc` / `bdw` Prop で個別に上書きする。
+
+## 基本情報
+
+- クラス名: `-bd` / `-bd-{side}` / `-bds:*` / `-bdc:*` / `-bdw` など
+- Lism props: `bd`, `bd-{side}`, `bds`, `bdc`, `bdw`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_border.scss
+- 公式ドキュメント: https://lism-css.com/docs/property-class/bd.md
+
+## 仕組み
+
+`-bd` または `-bd-{side}` クラスが付くと、以下の初期値がセットされる。
+
+```scss
+:where(.-bd, [class*=" -bd-"], [class^="-bd-"]) {
+  --bds: solid;
+  --bdw: 1px;
+  --bdc: var(--divider);
+  border-width: var(--bdw);
+  border-color: var(--bdc);
+}
+.-bd       { border-style: var(--bds); }
+.-bd-x     { border-inline-style: var(--bds); }
+.-bd-y     { border-block-style: var(--bds); }
+/* ...各 side ごとに style を適用 */
+```
+
+`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `-bd` または `-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
+
+## 方向指定クラス
+
+| Prop | CSS プロパティ |
+|------|--------------|
+| `bd` | `border`（変数管理を有効化） |
+| `bd-x` | `border-inline` |
+| `bd-y` | `border-block` |
+| `bd-x-s` | `border-inline-start` |
+| `bd-x-e` | `border-inline-end` |
+| `bd-y-s` | `border-block-start` |
+| `bd-y-e` | `border-block-end` |
+| `bd-t` | `border-top` |
+| `bd-b` | `border-bottom` |
+| `bd-l` | `border-left` |
+| `bd-r` | `border-right` |
+
+標準で用意しているのは物理方向（`-t` / `-b` / `-l` / `-r`）と論理方向（`-x` / `-y` / `-x-s` / `-x-e` / `-y-s` / `-y-e`）のみ。
+
+## 値プロパティ
+
+| Prop | 変数 | プリセット値クラス | BP クラス |
+|------|------|-------------|-----|
+| `bd` | — | `-bd:none` | — |
+| `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` | — |
+| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
+| `bdw` | `--bdw` | — | `-bdw_sm`, `-bdw_md` |
+
+`bdw` はブレイクポイント指定に対応。`--bdw` の値を BP で切り替えることで、ボーダーの方向自体を変化させることもできる。
+
+## Usage
+
+### 全方向にボーダー + カスタマイズ
+
+```jsx
+<Box bd p="10">...</Box>
+<Box bd bds="dashed" bdw="4px" bdc="red" p="15">...</Box>
+```
+```html
+<div class="l--box -bd -p:10">...</div>
+<div class="l--box -bd -bds:dashed -p:15" style="--bdw: 4px; --bdc: var(--red)">...</div>
+```
+
+### 単一方向
+
+```jsx
+<Box bd-t px="10">-t: Top</Box>
+<Box bd-x bdw="2px" px="10">inline</Box>
+<Box bd-x-s bdw="2px" px="10">inline-start</Box>
+```
+```html
+<div class="l--box -bd-t -px:10">-t: Top</div>
+<div class="l--box -bd-x -px:10" style="--bdw: 2px">inline</div>
+<div class="l--box -bd-x-s -px:10" style="--bdw: 2px">inline-start</div>
+```
+
+### 方向ごとに異なるスタイル
+
+`-bd` + `--bdw` / `--bds` / `--bdc` を複数値指定すると、方向ごとにスタイルを変えられる。
+
+```jsx
+<Box bd bdw="0 0 1px .5em" bds="dashed solid" bdc="var(--purple) var(--blue)" p="15">
+  border
+</Box>
+```
+```html
+<div class="l--box -bd -p:15"
+     style="--bdw: 0 0 1px 0.5em; --bds: dashed solid; --bdc: var(--purple) var(--blue)">
+  border
+</div>
+```
+
+### ブレイクポイントで `bdw` を切り替え
+
+```jsx
+<Box bd bdw={['1px', '3px', '6px']} p="15">border</Box>
+```
+```html
+<div class="l--box -bd -bdw_sm -bdw_md -p:15"
+     style="--bdw: 1px; --bdw_sm: 3px; --bdw_md: 6px">border</div>
+```
+
+### BP でボーダー方向を切り替える
+
+`bd-x-s` + `bd-y-s` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
+
+```jsx
+<Flex fxd={['column', 'row']}>
+  <Box px="15" py="5">Box</Box>
+  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>Box</Box>
+</Flex>
+```
+
+## 関連
+
+- [`-bdrs`](https://lism-css.com/docs/property-class.md) — 角丸（`border-radius`）
+- [`-bd-{side}` + `has--gutter`](../trait-class/has--gutter.md) — セクション区切りに使うと相性が良い

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

@@ -0,0 +1,140 @@
+# -hov（ホバー）
+
+hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--var:hov` に連動する系の 2 系統に分かれる。
+
+## 基本情報
+
+- クラス名: `-hov:-{prop}` / `-hov:{preset}` / `-hov:in:{preset}`
+- Lism props: `hov`（`<Lism hov="-c">` / `<Box hov={{ bgc: 'brand' }}>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_hover.scss
+- 公式ドキュメント: https://lism-css.com/docs/property-class/hov.md
+
+## 3 つの形式
+
+| 形式 | 役割 |
+|------|------|
+| `-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
+| `-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
+| `-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
+
+`-hov:-{prop}` と `-hov:{preset}` は `@media (any-hover: hover)` 内で定義されるため、タッチデバイスでは無効。  
+`-hov:in:*` はメディアクエリ外で、親の `set--var:hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
+
+トランジションを付けたい場合は [`has--transition`](../trait-class/has--transition.md) クラスを併用する。
+
+## `-hov:-{prop}` — プロパティ変更
+
+`:hover` で直接動作する。クラスを付けるだけで初期値で変化する。
+
+| クラス | 変化するプロパティ | 初期値 |
+|--------|----------------------|--------|
+| `-hov:-c` | `color` | `var(--hov-c, var(--link))` |
+| `-hov:-bdc` | `border-color` | `var(--hov-bdc, currentColor)` |
+| `-hov:-bgc` | `background-color` | `var(--hov-bgc, var(--base-2))` |
+| `-hov:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
+| `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
+
+任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
+
+```html
+<!-- 初期値のまま使用 -->
+<a class="is--boxLink -hov:-o -bgc:base-2 -bd -p:20" href="###">...</a>
+
+<!-- 任意値を指定 -->
+<a class="is--boxLink -hov:-bgc -hov:-c -bgc:base-2 -p:20"
+   style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="###">...</a>
+```
+
+## `-hov:{preset}` — プリセット
+
+hover 時のスタイルセットをプリセット名でまとめて適用する。
+
+| クラス | 内容 |
+|--------|------|
+| `-hov:underline` | テキストに下線を表示 |
+| `-hov:neutral` | 背景色にニュートラルグレーをブレンド |
+
+プロジェクト固有のプリセットは、以下のように自作して追加できる。
+
+```scss
+@media (any-hover: hover) {
+  .-hov\:shadowUp:hover {
+    box-shadow: var(--bxsh--40);
+    translate: 0 -3px;
+  }
+}
+```
+
+## `-hov:in:{preset}` — 親連動
+
+親要素に `set--var:hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
+
+| クラス | 効果 | 仕組み |
+|--------|------|--------|
+| `-hov:in:hide` | 親 hover 時にフェードアウト | `opacity: var(--_isHov, 0)` |
+| `-hov:in:show` | 親 hover 時にフェードイン | `opacity: var(--_notHov, 0)` / `visibility: var(--_notHov, hidden)` |
+| `-hov:in:zoom` | 親 hover 時にズーム | `scale: var(--_isHov, 1.1)` |
+
+```jsx
+<Frame set="var:hov" isBoxLink href="#" ar="16/9">
+  <Media isLayer hasTransition hov="in:zoom" src="..." />
+  <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 40%)">...</Layer>
+</Frame>
+```
+
+## `<Lism>` コンポーネントでの `hov` 指定
+
+`<Lism>`（およびその継承コンポーネント）の `hov` prop は、文字列・オブジェクトの 2 通りで指定できる。
+
+### 文字列指定
+
+入力した文字列がそのまま `-hov:{入力文字列}` クラスとして出力される。カンマ区切りで複数指定可能。**自動変換は行われない**（`"c"` → `-hov:-c` のような省略はサポートしない）。
+
+```jsx
+<Lism hov="-o">...</Lism>
+// → <div class="-hov:-o">...</div>
+
+<Lism hov="shadowUp">...</Lism>
+// → <div class="-hov:shadowUp">...</div>
+
+<Lism hov="-c,-bxsh">...</Lism>
+// → <div class="-hov:-c -hov:-bxsh">...</div>
+```
+
+### オブジェクト指定
+
+主に `-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
+
+```jsx
+<Lism hov={{ c: 'red' }}>...</Lism>
+// → <div class="-hov:-c" style="--hov-c: var(--red)">...</div>
+```
+
+値に `true` を指定すると `-hov:{key}` クラスのみ出力される。任意値プロップとプリセット／自作クラスを**同時に**指定したい時に使う。
+
+```jsx
+<Lism hov={{ shadowUp: true }}>...</Lism>
+// → <div class="-hov:shadowUp">...</div>
+
+<Lism hov={{ c: 'red', shadowUp: true }}>...</Lism>
+// → <div class="-hov:-c -hov:shadowUp" style="--hov-c: var(--red)">...</div>
+```
+
+## `has--transition` との併用
+
+`-hov:*` による変化は即時に切り替わる。なめらかなトランジションを付けたい場合は `has--transition` を併用し、`--duration` で所要時間を調整する。
+
+```jsx
+<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">...</BoxLink>
+// → <a class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20"
+//      style="--hov-bxsh: var(--bxsh--40)" href="###">...</a>
+
+<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd p="20"
+         style={{ '--duration': '.5s' }}>...</BoxLink>
+```
+
+## 関連
+
+- [`has--transition`](../trait-class/has--transition.md) — hover 時の変化にトランジションを付ける
+- [`set--var:hov`](../set-class.md#set--varhov) — 親の hover 状態を子要素に伝播させる仕組み
+- [`set--var:bxsh`](../set-class.md) — `-hov:-bxsh` と組み合わせる場合の影色再計算