@lism-css/mcp 0.20.0 → 0.23.0

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

@@ -1,6 +1,6 @@
 # -hov（ホバー）
 
-hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--var:hov` に連動する系の 2 系統に分かれる。
+hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--hov` に連動する系の 2 系統に分かれる。
 
 ## 基本情報
 
@@ -15,10 +15,10 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 |------|------|
 | `-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
 | `-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
-| `-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
+| `-hov:in:{preset}` | 親要素の `set--hov` を起点に、子要素のスタイルを変化させる |
 
 `-hov:-{prop}` と `-hov:{preset}` は `@media (any-hover: hover)` 内で定義されるため、タッチデバイスでは無効。  
-`-hov:in:*` はメディアクエリ外で、親の `set--var:hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
+`-hov:in:*` はメディアクエリ外で、親の `set--hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
 
 トランジションを付けたい場合は [`has--transition`](../trait-class/has--transition.md) クラスを併用する。
 
@@ -70,7 +70,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 
 ## `-hov:in:{preset}` — 親連動
 
-親要素に `set--var:hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
+親要素に `set--hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
 
 | クラス | 効果 | 仕組み |
 |--------|------|--------|
@@ -79,7 +79,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 | `-hov:in:zoom` | 親 hover 時にズーム | `scale: var(--_isHov, 1.1)` |
 
 ```jsx
-<Frame set="var:hov" isBoxLink href="#" ar="16/9">
+<Frame set="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>
@@ -139,5 +139,5 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 ## 関連
 
 - [`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` と組み合わせる場合の影色再計算
+- [`set--hov`](../set-class.md#set--hov) — 親の hover 状態を子要素に伝播させる仕組み
+- [`set--bxsh`](../set-class.md) — `-hov:-bxsh` と組み合わせる場合の影色再計算

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

@@ -33,8 +33,8 @@
 
   :where(.has--gutter) > & {
     inline-size: auto;
-    max-inline-size: calc(100% + var(--gutter-size) * 2);
-    margin-inline: calc(var(--gutter-size) * -1);
+    max-inline-size: calc(100% + var(--gutter) * 2);
+    margin-inline: calc(var(--gutter) * -1);
   }
 }
 ```

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

@@ -65,7 +65,7 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
 | **CSS プロパティ** | 実際に制御される CSS プロパティ |
 | **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
-| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`、`✔ lg` は `lg` まで対応、`—` は非対応 |
+| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`・`lg` に対応、`—` は非対応 |
 
 
 ## 全 Prop 一覧
@@ -77,24 +77,24 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `f` | `font` | `-f:inherit` | — |
-| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
+| `fz` | `font-size` | `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
 | `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` | — |
-| `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
-| `hl` | `--hl` 変数のみ | — | — |
+| `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` | — |
 | `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` | — |
 
-**注意:** `lh` は `--hl`（half-leading）変数を介して `line-height: calc(1em + var(--hl) * 2)` を制御します。`hl` は `--hl` 変数を直接セットするだけの isVar タイプです。
+**注意:** 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` を推奨します。
 
 ### 表示・可視性
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ lg |
+| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ |
 | `o` | `opacity` | `-o:0`, `-o:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
@@ -118,6 +118,7 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | `bsz` | `block-size` | — | — |
 | `min-bsz` | `min-block-size` | — | — |
 | `max-bsz` | `max-block-size` | — | — |
+| `contentSize` | `--contentSize` 変数のみ | `-contentSize:s`, `-contentSize:m`, `-contentSize:l`, `-contentSize:xl` | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
@@ -125,6 +126,10 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
 
+**`contentSize` について:**
+`--contentSize` 変数をセットする isVar タイプの Prop です。`is--wrapper` と組み合わせるとコンテンツ幅の上限となり、`set--bleed` と組み合わせると `--bleed` の計算基準値として使われます。
+プリセット値（`s`, `m`, `l`, `xl`）は `-contentSize:{value}` クラスを出力し、それ以外の任意値は `--contentSize: {value}` をスタイル属性として出力します。
+
 ### 背景
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
@@ -167,13 +172,13 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 |------|--------------|-------------|-----|
 | `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | ✔ |
 
-**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--var:bxsh` クラスを併用する。
+**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--bxsh` クラスを併用する。
 
 ### ポジション
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | — |
+| `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | ✔ |
 | `z` | `z-index` | `-z:-1`, `-z:0`, `-z:1`, `-z:99` | — |
 | `t` | `top` | `-t:0`, `-t:50%`, `-t:100%` | — |
 | `l` | `left` | `-l:0`, `-l:50%`, `-l:100%` | — |
@@ -225,7 +230,7 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ lg |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ |
 | `cg` | `column-gap` | — | — |
 | `rg` | `row-gap` | — | — |
 
@@ -246,22 +251,22 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `gt` | `grid-template` | — | ✔ |
-| `gta` | `grid-template-areas` | — | ✔ lg |
-| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ lg |
-| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ lg |
+| `gta` | `grid-template-areas` | — | ✔ |
+| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ |
+| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ |
 | `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | ✔ |
 | `gac` | `grid-auto-columns` | — | — |
 | `gar` | `grid-auto-rows` | — | — |
-| `cols` | `--cols` 変数 | — | ✔ lg |
+| `cols` | `--cols` 変数 | — | ✔ |
 | `rows` | `--rows` 変数 | — | ✔ |
 
 ### Grid アイテム
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ga` | `grid-area` | `-ga:1/1` | ✔ lg |
-| `gc` | `grid-column` | `-gc:1/-1` | ✔ lg |
-| `gr` | `grid-row` | `-gr:1/-1` | ✔ lg |
+| `ga` | `grid-area` | `-ga:1/1` | ✔ |
+| `gc` | `grid-column` | `-gc:1/-1` | ✔ |
+| `gr` | `grid-row` | `-gr:1/-1` | ✔ |
 | `gcs` | `grid-column-start` | — | — |
 | `gce` | `grid-column-end` | — | — |
 | `grs` | `grid-row-start` | — | — |
@@ -280,7 +285,7 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 | `aslf` | `align-self` | `-aslf:start`, `-aslf:center`, `-aslf:end`, `-aslf:stretch` | — |
 | `jslf` | `justify-self` | `-jslf:start`, `-jslf:center`, `-jslf:end`, `-jslf:stretch` | — |
 | `pslf` | `place-self` | `-pslf:start`, `-pslf:center`, `-pslf:end` | — |
-| `order` | `order` | `-order:0`, `-order:-1`, `-order:1` | — |
+| `order` | `order` | `-order:0`, `-order:-1`, `-order:1` | ✔ |
 
 **コンポーネント用ショートハンド:** `ai`, `ac`, `ji`, `jc`, `aslf`, `jslf` では `s`→`start`, `e`→`end`, `c`→`center`, `fs`→`flex-start`, `fe`→`flex-end` のショートハンドが使えます。
 
@@ -309,7 +314,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 |------|------|---------|
 | `-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
-| `-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
+| `-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`
 

package/dist/data/guides/responsive.md

@@ -19,16 +19,35 @@ Lism CSS は**コンテナクエリ**をデフォルトで採用しています
 ```
 Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
              │                       │                        │
-          sm:480px                md:800px               (lg:1120px)
+          sm:480px                md:800px               lg:1120px
 ```
 
 | BP | 値 | 効くタイミング |
 |----|-----|----------------|
+| `xs` | 0（無効） | （opt-in） |
 | `sm` | 480px | sm 以上 |
 | `md` | 800px | md 以上 |
-| (`lg`) | 1120px | lg 以上 |
+| `lg` | 1120px | lg 以上 |
+| `xl` | 0（無効） | （opt-in） |
 
-**レスポンシブ対応の Property Class は、基本的に標準では `sm` / `md` まで対応。** ただし `d`（display）/ `g`（gap）/ `cols` / グリッド系（`gta` `gtc` `gtr` `ga` `gc` `gr`）など、大枠のレイアウト構造に関わる一部のプロパティは `lg` まで対応。それ以外のプロパティで `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+**レスポンシブ対応の Property Class は、標準で `sm` / `md` / `lg` のすべてに対応。** どの Prop がレスポンシブ対応かは property-class.md の BP 列を参照。レスポンシブ非対応の Prop でブレイクポイント指定を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+
+**`xs` / `xl` は opt-in**:
+- デフォルト値は `0`（無効）で、CSS は出力されません。`lism.config.js` の `breakpoints` でサイズを与えると有効化されます（customize.md 参照）。
+- 型（Lism コンポーネント）でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`xs` / `xl` を使う場合は `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
+
+  ```ts
+  // src/lism.d.ts など
+  import 'lism-css';
+  declare module 'lism-css' {
+    interface BreakpointRegistry {
+      xl: true; // 配列の 5 要素目 [..., xl] と { xl: ... } を解禁
+      xs: true; // { xs: ... } を解禁（xs は配列記法では書けない）
+    }
+  }
+  ```
+
+- `xs` は配列記法では書けません（配列のインデックス → BP の対応が `[base, sm, md, lg, xl]` で固定のため）。オブジェクト記法（`{ xs: ... }`）でのみ指定します。`xl` は配列記法・オブジェクト記法の両方で利用できます。
 
 例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
 
@@ -99,10 +118,10 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 配列形式またはオブジェクト形式でレスポンシブ値を指定します。
 
 ```jsx
-// 配列形式: [デフォルト, sm, md]
+// 配列形式: 位置は [base, sm, md, lg, xl] で固定（xs は配列記法では書けない）
 <Box p={[20, 30, 40]} fz={['s', 'm', 'l']} />
 
-// オブジェクト形式
+// オブジェクト形式（xs を使う場合はこちら）
 <Box p={{ base: '20', sm: '30', md: '40' }} />
 ```
 

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

@@ -1,7 +1,7 @@
 # `set--` クラス
 
 `@layer lism-base` に属し、HTML 要素の基礎スタイリングまたは CSS 変数のセットアップだけを行うクラス群です。
-HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="var:bxsh"` 等）で指定します。
+HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="bxsh"` 等）で指定します。
 
 `set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
 
@@ -10,18 +10,19 @@ set-- は目的別に 2 カテゴリに分かれます。
 | カテゴリ | 用途 | クラス |
 |---------|------|--------|
 | 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
-| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` / `set--var:s` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--bxsh` / `set--hov` / `set--bdrsInner` / `set--bleed` / `set--s` |
 
-`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`、`--s*` → `var:s`）。
+`set--{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `bxsh`、`--_isHov` / `--_notHov` → `hov`、`--bdrs--inner` → `bdrsInner`、`--s*` → `s`）。
 
 ## TOC
 
 - [`set--plain`](#set--plain)
 - [`set--revert`](#set--revert)
-- [`set--var:bxsh`](#set--varbxsh)
-- [`set--var:hov`](#set--varhov)
-- [`set--var:bdrsInner`](#set--varbdrsinner)
-- [`set--var:s`](#set--vars)
+- [`set--bxsh`](#set--bxsh)
+- [`set--hov`](#set--hov)
+- [`set--bdrsInner`](#set--bdrsinner)
+- [`set--bleed`](#set--bleed)
+- [`set--s`](#set--s)
 
 [詳細](https://lism-css.com/docs/set-class.md)
 
@@ -35,10 +36,11 @@ set-- は目的別に 2 カテゴリに分かれます。
 |--------|---------------|
 | `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.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--var:s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
+| `set--bxsh` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
+| `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
+| `set--bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
+| `set--bleed` | [`_bleed.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bleed.scss) |
+| `set--s` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
 
 ---
 
@@ -80,24 +82,24 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 </Lism>
 ```
 
-## `set--var:bxsh`
+## `set--bxsh`
 
 `SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
 
 使用例:
 ```html
-<div class="l--box set--var:bxsh -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+<div class="l--box set--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>
+<Box set="bxsh" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
 ```
 
 
-## `set--var:hov`
+## `set--hov`
 
 ホバー状態の判定変数（`--_notHov`, `--_isHov`）を次のようにセットします。主に**子要素のホバースタイルを制御する**時に活用します。
 
-- `--_isHov`は非hover時（かつ非focus-within時）にのみ空白定義さます。
+- `--_isHov`は非hover時(かつ非focus-within時)にのみ空白定義さます。
 - `--_notHov`は逆に、hover時またはfocus-within時に空白定義されます。
 
 この空変数トリックにより、次のような書き方ができます。
@@ -120,12 +122,12 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 }
 ```
 
-さらに、親要素に`set--var:hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
+さらに、親要素に`set--hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
 
 例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:in:zoom`クラスが標準で用意されています。
 
 ```html
-<a href="###" class="l--frame set--var:hov is--boxLink -ar:21/9 -ov:hidden">
+<a href="###" class="l--frame set--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;">
@@ -142,38 +144,73 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 ```
 
 
-## `set--var:bdrsInner`
+## `set--bdrsInner`
 
 親要素の角丸(`--bdrs`)とPadding(`--p`)の値から、その内側の角丸（`--bdrs--inner`）を自動計算するためのクラスです。
-親要素に`set--var:bdrsInner`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
+親要素に`set--bdrsInner`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
 
 （親要素では`bdrs`と`p`の指定が必須となります。）
 
 使用例:
-```html "set--var:bdrsInner" "-bdrs:inner"
-<div class="set--var:bdrsInner -p:15 -bdrs:40 -bd">
+```html "set--bdrsInner" "-bdrs:inner"
+<div class="set--bdrsInner -p:15 -bdrs:40 -bd">
   <div class="-bdrs:inner">...</div>
 </div>
 ```
 ```jsx
-<Lism set="var:bdrsInner" p="15" bdrs="40" bd>
+<Lism set="bdrsInner" p="15" bdrs="40" bd>
   <Lism bdrs="inner">...</Lism>
 </Lism>
 ```
 
 
-## `set--var:s`
+## `set--bleed`
+
+片側ブリードレイアウトを組むのに便利な `--bleed` 変数を生成するクラスです。コンテンツ幅（`--contentSize`）の外側の余白量がセットされます。ただし、ガター幅（`--gutter` / `--gutter--base`）を下限とし、これより狭くなる場合はガター幅を返します。
+
+`--contentSize` が未指定の場合は `--sz--m` を基準値として使用します。
+
+`padding-inline: var(--bleed)` を子要素に当てれば、その要素だけコンテンツ幅の外側ガターまで広げられるため、画像とテキストを並べた片側ブリードの 2 カラムなどに活用できます。
+
+使用例（`Columns` の片側だけブリードさせる）:
+```html
+<div class="is--container">
+  <div class="l--columns set--bleed -contentSize:s -cols_sm -g:0 -g_sm -ai:center" style="--cols:1;--cols_sm:2;--g_sm:var(--s10)">
+    <div class="l--box has--gutter -ps -py:30 -py_sm" style="--ps:var(--bleed);--py_sm:0">
+      <p>...</p>
+    </div>
+    <div class="l--frame -bdrs:inner -ar:3/2">
+      <img src="..." alt="" />
+    </div>
+  </div>
+</div>
+```
+```jsx
+<Container>
+  <Columns set="bleed" contentSize="s" cols={[1, 2]} g={['0', '10']} ai="center">
+    <Box hasGutter ps="var(--bleed)" py={["30", "0"]}>
+      <p>...</p>
+    </Box>
+    <Frame bdrs="inner" ar="3/2">
+      <img src="..." alt="" />
+    </Frame>
+  </Columns>
+</Container>
+```
+
+
+## `set--s`
 
 余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
 
-詳細なスケールと使い方は[tokens.mdの`set--var:s`ユーティリティ](./tokens.md#set--vars-ユーティリティ)を参照してください。
+詳細なスケールと使い方は[tokens.mdの`set--s`ユーティリティ](./tokens.md#set--s-ユーティリティ)を参照してください。
 
 使用例:
 
 ```html
-<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+<button class="set--s -fz:s -py:10 -px:20">...</button>
 ```
 
 ```jsx
-<Button set="var:s" fz="s" py="10" px="20">...</Button>
+<Button set="s" fz="s" py="10" px="20">...</Button>
 ```

package/dist/data/guides/tokens.md

@@ -10,7 +10,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [トークン概要テーブル](#トークン概要テーブル)
 - [余白 (space)](#余白-space)
 - [フォントサイズ (fz)](#フォントサイズ-fz)
-- [行間 (lh/hl)](#行間-lhhl)
+- [行間 (hl/lh)](#行間-hllh)
 - [字間 (lts)](#字間-lts)
 - [フォント (ff)](#フォント-ff)
 - [ウェイト (fw)](#ウェイト-fw)
@@ -18,7 +18,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [角丸 (bdrs)](#角丸-bdrs)
 - [影 (bxsh)](#影-bxsh)
 - [フロー余白 (flow)](#フロー余白-flow)
-- [ガターサイズ (gutter-size)](#ガターサイズ-gutter-size)
+- [ガター (gutter)](#ガター-gutter)
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
@@ -31,18 +31,18 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
 | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
-| フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
-| ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
+| フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
+| ハーフレディング・行間 (hl/lh) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
 | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (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`, `50` | `--bxsh--{N}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `bleed` | `--sz--{key}` | `--sz--l` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `base`, `s` | `--flow--{key}` | `--flow--base` |
-| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
+| セマンティックカラー (color) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
 
 
@@ -70,19 +70,19 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 `--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
 
-### `set--var:s` ユーティリティ
+### `set--s` ユーティリティ
 
-`set--var:s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+`set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
 
 ```html
 <!-- ボタンの padding が button 自身の font-size に追従する -->
-<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+<button class="set--s -fz:s -py:10 -px:20">...</button>
 ```
 
 `--s-unit` を任意値で上書きすれば、別の基準にも切り替えられる。
 
 ```html
-<button class="set--var:s -p:10" style="--s-unit: .4375em">...</button>
+<button class="set--s -p:10" style="--s-unit: .4375em">...</button>
 ```
 
 
@@ -103,12 +103,11 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--fz--xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))` | XS（mol/(mol+2)） |
 | `--fz--2xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))` | 最小（mol/(mol+3)） |
 | `--fz--base` | `1rem` | 本文の基本フォントサイズ |
-| `--fz--root` | — | `:root` のフォントサイズ |
 
 `--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
 
 
-## 行間 (lh/hl)
+## 行間 (hl/lh)
 
 ハーフレディングの大きさ。Lism CSSでは、`line-height` は `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`（≒ 2px）を基準単位とする。
 
@@ -134,8 +133,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 |
 |---------|-----|
-| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'` |
-| `--ff--accent` | `'Garamond', 'Baskerville', 'Times New Roman', serif` |
+| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif` |
+| `--ff--accent` | `Georgia, serif` |
 | `--ff--mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
 
 
@@ -176,7 +175,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--var:bxsh` クラスを併用する。
+`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
 
 | CSS変数 | 値 |
 |---------|-----|
@@ -188,7 +187,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 初期値 |
 |---------|-----|
-| `--shc` | `hsl(220 4% 8% / 15%)` |
+| `--shadow` | `hsl(220 4% 8% / 12%)` |
+| `--shc` | `var(--shadow)` |
 | `--shsz--10` | `0px 1px 3px` |
 | `--shsz--20` | `0px 2px 6px` |
 | `--shsz--30` | `0px 4px 12px` |
@@ -206,19 +206,20 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--flow--s` | `var(--s20)` | `-flow:s` で適用される小さめの余白 |
 
 
-## ガターサイズ (gutter-size)
+## ガター (gutter)
 
-サイト全体のガター（左右余白）量を定義するルート変数。トークン体系ではなく単一の設定値で、上書きするとガター関連の挙動が一括で変わる。
+サイト全体のガター（左右余白）量を扱う変数群。`--flow--base` / `--flow` と同じく「基準値（`:root`）+ 要素ローカル機能変数」の2層構造を採る。
 
-| CSS変数 | 値 | 説明 |
-|---------|-----|------|
-| `--gutter-size` | `var(--s30)` | ガターの基準量 |
+| CSS変数 | 初期値 | 説明 |
+|---------|--------|------|
+| `--gutter--base` | `var(--s30)` | サイトコンテンツの左右余白の基準値（`:root` で定義） |
+| `--gutter` | `var(--gutter--base)` | `.has--gutter` で要素ローカルに初期化される機能変数。要素単位で `style="--gutter: 20px"` のように上書き可能 |
 
 参照される主な箇所:
 
-- `has--gutter` の `padding-inline`
-- `is--container` の `--sz--bleed` 計算（`100cqi + var(--gutter-size) * 2`）
-- `-max-sz:full` の負 margin による hang 拡張
+- `has--gutter` の `padding-inline: var(--gutter)`
+- `is--container` の `--sz--bleed` 計算（`100cqi + var(--gutter) * 2`）
+- `-max-sz:full` の負 margin による hang 拡張（`var(--gutter)` を参照）
 
 
 ## カラー
@@ -229,11 +230,11 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | デフォルト値 | 説明 |
 |---------|------------|------|
-| `--base` | `hsl(224 4% 99%)` | ベース背景色 |
-| `--base-2` | `hsl(224 8% 95%)` | 代替背景色 |
-| `--text` | `hsl(224 4% 8%)` | 基本テキスト色 |
-| `--text-2` | `hsl(224 6% 32%)` | 補助テキスト色 |
-| `--divider` | `hsl(224 8% 88%)` | 区切り線色 |
+| `--base` | `hsl(220 0% 99%)` | ベース背景色 |
+| `--base-2` | `hsl(220 4% 95%)` | 代替背景色 |
+| `--text` | `hsl(220 0% 8%)` | 基本テキスト色 |
+| `--text-2` | `hsl(220 4% 32%)` | 補助テキスト色 |
+| `--divider` | `hsl(220 4% 88%)` | 区切り線色 |
 | `--link` | `oklch(50% 0.3 240)` | リンク色 |
 | `--brand` | `#1e5f8c` | ブランド色 |
 | `--accent` | `#d94a6a` | アクセント色 |
@@ -248,7 +249,7 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 | `--red` | `oklch(var(--L) var(--C) 20)` |
 | `--orange` | `oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48)` |
 | `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80)` |
-| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152)` |
+| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)` |
 | `--blue` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264)` |
 | `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288)` |
 | `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352)` |

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

@@ -13,19 +13,25 @@
 
 ```scss
 .has--gutter {
-  padding-inline: var(--gutter-size);
+  --gutter: var(--gutter--base);
+  padding-inline: var(--gutter);
 }
 ```
 
-`--gutter-size` はトークン (`:root`) で `var(--s30)` がデフォルト定義されている。
+ガター変数は `--flow--base` / `--flow` と同じ「基準値 + 要素ローカル機能変数」の2層構造を採る。
+
+- `--gutter--base`: `:root` で `var(--s30)` をデフォルトに持つサイト全体の基準値
+- `--gutter`: `.has--gutter` で `var(--gutter--base)` に初期化される要素ローカルの機能変数
 
 ## CSS 変数
 
 | 変数 | 役割 | デフォルト |
 |------|------|-----------|
-| `--gutter-size` | 左右の padding 量 | `var(--s30)` |
+| `--gutter--base` | サイト全体のガター基準値（`:root` 定義） | `var(--s30)` |
+| `--gutter` | `.has--gutter` 要素ローカルの機能変数 | `var(--gutter--base)` |
 
-個別要素で `--gutter-size` を上書きすれば、その要素のみ gutter 量を変更できる。
+- サイト全体の基準を変えたい場合は `:root` 等で `--gutter--base` を上書きする
+- 個別要素のみガター量を変えたい場合は、その要素で `style="--gutter: 20px"` のように `--gutter` を直接上書きする
 
 ## Usage
 
@@ -34,12 +40,22 @@
   <p>Lorem ipsum content...</p>
   <p>Lorem ipsum content...</p>
 </div>
+
+<!-- 個別要素でガター量を上書きする例 -->
+<div class="has--gutter" style="--gutter: 20px">
+  <p>Lorem ipsum content...</p>
+</div>
 ```
 ```jsx
 <Lism hasGutter>
   <p>Lorem ipsum content...</p>
   <p>Lorem ipsum content...</p>
 </Lism>
+
+{/* 個別要素でガター量を上書きする例 */}
+<Lism hasGutter style={{ '--gutter': '20px' }}>
+  <p>Lorem ipsum content...</p>
+</Lism>
 ```
 
 ## 関連