@lism-css/mcp 0.15.0 → 0.17.0

package/dist/data/guides/primitives/{l--switchCols.md → l--switchColumns.md}

@@ -1,34 +1,34 @@
-# l--switchCols / `<SwitchCols>`
+# l--switchColumns / `<SwitchColumns>`
 
 複数列 ↔ 1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラス。Flexbox ベースで、親コンテナ幅に応じて自動的に折り返します。
 
 ## 基本情報
 
-- クラス名: `l--switchCols`
-- コンポーネント: `<SwitchCols>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchCols.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--switchCols/
+- クラス名: `l--switchColumns`
+- コンポーネント: `<SwitchColumns>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchColumns.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--switchColumns.md
 
 ## 専用Props
 
-| Prop | CSS変数 | 説明 |
-|------|--------|------|
-| `breakSize` | `--breakSize` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
+| Prop | CSS変数 | デフォルト | 説明 |
+|------|--------|-----------|------|
+| `breakSize` | `--breakSize` | `var(--sz--xs)` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
 
 ## Usage
 
 ### デフォルト幅で利用する
 
 ```jsx
-<SwitchCols g="20">
+<SwitchColumns g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20">
+<div class="l--switchColumns -g:20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
@@ -38,14 +38,14 @@
 ### `breakSize` の指定
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ```html
-<div class="l--switchCols -g:20" style="--breakSize: var(--sz--s)">
+<div class="l--switchColumns -g:20" style="--breakSize: var(--sz--s)">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20">Box</div>
 </div>
@@ -56,14 +56,14 @@
 子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
 
 ```jsx
-<SwitchCols breakSize="s" g="20">
+<SwitchColumns breakSize="s" g="20">
   <div class="-bgc:base-2 -p:20">Box</div>
   <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>Box</div>
-</SwitchCols>
+</SwitchColumns>
 ```
 
 ## 関連プリミティブ
 
-- [l--fluidCols](./l--fluidCols.md) — 最小幅ベースの自動段組
+- [l--autoColumns](./l--autoColumns.md) — 最小幅ベースの自動段組
 - [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
-- [l--sideMain](./l--sideMain.md) — コンテンツ幅基準の2カラム切り替え
+- [l--withSide](./l--withSide.md) — コンテンツ幅基準の2カラム切り替え

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

@@ -7,7 +7,7 @@
 - クラス名: `l--tileGrid`
 - コンポーネント: `<TileGrid>`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_tileGrid.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--tileGrid/
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--tileGrid.md
 
 ## 専用Props
 
@@ -57,5 +57,5 @@
 ## 関連プリミティブ
 
 - [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム
-- [l--fluidCols](./l--fluidCols.md) — 自動折り返し型段組
+- [l--autoColumns](./l--autoColumns.md) — 自動折り返し型段組
 - [l--grid](./l--grid.md) — 汎用 CSS Grid

package/dist/data/guides/primitives/{l--sideMain.md → l--withSide.md}

@@ -1,13 +1,13 @@
-# l--sideMain / `<SideMain>`
+# l--withSide / `<WithSide>`
 
 メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる2カラムレイアウト**。「画像 + コンテンツ」「メインエリア + サイドバー」などに活用できる。
 
 ## 基本情報
 
-- クラス名: `l--sideMain`
-- コンポーネント: `<SideMain>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_sideMain.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--sideMain/
+- クラス名: `l--withSide`
+- コンポーネント: `<WithSide>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_withSide.scss
+- 公式ドキュメント: https://lism-css.com/docs/primitives/l--withSide.md
 
 ## 動作の仕組み
 
@@ -17,15 +17,15 @@
 
 ## 専用Props
 
-| Prop | 出力 | 説明 |
-|------|------|------|
-| `sideW` | `--sideW` | サイド要素の横幅 |
-| `mainW` | `--mainW` | メイン要素で維持したい最小幅 |
+| Prop | 出力 | デフォルト | 説明 |
+|------|------|-----------|------|
+| `sideW` | `--sideW` | `auto` | サイド要素の横幅 |
+| `mainW` | `--mainW` | `max(20rem, 50%)` | メイン要素で維持したい最小幅 |
 
 ## HTML構造
 
 ```html
-<div class="l--sideMain">
+<div class="l--withSide">
   <div>Main Content</div>
   <div class="is--side">Side Content</div>
 </div>
@@ -36,7 +36,7 @@
 ### 基本的な使い方
 
 ```jsx
-<SideMain sideW="12rem" mainW="20rem" g="20">
+<WithSide sideW="12rem" mainW="20rem" g="20">
   <Box p="15" bd bdc="blue">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -44,11 +44,11 @@
   <Box isSide p="15" bd bdc="red">
     <p>Side Content</p>
   </Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -g:20" style="--sideW:12rem;--mainW:20rem">
+<div class="l--withSide -g:20" style="--sideW:12rem;--mainW:20rem">
   <div class="l--box -p:15 -bd" style="--bdc:var(--blue)">
     <p>Main Content</p>
     <p>メインコンテンツ本文...</p>
@@ -64,16 +64,16 @@
 `flex-direction: row-reverse` を併用することで、横並びの時だけ順序を反転できます。**横並びで左側・縦並びで下側に Side を配置**したいときに便利。
 
 ```jsx
-<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
+<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
   <Box>
     <p>Main content...</p>
   </Box>
   <Box isSide bgc="blue:20%">Side Content</Box>
-</SideMain>
+</WithSide>
 ```
 
 ```html
-<div class="l--sideMain -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
+<div class="l--withSide -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
   <div class="l--box">
     <p>Main content...</p>
   </div>
@@ -81,9 +81,31 @@
 </div>
 ```
 
+### メディアとテキストが交互に並ぶレイアウト
+
+`l--withSide` は「メディア + テキスト」のペアを複数並べて、横並びの時はメディアの位置（左右）が交互に切り替わりつつも、縦並びの時はメディアが上側に統一されるレイアウトにも活用できる。
+
+```jsx
+<Stack isContainer g="40">
+  <WithSide sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+
+  <WithSide fxd="row-reverse" sideW="40%" g="30" ai="center">
+    <Frame ar="3/2" isSide max-h="50cqw">
+      <img src="..." alt="" width="960" height="640" />
+    </Frame>
+    <Box px="10">本文テキスト...</Box>
+  </WithSide>
+</Stack>
+```
+
 ## `l--grid` との使い分け
 
-- **`l--sideMain`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
+- **`l--withSide`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
 - **`l--grid`** (`<Grid gta={[...]} gtc={[...]} />`): ブレイクポイント（`sm`/`md`）で明示的に切り替えたい場合
 
 ```jsx
@@ -97,6 +119,6 @@
 ## 関連プリミティブ
 
 - [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
-- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
-- [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
+- [l--autoColumns](./l--autoColumns.md) — カラム幅ベースの自動段組
+- [l--switchColumns](./l--switchColumns.md) — ブレイクポイント一括切り替え型カラム
 - [is--container](../trait-class/is--container.md) — レスポンシブ Property Class 利用時に必要

package/dist/data/guides/prop-responsive.md

@@ -8,7 +8,7 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive/)
+[詳細](https://lism-css.com/docs/responsive.md)
 
 ---
 

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

@@ -7,11 +7,11 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 - クラス名: `-bd` / `-bd-{side}` / `-bds:*` / `-bdc:*` / `-bdw` など
 - Lism props: `bd`, `bd-{side}`, `bds`, `bdc`, `bdw`
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_border.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/property-class/bd/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/bd.md
 
 ## 仕組み
 
-`.-bd` または `.-bd-{side}` クラスが付くと、以下の初期値がセットされる。
+`-bd` または `-bd-{side}` クラスが付くと、以下の初期値がセットされる。
 
 ```scss
 :where(.-bd, [class*=" -bd-"], [class^="-bd-"]) {
@@ -27,7 +27,7 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 /* ...各 side ごとに style を適用 */
 ```
 
-`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `.-bd` または `.-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
+`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `-bd` または `-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
 
 ## 方向指定クラス
 
@@ -123,5 +123,5 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 
 ## 関連
 
-- [`-bdrs`](https://lism-css.com/docs/property-class/) — 角丸（`border-radius`）
+- [`-bdrs`](https://lism-css.com/docs/property-class.md) — 角丸（`border-radius`）
 - [`-bd-{side}` + `has--gutter`](../trait-class/has--gutter.md) — セクション区切りに使うと相性が良い

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

@@ -7,32 +7,32 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 - クラス名: `-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/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/hov.md
 
 ## 3 つの形式
 
 | 形式 | 役割 |
 |------|------|
-| `.-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
-| `.-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
-| `.-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
+| `-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}` — プロパティ変更
+## `-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:-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, var(--o--p))` |
+| `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 
@@ -45,14 +45,14 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
    style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="###">...</a>
 ```
 
-## `.-hov:{preset}` — プリセット
+## `-hov:{preset}` — プリセット
 
 hover 時のスタイルセットをプリセット名でまとめて適用する。
 
 | クラス | 内容 |
 |--------|------|
-| `.-hov:underline` | テキストに下線を表示 |
-| `.-hov:neutral` | 背景色にニュートラルグレーをブレンド |
+| `-hov:underline` | テキストに下線を表示 |
+| `-hov:neutral` | 背景色にニュートラルグレーをブレンド |
 
 プロジェクト固有のプリセットは、以下のように自作して追加できる。
 
@@ -65,15 +65,15 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 }
 ```
 
-## `.-hov:in:{preset}` — 親連動
+## `-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)` |
+| `-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">
@@ -103,7 +103,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 
 ### オブジェクト指定
 
-主に `.-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
+主に `-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
 
 ```jsx
 <Lism hov={{ c: 'red' }}>...</Lism>

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

@@ -1,13 +1,13 @@
 # -max-sz（最大幅）
 
-コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `container` を持つ。
+コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `bleed` を持つ。
 
 ## 基本情報
 
-- クラス名: `-max-sz:{xs|s|m|l|xl|full|container}`
+- クラス名: `-max-sz:{xs|s|m|l|xl|full|bleed}`
 - 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/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/max-sz.md
 
 ## トークン対応クラス
 
@@ -25,33 +25,37 @@
 
 ### `-max-sz:full`
 
-**親要素のサイズいっぱいに広がる**クラス。`.has--gutter` の直下では、その gutter 分を**追加で外側に**拡張する（= gutter を無視して端まで広がる）。
+**親要素のサイズいっぱいに広がる**クラス。`has--gutter` の直下では、その gutter 分を**追加で外側に**拡張する（= gutter を無視して端まで広がる）。
 
 ```scss
 .-max-sz\:full {
   max-inline-size: 100%;
 
   :where(.has--gutter) > & {
+    inline-size: auto;
     max-inline-size: calc(100% + var(--gutter-size) * 2);
     margin-inline: calc(var(--gutter-size) * -1);
   }
 }
 ```
 
-`.has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。
+`has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。`inline-size: auto` は、親が `is--wrapper` の場合に当たる `inline-size: 100%` を打ち消し、負 margin による hang を効かせるためのリセット。
 
-### `-max-sz:container`
+### `-max-sz:bleed`
 
-**コンテナ要素を基準としたサイズ**まで広がる。`.is--container` ごとに `--sz--container` が更新されるため、直近の container を基準にサイズ決定される。
+**最外側の `is--container` 幅**まで広がる。本文幅やネストされた container を突き抜け、ページ全体の full-bleed 表現を実現する。`is--container` が祖先に存在しない場合は、ビューポート幅（`100svi`）まで広がる fallback として動作する。
 
 ```scss
-.-max-sz\:container {
-  max-inline-size: var(--sz--container, 100cqi);
-  margin-inline: calc(50% - var(--sz--container) / 2);
+.-max-sz\:bleed {
+  inline-size: auto;
+  max-inline-size: var(--sz--bleed, 100svi);
+  margin-inline: calc(50% - var(--sz--bleed, 100svi) / 2);
 }
 ```
 
-`margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても container 基準の幅に広げつつ中央に揃う。
+`--sz--bleed` は最外側の `is--container` 直下の子要素でだけ `100cqi` に上書きされ、ネストされた `is--container` は再度上書きしないため、内側の子要素は外側の値を inherit で参照する。
+
+`margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても最外側 container 基準の幅に広げつつ中央に揃う。`inline-size: auto` も同じく、`is--wrapper > *` で当たる `inline-size: 100%` を打ち消すためのリセット。
 
 ## Usage
 
@@ -64,7 +68,7 @@
 <div class="-max-sz:m -mx:auto" style="max-inline-size: var(--sz--m)">...</div>
 ```
 
-### `.has--gutter` 内の全幅要素
+### `has--gutter` 内の全幅要素
 
 ```html
 <div class="has--gutter">
@@ -74,14 +78,14 @@
 </div>
 ```
 
-### container 基準のサイズ
+### 最外側 container 基準のサイズ（full-bleed）
 
 ```html
 <div class="is--container">
   <div class="is--wrapper -contentSize:s">
     <p>狭めのコンテンツ</p>
-    <div class="-max-sz:container">
-      container 基準まで広がる要素
+    <div class="-max-sz:bleed">
+      最外側 container 幅まで広がる要素（ネストされた is--container も突き抜ける）
     </div>
   </div>
 </div>
@@ -94,6 +98,6 @@
 
 ## 関連
 
-- [`is--container`](../trait-class/is--container.md) — `-max-sz:container` の基準となるコンテナ
+- [`is--container`](../trait-class/is--container.md) — `-max-sz:bleed` の基準となるコンテナ
 - [`is--wrapper`](../trait-class/is--wrapper.md) — コンテンツ幅の制限
 - [`has--gutter`](../trait-class/has--gutter.md) — `-max-sz:full` と組み合わせる左右余白

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

@@ -6,6 +6,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ## TOC
 
 - [基本書式](#基本書式)
+  - [プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）](#プリセット外の値をクラス化するvalue-記法lism-props-限定)
 - [表の読み方](#表の読み方)
 - [全 Prop 一覧](#全-prop-一覧)
 - [特殊な Property Class](#特殊な-property-class)
@@ -16,13 +17,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` 等）
+- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:bleed` 等）
 
 ---
 
@@ -47,6 +48,16 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ```
 
 
+### プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）
+
+Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、 **強制的に Property Class を出力**できる。cssを追記してトークン値を独自に増やした場合などに活用できる。
+
+```jsx
+<Text lts=":2xl">...</Text>
+// → <p class="-lts:2xl">...</Text>
+```
+
+
 ## 表の読み方
 
 | カラム | 説明 |
@@ -72,7 +83,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `fs` | `font-style` | `-fs:italic` | — |
 | `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
 | `hl` | `--hl` 変数のみ | — | `-hl_sm`, `-hl_md` |
-| `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l` | — |
+| `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` | — |
@@ -84,7 +95,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:inline`, `-d:inline-block` | `-d_sm`, `-d_md` |
-| `o` | `opacity` | `-o:0`, `-o:-10`, `-o:-20`, `-o:-30` | — |
+| `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,14 +114,14 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `max-h` | `max-height` | `-max-h:100%` | `-max-h_sm`, `-max-h_md` |
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
-| `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:container` | — |
+| `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:bleed` | — |
 | `bsz` | `block-size` | — | — |
 | `min-bsz` | `min-block-size` | — | — |
 | `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
-- `-max-sz:full` — `.has--gutter` 内では gutter 分を含めた全幅に拡張
-- `-max-sz:container` — コンテナ幅に合わせる（`margin-inline` で中央配置）
+- `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
+- `-max-sz:bleed` — 最外側の `is--container` 幅まで広がる（`margin-inline` で中央配置、`is--container` 祖先がなければ `100svi` まで広がる）
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
 
@@ -275,7 +286,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ## 特殊な Property Class
 
-以下は通常の `.-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
+以下は通常の `-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
 
 ### ボーダー（`bd` 系）
 
@@ -296,11 +307,11 @@ 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:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
+| `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
+| `-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
 
-**標準プリセット:** `.-hov:-c`, `.-hov:-bgc`, `.-hov:-bdc`, `.-hov:-o`, `.-hov:-bxsh`, `.-hov:underline`, `.-hov:neutral`, `.-hov:in:hide`, `.-hov:in:show`, `.-hov:in:zoom`
+**標準プリセット:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:neutral`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
 
 **`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。
 

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

@@ -22,7 +22,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 - [`set--var:hov`](#set--varhov)
 - [`set--var:bdrsInner`](#set--varbdrsinner)
 
-[詳細](https://lism-css.com/docs/set-class/)
+[詳細](https://lism-css.com/docs/set-class.md)
 
 ---
 
@@ -114,7 +114,7 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 .-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時は無効な値） */
 }
 ```
 

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)
 
 ---
 
@@ -31,13 +31,13 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | 余白 (space) | `5`, `10`, `15`, `20`, `30`, `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` |
-| 字間 (lts) | `base`, `s`, `l` | `--lts--{key}` | `--lts--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) | `-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`, `50` | `--bxsh--{N}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `container` | `--sz--{key}` | `--sz--l` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `bleed` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
 | セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent` | `--{name}` | `--brand` |
@@ -83,7 +83,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--fz--s` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))` | S（mol/(mol+1)） |
 | `--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` | `var(--REM)` | 本文の基本フォントサイズ（≒ 1rem） |
+| `--fz--base` | `1rem` | 本文の基本フォントサイズ |
 | `--fz--root` | — | `:root` のフォントサイズ |
 
 `--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
@@ -106,8 +106,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
 | `--lts--base` | `normal` | 基本の文字間隔 |
-| `--lts--s` | `-0.05em` | 狭めの文字間隔 |
+| `--lts--s` | `-0.025em` | 狭めの文字間隔 |
 | `--lts--l` | `0.05em` | 広めの文字間隔 |
+| `--lts--xl` | `0.1em` | より広い文字間隔 |
 
 
 ## フォント (ff)
@@ -132,11 +133,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)

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

@@ -6,8 +6,8 @@
 
 - クラス名: `has--gutter`
 - Lism props: `hasGutter`（`<Lism hasGutter>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasGutter.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--gutter
+- 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 定義