@lism-css/mcp 0.13.0 → 0.15.0

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/
+
+## 仕組み
+
+`.-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/) — 角丸（`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/
+
+## 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, 0.7)` |
+| `.-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` と組み合わせる場合の影色再計算

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

@@ -0,0 +1,99 @@
+# -max-sz（最大幅）
+
+コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `container` を持つ。
+
+## 基本情報
+
+- クラス名: `-max-sz:{xs|s|m|l|xl|full|container}`
+- Lism props: `max-sz`（`<Lism max-sz="m">` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_size.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/property-class/max-sz/
+
+## トークン対応クラス
+
+コンテンツサイズ用のトークン `--sz--{xs|s|m|l|xl}` にそのまま対応するクラスが用意されている。
+
+| クラス | 値 |
+|--------|-----|
+| `-max-sz:xs` | `var(--sz--xs)` |
+| `-max-sz:s` | `var(--sz--s)` |
+| `-max-sz:m` | `var(--sz--m)` |
+| `-max-sz:l` | `var(--sz--l)` |
+| `-max-sz:xl` | `var(--sz--xl)` |
+
+## 特殊クラス
+
+### `-max-sz:full`
+
+**親要素のサイズいっぱいに広がる**クラス。`.has--gutter` の直下では、その gutter 分を**追加で外側に**拡張する（= gutter を無視して端まで広がる）。
+
+```scss
+.-max-sz\:full {
+  max-inline-size: 100%;
+
+  :where(.has--gutter) > & {
+    max-inline-size: calc(100% + var(--gutter-size) * 2);
+    margin-inline: calc(var(--gutter-size) * -1);
+  }
+}
+```
+
+`.has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。
+
+### `-max-sz:container`
+
+**コンテナ要素を基準としたサイズ**まで広がる。`.is--container` ごとに `--sz--container` が更新されるため、直近の container を基準にサイズ決定される。
+
+```scss
+.-max-sz\:container {
+  max-inline-size: var(--sz--container, 100cqi);
+  margin-inline: calc(50% - var(--sz--container) / 2);
+}
+```
+
+`margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても container 基準の幅に広げつつ中央に揃う。
+
+## Usage
+
+### トークン値での使用
+
+```jsx
+<Lism max-sz="m" mx="auto">...</Lism>
+```
+```html
+<div class="-max-sz:m -mx:auto" style="max-inline-size: var(--sz--m)">...</div>
+```
+
+### `.has--gutter` 内の全幅要素
+
+```html
+<div class="has--gutter">
+  <p>通常の gutter 内コンテンツ</p>
+  <img class="-max-sz:full" src="..." alt="" />
+  <p>通常の gutter 内コンテンツ</p>
+</div>
+```
+
+### container 基準のサイズ
+
+```html
+<div class="is--container">
+  <div class="is--wrapper -contentSize:s">
+    <p>狭めのコンテンツ</p>
+    <div class="-max-sz:container">
+      container 基準まで広がる要素
+    </div>
+  </div>
+</div>
+```
+
+## DEMO
+
+`-max-sz:*` の挙動確認用デモ:
+- https://lism-css.com/demo/content-size
+
+## 関連
+
+- [`is--container`](../trait-class/is--container.md) — `-max-sz:container` の基準となるコンテナ
+- [`is--wrapper`](../trait-class/is--wrapper.md) — コンテンツ幅の制限
+- [`has--gutter`](../trait-class/has--gutter.md) — `-max-sz:full` と組み合わせる左右余白

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

@@ -18,6 +18,12 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 [詳細](https://lism-css.com/docs/property-class/)
 
+個別ドキュメント:
+
+- [property-class/bd.md](./property-class/bd.md) — ボーダー（`-bd` / `-bd-{side}` 系）
+- [property-class/hov.md](./property-class/hov.md) — ホバー（`-hov:*` 系）
+- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:container` 等）
+
 ---
 
 ## 基本書式
@@ -77,7 +83,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid` | `-d_sm`, `-d_md` |
+| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | `-d_sm`, `-d_md` |
 | `o` | `opacity` | `-o:0`, `-o:-10`, `-o:-20`, `-o:-30` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
@@ -98,14 +104,16 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
 | `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:container` | — |
-| `ysz` | `block-size` | — | — |
-| `min-ysz` | `min-block-size` | — | — |
-| `max-ysz` | `max-block-size` | — | — |
+| `bsz` | `block-size` | — | — |
+| `min-bsz` | `min-block-size` | — | — |
+| `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
-- `-max-sz:full` — `max-inline-size: 100%`。`.set--gutter` 内では gutter 分を含めた全幅に拡張
+- `-max-sz:full` — `.has--gutter` 内では gutter 分を含めた全幅に拡張
 - `-max-sz:container` — コンテナ幅に合わせる（`margin-inline` で中央配置）
 
+→ 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
+
 ### 背景
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
@@ -146,9 +154,9 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40` | `-bxsh_sm`, `-bxsh_md` |
+| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | `-bxsh_sm`, `-bxsh_md` |
 
-**注意:** `bxsh` の使用時は `set--shadow` クラスの併用が必要です（影色 `--shc` の再計算のため）。
+**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--var:bxsh` クラスを併用する。
 
 ### ポジション
 
@@ -271,99 +279,43 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ### ボーダー（`bd` 系）
 
-[詳細](https://lism-css.com/docs/property-class/bd/)
+Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理される特殊仕様。`-bd` または `-bd-{side}` を付けると初期値（`solid` / `1px` / `var(--divider)`）がセットされ、`bds` / `bdc` / `bdw` Prop で上書きする。
 
-Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理される特殊な仕様です。  
-`-bd` または `-bd-{side}` クラスを付けると、初期値（`--bds: solid`, `--bdw: 1px`, `--bdc: var(--divider)`）がセットされ、`bds`, `bdc`, `bdw` Prop で個別に上書きできます。
+| Prop | CSS プロパティ / 変数 | 主なクラス |
+|------|-----------------------|------------|
+| `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|x-s\|x-e\|y-s\|y-e\|t\|b\|l\|r}`, `-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` | BP クラス: `-bdw_sm`, `-bdw_md` |
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
-|------|--------------|-------------|-----|
-| `bd` | `border`（変数管理を有効化） | `-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` |
-
-**方向指定:**
-
-| Prop | CSS プロパティ |
-|------|--------------|
-| `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` |
-
-```jsx
-// JSX: ボーダー + カスタマイズ
-<Box bd bdc="brand" bdw="2px" bds="dashed">...</Box>
-
-// HTML
-<div class="l--box -bd -bdc:brand" style="--bdw: 2px; --bds: dashed">...</div>
-
-// 方向指定
-<Box bd-y bdc="divider">...</Box>
-// → <div class="l--box -bd-y -bdc:divider">...</div>
-```
+→ 詳細（方向ごとのスタイル指定、BP での方向切り替え等）は [property-class/bd.md](./property-class/bd.md) 参照
 
 ### ホバー（`hov` 系）
 
-[詳細](https://lism-css.com/docs/property-class/hov/)
-
-ホバーエフェクト用のクラスです。`-hov:{prop}` 系と `-hov:to:*` 系の2種類があります。
-
-**`-hov:{prop}` — ホバー時のプロパティ変更**
+ホバーエフェクト用のクラス群。以下の 3 形式がある。
 
-`:hover` 擬似クラスで直接動作します（`set--hov` は不要）。`@media (any-hover: hover)` 内で定義され、タッチデバイスでは無効になります。
+| 形式 | 役割 | 動作条件 |
+|------|------|---------|
+| `.-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
+| `.-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
+| `.-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
 
-| クラス | 効果 | デフォルト値 |
-|--------|------|-------------|
-| `-hov:c` | テキスト色を変更 | `var(--hov-c, var(--link))` |
-| `-hov:bgc` | 背景色を変更 | `var(--hov-bgc, var(--base-2))` |
-| `-hov:bdc` | ボーダー色を変更 | `var(--hov-bdc, currentColor)` |
-| `-hov:o` | 不透明度を変更 | `var(--hov-o, 0.7)` |
-| `-hov:bxsh` | シャドウを変更 | `var(--hov-bxsh, var(--bxsh--40))` |
-| `-hov:neutral` | ニュートラルグレーを混合 | `color-mix(...)` |
+**標準プリセット:** `.-hov:-c`, `.-hov:-bgc`, `.-hov:-bdc`, `.-hov:-o`, `.-hov:-bxsh`, `.-hov:underline`, `.-hov:neutral`, `.-hov:in:hide`, `.-hov:in:show`, `.-hov:in:zoom`
 
-```jsx
-// JSX: ホバーで色変更（set--hov なしで動作する）
-<Link hov={{ c: true }}>リンク</Link>
-// → <a class="-hov:c" href="...">リンク</a>
-
-// カスタム値を指定
-<Box hov={{ bgc: true }} style={{ '--hov-bgc': 'var(--brand)' }}>...</Box>
-```
+**`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。
 
-**`-hov:to:*` — `set--hov` 連動のトランジションクラス**
-
-`set--hov` がセットする `--_isHov` / `--_notHov` 変数を利用して動作します。`set--hov` と `set--transition` の併用が必要です。
-
-| クラス | 効果 | 仕組み |
-|--------|------|--------|
-| `-hov:to:hide` | ホバー時にフェードアウト | `opacity: var(--_isHov, 0)` |
-| `-hov:to:show` | ホバー時にフェードイン | `opacity: var(--_notHov, 0)` |
-| `-hov:to:zoom` | ホバー時にズーム | `scale: var(--_isHov, 1.1)` |
-
-```jsx
-// set--hov + set--transition が必要
-<Box set="hov transition">
-  <Box hov={{ to: 'show' }}>ホバーで表示</Box>
-</Box>
-```
+→ 詳細は [property-class/hov.md](./property-class/hov.md) 参照
 
 ## その他
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `ovwrap` | `overflow-wrap` | `-ovwrap:anywhere` | — |
-| `whspace` | `white-space` | `-whspace:nowrap` | — |
+| `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
+| `whs` | `white-space` | `-whs:nowrap` | — |
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
-| `isolation` | `isolation` | `-isolation:isolate` | — |
+| `iso` | `isolation` | `-iso:isolate` | — |
+| `wm` | `writing-mode` | `-wm:vertical-rl` | `-wm_sm`, `-wm_md` |
 
 
 ## 値の省略形（例外一覧）
@@ -383,8 +335,22 @@ Property Class の値名は基本的に CSS の実値と同じですが、以下
 
 ### `alwaysVar` タイプ
 
-`fz`, `p`, `px`, `py`, `m`, `mx`, `my`, `g`, `c`, `bgc`, `bdrs`, `bxsh` など。  
-プリセット値クラス（`-p:20`）でも常に CSS 変数（`--p`）経由で値が適用されます。これにより、子要素や疑似要素から `var(--p)` で親の値を参照できます。
+`c`, `bgc`, `p`, `m`, `bdrs` の 5 つ。
+
+例えば`-p`の場合、プリセット値クラス（`-p:20`）でも常に CSS 変数（`--p`）経由で値が適用されます。  
+さらに BP クラスでも `padding:var(--p);--p:var(--p_sm) !important;` の形で出力されるため、`--p` は常に現在適用中の値を指します。
+
+これにより、子要素や疑似要素から `var(--p)` で親の値を参照できます。
+
+**CSS 出力例:**
+
+```css
+.-p, [class*="-p:"] { padding: var(--p) }
+.-p\:20 { --p: var(--s20) }
+@container (min-width: 480px) {
+  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
+}
+```
 
 
 ## Property Class の検索・一括修正