@lism-css/mcp 0.14.0 → 0.15.0

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

@@ -23,8 +23,8 @@ Lism CSS は CSS Layers による詳細度管理を採用しています。
 Settings（トークン定義）
   → @layer lism-base（Reset CSS・トークン・.set--クラス）
       → @layer reset（リセットCSS）
+  → @layer lism-trait（.is-- / .has-- Trait Class）
   → @layer lism-primitive
-      → @layer trait（.is-- Trait Primitive）
       → @layer layout（.l-- Layout Primitive）
       → @layer atomic（.a-- Atomic Primitive）
   → @layer lism-component（.c-- Component Class — BEM 構造を持つ UI 部品）
@@ -34,38 +34,46 @@ Settings（トークン定義）
 ```
 
 
-## プレフィックスとクラス分類
+## クラス分類とプレフィックス
 
-[詳細](https://lism-css.com/docs/primitives/)
+[詳細](https://lism-css.com/docs/naming/)
 
-クラス名のプレフィックスによって、役割とレイヤーの所属が決まります。
+Lism CSSで定義されるクラスは、その役割とレイヤーの所属が決まっており、その分類によってプレフィックスが定められています。
 
-| プレフィックス | レイヤー | 役割 | 例 |
-|--------------|---------|------|-----|
-| `.set--` | lism-base | ベーススタイル上書き・トークン再定義 | `.set--plain`, `.set--transition` |
-| `.is--` | lism-primitive.trait | Trait Primitive（要素の静的特性） | `.is--container`, `.is--wrapper` |
-| `.l--` | lism-primitive.layout | Layout Primitive | `.l--grid`, `.l--flex`, `.l--stack` |
-| `.a--` | lism-primitive.atomic | Atomic Primitive | `.a--icon`, `.a--divider` |
-| `.c--` | lism-component | Component Class（BEM 構造を持つ UI 部品） | `.c--button`, `.c--accordion` |
-| `.u--` | lism-utility | 用途が明確なユーティリティ | `.u--cbox`, `.u--trim` |
-| `.-` | レイヤー外 | 単一プロパティ制御（Property Class） | `.-fz:l`, `.-p:20`, `.-d:none` |
+| 分類 | 役割 | プレフィックス | 例 |
+|---|---|---|---|
+| Set Class | ベーススタイル上書き・変数提供 | `set--` | `.set--plain`, `.set--revert`, `.set--var:hov`, `.set--var:bxsh` |
+| Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `.l--grid`, `.l--flex`, `.l--stack` |
+| Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `.a--icon`, `.a--divider` |
+| Component Class | BEM 構造を持つ UI 部品 | `c--` | `.c--button`, `.c--accordion` |
+| `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `.is--container`, `.is--wrapper`, `.is--layer`, `.is--boxLink` |
+| `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `.has--transition`, `.has--gutter`, `.has--snap`, `.has--mask` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `.u--cbox`, `.u--trim`, `.u--collapseGrid` |
+| Property Class | 単一プロパティの制御 | `-` | `.-fz:l`, `.-p:20`, `.-d:none` |
 
 **併用ルール:**
 - `.l--` と `.c--` は併用OK（例: `<div class="l--flex c--nav">`）
 - 同カテゴリ内の Primitive 併用は不可（例: `.l--flex` と `.l--grid`、`.a--icon` と `.a--divider` は同要素に付けない）
 - `.l--` × `.a--` は非推奨（役割的に同居しない想定）
-- `.is--` 同士は併用OK（Trait は複数併用できる）
-- `.is--` × `.l--` / `.a--` も併用OK
+- `.is--` / `.has--` 同士は併用OK（Trait は複数併用できる）
+- `.is--` / `.has--` × `.l--` / `.a--` も併用OK
 - `c--` の Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし以下は許容:
   - Block と自身の Modifier: `.c--button.c--button--outline`
   - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
 - 子要素: `.c--card_header`, `.c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
 
+**`is--` と `has--` の判定軸:**
+
+|  | `is--` | `has--` |
+|---|---|---|
+| 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
+| CSS 変数 | 必須ではない | 必須（カスタマイズポイントを提供） |
+
 **記述順序:**
 class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
 
 ```
-[customClass] [c--] [a--] [l--] [is--] [set--] [u--] [-]
+[customClass] [c--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
 ```
 
 | # | 区分 | 例 |
@@ -74,10 +82,11 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 | 2 | Component（`c--`） | `c--box`, `c--box--primary` |
 | 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
 | 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
-| 5 | Trait Primitives（`is--`） | `is--wrapper`, `is--layer` |
-| 6 | Set Class（`set--`） | `set--hov`, `set--transition` |
-| 7 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
-| 8 | Property Class（`-`） | `-p:20`, `-bgc:base-2` |
+| 5 | Set Class（`set--`） | `set--var:hov`, `set--var:bxsh` |
+| 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
+| 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
+| 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
+| 9 | Property Class（`-`） | `-p:20`, `-bgc:base-2`, `-hov:-c` |
 
 ```html
 <!-- OK -->

package/dist/data/guides/customize.md

@@ -0,0 +1,220 @@
+# カスタマイズ
+
+`lism-css` パッケージから読み込む CSS や、コンポーネントが受け付ける Props の挙動を上書きしてカスタマイズする方法をまとめます。
+
+## TOC
+
+- [`@layer` をオフにする](#layer-をオフにする)
+- [SCSS でのカスタマイズ](#scss-でのカスタマイズ)
+- [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
+- [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
+
+[詳細](https://lism-css.com/docs/customize/)
+
+---
+
+## `@layer` をオフにする
+
+`lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
+
+```js
+// 通常
+import 'lism-css/main.css';
+
+// @layer なしのCSSを読み込む場合はこちら
+import 'lism-css/main_no_layer.css';
+```
+
+`@layer` のオン・オフは SCSS 変数では管理されません。**読み込むファイル自体を切り替える**点に注意してください。
+
+
+## SCSS でのカスタマイズ
+
+`lism-css/scss/_setting.scss` で定義された変数を `@use ... with (...)` で上書きできます。
+上書き定義をしてから `lism-css/scss/main.scss` を読み込むことでカスタマイズが反映されます。
+
+ソース: [`_setting.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/_setting.scss)
+
+### 上書き可能な変数
+
+| 変数 | 用途 | デフォルト |
+|------|------|-----------|
+| `$breakpoints` | ブレイクポイント数値の定義 | `('sm': '480px', 'md': '800px', 'lg': '1120px')` |
+| `$common_support_bp` | 主要な Property Class が共通サポートするブレイクポイント上限 | `'md'` |
+| `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
+| `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
+| `$props` | Property Class ごとの個別出力設定 | `prop-config` のデフォルト |
+
+### 基本フォーマット
+
+```scss
+// 1. 設定変数を上書き
+@use '../path-to/node_modules/lism-css/scss/setting' with (
+  $breakpoints: (
+    'sm': '400px',  // 個別キーの上書き可
+  ),
+  $common_support_bp: 'lg',
+  $is_container_query: 0,
+  $default_important: 1,
+  $props: (
+    // 個別 Prop の設定（後述）
+  )
+);
+
+// 2. main.scss を読み込む（@layer なしにする場合は main_no_layer）
+@use '../path-to/node_modules/lism-css/scss/main';
+```
+
+> Astro の場合、`../path-to/node_modules/` 部分は不要で `lism-css/scss/setting` のように書けます。
+
+### `$props` の個別カスタマイズ
+
+各 Property Class について、出力範囲やユーティリティクラスを追加できます。
+
+```scss
+@use '../path-to/node_modules/lism-css/scss/setting' with (
+  $props: (
+    'fz': (
+      important: 1,        // .-fz:* に !important を付与
+    ),
+    'h': (
+      bp: 0,               // .-h_sm 等のブレイクポイント版を出力しない
+    ),
+    'p': (
+      bp: 'lg',            // .-p_sm / .-p_md / .-p_lg まで出力
+      utilities: (
+        'box': '2em',      // .-p:box { --p: 2em } を追加
+      ),
+    ),
+  )
+);
+@use '../path-to/node_modules/lism-css/scss/main';
+```
+
+### 注意点
+
+SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体 CSS と読み込み順がずれる可能性があります。意図しない上書きが起きないよう、レイヤー順を確認してください。
+
+
+## `lism.config.js` でのカスタマイズ
+
+プロジェクトのルート直下に `lism.config.js` を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+
+> **注意**: `lism.config.js` は HTML 出力（クラス名）を変えるだけで、追加されたクラスに対する CSS は別途読み込ませる必要があります（[追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法) を参照）。
+
+### フォーマット
+
+```js
+// lism.config.js
+export default {
+  props: {
+    // Property Class の出力をカスタマイズ
+  },
+  tokens: {
+    // トークン値を追加
+  },
+  traits: {
+    // Trait（is--* / has--*）用の props を追加
+  },
+};
+```
+
+デフォルト値は以下を参照：
+
+- props: [`config/defaults/props.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
+- tokens: [`config/defaults/tokens.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/tokens.ts)
+- traits: [`config/defaults/traits.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/traits.ts)
+
+### カスタマイズ例
+
+```js
+// lism.config.js
+import DEFAULT_CONFIG from 'lism-css/default-config';
+const { props, tokens } = DEFAULT_CONFIG;
+
+export default {
+  props: {
+    d: { presets: [...(props.d.presets || []), 'flex', 'grid'] },
+    p: { utils: { box: '2em' } },
+  },
+  tokens: {
+    bdrs: [...(tokens.bdrs || []), '5'],
+  },
+  traits: {
+    isHoge: 'is--hoge',
+  },
+};
+```
+
+これによってコンポーネント側で次のような挙動が追加されます：
+
+| 入力 | 出力されるクラス |
+|------|----------------|
+| `d="flex"` | `-d:flex` |
+| `d="grid"` | `-d:grid` |
+| `p="box"` | `-p:box` |
+| `bdrs="5"` | `-bdrs:5` |
+| `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>
+```
+
+
+## 追加スタイルを読み込ませる方法
+
+`lism.config.js` で props を増やしただけでは、対応するユーティリティクラスのスタイルは存在しません。次のいずれかでスタイルを追加してください。
+
+### 1. CLI コマンドで CSS を再ビルド
+
+```bash
+npx lism-css build
+```
+
+`lism.config.js` の内容に基づいて `lism-css/main.css` を再生成します。上記カスタマイズ例だと、以下のスタイルが自動生成されます：
+
+```css
+.-d\:flex { display: flex; }
+.-d\:grid { display: grid; }
+.-p\:box { padding: 2em; }
+.-bdrs\:5 { border-radius: var(--bdrs--5); }
+```
+
+> **注意**:
+> - トークン CSS 変数（例: `--bdrs--5`）と `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
+> - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
+
+### 2. 手動で CSS を追記
+
+CLI を使わず、追加クラス分の CSS をプロジェクト側で書いて読み込ませる方法でも問題ありません。
+
+```css
+:root { --bdrs--5: 0.125rem; }
+.is--hoge { /* ... */ }
+```
+
+### 3. 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',
+      ),
+    ),
+    'p': ( utilities: ( 'box': '2em' ) ),
+    'bdrs': ( utilities: ( '5': 'var(--bdrs--5)' ) ),
+  )
+);
+@use '../path-to/node_modules/lism-css/scss/main';
+
+// トークン追記
+@layer lism-base {
+  :root { --bdrs--5: 0.125rem; }
+}
+```

package/dist/data/guides/naming.md

@@ -45,7 +45,7 @@
 | 形式 | 用途 | 例 |
 |------|------|-----|
 | `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
-| `--{propName}` | プリミティブの主要機能変数 | `--sideW`, `--mainW` |
+| `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
 | `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
 | `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
 
@@ -57,17 +57,31 @@
 - Component: `c--`
 - Atomic Primitives: `a--`
 - Layout Primitives: `l--`
-- Trait Primitives: `is--`
+- 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}` の省略ルール

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

@@ -1,12 +1,12 @@
 # Primitive クラス
 
-Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
+Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`l--` / `a--`）を提供します。
+これらは `@layer lism-primitive` に属します（サブレイヤーは `layout` / `atomic`）。
 
 
 ## TOC
 
 - [プレフィックス一覧](#プレフィックス一覧)
-- [Trait Primitive（`is--`）](#trait-primitiveis--)
 - [Layout Primitive（`l--`）](#layout-primitivel--)
 - [Atomic Primitive（`a--`）](#atomic-primitivea--)
 
@@ -18,33 +18,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 
 | プレフィックス | 種類 | サブレイヤー | 役割 |
 |--------------|------|------------|------|
-| `is--` | Trait Primitive | `lism-primitive.trait` | 要素に静的な構造的特性を付与する汎用クラス |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
 
-**併用ルール:**
-- `is--` は他のすべての Primitive と併用可能（複数の `is--` 同士もOK）
-- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
-- `a--` / `l--` には `variant` の BEM 展開は適用されない（BEM Modifier は `c--` 専用）
-
-
-## 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--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
-| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
-
-Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます。（例: `<Lism isContainer>`)
+併用ルールは [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
 
 
 ## Layout Primitive（`l--`）

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

@@ -40,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/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--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 コンポーネントでの指定
 

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

@@ -0,0 +1,127 @@
+# -bd（ボーダー）
+
+Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理される特殊仕様の Property Class。`-bd` または `-bd-{side}` クラスで変数管理を有効化し、`bds` / `bdc` / `bdw` Prop で個別に上書きする。
+
+## 基本情報
+
+- クラス名: `-bd` / `-bd-{side}` / `-bds:*` / `-bdc:*` / `-bdw` など
+- Lism props: `bd`, `bd-{side}`, `bds`, `bdc`, `bdw`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/props/_border.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/property-class/bd/
+
+## 仕組み
+
+`.-bd` または `.-bd-{side}` クラスが付くと、以下の初期値がセットされる。
+
+```scss
+:where(.-bd, [class*=" -bd-"], [class^="-bd-"]) {
+  --bds: solid;
+  --bdw: 1px;
+  --bdc: var(--divider);
+  border-width: var(--bdw);
+  border-color: var(--bdc);
+}
+.-bd       { border-style: var(--bds); }
+.-bd-x     { border-inline-style: var(--bds); }
+.-bd-y     { border-block-style: var(--bds); }
+/* ...各 side ごとに style を適用 */
+```
+
+`border-width` / `border-color` は全方向で共通出力され、`border-style` だけ `.-bd` または `.-bd-{side}` が出現している方向に適用される仕組み。`--bdw` を `0 0 1px 0.5em` のような複数値にすれば、方向ごとに太さを変えられる。
+
+## 方向指定クラス
+
+| Prop | CSS プロパティ |
+|------|--------------|
+| `bd` | `border`（変数管理を有効化） |
+| `bd-x` | `border-inline` |
+| `bd-y` | `border-block` |
+| `bd-x-s` | `border-inline-start` |
+| `bd-x-e` | `border-inline-end` |
+| `bd-y-s` | `border-block-start` |
+| `bd-y-e` | `border-block-end` |
+| `bd-t` | `border-top` |
+| `bd-b` | `border-bottom` |
+| `bd-l` | `border-left` |
+| `bd-r` | `border-right` |
+
+標準で用意しているのは物理方向（`-t` / `-b` / `-l` / `-r`）と論理方向（`-x` / `-y` / `-x-s` / `-x-e` / `-y-s` / `-y-e`）のみ。
+
+## 値プロパティ
+
+| Prop | 変数 | プリセット値クラス | BP クラス |
+|------|------|-------------|-----|
+| `bd` | — | `-bd:none` | — |
+| `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` | — |
+| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
+| `bdw` | `--bdw` | — | `-bdw_sm`, `-bdw_md` |
+
+`bdw` はブレイクポイント指定に対応。`--bdw` の値を BP で切り替えることで、ボーダーの方向自体を変化させることもできる。
+
+## Usage
+
+### 全方向にボーダー + カスタマイズ
+
+```jsx
+<Box bd p="10">...</Box>
+<Box bd bds="dashed" bdw="4px" bdc="red" p="15">...</Box>
+```
+```html
+<div class="l--box -bd -p:10">...</div>
+<div class="l--box -bd -bds:dashed -p:15" style="--bdw: 4px; --bdc: var(--red)">...</div>
+```
+
+### 単一方向
+
+```jsx
+<Box bd-t px="10">-t: Top</Box>
+<Box bd-x bdw="2px" px="10">inline</Box>
+<Box bd-x-s bdw="2px" px="10">inline-start</Box>
+```
+```html
+<div class="l--box -bd-t -px:10">-t: Top</div>
+<div class="l--box -bd-x -px:10" style="--bdw: 2px">inline</div>
+<div class="l--box -bd-x-s -px:10" style="--bdw: 2px">inline-start</div>
+```
+
+### 方向ごとに異なるスタイル
+
+`-bd` + `--bdw` / `--bds` / `--bdc` を複数値指定すると、方向ごとにスタイルを変えられる。
+
+```jsx
+<Box bd bdw="0 0 1px .5em" bds="dashed solid" bdc="var(--purple) var(--blue)" p="15">
+  border
+</Box>
+```
+```html
+<div class="l--box -bd -p:15"
+     style="--bdw: 0 0 1px 0.5em; --bds: dashed solid; --bdc: var(--purple) var(--blue)">
+  border
+</div>
+```
+
+### ブレイクポイントで `bdw` を切り替え
+
+```jsx
+<Box bd bdw={['1px', '3px', '6px']} p="15">border</Box>
+```
+```html
+<div class="l--box -bd -bdw_sm -bdw_md -p:15"
+     style="--bdw: 1px; --bdw_sm: 3px; --bdw_md: 6px">border</div>
+```
+
+### BP でボーダー方向を切り替える
+
+`bd-x-s` + `bd-y-s` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
+
+```jsx
+<Flex fxd={['column', 'row']}>
+  <Box px="15" py="5">Box</Box>
+  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>Box</Box>
+</Flex>
+```
+
+## 関連
+
+- [`-bdrs`](https://lism-css.com/docs/property-class/) — 角丸（`border-radius`）
+- [`-bd-{side}` + `has--gutter`](../trait-class/has--gutter.md) — セクション区切りに使うと相性が良い