@lism-css/mcp 0.22.0 → 0.24.0

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

@@ -2,91 +2,20 @@
 
 直下のメディア要素（`img`, `video`, `iframe`）を自身のサイズにフィットさせて表示するクラス。アスペクト比固定のメディア枠を簡単に作れます。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--frame.md
 
-- クラス名: `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.md
+## 既定の挙動
+
+- `overflow:hidden`を既定で持ちます。通常`ov="hidden"`は足しません。
+- 直下の`img`/`video`/`iframe`を`display:block;width:100%;height:100%;object-fit:cover`でフレームにフィットさせます。
+- 直下メディアへ`w`/`h`/`object-fit:cover`を重ねないでください。`object-fit:contain`や`object-position`など既定と違う意図がある場合だけ追加します。
 
 ## 専用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](../trait-class/is--layer.md) — `l--frame` 内のオーバーレイ配置に使用

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

@@ -2,64 +2,13 @@
 
 コンテンツを CSS Grid レイアウトで配置するクラス。`gtc` / `gta` / `ga` などの Grid プロパティと組み合わせて使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--grid.md
 
-- クラス名: `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.md
+## 既定の挙動
 
-## 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 のトラックを継承し、複数行を揃えたレイアウトが作れます。記事一覧やテーブル風レイアウトに活用できます。
+- `display:grid`。
+- 直下の子要素に`min-width:0`を付与し、grid itemのはみ出しを抑えます。
+- `grid-template-columns`や`gap`は既定で持たないため、必要な時だけ`gtc`/`g`などで指定します。
 
 ## 関連プリミティブ
 

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

@@ -2,52 +2,13 @@
 
 複数の要素を Flex レイアウトで縦並びに配置するクラス。`gap` で余白を管理します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--stack.md
 
-- クラス名: `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.md
+## 既定の挙動
 
-## 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>
-```
+- `display:flex`。
+- `flex-direction:column`で縦並びにします。
+- `gap`は既定で持たないため、間隔は`g`/`-g:*`で指定します。通常`fxd="column"`は足しません。
 
 ## 関連プリミティブ
 

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

@@ -2,66 +2,21 @@
 
 複数列 ↔ 1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラス。Flexbox ベースで、親コンテナ幅に応じて自動的に折り返します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--switchColumns.md
 
-- クラス名: `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
+## 既定の挙動
+
+- `display:flex`。
+- `flex-wrap:wrap`で折り返しを有効化済み。
+- `--breakSize:var(--sz--xs)`を初期値にし、直下子要素の`flex-basis`で親幅に応じた縦横切替を行います。
+- 通常`fxw="wrap"`は足しません。
 
 ## 専用Props
 
 | Prop | CSS変数 | デフォルト | 説明 |
-|------|--------|-----------|------|
+| --- | --- | --- | --- |
 | `breakSize` | `--breakSize` | `var(--sz--xs)` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
 
-## Usage
-
-### デフォルト幅で利用する
-
-```jsx
-<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>
-</SwitchColumns>
-```
-
-```html
-<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>
-</div>
-```
-
-### `breakSize` の指定
-
-```jsx
-<SwitchColumns breakSize="s" g="20">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchColumns>
-```
-
-```html
-<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>
-```
-
-### `flex-grow` で比率を調整
-
-子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
-
-```jsx
-<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>
-</SwitchColumns>
-```
-
 ## 関連プリミティブ
 
 - [l--autoColumns](./l--autoColumns.md) — 最小幅ベースの自動段組

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

@@ -2,58 +2,21 @@
 
 `cols`（列数）と `rows`（行数）を指定して、**均等なタイル型グリッドレイアウト**を構成するクラス。内部的には `grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr))` を使用します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--tileGrid.md
 
-- クラス名: `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.md
+## 既定の挙動
+
+- `display:grid`。
+- `grid-template:repeat(var(--rows, 1), minmax(0, 1fr)) / repeat(var(--cols, 1), minmax(0, 1fr))`で行数・列数を均等に割ります。
+- `rows`/`cols`を省略するとどちらも1です。
 
 ## 専用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）のカラム

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`**: ブレイクポイントに依存せず、コンテンツ幅で自動切り替え