@lism-css/mcp 0.24.0 → 0.27.0

package/dist/data/guides/references/verification.md

@@ -1,6 +1,8 @@
 # 検証の分離（`.lism/`規約と評価サブエージェント）
 
-提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約です。実装フロー・チェック項目の正本は`SKILL.md`（実装フロー・提出前セルフチェック）、実装プランの中身と書式は[`authoring.md`](./authoring.md)を参照してください。
+提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約。フローとチェック項目は`SKILL.md`、実装プランの書式は[`authoring.md`](./authoring.md)が正本。
+
+`lism-css-guide`では実行レベルが「通常」「値照合付き」の時だけ適用する（「不要」「軽量」では`.lism/`も評価委任も無し）。このレベル条件は`lism-css-guide`固有で、`.lism/`規約を参照する他のスキル（`lism-css-refactor`等）ではファイルを作るかどうかを各スキルの手順に従う。
 
 ## `.lism/`作業ディレクトリ
 
@@ -9,7 +11,7 @@ Lism実装作業の成果物（実装プラン・評価報告）は、プロジ
 | ファイル | 内容 | 作成タイミング |
 | --- | --- | --- |
 | `.lism/plan.md` | 実装プラン（トークン差分表・構成表を含む） | 値照合付きレベルの実装前チェック時 |
-| `.lism/review.md` | 評価サブエージェント（委任できない環境では本人）による評価報告 | 提出前セルフチェック時 |
+| `.lism/review.md` | 評価サブエージェント（委任できない環境では本人）による評価報告 | 通常・値照合付きレベルの提出前セルフチェック時 |
 
 - **固定名・上書き方式**。タスクごとに別名を作らない。照合先が一意に決まることが、評価サブエージェントや将来の機械チェックの前提になる。複数タスクの文脈は各ファイル冒頭のメタデータヘッダで区別する。
 - メタデータヘッダには日時・対象タスク・スケール前提（デザイン再現時。判定根拠付き）を書く。
@@ -28,7 +30,7 @@ scale: PNGは2880px幅=1440px設計の2x書き出し（画像実寸と行送り
 
 ## 評価サブエージェントへの委任
 
-提出前セルフチェックを実装した本人だけで行うと、「正確に再現する」等のゴールへの執着や、自分で立てたプランを疑いにくくなる心理から、例外を自己承認してしまいやすくなります。サブエージェント／タスク委任機能が使える環境では、照合を読み取り専用の評価サブエージェントに委任します。使えない環境では、同じ照合を本人が`SKILL.md`「提出前セルフチェック」の順に自分で実行します。
+本人だけの照合は自分のプランを疑いにくく、例外を自己承認しやすい。委任できる環境では読み取り専用の評価サブエージェントに委任し、できない環境では本人が`SKILL.md`「提出前セルフチェック」の順に行う。
 
 運用ルール:
 
@@ -62,7 +64,7 @@ scale: PNGは2880px幅=1440px設計の2x書き出し（画像実寸と行送り
 | file:line | 違反ルール（資料名と節） | 内容 | 判定 |
 | --- | --- | --- | --- |
 
-判定は「違反 / 要確認 / 適合」。最後に違反件数のサマリを書いてください。
+判定は「違反 / 要確認」。表には違反・要確認の行だけを載せ、適合した項目を1行ずつ列挙しないでください。最後に「照合した資料名の一覧」と違反・要確認の件数サマリを書いてください。違反ゼロの場合、報告はこの一覧とサマリだけでかまいません。
 ```
 
 ### grepによる補助チェック（コマンドが実行できる環境のみ）

package/dist/data/guides/responsive.md

@@ -34,7 +34,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 
 **`xs` / `xl` は opt-in**:
 - デフォルト値は `0`（無効）で、CSS は出力されません。`lism.config.js` の `breakpoints` でサイズを与えると有効化されます（customize.md 参照）。
-- 型（Lism コンポーネント）でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`xs` / `xl` を使う場合は `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
+- 型（Lism コンポーネント）でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`@lism-css/plugin` の統合プラグイン使用時は有効化した BP を反映した `lism-env.d.ts` が自動生成されるため手書き不要（customize.md 参照）。プラグインを使わない構成では `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
 
   ```ts
   // src/lism.d.ts など
@@ -85,6 +85,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 **仕組み:**
 - BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
 - コンテナクエリ採用のため、レスポンシブ値を使うには祖先要素に `is--container` などコンテナ宣言が必要
+- base 値は任意。省くと BP 未満はそのプロパティの既定値のまま（例: `-d_sm` + `--d_sm: none` で sm 以上だけ非表示）
 - 出力形式はプロパティによって 2 パターン（基本 / 例外）
 
 **基本パターン** — BP 用変数を直接読む:
@@ -125,37 +126,16 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 
 ## Authoring時の確認ルール
 
-### base値を必ず置く
-
-BP専用値だけを書くと、BP未満で値が未指定になります。配列では先頭、オブジェクトでは`base`、HTMLでは`-{prop}:{value}`を必ず置きます。
-
-| NG | OK |
-| --- | --- |
-| `<Box p={{ sm: 30 }}>` | `<Box p={{ base: '20', sm: '30' }}>` |
-| `<div class="-p_sm" style="--p_sm:var(--s30)">` | `<div class="-p:20 -p_sm" style="--p_sm:var(--s30)">` |
+NG→OK例は [antipatterns-layout.md](./antipatterns-layout.md#レスポンシブ抜け) の「レスポンシブ抜け」「レスポンシブ配列の冗長指定」を参照。
 
 ### 冗長配列は圧縮する
 
-前のBPと同じ値を繰り返さない。変わらないBPは`null`でスキップし、全BPで同じ値なら単一値にします。
-
-| NG | OK |
-| --- | --- |
-| `fxd={['column', 'column', 'row']}` | `fxd={['column', null, 'row']}` |
-| `p={['20', '20', '20']}` | `p="20"` |
-| `cols={[1, 1, 3]}` | `cols={[1, null, 3]}` |
-
-ただし、既存コードの型・生成仕様で`null`が使えない場合は既存パターンを優先します。レスポンシブ差分を誤って単一値化しないでください。
+前のBPと同じ値を繰り返さない。変わらないBPは`null`でスキップし、全BPで同じ値なら単一値にします。ただし、既存コードの型・生成仕様で`null`が使えない場合は既存パターンを優先し、レスポンシブ差分を誤って単一値化しないでください。
 
 ### container query運用では祖先`isContainer`を確認する
 
 デフォルトではレスポンシブProperty Classは`@container`で発火します。レスポンシブ値を載せる要素の祖先に`isContainer`/`is--container`があるか確認してください。
 
-```jsx
-<Stack isContainer>
-  <Box p={{ base: '20', md: '40' }}>...</Box>
-</Stack>
-```
-
 `$is_container_query:0`などの設定でmedia query運用が確認できる場合は、`isContainer`祖先は必須ではありません。設定が不明な場合は、既存SCSS設定・`customize.md`・生成CSSを確認してから判断してください。
 
 ### `isContainer`を置く位置で挙動が変わる

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

@@ -74,7 +74,7 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 
 ## `set--bxsh`
 
-`SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
+`SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。近い側の影色 `--shc--near` も `--shc` から再計算されるため、2層の影がまとめて変わります。
 
 使用例:
 ```html

package/dist/data/guides/tokens.md

@@ -32,12 +32,13 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | --- | --- | --- | --- |
 | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
-| ハーフレディング・行間 (hl/lh) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
-| 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
+| ハーフレディング (hl) | `base`, `xs`, `s`, `l`, `xl` | `--hl--{key}` | `--hl--s` |
+| 行間比率 (lh) | `xs`, `s`, `m`, `l`, `xl` | `--lh--{key}` | `--lh--m` |
+| 字間 (lts) | `base`, `xs`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
-| 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
+| 角丸 (bdrs) | `10`, `20`, `30`, `40`, `50`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
 | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
 | サイズ (sz) | `xs`, `s`, `m`, `l`, `xl` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
@@ -51,7 +52,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 余白 (space)
 
-フィボナッチ数列ベースのスケーリング。`--s-unit`（デフォルト `calc(var(--fz--base) * 0.5)` ＝ ≒ 8px）を基準単位とする。
+フィボナッチ数列ベースのスケーリング。`--s-unit`（デフォルト `0.5rem` ≒ 8px）を基準単位とする。
 
 | CSS変数 | 値 | 実サイズ目安 |
 | --- | --- | --- |
@@ -68,7 +69,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--s70` | `calc(var(--s-unit) * 21)` | ≒ 168px |
 | `--s80` | `calc(var(--s-unit) * 34)` | ≒ 272px |
 
-`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
+`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
 
 ### `set--s` ユーティリティ
 
@@ -109,7 +110,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 行間 (hl/lh)
 
-ハーフレディングの大きさ。Lism CSSでは、`line-height` は `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`（≒ 2px）を基準単位とする。
+`line-height` は全要素で `var(--lh, calc(1em + var(--hl) * 2))` として算出される。既定は `--hl`（ハーフレディング）で管理し、`--lh` がセットされていればそちらが優先される。
+
+`hl` はハーフレディングの大きさ。`--hl-unit`（≒ 2px）を基準単位とする。
 
 | CSS変数 | 値 | 説明 |
 | --- | --- | --- |
@@ -117,6 +120,19 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--hl--s` | `calc(var(--hl-unit) * 2)` | 小さめの行間（≒ 4px） |
 | `--hl--base` | `calc(var(--hl-unit) * 3)` | 基本の行間（≒ 6px） |
 | `--hl--l` | `calc(var(--hl-unit) * 4)` | 大きめの行間（≒ 8px） |
+| `--hl--xl` | `calc(var(--hl-unit) * 5)` | より大きな行間（≒ 10px） |
+
+`--fz--base` を流体値にしていて行間も連動させたい場合は、`:root` で `--hl-unit: calc(var(--fz--base) * 0.125)` に上書きする。
+
+`lh` は `line-height` を倍率で指定するトークン。`hl` が fz 非依存の固定量なのに対し、fz に比例した行送りを保ちたい場合に使う。
+
+| CSS変数 | 値 |
+| --- | --- |
+| `--lh--xs` | `1.25` |
+| `--lh--s` | `1.5` |
+| `--lh--m` | `1.75` |
+| `--lh--l` | `2` |
+| `--lh--xl` | `2.25` |
 
 
 ## 字間 (lts)
@@ -124,6 +140,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | CSS変数 | 値 | 説明 |
 | --- | --- | --- |
 | `--lts--base` | `normal` | 基本の文字間隔 |
+| `--lts--xs` | `-0.05em` | より狭い文字間隔 |
 | `--lts--s` | `-0.025em` | 狭めの文字間隔 |
 | `--lts--l` | `0.05em` | 広めの文字間隔 |
 | `--lts--xl` | `0.1em` | より広い文字間隔 |
@@ -163,32 +180,37 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 角丸 (bdrs)
 
+増分が0.125remずつ大きくなる二階等差数列のスケール。
+
 | CSS変数 | 値 | 説明 |
 | --- | --- | --- |
 | `--bdrs--10` | `0.25rem` | ≒ 4px |
-| `--bdrs--20` | `0.5rem` | ≒ 8px |
-| `--bdrs--30` | `1rem` | ≒ 16px |
-| `--bdrs--40` | `1.5rem` | ≒ 24px |
+| `--bdrs--20` | `0.375rem` | ≒ 6px |
+| `--bdrs--30` | `0.625rem` | ≒ 10px |
+| `--bdrs--40` | `1rem` | ≒ 16px |
+| `--bdrs--50` | `1.5rem` | ≒ 24px |
 | `--bdrs--99` | `99rem` | 完全な丸（pill） |
-| `--bdrs--inner` | `calc(var(--bdrs, 0px) - var(--p, 0px))` | 内側の角丸（親要素に合わせる） |
+| `--bdrs--inner` | `calc(var(--bdrs, 0px) - var(--p, 0px) + 1px)` | 内側の角丸（親要素に合わせる） |
 
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
+要素に近い薄い影と主となる影の2層で構成される。近い側の影は、1段小さいシャドウサイズ `--shsz--{N}` と、`--shc`（シャドウカラー）を50%薄めた `--shc--near` を使う。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する（`--shc--near` も `--shc` から再計算される）。
 
 | CSS変数 | 値 |
 | --- | --- |
-| `--bxsh--10` | `var(--shsz--10) var(--shc)` |
-| `--bxsh--20` | `var(--shsz--20) var(--shc)` |
-| `--bxsh--30` | `var(--shsz--30) var(--shc)` |
-| `--bxsh--40` | `var(--shsz--40) var(--shc)` |
-| `--bxsh--50` | `var(--shsz--50) var(--shc)` |
+| `--bxsh--10` | `var(--shsz--5) var(--shc--near), var(--shsz--10) var(--shc)` |
+| `--bxsh--20` | `var(--shsz--10) var(--shc--near), var(--shsz--20) var(--shc)` |
+| `--bxsh--30` | `var(--shsz--20) var(--shc--near), var(--shsz--30) var(--shc)` |
+| `--bxsh--40` | `var(--shsz--30) var(--shc--near), var(--shsz--40) var(--shc)` |
+| `--bxsh--50` | `var(--shsz--40) var(--shc--near), var(--shsz--50) var(--shc)` |
 
 | CSS変数 | 初期値 |
 | --- | --- |
-| `--shadow` | `hsl(220 4% 8% / 12%)` |
+| `--shadow` | `hsl(220 2% 4% / 8%)` |
 | `--shc` | `var(--shadow)` |
+| `--shc--near` | `color-mix(in srgb, var(--shc), transparent 50%)` |
+| `--shsz--5` | `0px 0px 1px` |
 | `--shsz--10` | `0px 1px 3px` |
 | `--shsz--20` | `0px 2px 6px` |
 | `--shsz--30` | `0px 4px 12px` |
@@ -263,10 +285,12 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 `--keycolor: var(--red)` のように指定しておくことで、そのボックス自身や子要素のカラー Props（`c`, `bgc`, `bdc` など）で 特定の色をハードコーディングせずに `--keycolor` 経由で参照できるようにすることができる。代表的な使用例は `u--cbox` ユーティリティクラス。
 
+`c` / `bgc` / `bdc` の値に `keycolor` を指定すると、`-c:keycolor` のような Property Class が出力される（`style` 属性ではない）。これらのクラスは `--c: var(--keycolor)` のように `--keycolor` を参照する。
+
 ```html
 <!-- ボックスにキーカラーを設定、テキストをキーカラーに連動させる例 -->
 <div class="u--cbox" style="--keycolor: var(--red)">
-  <p class="-c" style="-c:var(--keycolor)">...</p>
+  <p class="-c:keycolor">...</p>
 </div>
 ```
 ```jsx
@@ -277,6 +301,8 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 - `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
 - どちらも最終的に `var(--{name})` に変換される
+- `main.css` でクラス化されるのは厳選したセマンティックカラーと `keycolor` のみ（`-c:brand` / `-c:keycolor` など）。それ以外のカラートークン（`red` などのパレットカラー）は `style` 属性の CSS 変数として出力される
+- `full.css` + `isFullMode` では、`c` / `bgc` / `bdc` の全カラートークンがクラス化される（`-bgc:red` など）
 
 
 ## トークン値の命名規則

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

@@ -3,9 +3,24 @@
 `transition` 系のプロパティを CSS 変数経由でセットする Trait クラス。主に `-hov:*` クラスと組み合わせて、ホバー時のスムーズな変化に使う。
 
 - Lism props: `hasTransition`（`<Lism hasTransition>` / `<Box hasTransition>` 等）
+- 文字列を渡すと `--transitionProps` として出力される: `<Box hasTransition="color, opacity">` → `class="has--transition" style="--transitionProps: color, opacity"`
 
 公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/trait-class.md#has--transition
 
+## 対象プロパティは明示指定する
+
+`--transitionProps` の初期値は `all` ではなく、色・影・透明度・transform 系・filter 系に限定したリスト。`all` はページ読み込み時やレイアウト変化時に意図しないアニメーション（ちらつき）を起こすため使わない。
+
+実際に変化させるプロパティだけを `--transitionProps`（Lism props では `hasTransition="..."`）で明示指定する。初期値のリストに無いプロパティ（`padding`, `width`, `border-width` 等）を変化させる場合は必ず指定が要る。
+
+```html
+<a class="is--boxLink has--transition -hov:-bxsh" style="--transitionProps: box-shadow; --hov-bxsh: var(--bxsh--40)">...</a>
+```
+
+```jsx
+<BoxLink hasTransition="box-shadow" hov={{ bxsh: '40' }}>...</BoxLink>
+```
+
 ## SCSS 定義
 
 ```scss
@@ -13,7 +28,7 @@
   --duration: var(--transition-duration, 0.25s);
   --ease: ease;
   --delay: 0s;
-  --transitionProps: all;
+  --transitionProps: color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter;
   transition: var(--duration) var(--ease) var(--delay);
   transition-property: var(--transitionProps);
 }
@@ -23,7 +38,7 @@
 
 | 変数 | 役割 | デフォルト |
 | --- | --- | --- |
-| `--transitionProps` | transition 対象プロパティ | `all` |
+| `--transitionProps` | transition 対象プロパティ | `color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter` |
 | `--duration` | トランジションの長さ | `var(--transition-duration, 0.25s)` |
 | `--ease` | イージング関数 | `ease` |
 | `--delay` | ディレイ | `0s` |

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

@@ -52,26 +52,15 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
 
 | クラス | 用途 | 主な CSS 変数 |
 | --- | --- | --- |
-| `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
+| `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用。対象プロパティは `--transitionProps` で明示指定する（初期値は `all` ではなく色・影・透明度・transform 系・filter 系に限定） | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
 | `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter`（基準値: `--gutter--base`、初期値 `var(--s30)`） |
 | `has--snap` | `scroll-snap-` 系プロパティを CSS 変数経由でセットできるようにする | `--snapType`, `--snapAlign` 等 |
 | `has--mask` | `--maskImg` 変数と組み合わせて、要素自身にマスクを適用する | `--maskImg`, `--maskPos`（`50%`）, `--maskSize`（`contain`）, `--maskRepeat`（`no-repeat`） |
 
-Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます（例: `<Lism hasTransition>`）。
+Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます（例: `<Lism hasTransition>`）。`hasTransition` は文字列も受け付け、`--transitionProps` として出力されます（例: `<Lism hasTransition="color, opacity">`）。
 
 詳細は以下の個別ドキュメントを参照してください:
 - [has--transition](./trait-class/has--transition.md)
 - [has--gutter](./trait-class/has--gutter.md)
 - [has--snap](./trait-class/has--snap.md)
 - [has--mask](./trait-class/has--mask.md)
-
-
-## `is--` と `has--` の判断軸
-
-|  | `is--` | `has--` |
-| --- | --- | --- |
-| 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
-| CSS 変数 | 必須ではない | 必須（カスタマイズポイント） |
-
-- その要素が **何であるか**（役割）を表すなら → `is--`
-- その要素に **どんな機能を持たせるか**（カスタマイズポイント付き）なら → `has--`

package/dist/data/meta.js

@@ -1,6 +1,6 @@
 import { packageVersion } from '../lib/version.js';
 export const meta = {
-    generatedAt: '2026-07-06',
-    sourceCommit: '61898938',
+    generatedAt: '2026-09-02',
+    sourceCommit: 'efc6ab9a',
     docsVersion: packageVersion,
 };

package/dist/lib/markdown-utils.d.ts

@@ -1,38 +1,19 @@
-/**
- * Markdown から指定した見出しのセクションを抽出する。
- * 同レベル以上の次の見出しが来るまでの内容を返す。
- * @param md - Markdown 全文
- * @param heading - 見出しテキスト（`#` プレフィックスあり・なし両可）
- */
+/** 指定見出しから同レベル以上の次の見出しまでを抽出する。headingは#の有無を問わない。 */
 export declare function extractSection(md: string, heading: string): string;
-/**
- * Markdown から全ての見出しとその開始行を抽出する。
- */
 export declare function listHeadings(md: string): {
     level: number;
     text: string;
     line: number;
 }[];
 export interface PropRow {
-    /** Lism Prop 名（例: "fz"） */
     prop: string;
-    /** CSS プロパティ名（例: "font-size"）。変数形式（"--hl"）も含む */
     cssProperty: string;
-    /** 所属する ### セクション名 */
     sectionName: string;
-    /** プリセット値クラス列の生テキスト（例: "-fz:base, -fz:5xl, ..."） */
     presetColumn: string;
 }
-/**
- * property-class.md のテーブルを全て解析して PropRow[] を返す。
- * `| Prop | CSS プロパティ | ...` 形式のテーブルのみ対象とする。
- */
+/** Property Classの対象テーブルを解析してPropRowへ変換する。 */
 export declare function parsePropRows(md: string): PropRow[];
-/**
- * Markdown からコンポーネント名に一致するセクションを探して返す。
- *
- * components-ui.md のように各コンポーネントが `## ComponentName` で始まる場合に有効。
- */
+/** 各コンポーネントが`## ComponentName`で始まる文書向け。 */
 export declare function findComponentByHeading(md: string, name: string): string;
 /**
  * Markdown 内のテーブルセル（`` `<ComponentName>` ``）からコンポーネントを含む

package/dist/lib/markdown-utils.js

@@ -1,14 +1,8 @@
-/** 見出しの `#` レベルを返す（見出しでなければ 0） */
 function headingLevel(line) {
     const m = line.match(/^(#{1,6})\s/);
     return m ? m[1].length : 0;
 }
-/**
- * Markdown から指定した見出しのセクションを抽出する。
- * 同レベル以上の次の見出しが来るまでの内容を返す。
- * @param md - Markdown 全文
- * @param heading - 見出しテキスト（`#` プレフィックスあり・なし両可）
- */
+/** 指定見出しから同レベル以上の次の見出しまでを抽出する。headingは#の有無を問わない。 */
 export function extractSection(md, heading) {
     const headingText = heading.replace(/^#+\s*/, '').trim();
     const lines = md.split('\n');
@@ -34,9 +28,6 @@ export function extractSection(md, heading) {
     }
     return lines.slice(startIdx, endIdx).join('\n').trimEnd();
 }
-/**
- * Markdown から全ての見出しとその開始行を抽出する。
- */
 export function listHeadings(md) {
     return md.split('\n').flatMap((line, i) => {
         const lv = headingLevel(line);
@@ -45,38 +36,32 @@ export function listHeadings(md) {
         return [{ level: lv, text: line.replace(/^#+\s*/, '').trim(), line: i }];
     });
 }
-/**
- * property-class.md のテーブルを全て解析して PropRow[] を返す。
- * `| Prop | CSS プロパティ | ...` 形式のテーブルのみ対象とする。
- */
+/** Property Classの対象テーブルを解析してPropRowへ変換する。 */
 export function parsePropRows(md) {
     const lines = md.split('\n');
     const rows = [];
     let currentSection = '';
     let inPropTable = false;
+    // 見出しと対象テーブルの範囲を追跡する。
     for (const line of lines) {
         const lv = headingLevel(line);
-        // セクション見出しを追跡（### レベル）
         if (lv >= 2) {
             currentSection = line.replace(/^#+\s*/, '').trim();
             inPropTable = false;
             continue;
         }
-        // Property Class テーブルのヘッダー行を検出
         if (line.includes('Prop') && line.includes('CSS プロパティ')) {
             inPropTable = true;
             continue;
         }
-        // 区切り行はスキップ
         if (inPropTable && /^\|[-\s|:]+\|/.test(line)) {
             continue;
         }
-        // テーブルの終了を検出
         if (inPropTable && !line.startsWith('|')) {
             inPropTable = false;
             continue;
         }
-        // データ行を解析
+        // 対象テーブルの各行をPropRowへ変換する。
         if (inPropTable && line.startsWith('|')) {
             const cells = line
                 .split('|')
@@ -84,9 +69,7 @@ export function parsePropRows(md) {
                 .filter(Boolean);
             if (cells.length >= 2) {
                 const prop = cells[0].replace(/`/g, '').trim();
-                // CSS プロパティ: バッククォート除去、括弧内の注釈は保持しない
                 const cssPropertyRaw = cells[1].replace(/`/g, '').trim();
-                // `line-height`（`--hl` 経由） のような括弧注釈を除去
                 const cssProperty = cssPropertyRaw
                     .replace(/（[^）]*）$/, '')
                     .replace(/\([^)]*\)$/, '')
@@ -103,11 +86,7 @@ export function parsePropRows(md) {
 // ----------------------------------------------------------------
 // コンポーネント検索
 // ----------------------------------------------------------------
-/**
- * Markdown からコンポーネント名に一致するセクションを探して返す。
- *
- * components-ui.md のように各コンポーネントが `## ComponentName` で始まる場合に有効。
- */
+/** 各コンポーネントが`## ComponentName`で始まる文書向け。 */
 export function findComponentByHeading(md, name) {
     return extractSection(md, name);
 }
@@ -119,10 +98,9 @@ export function findComponentByHeading(md, name) {
 export function findComponentInTables(md, name) {
     const nameLower = name.toLowerCase();
     const lines = md.split('\n');
-    // コンポーネント名のパターン: `<Flex>`, `<flex>`, または単純に "flex" がテーブル行に含まれるか
     const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const pattern = new RegExp(`\`?<${escaped}>?\`?`, 'i');
-    // まず対象行を探す
+    // コンポーネントを含むテーブル行を探す。
     let targetLineIdx = -1;
     for (let i = 0; i < lines.length; i++) {
         if (lines[i].startsWith('|') && (pattern.test(lines[i]) || lines[i].toLowerCase().includes(`\`${nameLower}\``))) {
@@ -132,7 +110,7 @@ export function findComponentInTables(md, name) {
     }
     if (targetLineIdx === -1)
         return '';
-    // 対象行を含む ## セクションの開始を遡って探す
+    // 対象行を含む##節の範囲を決める。
     let sectionStart = -1;
     let sectionLevel = 0;
     for (let i = targetLineIdx; i >= 0; i--) {
@@ -145,7 +123,6 @@ export function findComponentInTables(md, name) {
     }
     if (sectionStart === -1)
         return lines.slice(0, targetLineIdx + 20).join('\n');
-    // セクションの終端を探す
     let sectionEnd = lines.length;
     for (let i = sectionStart + 1; i < lines.length; i++) {
         const lv = headingLevel(lines[i]);

package/dist/lib/search.d.ts

@@ -1,8 +1,5 @@
 import type { DocsEntry, SearchResult } from './types.js';
-/**
- * Property Class 記法（例: "-g:5", ".-p:20", "-fz"）から prop 名を抽出する。
- * get-props-system.ts からも利用される共通ユーティリティ。
- */
+/** Property Class記法からprop名を取り出す。get-props-system.tsからも利用する。 */
 export declare function parsePropClassName(input: string): string | null;
 export interface SearchDocsOptions {
     category?: string;

package/dist/lib/search.js

@@ -4,32 +4,22 @@ function tokenize(text) {
         .split(/[\s\-_./]+/)
         .filter((t) => t.length > 0);
 }
-// ".-g:5" or "-g:5" → prop="g", value="5" / "-p" → prop="p"
 const PROP_CLASS_RE = /^\.?-([a-z][a-z0-9-]*)(:.+)?$/i;
-/**
- * Property Class 記法（例: "-g:5", ".-p:20", "-fz"）から prop 名を抽出する。
- * get-props-system.ts からも利用される共通ユーティリティ。
- */
+/** Property Class記法からprop名を取り出す。get-props-system.tsからも利用する。 */
 export function parsePropClassName(input) {
     const m = input.match(PROP_CLASS_RE);
     return m ? m[1].toLowerCase() : null;
 }
-/**
- * 検索クエリをCSSプロパティ名やProperty Class記法で展開する。
- * 例: "font-size" → "font-size fz"
- * 例: "-g:5" → "-g:5 g gap property class"
- */
+/** CSSプロパティとProperty Classを相互展開して検索語を補う。 */
 function expandQuery(query, cssPropertyMap) {
     const additions = [];
     const queryLower = query.toLowerCase();
     const parsedProp = parsePropClassName(queryLower.trim());
     if (cssPropertyMap) {
         for (const [cssProp, lismProps] of cssPropertyMap) {
-            // Property Class 記法の逆引き（例: "-g:5" の "g" → "gap"）
             if (parsedProp && lismProps.includes(parsedProp)) {
                 additions.push(cssProp);
             }
-            // CSSプロパティ名の展開（例: "font-size" → "fz"）
             if (queryLower.includes(cssProp)) {
                 additions.push(...lismProps);
             }
@@ -47,20 +37,16 @@ function scoreEntry(entry, queryTokens) {
     const headingsLower = entry.headings.join(' ').toLowerCase();
     const keywordsLower = entry.keywords.join(' ').toLowerCase();
     const snippetLower = entry.snippet.toLowerCase();
+    // titleからsnippetへ順に重みを下げる。
     for (const token of queryTokens) {
-        // title matches are weighted highest
         if (titleLower.includes(token))
             score += 10;
-        // keywords
         if (keywordsLower.includes(token))
             score += 5;
-        // headings
         if (headingsLower.includes(token))
             score += 3;
-        // description
         if (descLower.includes(token))
             score += 2;
-        // snippet
         if (snippetLower.includes(token))
             score += 1;
     }
@@ -68,7 +54,7 @@ function scoreEntry(entry, queryTokens) {
 }
 export function searchDocs(entries, query, options) {
     const { category, limit = 10, cssPropertyMap, guideTopics } = options ?? {};
-    // CSSプロパティ名・Property Class記法をLism prop名に展開してからトークナイズ
+    // CSSプロパティ名とProperty Class記法も同じ検索対象へ展開する。
     const expandedQuery = expandQuery(query, cssPropertyMap);
     const queryTokens = tokenize(expandedQuery);
     if (queryTokens.length === 0)
@@ -85,29 +71,32 @@ export function searchDocs(entries, query, options) {
         .filter(({ score }) => score > 0)
         .sort((a, b) => b.score - a.score)
         .slice(0, limit);
-    const DOCS_BASE_URL = 'https://lism-css.com/docs';
     return scored.map(({ entry, score }) => ({
         sourcePath: entry.sourcePath,
-        url: `${DOCS_BASE_URL}/${sourcePathToUrlSlug(entry.sourcePath)}/`,
+        url: slugToPageUrl(sourcePathToUrlSlug(entry.sourcePath)),
         heading: entry.title,
         snippet: entry.snippet,
         score,
         nextTool: getNextTool(entry, guideTopics),
     }));
 }
-/** `sourcePath`（拡張子なし）の末尾セグメントを返す（例: `primitives/l--flex` → `l--flex`） */
+const SITE_BASE_URL = 'https://lism-css.com';
+/**
+ * URL スラッグを公開ページの URL に変換する。
+ * `ui/` 配下はサイト直下（`/ui/...`）、それ以外は `/docs/` 配下で公開される
+ * （apps/docs の `getPostUrl` と同じルーティング規則）。
+ */
+function slugToPageUrl(slug) {
+    return slug.startsWith('ui/') ? `${SITE_BASE_URL}/${slug}/` : `${SITE_BASE_URL}/docs/${slug}/`;
+}
 function getBasename(withoutExt) {
     const parts = withoutExt.split('/');
     return parts[parts.length - 1];
 }
-/**
- * 検索結果のページを詳しく見るための推奨フォローアップツール呼び出しを返す。
- * sourcePath による判定をカテゴリによる判定より優先する。
- */
+/** 検索結果を掘り下げる推奨ツールを返す。カテゴリよりsourcePathの規則を優先する。 */
 function getNextTool(entry, guideTopics) {
     const withoutExt = entry.sourcePath.replace(/\.mdx$/, '');
     const basename = getBasename(withoutExt);
-    // sourcePath ベースの判定（category より優先）
     if (withoutExt === 'core-components/lism-props') {
         return 'get_props_system()';
     }
@@ -120,12 +109,10 @@ function getNextTool(entry, guideTopics) {
     if (withoutExt.startsWith('property-class/')) {
         return `get_props_system(prop: "${basename}")`;
     }
-    // ui/examples/ は実装例ページ（Card, Hero 等）で get_component では解決できないため誘導しない。
-    // 詳細が必要な場合は検索結果の url を参照してもらう。
-    if (withoutExt.startsWith('ui/examples/')) {
+    // 実装例ページはパッケージ提供コンポーネントではないためget_componentでは解決できない。
+    if (withoutExt.startsWith('ui/block-examples/') || withoutExt.startsWith('ui/components/')) {
         return null;
     }
-    // category ベースの判定
     switch (entry.category) {
         case 'core-components':
             return `get_component(name: "${basename}")`;
@@ -147,12 +134,6 @@ function getNextTool(entry, guideTopics) {
  * IMPORTANT: `apps/docs/src/lib/contentSlug.ts` の `toContentSlug` と必ず同じロジックに保つこと。
  * 別ワークスペース（apps/docs）なので直接 import できず、ローカル実装で複製している。
  * apps/docs 側を変更した場合は必ずここも合わせて更新する。
- *
- * 例:
- *   `primitives/l--tileGrid.mdx`    → `primitives/l--tileGrid`
- *   `trait-class/is--boxLink.mdx`   → `trait-class/is--boxLink`
- *   `core-components/Group.mdx`     → `core-components/group`
- *   `ui/DummyText.mdx`              → `ui/dummytext`
  */
 const PRESERVE_CASE_PREFIXES = ['primitives/', 'trait-class/'];
 export function sourcePathToUrlSlug(sourcePath) {