@lism-css/mcp 0.18.0 → 0.22.0

package/dist/data/guides/property-class/max-sz.md

@@ -33,8 +33,8 @@
 
   :where(.has--gutter) > & {
     inline-size: auto;
-    max-inline-size: calc(100% + var(--gutter-size) * 2);
-    margin-inline: calc(var(--gutter-size) * -1);
+    max-inline-size: calc(100% + var(--gutter) * 2);
+    margin-inline: calc(var(--gutter) * -1);
   }
 }
 ```

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

@@ -65,7 +65,7 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
 | **CSS プロパティ** | 実際に制御される CSS プロパティ |
 | **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
-| **BP クラス** | ブレークポイント対応クラス。`—` は非対応 |
+| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`、`✔ lg` は `lg` まで対応、`—` は非対応 |
 
 
 ## 全 Prop 一覧
@@ -74,15 +74,15 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### タイポグラフィ
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `f` | `font` | `-f:inherit` | — |
-| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | `-fz_sm`, `-fz_md` |
+| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
 | `fw` | `font-weight` | `-fw:light`, `-fw:normal`, `-fw:bold`, `-fw:100`〜`-fw:900` | — |
 | `ff` | `font-family` | `-ff:base`, `-ff:accent`, `-ff:mono` | — |
 | `fs` | `font-style` | `-fs:italic` | — |
 | `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
-| `hl` | `--hl` 変数のみ | — | `-hl_sm`, `-hl_md` |
+| `hl` | `--hl` 変数のみ | — | — |
 | `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l`, `-lts:xl` | — |
 | `ta` | `text-align` | `-ta:center`, `-ta:left`, `-ta:right` | — |
 | `td` | `text-decoration` | `-td:none` | — |
@@ -92,32 +92,33 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### 表示・可視性
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | `-d_sm`, `-d_md` |
+| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ lg |
 | `o` | `opacity` | `-o:0`, `-o:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
 | `v` | `visibility` | `-v:hidden` | — |
 | `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
 | `ov-x` | `overflow-x` | `-ov-x:clip`, `-ov-x:auto`, `-ov-x:scroll` | — |
 | `ov-y` | `overflow-y` | `-ov-y:clip`, `-ov-y:auto`, `-ov-y:scroll` | — |
-| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | `-ar_sm`, `-ar_md` |
+| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | ✔ |
 
 ### サイズ
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `w` | `width` | `-w:100%`, `-w:fit` | `-w_sm`, `-w_md` |
-| `h` | `height` | `-h:100%`, `-h:fit` | `-h_sm`, `-h_md` |
-| `min-w` | `min-width` | `-min-w:100%` | `-min-w_sm`, `-min-w_md` |
-| `max-w` | `max-width` | `-max-w:100%` | `-max-w_sm`, `-max-w_md` |
-| `min-h` | `min-height` | `-min-h:100%` | `-min-h_sm`, `-min-h_md` |
-| `max-h` | `max-height` | `-max-h:100%` | `-max-h_sm`, `-max-h_md` |
+| `w` | `width` | `-w:100%`, `-w:fit` | ✔ |
+| `h` | `height` | `-h:100%`, `-h:fit` | ✔ |
+| `min-w` | `min-width` | `-min-w:100%` | ✔ |
+| `max-w` | `max-width` | `-max-w:100%` | ✔ |
+| `min-h` | `min-height` | `-min-h:100%` | ✔ |
+| `max-h` | `max-height` | `-max-h:100%` | ✔ |
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
 | `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:bleed` | — |
 | `bsz` | `block-size` | — | — |
 | `min-bsz` | `min-block-size` | — | — |
 | `max-bsz` | `max-block-size` | — | — |
+| `contentSize` | `--contentSize` 変数のみ | `-contentSize:s`, `-contentSize:m`, `-contentSize:l`, `-contentSize:xl` | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
@@ -125,11 +126,15 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 → 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
 
+**`contentSize` について:**
+`--contentSize` 変数をセットする isVar タイプの Prop です。`is--wrapper` と組み合わせるとコンテンツ幅の上限となり、`set--bleed` と組み合わせると `--bleed` の計算基準値として使われます。
+プリセット値（`s`, `m`, `l`, `xl`）は `-contentSize:{value}` クラスを出力し、それ以外の任意値は `--contentSize: {value}` をスタイル属性として出力します。
+
 ### 背景
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bg` | `background` | — | `-bg_sm`, `-bg_md` |
+| `bg` | `background` | — | — |
 | `bgi` | `background-image` | — | — |
 | `bgr` | `background-repeat` | `-bgr:no-repeat` | — |
 | `bgp` | `background-position` | `-bgp:center` | — |
@@ -138,20 +143,20 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### カラー
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:inherit` | — |
 | `keycolor` | `--keycolor` 変数のみ | — | — |
 
-セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`  
+セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral`<br />
 パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`  
 キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
 
 ### 角丸
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | `-bdrs_sm`, `-bdrs_md` |
+| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | ✔ |
 | `bdrs-tl` | `border-top-left-radius` | — | — |
 | `bdrs-tr` | `border-top-right-radius` | — | — |
 | `bdrs-br` | `border-bottom-right-radius` | — | — |
@@ -163,17 +168,17 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 
 ### 影
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | `-bxsh_sm`, `-bxsh_md` |
+| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | ✔ |
 
-**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--var:bxsh` クラスを併用する。
+**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--bxsh` クラスを併用する。
 
 ### ポジション
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | — |
+| `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | ✔ |
 | `z` | `z-index` | `-z:-1`, `-z:0`, `-z:1`, `-z:99` | — |
 | `t` | `top` | `-t:0`, `-t:50%`, `-t:100%` | — |
 | `l` | `left` | `-l:0`, `-l:50%`, `-l:100%` | — |
@@ -182,86 +187,86 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | `i` | `inset` | `-i:0` | — |
 | `i-x` | `inset-inline` | — | — |
 | `i-y` | `inset-block` | — | — |
-| `i-x-s` | `inset-inline-start` | — | — |
-| `i-x-e` | `inset-inline-end` | — | — |
-| `i-y-s` | `inset-block-start` | — | — |
-| `i-y-e` | `inset-block-end` | — | — |
+| `i-s` | `inset-inline-start` | — | — |
+| `i-e` | `inset-inline-end` | — | — |
+| `i-bs` | `inset-block-start` | — | — |
+| `i-be` | `inset-block-end` | — | — |
 
 ### 余白 — Padding
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | `-p_sm`, `-p_md` |
-| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | `-px_sm`, `-px_md` |
-| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | `-py_sm`, `-py_md` |
-| `px-s` | `padding-inline-start` | — | `-px-s_sm`, `-px-s_md` |
-| `px-e` | `padding-inline-end` | — | `-px-e_sm`, `-px-e_md` |
-| `py-s` | `padding-block-start` | — | `-py-s_sm`, `-py-s_md` |
-| `py-e` | `padding-block-end` | — | `-py-e_sm`, `-py-e_md` |
-| `pl` | `padding-left` | — | `-pl_sm`, `-pl_md` |
-| `pr` | `padding-right` | — | `-pr_sm`, `-pr_md` |
-| `pt` | `padding-top` | — | `-pt_sm`, `-pt_md` |
-| `pb` | `padding-bottom` | — | `-pb_sm`, `-pb_md` |
+| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | ✔ |
+| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | ✔ |
+| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | ✔ |
+| `ps` | `padding-inline-start` | — | ✔ |
+| `pe` | `padding-inline-end` | — | ✔ |
+| `pbs` | `padding-block-start` | — | ✔ |
+| `pbe` | `padding-block-end` | — | ✔ |
+| `pl` | `padding-left` | — | — |
+| `pr` | `padding-right` | — | — |
+| `pt` | `padding-top` | — | — |
+| `pb` | `padding-bottom` | — | — |
 
 SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80`
 
 ### 余白 — Margin
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | `-m_sm`, `-m_md` |
-| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | `-mx_sm`, `-mx_md` |
-| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | `-my_sm`, `-my_md` |
-| `mx-s` | `margin-inline-start` | `-mx-s:auto` | `-mx-s_sm`, `-mx-s_md` |
-| `mx-e` | `margin-inline-end` | `-mx-e:auto` | `-mx-e_sm`, `-mx-e_md` |
-| `my-s` | `margin-block-start` | `-my-s:auto`, `-my-s:0`, `-my-s:5`, `-my-s:10`, `-my-s:20`, ... (SPACEトークン) | `-my-s_sm`, `-my-s_md` |
-| `my-e` | `margin-block-end` | `-my-e:auto` | `-my-e_sm`, `-my-e_md` |
-| `ml` | `margin-left` | — | `-ml_sm`, `-ml_md` |
-| `mr` | `margin-right` | — | `-mr_sm`, `-mr_md` |
-| `mt` | `margin-top` | — | `-mt_sm`, `-mt_md` |
-| `mb` | `margin-bottom` | — | `-mb_sm`, `-mb_md` |
+| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | ✔ |
+| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | ✔ |
+| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | ✔ |
+| `ms` | `margin-inline-start` | `-ms:auto` | ✔ |
+| `me` | `margin-inline-end` | `-me:auto` | ✔ |
+| `mbs` | `margin-block-start` | `-mbs:auto`, `-mbs:0`, `-mbs:5`, `-mbs:10`, `-mbs:20`, ... (SPACEトークン) | ✔ |
+| `mbe` | `margin-block-end` | `-mbe:auto` | ✔ |
+| `ml` | `margin-left` | — | — |
+| `mr` | `margin-right` | — | — |
+| `mt` | `margin-top` | — | — |
+| `mb` | `margin-bottom` | — | — |
 
 ### Gap
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | `-g_sm`, `-g_md` |
-| `cg` | `column-gap` | — | `-cg_sm`, `-cg_md` |
-| `rg` | `row-gap` | — | `-rg_sm`, `-rg_md` |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ lg |
+| `cg` | `column-gap` | — | — |
+| `rg` | `row-gap` | — | — |
 
 ### Flex
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `fxf` | `flex-flow` | — | — |
-| `fxw` | `flex-wrap` | `-fxw:wrap` | `-fxw_sm`, `-fxw_md` |
-| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | `-fxd_sm`, `-fxd_md` |
-| `fx` | `flex` | `-fx:1` | `-fx_sm`, `-fx_md` |
+| `fxw` | `flex-wrap` | `-fxw:wrap` | ✔ |
+| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | ✔ |
+| `fx` | `flex` | `-fx:1` | ✔ |
 | `fxg` | `flex-grow` | `-fxg:1` | — |
 | `fxsh` | `flex-shrink` | `-fxsh:0` | — |
-| `fxb` | `flex-basis` | — | `-fxb_sm`, `-fxb_md` |
+| `fxb` | `flex-basis` | — | ✔ |
 
 ### Grid
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `gt` | `grid-template` | — | `-gt_sm`, `-gt_md` |
-| `gta` | `grid-template-areas` | — | `-gta_sm`, `-gta_md` |
-| `gtc` | `grid-template-columns` | `-gtc:subgrid` | `-gtc_sm`, `-gtc_md` |
-| `gtr` | `grid-template-rows` | `-gtr:subgrid` | `-gtr_sm`, `-gtr_md` |
-| `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | `-gaf_sm`, `-gaf_md` |
+| `gt` | `grid-template` | — | ✔ |
+| `gta` | `grid-template-areas` | — | ✔ lg |
+| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ lg |
+| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ lg |
+| `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | ✔ |
 | `gac` | `grid-auto-columns` | — | — |
 | `gar` | `grid-auto-rows` | — | — |
-| `cols` | `--cols` 変数 | — | `-cols_sm`, `-cols_md` |
-| `rows` | `--rows` 変数 | — | `-rows_sm`, `-rows_md` |
+| `cols` | `--cols` 変数 | — | ✔ lg |
+| `rows` | `--rows` 変数 | — | ✔ |
 
 ### Grid アイテム
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ga` | `grid-area` | `-ga:1/1` | `-ga_sm`, `-ga_md` |
-| `gc` | `grid-column` | `-gc:1/-1` | `-gc_sm`, `-gc_md` |
-| `gr` | `grid-row` | `-gr:1/-1` | `-gr_sm`, `-gr_md` |
+| `ga` | `grid-area` | `-ga:1/1` | ✔ lg |
+| `gc` | `grid-column` | `-gc:1/-1` | ✔ lg |
+| `gr` | `grid-row` | `-gr:1/-1` | ✔ lg |
 | `gcs` | `grid-column-start` | — | — |
 | `gce` | `grid-column-end` | — | — |
 | `grs` | `grid-row-start` | — | — |
@@ -269,18 +274,18 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 
 ### 配置（Places）
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
-| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | `-ai_sm`, `-ai_md` |
-| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | `-ac_sm`, `-ac_md` |
-| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | `-ji_sm`, `-ji_md` |
-| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | `-jc_sm`, `-jc_md` |
+| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | ✔ |
+| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | ✔ |
+| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | ✔ |
+| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | ✔ |
 | `pi` | `place-items` | `-pi:start`, `-pi:center`, `-pi:end` | — |
 | `pc` | `place-content` | `-pc:start`, `-pc:center`, `-pc:end` | — |
 | `aslf` | `align-self` | `-aslf:start`, `-aslf:center`, `-aslf:end`, `-aslf:stretch` | — |
 | `jslf` | `justify-self` | `-jslf:start`, `-jslf:center`, `-jslf:end`, `-jslf:stretch` | — |
 | `pslf` | `place-self` | `-pslf:start`, `-pslf:center`, `-pslf:end` | — |
-| `order` | `order` | `-order:0`, `-order:-1`, `-order:1` | — |
+| `order` | `order` | `-order:0`, `-order:-1`, `-order:1` | ✔ |
 
 **コンポーネント用ショートハンド:** `ai`, `ac`, `ji`, `jc`, `aslf`, `jslf` では `s`→`start`, `e`→`end`, `c`→`center`, `fs`→`flex-start`, `fe`→`flex-end` のショートハンドが使えます。
 
@@ -294,10 +299,10 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 | Prop | CSS プロパティ / 変数 | 主なクラス |
 |------|-----------------------|------------|
-| `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|x-s\|x-e\|y-s\|y-e\|t\|b\|l\|r}`, `-bd:none` |
+| `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|s\|e\|bs\|be\|t\|b\|l\|r}`, `-bd:none` |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` |
 | `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` |
-| `bdw` | `--bdw` | BP クラス: `-bdw_sm`, `-bdw_md` |
+| `bdw` | `--bdw` | BP クラス: ✔（`-bdw_sm` / `-bdw_md`） |
 
 → 詳細（方向ごとのスタイル指定、BP での方向切り替え等）は [property-class/bd.md](./property-class/bd.md) 参照
 
@@ -309,9 +314,9 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 |------|------|---------|
 | `-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
-| `-hov:in:{preset}` | 親の `set--var:hov` を起点に子のスタイルを変化させる | 親に `set--var:hov` が必要 |
+| `-hov:in:{preset}` | 親の `set--hov` を起点に子のスタイルを変化させる | 親に `set--hov` が必要 |
 
-**標準プリセット:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:neutral`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
+**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
 
 **`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。
 
@@ -319,14 +324,14 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 ## その他
 
-| Prop | CSS プロパティ | プリセット値クラス | BP クラス |
+| Prop | CSS プロパティ | プリセット値クラス | BP |
 |------|--------------|-------------|-----|
 | `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
 | `whs` | `white-space` | `-whs:nowrap` | — |
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
 | `iso` | `isolation` | `-iso:isolate` | — |
-| `wm` | `writing-mode` | `-wm:vertical-rl` | `-wm_sm`, `-wm_md` |
+| `wm` | `writing-mode` | `-wm:vertical-rl` | ✔ |
 
 
 ## 値の省略形（例外一覧）
@@ -374,4 +379,3 @@ Property Class をコードベース全体で一括修正する場合、同じ P
 | HTML / className — BP対応・カスタム値 | `-p` / `-p_sm` / `-p_md` |
 | JSX Props | `p="20"` / `p={20}` / `p={[20, 30]}` |
 | getLismProps オブジェクト | `{ p: '20' }` / `{ p: 20 }` |
-

package/dist/data/guides/responsive.md

@@ -28,7 +28,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 | `md` | 800px | md 以上 |
 | (`lg`) | 1120px | lg 以上 |
 
-**標準サポートは `sm` / `md` のみ。** `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+**レスポンシブ対応の Property Class は、基本的に標準では `sm` / `md` まで対応。** ただし `d`（display）/ `g`（gap）/ `cols` / グリッド系（`gta` `gtc` `gtr` `ga` `gc` `gr`）など、大枠のレイアウト構造に関わる一部のプロパティは `lg` まで対応。それ以外のプロパティで `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
 
 例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
 

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

@@ -1,7 +1,7 @@
 # `set--` クラス
 
 `@layer lism-base` に属し、HTML 要素の基礎スタイリングまたは CSS 変数のセットアップだけを行うクラス群です。
-HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="var:bxsh"` 等）で指定します。
+HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="revert"`, `set="bxsh"` 等）で指定します。
 
 `set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
 
@@ -10,18 +10,19 @@ set-- は目的別に 2 カテゴリに分かれます。
 | カテゴリ | 用途 | クラス |
 |---------|------|--------|
 | 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
-| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` / `set--var:s` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--bxsh` / `set--hov` / `set--bdrsInner` / `set--bleed` / `set--s` |
 
-`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`、`--s*` → `var:s`）。
+`set--{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `bxsh`、`--_isHov` / `--_notHov` → `hov`、`--bdrs--inner` → `bdrsInner`、`--s*` → `s`）。
 
 ## TOC
 
 - [`set--plain`](#set--plain)
 - [`set--revert`](#set--revert)
-- [`set--var:bxsh`](#set--varbxsh)
-- [`set--var:hov`](#set--varhov)
-- [`set--var:bdrsInner`](#set--varbdrsinner)
-- [`set--var:s`](#set--vars)
+- [`set--bxsh`](#set--bxsh)
+- [`set--hov`](#set--hov)
+- [`set--bdrsInner`](#set--bdrsinner)
+- [`set--bleed`](#set--bleed)
+- [`set--s`](#set--s)
 
 [詳細](https://lism-css.com/docs/set-class.md)
 
@@ -35,10 +36,11 @@ set-- は目的別に 2 カテゴリに分かれます。
 |--------|---------------|
 | `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.scss) |
 | `set--revert` | [`_revert.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_revert.scss) |
-| `set--var:bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
-| `set--var:hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
-| `set--var:bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
-| `set--var:s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
+| `set--bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
+| `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
+| `set--bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
+| `set--bleed` | [`_bleed.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bleed.scss) |
+| `set--s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
 
 ---
 
@@ -80,24 +82,24 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 </Lism>
 ```
 
-## `set--var:bxsh`
+## `set--bxsh`
 
 `SHADOW` トークン変数（`--bxsh--{N}`）を再計算するためのクラスです。`:root` で定義される `--shc`（影の色）を特定要素で上書きしたい時に利用します。
 
 使用例:
 ```html
-<div class="l--box set--var:bxsh -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
+<div class="l--box set--bxsh -bxsh:20" style="--shc: hsl(200 50% 50% / 20%)">...</div>
 ```
 ```jsx
-<Box set="var:bxsh" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
+<Box set="bxsh" bxsh='20' style={{ '--shc': 'hsl(200 50% 50% / 20%)' }}>...</Box>
 ```
 
 
-## `set--var:hov`
+## `set--hov`
 
 ホバー状態の判定変数（`--_notHov`, `--_isHov`）を次のようにセットします。主に**子要素のホバースタイルを制御する**時に活用します。
 
-- `--_isHov`は非hover時（かつ非focus-within時）にのみ空白定義さます。
+- `--_isHov`は非hover時(かつ非focus-within時)にのみ空白定義さます。
 - `--_notHov`は逆に、hover時またはfocus-within時に空白定義されます。
 
 この空変数トリックにより、次のような書き方ができます。
@@ -120,12 +122,12 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 }
 ```
 
-さらに、親要素に`set--var:hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
+さらに、親要素に`set--hov`を付与してその子要素で`--_isHov`変数と`--_notHov`変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。
 
 例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:in:zoom`クラスが標準で用意されています。
 
 ```html
-<a href="###" class="l--frame set--var:hov is--boxLink -ar:21/9 -ov:hidden">
+<a href="###" class="l--frame set--hov is--boxLink -ar:21/9 -ov:hidden">
   <img class="has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
   <div class="is--layer -bgc" style="--c: #fff; --bgc: rgb(0 0 0 / 50%)"></div>
   <div class="l--center is--layer -c" style="--c: #fff;">
@@ -142,38 +144,73 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 ```
 
 
-## `set--var:bdrsInner`
+## `set--bdrsInner`
 
 親要素の角丸(`--bdrs`)とPadding(`--p`)の値から、その内側の角丸（`--bdrs--inner`）を自動計算するためのクラスです。
-親要素に`set--var:bdrsInner`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
+親要素に`set--bdrsInner`をクラスをセットし、子要素では`-bdrs:inner`をセットすることで、計算された`--bdrs--inner`をセットすることができます。
 
 （親要素では`bdrs`と`p`の指定が必須となります。）
 
 使用例:
-```html "set--var:bdrsInner" "-bdrs:inner"
-<div class="set--var:bdrsInner -p:15 -bdrs:40 -bd">
+```html "set--bdrsInner" "-bdrs:inner"
+<div class="set--bdrsInner -p:15 -bdrs:40 -bd">
   <div class="-bdrs:inner">...</div>
 </div>
 ```
 ```jsx
-<Lism set="var:bdrsInner" p="15" bdrs="40" bd>
+<Lism set="bdrsInner" p="15" bdrs="40" bd>
   <Lism bdrs="inner">...</Lism>
 </Lism>
 ```
 
 
-## `set--var:s`
+## `set--bleed`
+
+片側ブリードレイアウトを組むのに便利な `--bleed` 変数を生成するクラスです。コンテンツ幅（`--contentSize`）の外側の余白量がセットされます。ただし、ガター幅（`--gutter` / `--gutter--base`）を下限とし、これより狭くなる場合はガター幅を返します。
+
+`--contentSize` が未指定の場合は `--sz--m` を基準値として使用します。
+
+`padding-inline: var(--bleed)` を子要素に当てれば、その要素だけコンテンツ幅の外側ガターまで広げられるため、画像とテキストを並べた片側ブリードの 2 カラムなどに活用できます。
+
+使用例（`Columns` の片側だけブリードさせる）:
+```html
+<div class="is--container">
+  <div class="l--columns set--bleed -contentSize:s -cols_sm -g:0 -g_sm -ai:center" style="--cols:1;--cols_sm:2;--g_sm:var(--s10)">
+    <div class="l--box has--gutter -ps -py:30 -py_sm" style="--ps:var(--bleed);--py_sm:0">
+      <p>...</p>
+    </div>
+    <div class="l--frame -bdrs:inner -ar:3/2">
+      <img src="..." alt="" />
+    </div>
+  </div>
+</div>
+```
+```jsx
+<Container>
+  <Columns set="bleed" contentSize="s" cols={[1, 2]} g={['0', '10']} ai="center">
+    <Box hasGutter ps="var(--bleed)" py={["30", "0"]}>
+      <p>...</p>
+    </Box>
+    <Frame bdrs="inner" ar="3/2">
+      <img src="..." alt="" />
+    </Frame>
+  </Columns>
+</Container>
+```
+
+
+## `set--s`
 
 余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
 
-詳細なスケールと使い方は[tokens.mdの`set--var:s`ユーティリティ](./tokens.md#set--vars-ユーティリティ)を参照してください。
+詳細なスケールと使い方は[tokens.mdの`set--s`ユーティリティ](./tokens.md#set--s-ユーティリティ)を参照してください。
 
 使用例:
 
 ```html
-<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+<button class="set--s -fz:s -py:10 -px:20">...</button>
 ```
 
 ```jsx
-<Button set="var:s" fz="s" py="10" px="20">...</Button>
+<Button set="s" fz="s" py="10" px="20">...</Button>
 ```