@lism-css/mcp 0.23.0 → 0.26.0

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

@@ -2,12 +2,7 @@
 
 メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる2カラムレイアウト**。「画像 + コンテンツ」「メインエリア + サイドバー」などに活用できる。
 
-## 基本情報
-
-- クラス名: `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
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--withSide.md
 
 ## 動作の仕組み
 
@@ -15,10 +10,17 @@
 - メイン側が `--mainW` を維持できる範囲内では横並びを保ち、下回ると自動で縦並びに切り替わる
 - 子要素の**一方に `is--side` を付ける必要がある**（コンポーネントでは `isSide` prop）
 
+## 既定の挙動
+
+- `display:flex`。
+- `flex-wrap:wrap`で折り返しを有効化済み。
+- `--sideW:auto`、`--mainW:max(20rem, 50%)`を初期値にします。
+- 直下の`.is--side`をサイド側、それ以外をメイン側としてflex比率・basis・`min-width:0`を設定します。通常`fxw="wrap"`は足しません。
+
 ## 専用Props
 
 | Prop | 出力 | デフォルト | 説明 |
-|------|------|-----------|------|
+| --- | --- | --- | --- |
 | `sideW` | `--sideW` | `auto` | サイド要素の横幅 |
 | `mainW` | `--mainW` | `max(20rem, 50%)` | メイン要素で維持したい最小幅 |
 
@@ -31,78 +33,6 @@
 </div>
 ```
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<WithSide sideW="12rem" mainW="20rem" g="20">
-  <Box p="15" bd bdc="blue">
-    <p>Main Content</p>
-    <p>メインコンテンツ本文...</p>
-  </Box>
-  <Box isSide p="15" bd bdc="red">
-    <p>Side Content</p>
-  </Box>
-</WithSide>
-```
-
-```html
-<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>
-  </div>
-  <div class="l--box is--side -p:15 -bd" style="--bdc:var(--red)">
-    <p>Side Content</p>
-  </div>
-</div>
-```
-
-### Side 要素の位置を反転（`-fxd:row-reverse`）
-
-`flex-direction: row-reverse` を併用することで、横並びの時だけ順序を反転できます。**横並びで左側・縦並びで下側に Side を配置**したいときに便利。
-
-```jsx
-<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
-  <Box>
-    <p>Main content...</p>
-  </Box>
-  <Box isSide bgc="blue:20%">Side Content</Box>
-</WithSide>
-```
-
-```html
-<div class="l--withSide -fxd:row-reverse -g:20" style="--sideW:10rem;--mainW:16rem">
-  <div class="l--box">
-    <p>Main content...</p>
-  </div>
-  <div class="l--box is--side">Side Content</div>
-</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--withSide`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え

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

@@ -0,0 +1,246 @@
+# Property Class 全Prop一覧
+
+[property-class.md](../property-class.md)の分冊。全Propのプリセット値クラス・BP対応の詳細表。
+
+ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
+
+## 表の読み方
+
+| カラム | 説明 |
+| --- | --- |
+| **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
+| **CSS プロパティ** | 実際に制御される CSS プロパティ |
+| **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
+| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`・`lg` に対応、`—` は非対応 |
+
+
+## 全 Prop 一覧
+
+### タイポグラフィ
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `f` | `font` | `-f:inherit` | — |
+| `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` | — |
+| `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` | — |
+
+**注意:** 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` | ✔ |
+| `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` | — |
+| `ov-y` | `overflow-y` | `-ov-y:clip`, `-ov-y:auto`, `-ov-y:scroll` | — |
+| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | ✔ |
+
+### サイズ
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `w` | `width` | `-w:100%`, `-w:fit` | ✔ |
+| `h` | `height` | `-h:100%`, `-h:fit` | ✔ |
+| `min-w` | `min-width` | `-min-w:100%` | ✔ |
+| `max-w` | `max-width` | `-max-w:100%` | ✔ |
+| `min-h` | `min-height` | `-min-h:100%` | ✔ |
+| `max-h` | `max-height` | `-max-h:100%` | ✔ |
+| `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:bleed` | — |
+| `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 分を含めた全幅に拡張
+- `-max-sz:bleed` — 最外側の `is--container` 幅まで広がる（`margin-inline` で中央配置、`is--container` 祖先がなければ `100svi` まで広がる）
+
+→ 詳細は [property-class/max-sz.md](./max-sz.md) 参照
+
+**`contentSize` について:**
+`--contentSize` 変数をセットする isVar タイプの Prop です。`is--wrapper` と組み合わせるとコンテンツ幅の上限となり、`set--bleed` と組み合わせると `--bleed` の計算基準値として使われます。
+プリセット値（`s`, `m`, `l`, `xl`）は `-contentSize:{value}` クラスを出力し、それ以外の任意値は `--contentSize: {value}` をスタイル属性として出力します。
+
+### 背景
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `bg` | `background` | — | — |
+| `bgi` | `background-image` | — | — |
+| `bgr` | `background-repeat` | `-bgr:no-repeat` | — |
+| `bgp` | `background-position` | `-bgp:center` | — |
+| `bgsz` | `background-size` | `-bgsz:cover`, `-bgsz:contain` | — |
+| `bgc` | `background-color` | `-bgc:base`, `-bgc:base-2`, `-bgc:text`, `-bgc:brand`, `-bgc:accent`, `-bgc:keycolor`, `-bgc:inherit`, `-bgc:transparent`, `-bgc:current` | — |
+
+### カラー
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:keycolor`, `-c:inherit` | — |
+| `keycolor` | `--keycolor` 変数のみ | — | — |
+
+セマンティック/パレットの全カラートークンは [tokens.md のカラー](../tokens.md#カラー)を参照。<br />
+キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
+
+`c` / `bgc` / `bdc` に `keycolor` を指定すると、`--keycolor` を参照する `-c:keycolor` のようなクラスが出力される（`style` 属性ではない）。
+
+### 角丸
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | ✔ |
+| `bdrs-tl` | `border-top-left-radius` | — | — |
+| `bdrs-tr` | `border-top-right-radius` | — | — |
+| `bdrs-br` | `border-bottom-right-radius` | — | — |
+| `bdrs-bl` | `border-bottom-left-radius` | — | — |
+| `bdrs-ss` | `border-start-start-radius` | — | — |
+| `bdrs-se` | `border-start-end-radius` | — | — |
+| `bdrs-es` | `border-end-start-radius` | — | — |
+| `bdrs-ee` | `border-end-end-radius` | — | — |
+
+### 影
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | ✔ |
+
+**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--bxsh` クラスを併用する。
+
+### ポジション
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `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%` | — |
+| `r` | `right` | `-r:0`, `-r:50%`, `-r:100%` | — |
+| `b` | `bottom` | `-b:0`, `-b:50%`, `-b:100%` | — |
+| `i` | `inset` | `-i:0` | — |
+| `i-x` | `inset-inline` | — | — |
+| `i-y` | `inset-block` | — | — |
+| `i-s` | `inset-inline-start` | — | — |
+| `i-e` | `inset-inline-end` | — | — |
+| `i-bs` | `inset-block-start` | — | — |
+| `i-be` | `inset-block-end` | — | — |
+
+### 余白 — Padding
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | ✔ |
+| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | ✔ |
+| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | ✔ |
+| `ps` | `padding-inline-start` | `-ps:5`, `-ps:10`, `-ps:20`, ... (SPACEトークン) | ✔ |
+| `pe` | `padding-inline-end` | `-pe:5`, `-pe:10`, `-pe:20`, ... (SPACEトークン) | ✔ |
+| `pbs` | `padding-block-start` | `-pbs:5`, `-pbs:10`, `-pbs:20`, ... (SPACEトークン) | ✔ |
+| `pbe` | `padding-block-end` | `-pbe:5`, `-pbe:10`, `-pbe:20`, ... (SPACEトークン) | ✔ |
+| `pl` | `padding-left` | `-pl:5`, `-pl:10`, `-pl:20`, ... (SPACEトークン) | ✔ |
+| `pr` | `padding-right` | `-pr:5`, `-pr:10`, `-pr:20`, ... (SPACEトークン) | ✔ |
+| `pt` | `padding-top` | `-pt:5`, `-pt:10`, `-pt:20`, ... (SPACEトークン) | ✔ |
+| `pb` | `padding-bottom` | `-pb:5`, `-pb:10`, `-pb:20`, ... (SPACEトークン) | ✔ |
+
+SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
+
+### 余白 — Margin
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | ✔ |
+| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | ✔ |
+| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | ✔ |
+| `ms` | `margin-inline-start` | `-ms:auto`, `-ms:5`, `-ms:10`, `-ms:20`, ... (SPACEトークン) | ✔ |
+| `me` | `margin-inline-end` | `-me:auto`, `-me:5`, `-me:10`, `-me:20`, ... (SPACEトークン) | ✔ |
+| `mbs` | `margin-block-start` | `-mbs:auto`, `-mbs:0`, `-mbs:5`, `-mbs:10`, `-mbs:20`, ... (SPACEトークン) | ✔ |
+| `mbe` | `margin-block-end` | `-mbe:auto`, `-mbe:5`, `-mbe:10`, `-mbe:20`, ... (SPACEトークン) | ✔ |
+| `ml` | `margin-left` | `-ml:5`, `-ml:10`, `-ml:20`, ... (SPACEトークン) | ✔ |
+| `mr` | `margin-right` | `-mr:5`, `-mr:10`, `-mr:20`, ... (SPACEトークン) | ✔ |
+| `mt` | `margin-top` | `-mt:5`, `-mt:10`, `-mt:20`, ... (SPACEトークン) | ✔ |
+| `mb` | `margin-bottom` | `-mb:5`, `-mb:10`, `-mb:20`, ... (SPACEトークン) | ✔ |
+
+### Gap
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ |
+| `cg` | `column-gap` | `-cg:5`, `-cg:10`, `-cg:20`, ... (SPACEトークン) | ✔ |
+| `rg` | `row-gap` | `-rg:5`, `-rg:10`, `-rg:20`, ... (SPACEトークン) | ✔ |
+
+### Flex
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `fxf` | `flex-flow` | — | — |
+| `fxw` | `flex-wrap` | `-fxw:wrap` | ✔ |
+| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | ✔ |
+| `fx` | `flex` | `-fx:1` | ✔ |
+| `fxg` | `flex-grow` | `-fxg:1` | — |
+| `fxsh` | `flex-shrink` | `-fxsh:0` | — |
+| `fxb` | `flex-basis` | — | ✔ |
+
+### Grid
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `gt` | `grid-template` | — | ✔ |
+| `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` 変数 | — | ✔ |
+| `rows` | `--rows` 変数 | — | ✔ |
+
+### Grid アイテム
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `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` | — | — |
+| `gre` | `grid-row-end` | — | — |
+
+### 配置（Places）
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | ✔ |
+| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | ✔ |
+| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | ✔ |
+| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | ✔ |
+| `pi` | `place-items` | `-pi:start`, `-pi:center`, `-pi:end` | — |
+| `pc` | `place-content` | `-pc:start`, `-pc:center`, `-pc:end` | — |
+| `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` | ✔ |
+
+**コンポーネント用ショートハンド:** `ai`, `ac`, `ji`, `jc`, `aslf`, `jslf` では `s`→`start`, `e`→`end`, `c`→`center`, `fs`→`flex-start`, `fe`→`flex-end` のショートハンドが使えます。
+
+### その他
+
+| Prop | CSS プロパティ | プリセット値クラス | BP |
+| --- | --- | --- | --- |
+| `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
+| `whs` | `white-space` | `-whs:nowrap` | — |
+| `float` | `float` | `-float:left`, `-float:right` | — |
+| `clear` | `clear` | `-clear:both` | — |
+| `iso` | `isolation` | `-iso:isolate` | — |
+| `wm` | `writing-mode` | `-wm:vertical-rl` | ✔ |

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

@@ -2,12 +2,10 @@
 
 Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理される特殊仕様の Property Class。`-bd` または `-bd-{side}` クラスで変数管理を有効化し、`bds` / `bdc` / `bdw` Prop で個別に上書きする。
 
-## 基本情報
-
 - クラス名: `-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.md
+
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/property-class/bd.md
 
 ## 仕組み
 
@@ -32,7 +30,7 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 ## 方向指定クラス
 
 | Prop | CSS プロパティ |
-|------|--------------|
+| --- | --- |
 | `bd` | `border`（変数管理を有効化） |
 | `bd-x` | `border-inline` |
 | `bd-y` | `border-block` |
@@ -50,78 +48,15 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 ## 値プロパティ
 
 | Prop | 変数 | プリセット値クラス | BP クラス |
-|------|------|-------------|-----|
+| --- | --- | --- | --- |
 | `bd` | — | `-bd:none` | — |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` | — |
-| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
+| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:keycolor`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
 | `bdw` | `--bdw` | — | `-bdw_sm`, `-bdw_md` |
 
 `bdw` はブレイクポイント指定に対応。`--bdw` の値を BP で切り替えることで、ボーダーの方向自体を変化させることもできる。
 
-## Usage
-
-### 全方向にボーダー + カスタマイズ
-
-```jsx
-<Box bd p="10">...</Box>
-<Box bd bds="dashed" bdw="4px" bdc="red" p="15">...</Box>
-```
-```html
-<div class="l--box -bd -p:10">...</div>
-<div class="l--box -bd -bds:dashed -p:15" style="--bdw: 4px; --bdc: var(--red)">...</div>
-```
-
-### 単一方向
-
-```jsx
-<Box bd-t px="10">-t: Top</Box>
-<Box bd-x bdw="2px" px="10">inline</Box>
-<Box bd-s bdw="2px" px="10">inline-start</Box>
-```
-```html
-<div class="l--box -bd-t -px:10">-t: Top</div>
-<div class="l--box -bd-x -px:10" style="--bdw: 2px">inline</div>
-<div class="l--box -bd-s -px:10" style="--bdw: 2px">inline-start</div>
-```
-
-### 方向ごとに異なるスタイル
-
-`-bd` + `--bdw` / `--bds` / `--bdc` を複数値指定すると、方向ごとにスタイルを変えられる。
-
-```jsx
-<Box bd bdw="0 0 1px .5em" bds="dashed solid" bdc="var(--purple) var(--blue)" p="15">
-  border
-</Box>
-```
-```html
-<div class="l--box -bd -p:15"
-     style="--bdw: 0 0 1px 0.5em; --bds: dashed solid; --bdc: var(--purple) var(--blue)">
-  border
-</div>
-```
-
-### ブレイクポイントで `bdw` を切り替え
-
-```jsx
-<Box bd bdw={['1px', '3px', '6px']} p="15">border</Box>
-```
-```html
-<div class="l--box -bd -bdw_sm -bdw_md -p:15"
-     style="--bdw: 1px; --bdw_sm: 3px; --bdw_md: 6px">border</div>
-```
-
-### BP でボーダー方向を切り替える
-
-`bd-s` + `bd-bs` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
-
-```jsx
-<Flex fxd={['column', 'row']}>
-  <Box px="15" py="5">Box</Box>
-  <Box px="15" py="5" bd-s bd-bs bdw={['1px 0', '0 1px']}>Box</Box>
-</Flex>
-```
-
 ## 関連
 
-- [`-bdrs`](https://lism-css.com/docs/property-class.md) — 角丸（`border-radius`）
+- [`-bdrs`](../property-class.md) — 角丸（`border-radius`）
 - [`-bd-{side}` + `has--gutter`](../trait-class/has--gutter.md) — セクション区切りに使うと相性が良い

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

@@ -2,17 +2,15 @@
 
 hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--hov` に連動する系の 2 系統に分かれる。
 
-## 基本情報
-
 - クラス名: `-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.md
+
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/property-class/hov.md
 
 ## 3 つの形式
 
 | 形式 | 役割 |
-|------|------|
+| --- | --- |
 | `-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
 | `-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
 | `-hov:in:{preset}` | 親要素の `set--hov` を起点に、子要素のスタイルを変化させる |
@@ -27,7 +25,7 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 `: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(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))` |
@@ -40,102 +38,45 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 
 プロジェクト全体で `-hov:-bgc` のデフォルト値を差し替えたい場合は、`:root` 等で `--hov-bgc--default` を定義する。フォールバック順は `--hov-bgc`（要素ごとの明示指定）→ `--hov-bgc--default`（プロジェクト全体）→ `color-mix(...)`（フレームワーク既定）の 3 段。
 
-```html
-<!-- 初期値のまま使用 -->
-<a class="is--boxLink -hov:-o -bgc:base-2 -bd -p:20" href="###">...</a>
-
-<!-- 任意値を指定 -->
-<a class="is--boxLink -hov:-bgc -hov:-c -bgc:base-2 -p:20"
-   style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="###">...</a>
-```
-
 ## `-hov:{preset}` — プリセット
 
 hover 時のスタイルセットをプリセット名でまとめて適用する。
 
 | クラス | 内容 |
-|--------|------|
+| --- | --- |
 | `-hov:underline` | テキストに下線を表示 |
 
-プロジェクト固有のプリセットは、以下のように自作して追加できる。
-
-```scss
-@media (any-hover: hover) {
-  .-hov\:shadowUp:hover {
-    box-shadow: var(--bxsh--40);
-    translate: 0 -3px;
-  }
-}
-```
+プロジェクト固有のプリセットを自作して追加することもできる（実装例は公式ドキュメント参照）。
 
 ## `-hov:in:{preset}` — 親連動
 
 親要素に `set--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)` |
 
-```jsx
-<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>
-```
-
 ## `<Lism>` コンポーネントでの `hov` 指定
 
 `<Lism>`（およびその継承コンポーネント）の `hov` prop は、文字列・オブジェクトの 2 通りで指定できる。
 
-### 文字列指定
-
-入力した文字列がそのまま `-hov:{入力文字列}` クラスとして出力される。カンマ区切りで複数指定可能。**自動変換は行われない**（`"c"` → `-hov:-c` のような省略はサポートしない）。
+- **文字列指定**: 入力した文字列がそのまま `-hov:{入力文字列}` クラスとして出力される。カンマ区切りで複数指定可。**自動変換は行われない**（`"c"` → `-hov:-c` のような省略はサポートしない）。
+- **オブジェクト指定**: 主に `-hov:-{prop}` へ任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。値に `true` を指定すると `-hov:{key}` クラスのみ出力され、任意値プロップとプリセット／自作クラスを同時に指定できる。
 
 ```jsx
-<Lism hov="-o">...</Lism>
-// → <div class="-hov:-o">...</div>
-
-<Lism hov="shadowUp">...</Lism>
-// → <div class="-hov:shadowUp">...</div>
-
-<Lism hov="-c,-bxsh">...</Lism>
-// → <div class="-hov:-c -hov:-bxsh">...</div>
-```
-
-### オブジェクト指定
-
-主に `-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
-
-```jsx
-<Lism hov={{ c: 'red' }}>...</Lism>
-// → <div class="-hov:-c" style="--hov-c: var(--red)">...</div>
-```
-
-値に `true` を指定すると `-hov:{key}` クラスのみ出力される。任意値プロップとプリセット／自作クラスを**同時に**指定したい時に使う。
-
-```jsx
-<Lism hov={{ shadowUp: true }}>...</Lism>
-// → <div class="-hov:shadowUp">...</div>
-
-<Lism hov={{ c: 'red', shadowUp: true }}>...</Lism>
-// → <div class="-hov:-c -hov:shadowUp" style="--hov-c: var(--red)">...</div>
+// 文字列指定（自動変換なし）
+<Lism hov="-c,-bxsh">  // → <div class="-hov:-c -hov:-bxsh">
+// オブジェクト指定（任意値 → クラス + 変数）
+<Lism hov={{ c: 'red', shadowUp: true }}>
+// → <div class="-hov:-c -hov:shadowUp" style="--hov-c: var(--red)">
 ```
 
 ## `has--transition` との併用
 
 `-hov:*` による変化は即時に切り替わる。なめらかなトランジションを付けたい場合は `has--transition` を併用し、`--duration` で所要時間を調整する。
 
-```jsx
-<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">...</BoxLink>
-// → <a class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20"
-//      style="--hov-bxsh: var(--bxsh--40)" href="###">...</a>
-
-<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd p="20"
-         style={{ '--duration': '.5s' }}>...</BoxLink>
-```
-
 ## 関連
 
 - [`has--transition`](../trait-class/has--transition.md) — hover 時の変化にトランジションを付ける

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

@@ -2,19 +2,17 @@
 
 コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `bleed` を持つ。
 
-## 基本情報
-
 - クラス名: `-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.md
+
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/property-class/max-sz.md
 
 ## トークン対応クラス
 
 コンテンツサイズ用のトークン `--sz--{xs|s|m|l|xl}` にそのまま対応するクラスが用意されている。
 
 | クラス | 値 |
-|--------|-----|
+| --- | --- |
 | `-max-sz:xs` | `var(--sz--xs)` |
 | `-max-sz:s` | `var(--sz--s)` |
 | `-max-sz:m` | `var(--sz--m)` |
@@ -57,40 +55,6 @@
 
 `margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても最外側 container 基準の幅に広げつつ中央に揃う。`inline-size: auto` も同じく、`is--wrapper > *` で当たる `inline-size: 100%` を打ち消すためのリセット。
 
-## Usage
-
-### トークン値での使用
-
-```jsx
-<Lism max-sz="m" mx="auto">...</Lism>
-```
-```html
-<div class="-max-sz:m -mx:auto" style="max-inline-size: var(--sz--m)">...</div>
-```
-
-### `has--gutter` 内の全幅要素
-
-```html
-<div class="has--gutter">
-  <p>通常の gutter 内コンテンツ</p>
-  <img class="-max-sz:full" src="..." alt="" />
-  <p>通常の gutter 内コンテンツ</p>
-</div>
-```
-
-### 最外側 container 基準のサイズ（full-bleed）
-
-```html
-<div class="is--container">
-  <div class="is--wrapper -contentSize:s">
-    <p>狭めのコンテンツ</p>
-    <div class="-max-sz:bleed">
-      最外側 container 幅まで広がる要素（ネストされた is--container も突き抜ける）
-    </div>
-  </div>
-</div>
-```
-
 ## DEMO
 
 `-max-sz:*` の挙動確認用デモ: