@lism-css/mcp 0.14.0 → 0.15.0

package/dist/data/guides/tokens.md

@@ -36,7 +36,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
-| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{N}` | `--bxsh--20` |
+| 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
 | サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `container` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
@@ -153,14 +153,24 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{N}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
+`--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--var:bxsh` クラスを併用する。
 
-| CSS変数 | 値 | 説明 |
-|---------|-----|------|
-| `--bxsh--10` | `var(--sh--5), var(--sh--10)` | step 10 |
-| `--bxsh--20` | `var(--sh--10), var(--sh--20)` | step 20 |
-| `--bxsh--30` | `var(--sh--20), var(--sh--30)` | step 30 |
-| `--bxsh--40` | `var(--sh--30), var(--sh--40)` | step 40（最も濃い） |
+| 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)` |
+
+| CSS変数 | 初期値 |
+|---------|-----|
+| `--shc` | `hsl(220 4% 8% / 15%)` |
+| `--shsz--10` | `0px 1px 3px` |
+| `--shsz--20` | `0px 2px 6px` |
+| `--shsz--30` | `0px 4px 12px` |
+| `--shsz--40` | `0px 8px 24px` |
+| `--shsz--50` | `0px 16px 48px` |
 
 
 ## カラー

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

@@ -0,0 +1,48 @@
+# has--gutter
+
+要素の左右に、サイト共通の gutter（余白）を適用する Trait クラス。`padding` 系ユーティリティとは別に、「サイト全体で統一した左右余白」を確保したい時に使う。
+
+## 基本情報
+
+- クラス名: `has--gutter`
+- Lism props: `hasGutter`（`<Lism hasGutter>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasGutter.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--gutter
+
+## SCSS 定義
+
+```scss
+.has--gutter {
+  padding-inline: var(--gutter-size);
+}
+```
+
+`--gutter-size` はトークン (`:root`) で `var(--s30)` がデフォルト定義されている。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--gutter-size` | 左右の padding 量 | `var(--s30)` |
+
+個別要素で `--gutter-size` を上書きすれば、その要素のみ gutter 量を変更できる。
+
+## Usage
+
+```html
+<div class="has--gutter">
+  <p>Lorem ipsum content...</p>
+  <p>Lorem ipsum content...</p>
+</div>
+```
+```jsx
+<Lism hasGutter>
+  <p>Lorem ipsum content...</p>
+  <p>Lorem ipsum content...</p>
+</Lism>
+```
+
+## 関連
+
+- `-px:*` プロパティクラス — その要素ごとに任意の左右 padding を付けたい場合はこちら
+- `is--wrapper` — コンテンツ幅制御。gutter と組み合わせてセクションラッパーを構成することが多い

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

@@ -0,0 +1,66 @@
+# has--mask
+
+`--maskImg` 変数と組み合わせて、要素自身にマスク画像を適用する Trait クラス。SVG を使った異形シェイプ表示などに使う。
+
+## 基本情報
+
+- クラス名: `has--mask`
+- Lism props: `hasMask`（`<Lism hasMask>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasMask.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--mask
+
+## SCSS 定義
+
+```scss
+.has--mask {
+  --maskPos: 50%;
+  --maskSize: contain;
+  --maskRepeat: no-repeat;
+  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
+}
+```
+
+`--maskImg` は定義されていないため、利用側で必ず指定すること。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--maskImg` | マスク画像（`url(...)` で指定。SVG data URI が多い） | **未定義（必須）** |
+| `--maskPos` | マスクの位置 | `50%` |
+| `--maskSize` | マスクのサイズ | `contain` |
+| `--maskRepeat` | マスクの繰り返し | `no-repeat` |
+
+## Usage
+
+`Frame` コンポーネント（または任意の要素）に `has--mask` を付与し、`--maskImg` に SVG の data URI をセットする。
+
+```html
+<div
+  class="l--frame has--mask -ar:og"
+  style="--maskImg: url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;M170.4,25.7...Z&quot; /></svg>')"
+>
+  <img src="..." width="960" height="640" alt="" />
+</div>
+```
+```jsx
+<Frame
+  hasMask
+  ar="og"
+  style={{
+    '--maskImg': `url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="M170.4,25.7...Z" /></svg>')`
+  }}
+>
+  <img src="..." width="960" height="640" alt="" />
+</Frame>
+```
+
+### 実装メモ
+
+- HTML 属性内で SVG data URI を使う場合、`<` / `>` / `"` をエンティティ化する必要がある
+- JSX の `style` オブジェクトで渡す場合はテンプレートリテラルでそのまま書ける
+- マスクの位置や繰り返しを変えたい場合は `--maskPos` / `--maskSize` / `--maskRepeat` を個別に上書き
+
+## 関連
+
+- `l--frame` — アスペクト比制御。マスク画像をフィットさせるラッパーとして併用することが多い

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

@@ -0,0 +1,68 @@
+# has--snap
+
+`scroll-snap-*` 系のプロパティを CSS 変数経由でセットする Trait クラス。横スクロールカルーセルなどで子要素のスナップ位置を制御したい時に使う。
+
+## 基本情報
+
+- クラス名: `has--snap`
+- Lism props: `hasSnap`（`<Lism hasSnap>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasSnap.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--snap
+
+## SCSS 定義
+
+```scss
+.has--snap {
+  --snapType: both mandatory;
+  --snapAlign: start;
+  --snapStop: normal;
+  scroll-snap-type: var(--snapType);
+
+  & > * {
+    scroll-snap-align: var(--snapAlign);
+    scroll-snap-stop: var(--snapStop);
+  }
+}
+```
+
+自身に `scroll-snap-type` を、**直下の子要素**に `scroll-snap-align` / `scroll-snap-stop` を適用する構造。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--snapType` | `scroll-snap-type` | `both mandatory` |
+| `--snapAlign` | 子要素の `scroll-snap-align` | `start` |
+| `--snapStop` | 子要素の `scroll-snap-stop` | `normal` |
+
+## Usage
+
+`ov="auto"`（または `overflow: auto`）と一緒に使い、スクロールコンテナとして成立させる必要がある。
+
+```html
+<div class="has--snap -ov:auto -ar:16/9 -bd">
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+</div>
+```
+```jsx
+<Box hasSnap ov="auto" ar="16/9" bd>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+</Box>
+```
+
+### スナップ方向を水平だけに限定する例
+
+```html
+<div class="has--snap -ov:auto" style="--snapType: x mandatory">...</div>
+```
+```jsx
+<Box hasSnap ov="auto" style={{ '--snapType': 'x mandatory' }}>...</Box>
+```
+
+## 関連
+
+- `-ov:*` プロパティクラス — スクロールコンテナ化に必須

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

@@ -0,0 +1,73 @@
+# has--transition
+
+`transition` 系のプロパティを CSS 変数経由でセットする Trait クラス。主に `-hov:*` クラスと組み合わせて、ホバー時のスムーズな変化に使う。
+
+## 基本情報
+
+- クラス名: `has--transition`
+- Lism props: `hasTransition`（`<Lism hasTransition>` / `<Box hasTransition>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasTransition.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/#has--transition
+
+## SCSS 定義
+
+```scss
+.has--transition {
+  --duration: var(--transition-duration, 0.25s);
+  --ease: ease;
+  --delay: 0s;
+  --transitionProps: all;
+  transition: var(--duration) var(--ease) var(--delay);
+  transition-property: var(--transitionProps);
+}
+```
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--transitionProps` | transition 対象プロパティ | `all` |
+| `--duration` | トランジションの長さ | `var(--transition-duration, 0.25s)` |
+| `--ease` | イージング関数 | `ease` |
+| `--delay` | ディレイ | `0s` |
+| `--transition-duration` | 全体のデフォルト duration を `:root` などから上書きするためのグローバル変数 | `0.25s` |
+
+## Usage
+
+### 基本：`-hov:*` と組み合わせる
+
+```html
+<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>
+```
+```jsx
+<Lism hasTransition hov={{c: 'red'}} style={{ '--transitionProps': 'color'}}>Example</Lism>
+```
+
+### `duration` を個別に上書き
+
+```html
+<a class="is--boxLink has--transition -hov:-bdc -bd -p:20" style="--hov-bdc: var(--red); --duration: 0.5s">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd p="20" style={{ '--duration': '.5s' }}>
+  ...
+</BoxLink>
+```
+
+### `box-shadow` を変化させる例
+
+```html
+<a href="###" class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20" style="--hov-bxsh: var(--bxsh--40)">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">...</BoxLink>
+```
+
+## 関連
+
+- [`-hov:*` プロパティクラス](../property-class.md) — ホバー時の変化を定義
+- [`set--var:hov`](../set-class.md#set--varhov) — 親のホバー状態を子要素に伝播させる仕組み

package/dist/data/guides/{primitives → trait-class}/is--boxLink.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--boxLink`
 - コンポーネント: `<BoxLink>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_boxLink.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--boxLink/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_boxLink.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--boxLink/
 
 ## 専用Props
 
@@ -26,7 +26,7 @@ BoxLink には主に2通りの使い方があります。
 `href` を指定すると `<BoxLink>` 自体が `<a>` タグとして出力されます。シンプルなカード全体リンクに最適。
 
 ```jsx
-<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="o">
+<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="-o">
   <Group fz="xl" fw="bold">Heading text</Group>
   <Text lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
@@ -36,7 +36,7 @@ BoxLink には主に2通りの使い方があります。
 ```
 
 ```html
-<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
+<a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
   <p class="-fz:xl -fw:bold">Heading text</p>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
@@ -48,7 +48,7 @@ BoxLink には主に2通りの使い方があります。
 `<BoxLink>` は `<div>` にしたまま、内部のアンカー要素に `is--coverLink` クラスを付けてボックス全体をクリック可能にします。**BoxLink 内部にさらに別のリンクを配置したい場合はこちらを選ぶこと**。
 
 ```jsx
-<BoxLink as="section" p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
+<BoxLink as="section" p="30" bgc="base" bd bdrs="30" hasTransition hov="-bxsh">
   <Group fz="xl" fw="bold">
     <Link isCoverLink href="/article/1">
       Heading link text
@@ -56,19 +56,19 @@ BoxLink には主に2通りの使い方があります。
   </Group>
   <Text c="text-2" lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group my-s="10">
-    <a href="/tag/foo" className="-hov:o">Inner Link</a>
+    <a href="/tag/foo" className="-hov:-o">Inner Link</a>
   </Group>
 </BoxLink>
 ```
 
 ```html
-<div class="is--boxLink -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--transition">
+<div class="is--boxLink -hov:-bxsh -p:30 -bgc:base -bd -bdrs:30 has--transition">
   <div class="-fz:xl -fw:bold">
     <a class="is--coverLink" href="/article/1">Heading link text</a>
   </div>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <div class="-my-s:10">
-    <a href="/tag/foo" class="-hov:o">Inner Link</a>
+    <a href="/tag/foo" class="-hov:-o">Inner Link</a>
   </div>
 </div>
 ```

package/dist/data/guides/{primitives → trait-class}/is--container.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--container`
 - コンポーネント: `<Container>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_container.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--container/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_container.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--container/
 
 ## 使い方
 

package/dist/data/guides/{primitives → trait-class}/is--layer.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--layer`
 - コンポーネント: `<Layer>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_layer.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--layer/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_layer.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--layer/
 
 ## 使い方
 

package/dist/data/guides/{primitives → trait-class}/is--wrapper.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--wrapper`
 - コンポーネント: `<Wrapper>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_wrapper.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--wrapper/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_wrapper.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/trait-class/is--wrapper/
 
 ## 使い方
 

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

@@ -0,0 +1,77 @@
+# Trait クラス
+
+Lism CSS では、要素に対して宣言的に「役割」や「機能」を付与するクラス群を **Trait クラス**（`is--` / `has--`）として定義します。これらは `@layer lism-trait` に属します。
+
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [`is--` Trait（役割宣言）](#is-- trait役割宣言)
+- [`has--` Trait（機能付与）](#has-- trait機能付与)
+
+[詳細](https://lism-css.com/docs/trait-class/)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | レイヤー | 役割 |
+|--------------|------|---------|------|
+| `is--` | Trait（役割宣言） | `lism-trait` | 要素に「〜である」という役割・存在を宣言する |
+| `has--` | Trait（機能付与） | `lism-trait` | 要素に「〜を持つ」という単一機能を付与する。CSS 変数でカスタマイズ可能 |
+
+併用ルールおよび `is--` / `has--` の判定軸は [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
+
+
+## `is--` 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>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [is--container](./trait-class/is--container.md)
+- [is--wrapper](./trait-class/is--wrapper.md)
+- [is--layer](./trait-class/is--layer.md)
+- [is--boxLink](./trait-class/is--boxLink.md)
+
+
+## `has--` Trait（機能付与）
+
+要素に**単一機能の trait を付与**するクラスです。CSS 変数によりカスタマイズポイントを提供します。
+
+| クラス | 用途 | 主な CSS 変数 |
+|--------|------|--------------|
+| `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
+| `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter-size`（デフォルト `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>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [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/guides/utility-class.md

@@ -31,7 +31,6 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
 | `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
 | `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.scss) |
-| `u--snap` | スクロールスナップコンテナ。`--snapType`, `--snapAlign`, `--snapStop` で制御 | [`_snap.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_snap.scss) |
 | `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-17',
-    sourceCommit: '38761f59',
+    generatedAt: '2026-04-21',
+    sourceCommit: '0e370dbf',
     docsVersion: '0.1.0',
 };

package/dist/lib/load-markdown.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // スキル Markdown の正本を直接参照（開発・テスト時）
 // npm パッケージとして利用される場合は dist/data/guides/ にフォールバック
-const skillsDir = resolve(__dirname, '..', '..', '..', '..', '.claude', 'skills', 'lism-css-guide');
+const skillsDir = resolve(__dirname, '..', '..', '..', '..', 'skills', 'lism-css-guide');
 const distDir = resolve(__dirname, '..', 'data', 'guides');
 const guidesDir = existsSync(skillsDir) ? skillsDir : distDir;
 const cache = new Map();

package/dist/lib/search.js

@@ -97,7 +97,8 @@ export function searchDocs(entries, query, options) {
 /**
  * `sourcePath`（実 MDX ファイルの相対パス）を公開 URL のスラッグに変換する。
  *
- * - `primitives/` 配下のみファイル名の casing を保持（CSS クラス名と URL を一致させるための例外）
+ * - `primitives/` / `trait-class/` 配下のみファイル名の casing を保持
+ *   （CSS クラス名と URL を一致させるための例外）
  * - それ以外は全て小文字化（Astro content collections の `generateId` と揃える）
  *
  * IMPORTANT: `apps/docs/src/lib/contentSlug.ts` の `toContentSlug` と必ず同じロジックに保つこと。
@@ -105,11 +106,13 @@ export function searchDocs(entries, query, options) {
  * apps/docs 側を変更した場合は必ずここも合わせて更新する。
  *
  * 例:
- *   `primitives/l--tileGrid.mdx`   → `primitives/l--tileGrid`
- *   `core-components/Group.mdx`    → `core-components/group`
- *   `ui/DummyText.mdx`             → `ui/dummytext`
+ *   `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/'];
 function sourcePathToUrlSlug(sourcePath) {
     const withoutExt = sourcePath.replace(/\.mdx$/, '');
-    return withoutExt.startsWith('primitives/') ? withoutExt : withoutExt.toLowerCase();
+    return PRESERVE_CASE_PREFIXES.some((prefix) => withoutExt.startsWith(prefix)) ? withoutExt : withoutExt.toLowerCase();
 }

package/dist/tools/get-component.js

@@ -23,9 +23,10 @@ function parsePrimitiveHeading(md) {
         return null;
     return { className: match[1], componentName: match[2] };
 }
+const ALIAS_SOURCE_DIRS = ['primitives/', 'trait-class/'];
 let classAliasMap = null;
 let componentAliasMap = null;
-/** primitives/*.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
+/** primitives/ および trait-class/ 配下の *.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
  *  angle-bracket 形式の問い合わせには componentAliasMap のみを照合し、
  *  クラス専用プリミティブへの false positive を避けるために分離している。 */
 function buildAliasMaps() {
@@ -34,7 +35,7 @@ function buildAliasMaps() {
     const classMap = new Map();
     const componentMap = new Map();
     for (const filename of getGuideFilenames()) {
-        if (!filename.startsWith('primitives/'))
+        if (!ALIAS_SOURCE_DIRS.some((dir) => filename.startsWith(dir)))
             continue;
         const parsed = parsePrimitiveHeading(loadMarkdown(filename));
         if (!parsed)
@@ -136,7 +137,7 @@ export function registerGetComponent(server) {
                     for (const [key, file] of map) {
                         if (key.includes(normalizedKey) && !seenFiles.has(file)) {
                             seenFiles.add(file);
-                            moduleCandidates.push(file.replace(/^primitives\//, '').replace(/\.md$/, ''));
+                            moduleCandidates.push(file.replace(new RegExp(`^(${ALIAS_SOURCE_DIRS.join('|')})`), '').replace(/\.md$/, ''));
                         }
                     }
                 }

package/dist/tools/get-guide.js

@@ -14,7 +14,7 @@ const GUIDE_TOPICS = {
         label: 'UI components (Accordion, Modal, Tabs, Button, etc.)',
     },
     'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
-    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--shadow, set--hov, etc.)' },
+    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
     'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "scripts": {
     "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../.claude/skills/lism-css-guide dist/data/guides",
+    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../skills/lism-css-guide dist/data/guides",
     "dev": "tsc --watch",
     "test": "vitest run"
   }