@lism-css/mcp 0.20.0 → 0.22.0

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.20.0` / `@lism-css/ui@0.20.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.22.0` / `@lism-css/ui@0.22.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 

package/dist/data/guides/base-styles.md

@@ -49,7 +49,8 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 | `--lts--base` | ベース字間 |
 | `--text` | テキスト色 |
 | `--base` | 背景色 |
-| `--under-offset` | `text-underline-offset`（デフォルト: `0.125em`） |
+
+加えて `text-underline-offset: 0.125em`（リンク下線位置）と `tab-size: 4`（タブ文字の表示幅）が直接指定されている。
 
 ### 見出し（h1〜h6）
 
@@ -75,20 +76,13 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 |------|------------|------|
 | `--list-ps` | `1.75em` | リストの `padding-inline-start` |
 
-### テーブル（table, td, th）
+### テーブル（td, th）
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--td-c` | `inherit` | セルのテキスト色 |
-| `--td-bgc` | `transparent` | セルの背景色 |
-| `--td-p` | `var(--s10) var(--s15)` | セルのパディング |
-| `--td-min-sz` | `initial` | セルの最小幅 |
-| `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
-| `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |
-| `--th-p` | `var(--td-p)` | 見出しセルのパディング |
-| `--th-min-sz` | `var(--td-min-sz)` | 見出しセルの最小幅 |
+| `--cells-p` | `0.625em 0.875em` | セルのパディング |
 
-`th` は `td` の変数をフォールバックとして参照するため、`--td-*` だけで両方に反映される。
+`td` と `th` の両方に `--cells-p` が適用される。色や最小幅などのカスタマイズは必要な要素にスタイルを直接当てる。
 
 ### フォーム要素
 
@@ -96,8 +90,9 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 |------|------------|------|
 | `--controls-bgc` | `var(--base-2)` | 背景色 |
 | `--controls-bdc` | `var(--divider)` | ボーダー色 |
-| `--controls-p` | `var(--s5) var(--s10)` | パディング |
-| `--controls-bdrs` | `var(--bdrs--10)` | 角丸 |
+| `--controls-p` | `0.25em 0.5em` | パディング |
+
+角丸はブラウザのデフォルトに委ねている。テーマで丸めたい場合は各セレクタに `border-radius` を直接指定する。
 
 ### その他
 

package/dist/data/guides/components-core.md

@@ -53,7 +53,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
 | `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
 | `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
-| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="var:hov var:bxsh"`, `set="-plain"` |
+| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="hov bxsh"`, `set="-plain"` |
 | `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
 | `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
 
@@ -79,12 +79,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 // → p, fz は Lism が処理、size は HogeIcon に直接渡される
 
 // set でセットクラスを付与（layout と同じ要領）
-<Box set="var:bxsh" p="30">...</Box>
-// → <div class="l--box set--var:bxsh -p:30">...</div>
+<Box set="bxsh" p="30">...</Box>
+// → <div class="l--box set--bxsh -p:30">...</div>
 
 // set を複数指定（スペース区切り）
-<Stack set="var:bxsh var:hov" p="30">...</Stack>
-// → <div class="l--stack set--var:bxsh set--var:hov -p:30">...</div>
+<Stack set="bxsh hov" p="30">...</Stack>
+// → <div class="l--stack set--bxsh set--hov -p:30">...</div>
 
 // `-` prefix で除外（コンポーネント内部で適用済みの set を打ち消す用途）
 <AccordionButton set="-plain">...</AccordionButton>
@@ -180,7 +180,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | Prop | 出力クラス |
 |------|-----------|
 | `isWrapper` | `is--wrapper` |
-| `isWrapper="{s\|l}"` | `is--wrapper` + `-contentSize:{s\|l}` |
+| `isWrapper="{s\|m\|l\|xl}"` | `is--wrapper` + `-contentSize:{s\|m\|l\|xl}` |
 | `isWrapper="{value}"` | `is--wrapper` + `-contentSize` + `--contentSize:{value}` |
 | `isLayer` | `is--layer` |
 | `isBoxLink` | `is--boxLink` |
@@ -211,7 +211,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 |-------------|-------------|---------|
 | `<Text>` | `<p>` | `p`, `div`, `blockquote`, `address`, `figcaption`, `pre` |
 | `<Heading>` | `<h2>` | `h1`〜`h6`（`level` prop で指定） |
-| `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd` |
+| `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd`, `label` |
 | `<Group>` | `<div>` | `div`, `section`, `article`, `figure`, `nav`, `aside`, `header`, `footer`, `main`, `fieldset`, `hgroup` |
 | `<List>` | `<ul>` | `ul`, `ol`, `dl` |
 | `<Link>` | `<a>`（固定） | — |

package/dist/data/guides/css-rules.md

@@ -43,13 +43,13 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 
 | 分類 | 役割 | プレフィックス | 例 |
 |---|---|---|---|
-| Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
 | Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
 | Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
 | Component Class | BEM 構造を持つ UI 部品 | `c--` | `c--button`, `c--accordion` |
 | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
 | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--cells` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
@@ -83,7 +83,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 | 2 | Component（`c--`） | `c--box`, `c--box--primary` |
 | 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
 | 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
-| 5 | Set Class（`set--`） | `set--var:hov`, `set--var:bxsh` |
+| 5 | Set Class（`set--`） | `set--hov`, `set--bxsh` |
 | 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
 | 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
 | 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |

package/dist/data/guides/naming.md

@@ -70,10 +70,10 @@
 
 | プレフィックス | 責務 | 代表例 |
 |---|---|---|
-| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
 | `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
 | `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--cells` |
+| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--enclose` |
 
 - `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
 - `is--` / `has--` は `lism-trait` 層に属する。

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

@@ -81,10 +81,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 ##### 2. カラム幅が指定値を下回ったら自動で折り返したい
 
 - **推奨**: `l--autoColumns` (`<AutoColumns cols="20rem" />`)
-- **理由**: BP に依存せず、カラム最小幅基準で `auto-fit` / `auto-fill` の挙動を簡潔に書ける
+- **理由**: BP に依存せず、カラム最小幅基準で `auto-fill` / `auto-fit` の挙動を簡潔に書ける
 - **典型例**: カード一覧、商品リスト、ロゴ並び等
 - **代替**:
-  - `l--grid`: `gtc="repeat(auto-fit, minmax(20rem, 1fr))"` を直書きできるが冗長
+  - `l--grid`: `gtc="repeat(auto-fill, minmax(20rem, 1fr))"` を直書きできるが冗長
 
 ##### 3. 「横並び」と「縦 1 列」を一括で切り替えたい（多段階の列数変化が不要）
 

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

@@ -1,6 +1,6 @@
 # l--autoColumns / `<AutoColumns>`
 
-カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
+カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fill` / `auto-fit` を使った流動カラムを簡潔に記述できます。
 
 ## 基本情報
 
@@ -14,7 +14,7 @@
 | Prop | CSS変数 | デフォルト | 説明 |
 |------|--------|-----------|------|
 | `cols` | `--cols` | `20rem` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
-| `autoFill` | `--autoMode` | `auto-fit` | `auto-fill` モードに切り替え |
+| `autoFit` | `--autoMode` | `auto-fill` | `auto-fit` モードに切り替え |
 
 ## Usage
 
@@ -38,27 +38,27 @@
 </div>
 ```
 
-### `auto-fill`を使用する
+### `auto-fit`を使用する
 
-`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
+`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fill`）。`--autoMode:auto-fit`（`autoFit`）を指定することで、要素数が少ない時の挙動が変わります。
 
 ```jsx
-<AutoColumns cols="12em" autoFill g="20" fz="s">
+<AutoColumns cols="12em" g="20" fz="s">
   <Lism as="div" p="20" bd>auto-fill</Lism>
   <Lism as="div" p="20" bd>auto-fill</Lism>
 </AutoColumns>
-<AutoColumns cols="12em" g="20" fz="s">
+<AutoColumns cols="12em" autoFit g="20" fz="s">
   <Lism as="div" p="20" bd>auto-fit</Lism>
   <Lism as="div" p="20" bd>auto-fit</Lism>
 </AutoColumns>
 ```
 
 ```html
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
+<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
   <div class="-p:20 -bd">auto-fill</div>
   <div class="-p:20 -bd">auto-fill</div>
 </div>
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
+<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fit">
   <div class="-p:20 -bd">auto-fit</div>
   <div class="-p:20 -bd">auto-fit</div>
 </div>

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

@@ -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%` | — |
@@ -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/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` | [`_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--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` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.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

@@ -18,7 +18,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [角丸 (bdrs)](#角丸-bdrs)
 - [影 (bxsh)](#影-bxsh)
 - [フロー余白 (flow)](#フロー余白-flow)
-- [ガターサイズ (gutter-size)](#ガターサイズ-gutter-size)
+- [ガター (gutter)](#ガター-gutter)
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
@@ -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>
 ```
 
 
@@ -176,7 +176,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--var:bxsh` クラスを併用する。
+`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
 
 | CSS変数 | 値 |
 |---------|-----|
@@ -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)` を参照）
 
 
 ## カラー

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>
 ```
 
 ## 関連

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

@@ -70,4 +70,4 @@
 ## 関連
 
 - [`-hov:*` プロパティクラス](../property-class.md) — ホバー時の変化を定義
-- [`set--var:hov`](../set-class.md#set--varhov) — 親のホバー状態を子要素に伝播させる仕組み
+- [`set--hov`](../set-class.md#set--hov) — 親のホバー状態を子要素に伝播させる仕組み