@lism-css/mcp 0.18.0 → 0.22.0

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.18.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.22.0` / `@lism-css/ui@0.22.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 

package/dist/data/guides/antipatterns.md

@@ -8,6 +8,7 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 - [px / 固定値の直書き](#px--固定値の直書き)
 - [Property Class で書けるのに CSS で書く](#property-class-で書けるのに-css-で書く)
 - [`is--` の誤用（状態・バリエーション）](#is---の誤用状態バリエーション)
+- [カスタムクラスを全て `c--` にしてしまう](#カスタムクラスを何でも-c---にしない)
 - [クラス名の命名ミス（kebab-case）](#クラス名の命名ミスkebab-case)
 - [`--keycolor` の誤用](#--keycolor-の誤用)
 - [Prop 型ミス](#prop-型ミス)
@@ -32,7 +33,7 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | `c="muted"` | `c="text-2"` | 補助テキスト色は `text-2` |
 | `c="danger"` | `c="red"` | パレットカラーから選ぶ（`red` / `orange` 等） |
 
-- セマンティックカラー: `base` / `base-2` / `text` / `text-2` / `divider` / `link` / `brand` / `accent`
+- セマンティックカラー: `base` / `base-2` / `text` / `text-2` / `divider` / `link` / `brand` / `accent` / `neutral`
 - パレットカラー: `red` / `blue` / `green` / `yellow` / `purple` / `orange` / `pink` / `gray` / `white` / `black`
 
 ### スペース（`p` / `m` / `g` 等）
@@ -158,7 +159,23 @@ Lism CSS の `is--` プレフィックスは「**〜である**」という**役
 | `<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:*` を差し替えるだけで済むことも多い。
+なお、Modifier であってもまずは [Property Class で表現できないか](#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+
+---
+
+## カスタムクラスを全て `c--` にしてしまう
+
+`c--` は「**コンポーネント**（再利用可能な UI 部品）」を表すプレフィックス。**カスタムクラスを必ず `c--` で命名する必要はない**。サイトの大まかな領域（header / sidebar / main / footer 等）やページ固有のスタイルなど、再利用が前提でないクラスは、独自プレフィックス（`z--` / `p--` 等）やプレフィックスなしの命名も選択肢として検討すること。
+
+→ 詳細: [css-rules.md の独自プレフィックス](./css-rules.md#独自プレフィックス)
+
+| 用途 | 命名の例 | 配置レイヤー |
+|---|---|---|
+| 再利用可能な UI 部品 | `c--button` / `c--card` / `c--tag` | `@layer lism-component` |
+| サイトのゾーニング | `z--header` / `z--sidebar` / `z--articleBody`（または `header` / `sidebar` / `articleBody`） | `@layer lism-custom` |
+| ページ固有のスタイル | `p--front` / `p--post`（または `frontPage` / `postPage`） | `@layer lism-custom` |
+
+`c--header` のような命名も間違いとまでは言えないが、「カスタムクラス＝必ず `c--`」ではないことに注意する。
 
 ---
 
@@ -226,133 +243,6 @@ Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `se
 
 ---
 
-## 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` を使う、または独自の `--lts--*` を `global.css` で追加 | デフォルトの `lts` トークンは `s/l` のみ。多種混在はデザイントークンとして不健全 |
-
-### 直書きしてよい例外
-
-- 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">` |
-
-なお、Modifier であってもまずは [Property Class で表現できないか](#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
-
----
-
-## `--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 型ミス
 
 ### Heading の `level` は文字列

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

@@ -49,7 +49,8 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 | `--lts--base` | ベース字間 |
 | `--text` | テキスト色 |
 | `--base` | 背景色 |
-| `--under-offset` | `text-underline-offset`（デフォルト: `0.125em`） |
+
+加えて `text-underline-offset: 0.125em`（リンク下線位置）と `tab-size: 4`（タブ文字の表示幅）が直接指定されている。
 
 ### 見出し（h1〜h6）
 
@@ -73,22 +74,15 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--list-px-s` | `1.75em` | リストの `padding-inline-start` |
+| `--list-ps` | `1.75em` | リストの `padding-inline-start` |
 
-### テーブル（table, td, th）
+### テーブル（td, th）
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--td-c` | `inherit` | セルのテキスト色 |
-| `--td-bgc` | `transparent` | セルの背景色 |
-| `--td-p` | `var(--s10) var(--s15)` | セルのパディング |
-| `--td-min-sz` | `initial` | セルの最小幅 |
-| `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
-| `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |
-| `--th-p` | `var(--td-p)` | 見出しセルのパディング |
-| `--th-min-sz` | `var(--td-min-sz)` | 見出しセルの最小幅 |
+| `--cells-p` | `0.625em 0.875em` | セルのパディング |
 
-`th` は `td` の変数をフォールバックとして参照するため、`--td-*` だけで両方に反映される。
+`td` と `th` の両方に `--cells-p` が適用される。色や最小幅などのカスタマイズは必要な要素にスタイルを直接当てる。
 
 ### フォーム要素
 
@@ -96,8 +90,9 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 |------|------------|------|
 | `--controls-bgc` | `var(--base-2)` | 背景色 |
 | `--controls-bdc` | `var(--divider)` | ボーダー色 |
-| `--controls-p` | `var(--s5) var(--s10)` | パディング |
-| `--controls-bdrs` | `var(--bdrs--10)` | 角丸 |
+| `--controls-p` | `0.25em 0.5em` | パディング |
+
+角丸はブラウザのデフォルトに委ねている。テーマで丸めたい場合は各セレクタに `border-radius` を直接指定する。
 
 ### その他
 

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

@@ -53,7 +53,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
 | `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"` |
+| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="hov bxsh"`, `set="-plain"` |
 | `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
 | `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
 
@@ -79,12 +79,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 // → p, fz は Lism が処理、size は HogeIcon に直接渡される
 
 // set でセットクラスを付与（layout と同じ要領）
-<Box set="var:bxsh" p="30">...</Box>
-// → <div class="l--box set--var:bxsh -p:30">...</div>
+<Box set="bxsh" p="30">...</Box>
+// → <div class="l--box set--bxsh -p:30">...</div>
 
 // set を複数指定（スペース区切り）
-<Stack set="var:bxsh var:hov" p="30">...</Stack>
-// → <div class="l--stack set--var:bxsh set--var:hov -p:30">...</div>
+<Stack set="bxsh hov" p="30">...</Stack>
+// → <div class="l--stack set--bxsh set--hov -p:30">...</div>
 
 // `-` prefix で除外（コンポーネント内部で適用済みの set を打ち消す用途）
 <AccordionButton set="-plain">...</AccordionButton>
@@ -180,7 +180,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | Prop | 出力クラス |
 |------|-----------|
 | `isWrapper` | `is--wrapper` |
-| `isWrapper="{s\|l}"` | `is--wrapper` + `-contentSize:{s\|l}` |
+| `isWrapper="{s\|m\|l\|xl}"` | `is--wrapper` + `-contentSize:{s\|m\|l\|xl}` |
 | `isWrapper="{value}"` | `is--wrapper` + `-contentSize` + `--contentSize:{value}` |
 | `isLayer` | `is--layer` |
 | `isBoxLink` | `is--boxLink` |
@@ -211,7 +211,7 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 |-------------|-------------|---------|
 | `<Text>` | `<p>` | `p`, `div`, `blockquote`, `address`, `figcaption`, `pre` |
 | `<Heading>` | `<h2>` | `h1`〜`h6`（`level` prop で指定） |
-| `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd` |
+| `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd`, `label` |
 | `<Group>` | `<div>` | `div`, `section`, `article`, `figure`, `nav`, `aside`, `header`, `footer`, `main`, `fieldset`, `hgroup` |
 | `<List>` | `<ul>` | `ul`, `ol`, `dl` |
 | `<Link>` | `<a>`（固定） | — |

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

@@ -6,6 +6,7 @@
 - [プレフィックスとクラス分類](#プレフィックスとクラス分類)
 - [Component Class（`c--`）](#component-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
+- [独自プレフィックス](#独自プレフィックス)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology.md)
@@ -42,13 +43,13 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 
 | 分類 | 役割 | プレフィックス | 例 |
 |---|---|---|---|
-| Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--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--divide`, `u--cells` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
@@ -82,7 +83,7 @@ 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 | Set Class（`set--`） | `set--var:hov`, `set--var:bxsh` |
+| 5 | Set Class（`set--`） | `set--hov`, `set--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` |
@@ -207,6 +208,27 @@ export default function MyCard(props) {
 ```
 
 
+### 独自プレフィックス
+
+Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `a--` / `c--` / `u--` / `-`）のどれにも該当しないクラスは、独自プレフィックスを付けても、プレフィックスなしで命名しても構いません。
+
+代表的な例：
+
+| 分類 | 形式 | 例 |
+|---|---|---|
+| ゾーニング（サイトの大まかな領域） | `z--{zoneName}` または `{zoneName}` | `z--header`, `z--main`, `z--sidebar`, `z--footer` |
+| ページ分類 | `p--{type}-{id\|slug}` または `{slug}Page` | `p--front`, `p--page--{slug}` |
+
+これらは、特に理由がなければ `@layer lism-custom` に配置することを推奨します。
+
+```css
+@layer lism-custom {
+  .z--header { /* ... */ }
+  .p--front { /* ... */ }
+}
+```
+
+
 ## CSS の配置場所
 
 ### グローバル CSS（サイト全体）

package/dist/data/guides/naming.md

@@ -70,10 +70,10 @@
 
 | プレフィックス | 責務 | 代表例 |
 |---|---|---|
-| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--hov`, `set--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--divide`, `u--cells` |
+| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--enclose` |
 
 - `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
 - `is--` / `has--` は `lism-trait` 層に属する。
@@ -127,14 +127,17 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 
 #### 方向指定系: 「グループ略称」 + `-` +「方向指定」
 
+`inline-start`/`inline-end`は`is`/`ie`ではなく、すでに普及しているCSSフレームワークの慣習に沿って`s`/`e`とする。
+
 | 方向 | サフィックス | 例 |
 |------|-----------|-----|
 | 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` |
+| inline-start / end | `-s` / `-e` | `bd-s`, `bd-e`, `ps`, `pe`, `ms`, `me`, `i-s`, `i-e` |
+| block-start / end | `-bs` / `-be` | `bd-bs`, `bd-be`, `pbs`, `pbe`, `mbs`, `mbe`, `i-bs`, `i-be` |
 | x / y | `-x` / `-y` | `ov-x`, `ov-y` |
 
-例外: `p`, `m` のみ最初のハイフンを省略 → `pt`, `px`, `my`, `mx-s` 等。
+例外: `p`, `m` のみハイフンを省略 → `pt`, `px`, `my`, `ms` 等。
 
 #### グループ略称の衝突禁止
 

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

@@ -81,10 +81,10 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 ##### 2. カラム幅が指定値を下回ったら自動で折り返したい
 
 - **推奨**: `l--autoColumns` (`<AutoColumns cols="20rem" />`)
-- **理由**: BP に依存せず、カラム最小幅基準で `auto-fit` / `auto-fill` の挙動を簡潔に書ける
+- **理由**: BP に依存せず、カラム最小幅基準で `auto-fill` / `auto-fit` の挙動を簡潔に書ける
 - **典型例**: カード一覧、商品リスト、ロゴ並び等
 - **代替**:
-  - `l--grid`: `gtc="repeat(auto-fit, minmax(20rem, 1fr))"` を直書きできるが冗長
+  - `l--grid`: `gtc="repeat(auto-fill, minmax(20rem, 1fr))"` を直書きできるが冗長
 
 ##### 3. 「横並び」と「縦 1 列」を一括で切り替えたい（多段階の列数変化が不要）
 

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

@@ -23,16 +23,16 @@
 ```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" />
+  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
+  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be 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 class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -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-e -bd-be -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
 </div>
 ```
 

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

@@ -1,6 +1,6 @@
 # l--autoColumns / `<AutoColumns>`
 
-カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
+カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fill` / `auto-fit` を使った流動カラムを簡潔に記述できます。
 
 ## 基本情報
 
@@ -14,7 +14,7 @@
 | Prop | CSS変数 | デフォルト | 説明 |
 |------|--------|-----------|------|
 | `cols` | `--cols` | `20rem` | カラムが維持する最小幅を指定（`16em`, `320px` など） |
-| `autoFill` | `--autoMode` | `auto-fit` | `auto-fill` モードに切り替え |
+| `autoFit` | `--autoMode` | `auto-fill` | `auto-fit` モードに切り替え |
 
 ## Usage
 
@@ -38,27 +38,27 @@
 </div>
 ```
 
-### `auto-fill`を使用する
+### `auto-fit`を使用する
 
-`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fit`）。`--autoMode:auto-fill`（`autoFill`）を指定することで、要素数が少ない時の挙動が変わります。
+`l--autoColumns` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます（デフォルトは `auto-fill`）。`--autoMode:auto-fit`（`autoFit`）を指定することで、要素数が少ない時の挙動が変わります。
 
 ```jsx
-<AutoColumns cols="12em" autoFill g="20" fz="s">
+<AutoColumns cols="12em" g="20" fz="s">
   <Lism as="div" p="20" bd>auto-fill</Lism>
   <Lism as="div" p="20" bd>auto-fill</Lism>
 </AutoColumns>
-<AutoColumns cols="12em" g="20" fz="s">
+<AutoColumns cols="12em" autoFit g="20" fz="s">
   <Lism as="div" p="20" bd>auto-fit</Lism>
   <Lism as="div" p="20" bd>auto-fit</Lism>
 </AutoColumns>
 ```
 
 ```html
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
+<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
   <div class="-p:20 -bd">auto-fill</div>
   <div class="-p:20 -bd">auto-fill</div>
 </div>
-<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em">
+<div class="l--autoColumns -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fit">
   <div class="-p:20 -bd">auto-fit</div>
   <div class="-p:20 -bd">auto-fit</div>
 </div>

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

@@ -56,14 +56,14 @@ Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`,
 ```jsx
 <Flex g="20">
   <Lism fx="1">Flex Content</Lism>
-  <Lism fxb={['33%', '25%']}>Flex Content</Lism>
+  <Lism fxb={['50%', null, '25%']}>Flex Content</Lism>
 </Flex>
 ```
 
 ```html
 <div class="l--flex -g:20">
   <div class="-fx:1">Flex Content</div>
-  <div class="-fxb -fxb_sm" style="--fxb:33%;--fxb_sm:25%">Flex Content</div>
+  <div class="-fxb -fxb_md" style="--fxb:50%;--fxb_md:25%">Flex Content</div>
 </div>
 ```
 

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

@@ -15,10 +15,12 @@
 
 | クラス | 余白量 |
 |--------|-------|
-| `l--flow` | `--flow--base`（`--s30`） |
+| `l--flow` | `--flow--base`（`--s30`、`lang="ja"` 時は `--s35`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
+`--flow--base` / `--flow--s` は `:root` で定義されたトークン（[tokens](../tokens.md#フロー余白-flow) 参照）。日本語環境では文字密度に合わせて `--flow--base` が広めに上書きされる。
+
 ## 専用Props
 
 | Prop | 説明 |
@@ -126,7 +128,7 @@
 </Flow>
 ```
 
-またネストされた `l--flow` は、`--flow` が未定義の場合 `--flow--base` ではなく**親の値を継承**することにも注意してください。
+またネストされた `l--flow` は、`--flow` が未定義の場合、ルートで定義された `--flow--base` ではなく**親の `--flow` を継承**することにも注意してください。
 
 ## 関連プリミティブ
 

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

@@ -36,16 +36,16 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 | `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-s` | `border-inline-start` |
+| `bd-e` | `border-inline-end` |
+| `bd-bs` | `border-block-start` |
+| `bd-be` | `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`）のみ。
+標準で用意しているのは物理方向（`-t` / `-b` / `-l` / `-r`）と論理方向（`-x` / `-y` / `-s` / `-e` / `-bs` / `-be`）のみ。
 
 ## 値プロパティ
 
@@ -76,12 +76,12 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 ```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>
+<Box bd-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>
+<div class="l--box -bd-s -px:10" style="--bdw: 2px">inline-start</div>
 ```
 
 ### 方向ごとに異なるスタイル
@@ -112,12 +112,12 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 
 ### BP でボーダー方向を切り替える
 
-`bd-x-s` + `bd-y-s` に `bdw` の複数値を BP で差し替えると、「縦並び時は上下線・横並び時は左右線」のように方向を切り替えられる。
+`bd-s` + `bd-bs` に `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>
+  <Box px="15" py="5" bd-s bd-bs bdw={['1px 0', '0 1px']}>Box</Box>
 </Flex>
 ```
 

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

@@ -1,6 +1,6 @@
 # -hov（ホバー）
 
-hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--var:hov` に連動する系の 2 系統に分かれる。
+hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで動作する系と、親の `set--hov` に連動する系の 2 系統に分かれる。
 
 ## 基本情報
 
@@ -15,10 +15,10 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 |------|------|
 | `-hov:-{prop}` | `--hov-{prop}` 変数を受け取り、hover 時に該当プロパティを変化させる |
 | `-hov:{preset}` | hover 時のスタイルセットをプリセット名でまとめて適用する |
-| `-hov:in:{preset}` | 親要素の `set--var:hov` を起点に、子要素のスタイルを変化させる |
+| `-hov:in:{preset}` | 親要素の `set--hov` を起点に、子要素のスタイルを変化させる |
 
 `-hov:-{prop}` と `-hov:{preset}` は `@media (any-hover: hover)` 内で定義されるため、タッチデバイスでは無効。  
-`-hov:in:*` はメディアクエリ外で、親の `set--var:hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
+`-hov:in:*` はメディアクエリ外で、親の `set--hov` がセットする `--_isHov` / `--_notHov` 変数で動作する。
 
 トランジションを付けたい場合は [`has--transition`](../trait-class/has--transition.md) クラスを併用する。
 
@@ -30,12 +30,16 @@ hover 時の挙動を制御する Property Class。`: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:-bgc` | `background-color` | `var(--hov-bgc, var(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))` |
 | `-hov:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
 | `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 
+`-hov:-bgc` は初期値として、現在の背景色を `--neutral` へブレンドした背景色を使う。ライト/ダークどちらの背景でも使いやすいhover背景にしたい場合は、`hov="-bgc"` を基本形として使う。
+
+プロジェクト全体で `-hov:-bgc` のデフォルト値を差し替えたい場合は、`:root` 等で `--hov-bgc--default` を定義する。フォールバック順は `--hov-bgc`（要素ごとの明示指定）→ `--hov-bgc--default`（プロジェクト全体）→ `color-mix(...)`（フレームワーク既定）の 3 段。
+
 ```html
 <!-- 初期値のまま使用 -->
 <a class="is--boxLink -hov:-o -bgc:base-2 -bd -p:20" href="###">...</a>
@@ -52,7 +56,6 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 | クラス | 内容 |
 |--------|------|
 | `-hov:underline` | テキストに下線を表示 |
-| `-hov:neutral` | 背景色にニュートラルグレーをブレンド |
 
 プロジェクト固有のプリセットは、以下のように自作して追加できる。
 
@@ -67,7 +70,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 
 ## `-hov:in:{preset}` — 親連動
 
-親要素に `set--var:hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
+親要素に `set--hov` を付けると、`--_isHov` / `--_notHov` 変数が hover 状態に応じて切り替わる。`-hov:in:*` はこの変数を参照する仕組み。
 
 | クラス | 効果 | 仕組み |
 |--------|------|--------|
@@ -76,7 +79,7 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 | `-hov:in:zoom` | 親 hover 時にズーム | `scale: var(--_isHov, 1.1)` |
 
 ```jsx
-<Frame set="var:hov" isBoxLink href="#" ar="16/9">
+<Frame set="hov" isBoxLink href="#" ar="16/9">
   <Media isLayer hasTransition hov="in:zoom" src="..." />
   <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 40%)">...</Layer>
 </Frame>
@@ -136,5 +139,5 @@ hover 時のスタイルセットをプリセット名でまとめて適用す
 ## 関連
 
 - [`has--transition`](../trait-class/has--transition.md) — hover 時の変化にトランジションを付ける
-- [`set--var:hov`](../set-class.md#set--varhov) — 親の hover 状態を子要素に伝播させる仕組み
-- [`set--var:bxsh`](../set-class.md) — `-hov:-bxsh` と組み合わせる場合の影色再計算
+- [`set--hov`](../set-class.md#set--hov) — 親の hover 状態を子要素に伝播させる仕組み
+- [`set--bxsh`](../set-class.md) — `-hov:-bxsh` と組み合わせる場合の影色再計算