@lism-css/mcp 0.17.0 → 0.20.0

package/dist/data/docs-index.json

@@ -73,11 +73,11 @@
   {
     "sourcePath": "tokens.mdx",
     "title": "デザイントークン",
-    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
+    "description": "Lism CSS で定義されているカラー、余白、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
     "headings": ["COLOR", "Typography", "SPACE", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
     "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size", "color", "spacing", "typography"],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページでも詳細を解説。"
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。SPACEは --s5〜--s80（s25/s35 を含む12段階）、SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -108,12 +108,12 @@
   },
   {
     "sourcePath": "tokens/spacing.mdx",
-    "title": "スペーシングトークン",
-    "description": "Lism CSS のフィボナッチ数列に基づくスペーシングトークンと、対応するpropertyクラスについて解説します。",
+    "title": "余白トークン",
+    "description": "Lism CSS のフィボナッチ数列に基づく余白トークンと、対応するpropertyクラスについて解説します。",
     "category": "guide",
     "headings": ["SPACE: 余白のスケーリング", "対応する Property Class"],
-    "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class"],
-    "snippet": "フィボナッチ数列に基づいた余白スケーリング（5〜80）を定義。p, px, py, m, mx, my, g等のpropertyクラスでフルサポート。方向別プロパティはBP対応のみなど、対応範囲を詳細に解説。"
+    "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class", "set--var:s"],
+    "snippet": "フィボナッチ数列ベースの余白スケーリング（--s5〜--s80、s25/s35 を含む12段階）を定義。--s-unit（≒8px）を基準単位として算出。set--var:s クラスを使うと --s-unit が 0.5em に切り替わり、余白がフォントサイズ基準で再計算される。p, px, py, m, mx, my, mbs, g 等のpropertyクラスでフルサポート（トークン値 5〜80）。"
   },
   {
     "sourcePath": "property-class.mdx",
@@ -194,18 +194,36 @@
       "float",
       "clear",
       "whs",
-      "white-space"
+      "white-space",
+      "ps",
+      "pe",
+      "pbs",
+      "pbe",
+      "ms",
+      "me",
+      "mbe",
+      "padding-inline-start",
+      "padding-inline-end",
+      "padding-block-start",
+      "padding-block-end",
+      "margin-inline-start",
+      "margin-inline-end",
+      "margin-block-end",
+      "i-s",
+      "i-e",
+      "i-bs",
+      "i-be"
     ],
     "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。"
   },
   {
     "sourcePath": "responsive.mdx",
-    "title": "Prop Responsive",
+    "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
     "headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
-    "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md"],
-    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm, md ブレークポイントの値を指定。"
+    "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md", "lg"],
+    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm/md ブレークポイントの値を指定。ブレークポイントは sm(480px) / md(800px) / lg(1120px) の3段階。d・g・cols・グリッド系（gtc/gta/gtr/ga/gc/gr）は lg までサポート。"
   },
   {
     "sourcePath": "reset-css.mdx",
@@ -240,8 +258,8 @@
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
     "headings": [],
-    "keywords": ["set", "set class", "set--plain", "set--revert", "set--var:bxsh", "set--var:hov", "set--var:bdrsInner"],
-    "snippet": "HTML 要素の基礎スタイリングや変数セットを行うためのクラス (.set--{style})。set--plain / set--revert（基礎スタイリング）と set--var:bxsh / set--var:hov / set--var:bdrsInner（変数のセット）の 2 カテゴリで解説。"
+    "keywords": ["set", "set class", "set--plain", "set--revert", "set--var:bxsh", "set--var:hov", "set--var:bdrsInner", "set--var:s"],
+    "snippet": "HTML 要素の基礎スタイリングや変数セットを行うためのクラス (.set--{style})。set--plain / set--revert（基礎スタイリング）と set--var:bxsh / set--var:hov / set--var:bdrsInner / set--var:s（変数のセット）の 2 カテゴリで解説。"
   },
   {
     "sourcePath": "primitives.mdx",
@@ -268,7 +286,7 @@
   {
     "sourcePath": "base-styles.mdx",
     "title": "Base Styles",
-    "description": "@lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
+    "description": "lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
     "category": "guide",
     "headings": ["Reset CSS", "Base styles", "HTML基本スタイルのプレビュー"],
     "keywords": ["html", "base", "ベース", "スタイル", "要素", "reset"],
@@ -280,11 +298,20 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.20.0 (2026.05.20)",
+      "方向系 Property Class の命名整理 (#378)",
+      "ブレークポイント対応プロパティの整理 (#394)",
+      "hover 色のデフォルト変更 (#381)",
+      "`@lism-css/ui` v.0.20.0 (2026.05.20)",
+      "lism-css v.0.18.0 (2026.05.17)",
+      "`--sz--*` トークンを px 統一・80px 刻みで再設計 (#364)",
+      "spacing tokens 拡充と `set--var:s` の新設 (#377)",
       "lism-css v.0.17.0 (2026.05.09)",
       "-max-sz:bleed の新設 (#360)",
       "--REM 廃止と --fz--base の簡素化",
       "a タグのリンク装飾スタイル廃止",
       "Bug Fixes",
+      "`@lism-css/ui` v.0.17.0 (2026.05.09)",
       "lism-css v.0.16.1 (2026.04.29)",
       "lism-css v.0.16.0 (2026.04.21)",
       "`u--trimChildren` のリネームと除外方式の整理 (#324, #326)",
@@ -319,7 +346,7 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.17.0 の破壊的変更として -max-sz:container 廃止と -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）、u--trimChildren → u--trimAll へのリネームと除外方式整理（#324/#326）、u--collapseGrid → u--cells へのリネームと u--divide の新設（#323）、opacity トークンのセマンティック命名変更（#316）などがある。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.20.0 の破壊的変更として方向系 Property Class の命名整理（px-s/px-e → ps/pe、bd-x-s → bd-s 等、#378）、bp デフォルトサポート見直し（pl/pr/pt/pb 等廃止、d/g/cols/グリッド系は lg まで拡張、#394）、-hov:-bgc のデフォルト色変更と --neutral トークン追加（#381）など。v.0.18.0 では --sz--* トークンの px 統一・80px 刻みでの再設計（#364）、spacing tokens 拡充と set--var:s 新設（s25/s35 追加、#377）。v.0.17.0 では -max-sz:container 廃止と -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
@@ -583,7 +610,7 @@
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage", "`l--flow` を入れ子にする時の注意点"],
     "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root", "article body", "縦方向余白"],
-    "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin で管理。見出しタグは余白が大きくなる。is--skipFlowで余白打ち消しも可能。"
+    "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin（--flow と margin-block-start）で管理。見出しタグは余白が大きくなる。-flow:s で余白を小さく、任意値の指定も可能。is--skipFlow で次の兄弟要素との余白を打ち消しも可能。"
   },
   {
     "sourcePath": "primitives/l--autoColumns.mdx",
@@ -1090,6 +1117,15 @@
     "keywords": ["set--var:bdrsInner", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
     "snippet": "親要素の --bdrs と --p から内側の角丸 --bdrs--inner を自動計算。子要素で -bdrs:inner を使って適用。レスポンシブ対応。"
   },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--var:s",
+    "description": "余白トークン（--s5〜--s80）を現在のフォントサイズ基準で再計算するSetクラス。",
+    "category": "guide",
+    "headings": ["set--var:s"],
+    "keywords": ["set--var:s", "余白", "フォントサイズ", "--s-unit", "spacing", "スペーシング", "em", "ボタン", "バッジ"],
+    "snippet": "set--var:s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s80 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
+  },
   {
     "sourcePath": "trait-class.mdx",
     "title": "has--gutter",

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.17.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.20.0` / `@lism-css/ui@0.20.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
@@ -195,7 +195,7 @@ Figma 等のデザインデータから値を読み取って実装する場合
      - 一貫性・スケーラビリティを優先。微差は許容する。
    - **C. トークン全体の基準値を上書きする**
      - デザインのスケールに合わせて、`--s-unit` / `--fz-mol` などの基準変数や、 `--s10`, `--fz--xl` , `--bdrs--10` などの**具体的な各トークン変数を `global.css` で再定義**することで、トークン全体をデザインデータに揃える。
-     - 既存トークンの上書きで吸収できない場合に限り、`--s25` 等のカスタムトークンを追加する。
+     - 既存トークンの上書きで吸収できない場合に限り、`--s45` 等のカスタムトークンを追加する。
 
 4. 確認結果に従って実装する。
 
@@ -220,7 +220,7 @@ Figma 等のデザインデータから値を読み取って実装する場合
 - [trait-class.md](./trait-class.md) — 要素に役割・機能を宣言する Trait クラス（`is--`/`has--`）の一覧と用途。
 - [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
 - [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
-- [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
+- [responsive.md](./responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
 - [components-core.md](./components-core.md) — `lism-css`パッケージに含まれるコアコンポーネントの一覧と用途。（React, Astroで使える`<Lism>`・Lism Props・getLismProps ）
 - [components-ui.md](./components-ui.md) — `@lism-css/ui`パッケージに含まれるUIコンポーネント（Accordion・Modal・Tabs・Button 等）の Props・構造とCLIコマンドによるインストール方法。
 - [customize.md](./customize.md) — SCSS変数の上書きによる、lism-cssのコアCSSの挙動カスタマイズ方法・`lism.config.js` によるコアコンポーネント挙動のカスタマイズ方法。

package/dist/data/guides/antipatterns.md

@@ -8,6 +8,7 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 - [px / 固定値の直書き](#px--固定値の直書き)
 - [Property Class で書けるのに CSS で書く](#property-class-で書けるのに-css-で書く)
 - [`is--` の誤用（状態・バリエーション）](#is---の誤用状態バリエーション)
+- [カスタムクラスを全て `c--` にしてしまう](#カスタムクラスを何でも-c---にしない)
 - [クラス名の命名ミス（kebab-case）](#クラス名の命名ミスkebab-case)
 - [`--keycolor` の誤用](#--keycolor-の誤用)
 - [Prop 型ミス](#prop-型ミス)
@@ -32,18 +33,18 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | `c="muted"` | `c="text-2"` | 補助テキスト色は `text-2` |
 | `c="danger"` | `c="red"` | パレットカラーから選ぶ（`red` / `orange` 等） |
 
-- セマンティックカラー: `base` / `base-2` / `text` / `text-2` / `divider` / `link` / `brand` / `accent`
+- セマンティックカラー: `base` / `base-2` / `text` / `text-2` / `divider` / `link` / `brand` / `accent` / `neutral`
 - パレットカラー: `red` / `blue` / `green` / `yellow` / `purple` / `orange` / `pink` / `gray` / `white` / `black`
 
 ### スペース（`p` / `m` / `g` 等）
 
-スペーストークンに**中間値は存在しない**（`5/10/15/20/30/40/50/60/70/80` のみ）。`8/12/14/25/35/45/65/75` 等を書きそうになったら、必ず最寄りトークンに丸めるか、ユーザーに方針確認すること（→ [SKILL.md のデザイン取り込みフロー](./SKILL.md#デザインデータ取り込み時のフロー)）。
+スペーストークンの数値は**離散的**で、`5/10/15/20/25/30/35/40/50/60/70/80` のみが用意されている。`8/12/14/45/65/75` 等を書きそうになったら、必ず最寄りトークンに丸めるか、ユーザーに方針確認すること（→ [SKILL.md のデザイン取り込みフロー](./SKILL.md#デザインデータ取り込み時のフロー)）。
 
 | NG | OK | 理由 |
 |---|---|---|
-| `p="8"` | `p="10"` | スペーストークンは`5/10/15/20/30/40/50/60/70/80`。tailwindのような4の倍数ではない |
+| `p="8"` | `p="10"` | スペーストークンは離散値のみ。tailwindのような4の倍数で連続するスケールではない |
 | `g="6"` | `g="5"` | 同上 |
-| `m="25"`, `m="35"` | `m="20"` or `m="30"` | 中間値は存在しない |
+| `m="45"`, `m="55"` | `m="40"` or `m="50"` | `40` 以降の中間値は用意されていない（前半は `5/15/25/35` まで補完済み） |
 | `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
@@ -158,7 +159,23 @@ Lism CSS の `is--` プレフィックスは「**〜である**」という**役
 | `<span class="c--tag is--solid">` + `.c--tag.is--solid { ... }` | `<span class="c--tag c--tag--solid">` + `.c--tag.c--tag--solid { ... }` |
 | `<button class="c--button is--outline">` | `<button class="c--button c--button--outline">` |
 
-なお、「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+なお、Modifier であってもまずは [Property Class で表現できないか](#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+
+---
+
+## カスタムクラスを全て `c--` にしてしまう
+
+`c--` は「**コンポーネント**（再利用可能な UI 部品）」を表すプレフィックス。**カスタムクラスを必ず `c--` で命名する必要はない**。サイトの大まかな領域（header / sidebar / main / footer 等）やページ固有のスタイルなど、再利用が前提でないクラスは、独自プレフィックス（`z--` / `p--` 等）やプレフィックスなしの命名も選択肢として検討すること。
+
+→ 詳細: [css-rules.md の独自プレフィックス](./css-rules.md#独自プレフィックス)
+
+| 用途 | 命名の例 | 配置レイヤー |
+|---|---|---|
+| 再利用可能な UI 部品 | `c--button` / `c--card` / `c--tag` | `@layer lism-component` |
+| サイトのゾーニング | `z--header` / `z--sidebar` / `z--articleBody`（または `header` / `sidebar` / `articleBody`） | `@layer lism-custom` |
+| ページ固有のスタイル | `p--front` / `p--post`（または `frontPage` / `postPage`） | `@layer lism-custom` |
+
+`c--header` のような命名も間違いとまでは言えないが、「カスタムクラス＝必ず `c--`」ではないことに注意する。
 
 ---
 

package/dist/data/guides/base-styles.md

@@ -73,7 +73,7 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--list-px-s` | `1.75em` | リストの `padding-inline-start` |
+| `--list-ps` | `1.75em` | リストの `padding-inline-start` |
 
 ### テーブル（table, td, th）
 

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

@@ -6,6 +6,7 @@
 - [プレフィックスとクラス分類](#プレフィックスとクラス分類)
 - [Component Class（`c--`）](#component-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
+- [独自プレフィックス](#独自プレフィックス)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology.md)
@@ -207,6 +208,27 @@ export default function MyCard(props) {
 ```
 
 
+### 独自プレフィックス
+
+Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `a--` / `c--` / `u--` / `-`）のどれにも該当しないクラスは、独自プレフィックスを付けても、プレフィックスなしで命名しても構いません。
+
+代表的な例：
+
+| 分類 | 形式 | 例 |
+|---|---|---|
+| ゾーニング（サイトの大まかな領域） | `z--{zoneName}` または `{zoneName}` | `z--header`, `z--main`, `z--sidebar`, `z--footer` |
+| ページ分類 | `p--{type}-{id\|slug}` または `{slug}Page` | `p--front`, `p--page--{slug}` |
+
+これらは、特に理由がなければ `@layer lism-custom` に配置することを推奨します。
+
+```css
+@layer lism-custom {
+  .z--header { /* ... */ }
+  .p--front { /* ... */ }
+}
+```
+
+
 ## CSS の配置場所
 
 ### グローバル CSS（サイト全体）

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` |
 
 トークンのバリエーション:
 
@@ -127,14 +127,17 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 
 #### 方向指定系: 「グループ略称」 + `-` +「方向指定」
 
+`inline-start`/`inline-end`は`is`/`ie`ではなく、すでに普及しているCSSフレームワークの慣習に沿って`s`/`e`とする。
+
 | 方向 | サフィックス | 例 |
 |------|-----------|-----|
 | physical | `-t` / `-b` / `-l` / `-r` | `bd-t`, `bd-b`, `bd-l`, `bd-r` |
 | inline / block | `-x` / `-y` | `bd-x`, `bd-y` |
-| start / end | `-s` / `-e` | `bd-x-s`, `bd-x-e`, `bd-y-s`, `bd-y-e` |
+| inline-start / end | `-s` / `-e` | `bd-s`, `bd-e`, `ps`, `pe`, `ms`, `me`, `i-s`, `i-e` |
+| block-start / end | `-bs` / `-be` | `bd-bs`, `bd-be`, `pbs`, `pbe`, `mbs`, `mbe`, `i-bs`, `i-be` |
 | x / y | `-x` / `-y` | `ov-x`, `ov-y` |
 
-例外: `p`, `m` のみ最初のハイフンを省略 → `pt`, `px`, `my`, `mx-s` 等。
+例外: `p`, `m` のみハイフンを省略 → `pt`, `px`, `my`, `ms` 等。
 
 #### グループ略称の衝突禁止
 

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--decorator.md

@@ -23,16 +23,16 @@
 ```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" />
+  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
+  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be 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 class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -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-e -bd-be -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
 </div>
 ```
 

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/primitives/l--flex.md

@@ -56,14 +56,14 @@ Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`,
 ```jsx
 <Flex g="20">
   <Lism fx="1">Flex Content</Lism>
-  <Lism fxb={['33%', '25%']}>Flex Content</Lism>
+  <Lism fxb={['50%', null, '25%']}>Flex Content</Lism>
 </Flex>
 ```
 
 ```html
 <div class="l--flex -g:20">
   <div class="-fx:1">Flex Content</div>
-  <div class="-fxb -fxb_sm" style="--fxb:33%;--fxb_sm:25%">Flex Content</div>
+  <div class="-fxb -fxb_md" style="--fxb:50%;--fxb_md:25%">Flex Content</div>
 </div>
 ```
 

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

@@ -15,10 +15,12 @@
 
 | クラス | 余白量 |
 |--------|-------|
-| `l--flow` | `--flow--base`（`--s30`） |
+| `l--flow` | `--flow--base`（`--s30`、`lang="ja"` 時は `--s35`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
+`--flow--base` / `--flow--s` は `:root` で定義されたトークン（[tokens](../tokens.md#フロー余白-flow) 参照）。日本語環境では文字密度に合わせて `--flow--base` が広めに上書きされる。
+
 ## 専用Props
 
 | Prop | 説明 |
@@ -126,7 +128,7 @@
 </Flow>
 ```
 
-またネストされた `l--flow` は、`--flow` が未定義の場合 `--flow--base` ではなく**親の値を継承**することにも注意してください。
+またネストされた `l--flow` は、`--flow` が未定義の場合、ルートで定義された `--flow--base` ではなく**親の `--flow` を継承**することにも注意してください。
 
 ## 関連プリミティブ
 

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

@@ -36,16 +36,16 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 | `bd` | `border`（変数管理を有効化） |
 | `bd-x` | `border-inline` |
 | `bd-y` | `border-block` |
-| `bd-x-s` | `border-inline-start` |
-| `bd-x-e` | `border-inline-end` |
-| `bd-y-s` | `border-block-start` |
-| `bd-y-e` | `border-block-end` |
+| `bd-s` | `border-inline-start` |
+| `bd-e` | `border-inline-end` |
+| `bd-bs` | `border-block-start` |
+| `bd-be` | `border-block-end` |
 | `bd-t` | `border-top` |
 | `bd-b` | `border-bottom` |
 | `bd-l` | `border-left` |
 | `bd-r` | `border-right` |
 
-標準で用意しているのは物理方向（`-t` / `-b` / `-l` / `-r`）と論理方向（`-x` / `-y` / `-x-s` / `-x-e` / `-y-s` / `-y-e`）のみ。
+標準で用意しているのは物理方向（`-t` / `-b` / `-l` / `-r`）と論理方向（`-x` / `-y` / `-s` / `-e` / `-bs` / `-be`）のみ。
 
 ## 値プロパティ
 
@@ -76,12 +76,12 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 ```jsx
 <Box bd-t px="10">-t: Top</Box>
 <Box bd-x bdw="2px" px="10">inline</Box>
-<Box bd-x-s bdw="2px" px="10">inline-start</Box>
+<Box bd-s bdw="2px" px="10">inline-start</Box>
 ```
 ```html
 <div class="l--box -bd-t -px:10">-t: Top</div>
 <div class="l--box -bd-x -px:10" style="--bdw: 2px">inline</div>
-<div class="l--box -bd-x-s -px:10" style="--bdw: 2px">inline-start</div>
+<div class="l--box -bd-s -px:10" style="--bdw: 2px">inline-start</div>
 ```
 
 ### 方向ごとに異なるスタイル
@@ -112,12 +112,12 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 
 ### BP でボーダー方向を切り替える
 
-`bd-x-s` + `bd-y-s` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
+`bd-s` + `bd-bs` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
 
 ```jsx
 <Flex fxd={['column', 'row']}>
   <Box px="15" py="5">Box</Box>
-  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>Box</Box>
+  <Box px="15" py="5" bd-s bd-bs bdw={['1px 0', '0 1px']}>Box</Box>
 </Flex>
 ```
 

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

@@ -30,12 +30,16 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 |--------|----------------------|--------|
 | `-hov:-c` | `color` | `var(--hov-c, var(--link))` |
 | `-hov:-bdc` | `border-color` | `var(--hov-bdc, currentColor)` |
-| `-hov:-bgc` | `background-color` | `var(--hov-bgc, var(--base-2))` |
+| `-hov:-bgc` | `background-color` | `var(--hov-bgc, var(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))` |
 | `-hov:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
 | `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 
+`-hov:-bgc` は初期値として、現在の背景色を `--neutral` へブレンドした背景色を使う。ライト/ダークどちらの背景でも使いやすいhover背景にしたい場合は、`hov="-bgc"` を基本形として使う。
+
+プロジェクト全体で `-hov:-bgc` のデフォルト値を差し替えたい場合は、`:root` 等で `--hov-bgc--default` を定義する。フォールバック順は `--hov-bgc`（要素ごとの明示指定）→ `--hov-bgc--default`（プロジェクト全体）→ `color-mix(...)`（フレームワーク既定）の 3 段。
+
 ```html
 <!-- 初期値のまま使用 -->
 <a class="is--boxLink -hov:-o -bgc:base-2 -bd -p:20" href="###">...</a>
@@ -52,7 +56,6 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 | クラス | 内容 |
 |--------|------|
 | `-hov:underline` | テキストに下線を表示 |
-| `-hov:neutral` | 背景色にニュートラルグレーをブレンド |
 
 プロジェクト固有のプリセットは、以下のように自作して追加できる。
 

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

@@ -65,7 +65,7 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
 | **CSS プロパティ** | 実際に制御される CSS プロパティ |
 | **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
-| **BP クラス** | ブレークポイント対応クラス。`—` は非対応 |
+| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`、`✔ lg` は `lg` まで対応、`—` は非対応 |
 
 
 ## 全 Prop 一覧
@@ -74,15 +74,15 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### タイポグラフィ
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `f` | `font` | `-f:inherit` | — |
-| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | `-fz_sm`, `-fz_md` |
+| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
 | `fw` | `font-weight` | `-fw:light`, `-fw:normal`, `-fw:bold`, `-fw:100`〜`-fw:900` | — |
 | `ff` | `font-family` | `-ff:base`, `-ff:accent`, `-ff:mono` | — |
 | `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` |
+| `hl` | `--hl` 変数のみ | — | — |
 | `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` | — |
@@ -92,26 +92,26 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### 表示・可視性
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | `-d_sm`, `-d_md` |
+| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ lg |
 | `o` | `opacity` | `-o:0`, `-o:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
 | `ov-x` | `overflow-x` | `-ov-x:clip`, `-ov-x:auto`, `-ov-x:scroll` | — |
 | `ov-y` | `overflow-y` | `-ov-y:clip`, `-ov-y:auto`, `-ov-y:scroll` | — |
-| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | `-ar_sm`, `-ar_md` |
+| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | ✔ |
 
 ### サイズ
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `w` | `width` | `-w:100%`, `-w:fit` | `-w_sm`, `-w_md` |
-| `h` | `height` | `-h:100%`, `-h:fit` | `-h_sm`, `-h_md` |
-| `min-w` | `min-width` | `-min-w:100%` | `-min-w_sm`, `-min-w_md` |
-| `max-w` | `max-width` | `-max-w:100%` | `-max-w_sm`, `-max-w_md` |
-| `min-h` | `min-height` | `-min-h:100%` | `-min-h_sm`, `-min-h_md` |
-| `max-h` | `max-height` | `-max-h:100%` | `-max-h_sm`, `-max-h_md` |
+| `w` | `width` | `-w:100%`, `-w:fit` | ✔ |
+| `h` | `height` | `-h:100%`, `-h:fit` | ✔ |
+| `min-w` | `min-width` | `-min-w:100%` | ✔ |
+| `max-w` | `max-width` | `-max-w:100%` | ✔ |
+| `min-h` | `min-height` | `-min-h:100%` | ✔ |
+| `max-h` | `max-height` | `-max-h:100%` | ✔ |
 | `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:bleed` | — |
@@ -127,9 +127,9 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### 背景
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bg` | `background` | — | `-bg_sm`, `-bg_md` |
+| `bg` | `background` | — | — |
 | `bgi` | `background-image` | — | — |
 | `bgr` | `background-repeat` | `-bgr:no-repeat` | — |
 | `bgp` | `background-position` | `-bgp:center` | — |
@@ -138,20 +138,20 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### カラー
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:inherit` | — |
 | `keycolor` | `--keycolor` 変数のみ | — | — |
 
-セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`  
+セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral`<br />
 パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`  
 キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
 
 ### 角丸
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | `-bdrs_sm`, `-bdrs_md` |
+| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | ✔ |
 | `bdrs-tl` | `border-top-left-radius` | — | — |
 | `bdrs-tr` | `border-top-right-radius` | — | — |
 | `bdrs-br` | `border-bottom-right-radius` | — | — |
@@ -163,15 +163,15 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### 影
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | `-bxsh_sm`, `-bxsh_md` |
+| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | ✔ |
 
 **補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--var:bxsh` クラスを併用する。
 
 ### ポジション
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | — |
 | `z` | `z-index` | `-z:-1`, `-z:0`, `-z:1`, `-z:99` | — |
@@ -182,86 +182,86 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | `i` | `inset` | `-i:0` | — |
 | `i-x` | `inset-inline` | — | — |
 | `i-y` | `inset-block` | — | — |
-| `i-x-s` | `inset-inline-start` | — | — |
-| `i-x-e` | `inset-inline-end` | — | — |
-| `i-y-s` | `inset-block-start` | — | — |
-| `i-y-e` | `inset-block-end` | — | — |
+| `i-s` | `inset-inline-start` | — | — |
+| `i-e` | `inset-inline-end` | — | — |
+| `i-bs` | `inset-block-start` | — | — |
+| `i-be` | `inset-block-end` | — | — |
 
-### スペーシング — Padding
+### 余白 — Padding
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| 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` |
-| `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` |
-| `py-e` | `padding-block-end` | — | `-py-e_sm`, `-py-e_md` |
-| `pl` | `padding-left` | — | `-pl_sm`, `-pl_md` |
-| `pr` | `padding-right` | — | `-pr_sm`, `-pr_md` |
-| `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`
-
-### スペーシング — Margin
-
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | ✔ |
+| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | ✔ |
+| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | ✔ |
+| `ps` | `padding-inline-start` | — | ✔ |
+| `pe` | `padding-inline-end` | — | ✔ |
+| `pbs` | `padding-block-start` | — | ✔ |
+| `pbe` | `padding-block-end` | — | ✔ |
+| `pl` | `padding-left` | — | — |
+| `pr` | `padding-right` | — | — |
+| `pt` | `padding-top` | — | — |
+| `pb` | `padding-bottom` | — | — |
+
+SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80`
+
+### 余白 — 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` |
-| `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-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` |
-| `mt` | `margin-top` | — | `-mt_sm`, `-mt_md` |
-| `mb` | `margin-bottom` | — | `-mb_sm`, `-mb_md` |
+| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | ✔ |
+| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | ✔ |
+| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | ✔ |
+| `ms` | `margin-inline-start` | `-ms:auto` | ✔ |
+| `me` | `margin-inline-end` | `-me:auto` | ✔ |
+| `mbs` | `margin-block-start` | `-mbs:auto`, `-mbs:0`, `-mbs:5`, `-mbs:10`, `-mbs:20`, ... (SPACEトークン) | ✔ |
+| `mbe` | `margin-block-end` | `-mbe:auto` | ✔ |
+| `ml` | `margin-left` | — | — |
+| `mr` | `margin-right` | — | — |
+| `mt` | `margin-top` | — | — |
+| `mb` | `margin-bottom` | — | — |
 
 ### Gap
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `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` |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ lg |
+| `cg` | `column-gap` | — | — |
+| `rg` | `row-gap` | — | — |
 
 ### Flex
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `fxf` | `flex-flow` | — | — |
-| `fxw` | `flex-wrap` | `-fxw:wrap` | `-fxw_sm`, `-fxw_md` |
-| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | `-fxd_sm`, `-fxd_md` |
-| `fx` | `flex` | `-fx:1` | `-fx_sm`, `-fx_md` |
+| `fxw` | `flex-wrap` | `-fxw:wrap` | ✔ |
+| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | ✔ |
+| `fx` | `flex` | `-fx:1` | ✔ |
 | `fxg` | `flex-grow` | `-fxg:1` | — |
 | `fxsh` | `flex-shrink` | `-fxsh:0` | — |
-| `fxb` | `flex-basis` | — | `-fxb_sm`, `-fxb_md` |
+| `fxb` | `flex-basis` | — | ✔ |
 
 ### Grid
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `gt` | `grid-template` | — | `-gt_sm`, `-gt_md` |
-| `gta` | `grid-template-areas` | — | `-gta_sm`, `-gta_md` |
-| `gtc` | `grid-template-columns` | `-gtc:subgrid` | `-gtc_sm`, `-gtc_md` |
-| `gtr` | `grid-template-rows` | `-gtr:subgrid` | `-gtr_sm`, `-gtr_md` |
-| `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | `-gaf_sm`, `-gaf_md` |
+| `gt` | `grid-template` | — | ✔ |
+| `gta` | `grid-template-areas` | — | ✔ lg |
+| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ lg |
+| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ lg |
+| `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | ✔ |
 | `gac` | `grid-auto-columns` | — | — |
 | `gar` | `grid-auto-rows` | — | — |
-| `cols` | `--cols` 変数 | — | `-cols_sm`, `-cols_md` |
-| `rows` | `--rows` 変数 | — | `-rows_sm`, `-rows_md` |
+| `cols` | `--cols` 変数 | — | ✔ lg |
+| `rows` | `--rows` 変数 | — | ✔ |
 
 ### Grid アイテム
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ga` | `grid-area` | `-ga:1/1` | `-ga_sm`, `-ga_md` |
-| `gc` | `grid-column` | `-gc:1/-1` | `-gc_sm`, `-gc_md` |
-| `gr` | `grid-row` | `-gr:1/-1` | `-gr_sm`, `-gr_md` |
+| `ga` | `grid-area` | `-ga:1/1` | ✔ lg |
+| `gc` | `grid-column` | `-gc:1/-1` | ✔ lg |
+| `gr` | `grid-row` | `-gr:1/-1` | ✔ lg |
 | `gcs` | `grid-column-start` | — | — |
 | `gce` | `grid-column-end` | — | — |
 | `grs` | `grid-row-start` | — | — |
@@ -269,12 +269,12 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ### 配置（Places）
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | `-ai_sm`, `-ai_md` |
-| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | `-ac_sm`, `-ac_md` |
-| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | `-ji_sm`, `-ji_md` |
-| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | `-jc_sm`, `-jc_md` |
+| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | ✔ |
+| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | ✔ |
+| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | ✔ |
+| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | ✔ |
 | `pi` | `place-items` | `-pi:start`, `-pi:center`, `-pi:end` | — |
 | `pc` | `place-content` | `-pc:start`, `-pc:center`, `-pc:end` | — |
 | `aslf` | `align-self` | `-aslf:start`, `-aslf:center`, `-aslf:end`, `-aslf:stretch` | — |
@@ -294,10 +294,10 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 | Prop | CSS プロパティ / 変数 | 主なクラス |
 |------|-----------------------|------------|
-| `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|x-s\|x-e\|y-s\|y-e\|t\|b\|l\|r}`, `-bd:none` |
+| `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|s\|e\|bs\|be\|t\|b\|l\|r}`, `-bd:none` |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` |
 | `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` |
-| `bdw` | `--bdw` | BP クラス: `-bdw_sm`, `-bdw_md` |
+| `bdw` | `--bdw` | BP クラス: ✔（`-bdw_sm` / `-bdw_md`） |
 
 → 詳細（方向ごとのスタイル指定、BP での方向切り替え等）は [property-class/bd.md](./property-class/bd.md) 参照
 
@@ -311,7 +311,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
 | `-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
 
-**標準プリセット:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:neutral`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
+**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
 
 **`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。
 
@@ -319,14 +319,14 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 ## その他
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
 | `whs` | `white-space` | `-whs:nowrap` | — |
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
 | `iso` | `isolation` | `-iso:isolate` | — |
-| `wm` | `writing-mode` | `-wm:vertical-rl` | `-wm_sm`, `-wm_md` |
+| `wm` | `writing-mode` | `-wm:vertical-rl` | ✔ |
 
 
 ## 値の省略形（例外一覧）
@@ -374,5 +374,3 @@ Property Class をコードベース全体で一括修正する場合、同じ P
 | HTML / className — BP対応・カスタム値 | `-p` / `-p_sm` / `-p_md` |
 | 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 以上 |
+
+**レスポンシブ対応の Property Class は、基本的に標準では `sm` / `md` まで対応。** ただし `d`（display）/ `g`（gap）/ `cols` / グリッド系（`gta` `gtc` `gtr` `ga` `gc` `gr`）など、大枠のレイアウト構造に関わる一部のプロパティは `lg` まで対応。それ以外のプロパティで `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>
+```

package/dist/data/guides/tokens.md

@@ -17,6 +17,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [透明度 (o)](#透明度-o)
 - [角丸 (bdrs)](#角丸-bdrs)
 - [影 (bxsh)](#影-bxsh)
+- [フロー余白 (flow)](#フロー余白-flow)
+- [ガターサイズ (gutter-size)](#ガターサイズ-gutter-size)
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
@@ -28,7 +30,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
-| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
+| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
 | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
@@ -39,8 +41,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
 | サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `bleed` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
-| フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
-| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent` | `--{name}` | `--brand` |
+| フロー余白 (flow) | `base`, `s` | `--flow--{key}` | `--flow--base` |
+| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
 
 
@@ -49,22 +51,39 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 余白 (space)
 
-フィボナッチ数列ベースのスケーリング。`--s-unit`（≒ 8px）を基準単位とする。
+フィボナッチ数列ベースのスケーリング。`--s-unit`（デフォルト `calc(var(--fz--base) * 0.5)` ＝ ≒ 8px）を基準単位とする。
 
 | CSS変数 | 値 | 実サイズ目安 |
 |---------|-----|------------|
-| `--s5` | `calc(0.5 * var(--s-unit))` | ≒ 4px |
+| `--s5` | `calc(var(--s-unit) * 0.5)` | ≒ 4px |
 | `--s10` | `var(--s-unit)` | ≒ 8px |
-| `--s15` | `calc(1.5 * var(--s-unit))` | ≒ 12px |
-| `--s20` | `calc(2 * var(--s-unit))` | ≒ 16px |
-| `--s30` | `calc(3 * var(--s-unit))` | ≒ 24px |
-| `--s40` | `calc(5 * var(--s-unit))` | ≒ 40px |
-| `--s50` | `calc(8 * var(--s-unit))` | ≒ 64px |
-| `--s60` | `calc(13 * var(--s-unit))` | ≒ 104px |
-| `--s70` | `calc(21 * var(--s-unit))` | ≒ 168px |
-| `--s80` | `calc(34 * var(--s-unit))` | ≒ 272px |
+| `--s15` | `calc(var(--s-unit) * 1.5)` | ≒ 12px |
+| `--s20` | `calc(var(--s-unit) * 2)` | ≒ 16px |
+| `--s25` | `calc(var(--s-unit) * 2.5)` | ≒ 20px |
+| `--s30` | `calc(var(--s-unit) * 3)` | ≒ 24px |
+| `--s35` | `calc(var(--s-unit) * 4)` | ≒ 32px |
+| `--s40` | `calc(var(--s-unit) * 5)` | ≒ 40px |
+| `--s50` | `calc(var(--s-unit) * 8)` | ≒ 64px |
+| `--s60` | `calc(var(--s-unit) * 13)` | ≒ 104px |
+| `--s70` | `calc(var(--s-unit) * 21)` | ≒ 168px |
+| `--s80` | `calc(var(--s-unit) * 34)` | ≒ 272px |
 
-係数 `0.5, 1, 1.5, 2, 3, 5, 8, 13, 21, 34` はフィボナッチ数列に基づいている。`--s-unit` を上書きすることでスケール全体を調整可能。
+`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
+
+### `set--var:s` ユーティリティ
+
+`set--var:s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+
+```html
+<!-- ボタンの padding が button 自身の font-size に追従する -->
+<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+```
+
+`--s-unit` を任意値で上書きすれば、別の基準にも切り替えられる。
+
+```html
+<button class="set--var:s -p:10" style="--s-unit: .4375em">...</button>
+```
 
 
 ## フォントサイズ (fz)
@@ -177,6 +196,31 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--shsz--50` | `0px 16px 48px` |
 
 
+## フロー余白 (flow)
+
+`l--flow` のコンテンツ間余白に使われるトークン。`:root` で定義されている。
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--flow--base` | `var(--s30)`（`lang="ja"` 時は `var(--s35)`） | `l--flow` の基準余白 |
+| `--flow--s` | `var(--s20)` | `-flow:s` で適用される小さめの余白 |
+
+
+## ガターサイズ (gutter-size)
+
+サイト全体のガター（左右余白）量を定義するルート変数。トークン体系ではなく単一の設定値で、上書きするとガター関連の挙動が一括で変わる。
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--gutter-size` | `var(--s30)` | ガターの基準量 |
+
+参照される主な箇所:
+
+- `has--gutter` の `padding-inline`
+- `is--container` の `--sz--bleed` 計算（`100cqi + var(--gutter-size) * 2`）
+- `-max-sz:full` の負 margin による hang 拡張
+
+
 ## カラー
 
 ### セマンティックカラー
@@ -193,21 +237,22 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--link` | `oklch(50% 0.3 240)` | リンク色 |
 | `--brand` | `#1e5f8c` | ブランド色 |
 | `--accent` | `#d94a6a` | アクセント色 |
+| `--neutral` | `hsl(220, 2%, 80%)` | hover 背景などの生成に使う中立的な補助色 |
 
 ### パレットカラー
 
-OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩度）の基準値を調整するとパレット全体の色味を変更可能。デフォルト: `--L: 60%`, `--C: 0.22`。
+OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩度）の基準値を調整するとパレット全体の色味を変更可能。デフォルト: `--L: 60%`, `--C: 0.2`。
 
 | CSS変数 | 値 |
 |---------|-----|
 | `--red` | `oklch(var(--L) var(--C) 20)` |
-| `--orange` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52)` |
-| `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84)` |
-| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)` |
-| `--blue` | `oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260)` |
-| `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292)` |
-| `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348)` |
-| `--gray` | `oklch(calc(var(--L) - 4%) 0.04 256)` |
+| `--orange` | `oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48)` |
+| `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80)` |
+| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152)` |
+| `--blue` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264)` |
+| `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288)` |
+| `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352)` |
+| `--gray` | `oklch(calc(var(--L) - 4%) calc(var(--C) / 10) 240)` |
 | `--black` | `#000` |
 | `--white` | `#fff` |
 

package/dist/data/guides/trait-class/is--boxLink.md

@@ -28,8 +28,8 @@ BoxLink には主に2通りの使い方があります。
 ```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">
+  <Text lh="s" mbs="15">記事の抜粋テキスト...</Text>
+  <Group fz="s" c="text-2" ta="right" lh="1" mbs="10">
     MORE →
   </Group>
 </BoxLink>
@@ -38,8 +38,8 @@ BoxLink には主に2通りの使い方があります。
 ```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>
+  <p class="-c:text-2 -lh:s -mbs:15">記事の抜粋テキスト...</p>
+  <p class="-fz:s -c:text-2 -ta:right -lh:1 -mbs:10">MORE →</p>
 </a>
 ```
 
@@ -54,8 +54,8 @@ BoxLink には主に2通りの使い方があります。
       Heading link text
     </Link>
   </Group>
-  <Text c="text-2" lh="s" my-s="15">記事の抜粋テキスト...</Text>
-  <Group my-s="10">
+  <Text c="text-2" lh="s" mbs="15">記事の抜粋テキスト...</Text>
+  <Group mbs="10">
     <a href="/tag/foo" className="-hov:-o">Inner Link</a>
   </Group>
 </BoxLink>
@@ -66,8 +66,8 @@ BoxLink には主に2通りの使い方があります。
   <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">
+  <p class="-c:text-2 -lh:s -mbs:15">記事の抜粋テキスト...</p>
+  <div class="-mbs:10">
     <a href="/tag/foo" class="-hov:-o">Inner Link</a>
   </div>
 </div>

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-05-09',
-    sourceCommit: 'e7352b46',
+    generatedAt: '2026-05-20',
+    sourceCommit: '53ab6527',
     docsVersion: '0.1.0',
 };

package/dist/tools/get-guide.js

@@ -21,7 +21,7 @@ const GUIDE_TOPICS = {
     },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
-    responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },
+    responsive: { file: 'responsive.md', label: 'Responsive design, breakpoints, container queries' },
     antipatterns: {
         file: 'antipatterns.md',
         label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',

package/dist/tools/get-overview.js

@@ -3,14 +3,14 @@ import { extractSection } from '../lib/markdown-utils.js';
 import { markdownResponse, error, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
 /**
  * SKILL.md を中核に、css-rules.md の Layer 構造セクションと
- * prop-responsive.md のブレークポイントセクションを付加して返す。
+ * responsive.md のブレイクポイントセクションを付加して返す。
  */
 function buildOverviewMarkdown() {
     const skill = loadMarkdown('SKILL.md');
     const cssRules = loadMarkdown('css-rules.md');
-    const responsive = loadMarkdown('prop-responsive.md');
+    const responsive = loadMarkdown('responsive.md');
     const layerSection = extractSection(cssRules, 'CSS Layer 構造');
-    const bpSection = extractSection(responsive, 'ブレークポイント');
+    const bpSection = extractSection(responsive, 'ブレイクポイント');
     const parts = [skill];
     if (layerSection) {
         parts.push('\n---\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.17.0",
+  "version": "0.20.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {