@lism-css/mcp 0.11.0 → 0.13.0

package/dist/data/guides/primitives/a--decorator.md

@@ -0,0 +1,45 @@
+# a--decorator / `<Decorator>`
+
+コンテンツを装飾するための空要素として使うクラス。`<Decorator>` はデフォルトで `aria-hidden="true"` が付与されます。
+
+## 基本情報
+
+- クラス名: `a--decorator`
+- コンポーネント: `<Decorator>`
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--decorator/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
+| `clipPath` | `style.clipPath` に渡す |
+| `boxSizing` | `style.boxSizing` に渡す |
+
+## Usage
+
+### 使用例（コーナー装飾）
+
+`pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
+
+```jsx
+<Box p="30" pos="relative">
+  <p>本文テキスト...</p>
+  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-x-s bd-y-s bdc="current" />
+  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-x-e bd-y-e bdc="current" />
+</Box>
+```
+
+```html
+<div class="l--box -p:30 -pos:relative">
+  <p>本文テキスト...</p>
+  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-x-s -bd-y-s -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
+  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-x-e -bd-y-e -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [a--spacer](./a--spacer.md) — 要素間スペース
+- [a--divider](./a--divider.md) — 区切り線
+- [is--layer](./is--layer.md) — `position: absolute` のオーバーレイ

package/dist/data/guides/primitives/a--divider.md

@@ -0,0 +1,69 @@
+# a--divider / `<Divider>`
+
+コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` はデフォルトで `aria-hidden="true"` が付与されます。
+
+## 基本情報
+
+- クラス名: `a--divider`
+- コンポーネント: `<Divider>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_divider.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--divider/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `bdw` / `bds` / `bdc` | 区切り線のボーダー幅 / スタイル / 色 |
+| `isVertical` | 縦方向の区切り線にする（`is--vertical` クラス付与） |
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
+<Divider />
+<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
+```
+
+```html
+<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
+<div class="a--divider" aria-hidden="true"></div>
+<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
+```
+
+### スタイルの変更
+
+```jsx
+<Divider bds="dotted" bdw="4px" bdc="blue" />
+```
+
+```html
+<div class="a--divider" aria-hidden="true" style="--bds: dotted; --bdw: 4px; --bdc: var(--blue)"></div>
+```
+
+### 縦方向の区切り線
+
+`isVertical` を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
+
+```jsx
+<Flex ai="center" g="20">
+  <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
+  <Divider isVertical bds="dashed" bdw="2px" aslf="stretch" />
+  <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
+</Flex>
+```
+
+```html
+<div class="l--flex -g:20 -ai:center">
+  <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
+  <div class="a--divider is--vertical -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
+  <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [a--spacer](./a--spacer.md) — 要素間のスペース確保
+- [a--decorator](./a--decorator.md) — 装飾用空要素
+- [a--icon](./a--icon.md) — アイコン要素

package/dist/data/guides/primitives/a--icon.md

@@ -0,0 +1,105 @@
+# a--icon / `<Icon>`
+
+アイコン要素を表示するためのクラス。`flex-shrink: 0`、デフォルトサイズ `1em`。
+
+## 基本情報
+
+- クラス名: `a--icon`
+- コンポーネント: `<Icon>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_icon.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--icon/
+
+## 出力されるHTML構造
+
+`<Icon>` は `label` の有無でアクセシビリティ属性を自動切り替えします。
+
+```html
+<!-- label なし -->
+<svg class="a--icon" aria-hidden="true">...</svg>
+
+<!-- label あり -->
+<svg class="a--icon" aria-label="..." role="img">...</svg>
+```
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `icon` | アイコンを指定。文字列（プリセット名）・オブジェクト（`{as, ...exProps}`）のどちらでも可 |
+| `size` | プリセットアイコン使用時の `width` / `height`（通常は `fz` で指定するほうが推奨） |
+| `label` | `aria-label` として出力。指定があれば `role="img"`、なければ `aria-hidden="true"` |
+
+## Usage
+
+`<Icon>` には**4つの使い方**があります。
+
+### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
+
+`react-icons`, `@phosphor-icons/react`, `lucide-react` などのサードパーティアイコンコンポーネントを `as` で渡すと、Lism が未処理の props は自動的にそのコンポーネントに転送されます。外部コンポーネント専用の props を明示的に分離したい場合は `exProps` を使います。
+
+```jsx
+import { SmileyIcon } from '@phosphor-icons/react';
+import { Icon } from 'lism-css/react';
+
+// 基本形
+<Icon as={SmileyIcon} fz="2rem" />
+
+// exProps で外部 props を明示的に分離
+<Icon as={SmileyIcon} exProps={{ weight: 'fill', size: '3em' }} c="blue" />
+
+// 上と同じ結果（Lism が "weight" を処理しないため最終的に SmileyIcon に渡る）
+<Icon as={SmileyIcon} weight="fill" c="blue" />
+```
+
+### 2. `as` と `exProps` を `icon` prop に一括指定
+
+`icon={{as: Component, ...exProps}}` の形式で、`as` と `exProps` を1つのオブジェクトとしてまとめて渡せます。アイコンを選択制にする親コンポーネントを作るときに便利です。
+
+```jsx
+import { Home } from 'lucide-react';
+
+<Icon icon={{ as: Home, strokeWidth: 1, size: 64 }} />
+
+// 同じ結果（分割形式）
+<Icon as={Home} exProps={{ strokeWidth: 1, size: 64 }} />
+```
+
+### 3. プリセットアイコンを使う
+
+`lism-css` パッケージ内に [Phosphor Icons](https://phosphoricons.com/) ベースのプリセットアイコンが同梱されています。`icon="アイコン名"` の文字列で呼び出せます。
+
+```jsx
+<Icon icon="menu" />
+<Icon icon="lightbulb" fz="2xl" c="blue" />
+<Icon icon="warning" size="40px" />
+```
+
+プリセット一覧のエクスポート元:
+
+```jsx
+import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
+```
+
+### 4. SVG の `path` を直接記述する
+
+`viewBox` を指定すると `<svg>` 要素として出力されるため、子要素に `<path>` 等をそのまま書けます。
+
+```jsx
+<Icon viewBox="0 0 256 256" label="Smiley icon" fz="4xl" c="blue">
+  <path d="M128,24A104,104,0,1,0,232,128..." />
+</Icon>
+```
+
+### 5. `src` で画像をアイコンとして使う
+
+`src` を指定すると `<img>` として出力されます（厳密には4パターンに加えて画像指定も可能）。
+
+```jsx
+<Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />
+```
+
+## 関連プリミティブ
+
+- [a--divider](./a--divider.md) — 区切り線
+- [a--spacer](./a--spacer.md) — 空白要素
+- [a--decorator](./a--decorator.md) — 装飾用要素

package/dist/data/guides/primitives/a--spacer.md

@@ -0,0 +1,63 @@
+# a--spacer / `<Spacer>`
+
+要素間のスペースを確保するクラス。`<Spacer>` はデフォルトで `aria-hidden="true"` が付与されます。
+
+## 基本情報
+
+- クラス名: `a--spacer`
+- コンポーネント: `<Spacer>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_spacer.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--spacer/
+
+## 専用Props
+
+`<Spacer>` では **`w` / `h` に対して SPACE トークンの値**が使えます（他のコンポーネントでは SIZE トークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
+
+## Usage
+
+### 縦方向のスペース
+
+```jsx
+<p>Content...</p>
+<Spacer h="100px" />
+<p>Content...</p>
+```
+
+```html
+<p>Content...</p>
+<div class="a--spacer -h" style="--h:100px" aria-hidden="true"></div>
+<p>Content...</p>
+```
+
+### SPACE トークンを使う
+
+```jsx
+<p>Content...</p>
+<Spacer h="60" />
+<p>Content...</p>
+```
+
+```html
+<p>Content...</p>
+<div class="a--spacer -h" style="--h:var(--s60)" aria-hidden="true"></div>
+<p>Content...</p>
+```
+
+### 横方向のスペーサー
+
+Flex コンテナ内で `w` を指定すれば横方向のスペーサーとしても使えます。
+
+```jsx
+<Flex g="10">
+  <Box p="20" bd>Box</Box>
+  <Spacer w="40" />
+  <Box p="20" bd>Box</Box>
+  <Box p="20" bd>Box</Box>
+</Flex>
+```
+
+## 関連プリミティブ
+
+- [a--divider](./a--divider.md) — 区切り線
+- [a--decorator](./a--decorator.md) — 装飾用空要素
+- [l--stack](./l--stack.md) — `gap` で余白を管理する縦積み

package/dist/data/guides/primitives/is--boxLink.md

@@ -0,0 +1,97 @@
+# is--boxLink / `<BoxLink>`
+
+ボックス全体をクリック可能なリンク領域にするクラス。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `href` | リンク先を指定。`href` があれば `<BoxLink>` 自体が `<a>` タグに、なければ `<div>` として出力される（**特殊挙動**） |
+
+通常の `<Lism>` エイリアスコンポーネントと異なり、`<BoxLink>` だけは `href` 指定の有無で出力タグが動的に切り替わります。
+
+## Usage
+
+BoxLink には主に2通りの使い方があります。
+
+### パターン1: `<BoxLink>` 自身を `<a>` にする
+
+`href` を指定すると `<BoxLink>` 自体が `<a>` タグとして出力されます。シンプルなカード全体リンクに最適。
+
+```jsx
+<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">
+    MORE →
+  </Group>
+</BoxLink>
+```
+
+```html
+<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>
+</a>
+```
+
+### パターン2: `<div>` + 内部に `is--coverLink`
+
+`<BoxLink>` は `<div>` にしたまま、内部のアンカー要素に `is--coverLink` クラスを付けてボックス全体をクリック可能にします。**BoxLink 内部にさらに別のリンクを配置したい場合はこちらを選ぶこと**。
+
+```jsx
+<BoxLink as="section" p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
+  <Group fz="xl" fw="bold">
+    <Link isCoverLink href="/article/1">
+      Heading link text
+    </Link>
+  </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>
+  </Group>
+</BoxLink>
+```
+
+```html
+<div class="is--boxLink -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--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>
+  </div>
+</div>
+```
+
+## Opt-in スタイル
+
+### Tabキーフォーカス時のアウトラインをボックス全体に広げる
+
+パターン2 の場合、デフォルトでは Tab フォーカス時のアウトラインがリンクテキスト部分のみに表示されます。ボックス全体に広げたい場合は以下のCSSを追記してください。
+
+```css
+@supports selector(:has(*)) {
+  .is--boxLink:has(.is--coverLink:focus-visible) {
+    outline: auto 1px;
+    outline: auto 1px -webkit-focus-ring-color;
+  }
+  .is--coverLink:focus {
+    outline: 0;
+  }
+}
+```
+
+## 関連プリミティブ
+
+- [is--container](./is--container.md) — コンテナクエリの基準要素
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー

package/dist/data/guides/primitives/is--container.md

@@ -0,0 +1,46 @@
+# is--container / `<Container>`
+
+`container-type` を宣言してコンテナクエリを有効にするクラス。レスポンシブ Property Class（`p={['10', '30']}` のような配列指定）を使うとき、基準要素として必要になります。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 使い方
+
+`<Container>` は `<Lism isContainer>` のエイリアスです。`isContainer` Prop は他のコンポーネントにも使用できます（例: `<Flow isContainer>`）。
+
+| Prop | 出力 |
+|------|------|
+| `isContainer` | `.is--container` |
+
+## Usage
+
+### 使用例
+
+```jsx
+<Container isWrapper="s" p="20">
+  <Box bd p={['10', '30']}>
+    このBOXは、padding が切り替わります
+  </Box>
+</Container>
+```
+
+```html
+<div class="is--container is--wrapper -contentSize:s -p:20">
+  <div class="l--box -bd -p:10 -p_sm" style="--p_sm: var(--s30)">
+    このBOXは、padding が切り替わります
+  </div>
+</div>
+```
+
+子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
+
+## 関連プリミティブ
+
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー（`isContainer` と併用可）
+- [l--flow](./l--flow.md) — 記事コンテンツ向けフローレイアウト
+- [l--box](./l--box.md) — 汎用ボックス

package/dist/data/guides/primitives/is--layer.md

@@ -0,0 +1,71 @@
+# is--layer / `<Layer>`
+
+`position: absolute` で親要素の上に被せて配置するオーバーレイ用クラス。親には `pos="relative"` が必要です。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 使い方
+
+`<Layer>` は `<Lism isLayer>` のエイリアスです。他コンポーネントにも `isLayer` Prop で付与できます（例: `<Frame isLayer>`）。
+
+## Usage
+
+### 基本的な使い方
+
+親要素に `pos="relative"` を指定し、子に `<Layer>` を置くことで上に重なるオーバーレイになります。
+
+```jsx
+<Box pos="relative" py="40">
+  <Text fz="2xl" fw="bold" ta="center">BACKGROUND</Text>
+  <Layer p="15" bgc="purple:10%">
+    <p>Layer Contents...</p>
+  </Layer>
+</Box>
+```
+
+```html
+<div class="l--box -pos:relative -py:40">
+  <p class="-fz:2xl -fw:bold -ta:center">BACKGROUND</p>
+  <div class="is--layer -p:15 -bgc" style="--bgc: color-mix(in srgb, var(--purple) 10%, transparent)">
+    <p>Layer Contents...</p>
+  </div>
+</div>
+```
+
+### backdrop-filter の活用
+
+`style` プロパティで `backdropFilter` を直接指定すると、背景をブラー・セピアなどの効果で加工できます。
+
+```jsx
+<Frame ar="2/1" pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Layer style={{ backdropFilter: 'contrast(1.1) sepia(0.4)' }} />
+</Frame>
+```
+
+### メディアレイヤー（画像を背景にする）
+
+`<Frame isLayer>` でメディアをレイヤー化して背景画像として配置し、さらに `<Layer>` で暗幕を重ね、本文は `pos="relative"` で上にのせる構成が定番です。
+
+```jsx
+<Box pos="relative" py="50" px="40">
+  <Frame isLayer>
+    <Media src="/img/a-2.jpg" alt="" width="960" height="640" />
+  </Frame>
+  <Layer bgc="black:50%" />
+  <Stack pos="relative" g="30" c="white">
+    <p>本文テキスト...</p>
+  </Stack>
+</Box>
+```
+
+## 関連プリミティブ
+
+- [l--frame](./l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
+- [l--grid](./l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
+- [l--center](./l--center.md) — レイヤー内のコンテンツ中央寄せ

package/dist/data/guides/primitives/is--vertical.md

@@ -0,0 +1,52 @@
+# is--vertical
+
+要素に縦書きモード（`writing-mode`）を適用するクラス。対応するコンポーネントエイリアスはありません（直接クラス指定で使用）。
+
+## 基本情報
+
+- クラス名: `is--vertical`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_vertical.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--vertical/
+
+## クラスバリエーション
+
+縦書き用の値はトークン（`--vertical-mode`）で管理されており、`lang` 属性に合わせて `vertical-rl` / `vertical-lr` を上書きできます。
+
+| クラス名 | 説明 |
+|---------|------|
+| `is--vertical` | 常に縦書きモードにする |
+| `is--vertical@sm` | `sm` サイズ以上で縦書きにする |
+| `is--vertical@md` | `md` サイズ以上で縦書きにする |
+
+**注意**: `is--vertical@sm`, `is--vertical@md` を使う場合は、**`set--bp` クラスを併用する必要があります**。
+
+## Usage
+
+### 常に縦書き
+
+```html
+<div class="is--vertical">
+  <p>縦書きテキスト...</p>
+</div>
+```
+
+### `sm` 以上で縦書きにする
+
+```jsx
+<Flow set="gutter" py="20" w="100%" h="20em" className="is--vertical@sm set--bp">
+  <p>本文テキスト...</p>
+  <p>本文テキスト...</p>
+</Flow>
+```
+
+```html
+<div class="is--vertical@sm set--bp l--flow set--gutter -py:20 -w:100% -h" style="--h: 20em">
+  <p>本文テキスト...</p>
+  <p>本文テキスト...</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flow](./l--flow.md) — 縦書きコンテンツと組み合わせる記事フロー
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅の制限

package/dist/data/guides/primitives/is--wrapper.md

@@ -0,0 +1,87 @@
+# is--wrapper / `<Wrapper>`
+
+直下のコンテンツ幅を一括制御するクラス。`max-width` とセンタリングを担い、記事・セクションのコンテンツ幅の統一に使います。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 使い方
+
+`<Wrapper>` は `<Lism isWrapper>` のエイリアスです。`isWrapper` Prop は他のコンポーネントにも使用できます（例: `<Flow isWrapper>`）。
+
+| 指定 | 出力 |
+|------|------|
+| `isWrapper` | `.is--wrapper` |
+| `isWrapper="s"` | `.is--wrapper .-contentSize:s` |
+| `isWrapper="l"` | `.is--wrapper .-contentSize:l` |
+| `isWrapper="20rem"`（任意値） | `.is--wrapper` + `style="--contentSize: 20rem"` |
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `contentSize` | コンテンツサイズ。`s` / `l` / トークン / 任意値 |
+
+```jsx
+// 下記の ① と ② は同じ結果
+<Flow isWrapper="s" isContainer>...</Flow>
+<Wrapper contentSize="s" layout="flow" isContainer>...</Wrapper>
+```
+
+## Usage
+
+### `layout` との組み合わせ
+
+```jsx
+<Wrapper layout="flow" p="20">
+  <p>Content</p>
+  <p>Content</p>
+</Wrapper>
+```
+
+```html
+<div class="l--flow is--wrapper -p:20">
+  <p>Content</p>
+  <p>Content</p>
+</div>
+```
+
+### `contentSize` 指定
+
+```jsx
+<Wrapper contentSize="s" layout="flow" p="20">
+  <p>Content</p>
+  <p>Content</p>
+</Wrapper>
+```
+
+```html
+<div class="l--flow is--wrapper -contentSize:s -p:20">
+  <p>Content</p>
+  <p>Content</p>
+</div>
+```
+
+### 任意値のコンテンツ幅
+
+```jsx
+<Lism isWrapper="20rem" p="20">
+  <div>Contents...</div>
+</Lism>
+```
+
+```html
+<div class="is--wrapper -p:20" style="--contentSize: 20rem">
+  <div>Contents...</div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [is--container](./is--container.md) — コンテナクエリ基準（`isContainer` と併用可）
+- [l--flow](./l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
+- [l--box](./l--box.md) — 汎用ボックス

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

@@ -0,0 +1,31 @@
+# l--box / `<Box>`
+
+コンテンツをグループ化するだけのシンプルなクラス。汎用的な箱として、パディング・ボーダー・背景色などの指定に使います。
+
+## 基本情報
+
+- クラス名: `l--box`
+- コンポーネント: `<Box>`
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--box/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Box p="30" bgc="base-2" bxsh="10" bdrs="10">
+  <p>コンテンツ...</p>
+</Box>
+```
+
+```html
+<div class="l--box -p:30 -bgc:base-2 -bxsh:10 -bdrs:10">
+  <p>コンテンツ...</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flow](./l--flow.md) — テキスト主体のフローレイアウト
+- [l--stack](./l--stack.md) — Flex 縦並び
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー