@lism-css/mcp 0.14.0 → 0.15.1

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.md
+
+## トークン対応クラス
+
+コンテンツサイズ用のトークン `--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

@@ -16,7 +16,13 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 - [Property Class の特殊な出力タイプ](#property-class-の特殊な出力タイプ)
 - [Property Class の検索・一括修正](#property-class-の検索一括修正)
 
-[詳細](https://lism-css.com/docs/property-class/)
+[詳細](https://lism-css.com/docs/property-class.md)
+
+個別ドキュメント:
+
+- [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,8 +83,8 @@ 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` |
-| `o` | `opacity` | `-o:0`, `-o:-10`, `-o:-20`, `-o:-30` | — |
+| `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:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
 | `ov-x` | `overflow-x` | `-ov-x:clip`, `-ov-x:auto`, `-ov-x:scroll` | — |
@@ -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` クラスを併用する。
 
 ### ポジション
 
@@ -267,93 +275,36 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ## 特殊な Property Class
 
-以下は通常の `.-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
+以下は通常の `-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
 
 ### ボーダー（`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,19 +1,28 @@
 # `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)
-[詳細](https://lism-css.com/docs/set-class/)
+- [`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.md)
 
 ---
 
@@ -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`）を次のようにセットします。主に**子要素のホバースタイルを制御する**時に活用します。
 
@@ -82,17 +114,17 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 .-hov\:test {
   color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
   box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
-  opacity: var(--_notHov, var(--o---20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
+  opacity: var(--_notHov, var(--o--pp)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
 }
 ```
 
-さらに、親要素に`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>
 ```
-
-

package/dist/data/guides/tokens.md

@@ -20,7 +20,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
-[詳細](https://lism-css.com/docs/tokens/)
+[詳細](https://lism-css.com/docs/tokens.md)
 
 ---
 
@@ -34,9 +34,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | 字間 (lts) | `base`, `s`, `l` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
-| 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
+| 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
-| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{N}` | `--bxsh--20` |
+| 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
 | サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `container` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
@@ -132,11 +132,14 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 透明度 (o)
 
+音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用。`p`（piano / 弱く）の反復回数が多いほど透明度が増す。Lism 内で「文字の反復回数で段階を表す」命名は opacity のみの例外。
+
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
-| `--o---10` | `0.75` | 75%の不透明度 |
-| `--o---20` | `0.5` | 50%の不透明度 |
-| `--o---30` | `0.25` | 25%の不透明度 |
+| `--o--mp` | `0.9` | mezzo-piano: ごく軽い減衰 |
+| `--o--p` | `0.75` | piano: hover fade, 補助テキスト等 |
+| `--o--pp` | `0.5` | pianissimo: disabled, divider, decorator 等 |
+| `--o--ppp` | `0.25` | pianississimo: 最も強く減衰 |
 
 
 ## 角丸 (bdrs)
@@ -153,14 +156,24 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{N}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
+`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--var:bxsh` クラスを併用する。
 
-| CSS変数 | 値 | 説明 |
-|---------|-----|------|
-| `--bxsh--10` | `var(--sh--5), var(--sh--10)` | step 10 |
-| `--bxsh--20` | `var(--sh--10), var(--sh--20)` | step 20 |
-| `--bxsh--30` | `var(--sh--20), var(--sh--30)` | step 30 |
-| `--bxsh--40` | `var(--sh--30), var(--sh--40)` | step 40（最も濃い） |
+| CSS変数 | 値 |
+|---------|-----|
+| `--bxsh--10` | `var(--shsz--10) var(--shc)` |
+| `--bxsh--20` | `var(--shsz--20) var(--shc)` |
+| `--bxsh--30` | `var(--shsz--30) var(--shc)` |
+| `--bxsh--40` | `var(--shsz--40) var(--shc)` |
+| `--bxsh--50` | `var(--shsz--50) var(--shc)` |
+
+| CSS変数 | 初期値 |
+|---------|-----|
+| `--shc` | `hsl(220 4% 8% / 15%)` |
+| `--shsz--10` | `0px 1px 3px` |
+| `--shsz--20` | `0px 2px 6px` |
+| `--shsz--30` | `0px 4px 12px` |
+| `--shsz--40` | `0px 8px 24px` |
+| `--shsz--50` | `0px 16px 48px` |
 
 
 ## カラー

package/dist/data/guides/trait-class/has--gutter.md

@@ -0,0 +1,48 @@
+# has--gutter
+
+要素の左右に、サイト共通の gutter（余白）を適用する Trait クラス。`padding` 系ユーティリティとは別に、「サイト全体で統一した左右余白」を確保したい時に使う。
+
+## 基本情報
+
+- クラス名: `has--gutter`
+- Lism props: `hasGutter`（`<Lism hasGutter>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_gutter.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--gutter
+
+## SCSS 定義
+
+```scss
+.has--gutter {
+  padding-inline: var(--gutter-size);
+}
+```
+
+`--gutter-size` はトークン (`:root`) で `var(--s30)` がデフォルト定義されている。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--gutter-size` | 左右の padding 量 | `var(--s30)` |
+
+個別要素で `--gutter-size` を上書きすれば、その要素のみ gutter 量を変更できる。
+
+## Usage
+
+```html
+<div class="has--gutter">
+  <p>Lorem ipsum content...</p>
+  <p>Lorem ipsum content...</p>
+</div>
+```
+```jsx
+<Lism hasGutter>
+  <p>Lorem ipsum content...</p>
+  <p>Lorem ipsum content...</p>
+</Lism>
+```
+
+## 関連
+
+- `-px:*` プロパティクラス — その要素ごとに任意の左右 padding を付けたい場合はこちら
+- `is--wrapper` — コンテンツ幅制御。gutter と組み合わせてセクションラッパーを構成することが多い