@lism-css/mcp 0.15.1 → 0.17.0

package/dist/data/docs-index.json

@@ -280,6 +280,12 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.17.0 (2026.05.09)",
+      "-max-sz:bleed の新設 (#360)",
+      "--REM 廃止と --fz--base の簡素化",
+      "a タグのリンク装飾スタイル廃止",
+      "Bug Fixes",
+      "lism-css v.0.16.1 (2026.04.29)",
       "lism-css v.0.16.0 (2026.04.21)",
       "`u--trimChildren` のリネームと除外方式の整理 (#324, #326)",
       "`u--collapseGrid` のリネームと `u--divide` の追加 (#323)",
@@ -313,7 +319,7 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.16.0 の破壊的変更として Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）、v.0.15.0 では u--trimChildren → u--trimAll へのリネームと除外方式整理（#324/#326）、u--collapseGrid → u--cells へのリネームと u--divide の新設（#323）、opacity トークンのセマンティック命名変更（#316）などがある。"
+    "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）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
@@ -329,7 +335,7 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": [".-hov:-{prop} の使い方", ".-hov:{preset} の使い方", ".-hov:in:{preset} の使い方", "トランジションを設定する方法"],
+    "headings": ["-hov:-{prop} の使い方", "-hov:{preset} の使い方", "-hov:in:{preset} の使い方", "トランジションを設定する方法"],
     "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--var:hov", "has--transition", "transition"],
     "snippet": "ホバー関連のProp。-hov:-{prop} クラスでホバーエフェクトを設定。has--transition との組み合わせでアニメーション実現。set--var:hov と -hov:in:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
@@ -338,9 +344,9 @@
     "title": "-max-sz",
     "description": "コンテンツの最大幅を制御する -max-sz プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": ["-max-sz:full, -max-sz:container", "DEMOページ"],
-    "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "container"],
-    "snippet": "max-sz (max-inline-size) の Prop。xs, s, m, l, xl のサイズトークンで最大幅を指定。-max-sz:full, -max-sz:container の特殊クラスも解説。"
+    "headings": ["full & bleed", "DEMOページ"],
+    "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "bleed"],
+    "snippet": "max-sz (max-inline-size) の Prop。xs, s, m, l, xl のサイズトークンで最大幅を指定。-max-sz:full（親要素いっぱいに広がる）と -max-sz:bleed（最外側の is--container 幅まで広がる）特殊クラスも解説。"
   },
   {
     "sourcePath": "core-components/Lism.mdx",

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.16.0` / `@lism-css/ui@0.16.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.17.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
@@ -38,11 +38,15 @@ import 'lism-css/main.css';
 ```jsx
 // React
 import { Flex, Stack, Grid, Columns } from 'lism-css/react';
-import { Accordion, Tabs, Button } from '@lism-css/ui/react';
+import { Accordion } from '@lism-css/ui/react/Accordion';
+import { Tabs } from '@lism-css/ui/react/Tabs';
+import { Button } from '@lism-css/ui/react/Button';
 
 // Astro
 import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
-import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
+import { Accordion } from '@lism-css/ui/astro/Accordion';
+import { Tabs } from '@lism-css/ui/astro/Tabs';
+import { Button } from '@lism-css/ui/astro/Button';
 ```
 
 
@@ -53,32 +57,96 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 レイアウト選択ミスや典型的な記法ミスを避けるため、コード生成の前に以下を確認すること：
 
 - **どの Primitive を使うか迷ったら** → [primitive-class.md の「カラムレイアウト Primitive の使い分けガイド」](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド) — 比較表と用途別の選び方で判断材料を提供
-- **コードを書く前のチェック** → [antipatterns.md](./antipatterns.md) — Token typo / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜けの NG → OK カタログ
+- **コードを書く前のチェック** → [antipatterns.md](./antipatterns.md) — Token typo / px 直書き / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜けの NG → OK カタログ
+
+### プリフライト・プリミティブ選定（必須）
+
+実装対象の UI 構造を見て、**まずどのプリミティブ／コンポーネントを使うかを決めること**。ここを飛ばすと `<div>` + Property Class でゴリ押すコードになり、レイアウトの一貫性が失われる。
+
+検討順：
+
+1. **レイアウトプリミティブ** — `Stack` / `Flex` / `Cluster` / `Grid` / `Columns` / `WithSide` / `Center` / `Frame` / `Flow` / `TileGrid` / `AutoColumns` / `SwitchColumns` / `Box` のいずれかで構造を組めないか？
+2. **Trait クラス** — `Container`(`is--container`) / `Wrapper`(`is--wrapper`) / `Layer`(`is--layer`) / `BoxLink`(`is--boxLink`) で表現すべき役割が無いか？
+3. **Atomic プリミティブ** — `Icon` / `Divider` / `Spacer` / `Decorator` で置き換えられる装飾要素が無いか？
+4. **UI コンポーネント** — `@lism-css/ui` の `Accordion` / `Modal` / `Tabs` / `Button` / `Badge` / `Callout` 等で済む UI が無いか？
+
+判断に迷う場合：
+
+- カラム系の使い分け → [primitive-class.md の使い分けガイド](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド)
+- 典型的な選択ミス → [antipatterns.md のレイアウト選択ミス](./antipatterns.md#レイアウト選択ミス)
+
+### プリフライト・トークン照合（必須）
+
+コードを書き始める前に、**これから使う予定の数値・キー名・カラー名をすべて列挙し、[tokens.md](./tokens.md) の値リストと照合すること**。照合が済むまでコードを書かない。
+
+頻出ミス（spacing 中間値・角丸/影の数値外し・fz の他FW混入・存在しないカラー名・`--keycolor` 誤用 など）の NG → OK 例は [antipatterns.md](./antipatterns.md) を参照。
+
+照合中に「該当トークンが無い／揺れる」値が見つかった場合は、そのまま実装に進まず [デザインデータ取り込み時のフロー](#デザインデータ取り込み時のフロー) に従ってユーザー確認すること。
+
+### プリフライト・c-- 定義時の分解（必須）
+
+`c--*` を新規に定義する／既存に追記する前に、書こうとしている各 CSS 宣言を以下の 2 グループに分解する：
+
+1. **Property Class / Props で書ける宣言** — マークアップ側に `-{prop}:{value}` または Lism Props として移す。CSS に書かない。
+2. **CSS でしか書けない宣言** — 擬似クラス・擬似要素・状態切替・子孫セレクタなど。これらは `.c--*` の CSS に残す。
+
+**CSS が 1 行も残らなくても、`c--*` クラス名はマークアップに付けたまま残してよい。**
+むしろコンポーネントとしての意味づけがソースから読み取れるので、空の `c--*` クラスは付けておくことを推奨する（CSS ファイル側にセレクタを書く必要は無い）。
+
+例：
+
+NG（全部 CSS に書く）
+
+```css
+.c--tag {
+  font-size: var(--fz--xs);
+  padding: var(--s10);
+  background-color: var(--base-2);
+  border-radius: var(--bdrs--10);
+}
+```
+
+OK（Property Class でマークアップに移し、`c--tag` は意味づけとして残す）
+
+```html
+<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">React</span>
+```
+
+`.c--tag` の CSS には、`:hover` 等の擬似クラスや、Modifier（`.c--tag--solid`）・状態切替（`[data-is-active]` 等）の宣言が出てきた時にだけ書く。そういう宣言が無ければ CSS は空のままで OK（クラス名はマークアップに残す）。
+
+> **注意**: `is--*` は「〜である（役割・存在の宣言）」を表す trait 用プレフィックス。ユーザー定義の `is--*` を追加することは可能だが、**状態管理（`is--active` 等）やスタイルバリエーション（`is--solid` 等）への流用は誤用**。状態は `data-*` 属性、バリエーションは BEM Modifier（`c--{name}--{variant}`）で表現する。詳細: [antipatterns.md の `is--` の誤用](./antipatterns.md#is---の誤用状態バリエーション)
+
+詳細な NG → OK 例は [antipatterns.md の「Property Class で書けるのに CSS で書く」](./antipatterns.md#property-class-で書けるのに-css-で書く) を参照。
 
 ### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
 
-まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。
+プリフライトでプリミティブとトークンを決めたら、細部を以下のチェックリストで検討する：
 
-- `l--`,`a--`,`is--` などの Primitive Class や `c--` などの Component Class を用いることができるか？（React, Astroの場合は `Lism`, `Stack`, `Flex`, `Columns` 等のコンポーネントを利用して構築できるか？）
 - Lism の用意している `set--`系クラス、`u--`系クラスは使えないか？
 - Property Class (`-{prop}:{value}` or `<Lism prop="value">`))を使ってスタイリングできるか？
 - 値をレスポンシブに切り替える時は Lism の Property Class (`-{prop}_{bp}` or `<Lism prop={[...]}>`)を使って実装できるか？
 - カラー・余白・フォントサイズ・タイポグラフィ・行間（ハーフレディング）・サイズ・角丸・シャドウなどはトークン値を流用できないか？
 - その他、Lismが用意するCSS変数を活用できないか？
 
-### ネイティブCSS で書くもの（必要に応じて適切な `@layer` 内で書くこと）
+### ネイティブCSS で書くかどうか
+
+`c--*` クラスを定義する際、Primitive Class / Trait Class / Property Class / Lism Props で書ける宣言は CSS に直接書かない。
+
+CSS（`@layer lism-component` 等）に書くのは、以下のいずれかに該当する宣言のみ：
+
+- 擬似クラス・擬似要素（`:focus`, `::before`, `::after`, `:nth-child` 等）
+- 状態切替（data属性で管理する`[data-is-active]`等）で複数プロパティを切り替える場合
+- 自分でクラスを付けられない子孫要素のスタイル（MDX/markdown レンダリング配下の `h2` / `p` / `blockquote` 等）
+- その他、Lism の既存クラスで表現できないスタイル。（計算式・特殊なスタイル、アニメーションなど。）
+
+
+### コンポーネント化のルール（CSS ではなくマークアップで束ねる）
 
-- Lismにないアニメーションやhoverエフェクト（適宜クラスを追加して使用する）
-- 独自コンポーネントの実装に合わせた`c--`クラス(`@layer lism-component`内で定義する)
-- 複雑なセレクタ（`:nth-child`, `::before`, `::after` 等）を使用する必要があるスタイル
-- カスタムプロパティを使った独自の計算式が必要なスタイル
-- その他、Lism のトークンやプリミティブでカバーできない特殊なスタイル
+同じ Property Class の組み合わせが 3 箇所以上で繰り返されるなら、**まず Astro/React コンポーネントとして切り出して Props で共通化** することを検討する。CSS の `c--*` を新設して中にスタイルを書くのはそれができない場合の手段とする。
 
-### コンポーネント化のルール
+- コンポーネントはできる限り `<Lism>` 系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築する。
+- カスタムコンポーネントクラスは `c--{name}` の命名規則に従う（CSS が空でも意味づけとして付ける）。
 
-- 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
-- コンポーネントはできる限り `<Lism>`系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築すること。
-- カスタムクラスが必要な場合は `c--{name}` の命名規則に従う。
 
 ### 間違いやすい例
 
@@ -103,6 +171,40 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 ページ全体のデザインデータを渡された時、サイト幅やセクションエリアのサイズをpxでハードコーディングする前に、`--sz--`トークンを活用できないかをまずは考えてください。
 `<Lism as="section" max-sz="m"`>(`-max-sz:m`クラス) などの指定でコンテンツ幅を管理することができます。
 
+### デザインデータ取り込み時のフロー
+
+Figma 等のデザインデータから値を読み取って実装する場合、px / rem / em の固定値が含まれることが多い。**実装に着手する前に**以下の手順でユーザーに方針を確認すること。確認せずに px 直書きで進めない。
+
+#### 手順
+
+1. **px / rem / em で書かれた値を抽出**（spacing / radius / size / fz / lh / lts / shadow など）
+2. **対応するトークン候補と差分を表で提示**
+
+   | デザイン値 | 最寄りトークン | 差分 |
+   |---|---|---|
+   | `padding: 12px` | `--s15`（≒12px） | 一致 |
+   | `padding: 3px` | `--s5`（≒4px） | +1px |
+   | `border-radius: 6px` | `--bdrs--10`（4px）／`--bdrs--20`（8px） | ±2px |
+   | `font-size: 13px` | `--fz--xs`（mol/(mol+2)） | スケール基準でズレる |
+
+3. **ユーザーに方針を確認**（候補は以下の3択）
+
+   - **A. デザイン値を優先して px / rem / em で直書きする**
+     - 一貫性より忠実度を優先するケース。デザイントークンの恩恵は失う。
+   - **B. 最寄りトークンに丸める（推奨）**
+     - 一貫性・スケーラビリティを優先。微差は許容する。
+   - **C. トークン全体の基準値を上書きする**
+     - デザインのスケールに合わせて、`--s-unit` / `--fz-mol` などの基準変数や、 `--s10`, `--fz--xl` , `--bdrs--10` などの**具体的な各トークン変数を `global.css` で再定義**することで、トークン全体をデザインデータに揃える。
+     - 既存トークンの上書きで吸収できない場合に限り、`--s25` 等のカスタムトークンを追加する。
+
+4. 確認結果に従って実装する。
+
+#### 確認不要な例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- ブラウザ仕様上 px 必須の値（`media query`、`@container` の `min-width` 等）
+
 
 ## 詳細リファレンス
 
@@ -114,7 +216,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - [base-styles.md](./base-styles.md) — HTML要素のベーススタイリング。（Reset CSSやHTML要素の基本スタイルをカスタマイズできるCSS変数）
 - [set-class.md](./set-class.md) — ベーススタイル・変数セットに使用する`set--` クラスの一覧と用途。
 - [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`l--`/`a--`）の一覧と用途。カラムレイアウト系の使い分けガイドも含む。
-- [antipatterns.md](./antipatterns.md) — AI が生成しがちな NG パターンと OK 対応。Token typo / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜け。
+- [antipatterns.md](./antipatterns.md) — AI が生成しがちな NG パターンと OK 対応。Token typo / px 直書き / `--keycolor` 誤用 / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜け。
 - [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}`形式のクラス）の一覧・記法。
@@ -169,7 +271,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 
 - `-bd` / `-bd-{side}` 系: [property-class/bd.md](./property-class/bd.md)
 - `-hov:*` 系: [property-class/hov.md](./property-class/hov.md)
-- `-max-sz:full` / `-max-sz:container`: [property-class/max-sz.md](./property-class/max-sz.md)
+- `-max-sz:full` / `-max-sz:bleed`: [property-class/max-sz.md](./property-class/max-sz.md)
 
 
 ## このスキルファイル自身のアップデート方法

package/dist/data/guides/antipatterns.md

@@ -5,6 +5,11 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 ## TOC
 
 - [Token typo（存在しない値）](#token-typo存在しない値)
+- [px / 固定値の直書き](#px--固定値の直書き)
+- [Property Class で書けるのに CSS で書く](#property-class-で書けるのに-css-で書く)
+- [`is--` の誤用（状態・バリエーション）](#is---の誤用状態バリエーション)
+- [クラス名の命名ミス（kebab-case）](#クラス名の命名ミスkebab-case)
+- [`--keycolor` の誤用](#--keycolor-の誤用)
 - [Prop 型ミス](#prop-型ミス)
 - [レイアウト選択ミス](#レイアウト選択ミス)
 - [レスポンシブ抜け](#レスポンシブ抜け)
@@ -32,10 +37,13 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 
 ### スペース（`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#デザインデータ取り込み時のフロー)）。
+
 | NG | OK | 理由 |
 |---|---|---|
 | `p="8"` | `p="10"` | スペーストークンは`5/10/15/20/30/40/50/60/70/80`。tailwindのような4の倍数ではない |
 | `g="6"` | `g="5"` | 同上 |
+| `m="25"`, `m="35"` | `m="20"` or `m="30"` | 中間値は存在しない |
 | `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
@@ -53,6 +61,169 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | `bdrs="sm"`, `bdrs="round"` | `bdrs="20"`, `bdrs="99"` | 角丸トークンは `10` / `20` / `30` / `40` / `99` / `inner` |
 | `bxsh="xs"`, `bxsh="sm"` | `bxsh="10"`, `bxsh="20"` | shadowトークンは `10` / `20` / `30` / `40` / `50` |
 
+### プリセット外の値を Lism Props に渡している
+
+Lism Props では、props.ts で事前定義されたものが `-{prop}:{value}` クラスとして出力される。それ以外の値はそのまま出力されてCSSとして無効になる。
+
+```JSX
+// NG: 事前定義されたトークン値に合致しないため、-lts:2xl は出力されない
+<Text lts="2xl">...</Text>
+```
+
+独自にProperty Classを拡張したりトークン値を増やしたりする場合は、 [property-class.md の `:value` 記法](./property-class.md)を活用するか、[`lism.config.js`による拡張](./customize.md)が必要。
+
+---
+
+## px / 固定値の直書き
+
+デザインデータ由来の px / rem / em をそのまま書くと、Lism CSS のスケール統一が崩れる。**書く前に [SKILL.md のデザインデータ取り込み時のフロー](./SKILL.md#デザインデータ取り込み時のフロー) に従い、ユーザーに「A: そのまま採用 / B: 最寄りトークンに丸める / C: トークン基準値を上書きする」を確認すること**。確認なしに固定値を採用しない。
+
+### スペース・サイズ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `padding: 3px 10px` | `padding: var(--s5) var(--s10)` または Props で `py="5" px="10"` | `3px` はトークン外。最寄りは `--s5`(4px) |
+| `min-width: 28px; height: 28px` | `min-w` / `h` をトークン値に丸める、または基準値を上書き | `28px` はトークン外 |
+| `gap: var(--s5); padding: var(--s10) var(--s15)` を CSS で直書き | `<Lism g="5" py="10" px="15">` | Property Class / Props で書ける |
+
+### 角丸・ボーダー
+
+| NG | OK | 理由 |
+|---|---|---|
+| `border-radius: 2px` | `border-radius: var(--bdrs--10)`（4px） | 角丸トークンの最小は `--bdrs--10`（4px）。`2px` はトークン外 |
+| `border-radius: 6px` | `--bdrs--10`（4px）か `--bdrs--20`（8px）に丸める | 6px はトークン外 |
+
+### タイポグラフィ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `font-size: 13px` を直書き | `font-size: var(--fz--xs)` または Props で `fz="xs"` | フォントサイズは調和数列スケール。固定値は避ける |
+| `letter-spacing: 0.02 / 0.12 / 0.14 / 0.18 / 0.2 / 0.24em` を散在 | `--lts--s/-l/-xl` を使う、または独自の `--lts--*` を `global.css` で追加 | デフォルトの `lts` トークンは `s/l/xl` のみ。多種混在はデザイントークンとして不健全 |
+
+### 直書きしてよい例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- `media query` / `@container` の閾値など、ブラウザ仕様上 px 必須の値
+
+---
+
+## Property Class で書けるのに CSS で書く
+
+`c--*` を定義したくなったら、まず宣言ごとに Property Class へ落とせるか確認する。落とせる宣言を CSS に書くと、CSS が肥大化し、Property Class の利点（差分上書きの容易さ・読みやすさ）が失われる。
+
+| NG（CSS 直書き） | OK（Property Class） |
+|---|---|
+| `.c--tag { font-size: var(--fz--xs); padding: var(--s10); background: var(--base-2); border-radius: var(--bdrs--10); }` | `<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">` |
+| `.c--eyebrow { font-size: var(--fz--2xs); color: var(--text-2); text-transform: uppercase; }` | `<span class="c--eyebrow -fz:2xs -c:text-2 -tt:uppercase">` |
+
+
+CSS に残すのは、基本的には　`::before` / `> li` などの「Primitive / Trait / Property Class で書けないセレクタ」を伴う宣言。単一要素への装飾束は呼び出し側マークアップに移す。
+
+なお、**CSS が空になっても `c--*` クラス名はマークアップに残して構わない**（むしろ推奨）。コンポーネントとしての役割をソースから読み取りやすくする目的で、意味づけ用に付けたままにする。
+
+
+---
+
+## `is--` の誤用（状態・バリエーション）
+
+Lism CSS の `is--` プレフィックスは「**〜である**」という**役割・存在の宣言**を表す trait 用（`is--container` / `is--wrapper` / `is--layer` / `is--boxLink` / `is--coverLink` / `is--skipFlow` / `is--side` 等）。ユーザーが独自に `is--*` を追加することは可能だが、**その要素の役割（trait）を宣言するもの**であることが条件で、**状態管理やスタイルバリエーション目的に流用しない**（`is--active` / `is--current` / `is--solid` などは誤用）。
+
+→ 詳細: [trait-class.md](./trait-class.md#is-trait役割宣言)
+
+`is--` と紛れがちな 2 つの用途は、Lism では別の手段で表現する：
+
+### 1. 状態管理 → `data-*` 属性を使う
+
+オン/オフが切り替わる状態（active / current / disabled / open / selected 等）は、`is--*` クラスを増やさず HTML の `data-*` 属性で表現する。CSS は属性セレクタで書く。
+
+| NG | OK |
+|---|---|
+| `<a class="c--catTab is--active">` + `.c--catTab.is--active { ... }` | `<a class="c--catTab" data-is-active>` + `.c--catTab[data-is-active] { ... }` |
+| `<li class="c--pager_num is--current">` + `.c--pager_num.is--current { ... }` | `<li class="c--pager_num" aria-current="page">` + `.c--pager_num[aria-current] { ... }` |
+| `<a class="c--pager_nav is--disabled">` + `.c--pager_nav.is--disabled { ... }` | `<a class="c--pager_nav" data-is-disabled>` + `.c--pager_nav[data-is-disabled] { ... }` |
+
+理由：
+
+- `is--*` は「役割宣言」用の trait であり、状態を表すクラスを `is--*` として増やすと意味体系（trait か state か）が混在して読みにくくなる
+- `data-*` は HTML 標準の状態表現で、JS からの切替（`element.dataset.isActive = ''` / `delete element.dataset.isActive`）も自然
+- ARIA 属性で意味が表せる場合（`aria-current` / `aria-disabled` / `aria-selected` 等）は ARIA を優先し、その属性自体を CSS セレクタにする
+
+### 2. スタイルバリエーション → BEM Modifier `c--{name}--{variant}`
+
+「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の Component Class](./css-rules.md#component-classc--)）。
+
+| NG | OK |
+|---|---|
+| `<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:*` を差し替えるだけで済むことも多い。
+
+---
+
+## クラス名の命名ミス（kebab-case）
+
+Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `set--` 等）に続く名称は **camelCase** で書くのが規約。kebab-case で書くと、BEM の Modifier 区切り（`--`）と視覚的に紛れて読みにくくなる。
+
+→ 詳細: [naming.md](./naming.md#クラス名)
+
+| NG | OK | 理由 |
+|---|---|---|
+| `c--my-card` | `c--myCard` | プレフィックス後の名称は camelCase |
+| `c--my-card--primary` | `c--myCard--primary` | Modifier 区切り `--` と単語区切り `-` が混在して読みにくい |
+| `c--card_my-elem` | `c--card_myElem` | Element 名（`_` 後）も camelCase |
+| `is--side-bar` / `has--gutter-x` | `is--sideBar` / `has--gutterX` | `is--` / `has--` / `u--` 等にも同じ規則が適用される |
+
+```jsx
+// NG: kebab-case
+<Stack className="c--feature-card" />
+<div className="c--user-profile c--user-profile--compact" />
+
+// OK: camelCase
+<Stack className="c--featureCard" />
+<div className="c--userProfile c--userProfile--compact" />
+```
+
+---
+
+## `--keycolor` の誤用
+
+`--keycolor` は要素単位で「軸となる色」を切り替えるための**ローカル変数**。サイト全体のブランドカラーやリンクカラーには使わない。
+
+### `:root` でのグローバル上書き
+
+| NG | OK | 理由 |
+|---|---|---|
+| `:root { --keycolor: #c8553d; }` | `:root { --brand: #c8553d; }`（または `--accent` / `--link`） | サイト共通の色は `--brand` / `--accent` / `--link` などのセマンティックカラーで定義する |
+
+### アクセントカラーとしての `keycolor` 参照
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Link c="keycolor">` | `<Link c="brand">` または `<Link c="link">` | リンク・hover などの恒常的なアクセントは `brand` / `link` を使う |
+| `hov={{ c: 'keycolor' }}` | `hov={{ c: 'brand' }}` | 同上 |
+| `border-inline-start: 3px solid var(--keycolor)`（CSS 直書き） | `border-inline-start: 3px solid var(--brand)` | 同上 |
+
+### `--keycolor` を使うべき場面
+
+「**そのボックス／コンポーネント自身の軸色**」を切り替えたい時のみ：
+
+```html
+<!-- u--cbox や c--callout など、ボックス全体の色味を局所的に切り替える -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="--c: var(--keycolor)">danger 用カラーリング</p>
+</div>
+```
+
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
+詳細: [tokens.md のキーカラー変数セクション](./tokens.md#キーカラー変数-keycolor)
+
 ---
 
 ## Prop 型ミス
@@ -87,7 +258,7 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 
 | NG | OK | 理由 |
 |---|---|---|
-| `style={{ maxWidth: '1200px' }}` | `<Box max-sz="l">` | ヘッダーやセクションなど、コンテンツサイズにはトークン値（`xs` / `s` / `m` / `l` / `xl` / `container`）をできるだけ活用する |
+| `style={{ maxWidth: '1200px' }}` | `<Box max-sz="l">` | ヘッダーやセクションなど、コンテンツサイズにはトークン値（`xs` / `s` / `m` / `l` / `xl` / `bleed`）をできるだけ活用する |
 
 ### サイドバー型レイアウト
 

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

@@ -66,8 +66,6 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 |------|------------|------|
 | `--link-c` | `var(--link)` | リンクテキスト色 |
 | `--link-td` | `underline` | テキスト装飾の種類 |
-| `--link-td-thickness` | `auto` | 下線の太さ |
-| `--link-td-color` | `currentColor` | 下線の色 |
 
 ### リスト（ul, ol）
 
@@ -75,7 +73,7 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--list-px-s` | `var(--s30)` | リストの `padding-inline-start` |
+| `--list-px-s` | `1.75em` | リストの `padding-inline-start` |
 
 ### テーブル（table, td, th）
 
@@ -83,7 +81,7 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 |------|------------|------|
 | `--td-c` | `inherit` | セルのテキスト色 |
 | `--td-bgc` | `transparent` | セルの背景色 |
-| `--td-p` | `var(--s10)` | セルのパディング |
+| `--td-p` | `var(--s10) var(--s15)` | セルのパディング |
 | `--td-min-sz` | `initial` | セルの最小幅 |
 | `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
 | `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |

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

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

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

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

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

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

package/dist/data/guides/customize.md

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

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

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

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

@@ -6,6 +6,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ## TOC
 
 - [基本書式](#基本書式)
+  - [プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）](#プリセット外の値をクラス化するvalue-記法lism-props-限定)
 - [表の読み方](#表の読み方)
 - [全 Prop 一覧](#全-prop-一覧)
 - [特殊な Property Class](#特殊な-property-class)
@@ -22,7 +23,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 - [property-class/bd.md](./property-class/bd.md) — ボーダー（`-bd` / `-bd-{side}` 系）
 - [property-class/hov.md](./property-class/hov.md) — ホバー（`-hov:*` 系）
-- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:container` 等）
+- [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:bleed` 等）
 
 ---
 
@@ -47,6 +48,16 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 ```
 
 
+### プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）
+
+Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、 **強制的に Property Class を出力**できる。cssを追記してトークン値を独自に増やした場合などに活用できる。
+
+```jsx
+<Text lts=":2xl">...</Text>
+// → <p class="-lts:2xl">...</Text>
+```
+
+
 ## 表の読み方
 
 | カラム | 説明 |
@@ -72,7 +83,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `fs` | `font-style` | `-fs:italic` | — |
 | `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
 | `hl` | `--hl` 変数のみ | — | `-hl_sm`, `-hl_md` |
-| `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l` | — |
+| `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l`, `-lts:xl` | — |
 | `ta` | `text-align` | `-ta:center`, `-ta:left`, `-ta:right` | — |
 | `td` | `text-decoration` | `-td:none` | — |
 | `tt` | `text-transform` | `-tt:upper`, `-tt:lower` | — |
@@ -103,14 +114,14 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `max-h` | `max-height` | `-max-h:100%` | `-max-h_sm`, `-max-h_md` |
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
-| `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:container` | — |
+| `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:bleed` | — |
 | `bsz` | `block-size` | — | — |
 | `min-bsz` | `min-block-size` | — | — |
 | `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
-- `-max-sz:container` — コンテナ幅に合わせる（`margin-inline` で中央配置）
+- `-max-sz:bleed` — 最外側の `is--container` 幅まで広がる（`margin-inline` で中央配置、`is--container` 祖先がなければ `100svi` まで広がる）
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
 

package/dist/data/guides/tokens.md

@@ -31,13 +31,13 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | 余白 (space) | `5`, `10`, `15`, `20`, `30`, `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` |
@@ -83,7 +83,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 +106,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/package.json

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