@lism-css/mcp 0.15.0 → 0.15.1

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

@@ -7,32 +7,32 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 - クラス名: `-hov:-{prop}` / `-hov:{preset}` / `-hov:in:{preset}`
 - Lism props: `hov`（`<Lism hov="-c">` / `<Box hov={{ bgc: 'brand' }}>` 等）
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_hover.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/property-class/hov/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/hov.md
 
 ## 3 つの形式
 
 | 形式 | 役割 |
 |------|------|
-| `.-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
-| `.-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
-| `.-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
+| `-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
+| `-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
+| `-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
 
 `-hov:-{prop}` と `-hov:{preset}` は `@media (any-hover: hover)` 内で定義されるため、タッチデバイスでは無効。  
 `-hov:in:*` はメディアクエリ外で、親の `set--var:hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
 
 トランジションを付けたい場合は [`has--transition`](../trait-class/has--transition.md) クラスを併用する。
 
-## `.-hov:-{prop}` — プロパティ変更
+## `-hov:-{prop}` — プロパティ変更
 
 `: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:-o` | `opacity` | `var(--hov-o, 0.7)` |
-| `.-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
+| `-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:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
+| `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 
@@ -45,14 +45,14 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
    style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="###">...</a>
 ```
 
-## `.-hov:{preset}` — プリセット
+## `-hov:{preset}` — プリセット
 
 hover 時のスタイルセットをプリセット名でまとめて適用する。
 
 | クラス | 内容 |
 |--------|------|
-| `.-hov:underline` | テキストに下線を表示 |
-| `.-hov:neutral` | 背景色にニュートラルグレーをブレンド |
+| `-hov:underline` | テキストに下線を表示 |
+| `-hov:neutral` | 背景色にニュートラルグレーをブレンド |
 
 プロジェクト固有のプリセットは、以下のように自作して追加できる。
 
@@ -65,15 +65,15 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 }
 ```
 
-## `.-hov:in:{preset}` — 親連動
+## `-hov:in:{preset}` — 親連動
 
 親要素に `set--var:hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
 
 | クラス | 効果 | 仕組み |
 |--------|------|--------|
-| `.-hov:in:hide` | 親 hover 時にフェードアウト | `opacity: var(--_isHov, 0)` |
-| `.-hov:in:show` | 親 hover 時にフェードイン | `opacity: var(--_notHov, 0)` / `visibility: var(--_notHov, hidden)` |
-| `.-hov:in:zoom` | 親 hover 時にズーム | `scale: var(--_isHov, 1.1)` |
+| `-hov:in:hide` | 親 hover 時にフェードアウト | `opacity: var(--_isHov, 0)` |
+| `-hov:in:show` | 親 hover 時にフェードイン | `opacity: var(--_notHov, 0)` / `visibility: var(--_notHov, hidden)` |
+| `-hov:in:zoom` | 親 hover 時にズーム | `scale: var(--_isHov, 1.1)` |
 
 ```jsx
 <Frame set="var:hov" isBoxLink href="#" ar="16/9">
@@ -103,7 +103,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 
 ### オブジェクト指定
 
-主に `.-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
+主に `-hov:-{prop}` に任意の値を渡す用途。`hov={{ prop: value }}` で `-hov:-{prop}` クラス + `--hov-{prop}` 変数を出力。
 
 ```jsx
 <Lism hov={{ c: 'red' }}>...</Lism>

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

@@ -7,7 +7,7 @@
 - クラス名: `-max-sz:{xs|s|m|l|xl|full|container}`
 - 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/
+- 公式ドキュメント: https://lism-css.com/docs/property-class/max-sz.md
 
 ## トークン対応クラス
 
@@ -25,7 +25,7 @@
 
 ### `-max-sz:full`
 
-**親要素のサイズいっぱいに広がる**クラス。`.has--gutter` の直下では、その gutter 分を**追加で外側に**拡張する（= gutter を無視して端まで広がる）。
+**親要素のサイズいっぱいに広がる**クラス。`has--gutter` の直下では、その gutter 分を**追加で外側に**拡張する（= gutter を無視して端まで広がる）。
 
 ```scss
 .-max-sz\:full {
@@ -38,11 +38,11 @@
 }
 ```
 
-`.has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。
+`has--gutter` の内側で全幅画像・全幅バナーなどを配置したい時に使う。
 
 ### `-max-sz:container`
 
-**コンテナ要素を基準としたサイズ**まで広がる。`.is--container` ごとに `--sz--container` が更新されるため、直近の container を基準にサイズ決定される。
+**コンテナ要素を基準としたサイズ**まで広がる。`is--container` ごとに `--sz--container` が更新されるため、直近の container を基準にサイズ決定される。
 
 ```scss
 .-max-sz\:container {
@@ -64,7 +64,7 @@
 <div class="-max-sz:m -mx:auto" style="max-inline-size: var(--sz--m)">...</div>
 ```
 
-### `.has--gutter` 内の全幅要素
+### `has--gutter` 内の全幅要素
 
 ```html
 <div class="has--gutter">

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

@@ -16,7 +16,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 - [Property Class の特殊な出力タイプ](#property-class-の特殊な出力タイプ)
 - [Property Class の検索・一括修正](#property-class-の検索一括修正)
 
-[詳細](https://lism-css.com/docs/property-class/)
+[詳細](https://lism-css.com/docs/property-class.md)
 
 個別ドキュメント:
 
@@ -84,7 +84,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | 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` |
-| `o` | `opacity` | `-o:0`, `-o:-10`, `-o:-20`, `-o:-30` | — |
+| `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` | — |
@@ -109,7 +109,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
-- `-max-sz:full` — `.has--gutter` 内では gutter 分を含めた全幅に拡張
+- `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
 - `-max-sz:container` — コンテナ幅に合わせる（`margin-inline` で中央配置）
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
@@ -275,7 +275,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ## 特殊な Property Class
 
-以下は通常の `.-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
+以下は通常の `-{prop}:{value}` パターンとは異なる特殊な仕組みを持つ Prop です。
 
 ### ボーダー（`bd` 系）
 
@@ -296,11 +296,11 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 | 形式 | 役割 | 動作条件 |
 |------|------|---------|
-| `.-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
-| `.-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
-| `.-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
+| `-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
+| `-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:neutral`, `-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/set-class.md

@@ -22,7 +22,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 - [`set--var:hov`](#set--varhov)
 - [`set--var:bdrsInner`](#set--varbdrsinner)
 
-[詳細](https://lism-css.com/docs/set-class/)
+[詳細](https://lism-css.com/docs/set-class.md)
 
 ---
 
@@ -114,7 +114,7 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 .-hov\:test {
   color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
   box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
-  opacity: var(--_notHov, var(--o---20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
+  opacity: var(--_notHov, var(--o--pp)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
 }
 ```
 

package/dist/data/guides/tokens.md

@@ -20,7 +20,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [カラー](#カラー)
 - [トークン値の命名規則](#トークン値の命名規則)
 
-[詳細](https://lism-css.com/docs/tokens/)
+[詳細](https://lism-css.com/docs/tokens.md)
 
 ---
 
@@ -34,7 +34,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | 字間 (lts) | `base`, `s`, `l` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
-| 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
+| 透明度 (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` |
@@ -132,11 +132,14 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 透明度 (o)
 
+音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用。`p`（piano / 弱く）の反復回数が多いほど透明度が増す。Lism 内で「文字の反復回数で段階を表す」命名は opacity のみの例外。
+
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
-| `--o---10` | `0.75` | 75%の不透明度 |
-| `--o---20` | `0.5` | 50%の不透明度 |
-| `--o---30` | `0.25` | 25%の不透明度 |
+| `--o--mp` | `0.9` | mezzo-piano: ごく軽い減衰 |
+| `--o--p` | `0.75` | piano: hover fade, 補助テキスト等 |
+| `--o--pp` | `0.5` | pianissimo: disabled, divider, decorator 等 |
+| `--o--ppp` | `0.25` | pianississimo: 最も強く減衰 |
 
 
 ## 角丸 (bdrs)

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

@@ -6,8 +6,8 @@
 
 - クラス名: `has--gutter`
 - Lism props: `hasGutter`（`<Lism hasGutter>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasGutter.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--gutter
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_gutter.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--gutter
 
 ## SCSS 定義
 

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

@@ -6,8 +6,8 @@
 
 - クラス名: `has--mask`
 - Lism props: `hasMask`（`<Lism hasMask>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasMask.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--mask
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_mask.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--mask
 
 ## SCSS 定義
 

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

@@ -6,8 +6,8 @@
 
 - クラス名: `has--snap`
 - Lism props: `hasSnap`（`<Lism hasSnap>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasSnap.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--snap
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_snap.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--snap
 
 ## SCSS 定義
 

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

@@ -6,8 +6,8 @@
 
 - クラス名: `has--transition`
 - Lism props: `hasTransition`（`<Lism hasTransition>` / `<Box hasTransition>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasTransition.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--transition
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_transition.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--transition
 
 ## SCSS 定義
 

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

@@ -6,8 +6,8 @@
 
 - クラス名: `is--boxLink`
 - コンポーネント: `<BoxLink>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_boxLink.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--boxLink/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_boxLink.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--boxLink.md
 
 ## 専用Props
 

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

@@ -6,8 +6,8 @@
 
 - クラス名: `is--container`
 - コンポーネント: `<Container>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_container.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--container/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_container.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--container.md
 
 ## 使い方
 
@@ -15,7 +15,7 @@
 
 | Prop | 出力 |
 |------|------|
-| `isContainer` | `.is--container` |
+| `isContainer` | `is--container` |
 
 ## Usage
 
@@ -39,8 +39,14 @@
 
 子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
 
+## `--sz--container` の提供
+
+`is--container` は直下の子要素に `--sz--container: 100cqi` をセットします。`-max-sz:container` はこの値を参照しており、`is--container` 基準の幅まで広がります。
+
+`has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
+
 ## 関連プリミティブ
 
 - [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー（`isContainer` と併用可）
-- [l--flow](./l--flow.md) — 記事コンテンツ向けフローレイアウト
-- [l--box](./l--box.md) — 汎用ボックス
+- [l--flow](../primitives/l--flow.md) — 記事コンテンツ向けフローレイアウト
+- [l--box](../primitives/l--box.md) — 汎用ボックス

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

@@ -6,8 +6,8 @@
 
 - クラス名: `is--layer`
 - コンポーネント: `<Layer>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_layer.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--layer/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_layer.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--layer.md
 
 ## 使い方
 
@@ -66,6 +66,6 @@
 
 ## 関連プリミティブ
 
-- [l--frame](./l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
-- [l--grid](./l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
-- [l--center](./l--center.md) — レイヤー内のコンテンツ中央寄せ
+- [l--frame](../primitives/l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
+- [l--grid](../primitives/l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
+- [l--center](../primitives/l--center.md) — レイヤー内のコンテンツ中央寄せ

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

@@ -6,8 +6,8 @@
 
 - クラス名: `is--wrapper`
 - コンポーネント: `<Wrapper>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_wrapper.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--wrapper/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_wrapper.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--wrapper.md
 
 ## 使い方
 
@@ -15,10 +15,10 @@
 
 | 指定 | 出力 |
 |------|------|
-| `isWrapper` | `.is--wrapper` |
-| `isWrapper="s"` | `.is--wrapper .-contentSize:s` |
-| `isWrapper="l"` | `.is--wrapper .-contentSize:l` |
-| `isWrapper="20rem"`（任意値） | `.is--wrapper` + `style="--contentSize: 20rem"` |
+| `isWrapper` | `is--wrapper` |
+| `isWrapper="s"` | `is--wrapper -contentSize:s` |
+| `isWrapper="l"` | `is--wrapper -contentSize:l` |
+| `isWrapper="20rem"`（任意値） | `is--wrapper` + `style="--contentSize: 20rem"` |
 
 ## 専用Props
 
@@ -83,5 +83,5 @@
 ## 関連プリミティブ
 
 - [is--container](./is--container.md) — コンテナクエリ基準（`isContainer` と併用可）
-- [l--flow](./l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
-- [l--box](./l--box.md) — 汎用ボックス
+- [l--flow](../primitives/l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
+- [l--box](../primitives/l--box.md) — 汎用ボックス

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

@@ -9,7 +9,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
 - [`is--` Trait（役割宣言）](#is-- trait役割宣言)
 - [`has--` Trait（機能付与）](#has-- trait機能付与)
 
-[詳細](https://lism-css.com/docs/trait-class/)
+[詳細](https://lism-css.com/docs/trait-class.md)
 
 ---
 
@@ -35,7 +35,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
 | `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
 | `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
 | `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
-| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
+| `is--side` | `l--withSide` 直下で使用し、サイド側の要素であることを示す |
 
 Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます（例: `<Lism isContainer>`）。
 

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

@@ -16,7 +16,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 - [Opt-in ユーティリティ](#opt-in-ユーティリティ)
 - [ユーザー定義のユーティリティクラス](#ユーザー定義のユーティリティクラス)
 
-[詳細](https://lism-css.com/docs/utility-class/)
+[詳細](https://lism-css.com/docs/utility-class.md)
 
 ---
 
@@ -26,11 +26,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 
 | クラス | 用途 | ソースファイル |
 |--------|------|---------------|
-| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
-| `u--trimChildren` | 子要素すべてにハーフレディングトリムを適用（`img`, `figure`, `button` は除外） | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
+| `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--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
-| `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.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--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,8 +44,8 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 <!-- u--trim: テキスト余白の詰め -->
 <p class="u--trim">テキスト...</p>
 
-<!-- u--collapseGrid: グリッド子要素間の境界線 -->
-<div class="l--grid u--collapseGrid" style="--gtc: 1fr 1fr">
+<!-- u--divide: グリッド子要素間の区切り線 -->
+<div class="l--grid u--divide" style="--gtc: 1fr 1fr">
   <div>A</div>
   <div>B</div>
 </div>
@@ -54,7 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 // JSX での使用（className で指定）
 <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
 <Text className="u--trim">テキスト...</Text>
-<Grid className="u--collapseGrid" gtc="1fr 1fr">...</Grid>
+<Grid className="u--divide" gtc="1fr 1fr">...</Grid>
 ```
 
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-21',
-    sourceCommit: '0e370dbf',
+    generatedAt: '2026-04-27',
+    sourceCommit: '09525769',
     docsVersion: '0.1.0',
 };

package/dist/tools/get-guide.js

@@ -15,10 +15,17 @@ const GUIDE_TOPICS = {
     },
     '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.)' },
-    'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
+    'primitive-class': {
+        file: 'primitive-class.md',
+        label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--), with column-layout primitive selection guide',
+    },
     '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' },
+    antipatterns: {
+        file: 'antipatterns.md',
+        label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',
+    },
 };
 const TOPIC_DESCRIPTION = Object.entries(GUIDE_TOPICS)
     .map(([key, { label }]) => `- ${key}: ${label}`)

package/package.json

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

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

@@ -1,71 +0,0 @@
-# l--fluidCols / `<FluidCols>`
-
-カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
-
-## 基本情報
-
-- クラス名: `l--fluidCols`
-- コンポーネント: `<FluidCols>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_fluidCols.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--fluidCols/
-
-## 専用Props
-
-| Prop | CSS変数 | 説明 |
-|------|--------|------|
-| `cols` | `--cols` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
-| `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
-
-## Usage
-
-### `--cols`でサイズを指定する
-
-```jsx
-<FluidCols cols="16em" g="20">
-  <Lism as="div" p="20" bd>Item A</Lism>
-  <Lism as="div" p="20" bd>Item B</Lism>
-  <Lism as="div" p="20" bd>Item C</Lism>
-  <Lism as="div" p="20" bd>Item D</Lism>
-</FluidCols>
-```
-
-```html
-<div class="l--fluidCols -g:20" style="--cols: 16em">
-  <div class="-p:20 -bd">Item A</div>
-  <div class="-p:20 -bd">Item B</div>
-  <div class="-p:20 -bd">Item C</div>
-  <div class="-p:20 -bd">Item D</div>
-</div>
-```
-
-### `auto-fill`を使用する
-
-`l--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
-
-```jsx
-<FluidCols cols="12em" autoFill g="20" fz="s">
-  <Lism as="div" p="20" bd>auto-fill</Lism>
-  <Lism as="div" p="20" bd>auto-fill</Lism>
-</FluidCols>
-<FluidCols cols="12em" g="20" fz="s">
-  <Lism as="div" p="20" bd>auto-fit</Lism>
-  <Lism as="div" p="20" bd>auto-fit</Lism>
-</FluidCols>
-```
-
-```html
-<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
-  <div class="-p:20 -bd">auto-fill</div>
-  <div class="-p:20 -bd">auto-fill</div>
-</div>
-<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em">
-  <div class="-p:20 -bd">auto-fit</div>
-  <div class="-p:20 -bd">auto-fit</div>
-</div>
-```
-
-## 関連プリミティブ
-
-- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
-- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列の2段階切り替え
-- [l--sideMain](./l--sideMain.md) — メイン幅ベースの2カラム自動切替