@lism-css/mcp 0.12.0 → 0.13.0

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

@@ -0,0 +1,68 @@
+# l--fluidCols / `<FluidCols>`
+
+カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
+
+## 基本情報
+
+- クラス名: `l--fluidCols`
+- コンポーネント: `<FluidCols>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_fluidCols.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--fluidCols/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 |
+|------|--------|------|
+| `cols` | `--cols` | カラムが維持する最小幅を指定（`12rem`, `320px` など） |
+| `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
+
+## Usage
+
+### デフォルト幅で利用する
+
+```jsx
+<FluidCols g="20">
+  <Box bxsh="20" p="20"><p>カード1のコンテンツ</p></Box>
+  <Box bxsh="20" p="20"><p>カード2のコンテンツ</p></Box>
+  <Box bxsh="20" p="20"><p>カード3のコンテンツ</p></Box>
+</FluidCols>
+```
+
+```html
+<div class="l--fluidCols -g:20">
+  <div class="l--box -bxsh:20 -p:20"><p>カード1のコンテンツ</p></div>
+  <div class="l--box -bxsh:20 -p:20"><p>カード2のコンテンツ</p></div>
+  <div class="l--box -bxsh:20 -p:20"><p>カード3のコンテンツ</p></div>
+</div>
+```
+
+### カラム最小幅と `auto-fill` の指定
+
+```jsx
+<FluidCols cols="12rem" autoFill g="20" fz="s">
+  <Box bxsh="20" p="20"><p>A</p></Box>
+  <Box bxsh="20" p="20"><p>B</p></Box>
+  <Box bxsh="20" p="20"><p>C</p></Box>
+</FluidCols>
+```
+
+### 2列 → 1列
+
+カラム最小幅を大きめに設定すれば「2列 → コンテナが狭まれば 1列」のような段階的段組も自然に作れます。
+
+```jsx
+<FluidCols cols="320px" g="20">
+  <Frame ar="16/9">
+    <img src="/img/a-1.jpg" width="600" height="400" />
+  </Frame>
+  <Frame ar="16/9">
+    <img src="/img/a-3.jpg" width="600" height="400" />
+  </Frame>
+</FluidCols>
+```
+
+## 関連プリミティブ
+
+- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
+- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列の2段階切り替え
+- [l--sideMain](./l--sideMain.md) — メイン幅ベースの2カラム自動切替

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

@@ -0,0 +1,94 @@
+# l--frame / `<Frame>`
+
+直下のメディア要素（`img`, `video`, `iframe`）を自身のサイズにフィットさせて表示するクラス。アスペクト比固定のメディア枠を簡単に作れます。
+
+## 基本情報
+
+- クラス名: `l--frame`
+- コンポーネント: `<Frame>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_frame.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--frame/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `ar` | フレームのアスペクト比を指定（`16/9` など）。`ar` 自体はどのコンポーネントにも指定できる汎用 CSS Prop |
+
+## Usage
+
+### アスペクト比の指定
+
+```jsx
+<Frame ar="16/9">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</Frame>
+```
+
+```html
+<div class="l--frame -ar:16/9">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</div>
+```
+
+### `figure` / `figcaption` の使用
+
+`as="figure"` を指定してセマンティックな `<figure>` 要素として出力できます。
+
+```jsx
+<Frame as="figure" ar="16/9" pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Flex as="figcaption" pos="absolute" b="0" w="100%" jc="center" p="10" c="white" bgc="rgb(0 0 0 / 40%)">
+    Caption text
+  </Flex>
+</Frame>
+```
+
+### `iframe` / `video` の使用
+
+`iframe`（YouTube 埋め込みなど）や `video` も同様に `l--frame` 直下に配置すれば自動的にフィットします。
+
+```jsx
+<Frame ar="16/9">
+  <iframe src="https://www.youtube.com/embed/xxx" allowfullscreen />
+</Frame>
+```
+
+### Layer 系を活用したオーバーレイ
+
+`<Layer>` と組み合わせると、メディア上にテキストやオーバーレイを重ねられます。
+
+```jsx
+<Frame ar="3/2" pos="relative" c="#fff">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Layer bgc="rgb(0 0 0 / 40%)" />
+  <Layer p="30">
+    <Center min-h="100%" g="15">
+      <h2>Heading</h2>
+      <Text>オーバーレイ内のテキスト...</Text>
+    </Center>
+  </Layer>
+</Frame>
+```
+
+### レスポンシブな `ar`
+
+`ar` はブレイクポイント別に配列で指定できます。
+
+```jsx
+<Frame ar={['1/1', '3/2', '16/9']} pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+</Frame>
+```
+
+```html
+<div class="l--frame -ar:1/1 -ar_sm -ar_md" style="--ar_sm: 3/2; --ar_md: 16/9">
+  <img src="/img/a-1.jpg" alt="" />
+</div>
+```
+
+## 関連プリミティブ
+
+- [is--layer](./is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
+- [l--center](./l--center.md) — フレーム内でテキストを中央配置する時に組み合わせる
+- [a--icon](./a--icon.md) — アイコン画像の表示（`src` 指定）

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

@@ -0,0 +1,68 @@
+# l--grid / `<Grid>`
+
+コンテンツを CSS Grid レイアウトで配置するクラス。`gtc` / `gta` / `ga` などの Grid プロパティと組み合わせて使います。
+
+## 基本情報
+
+- クラス名: `l--grid`
+- コンポーネント: `<Grid>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_grid.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--grid/
+
+## Usage
+
+### 基本的な使い方
+
+`gtc`（`grid-template-columns`）で列を定義します。
+
+```jsx
+<Grid gtc="auto 1fr auto" g="15">
+  <Center p="20" bgc="base-2">L</Center>
+  <Center p="20" bd>Center</Center>
+  <Center p="20" bgc="base-2">R</Center>
+</Grid>
+```
+
+```html
+<div class="l--grid -gtc -g:15" style="--gtc: auto 1fr auto">
+  <div class="l--center -p:20 -bgc:base-2">L</div>
+  <div class="l--center -p:20 -bd">Center</div>
+  <div class="l--center -p:20 -bgc:base-2">R</div>
+</div>
+```
+
+### ブレイクポイントでエリアを切り替える
+
+`gta`（`grid-template-areas`）と `gtc` を配列で渡すと、ブレイクポイントごとに別レイアウトを定義できます。子要素には `ga`（`grid-area`）で対応するエリア名を指定します。
+
+```jsx
+<Grid g="15" gtc={['1fr 1fr', '8em 1fr 8em']} gta={[`'main main' 'left right'`, `'left main right'`]}>
+  <Box ga="left" p="15" bgc="base-2">Left</Box>
+  <Box ga="main" p="15" bd>Center</Box>
+  <Box ga="right" p="15" bgc="base-2">Right</Box>
+</Grid>
+```
+
+### 子要素を重ねて表示する（`ga="1/1"`）
+
+`position: absolute` を使わず、`grid-area: 1/1` を複数子要素に指定することで要素を重ねられます。
+
+```jsx
+<Grid ar="16/9">
+  <Frame ga="1/1" w="100%" h="100%" pos="relative">
+    <Media src="/img/a-1.jpg" alt="" inferSize />
+    <Layer bgc="rgb(0 0 0 / 40%)" />
+  </Frame>
+  <Center ga="1/1" fz="3xl" z="1" c="white">SAMPLE TEXT</Center>
+</Grid>
+```
+
+### subgrid の活用
+
+`gtc="subgrid"` を入れ子の Grid に指定することで親 Grid のトラックを継承し、複数行を揃えたレイアウトが作れます。記事一覧やテーブル風レイアウトに活用できます。
+
+## 関連プリミティブ
+
+- [l--tileGrid](./l--tileGrid.md) — 自動繰り返しのタイル型 Grid
+- [l--columns](./l--columns.md) — 等幅カラム専用
+- [l--sideMain](./l--sideMain.md) — コンテンツ幅自動切り替え型 2 カラム

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

@@ -0,0 +1,102 @@
+# l--sideMain / `<SideMain>`
+
+メディアクエリ・コンテナクエリに依存せず、**維持したいコンテンツ幅を基準にして横並び・縦並びが自動で切り替わる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/
+
+## 動作の仕組み
+
+- サイド側の横幅を `--sideW` で、メイン側で維持したい最小横幅を `--mainW` で指定
+- メイン側が `--mainW` を維持できる範囲内では横並びを保ち、下回ると自動で縦並びに切り替わる
+- 子要素の**一方に `is--side` を付ける必要がある**（コンポーネントでは `isSide` prop）
+
+## 専用Props
+
+| Prop | 出力 | 説明 |
+|------|------|------|
+| `sideW` | `--sideW` | サイド要素の横幅 |
+| `mainW` | `--mainW` | メイン要素で維持したい最小幅 |
+
+## HTML構造
+
+```html
+<div class="l--sideMain">
+  <div>Main Content</div>
+  <div class="is--side">Side Content</div>
+</div>
+```
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<SideMain 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>
+</SideMain>
+```
+
+```html
+<div class="l--sideMain -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
+<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
+  <Box>
+    <p>Main content...</p>
+  </Box>
+  <Box isSide bgc="blue:20%">Side Content</Box>
+</SideMain>
+```
+
+```html
+<div class="l--sideMain -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--grid` との使い分け
+
+- **`l--sideMain`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え
+- **`l--grid`** (`<Grid gta={[...]} gtc={[...]} />`): ブレイクポイント（`sm`/`md`）で明示的に切り替えたい場合
+
+```jsx
+// ブレイクポイント依存で似たレイアウトを構築する例
+<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g="20">
+  <Box>メインコンテンツ</Box>
+  <Box ga="side">サイドコンテンツ</Box>
+</Grid>
+```
+
+## 関連プリミティブ
+
+- [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
+- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
+- [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
+- [is--container](./is--container.md) — レスポンシブ Property Class 利用時に必要

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

@@ -0,0 +1,56 @@
+# l--stack / `<Stack>`
+
+複数の要素を Flex レイアウトで縦並びに配置するクラス。`gap` で余白を管理します。
+
+## 基本情報
+
+- クラス名: `l--stack`
+- コンポーネント: `<Stack>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_stack.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--stack/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Stack g="20">
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+</Stack>
+```
+
+```html
+<div class="l--stack -g:20">
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+  <p>コンテンツ</p>
+</div>
+```
+
+### 内在的な中央寄せ（`ai="center"`）
+
+`ai="center"` を併用すると、Every Layout で言うところの**内在的な中央寄せ**（コンテンツ幅が短い要素だけ中央揃え、長い要素はそのまま）になります。
+
+```jsx
+<Stack ai="center" g="20" p="30">
+  <h3>見出し</h3>
+  <p>短いテキスト</p>
+  <p>長めのテキスト...</p>
+</Stack>
+```
+
+```html
+<div class="l--stack -ai:center -p:30 -g:20">
+  <h3>見出し</h3>
+  <p>短いテキスト</p>
+  <p>長めのテキスト...</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flex](./l--flex.md) — 汎用 Flex 横並び
+- [l--flow](./l--flow.md) — `margin-block-start` で余白を管理するテキスト向けフロー
+- [l--cluster](./l--cluster.md) — 折り返し前提の横並び

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

@@ -0,0 +1,69 @@
+# l--switchCols / `<SwitchCols>`
+
+複数列 ↔ 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/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 |
+|------|--------|------|
+| `breakSize` | `--breakSize` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
+
+## Usage
+
+### デフォルト幅で利用する
+
+```jsx
+<SwitchCols 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>
+```
+
+```html
+<div class="l--switchCols -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>
+</div>
+```
+
+### `breakSize` の指定
+
+```jsx
+<SwitchCols breakSize="s" g="20">
+  <div class="-bgc:base-2 -p:20">Box</div>
+  <div class="-bgc:base-2 -p:20">Box</div>
+</SwitchCols>
+```
+
+```html
+<div class="l--switchCols -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>
+```
+
+### `flex-grow` で比率を調整
+
+子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
+
+```jsx
+<SwitchCols 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>
+```
+
+## 関連プリミティブ
+
+- [l--fluidCols](./l--fluidCols.md) — 最小幅ベースの自動段組
+- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
+- [l--sideMain](./l--sideMain.md) — コンテンツ幅基準の2カラム切り替え

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

@@ -0,0 +1,61 @@
+# l--tileGrid / `<TileGrid>`
+
+`cols`（列数）と `rows`（行数）を指定して、**均等なタイル型グリッドレイアウト**を構成するクラス。内部的には `grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr))` を使用します。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 | デフォルト |
+|------|--------|------|------------|
+| `cols` | `--cols` | 列数を指定。配列でブレイクポイント指定可 | `1` |
+| `rows` | `--rows` | 行数を指定。配列でブレイクポイント指定可 | `1` |
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<TileGrid cols="3" rows="3" g="5" min-h="50svh">
+  <Box p="20" bgc="base-2">item1</Box>
+  <Box p="20" bgc="base-2">item2</Box>
+  <Box p="20" bgc="base-2">item3</Box>
+  <Box p="20" bgc="base-2">item4</Box>
+  <Box p="20" bgc="base-2" gc="span 2">item5</Box>
+  <Center gc="3" gr="1 / -1" p="20" bgc="blue">item6</Center>
+</TileGrid>
+```
+
+```html
+<div class="l--tileGrid -g:5 -min-h:50svh" style="--cols: 3; --rows: 3">
+  <div class="l--box -p:20 -bgc:base-2">item1</div>
+  <div class="l--box -p:20 -bgc:base-2">item2</div>
+  <div class="l--box -p:20 -bgc:base-2">item3</div>
+  <div class="l--box -p:20 -bgc:base-2">item4</div>
+  <div class="l--box -p:20 -bgc:base-2 -gc:span 2">item5</div>
+  <div class="l--center -p:20 -bgc:blue" style="grid-column: 3; grid-row: 1 / -1">item6</div>
+</div>
+```
+
+### ブレイクポイント別指定
+
+`cols` / `rows` をブレイクポイントで切り替え、`gaf`（`grid-auto-flow`）と組み合わせて動的レイアウトも構築できます。
+
+```jsx
+<TileGrid cols={['2', '3']} rows="4" min-h="50svh" gaf="row dense">
+  <Box gc={['1 / -1', 'span 2']} gr={['span 2', '1 / -1']} p="20" bgc="base-2">A</Box>
+  <Box p="20" bgc="green:20%">B</Box>
+  <Box p="20" bgc="blue:20%">C</Box>
+</TileGrid>
+```
+
+## 関連プリミティブ
+
+- [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム
+- [l--fluidCols](./l--fluidCols.md) — 自動折り返し型段組
+- [l--grid](./l--grid.md) — 汎用 CSS Grid

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

@@ -53,7 +53,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 ## 全 Prop 一覧
 
-ソース: [props.ts](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/config/defaults/props.ts)
+ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
 
 ### タイポグラフィ
 
@@ -125,7 +125,8 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `keycolor` | `--keycolor` 変数のみ | — | — |
 
 セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`  
-パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`, `keycolor`
+パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`  
+キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
 
 ### 角丸
 
@@ -270,7 +271,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ### ボーダー（`bd` 系）
 
-[詳細](https://lism-css.com/docs/props/bd/)
+[詳細](https://lism-css.com/docs/property-class/bd/)
 
 Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理される特殊な仕様です。  
 `-bd` または `-bd-{side}` クラスを付けると、初期値（`--bds: solid`, `--bdw: 1px`, `--bdc: var(--divider)`）がセットされ、`bds`, `bdc`, `bdw` Prop で個別に上書きできます。
@@ -311,7 +312,7 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 ### ホバー（`hov` 系）
 
-[詳細](https://lism-css.com/docs/props/hov/)
+[詳細](https://lism-css.com/docs/property-class/hov/)
 
 ホバーエフェクト用のクラスです。`-hov:{prop}` 系と `-hov:to:*` 系の2種類があります。
 
@@ -349,7 +350,7 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 ```jsx
 // set--hov + set--transition が必要
-<Box set={['hov', 'transition']}>
+<Box set="hov transition">
   <Box hov={{ to: 'show' }}>ホバーで表示</Box>
 </Box>
 ```

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

@@ -3,6 +3,8 @@
 `@layer lism-base` に属し、特定の機能を有効にするために CSS変数やベーススタイルをセットアップするクラス群です。
 HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="shadow"` 等）で指定します。
 
+`set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
+
 ## TOC
 
 - [`set--plain`](#set--plain)
@@ -13,7 +15,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 - [`set--innerRs`](#set--innerrs)
 - [`set--bp`](#set--bp)
 
-[詳細](https://lism-css.com/docs/set/)
+[詳細](https://lism-css.com/docs/set-class/)
 
 ---
 
@@ -23,13 +25,13 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 
 | クラス | ソースファイル |
 |--------|---------------|
-| `set--plain` | [`_plain.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_plain.scss) |
-| `set--shadow` | [`_shadow.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
-| `set--hov` | [`_hov.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_hov.scss) |
-| `set--transition` | [`_transition.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_transition.scss) |
-| `set--gutter` | [`_gutter.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_gutter.scss) |
-| `set--innerRs` | [`_innerRs.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_innerRs.scss) |
-| `set--bp` | [`_bp.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_bp.scss) |
+| `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) |
 
 ---
 
@@ -93,7 +95,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:to:zoom`クラスが標準で用意されています。
 
 ```html
-<a href="###" class="l--frame is--linkBox set--hov -ar:21/9 -ov:hidden">
+<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" />
   <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;">

package/dist/data/guides/tokens.md

@@ -198,6 +198,24 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 | `--black` | `#000` |
 | `--white` | `#fff` |
 
+### キーカラー変数 (`--keycolor`)
+
+`--keycolor` は、カラートークンとは性質が異なる。初めから値があるわけではない。ボックス全体のカラーリングなどを行う際の「軸となる色」を指定するための変数。
+
+`--keycolor: var(--red)` のように指定しておくことで、そのボックス自身や子要素のカラー Props（`c`, `bgc`, `bdc` など）で 特定の色をハードコーディングせずに `--keycolor` 経由で参照できるようにすることができる。代表的な使用例は `u--cbox` ユーティリティクラス。
+
+```html
+<!-- ボックスにキーカラーを設定、テキストをキーカラーに連動させる例 -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="-c:var(--keycolor)">...</p>
+</div>
+```
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
 - `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
 - どちらも最終的に `var(--{name})` に変換される