@lism-css/mcp 0.18.0 → 0.22.0

package/dist/data/guides/tokens.md

@@ -17,6 +17,8 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [透明度 (o)](#透明度-o)
 - [角丸 (bdrs)](#角丸-bdrs)
 - [影 (bxsh)](#影-bxsh)
+- [フロー余白 (flow)](#フロー余白-flow)
+- [ガター (gutter)](#ガター-gutter)
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
@@ -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` |
 
 
@@ -68,19 +70,19 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 `--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
 
-### `set--var:s` ユーティリティ
+### `set--s` ユーティリティ
 
-`set--var:s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+`set--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>
+<button class="set--s -fz:s -py:10 -px:20">...</button>
 ```
 
 `--s-unit` を任意値で上書きすれば、別の基準にも切り替えられる。
 
 ```html
-<button class="set--var:s -p:10" style="--s-unit: .4375em">...</button>
+<button class="set--s -p:10" style="--s-unit: .4375em">...</button>
 ```
 
 
@@ -174,7 +176,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--var:bxsh` クラスを併用する。
+`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
 
 | CSS変数 | 値 |
 |---------|-----|
@@ -194,6 +196,32 @@ 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)
+
+サイト全体のガター（左右余白）量を扱う変数群。`--flow--base` / `--flow` と同じく「基準値（`:root`）+ 要素ローカル機能変数」の2層構造を採る。
+
+| CSS変数 | 初期値 | 説明 |
+|---------|--------|------|
+| `--gutter--base` | `var(--s30)` | サイトコンテンツの左右余白の基準値（`:root` で定義） |
+| `--gutter` | `var(--gutter--base)` | `.has--gutter` で要素ローカルに初期化される機能変数。要素単位で `style="--gutter: 20px"` のように上書き可能 |
+
+参照される主な箇所:
+
+- `has--gutter` の `padding-inline: var(--gutter)`
+- `is--container` の `--sz--bleed` 計算（`100cqi + var(--gutter) * 2`）
+- `-max-sz:full` の負 margin による hang 拡張（`var(--gutter)` を参照）
+
+
 ## カラー
 
 ### セマンティックカラー
@@ -210,21 +238,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/has--gutter.md

@@ -13,19 +13,25 @@
 
 ```scss
 .has--gutter {
-  padding-inline: var(--gutter-size);
+  --gutter: var(--gutter--base);
+  padding-inline: var(--gutter);
 }
 ```
 
-`--gutter-size` はトークン (`:root`) で `var(--s30)` がデフォルト定義されている。
+ガター変数は `--flow--base` / `--flow` と同じ「基準値 + 要素ローカル機能変数」の2層構造を採る。
+
+- `--gutter--base`: `:root` で `var(--s30)` をデフォルトに持つサイト全体の基準値
+- `--gutter`: `.has--gutter` で `var(--gutter--base)` に初期化される要素ローカルの機能変数
 
 ## CSS 変数
 
 | 変数 | 役割 | デフォルト |
 |------|------|-----------|
-| `--gutter-size` | 左右の padding 量 | `var(--s30)` |
+| `--gutter--base` | サイト全体のガター基準値（`:root` 定義） | `var(--s30)` |
+| `--gutter` | `.has--gutter` 要素ローカルの機能変数 | `var(--gutter--base)` |
 
-個別要素で `--gutter-size` を上書きすれば、その要素のみ gutter 量を変更できる。
+- サイト全体の基準を変えたい場合は `:root` 等で `--gutter--base` を上書きする
+- 個別要素のみガター量を変えたい場合は、その要素で `style="--gutter: 20px"` のように `--gutter` を直接上書きする
 
 ## Usage
 
@@ -34,12 +40,22 @@
   <p>Lorem ipsum content...</p>
   <p>Lorem ipsum content...</p>
 </div>
+
+<!-- 個別要素でガター量を上書きする例 -->
+<div class="has--gutter" style="--gutter: 20px">
+  <p>Lorem ipsum content...</p>
+</div>
 ```
 ```jsx
 <Lism hasGutter>
   <p>Lorem ipsum content...</p>
   <p>Lorem ipsum content...</p>
 </Lism>
+
+{/* 個別要素でガター量を上書きする例 */}
+<Lism hasGutter style={{ '--gutter': '20px' }}>
+  <p>Lorem ipsum content...</p>
+</Lism>
 ```
 
 ## 関連

package/dist/data/guides/trait-class/has--transition.md

@@ -70,4 +70,4 @@
 ## 関連
 
 - [`-hov:*` プロパティクラス](../property-class.md) — ホバー時の変化を定義
-- [`set--var:hov`](../set-class.md#set--varhov) — 親のホバー状態を子要素に伝播させる仕組み
+- [`set--hov`](../set-class.md#set--hov) — 親のホバー状態を子要素に伝播させる仕組み

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/guides/trait-class/is--container.md

@@ -43,7 +43,7 @@
 
 最外側の `is--container` は直下の子要素に `--sz--bleed: 100cqi` をセットします。`-max-sz:bleed` はこの値を参照しており、最外側の `is--container` 基準の幅まで広がります（ネストされた `is--container` は `--sz--bleed` を再上書きしないため、内側の子要素は外側の値を inherit で参照します）。
 
-`has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
+`has--gutter` と併用した場合は `calc(100cqi + var(--gutter) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
 
 `@property --sz--bleed` の `initial-value` は `100svi` のため、`is--container` が祖先に存在しない場合はビューポート幅まで広がる fallback として動作します。
 

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

@@ -17,14 +17,16 @@
 |------|------|
 | `isWrapper` | `is--wrapper` |
 | `isWrapper="s"` | `is--wrapper -contentSize:s` |
+| `isWrapper="m"` | `is--wrapper -contentSize:m` |
 | `isWrapper="l"` | `is--wrapper -contentSize:l` |
+| `isWrapper="xl"` | `is--wrapper -contentSize:xl` |
 | `isWrapper="20rem"`（任意値） | `is--wrapper` + `style="--contentSize: 20rem"` |
 
 ## 専用Props
 
 | Prop | 説明 |
 |------|------|
-| `contentSize` | コンテンツサイズ。`s` / `l` / トークン / 任意値 |
+| `contentSize` | コンテンツサイズ。`s` / `m` / `l` / `xl` / トークン / 任意値 |
 
 ```jsx
 // 下記の ① と ② は同じ結果

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

@@ -30,7 +30,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
 | クラス | 用途 |
 |--------|------|
 | `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
-| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
+| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:m` / `-contentSize:l` / `-contentSize:xl` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
 | `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
 | `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
 | `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
@@ -53,7 +53,7 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
 | クラス | 用途 | 主な CSS 変数 |
 |--------|------|--------------|
 | `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
-| `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter-size`（デフォルト `var(--s30)`） |
+| `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter`（基準値: `--gutter--base`、初期値 `var(--s30)`） |
 | `has--snap` | `scroll-snap-` 系プロパティを CSS 変数経由でセットできるようにする | `--snapType`, `--snapAlign` 等 |
 | `has--mask` | `--maskImg` 変数と組み合わせて、要素自身にマスクを適用する | `--maskImg`, `--maskPos`（`50%`）, `--maskSize`（`contain`）, `--maskRepeat`（`no-repeat`） |
 

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

@@ -30,7 +30,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 | `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--cells` | 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--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) |
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-05-09',
-    sourceCommit: 'e7352b46',
+    generatedAt: '2026-05-28',
+    sourceCommit: '3c46037f',
     docsVersion: '0.1.0',
 };

package/dist/tools/get-guide.js

@@ -14,7 +14,7 @@ const GUIDE_TOPICS = {
         label: 'UI components (Accordion, Modal, Tabs, Button, etc.)',
     },
     'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
-    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
+    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--bxsh, set--hov, etc.)' },
     'primitive-class': {
         file: 'primitive-class.md',
         label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--), with column-layout primitive selection guide',

package/package.json

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