@lism-css/mcp 0.12.0 → 0.14.0

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

@@ -3,12 +3,15 @@
 ## TOC
 
 - [CSS Layer 構造](#css-layer-構造)
-- [命名規則とプレフィックス](#命名規則とプレフィックス)
+- [プレフィックスとクラス分類](#プレフィックスとクラス分類)
+- [Component Class（`c--`）](#component-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology/)
 
+> **命名規則の詳細**: CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルールについては [naming.md](./naming.md) を参照してください。
+
 ---
 
 ## CSS Layer 構造
@@ -20,59 +23,142 @@ Lism CSS は CSS Layers による詳細度管理を採用しています。
 Settings（トークン定義）
   → @layer lism-base（Reset CSS・トークン・.set--クラス）
       → @layer reset（リセットCSS）
-  → @layer lism-modules
-      → @layer state（.is-- ステートモジュール）
-      → @layer layout（.l-- レイアウトモジュール）
-      → @layer atomic（.a-- アトミックモジュール）
-      → .c-- は sublayer なし（lism-modules 直下、または lism-custom で定義）
+  → @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 部品）
   → @layer lism-custom（ユーザーカスタマイズ用）
   → @layer lism-utility（.u-- ユーティリティクラス）
   → Property Class（レイヤー外 — 最も詳細度が高い）
 ```
 
 
-## 命名規則とプレフィックス
+## プレフィックスとクラス分類
 
-[詳細](https://lism-css.com/docs/module-class/)
+[詳細](https://lism-css.com/docs/primitives/)
 
 クラス名のプレフィックスによって、役割とレイヤーの所属が決まります。
 
 | プレフィックス | レイヤー | 役割 | 例 |
 |--------------|---------|------|-----|
 | `.set--` | lism-base | ベーススタイル上書き・トークン再定義 | `.set--plain`, `.set--transition` |
-| `.is--` | lism-modules | 付け外し可能な状態モジュール | `.is--container`, `.is--wrapper` |
-| `.l--` | lism-modules | レイアウト構成モジュール | `.l--grid`, `.l--flex`, `.l--stack` |
-| `.a--` | lism-modules | レイアウト最小単位モジュール | `.a--icon`, `.a--divider` |
-| `.c--` | lism-modules | 具体的な役割のコンポーネント | `.c--button`, `.c--accordion` |
+| `.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` |
 
 **併用ルール:**
 - `.l--` と `.c--` は併用OK（例: `<div class="l--flex c--nav">`）
-- 同カテゴリ内の併用は不可（例: `.l--flex` と `.l--grid` は同要素に付けない）
-- バリエーション: `.c--button.c--button--outline`
-- 子要素: `.c--card_header`, `.c--card_body`
+- 同カテゴリ内の Primitive 併用は不可（例: `.l--flex` と `.l--grid`、`.a--icon` と `.a--divider` は同要素に付けない）
+- `.l--` × `.a--` は非推奨（役割的に同居しない想定）
+- `.is--` 同士は併用OK（Trait は複数併用できる）
+- `.is--` × `.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 を持つ。`_` 一つ区切り）
 
 **記述順序:**
-class 属性にクラスを直接記述する場合、Property Class（`-` プレフィックス）はモジュールクラスやユーティリティクラスの**後ろ**に書いてください。
+class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
+
+```
+[customClass] [c--] [a--] [l--] [is--] [set--] [u--] [-]
+```
+
+| # | 区分 | 例 |
+|---|---|---|
+| 1 | 独自クラス（`customClass`） | `z--header`, `hoge` |
+| 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` |
 
 ```html
-<!-- OK: モジュールクラス → Property Class -->
-<div class="l--flex c--nav -p:20 -g:20">...</div>
-<div class="l--box u--cbox -bd -p:20">...</div>
+<!-- OK -->
+<div class="c--nav l--flex -p:20 -g:20">...</div>
 
-<!-- NG: Property Class が先 -->
+<!-- NG: Property Class が先 になっている -->
 <div class="-p:20 -g:20 l--flex c--nav">...</div>
 ```
 
+なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
+
+
+## Component Class（`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`
+- `a--` / `l--` には `variant` の BEM 展開は適用されない**
+
+`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 で書く */
+  }
+}
+```
+
 
 ## カスタムCSS を追加する場合
 
 独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
 
 ```css
-/* カスタムコンポーネント → lism-modules に追加 */
-@layer lism-modules {
+/* カスタムコンポーネント → lism-component に追加 */
+@layer lism-component {
   .c--my-card {
     border: 1px solid var(--brand);
     border-radius: var(--bdrs--20);
@@ -137,8 +223,8 @@ Lism のトークン変数のカスタマイズやベーススタイルの上書
 - `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
 
 ```css
-/* コンポーネント用CSS は lism-modules 内に定義する */
-@layer lism-modules {
+/* コンポーネント用CSS は lism-component 内に定義する */
+@layer lism-component {
   .c--yourComponent {
     ...
   }

package/dist/data/guides/naming.md

@@ -0,0 +1,204 @@
+# 命名規則
+
+## 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}` | プリミティブの主要機能変数 | `--sideW`, `--mainW` |
+| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
+| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+
+
+## クラスの命名規則
+
+プレフィックスとクラス分類の対応:
+
+- Component: `c--`
+- Atomic Primitives: `a--`
+- Layout Primitives: `l--`
+- Trait Primitives: `is--`
+- Set Class: `set--`
+- Utility Class: `u--`
+
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
+
+Property Class の形式:
+
+- 特定の値とセット: `-{prop}:{value}`
+- `--{prop}` 変数を受け取る: `-{prop}`
+- ブレークポイント値を受け取る: `-{prop}_{bp}`
+
+
+## `{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

@@ -0,0 +1,84 @@
+# Primitive クラス
+
+Lism CSS では、レイアウトを組み立てる小さな積み木として **Primitive クラス**（`is--` / `l--` / `a--`）を提供します。これらはすべて `@layer lism-primitive` に属します（サブレイヤーは `trait` / `layout` / `atomic`）。
+
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [Trait Primitive（`is--`）](#trait-primitiveis--)
+- [Layout Primitive（`l--`）](#layout-primitivel--)
+- [Atomic Primitive（`a--`）](#atomic-primitivea--)
+
+[詳細](https://lism-css.com/docs/primitives/)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | サブレイヤー | 役割 |
+|--------------|------|------------|------|
+| `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>`)
+
+
+## Layout Primitive（`l--`）
+
+レイアウト構造を定義するメインの Primitive 群です。
+
+| クラス | 用途 |
+|--------|-------------|
+| `l--box` | 汎用ボックス |
+| `l--flex` | 横方向の基本的なFlexboxレイアウト |
+| `l--stack` | 縦方向の縦積みFlexboxレイアウト（`flex-direction: column`）。 |
+| `l--cluster` | タグの表示UIなど、複数要素を水平に並べて配置し、数が多ければ折り返すようなレイアウト。（`flex-wrap: wrap; align-items: center`） |
+| `l--grid` | 基本的なGridレイアウト。 |
+| `l--center` | 要素を縦横中央に配置するレイアウト（`place-content: center; place-items: center`） |
+| `l--flow` | 記事コンテンツなどのフローレイアウト。子要素間の余白を `margin-block-start` で管理する。 |
+| `l--frame` | アスペクト比や高さが固定されたメディア要素を配置する。直下のメディア要素に `object-fit: cover` を付与する。 |
+| `l--columns` | `repeat`と`minmax(0, 1fr))`を使ったカラムレイアウト。レスポンシブ対応の`--cols`用のProperty Classでカラム数の切り替え可能。 |
+| `l--tileGrid` | `--cols`だけではなく`--rows`も組み合わせた均等タイルグリッド（`grid-template: repeat(var(--rows,1), minmax(0, 1fr)) / repeat(var(--cols,1), minmax(0, 1fr))`） |
+| `l--fluidCols` | ブレイクポイントに依存せず、自動段組のできる流動カラムレイアウト。`--cols: 16em`のようにして最小維持幅を指定できる。 |
+| `l--sideMain` | 画像とコンテンツ、メインエリアとサイドバーなどの「"Side" + "Main"」に分かれ、横並びと縦並びが切り替わるレイアウト。"Main"が`--mainW`で指定したサイズ以上の横幅を維持できる範囲内で横並びを維持し、下回る場合は縦並びへ自動で切り替わる。横並びの間の"Side"の横幅は`--sideW`で指定する。 |
+| `l--switchCols` | 任意のサイズで一括カラム切り替えができるカラムレイアウト。`--breakSize` で制御 |
+
+それぞれ対応するLismコンポーネント（`<Flex>`, `<Stack>`, `<Cluster>` 等）があります。
+
+
+## Atomic Primitive（`a--`）
+
+レイアウト構成物の最小単位となる Primitive です。
+
+| クラス | 用途 |
+|--------|------|
+| `a--icon` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
+| `a--divider` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
+| `a--spacer` | 空白要素（`min-height: 1px; min-width: 1px`） |
+| `a--decorator` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
+
+それぞれ対応するコンポーネント（`<Icon>`, `<Divider>`, `<Spacer>`, `<Decorator>`）があります。

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

@@ -0,0 +1,43 @@
+# a--decorator / `<Decorator>`
+
+コンテンツを装飾するための空要素として使うクラス。`<Decorator>` は `<Lism atomic="decorator" aria-hidden="true" />` のエイリアスとして用意されています。
+
+## 基本情報
+
+- クラス名: `a--decorator`
+- コンポーネント: `<Decorator>`
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--decorator/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
+
+## Usage
+
+### 装飾に使用する例（コーナー装飾）
+
+`pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
+
+```jsx
+<Box p="30" pos="relative">
+  <p>本文テキスト...</p>
+  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-x-s bd-y-s bdc="current" />
+  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-x-e bd-y-e bdc="current" />
+</Box>
+```
+
+```html
+<div class="l--box -p:30 -pos:relative">
+  <p>本文テキスト...</p>
+  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-x-s -bd-y-s -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
+  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-x-e -bd-y-e -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [a--spacer](./a--spacer.md) — 要素間スペース
+- [a--divider](./a--divider.md) — 区切り線
+- [is--layer](./is--layer.md) — `position: absolute` のオーバーレイ

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

@@ -0,0 +1,62 @@
+# a--divider / `<Divider>`
+
+コンテンツ間に区切り線を描画するクラス。`--bdc` は `var(--divider)` が初期セットされます。`<Divider>` は `<Lism atomic="divider" aria-hidden="true" />` のエイリアスとして用意されています。
+
+## 基本情報
+
+- クラス名: `a--divider`
+- コンポーネント: `<Divider>`
+- 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/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
+<Divider />
+<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
+```
+
+```html
+<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
+<div class="a--divider" aria-hidden="true"></div>
+<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
+```
+
+### スタイルの変更
+
+```jsx
+<Divider bds="dotted" bdw="4px" bdc="blue" />
+```
+
+```html
+<div class="a--divider" aria-hidden="true" style="--bds: dotted; --bdw: 4px; --bdc: var(--blue)"></div>
+```
+
+### 縦方向の区切り線
+
+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 wm="vertical-rl" bds="dashed" bdw="2px" aslf="stretch" />
+  <Box fx="1" bgc="base-2" py="40">...Contents...</Box>
+</Flex>
+```
+
+```html
+<div class="l--flex -g:20 -ai:center">
+  <div class="-fx:1 -bgc:base-2 -py:40">...Contents...</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>
+```
+
+## 関連プリミティブ
+
+- [a--spacer](./a--spacer.md) — 要素間のスペース確保
+- [a--decorator](./a--decorator.md) — 装飾用空要素
+- [a--icon](./a--icon.md) — アイコン要素