@lism-css/mcp 0.27.0 → 0.28.0

package/dist/data/docs-index.json

@@ -150,7 +150,7 @@
       "max-",
       "min-"
     ],
-    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、状態管理用の内部変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`b--`, `c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
+    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、上書きを想定しない内部処理用の変数・状態判定用の変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`b--`, `c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
   },
   {
     "sourcePath": "tokens.mdx",
@@ -173,7 +173,7 @@
       "--s-unit",
       "typography"
     ],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, RADIUS, SHADOW, SPACE, OPACITY, SIZE トークンを掲載。SPACEはフィボナッチ数列ベースの余白スケール --s5〜--s80（s25/s35 を含む12段階）で、--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出。SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィは個別ページでも詳細を解説。"
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, RADIUS, SHADOW, SPACE, OPACITY, SIZE トークンを掲載。SPACEはフィボナッチ数列ベースの余白スケール --s5〜--s70（s25/s35/s45 を含む12段階）で、--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出。SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィは個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -462,7 +462,7 @@
       "full_no_layer.css",
       "!important"
     ],
-    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。@layer なし版は既存サイト・WordPress テーマなどカスケードを制御できない環境向けで、Property Class は常に !important 付き、u--trim / u--trimAll / u--cbox / u--divide / u--enclose はセレクタ二重化（.u--trim.u--trim = 0-2-0）で出力され「Property Class > Utility Class > 単一クラス」の序列を再現する（lism.config.js の defaultImportant: false・$default_important: 0・props の個別 important: 0 でも !important は外れない）。full.css には main.css 非収録の Property Class ブレイクポイント対応クラス（isVar 系・border ショートハンド系を除く。border は bds / bdc のサブプロパティで BP 対応）と、カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など。main.css は厳選したセマンティックカラーと keycolor のみ）を含む。スペーシング系（padding / margin / gap）のトークンユーティリティは main.css に収録済み。コンポーネント出力も full.css に合わせるには lism.config.js の isFullMode を使う（詳細は customize/config.mdx）。"
+    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。@layer なし版は既存サイト・WordPress テーマなどカスケードを制御できない環境向けで、Property Class は常に !important 付き、u--trim / u--trimAll / u--cbox はセレクタ二重化（.u--trim.u--trim = 0-2-0）で出力され「Property Class > Utility Class > 単一クラス」の序列を再現する（lism.config.js の defaultImportant: false・$default_important: 0・props の個別 important: 0 でも !important は外れない）。full.css には main.css 非収録の Property Class ブレイクポイント対応クラス（isVar 系・border ショートハンド系を除く。border は bds / bdc のサブプロパティで BP 対応）と、カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など。main.css は厳選したセマンティックカラーと keycolor のみ）を含む。スペーシング系（padding / margin / gap）のトークンユーティリティは main.css に収録済み。コンポーネント出力も full.css に合わせるには lism.config.js の isFullMode を使う（詳細は customize/config.mdx）。"
   },
   {
     "sourcePath": "customize/config.mdx",
@@ -561,7 +561,7 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--divide & u--enclose", "u--clipText", "Opt-in", "u--inlineCenter"],
+    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--clipText", "Opt-in", "u--inlineCenter", "u--divide / u--enclose"],
     "keywords": [
       "utility",
       "ユーティリティ",
@@ -576,7 +576,7 @@
       "u--clipText",
       "u--inlineCenter"
     ],
-    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox（keycolorベースの色自動生成）, u--trim/u--trimAll（ハーフレディング余白調整）, u--srOnly（スクリーンリーダー専用）, u--divide/u--enclose（区切り線・セル枠）, u--clipText（テキストで背景クリッピング）等を解説。Opt-inとして u--inlineCenter（絵文字・インラインアイコン中央揃え）の作成例も紹介。"
+    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox（keycolorベースの色自動生成）, u--trim/u--trimAll（ハーフレディング余白調整）, u--srOnly（スクリーンリーダー専用）, u--clipText（テキストで背景クリッピング）を解説。Opt-in（コア外・追加CSS例）として u--inlineCenter（絵文字・インラインアイコン中央揃え）と u--divide/u--enclose（区切り線・セル枠）も紹介。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -1676,10 +1676,10 @@
       "Markup",
       "Examples",
       "チェックマークのリスト（b--list--check）",
-      "アイコンを差し替える（--_icon-c / --_icon-img）"
+      "アイコンを差し替える（--icon-c / --icon-img）"
     ],
     "keywords": ["List", "b--list", "リスト", "箇条書き", "アイコン", "チェックマーク", "checklist"],
-    "snippet": "行頭にアイコンを表示する装飾リストUIの実装例。primitivesと少量のCSS（b--list）で構成し、CSSをlism-blockレイヤーへコピーして利用。b--list--checkでチェックマークに切り替え、--_icon-c / --_icon-imgでアイコンの色・画像を変更できる。"
+    "snippet": "行頭にアイコンを表示する装飾リストUIの実装例。primitivesと少量のCSS（b--list）で構成し、CSSをlism-blockレイヤーへコピーして利用。b--list--checkでチェックマークに切り替え、--icon-c / --icon-imgでアイコンの色・画像を変更できる。"
   },
   {
     "sourcePath": "ui/components/Others.mdx",
@@ -1811,12 +1811,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--divide & u--enclose",
-    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示するユーティリティクラス。",
+    "title": "u--divide / u--enclose（Opt-in）",
+    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示する、コア外（Opt-in）のユーティリティクラス例。",
     "category": "guide",
-    "headings": ["u--divide & u--enclose"],
-    "keywords": ["u--divide", "u--enclose", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
-    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--enclose は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
+    "headings": ["u--divide / u--enclose"],
+    "keywords": ["u--divide", "u--enclose", "opt-in", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "コアには含まれない追加CSSの例。@layer lism-utility に追加して使う（@layer なし版のビルドでは @layer で囲まず .u--divide.u--divide のようにセレクタを二重化する）。u--divide は子要素間にのみ区切り線を表示（外周なし）、u--enclose は各セルを枠で囲む。gap と子要素の box-shadow で実装するため border より描画が粗く、並び方向が切り替わるレイアウトでは bdw のブレイクポイント切り替えを推奨。"
   },
   {
     "sourcePath": "trait-class.mdx",
@@ -1893,11 +1893,11 @@
   {
     "sourcePath": "set-class.mdx",
     "title": "set--s",
-    "description": "余白トークン（--s5〜--s80）を現在のフォントサイズ基準で再計算するSetクラス。",
+    "description": "余白トークン（--s5〜--s70）を現在のフォントサイズ基準で再計算するSetクラス。",
     "category": "guide",
     "headings": ["set--s"],
     "keywords": ["set--s", "余白", "フォントサイズ", "--s-unit", "spacing", "スペーシング", "em", "ボタン", "バッジ"],
-    "snippet": "set--s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s80 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
+    "snippet": "set--s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s70 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
   },
   {
     "sourcePath": "set-class.mdx",

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ Lism CSSでUI・ページ・コンポーネントを実装する時の判断の
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
-**バージョン:** `lism-css@0.27.0`/`@lism-css/ui@0.27.0`時点の情報。プロジェクトのバージョンが異なる場合はユーザーに伝え、パッケージ更新またはこのスキルの更新を案内する。
+**バージョン:** `lism-css@0.28.0`/`@lism-css/ui@0.28.0`時点の情報。プロジェクトのバージョンが異なる場合はユーザーに伝え、パッケージ更新またはこのスキルの更新を案内する。
 
 ## 実装フロー（厳守）
 

package/dist/data/guides/antipatterns.md

@@ -124,8 +124,8 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | --- | --- | --- |
 | `p="8"` | `p="10"` | スペーストークンは離散値のみ。tailwindのような4の倍数で連続するスケールではない |
 | `g="6"` | `g="5"` | 同上 |
-| `m="45"`, `m="55"` | `m="40"` or `m="50"` | `40` 以降の中間値は用意されていない（前半は `5/15/25/35` まで補完済み） |
-| `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
+| `m="55"`, `m="65"` | `m="50"` or `m="60"` | `50` 以降の中間値は用意されていない（5 刻みは `45` まで） |
+| `m="100"` | `m="70"` | 上限は `70`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
 

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

@@ -223,7 +223,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | --- | --- | --- | --- | --- |
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
-| `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
+| `itemP` | Root | `string` | — | 各アイテムのパディング。`--item-p` 変数として出力 |
 | `href` | Link | `string` | — | リンク先URL（Link は常に `a` 要素として出力） |
 | `hov` | Link | `string` | `-bgc` | ホバー時のスタイル。デフォルトで背景色が変化 |
 
@@ -342,8 +342,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `viewBox` | `string` | — | SVG の viewBox |
 | `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
 | `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
-| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--_inner-stretch` 変数として出力 |
-| `offset` | `string` | — | 水平方向のオフセット。`--_inner-offset` 変数として出力 |
+| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--inner-stretch` 変数として出力 |
+| `offset` | `string` | — | 水平方向のオフセット。`--inner-offset` 変数として出力 |
 | `isEmpty` | `boolean` | — | シェイプを非表示にしてスペーサーとして使用 |
 | `isAnimation` | `boolean` | — | アニメーションを有効化。`data-has-animation` 属性として出力 |
 

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

@@ -56,7 +56,7 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 | Custom Class | Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス | `c--` | `c--featureList`, `c--header` |
 | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
 | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--trimAll`, `u--clipText` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**

package/dist/data/guides/customize.md

@@ -22,7 +22,7 @@
 ## `@layer` をオフにする
 
 `lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
-no-layer版は既存サイトや WordPress テーマなど、カスケードを制御できない環境向けです。レイヤーの代わりに、Property Class は常に `!important` 付き、`u--trim` / `u--trimAll` / `u--cbox` / `u--divide` / `u--enclose` はセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で出力され、「Property Class > Utility Class > 単一クラス」の序列を再現します。`lism.config.js` の `defaultImportant: false`・`$default_important: 0`・`props` の個別 `important: 0` を指定しても `!important` は外れません。`b--` など上記以外のクラス同士の優先度は読み込み順・詳細度に依存します。
+no-layer版は既存サイトや WordPress テーマなど、カスケードを制御できない環境向けです。レイヤーの代わりに、Property Class は常に `!important` 付き、`u--trim` / `u--trimAll` / `u--cbox` はセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で出力され、「Property Class > Utility Class > 単一クラス」の序列を再現します。`lism.config.js` の `defaultImportant: false`・`$default_important: 0`・`props` の個別 `important: 0` を指定しても `!important` は外れません。`b--` など上記以外のクラス同士の優先度は読み込み順・詳細度に依存します。
 
 ```js
 // 通常

package/dist/data/guides/naming.md

@@ -45,10 +45,14 @@
 
 | 形式 | 用途 | 例 |
 | --- | --- | --- |
-| `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
+| `--{target}-{prop}` | 特定のセレクタを起点に、子要素へ設定するプロパティ | `--link-td`, `--headings-ff`, `--icon-size` |
 | `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
-| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
-| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+| `--_{varName}` | 上書きを想定しない内部処理用の変数・状態判定用の変数 | `--_panelH`、`--_flipX`、`--_isHov` |
+
+`--{target}-{prop}`は、`:root`を起点にする場合も、`.b--*`や`.c--*`を起点にする場合も同じ形式です。`:root`以外を起点にする変数は、次のルールで外部からの影響を閉じます。
+
+- 起点のセレクタで必ず初期値をセットする（例: `.b--list { --icon-size: 1em; }`）。祖先や他のコンポーネントから同名の値を継承しないため。
+- 値を変えるときは`:root`ではなく、起点の要素にインラインstyleやpropsで指定する。
 
 ## クラスの命名規則
 

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

@@ -153,7 +153,7 @@
 | `pt` | `padding-top` | `-pt:5`, `-pt:10`, `-pt:20`, ... (SPACEトークン) | ✔ |
 | `pb` | `padding-bottom` | `-pb:5`, `-pb:10`, `-pb:20`, ... (SPACEトークン) | ✔ |
 
-SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
+SPACEトークンの全値（`5`〜`70`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
 
 ### 余白 — Margin
 

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

@@ -31,6 +31,7 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 | `-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:-transform` | `transform` | `var(--hov-transform, translate(0, -4px))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 

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

@@ -107,7 +107,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
 | `-hov:in:{preset}` | 親の `set--hov` を起点に子のスタイルを変化させる | 親に `set--hov` が必要 |
 
-**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
+**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:-transform`, `-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` でクラスのみ出力）が可能。
 

package/dist/data/guides/references/page-sections.md

@@ -40,7 +40,7 @@ import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
 ```jsx
 import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
 
-<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
+<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '70']} hasGutter isContainer>
   <Wrapper contentSize="l">
     <Stack g="30" ai="center" ta="center">
       <Heading level="1" fz={['3xl', null, '5xl']}>キャッチコピー</Heading>

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

@@ -191,7 +191,7 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 
 ## `set--s`
 
-余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
+余白トークン（`--s5`〜`--s70`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
 
 詳細なスケールと使い方は[tokens.mdの`set--s`ユーティリティ](./tokens.md#set--s-ユーティリティ)を参照してください。
 

package/dist/data/guides/tokens.md

@@ -30,7 +30,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 | --- | --- | --- | --- |
-| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
+| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `60`, `70` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング (hl) | `base`, `xs`, `s`, `l`, `xl` | `--hl--{key}` | `--hl--s` |
 | 行間比率 (lh) | `xs`, `s`, `m`, `l`, `xl` | `--lh--{key}` | `--lh--m` |
@@ -64,16 +64,16 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--s30` | `calc(var(--s-unit) * 3)` | ≒ 24px |
 | `--s35` | `calc(var(--s-unit) * 4)` | ≒ 32px |
 | `--s40` | `calc(var(--s-unit) * 5)` | ≒ 40px |
+| `--s45` | `calc(var(--s-unit) * 6.5)` | ≒ 52px |
 | `--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 |
 
-`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
+10 刻みの主軸は係数 `1, 2, 3, 5, 8, 13, 21`（フィボナッチ数列）に基づき、タイポグラフィの縦のリズムを作る。5 刻み（`--s5`〜`--s45`）は主軸トークン間のちょうど中間値（4px / 12px / 20px / 32px / 52px 相当）で、縦のリズムに縛られない水平方向の gap / padding 用。中間値は `50` まで。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
 
 ### `set--s` ユーティリティ
 
-`set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+`set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s70` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
 
 ```html
 <!-- ボタンの padding が button 自身の font-size に追従する -->
@@ -139,11 +139,13 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 | 説明 |
 | --- | --- | --- |
-| `--lts--base` | `normal` | 基本の文字間隔 |
-| `--lts--xs` | `-0.05em` | より狭い文字間隔 |
-| `--lts--s` | `-0.025em` | 狭めの文字間隔 |
-| `--lts--l` | `0.05em` | 広めの文字間隔 |
-| `--lts--xl` | `0.1em` | より広い文字間隔 |
+| `--lts--base` | `0em` | 基本の文字間隔。長さで指定（`normal` 不可） |
+| `--lts--xs` | `calc(var(--lts--base) - 0.05em)` | より狭い文字間隔 |
+| `--lts--s` | `calc(var(--lts--base) - 0.025em)` | 狭めの文字間隔 |
+| `--lts--l` | `calc(var(--lts--base) + 0.05em)` | 広めの文字間隔 |
+| `--lts--xl` | `calc(var(--lts--base) + 0.1em)` | より広い文字間隔 |
+
+`xs`〜`xl` は `--lts--base` からの相対値。`:root` で `--lts--base` を変えると全体が連動する（子孫要素での上書きは `xs`〜`xl` に伝わらない）。
 
 
 ## フォント (ff)

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

@@ -29,8 +29,6 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 | `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
 | `u--trimAll` | 直下の子要素（`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く）にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
 | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
-| `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
-| `u--enclose` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
 | `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
 | `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
@@ -43,19 +41,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 
 <!-- u--trim: テキスト余白の詰め -->
 <p class="u--trim">テキスト...</p>
-
-<!-- u--divide: グリッド子要素間の区切り線 -->
-<div class="l--grid u--divide" style="--gtc: 1fr 1fr">
-  <div>A</div>
-  <div>B</div>
-</div>
 ```
 
 ```jsx
 // JSX での使用（className で指定）
 <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
 <Text className="u--trim">テキスト...</Text>
-<Grid className="u--divide" gtc="1fr 1fr">...</Grid>
 ```
 
 
@@ -64,6 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 コアには含まれないが、ドキュメントで紹介されている追加ユーティリティの例:
 
 - `u--inlineCenter`: 絵文字やインラインアイコンをテキスト中央に揃える
+- `u--divide` / `u--enclose`: Grid / Flex の子要素間の区切り線・セル枠を `gap` と子要素の `box-shadow` で描く。描画が `border` より粗く、並び方向が切り替わるレイアウトでは `bdw` のブレイクポイント切り替えを優先する
 
 これらは必要に応じて自分で CSS を追加して使用します。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "keywords": [
     "mcp",