@lism-css/mcp 0.15.1 → 0.18.0

package/dist/data/guides/tokens.md

@@ -28,16 +28,16 @@ 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` | `--lts--{key}` | `--lts--s` |
+| 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
 | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `container` | `--sz--{key}` | `--sz--l` |
+| サイズ (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` |
@@ -49,22 +49,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)
@@ -83,7 +100,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--fz--s` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))` | S（mol/(mol+1)） |
 | `--fz--xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))` | XS（mol/(mol+2)） |
 | `--fz--2xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))` | 最小（mol/(mol+3)） |
-| `--fz--base` | `var(--REM)` | 本文の基本フォントサイズ（≒ 1rem） |
+| `--fz--base` | `1rem` | 本文の基本フォントサイズ |
 | `--fz--root` | — | `:root` のフォントサイズ |
 
 `--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
@@ -106,8 +123,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
 | `--lts--base` | `normal` | 基本の文字間隔 |
-| `--lts--s` | `-0.05em` | 狭めの文字間隔 |
+| `--lts--s` | `-0.025em` | 狭めの文字間隔 |
 | `--lts--l` | `0.05em` | 広めの文字間隔 |
+| `--lts--xl` | `0.1em` | より広い文字間隔 |
 
 
 ## フォント (ff)

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

@@ -39,12 +39,14 @@
 
 子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
 
-## `--sz--container` の提供
+## `--sz--bleed` の提供
 
-`is--container` は直下の子要素に `--sz--container: 100cqi` をセットします。`-max-sz:container` はこの値を参照しており、`is--container` 基準の幅まで広がります。
+最外側の `is--container` は直下の子要素に `--sz--bleed: 100cqi` をセットします。`-max-sz:bleed` はこの値を参照しており、最外側の `is--container` 基準の幅まで広がります（ネストされた `is--container` は `--sz--bleed` を再上書きしないため、内側の子要素は外側の値を inherit で参照します）。
 
 `has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
 
+`@property --sz--bleed` の `initial-value` は `100svi` のため、`is--container` が祖先に存在しない場合はビューポート幅まで広がる fallback として動作します。
+
 ## 関連プリミティブ
 
 - [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー（`isContainer` と併用可）

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

@@ -80,6 +80,21 @@
 </div>
 ```
 
+## 直下の子要素の挙動
+
+`is--wrapper` 直下の子要素には次のスタイルが当たる：
+
+```scss
+.is--wrapper > * {
+  inline-size: 100%;
+  max-inline-size: min(100%, var(--contentSize));
+  margin-inline: auto;
+}
+```
+
+- `inline-size: 100%` により、自然幅が `--contentSize` 未満の要素（短い段落、`<table>` など）も常に親幅まで広げてから `max-inline-size` で制限される。これにより `l--stack` などの flex 縦並び配下でも横幅が揃い、ガタつきが起きない
+- `<table>` を直下に置くと内容依存の自然幅にはならず、常に wrapper 幅まで広がる。テーブルの自然幅を保ちたい場合は `is--wrapper` を直接の親にしないように、間に別の要素を挟む
+
 ## 関連プリミティブ
 
 - [is--container](./is--container.md) — コンテナクエリ基準（`isContainer` と併用可）

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-27',
-    sourceCommit: '09525769',
+    generatedAt: '2026-05-09',
+    sourceCommit: 'e7352b46',
     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.15.1",
+  "version": "0.18.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {