@lism-css/mcp 0.13.0 → 0.15.0

package/dist/data/guides/naming.md

@@ -0,0 +1,218 @@
+# 命名規則
+
+## TOC
+
+- [CSS変数の命名規則](#css変数の命名規則)
+- [クラスの命名規則](#クラスの命名規則)
+- [`{prop}` の省略ルール](#prop-の省略ルール)
+- [`{value}` の省略ルール](#value-の省略ルール)
+
+[詳細](https://lism-css.com/docs/naming/)
+
+---
+
+## CSS変数の命名規則
+
+各ブロックは camelCase で `{varName}` の形式が基本。
+
+### トークン変数
+
+| 種類 | 形式 | 例 |
+|------|------|-----|
+| 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
+| カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
+| スペーシング | `--s{Token}` | `--s10`, `--s40` |
+
+トークンのバリエーション:
+
+| 表記 | 条件 | 例 |
+|------|------|-----|
+| `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
+| `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
+| `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
+| `-10`, `-20`, `-30`... | `0`(`none`)基準で段階的に減少 | `--o---10`, `--o---20` |
+| セマンティック名 | 上記に当てはまらない場合 | `--ar--og` |
+
+### Property Class 用の変数
+
+| 形式 | 説明 | 例 |
+|------|------|-----|
+| `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--max-sz` |
+| `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
+
+### その他の変数
+
+| 形式 | 用途 | 例 |
+|------|------|-----|
+| `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
+| `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
+| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
+| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+
+
+## クラスの命名規則
+
+プレフィックスとクラス分類の対応:
+
+- Component: `c--`
+- Atomic Primitives: `a--`
+- Layout Primitives: `l--`
+- Trait（役割宣言）: `is--`
+- Trait（機能付与）: `has--`
+- Set Class: `set--`
+- Utility Class: `u--`
+
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
+
+**使い分けの判断軸:**
+
+| プレフィックス | 責務 | 代表例 |
+|---|---|---|
+| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
+| `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
+| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--collapseGrid` |
+
+- `set--` は `@lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
+- `is--` / `has--` は `@lism-trait` 層に属する。
+
+Property Class の形式:
+
+- 特定の値とセット: `-{prop}:{value}`
+- `--{prop}` 変数を受け取る: `-{prop}`
+- ブレークポイント値を受け取る: `-{prop}_{bp}`
+- 修飾子 + Property Class 合成: `-{modifier}:-{prop}`（例: `-hov:-c` は `-c` の hover バリアント）
+
+
+## `{prop}` の省略ルール
+
+基本は [Emmet](https://docs.emmet.io/cheat-sheet/) 準拠。
+
+> **Note**: 「1文字プロパティ」セクション以外の表は **代表例** であり、全プロパティの一覧ではない。記載のないプロパティは本ページのルールに沿って省略する。
+
+### 1文字プロパティ
+
+1文字に省略する主要プロパティは以下の通り（このリストが全て）。
+
+| 省略 | プロパティ | 省略 | プロパティ |
+|------|-----------|------|-----------|
+| `p` | `padding`    | `i` | `inset` |
+| `m` | `margin`     | `t` | `top` |
+| `g` | `gap`        | `b` | `bottom` |
+| `c` | `color`      | `l` | `left` |
+| `f` | `font`       | `r` | `right` |
+| `w` | `width`      | `o` | `opacity` |
+| `h` | `height`     | `v` | `visibility` |
+| `d` | `display`    | `z` | `z-index` |
+
+Emmet と異なるのは `o` (`opacity`) のみ。
+
+### プロパティグループ
+
+#### 基本形式: 「グループ略称」+「サブプロパティ名の省略形」
+
+| CSS プロパティ | Prop |
+|-------------|------|
+| font-size | `fz` |
+| font-weight | `fw` |
+| background-color | `bgc` |
+| background-image | `bgi` |
+| flex | `fx` |
+| flex-shrink | `fxsh` |
+| flex-grow | `fxg` |
+| grid-template-columns | `gtc` |
+| grid-template-rows | `gtr` |
+
+#### 方向指定系: 「グループ略称」 + `-` +「方向指定」
+
+| 方向 | サフィックス | 例 |
+|------|-----------|-----|
+| physical | `-t` / `-b` / `-l` / `-r` | `bd-t`, `bd-b`, `bd-l`, `bd-r` |
+| inline / block | `-x` / `-y` | `bd-x`, `bd-y` |
+| start / end | `-s` / `-e` | `bd-x-s`, `bd-x-e`, `bd-y-s`, `bd-y-e` |
+| x / y | `-x` / `-y` | `ov-x`, `ov-y` |
+
+例外: `p`, `m` のみ最初のハイフンを省略 → `pt`, `px`, `my`, `mx-s` 等。
+
+#### グループ略称の衝突禁止
+
+一つのグループで使用された略称は他のグループで再利用しない。
+NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`fx` グループの一貫性を崩すため）。
+
+### max- / min- プロパティ
+
+`max-`, `min-` プレフィックスはハイフンを保持: `max-w`, `min-w`, `max-h`, `min-h`。
+
+### その他のプロパティ
+
+1. 1単語: そのまま使用 or 省略
+2. ハイフン繋がり、または6文字以上: Emmet形式または認識しやすい範囲で省略
+
+| CSS プロパティ | Prop | 分類 |
+|-------------|------|------|
+| float | `float` | そのまま |
+| order | `order` | そのまま |
+| position | `pos` | 省略 |
+| overflow | `ov` | 省略 |
+| inline-size | `sz` | 省略 |
+| block-size | `bsz` | 省略 |
+| aspect-ratio | `ar` | 省略 |
+| writing-mode | `wm` | 省略 |
+| white-space | `whs` | 省略 |
+
+### 1文字プロパティの短縮名の再利用
+
+グループを持たない1文字プロパティや、方向プロパティのみをサブプロパティに持つ場合は、衝突しない範囲で再利用可。
+
+| 1文字 Prop | 再利用先 | 展開例 |
+|-----------|---------|--------|
+| `t`(`top`) | `text-*` | `ta`(`text-align`) |
+| `l`(`left`) | `line-*` | `lh`(`line-height`) |
+| `w`(`width`) | `writing-*` | `wm`(`writing-mode`) |
+| `p`(`padding`) | `place-*` | `pi`(`place-items`) |
+
+
+## `{value}` の省略ルール
+
+### 基本: CSS の実値をそのまま使う
+
+`{prop}` は既に省略されているため、`{value}` はそのまま残して組み合わせから推測可能にする。
+
+```
+.-d:none          → display: none;
+.-d:inline-flex   → display: inline-flex;
+.-pos:relative    → position: relative;
+.-ta:center       → text-align: center;
+.-fx:1            → flex: 1;
+.-fxd:column      → flex-direction: column;
+```
+
+### トークン値を利用する場合
+
+対応するトークンがある場合は、トークン値（`--{token}--{value}` の `{value}` 部分）を使う:
+
+```
+.-c:text-2        → color: var(--text-2);
+.-fz:l            → font-size: var(--fz--l);
+.-p10             → padding: var(--s10);
+.-fw:bold         → font-weight: var(--fw--bold);
+.-bdrs:20         → border-radius: var(--bdrs--20);
+```
+
+トークン値が `-{NUM}` のものも、値をそのまま連結した変数名になる。
+
+```
+.-o:-10          → opacity: var(--o---10);
+```
+
+### 長いキーワード値の省略
+
+6文字以上かつ省略しても意味が通るものは省略可:
+
+| 実際の値 | 省略名 | クラスの例 |
+|--------|------------|-----|
+| `uppercase` | `upper` | `-tt:upper` |
+| `lowercase` | `lower` | `-tt:lower` |
+| `fit-content` | `fit` | `-w:fit`, `-h:fit` |
+| `space-between` | `between` | `-ac:between`, `-jc:between` |
+| `currentColor` | `current` | `-bdc:current` |

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

@@ -1,16 +1,14 @@
 # Primitive クラス
 
-Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
+Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`l--` / `a--`）を提供します。
+これらは `@layer lism-primitive` に属します（サブレイヤーは `layout` / `atomic`）。
 
-具体的な UI 部品は **Component クラス**（`c--`）として `@layer lism-component` に配置されますが、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
 
 ## TOC
 
 - [プレフィックス一覧](#プレフィックス一覧)
-- [Trait Primitive（`is--`）](#trait-primitiveis--)
 - [Layout Primitive（`l--`）](#layout-primitivel--)
 - [Atomic Primitive（`a--`）](#atomic-primitivea--)
-- [Component（`c--`）](#componentc--)
 
 [詳細](https://lism-css.com/docs/primitives/)
 
@@ -20,36 +18,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 
 | プレフィックス | 種類 | サブレイヤー | 役割 |
 |--------------|------|------------|------|
-| `is--` | Trait Primitive | `lism-primitive.trait` | 要素に静的な構造的特性を付与する汎用クラス |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
-| `c--` | Component | `lism-component` | BEM 構造を持つ具体的な UI 部品 |
 
-**併用ルール:**
-- `is--` は他のすべての Primitive / Component と併用可能（複数の `is--` 同士もOK）
-- `l--` と `c--` は併用可能（例: `class="l--flex c--nav"`）
-- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
-- `c--` のみ Modifier との併記が可能（`.c--button.c--button--outline`）
-
-
-## Trait Primitive（`is--`）
-
-[詳細](https://lism-css.com/docs/primitives/#trait-primitives)
-
-要素に**静的な構造的特性 (trait)** を付与するクラスです。他の Primitive / Component と自由に組み合わせられます。
-
-| クラス | 用途 |
-|--------|------|
-| `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
-| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
-| `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
-| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
-| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
-| `is--vertical` | 縦書きモードを定義する（`writing-mode: var(--vertical-mode)`） |
-| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
-| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
-
-Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。
+併用ルールは [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
 
 
 ## Layout Primitive（`l--`）
@@ -87,62 +59,3 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
 | `a--decorator` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
 
 それぞれ対応するコンポーネント（`<Icon>`, `<Divider>`, `<Spacer>`, `<Decorator>`）があります。
-
-
-## Component（`c--`）
-
-`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
-
-`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
-
-| 分類 | 形式 | 例 |
-|---|---|---|
-| Block | `.c--{name}` | `.c--button`, `.c--card` |
-| Modifier | `.c--{name}--{modifier}` | `.c--button--outline` |
-| Element | `.c--{name}_{element}` | `.c--card_header`, `.c--card_body` |
-
-- Modifier は Block と併記して使用: `.c--button.c--button--outline`
-- Element は `_`（アンダースコア）一つ区切り
-- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
-  - Block と自身の Modifier: `.c--xxx.c--xxx--variant`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-
-`c--`を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`.l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることでCSSの記述量を削減できます。`c--`クラスにスタイルが全くなく、HTML側での可視性を高める名前付けのためだけに利用しても構いません。
-
-### 作成例
-
-`l--stack` と併用する前提でのカスタムクラス例
-
-```css
-@layer lism-component {
-  .c--myCard {
-    gap: var(--s20);
-    padding: var(--s30);
-    border-radius: var(--bdrs--20);
-    box-shadow: var(--bxsh--20);
-    border: 1px solid currentColor;
-    /* ... */
-  }
-}
-```
-
-```html
-<div class="c--myCard l--stack">
-  ...
-</div>
-```
-
-素のHTMLサイトではこのように`c--`クラスにCSSを書いてスタイリングしても大丈夫ですが、Reactなどでコンポーネントを作成できる場合は、特別な理由がない限りProperty Classを活用してください。
-
-```jsx
-export default function MyCard(props) {
-  return <Stack lismClass="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
-}
-```
-```css
-@layer lism-component {
-  .c--myCard {
-    /* 複雑なスタイルあれば css で書く */
-  }
-}
-```

package/dist/data/guides/primitives/a--decorator.md

@@ -1,6 +1,6 @@
 # a--decorator / `<Decorator>`
 
-コンテンツを装飾するための空要素として使うクラス。`<Decorator>` はデフォルトで `aria-hidden="true"` が付与されます。
+コンテンツを装飾するための空要素として使うクラス。`<Decorator>` は `<Lism atomic="decorator" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 
@@ -13,12 +13,10 @@
 | Prop | 説明 |
 |------|------|
 | `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
-| `clipPath` | `style.clipPath` に渡す |
-| `boxSizing` | `style.boxSizing` に渡す |
 
 ## Usage
 
-### 使用例（コーナー装飾）
+### 装飾に使用する例（コーナー装飾）
 
 `pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
 
@@ -42,4 +40,4 @@
 
 - [a--spacer](./a--spacer.md) — 要素間スペース
 - [a--divider](./a--divider.md) — 区切り線
-- [is--layer](./is--layer.md) — `position: absolute` のオーバーレイ
+- [is--layer](../trait-class/is--layer.md) — `position: absolute` のオーバーレイ

package/dist/data/guides/primitives/a--divider.md

@@ -1,6 +1,6 @@
 # a--divider / `<Divider>`
 
-コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` はデフォルトで `aria-hidden="true"` が付与されます。
+コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` は `<Lism atomic="divider" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 
@@ -9,13 +9,6 @@
 - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_divider.scss
 - ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--divider/
 
-## 専用Props
-
-| Prop | 説明 |
-|------|------|
-| `bdw` / `bds` / `bdc` | 区切り線のボーダー幅 / スタイル / 色 |
-| `isVertical` | 縦方向の区切り線にする（`is--vertical` クラス付与） |
-
 ## Usage
 
 ### 基本的な使い方
@@ -44,12 +37,12 @@
 
 ### 縦方向の区切り線
 
-`isVertical` を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
+Property Class `-wm:vertical-rl`（または `<Divider wm="vertical-rl">`）を指定すると縦方向の区切り線になります。Flex 子要素として使うなら `aslf="stretch"` で高さいっぱいに伸ばせます。
 
 ```jsx
 <Flex ai="center" g="20">
   <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
-  <Divider isVertical bds="dashed" bdw="2px" aslf="stretch" />
+  <Divider wm="vertical-rl" bds="dashed" bdw="2px" aslf="stretch" />
   <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
 </Flex>
 ```
@@ -57,7 +50,7 @@
 ```html
 <div class="l--flex -g:20 -ai:center">
   <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
-  <div class="a--divider is--vertical -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
+  <div class="a--divider -wm:vertical-rl -aslf:stretch" style="--bds: dashed; --bdw: 2px" aria-hidden="true"></div>
   <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</div>
 </div>
 ```

package/dist/data/guides/primitives/a--spacer.md

@@ -1,6 +1,6 @@
 # a--spacer / `<Spacer>`
 
-要素間のスペースを確保するクラス。`<Spacer>` はデフォルトで `aria-hidden="true"` が付与されます。
+要素間のスペースを確保するクラス。`<Spacer>` は `<Lism atomic="spacer" aria-hidden="true" />` のエイリアスとして用意されています。
 
 ## 基本情報
 

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

@@ -28,4 +28,4 @@
 
 - [l--flow](./l--flow.md) — テキスト主体のフローレイアウト
 - [l--stack](./l--stack.md) — Flex 縦並び
-- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー
+- [is--wrapper](../trait-class/is--wrapper.md) — コンテンツ幅ラッパー

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

@@ -51,7 +51,7 @@ Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`,
 
 ### 子要素の Flex プロパティ
 
-子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxs`（flex-shrink）などで個別制御できます。
+子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxsh`（flex-shrink）などで個別制御できます。
 
 ```jsx
 <Flex g="20">

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

@@ -131,4 +131,4 @@
 ## 関連プリミティブ
 
 - [l--stack](./l--stack.md) — `gap` で余白を管理する縦積み（こちらは Flexbox）
-- [is--wrapper](./is--wrapper.md) — 記事コンテンツ幅の制限用ラッパー（`l--flow` とセットで使うことが多い）
+- [is--wrapper](../trait-class/is--wrapper.md) — 記事コンテンツ幅の制限用ラッパー（`l--flow` とセットで使うことが多い）

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

@@ -13,52 +13,55 @@
 
 | Prop | CSS変数 | 説明 |
 |------|--------|------|
-| `cols` | `--cols` | カラムが維持する最小幅を指定（`12rem`, `320px` など） |
+| `cols` | `--cols` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
 | `autoFill` | `--autoMode` | `auto-fill` モードに切り替え（デフォルトは `auto-fit`） |
 
 ## Usage
 
-### デフォルト幅で利用する
+### `--cols`でサイズを指定する
 
 ```jsx
-<FluidCols g="20">
-  <Box bxsh="20" p="20"><p>カード1のコンテンツ</p></Box>
-  <Box bxsh="20" p="20"><p>カード2のコンテンツ</p></Box>
-  <Box bxsh="20" p="20"><p>カード3のコンテンツ</p></Box>
+<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">
-  <div class="l--box -bxsh:20 -p:20"><p>カード1のコンテンツ</p></div>
-  <div class="l--box -bxsh:20 -p:20"><p>カード2のコンテンツ</p></div>
-  <div class="l--box -bxsh:20 -p:20"><p>カード3のコンテンツ</p></div>
+<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` の指定
+### `auto-fill`を使用する
+
+`l--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
 
 ```jsx
-<FluidCols cols="12rem" autoFill g="20" fz="s">
-  <Box bxsh="20" p="20"><p>A</p></Box>
-  <Box bxsh="20" p="20"><p>B</p></Box>
-  <Box bxsh="20" p="20"><p>C</p></Box>
+<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>
 ```
 
-### 2列 → 1列
-
-カラム最小幅を大きめに設定すれば「2列 → コンテナが狭まれば 1列」のような段階的段組も自然に作れます。
-
-```jsx
-<FluidCols cols="320px" g="20">
-  <Frame ar="16/9">
-    <img src="/img/a-1.jpg" width="600" height="400" />
-  </Frame>
-  <Frame ar="16/9">
-    <img src="/img/a-3.jpg" width="600" height="400" />
-  </Frame>
-</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>
 ```
 
 ## 関連プリミティブ

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

@@ -89,6 +89,6 @@
 
 ## 関連プリミティブ
 
-- [is--layer](./is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
+- [is--layer](../trait-class/is--layer.md) — `l--frame` 内のオーバーレイ配置に使用
 - [l--center](./l--center.md) — フレーム内でテキストを中央配置する時に組み合わせる
 - [a--icon](./a--icon.md) — アイコン画像の表示（`src` 指定）

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

@@ -99,4 +99,4 @@
 - [l--grid](./l--grid.md) — ブレイクポイント切り替え型の2カラム構築に使用
 - [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
 - [l--switchCols](./l--switchCols.md) — ブレイクポイント一括切り替え型カラム
-- [is--container](./is--container.md) — レスポンシブ Property Class 利用時に必要
+- [is--container](../trait-class/is--container.md) — レスポンシブ Property Class 利用時に必要

package/dist/data/guides/prop-responsive.md

@@ -29,9 +29,34 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 ```
 
 **仕組み:**
-1. `-p_sm` クラスは `@container (min-width: 480px)` 内で `padding: var(--p_sm)` を適用
-2. `--p_sm` 変数で切り替え先の値を指定
-3. `overwriteBaseVar` 対応の Prop はベース変数（`--p`）も上書きされる
+- BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
+- 出力形式はプロパティによって 2 パターン（基本 / 例外）
+
+**基本パターン** — BP 用変数を直接読む:
+
+```css
+.-d { display: var(--d) }
+@container (min-width: 480px) {
+  .-d_sm { display: var(--d_sm) }
+}
+@container (min-width: 800px) {
+  .-d_md { display: var(--d_md) }
+}
+```
+
+**例外パターン** — `alwaysVar` 対応の `c`, `bgc`, `p`, `m`, `bdrs` のみ。ベース変数 `--p` が常に現在適用中の値を指すように上書きされる（state 変数扱い）:
+
+```css
+.-p { padding: var(--p) }
+@container (min-width: 480px) {
+  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
+}
+@container (min-width: 800px) {
+  .-p_md { padding: var(--p); --p: var(--p_md) !important }
+}
+```
+
+ソースコードの [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) で `alwaysVar: 1` がセットされているプロパティがこのパターンで出力されます。
 
 ## Lism コンポーネントでの指定