@lism-css/mcp 0.14.0 → 0.15.0

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` | — |
@@ -103,9 +109,11 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `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,89 +279,32 @@ 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) 参照
 
 ## その他
 
@@ -364,6 +315,7 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
 | `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 の検索・一括修正

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

@@ -1,18 +1,27 @@
 # `set--` クラス
 
-`@layer lism-base` に属し、特定の機能を有効にするために CSS変数やベーススタイルをセットアップするクラス群です。
-HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="shadow"` 等）で指定します。
+`@layer lism-base` に属し、HTML 要素の基礎スタイリングまたは CSS 変数のセットアップだけを行うクラス群です。
+HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="var:bxsh"` 等）で指定します。
 
 `set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
 
+set-- は目的別に 2 カテゴリに分かれます。
+
+| カテゴリ | 用途 | クラス |
+|---------|------|--------|
+| 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` |
+
+`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`）。
+
 ## TOC
 
 - [`set--plain`](#set--plain)
-- [`set--shadow`](#set--shadow)
-- [`set--hov`](#set--hov)
-- [`set--transition`](#set--transition)
-- [`set--gutter`](#set--gutter)
-- [`set--innerRs`](#set--innerrs)
+- [`set--revert`](#set--revert)
+- [`set--var:bxsh`](#set--varbxsh)
+- [`set--var:hov`](#set--varhov)
+- [`set--var:bdrsInner`](#set--varbdrsinner)
+
 [詳細](https://lism-css.com/docs/set-class/)
 
 ---
@@ -24,16 +33,16 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 | クラス | ソースファイル |
 |--------|---------------|
 | `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.scss) |
-| `set--shadow` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
-| `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
-| `set--transition` | [`_transition.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_transition.scss) |
-| `set--gutter` | [`_gutter.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_gutter.scss) |
-| `set--innerRs` | [`_innerRs.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_innerRs.scss) |
+| `set--revert` | [`_revert.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_revert.scss) |
+| `set--var:bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
+| `set--var:hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
+| `set--var:bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
+
 ---
 
 ## `set--plain`
 
-`width`, `color`, `font`, `pading`, `border`など、ブラウザデフォルトスタイルを完全にリセットします。  
+`width`, `color`, `font`, `padding`, `border` など、ブラウザデフォルトスタイルを完全にリセットします。
 ボタン・リンク等のスタイリング時に活用します。
 
 使用例:
@@ -44,22 +53,45 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 <Lism as="button" set="plain">...</Lism>
 ```
 
-## `set--shadow`
+## `set--revert`
 
-`SHADOW`トークン変数（`--bxsh--{token}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
+ブラウザデフォルトの見た目を明示的に復活させるためのクラスです。
+これ単体ではスタイルは持ちません（全プロパティをrevertするというようなものではない）。
 
-使用例:
+特定のHTML要素と組み合わせてスタイルを定義して使うものであり、現状は `ul` / `ol` のみ対象です。
 
+Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイルがリセットされます。
+クラスを持ちつつ、箇条書き表示を維持したい場合（Property Class しか持たないリストなど）に `set--revert` を付与します。
+
+
+使用例:
 ```html
-<div class="l--box set--shadow -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+<ul class="-fz:l set--revert">
+  <li>item 1</li>
+  <li>item 2</li>
+</ul>
 ```
 ```jsx
-<Box set="shadow" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
+<Lism as="ul" fz="l" set="revert">
+  <li>item 1</li>
+  <li>item 2</li>
+</Lism>
 ```
 
+## `set--var:bxsh`
+
+`SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
+
+使用例:
+```html
+<div class="l--box set--var:bxsh -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+```
+```jsx
+<Box set="var:bxsh" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
+```
 
 
-## `set--hov`
+## `set--var:hov`
 
 ホバー状態の判定変数（`--_notHov`, `--_isHov`）を次のようにセットします。主に**子要素のホバースタイルを制御する**時に活用します。
 
@@ -86,13 +118,13 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 }
 ```
 
-さらに、親要素に`set--hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
+さらに、親要素に`set--var:hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
 
-例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:to:zoom`クラスが標準で用意されています。
+例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:in:zoom`クラスが標準で用意されています。
 
 ```html
-<a href="###" class="l--frame is--boxLink set--hov -ar:21/9 -ov:hidden">
-  <img class="set--transition -hov:to:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
+<a href="###" class="l--frame set--var:hov is--boxLink -ar:21/9 -ov:hidden">
+  <img class="has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
   <div class="is--layer -bgc" style="--c: #fff; --bgc: rgb(0 0 0 / 50%)"></div>
   <div class="l--center is--layer -c" style="--c: #fff;">
     <span class="-fz:xl">バナーリンク</span>
@@ -101,75 +133,28 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 ```
 
 ```css
-.-hov\:to\:zoom {
-  --transProp: scale;
+.-hov\:in\:zoom {
+  --transitionProps: scale;
   scale: var(--_isHov, 1.1);
 }
 ```
 
 
-## `set--transition`
+## `set--var:bdrsInner`
 
-トランジション用の CSS をセットアップします。
-
-```scss
-.set--transition {
-  transition: var(--hov-duration, 0.25s) var(--hov-ease, linear) var(--hov-delay, 0s);
-  transition-property: var(--hov-prop, all);
-}
-```
-
-| カスタム変数 | デフォルト |
-|-------------|-----------|
-| `--hov-prop` | `all` |
-| `--hov-duration` | `0.25s` |
-| `--hov-ease` | `linear` |
-| `--hov-delay` | `0s` |
-
-```html
-<div class="set--transition -hov:c" style="--hov-prop: color; --hov-c: var(--red);">...</div>
-```
-```jsx
-<Lism set="transition" hov={{c: 'red'}} style={{ '--hov-prop': 'color'}}>...</Lism>
-```
-
-
-
-## `set--gutter`
-
-要素に左右パディングを適用します。`--gutter-size` のデフォルトは `var(--s30)` です。
-
-```scss
-.set--gutter {
-  padding-inline: var(--gutter-size);
-}
-```
-
-```html
-<div class="set--gutter">...</div>
-```
-```jsx
-<Lism set="gutter">...</Lism>
-```
-
-
-## `set--innerRs`
-
-親要素の角丸(`--bdrs`)とPadding(`--p`)の値から、その内側の角丸（`--bdrs--inner`）を自動計算するためのクラスです。  
-親要素に`set--innerRs`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
+親要素の角丸(`--bdrs`)とPadding(`--p`)の値から、その内側の角丸（`--bdrs--inner`）を自動計算するためのクラスです。
+親要素に`set--var:bdrsInner`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
 
 （親要素では`bdrs`と`p`の指定が必須となります。）
 
 使用例:
-```html "set--innerRs" "-bdrs:inner"
-<div class="set--innerRs -p:15 -bdrs:40 -bd">
+```html "set--var:bdrsInner" "-bdrs:inner"
+<div class="set--var:bdrsInner -p:15 -bdrs:40 -bd">
   <div class="-bdrs:inner">...</div>
 </div>
 ```
 ```jsx
-<Lism set="innerRs" p="15" bdrs="40" bd>
+<Lism set="var:bdrsInner" p="15" bdrs="40" bd>
   <Lism bdrs="inner">...</Lism>
 </Lism>
 ```
-
-