@lism-css/mcp 0.15.1 → 0.18.0

package/dist/data/guides/components-core.md

@@ -51,8 +51,6 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | Prop | 説明 | 例 |
 |------|------|-----|
 | `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
-| `lismClass` | コンポーネント基底となる `c--*` クラスを指定。`variant` による BEM 展開の対象 | `lismClass="c--myComponent"` |
-| `variant` | `lismClass` 先頭クラスに対する BEM Modifier を付与（`c--` 専用。`a--` / `l--` には展開されない） | `variant="secondary"` |
 | `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
 | `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
 | `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="var:hov var:bxsh"`, `set="-plain"` |
@@ -68,12 +66,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 <Media as={Image} src="..." p="20" bd />
 // → Image コンポーネントに { className: '-p:20 -bd' } が渡される
 
-// lismClass でコンポーネントクラスを付与
-<Lism lismClass="c--myComponent" p="10">...</Lism>
+// className でコンポーネントクラスを付与（c--* も className に直接書く）
+<Lism className="c--myComponent" p="10">...</Lism>
 // → <div class="c--myComponent -p:10">...</div>
 
-// variant でバリエーション
-<Lism lismClass="c--myComponent" variant="secondary">...</Lism>
+// BEM Modifier も className にそのまま列挙する
+<Lism className="c--myComponent c--myComponent--secondary">...</Lism>
 // → <div class="c--myComponent c--myComponent--secondary">...</div>
 
 // exProps で外部コンポーネント用プロパティを明示的に分離

package/dist/data/guides/components-ui.md

@@ -2,12 +2,20 @@
 
 `@lism-css/ui` パッケージには、Lism CSS の上に構築されたインタラクティブな UI コンポーネントが含まれます。
 
+import は **コンポーネント単位の deep path** （`@lism-css/ui/{react,astro}/<Component>`）から行うこと。`@lism-css/ui/react` / `@lism-css/ui/astro` からの一括 import は使わない。
+
 ```jsx
 // React
-import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/react';
+import { Accordion } from '@lism-css/ui/react/Accordion';
+import { Tabs } from '@lism-css/ui/react/Tabs';
+import { Modal } from '@lism-css/ui/react/Modal';
+import { Button } from '@lism-css/ui/react/Button';
 
 // Astro
-import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
+import { Accordion } from '@lism-css/ui/astro/Accordion';
+import { Tabs } from '@lism-css/ui/astro/Tabs';
+import { Modal } from '@lism-css/ui/astro/Modal';
+import { Button } from '@lism-css/ui/astro/Button';
 ```
 
 ## TOC

package/dist/data/guides/css-rules.md

@@ -114,9 +114,9 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 - Modifier は Block と併記して使用: `.c--button.c--button--outline`
 - Element は `_`（アンダースコア）一つ区切り
 - Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
-  - Block と自身の Modifier: `.c--xxx.c--xxx--variant`
+  - Block と自身の Modifier: `.c--xxx.c--xxx--modifier`
   - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- `a--` / `l--` には `variant` の BEM 展開は適用されない**
+- BEM の Modifier / Element 構造を持つのは `c--` のみ。`a--` / `l--` には適用しない
 
 `c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
 
@@ -148,7 +148,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 ```jsx
 export default function MyCard(props) {
-  return <Stack lismClass="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
+  return <Stack className="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
 }
 ```
 

package/dist/data/guides/customize.md

@@ -98,10 +98,32 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 ## `lism.config.js` でのカスタマイズ
 
-プロジェクトのルート直下に `lism.config.js` を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
 
 > **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
 
+### Vite プラグインの登録（必須）
+
+`lism.config.js` を読み込ませるには、Vite（または Astro）の設定ファイルで `lism-css/vite-plugin` を登録する必要があります。**未登録の場合、ファイルを置いてもデフォルト設定のまま**になります。
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import lismCss from 'lism-css/vite-plugin';
+
+export default defineConfig({
+  vite: {
+    plugins: [lismCss()],
+  },
+});
+```
+
+プラグインはプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
+
+```js
+plugins: [lismCss({ configPath: './config/lism.config.js' })],
+```
+
 ### フォーマット
 
 ```js
@@ -134,11 +156,16 @@ const { props, tokens } = DEFAULT_CONFIG;
 
 export default {
   props: {
-    d: { presets: [...(props.d.presets || []), 'flex', 'grid'] },
+    // 既存propにpresetsを追加
+    ta: { presets: [...(props.ta.presets || []), 'justify'] },
+    // 既存propにutility値を追加
     p: { utils: { box: '2em' } },
+    // 新しいpropの追加（filterはデフォルトに含まれない）
+    filter: { utils: { blur: 'blur(3px)' } },
   },
   tokens: {
-    bdrs: [...(tokens.bdrs || []), '5'],
+    // tokenClass:1 のpropは、tokens を追加するだけで自動でユーティリティ化される
+    lts: [...(tokens.lts || []), '2xl'],
   },
   traits: {
     isHoge: 'is--hoge',
@@ -150,15 +177,15 @@ export default {
 
 | 入力 | 出力されるクラス |
 |------|----------------|
-| `d="flex"` | `-d:flex` |
-| `d="grid"` | `-d:grid` |
+| `ta="justify"` | `-ta:justify` |
 | `p="box"` | `-p:box` |
-| `bdrs="5"` | `-bdrs:5` |
+| `filter="blur"` | `-filter:blur` |
+| `lts="2xl"` | `-lts:2xl` |
 | `isHoge` | `is--hoge` |
 
 ```jsx
-<Box p="box" d="flex" bdrs="5" isHoge>Box</Box>
-// → <div class="l--box is--hoge -p:box -d:flex -bdrs:5">Box</div>
+<Box p="box" ta="justify" filter="blur" lts="2xl" isHoge>Box</Box>
+// → <div class="l--box is--hoge -p:box -ta:justify -filter:blur -lts:2xl">Box</div>
 ```
 
 
@@ -166,7 +193,31 @@ export default {
 
 `lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
 
-### 1. CLI コマンドで CSS を再ビルド
+### 1. 軽微な追加であれば手書きで済ませる（推奨ライト）
+
+カスタムトークンが少数で済むなら、CLI 再ビルドや SCSS 構成変更まで踏み込まず、Lism Props の `:value` 記法（→ [property-class.md](./property-class.md)）と `global.css` への手書きで十分。
+
+```css
+/* global.css */
+@layer lism-base {
+  :root {
+    --lts--2xl: 0.15em;
+  }
+}
+
+/* Property Class は @layer を付けない */
+.-lts\:2xl {
+  letter-spacing: var(--lts--2xl);
+}
+```
+
+```jsx
+<Text lts=":2xl">...</Text>
+```
+
+トークンを体系的に拡張したい場合のみ、後述の CLI / SCSS 経由に切り替える。
+
+### 2. CLI コマンドで CSS を再ビルド
 
 ```bash
 npx lism-css build
@@ -175,46 +226,49 @@ npx lism-css build
 `lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
 
 ```css
-.-d\:flex { display: flex; }
-.-d\:grid { display: grid; }
+.-ta\:justify { text-align: justify; }
 .-p\:box { padding: 2em; }
-.-bdrs\:5 { border-radius: var(--bdrs--5); }
+.-filter\:blur { filter: blur(3px); }
+.-lts\:2xl { letter-spacing: var(--lts--2xl); }
 ```
 
 > **注意**:
-> - トークン CSS 変数（例: `--bdrs--5`）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - 生成されるのはあくまで `var(--lts--2xl)` を参照する **ユーティリティクラスまで**。参照先の CSS 変数（`:root { --lts--2xl: ... }` のような **値そのもの** の定義）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
 
-### 2. 手動で CSS を追記
+### 3. 手動で CSS を追記
 
 CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
 
 ```css
-:root { --bdrs--5: 0.125rem; }
-.is--hoge { /* ... */ }
+@layer lism-base {
+  :root {
+    --lts--2xl: 0.15em;
+  }
+}
+
+@layer lism-trait {
+  .is--hoge { /* ... */ }
+}
 ```
 
-### 3. SCSS で `lism.config.js` と整合させる
+### 4. SCSS で `lism.config.js` と整合させる
 
 SCSS 経由で読み込む構成なら、`lism.config.js` と同じ追加分を `$props` の `utilities` 設定として書いておけば、ビルドコマンドなしで反映できます。
 
 ```scss
 @use '../path-to/node_modules/lism-css/scss/setting' with (
   $props: (
-    'd': (
-      utilities: (
-        'flex': 'flex',
-        'grid': 'grid',
-      ),
-    ),
+    'ta': ( utilities: ( 'justify': 'justify' ) ),
     'p': ( utilities: ( 'box': '2em' ) ),
-    'bdrs': ( utilities: ( '5': 'var(--bdrs--5)' ) ),
+    'filter': ( utilities: ( 'blur': 'blur(3px)' ) ),
+    'lts': ( utilities: ( '2xl': 'var(--lts--2xl)' ) ),
   )
 );
 @use '../path-to/node_modules/lism-css/scss/main';
 
 // トークン追記
 @layer lism-base {
-  :root { --bdrs--5: 0.125rem; }
+  :root { --lts--2xl: 0.15em; }
 }
 ```

package/dist/data/guides/naming.md

@@ -21,7 +21,7 @@
 |------|------|-----|
 | 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
 | カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
-| スペーシング | `--s{Token}` | `--s10`, `--s40` |
+| 余白 | `--s{Token}` | `--s10`, `--s40` |
 
 トークンのバリエーション:
 

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

@@ -119,7 +119,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 #### 補足
 
 - 各 Primitive の詳細・使用例は [primitives/](./primitives/) 配下の個別ファイルを参照
-- レスポンシブな値（配列指定）を使う場合は祖先要素に `is--container` が必須（[prop-responsive.md](./prop-responsive.md)）
+- レスポンシブな値（配列指定）を使う場合は祖先要素に `is--container` が必須（[responsive.md](./responsive.md)）
 
 
 ## Atomic Primitive（`a--`）

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

@@ -11,7 +11,7 @@
 
 ## 専用Props
 
-`<Spacer>` では **`w` / `h` に対して SPACE トークンの値**が使えます（他のコンポーネントでは SIZE トークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
+`<Spacer>`では **`w` / `h` に対してSPACEトークンの値**が使えます（他のコンポーネントではSIZEトークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
 
 ## Usage
 
@@ -29,7 +29,7 @@
 <p>Content...</p>
 ```
 
-### SPACE トークンを使う
+### SPACEトークンを使う
 
 ```jsx
 <p>Content...</p>

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

@@ -1,10 +1,10 @@
 # -max-sz（最大幅）
 
-コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `container` を持つ。
+コンテンツの最大幅（`max-inline-size`）を制御する Property Class。標準のコンテンツサイズトークン（`xs`〜`xl`）に加え、特殊挙動の `full` / `bleed` を持つ。
 
 ## 基本情報
 
-- クラス名: `-max-sz:{xs|s|m|l|xl|full|container}`
+- クラス名: `-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
@@ -32,26 +32,30 @@
   max-inline-size: 100%;
 
   :where(.has--gutter) > & {
+    inline-size: auto;
     max-inline-size: calc(100% + var(--gutter-size) * 2);
     margin-inline: calc(var(--gutter-size) * -1);
   }
 }
 ```
 
-`has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。
+`has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。`inline-size: auto` は、親が `is--wrapper` の場合に当たる `inline-size: 100%` を打ち消し、負 margin による hang を効かせるためのリセット。
 
-### `-max-sz:container`
+### `-max-sz:bleed`
 
-**コンテナ要素を基準としたサイズ**まで広がる。`is--container` ごとに `--sz--container` が更新されるため、直近の container を基準にサイズ決定される。
+**最外側の `is--container` 幅**まで広がる。本文幅やネストされた container を突き抜け、ページ全体の full-bleed 表現を実現する。`is--container` が祖先に存在しない場合は、ビューポート幅（`100svi`）まで広がる fallback として動作する。
 
 ```scss
-.-max-sz\:container {
-  max-inline-size: var(--sz--container, 100cqi);
-  margin-inline: calc(50% - var(--sz--container) / 2);
+.-max-sz\:bleed {
+  inline-size: auto;
+  max-inline-size: var(--sz--bleed, 100svi);
+  margin-inline: calc(50% - var(--sz--bleed, 100svi) / 2);
 }
 ```
 
-`margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても container 基準の幅に広げつつ中央に揃う。
+`--sz--bleed` は最外側の `is--container` 直下の子要素でだけ `100cqi` に上書きされ、ネストされた `is--container` は再度上書きしないため、内側の子要素は外側の値を inherit で参照する。
+
+`margin-inline` で中央配置されるので、`is--wrapper` の内側にあっても最外側 container 基準の幅に広げつつ中央に揃う。`inline-size: auto` も同じく、`is--wrapper > *` で当たる `inline-size: 100%` を打ち消すためのリセット。
 
 ## Usage
 
@@ -74,14 +78,14 @@
 </div>
 ```
 
-### container 基準のサイズ
+### 最外側 container 基準のサイズ（full-bleed）
 
 ```html
 <div class="is--container">
   <div class="is--wrapper -contentSize:s">
     <p>狭めのコンテンツ</p>
-    <div class="-max-sz:container">
-      container 基準まで広がる要素
+    <div class="-max-sz:bleed">
+      最外側 container 幅まで広がる要素（ネストされた is--container も突き抜ける）
     </div>
   </div>
 </div>
@@ -94,6 +98,6 @@
 
 ## 関連
 
-- [`is--container`](../trait-class/is--container.md) — `-max-sz:container` の基準となるコンテナ
+- [`is--container`](../trait-class/is--container.md) — `-max-sz:bleed` の基準となるコンテナ
 - [`is--wrapper`](../trait-class/is--wrapper.md) — コンテンツ幅の制限
 - [`has--gutter`](../trait-class/has--gutter.md) — `-max-sz:full` と組み合わせる左右余白

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

@@ -6,6 +6,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ## TOC
 
 - [基本書式](#基本書式)
+  - [プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）](#プリセット外の値をクラス化するvalue-記法lism-props-限定)
 - [表の読み方](#表の読み方)
 - [全 Prop 一覧](#全-prop-一覧)
 - [特殊な Property Class](#特殊な-property-class)
@@ -22,7 +23,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 - [property-class/bd.md](./property-class/bd.md) — ボーダー（`-bd` / `-bd-{side}` 系）
 - [property-class/hov.md](./property-class/hov.md) — ホバー（`-hov:*` 系）
-- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:container` 等）
+- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:bleed` 等）
 
 ---
 
@@ -47,6 +48,16 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ```
 
 
+### プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）
+
+Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、 **強制的に Property Class を出力**できる。cssを追記してトークン値を独自に増やした場合などに活用できる。
+
+```jsx
+<Text lts=":2xl">...</Text>
+// → <p class="-lts:2xl">...</Text>
+```
+
+
 ## 表の読み方
 
 | カラム | 説明 |
@@ -72,7 +83,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `fs` | `font-style` | `-fs:italic` | — |
 | `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
 | `hl` | `--hl` 変数のみ | — | `-hl_sm`, `-hl_md` |
-| `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l` | — |
+| `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` | — |
@@ -103,14 +114,14 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `max-h` | `max-height` | `-max-h:100%` | `-max-h_sm`, `-max-h_md` |
 | `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:container` | — |
+| `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` | — | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
-- `-max-sz:container` — コンテナ幅に合わせる（`margin-inline` で中央配置）
+- `-max-sz:bleed` — 最外側の `is--container` 幅まで広がる（`margin-inline` で中央配置、`is--container` 祖先がなければ `100svi` まで広がる）
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
 
@@ -176,13 +187,13 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `i-y-s` | `inset-block-start` | — | — |
 | `i-y-e` | `inset-block-end` | — | — |
 
-### スペーシング — Padding
+### 余白 — Padding
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACE トークン) | `-p_sm`, `-p_md` |
-| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACE トークン) | `-px_sm`, `-px_md` |
-| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACE トークン) | `-py_sm`, `-py_md` |
+| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | `-p_sm`, `-p_md` |
+| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | `-px_sm`, `-px_md` |
+| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | `-py_sm`, `-py_md` |
 | `px-s` | `padding-inline-start` | — | `-px-s_sm`, `-px-s_md` |
 | `px-e` | `padding-inline-end` | — | `-px-e_sm`, `-px-e_md` |
 | `py-s` | `padding-block-start` | — | `-py-s_sm`, `-py-s_md` |
@@ -192,18 +203,18 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `pt` | `padding-top` | — | `-pt_sm`, `-pt_md` |
 | `pb` | `padding-bottom` | — | `-pb_sm`, `-pb_md` |
 
-SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80`
+SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80`
 
-### スペーシング — Margin
+### 余白 — Margin
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACE トークン) | `-m_sm`, `-m_md` |
-| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACE トークン) | `-mx_sm`, `-mx_md` |
-| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACE トークン) | `-my_sm`, `-my_md` |
+| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | `-m_sm`, `-m_md` |
+| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | `-mx_sm`, `-mx_md` |
+| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | `-my_sm`, `-my_md` |
 | `mx-s` | `margin-inline-start` | `-mx-s:auto` | `-mx-s_sm`, `-mx-s_md` |
 | `mx-e` | `margin-inline-end` | `-mx-e:auto` | `-mx-e_sm`, `-mx-e_md` |
-| `my-s` | `margin-block-start` | `-my-s:auto`, `-my-s:0`, `-my-s:5`, `-my-s:10`, `-my-s:20`, ... (SPACE トークン) | `-my-s_sm`, `-my-s_md` |
+| `my-s` | `margin-block-start` | `-my-s:auto`, `-my-s:0`, `-my-s:5`, `-my-s:10`, `-my-s:20`, ... (SPACEトークン) | `-my-s_sm`, `-my-s_md` |
 | `my-e` | `margin-block-end` | `-my-e:auto` | `-my-e_sm`, `-my-e_md` |
 | `ml` | `margin-left` | — | `-ml_sm`, `-ml_md` |
 | `mr` | `margin-right` | — | `-mr_sm`, `-mr_md` |
@@ -214,7 +225,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACE トークン) | `-g_sm`, `-g_md` |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | `-g_sm`, `-g_md` |
 | `cg` | `column-gap` | — | `-cg_sm`, `-cg_md` |
 | `rg` | `row-gap` | — | `-rg_sm`, `-rg_md` |
 
@@ -364,4 +375,3 @@ Property Class をコードベース全体で一括修正する場合、同じ P
 | JSX Props | `p="20"` / `p={20}` / `p={[20, 30]}` |
 | getLismProps オブジェクト | `{ p: '20' }` / `{ p: 20 }` |
 
-

package/dist/data/guides/{prop-responsive.md → responsive.md}

@@ -1,20 +1,55 @@
 # レスポンシブ対応
 
-Lism CSS はコンテナクエリをデフォルトで採用しています。  
-ブレークポイント: `sm: 480px`, `md: 800px`（`lg: 1120px` はカスタマイズにより利用可能）
+Lism CSS は**コンテナクエリ**をデフォルトで採用しています（メディアクエリへの切り替えは customize.md を参照）。
 
 ## TOC
 
+- [ブレイクポイント](#ブレイクポイント)
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive.md)
+[詳細](https://lism-css.com/docs/responsive/)
 
 ---
 
+## ブレイクポイント
+
+**モバイルファースト**で定義。各ラベルは「**そのサイズを超えた時から効く**」セマンティクスです（`sm` は「スマホ専用」ではなく「`sm` を超えたサイズで効く」ラベル）。**特定デバイスサイズに依存しないシンプルな閾値**を採用しています。
+
+```
+Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
+             │                       │                        │
+          sm:480px                md:800px               (lg:1120px)
+```
+
+| BP | 値 | 効くタイミング |
+|----|-----|----------------|
+| `sm` | 480px | sm 以上 |
+| `md` | 800px | md 以上 |
+| (`lg`) | 1120px | lg 以上 |
+
+**標準サポートは `sm` / `md` のみ。** `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+
+例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
+
+### SCSS から利用する
+
+ブレイクポイント自体を SCSS で参照する場合は `query` モジュール経由:
+
+```scss
+@use 'lism-css/scss/query' as query;
+
+@include query.bp-up('sm') {
+  // sm 以上で効くスタイル（width >= 480px）
+}
+@include query.bp-up('md') {
+  // md 以上で効くスタイル（width >= 800px）
+}
+```
+
 ## HTML / Property Class での指定
 
-ブレークポイント用のクラス `-{prop}_{bp}` と CSS変数 `--{prop}_{bp}` を組み合わせます。
+ブレイクポイント用のクラス `-{prop}_{bp}` と CSS変数 `--{prop}_{bp}` を組み合わせます。
 
 ```html
 <!-- sm 以上で p:30, md 以上で p:40 に切り替え -->
@@ -30,6 +65,7 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 
 **仕組み:**
 - BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
+- コンテナクエリ採用のため、レスポンシブ値を使うには祖先要素に `is--container` などコンテナ宣言が必要
 - 出力形式はプロパティによって 2 パターン（基本 / 例外）
 
 **基本パターン** — BP 用変数を直接読む:

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

@@ -10,9 +10,9 @@ set-- は目的別に 2 カテゴリに分かれます。
 | カテゴリ | 用途 | クラス |
 |---------|------|--------|
 | 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
-| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` / `set--var:s` |
 
-`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`）。
+`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`、`--s*` → `var:s`）。
 
 ## TOC
 
@@ -21,6 +21,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 - [`set--var:bxsh`](#set--varbxsh)
 - [`set--var:hov`](#set--varhov)
 - [`set--var:bdrsInner`](#set--varbdrsinner)
+- [`set--var:s`](#set--vars)
 
 [詳細](https://lism-css.com/docs/set-class.md)
 
@@ -37,6 +38,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 | `set--var:bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
 | `set--var:hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
 | `set--var:bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
+| `set--var:s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
 
 ---
 
@@ -158,3 +160,20 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
   <Lism bdrs="inner">...</Lism>
 </Lism>
 ```
+
+
+## `set--var:s`
+
+余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
+
+詳細なスケールと使い方は[tokens.mdの`set--var:s`ユーティリティ](./tokens.md#set--vars-ユーティリティ)を参照してください。
+
+使用例:
+
+```html
+<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+```
+
+```jsx
+<Button set="var:s" fz="s" py="10" px="20">...</Button>
+```