@lism-css/mcp 0.11.0 → 0.13.0

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/prop-responsive.md

@@ -0,0 +1,54 @@
+# レスポンシブ対応
+
+Lism CSS はコンテナクエリをデフォルトで採用しています。  
+ブレークポイント: `sm: 480px`, `md: 800px`（`lg: 1120px` はカスタマイズにより利用可能）
+
+## TOC
+
+- [HTML / Property Class での指定](#html--property-class-での指定)
+- [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
+
+[詳細](https://lism-css.com/docs/responsive/)
+
+---
+
+## HTML / Property Class での指定
+
+ブレークポイント用のクラス `-{prop}_{bp}` と CSS変数 `--{prop}_{bp}` を組み合わせます。
+
+```html
+<!-- sm 以上で p:30, md 以上で p:40 に切り替え -->
+<div class="-p:20 -p_sm -p_md" style="--p_sm: var(--s30); --p_md: var(--s40)">
+  ...
+</div>
+
+<!-- sm 以上で fz を l に切り替え -->
+<div class="-fz:s -fz_sm" style="--fz_sm: var(--fz--l)">
+  ...
+</div>
+```
+
+**仕組み:**
+1. `-p_sm` クラスは `@container (min-width: 480px)` 内で `padding: var(--p_sm)` を適用
+2. `--p_sm` 変数で切り替え先の値を指定
+3. `overwriteBaseVar` 対応の Prop はベース変数（`--p`）も上書きされる
+
+## Lism コンポーネントでの指定
+
+配列形式またはオブジェクト形式でレスポンシブ値を指定します。
+
+```jsx
+// 配列形式: [デフォルト, sm, md]
+<Box p={[20, 30, 40]} fz={['s', 'm', 'l']} />
+
+// オブジェクト形式
+<Box p={{ base: '20', sm: '30', md: '40' }} />
+```
+
+出力される HTML:
+
+```html
+<div class="l--box -p:20 -p_sm -p_md -fz:s -fz_sm -fz_md"
+     style="--p_sm: var(--s30); --p_md: var(--s40); --fz_sm: var(--fz--m); --fz_md: var(--fz--l)">
+</div>
+```