@lism-css/mcp 0.13.0 → 0.15.0

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

@@ -1,19 +1,26 @@
 # `set--` クラス
 
-`@layer lism-base` に属し、特定の機能を有効にするために CSS変数やベーススタイルをセットアップするクラス群です。
-HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="shadow"` 等）で指定します。
+`@layer lism-base` に属し、HTML 要素の基礎スタイリングまたは CSS 変数のセットアップだけを行うクラス群です。
+HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="var:bxsh"` 等）で指定します。
 
 `set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
 
+set-- は目的別に 2 カテゴリに分かれます。
+
+| カテゴリ | 用途 | クラス |
+|---------|------|--------|
+| 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` |
+
+`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`）。
+
 ## TOC
 
 - [`set--plain`](#set--plain)
-- [`set--shadow`](#set--shadow)
-- [`set--hov`](#set--hov)
-- [`set--transition`](#set--transition)
-- [`set--gutter`](#set--gutter)
-- [`set--innerRs`](#set--innerrs)
-- [`set--bp`](#set--bp)
+- [`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/)
 
@@ -26,18 +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--bp` | [`_bp.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bp.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` など、ブラウザデフォルトスタイルを完全にリセットします。
 ボタン・リンク等のスタイリング時に活用します。
 
 使用例:
@@ -48,22 +53,45 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 <Lism as="button" set="plain">...</Lism>
 ```
 
-## `set--shadow`
+## `set--revert`
 
-`SHADOW`トークン変数（`--bxsh--{token}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
+ブラウザデフォルトの見た目を明示的に復活させるためのクラスです。
+これ単体ではスタイルは持ちません（全プロパティをrevertするというようなものではない）。
+
+特定のHTML要素と組み合わせてスタイルを定義して使うものであり、現状は `ul` / `ol` のみ対象です。
+
+Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイルがリセットされます。
+クラスを持ちつつ、箇条書き表示を維持したい場合（Property Class しか持たないリストなど）に `set--revert` を付与します。
 
-使用例:
 
+使用例:
 ```html
-<div class="l--box set--shadow -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+<ul class="-fz:l set--revert">
+  <li>item 1</li>
+  <li>item 2</li>
+</ul>
 ```
 ```jsx
-<Box set="shadow" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
+<Lism as="ul" fz="l" set="revert">
+  <li>item 1</li>
+  <li>item 2</li>
+</Lism>
 ```
 
+## `set--var:bxsh`
+
+`SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
+
+使用例:
+```html
+<div class="l--box set--var:bxsh -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+```
+```jsx
+<Box set="var:bxsh" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
+```
 
 
-## `set--hov`
+## `set--var:hov`
 
 ホバー状態の判定変数（`--_notHov`, `--_isHov`）を次のようにセットします。主に**子要素のホバースタイルを制御する**時に活用します。
 
@@ -86,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--n20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
+  opacity: var(--_notHov, var(--o---20)); /* 非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>
@@ -105,88 +133,28 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 ```
 
 ```css
-.-hov\:to\:zoom {
-  --transProp: scale;
+.-hov\:in\:zoom {
+  --transitionProps: scale;
   scale: var(--_isHov, 1.1);
 }
 ```
 
 
-## `set--transition`
-
-トランジション用の 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`
+## `set--var:bdrsInner`
 
-親要素の角丸(`--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>
 ```
-
-
-## `set--bp`
-
-ブレークポイント判定用の hack 変数をセットします。コンテナクエリで各ブレークポイントを超えた時に空変数がセットされ、CSS の空変数トリックで条件分岐に使えます。
-`sm`, `md`にのみ対応しています。（`--_is_sm`, `--_is_md`が定義されます。）
-
-smサイズ以上でテキストカラーを赤に変える例:
-
-```html
-<div class="set--bp -p:20" style="color: var(--_is_sm) red">...</div>
-```
-```jsx
-<Lism set="bp" p="20" style={{ color: 'var(--_is_sm) red;' }}>...</Lism>
-```

package/dist/data/guides/tokens.md

@@ -28,18 +28,17 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
-| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{n}` | `--s20` |
+| 余白 (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` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
-| 透明度 (o) | `-10`, `-20`, `-30` | `--o--n{n}` | `--o--n10` |
+| 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
-| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{n}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `min`, `full`, `container` | `--sz--{key}` | `--sz--l` |
+| 影 (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` |
-| 書字方向 (writing) | `vertical` | `--writing--{key}` | `--writing--vertical` |
 | フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
 | セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
@@ -135,9 +134,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
-| `--o--n10` | `0.75` | 75%の不透明度 |
-| `--o--n20` | `0.5` | 50%の不透明度 |
-| `--o--n30` | `0.25` | 25%の不透明度 |
+| `--o---10` | `0.75` | 75%の不透明度 |
+| `--o---20` | `0.5` | 50%の不透明度 |
+| `--o---30` | `0.25` | 25%の不透明度 |
 
 
 ## 角丸 (bdrs)
@@ -154,14 +153,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/_hasGutter.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#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 と組み合わせてセクションラッパーを構成することが多い

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

@@ -0,0 +1,66 @@
+# has--mask
+
+`--maskImg` 変数と組み合わせて、要素自身にマスク画像を適用する Trait クラス。SVG を使った異形シェイプ表示などに使う。
+
+## 基本情報
+
+- クラス名: `has--mask`
+- Lism props: `hasMask`（`<Lism hasMask>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasMask.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--mask
+
+## SCSS 定義
+
+```scss
+.has--mask {
+  --maskPos: 50%;
+  --maskSize: contain;
+  --maskRepeat: no-repeat;
+  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
+}
+```
+
+`--maskImg` は定義されていないため、利用側で必ず指定すること。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--maskImg` | マスク画像（`url(...)` で指定。SVG data URI が多い） | **未定義（必須）** |
+| `--maskPos` | マスクの位置 | `50%` |
+| `--maskSize` | マスクのサイズ | `contain` |
+| `--maskRepeat` | マスクの繰り返し | `no-repeat` |
+
+## Usage
+
+`Frame` コンポーネント（または任意の要素）に `has--mask` を付与し、`--maskImg` に SVG の data URI をセットする。
+
+```html
+<div
+  class="l--frame has--mask -ar:og"
+  style="--maskImg: url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;M170.4,25.7...Z&quot; /></svg>')"
+>
+  <img src="..." width="960" height="640" alt="" />
+</div>
+```
+```jsx
+<Frame
+  hasMask
+  ar="og"
+  style={{
+    '--maskImg': `url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="M170.4,25.7...Z" /></svg>')`
+  }}
+>
+  <img src="..." width="960" height="640" alt="" />
+</Frame>
+```
+
+### 実装メモ
+
+- HTML 属性内で SVG data URI を使う場合、`<` / `>` / `"` をエンティティ化する必要がある
+- JSX の `style` オブジェクトで渡す場合はテンプレートリテラルでそのまま書ける
+- マスクの位置や繰り返しを変えたい場合は `--maskPos` / `--maskSize` / `--maskRepeat` を個別に上書き
+
+## 関連
+
+- `l--frame` — アスペクト比制御。マスク画像をフィットさせるラッパーとして併用することが多い

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

@@ -0,0 +1,68 @@
+# has--snap
+
+`scroll-snap-*` 系のプロパティを CSS 変数経由でセットする Trait クラス。横スクロールカルーセルなどで子要素のスナップ位置を制御したい時に使う。
+
+## 基本情報
+
+- クラス名: `has--snap`
+- Lism props: `hasSnap`（`<Lism hasSnap>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasSnap.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--snap
+
+## SCSS 定義
+
+```scss
+.has--snap {
+  --snapType: both mandatory;
+  --snapAlign: start;
+  --snapStop: normal;
+  scroll-snap-type: var(--snapType);
+
+  & > * {
+    scroll-snap-align: var(--snapAlign);
+    scroll-snap-stop: var(--snapStop);
+  }
+}
+```
+
+自身に `scroll-snap-type` を、**直下の子要素**に `scroll-snap-align` / `scroll-snap-stop` を適用する構造。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--snapType` | `scroll-snap-type` | `both mandatory` |
+| `--snapAlign` | 子要素の `scroll-snap-align` | `start` |
+| `--snapStop` | 子要素の `scroll-snap-stop` | `normal` |
+
+## Usage
+
+`ov="auto"`（または `overflow: auto`）と一緒に使い、スクロールコンテナとして成立させる必要がある。
+
+```html
+<div class="has--snap -ov:auto -ar:16/9 -bd">
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+</div>
+```
+```jsx
+<Box hasSnap ov="auto" ar="16/9" bd>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+</Box>
+```
+
+### スナップ方向を水平だけに限定する例
+
+```html
+<div class="has--snap -ov:auto" style="--snapType: x mandatory">...</div>
+```
+```jsx
+<Box hasSnap ov="auto" style={{ '--snapType': 'x mandatory' }}>...</Box>
+```
+
+## 関連
+
+- `-ov:*` プロパティクラス — スクロールコンテナ化に必須

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

@@ -0,0 +1,73 @@
+# has--transition
+
+`transition` 系のプロパティを CSS 変数経由でセットする Trait クラス。主に `-hov:*` クラスと組み合わせて、ホバー時のスムーズな変化に使う。
+
+## 基本情報
+
+- クラス名: `has--transition`
+- Lism props: `hasTransition`（`<Lism hasTransition>` / `<Box hasTransition>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasTransition.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--transition
+
+## SCSS 定義
+
+```scss
+.has--transition {
+  --duration: var(--transition-duration, 0.25s);
+  --ease: ease;
+  --delay: 0s;
+  --transitionProps: all;
+  transition: var(--duration) var(--ease) var(--delay);
+  transition-property: var(--transitionProps);
+}
+```
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--transitionProps` | transition 対象プロパティ | `all` |
+| `--duration` | トランジションの長さ | `var(--transition-duration, 0.25s)` |
+| `--ease` | イージング関数 | `ease` |
+| `--delay` | ディレイ | `0s` |
+| `--transition-duration` | 全体のデフォルト duration を `:root` などから上書きするためのグローバル変数 | `0.25s` |
+
+## Usage
+
+### 基本：`-hov:*` と組み合わせる
+
+```html
+<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>
+```
+```jsx
+<Lism hasTransition hov={{c: 'red'}} style={{ '--transitionProps': 'color'}}>Example</Lism>
+```
+
+### `duration` を個別に上書き
+
+```html
+<a class="is--boxLink has--transition -hov:-bdc -bd -p:20" style="--hov-bdc: var(--red); --duration: 0.5s">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd p="20" style={{ '--duration': '.5s' }}>
+  ...
+</BoxLink>
+```
+
+### `box-shadow` を変化させる例
+
+```html
+<a href="###" class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20" style="--hov-bxsh: var(--bxsh--40)">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">...</BoxLink>
+```
+
+## 関連
+
+- [`-hov:*` プロパティクラス](../property-class.md) — ホバー時の変化を定義
+- [`set--var:hov`](../set-class.md#set--varhov) — 親のホバー状態を子要素に伝播させる仕組み

package/dist/data/guides/{primitives → trait-class}/is--boxLink.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--boxLink`
 - コンポーネント: `<BoxLink>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_boxLink.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--boxLink/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_boxLink.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--boxLink/
 
 ## 専用Props
 
@@ -26,7 +26,7 @@ BoxLink には主に2通りの使い方があります。
 `href` を指定すると `<BoxLink>` 自体が `<a>` タグとして出力されます。シンプルなカード全体リンクに最適。
 
 ```jsx
-<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="o">
+<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="-o">
   <Group fz="xl" fw="bold">Heading text</Group>
   <Text lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
@@ -36,7 +36,7 @@ BoxLink には主に2通りの使い方があります。
 ```
 
 ```html
-<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
+<a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
   <p class="-fz:xl -fw:bold">Heading text</p>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
@@ -48,7 +48,7 @@ BoxLink には主に2通りの使い方があります。
 `<BoxLink>` は `<div>` にしたまま、内部のアンカー要素に `is--coverLink` クラスを付けてボックス全体をクリック可能にします。**BoxLink 内部にさらに別のリンクを配置したい場合はこちらを選ぶこと**。
 
 ```jsx
-<BoxLink as="section" p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
+<BoxLink as="section" p="30" bgc="base" bd bdrs="30" hasTransition hov="-bxsh">
   <Group fz="xl" fw="bold">
     <Link isCoverLink href="/article/1">
       Heading link text
@@ -56,19 +56,19 @@ BoxLink には主に2通りの使い方があります。
   </Group>
   <Text c="text-2" lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group my-s="10">
-    <a href="/tag/foo" className="-hov:o">Inner Link</a>
+    <a href="/tag/foo" className="-hov:-o">Inner Link</a>
   </Group>
 </BoxLink>
 ```
 
 ```html
-<div class="is--boxLink -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--transition">
+<div class="is--boxLink -hov:-bxsh -p:30 -bgc:base -bd -bdrs:30 has--transition">
   <div class="-fz:xl -fw:bold">
     <a class="is--coverLink" href="/article/1">Heading link text</a>
   </div>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <div class="-my-s:10">
-    <a href="/tag/foo" class="-hov:o">Inner Link</a>
+    <a href="/tag/foo" class="-hov:-o">Inner Link</a>
   </div>
 </div>
 ```

package/dist/data/guides/{primitives → trait-class}/is--container.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--container`
 - コンポーネント: `<Container>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_container.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--container/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_container.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--container/
 
 ## 使い方
 

package/dist/data/guides/{primitives → trait-class}/is--layer.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--layer`
 - コンポーネント: `<Layer>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_layer.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--layer/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_layer.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--layer/
 
 ## 使い方
 

package/dist/data/guides/{primitives → trait-class}/is--wrapper.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--wrapper`
 - コンポーネント: `<Wrapper>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_wrapper.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--wrapper/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_wrapper.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--wrapper/
 
 ## 使い方