lism-css 0.20.0 → 0.22.0

package/dist/lib/getLismProps.js

@@ -1,22 +1,22 @@
-import { TRAITS as C, PROPS as c } from "../config/index.js";
-import E from "./getLayoutProps.js";
-import V from "./getAtomicProps.js";
-import g from "./isPresetValue.js";
+import { TRAITS as P, PROPS as d } from "../config/index.js";
+import j from "./getLayoutProps.js";
+import k from "./getAtomicProps.js";
+import E from "./isPresetValue.js";
 import w from "./isTokenValue.js";
-import $ from "./getUtilKey.js";
-import d from "./getMaybeCssVar.js";
+import g from "./getUtilKey.js";
+import C from "./getMaybeCssVar.js";
 import x from "./getBpData.js";
-import _ from "./warnUnsupportedBp.js";
-import A from "./helper/atts.js";
-import U from "./helper/isEmptyObj.js";
+import z from "./warnUnsupportedBp.js";
+import _ from "./helper/atts.js";
+import A from "./helper/isEmptyObj.js";
 import S from "./helper/filterEmptyObj.js";
 import b from "./helper/mergeSet.js";
-import z from "./helper/splitWithComma.js";
-const L = (l) => {
-  const s = c[l];
-  return s && s?.token || "";
+import U from "./helper/splitWithComma.js";
+const W = (n) => {
+  const t = d[n];
+  return t && t?.token || "";
 };
-class T {
+class L {
   // 最終出力 className
   className = "";
   primitiveClass = [];
@@ -27,28 +27,25 @@ class T {
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(s) {
-    const { forwardedRef: t, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: a = {}, ...u } = s;
-    this.styles = { ...r }, this._propConfig = { ...a }, o && o.length && (this.primitiveClass = [...o]), U(u) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, i);
+  constructor(t) {
+    const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: u = {}, ...h } = t;
+    this.styles = { ...r }, this._propConfig = { ...u }, o && o.length && (this.primitiveClass = [...o]), A(h) || (this.attrs = { ...h }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
   // 出力順: [className&class] [primitiveClass] [setClasses] [traitClasses] [uClasses] [propClasses]
   // className と class が両方来た場合は両方マージする（atts 内で重複は除去される）。
-  buildClassName(s, t) {
-    return A(s, t, this.primitiveClass, this.setClasses, this.traitClasses, this.uClasses, this.propClasses);
-  }
-  analyzeTrait(s, t) {
-    const { className: i, preset: e, presetClass: o, customVar: r, tokenKey: a } = s;
-    t === !0 ? this.traitClasses.push(i) : e && g(e, t) ? this.traitClasses.push(`${i} ${o}:${String(t)}`) : t && (this.traitClasses.push(i), a && r && this.addStyle(r, d(t, a)));
+  buildClassName(t, s) {
+    return _(t, s, this.primitiveClass, this.setClasses, this.traitClasses, this.uClasses, this.propClasses);
   }
   // prop解析
   analyzeProps() {
-    const s = this.extractProp("set"), t = this.extractProp("util");
-    b(void 0, s).forEach((i) => this.addSet(i)), b(void 0, t).forEach((i) => this.addUtil(`u--${i}`)), Object.keys(this.attrs).forEach((i) => {
-      if (Object.hasOwn(C, i)) {
-        const e = this.extractProp(i), o = C[i];
-        typeof o == "string" ? e && this.traitClasses.push(o) : this.analyzeTrait(o, e);
-      } else if (Object.hasOwn(c, i)) {
+    this.normalizeIsWrapper();
+    const t = this.extractProp("set"), s = this.extractProp("util");
+    b(void 0, t).forEach((i) => this.addSet(i)), b(void 0, s).forEach((i) => this.addUtil(`u--${i}`)), Object.keys(this.attrs).forEach((i) => {
+      if (Object.hasOwn(P, i)) {
+        const e = this.extractProp(i), o = P[i];
+        e && this.traitClasses.push(o);
+      } else if (Object.hasOwn(d, i)) {
         const e = this.attrs[i];
         delete this.attrs[i], this.analyzeLismProp(i, e);
       } else if (i === "hov") {
@@ -60,91 +57,96 @@ class T {
       }
     });
   }
+  // isWrapper="s" 形式のサイズ指定は contentSize Prop に寄せる。
+  normalizeIsWrapper() {
+    const t = this.attrs.isWrapper;
+    t == null || t === !1 || t === "" || t !== !0 && (this.attrs.contentSize === void 0 && (this.attrs.contentSize = t), this.attrs.isWrapper = !0);
+  }
   // Lism Prop 解析
-  analyzeLismProp(s, t) {
-    if (t == null) return;
-    let i = c[s] || null;
+  analyzeLismProp(t, s) {
+    if (s == null) return;
+    let i = d[t] || null;
     if (i === null) return;
-    this._propConfig?.[s] && (i = Object.assign({}, i, this._propConfig[s]));
-    const { base: e, ...o } = x(t);
-    process.env.NODE_ENV !== "production" && !i.bp && Object.keys(o).length > 0 && _(s), this.setAttrs(s, e, i), Object.keys(o).forEach((r) => {
-      i && this.setAttrs(s, o[r], i, r);
+    this._propConfig?.[t] && (i = Object.assign({}, i, this._propConfig[t]));
+    const { base: e, ...o } = x(s);
+    process.env.NODE_ENV !== "production" && !i.bp && Object.keys(o).length > 0 && z(t), this.setAttrs(t, e, i), Object.keys(o).forEach((r) => {
+      i && this.setAttrs(t, o[r], i, r);
     });
   }
-  addSet(s) {
-    this.setClasses.push(`set--${s}`);
+  addSet(t) {
+    this.setClasses.push(`set--${t}`);
   }
-  addUtil(s) {
-    this.uClasses.push(s);
+  addUtil(t) {
+    this.uClasses.push(t);
   }
-  addUtils(s) {
-    this.uClasses.push(...s);
+  addUtils(t) {
+    this.uClasses.push(...t);
   }
-  addProp(s) {
-    this.propClasses.push(s);
+  addProp(t) {
+    this.propClasses.push(t);
   }
-  addStyle(s, t) {
-    this.styles[s] = t;
+  addStyle(t, s) {
+    this.styles[t] = s;
   }
-  addStyles(s) {
-    this.styles = { ...this.styles, ...s };
+  addStyles(t) {
+    this.styles = { ...this.styles, ...t };
   }
-  addAttrs(s) {
-    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
+  addAttrs(t) {
+    this.addStyles(t.styles || {}), this.addUtils(t.utils || []);
   }
-  extractProp(s) {
-    const t = this.attrs[s];
-    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
+  extractProp(t) {
+    const s = this.attrs[t];
+    return this.attrs[t] === void 0 ? null : (delete this.attrs[t], s);
   }
-  extractProps(s) {
-    const t = {};
-    return s.forEach((i) => {
-      this.attrs[i] !== void 0 && (t[i] = this.attrs[i], delete this.attrs[i]);
-    }), t;
+  extractProps(t) {
+    const s = {};
+    return t.forEach((i) => {
+      this.attrs[i] !== void 0 && (s[i] = this.attrs[i], delete this.attrs[i]);
+    }), s;
   }
   // propertyクラスを追加するか、styleにセットするかの分岐処理 @base
   // 値が null, undefined, '', false の時はスキップ
-  setAttrs(s, t, i = {}, e = "") {
-    if (t == null || t === "" || t === !1) return;
-    let o = `--${s}`, r = `-${String(i.utilKey || s)}`;
-    if (e && (o = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
-      this.addProp(`${r}:${t.replace(":", "")}`);
+  setAttrs(t, s, i = {}, e = "") {
+    if (s == null || s === "" || s === !1) return;
+    let o = `--${t}`, r = `-${String(i.utilKey || t)}`;
+    if (e && (o = `--${t}_${e}`, r += `_${e}`), typeof s == "string" && s.startsWith(":")) {
+      this.addProp(`${r}:${s.replace(":", "")}`);
       return;
     }
     if (!e) {
-      const { presets: p, tokenClass: j, utils: m, shorthands: P } = i;
-      if (p && g(p, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addProp(`${r}:${h}`);
+      const { presets: p, tokenClass: V, utils: y, shorthands: m } = i;
+      if (p && E(p, s)) {
+        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        f && this.addProp(`${r}:${f}`);
         return;
       }
-      if (j && i.token && w(i.token, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addProp(`${r}:${h}`);
+      if (V && i.token && w(i.token, s)) {
+        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        f && this.addProp(`${r}:${f}`);
         return;
       }
-      let f = "";
-      if (m && typeof t == "string" && (f = $(m, t)), !f && P && typeof t == "string" && (f = $(P, t, !0)), f) {
-        this.addProp(`${r}:${f}`);
+      let l = "";
+      if (y && typeof s == "string" && (l = g(y, s)), !l && m && typeof s == "string" && (l = g(m, s, !0)), l) {
+        this.addProp(`${r}:${l}`);
         return;
       }
     }
-    if (t === !0) {
+    if (s === !0) {
       this.addProp(r);
       return;
     }
-    const { prop: a, isVar: u, alwaysVar: O, token: y, bp: k } = i;
-    let n;
-    if (y && (typeof t == "string" || typeof t == "number") ? n = d(t, y) : typeof t == "string" || typeof t == "number" ? n = t : n = JSON.stringify(t), !e) {
-      if (u) {
-        this.addStyle(`--${s}`, n);
+    const { prop: u, isVar: h, alwaysVar: $, token: c, bp: O } = i;
+    let a;
+    if (c && (typeof s == "string" || typeof s == "number") ? a = C(s, c) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
+      if (h) {
+        this.addStyle(`--${t}`, a);
         return;
-      } else if (!k && !O) {
-        this.addStyle(a, n);
+      } else if (!O && !$) {
+        this.addStyle(u, a);
         return;
       }
     }
-    this.addProp(r), this.addStyle(o, n);
+    this.addProp(r), this.addStyle(o, a);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -159,26 +161,26 @@ class T {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(s) {
-    s && (s === !0 ? this.addProp("-hov") : typeof s == "string" ? z(s).forEach((t) => {
-      this.addProp(`-hov:${t}`);
-    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
-      const i = s[t];
+  setHovProps(t) {
+    t && (t === !0 ? this.addProp("-hov") : typeof t == "string" ? U(t).forEach((s) => {
+      this.addProp(`-hov:${s}`);
+    }) : typeof t == "object" && Object.keys(t).forEach((s) => {
+      const i = t[s];
       if (!(i == null || i === "" || i === !1)) {
         if (i === !0)
-          this.addProp(`-hov:${t}`);
+          this.addProp(`-hov:${s}`);
         else if (typeof i == "string" || typeof i == "number") {
-          const e = d(i, L(t));
-          this.addProp(`-hov:-${t}`), this.addStyle(`--hov-${t}`, e);
+          const e = C(i, W(s));
+          this.addProp(`-hov:-${s}`), this.addStyle(`--hov-${s}`, e);
         }
       }
     }));
   }
 }
-function D(l) {
-  if (Object.keys(l).length === 0)
+function D(n) {
+  if (Object.keys(n).length === 0)
     return {};
-  const { atomic: s, layout: t, ...i } = l, e = V(s, i), o = E(t, e), r = new T(o);
+  const { atomic: t, layout: s, ...i } = n, e = k(t, i), o = j(s, e), r = new L(o);
   return {
     ...S({
       className: r.className,
@@ -189,6 +191,6 @@ function D(l) {
   };
 }
 export {
-  T as LismPropsData,
+  L as LismPropsData,
   D as default
 };

package/dist/lib/types/LayoutProps.d.ts

@@ -35,7 +35,7 @@ export interface FlowLayoutProps {
 }
 export interface AutoColumnsProps {
     layout: 'autoColumns';
-    autoFill?: boolean;
+    autoFit?: boolean;
 }
 export interface WithSideProps {
     layout: 'withSide';

package/dist/lib/types/TraitProps.d.ts

@@ -1,29 +1,28 @@
 import { TRAITS } from '../../../config/index';
-import { WithArbitraryString, ArrayElement } from './utils';
+import { PropValueTypes } from './PropValueTypes';
+import { WithArbitraryString } from './utils';
 /**
  * config/index.ts から TRAITS の型を取得
  * objDeepMerge の DeepMergeResult 型により literal types が保持される
  */
 type TraitsConfig = typeof TRAITS;
-/** preset を持つ Trait の値の型を抽出 */
-type PresetElement<T> = T extends {
-    preset: readonly unknown[];
-} ? ArrayElement<T['preset']> : never;
 /**
  * Trait 設定から Props の値の型を抽出するユーティリティ型
  */
-type ExtractTraitValue<T> = T extends string ? boolean : T extends {
-    preset: readonly unknown[];
-} ? WithArbitraryString<PresetElement<T>> | boolean : never;
+type ExtractTraitValue<T> = T extends string ? boolean : never;
+type GeneratedTraitProps = {
+    [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
+};
+type ContentSizeStringValue = Extract<NonNullable<PropValueTypes['contentSize']>, string>;
 /**
  * config/index.ts の TRAITS から自動生成される Trait Props の型
  * config/index.ts の TRAITS に新しいトレイトを追加すると自動的に反映される
  */
-export type TraitProps = {
-    [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
+export type TraitProps = Omit<GeneratedTraitProps, 'isWrapper'> & {
+    isWrapper?: boolean | ContentSizeStringValue;
 };
 /** set prop で使われるプリセット値（エディタ補完用） */
-type SetPreset = 'plain' | 'revert' | 'var:hov' | 'var:bxsh' | 'var:bdrsInner' | 'var:s';
+type SetPreset = 'plain' | 'revert' | 'hov' | 'bxsh' | 'bdrsInner' | 'bleed' | 's';
 /**
  * set prop の値の型。プリセット値がサジェストされつつ、任意の文字列も受け付ける。
  *
@@ -34,7 +33,7 @@ type SetPreset = 'plain' | 'revert' | 'var:hov' | 'var:bxsh' | 'var:bdrsInner' |
  */
 export type SetPropValue = WithArbitraryString<SetPreset> | WithArbitraryString<SetPreset>[];
 /** util prop で使われるプリセット値（既知の `u--` クラス名・エディタ補完用） */
-type UtilPreset = 'cbox' | 'trim' | 'trimAll' | 'srOnly' | 'clipText' | 'divide' | 'cells';
+type UtilPreset = 'cbox' | 'trim' | 'trimAll' | 'srOnly' | 'clipText' | 'divide' | 'enclose';
 /**
  * util prop の値の型。既知の `u--` クラス名がサジェストされつつ、任意の文字列も受け付ける。
  *

package/dist/lib/types/allowedTags.d.ts

@@ -1,6 +1,6 @@
 export type GroupAllowedTag = 'div' | 'section' | 'article' | 'figure' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'fieldset' | 'hgroup';
 export type TextAllowedTag = 'p' | 'div' | 'blockquote' | 'address' | 'figcaption' | 'pre';
-export type InlineAllowedTag = 'span' | 'em' | 'strong' | 'small' | 'code' | 'time' | 'i' | 'b' | 'mark' | 'abbr' | 'cite' | 'kbd';
+export type InlineAllowedTag = 'span' | 'em' | 'strong' | 'small' | 'code' | 'time' | 'i' | 'b' | 'mark' | 'abbr' | 'cite' | 'kbd' | 'label';
 export type ListAllowedTag = 'ul' | 'ol' | 'dl';
 export type ListItemAllowedTag = 'li' | 'dt' | 'dd';
 export type MediaAllowedTag = 'img' | 'video' | 'iframe' | 'picture';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Lism CSS is a layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",

package/packages/astro/state/Wrapper/Wrapper.astro

@@ -1,15 +1,9 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../../types';
-import type { LismProps } from 'lism-css/lib/getLismProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
-  AstroLismBaseProps & {
-    contentSize?: LismProps['isWrapper'];
-  };
-
-const { contentSize = true, ...props } = Astro.props;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 ---
 
-<Lism isWrapper={contentSize} {...props}><slot /></Lism>
+<Lism isWrapper {...Astro.props}><slot /></Lism>

package/src/scss/_prop-config.scss

@@ -201,6 +201,16 @@ $props: (
     ),
     bp: 1,
   ),
+  'contentSize': (
+    prop: '--contentSize',
+    utilities: (
+      's': 'var(--sz--s)',
+      'm': 'var(--sz--m)',
+      'l': 'var(--sz--l)',
+      'xl': 'var(--sz--xl)',
+    ),
+    isVar: 1,
+  ),
   'max-sz': (
     prop: 'max-inline-size',
     utilities: (
@@ -332,6 +342,7 @@ $props: (
       'relative': 'relative',
       'absolute': 'absolute',
     ),
+    bp: 1,
   ),
   'z': (
     prop: 'z-index',
@@ -777,6 +788,7 @@ $props: (
       '1': '1',
       '-1': '-1',
     ),
+    bp: 1,
   ),
   'ovw': (
     prop: 'overflow-wrap',

package/src/scss/base/_html.scss

@@ -8,7 +8,9 @@ body {
   letter-spacing: var(--lts--base);
   background-color: var(--base);
   color: var(--text);
-  text-underline-offset: var(--under-offset, 0.25em);
+
+  text-underline-offset: 0.125em;
+  tab-size: 4;
 }
 
 /* --------------------------------------------------
@@ -120,24 +122,9 @@ dd + dt {
 /* --------------------------------------------------
   table
 -------------------------------------------------- */
-table {
-  --td-c: inherit;
-  --td-bgc: transparent;
-  --td-p: var(--s10) var(--s15);
-  --td-min-sz: initial;
-}
-td {
-  color: var(--td-c);
-  background-color: var(--td-bgc);
-  padding: var(--td-p);
-  min-inline-size: var(--td-min-sz);
-}
+td,
 th {
-  // デフォルト: tdと同じスタイル
-  color: var(--th-c, var(--td-c));
-  background-color: var(--th-bgc, var(--td-bgc));
-  padding: var(--th-p, var(--td-p));
-  min-inline-size: var(--th-min-sz, var(--td-min-sz));
+  padding: var(--cells-p, 0.625em 0.875em);
 }
 
 /* --------------------------------------------------
@@ -151,8 +138,7 @@ select,
   // フォーム系コントロールの最低限の見た目（テーマ差し替えは --controls-*）
   background-color: var(--controls-bgc, var(--base-2));
   border: solid 1px var(--controls-bdc, var(--divider));
-  padding: var(--controls-p, var(--s5) var(--s10));
-  border-radius: var(--controls-bdrs, var(--bdrs--10));
+  padding: var(--controls-p, 0.25em 0.5em);
 }
 
 :disabled {

package/src/scss/base/set/_bdrsInner.scss

@@ -1,3 +1,3 @@
-.set--var\:bdrsInner {
+.set--bdrsInner {
   --bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px));
 }

package/src/scss/base/set/_bleed.scss

@@ -0,0 +1,3 @@
+.set--bleed {
+  --bleed: max(var(--gutter, var(--gutter--base)), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
+}

package/src/scss/base/set/_hov.scss

@@ -1,16 +1,16 @@
 @media (any-hover: hover) {
-  .set--var\:hov:hover {
+  .set--hov:hover {
     --_notHov: ;
   }
-  .set--var\:hov:not(:is(:hover, :focus-within)) {
+  .set--hov:not(:is(:hover, :focus-within)) {
     --_isHov: ;
   }
 }
 @media (any-hover: none) {
-  .set--var\:hov {
+  .set--hov {
     --_isHov: ;
   }
 }
-.set--var\:hov:is(:focus-visible, :focus-within) {
+.set--hov:is(:focus-visible, :focus-within) {
   --_notHov: ;
 }

package/src/scss/base/set/index.scss

@@ -1,5 +1,6 @@
 // @forward './bp'; // Note: set--bp は無効化中。ファイルは参考用に残す
 @forward './hov';
 @forward './bdrsInner';
+@forward './bleed';
 @forward './plain';
 @forward './revert';

package/src/scss/base/tokens/_shadow.scss

@@ -1,7 +1,7 @@
 /* --------------------------------------------------
   shadow
     Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
-    要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
+    要素ごとに --shc を上書きできるよう、再セット用の set--bxsh クラスを併用する。
 -------------------------------------------------- */
 :root {
   --shc: var(--shadow);
@@ -14,7 +14,7 @@
 }
 
 :root,
-.set--var\:bxsh {
+.set--bxsh {
   --bxsh--10: var(--shsz--10) var(--shc);
   --bxsh--20: var(--shsz--20) var(--shc);
   --bxsh--30: var(--shsz--30) var(--shc);

package/src/scss/base/tokens/_space.scss

@@ -1,9 +1,9 @@
 /* --------------------------------------------------
   SPACEトークンの定義
-    Memo: set--var:s で、SPACEトークンを再定義できる。
+    Memo: set--s で、SPACEトークンを再定義できる。
 -------------------------------------------------- */
 :root,
-.set--var\:s {
+.set--s {
   /**
    * 余白: フィボナッチ数列をベースに設計する
    */
@@ -24,7 +24,7 @@
   --s25: calc(var(--s-unit) * 2.5); // ≒ 20px
   --s35: calc(var(--s-unit) * 4); // ≒ 32px
 }
-.set--var\:s {
+.set--s {
   // 何も指定しなければ em 単位に変換する
   --s-unit: 0.5em;
 }

package/src/scss/base/tokens/_tokens.scss

@@ -93,11 +93,11 @@
    */
   --ar--og: 1.91/1;
 
-  /** 
-   * サイトコンテンツの左右につける余白量
+  /**
+   * サイトコンテンツの左右につける余白量の基準値
    *   Memo: -max-sz\:full などからも参照されるのでrootで定義している
    */
-  --gutter-size: var(--s30);
+  --gutter--base: var(--s30);
 
   /** 
    * コンテンツ間の余白バリエーションを定義

package/src/scss/primitives/layout/_autoColumns.scss

@@ -3,7 +3,7 @@
 */
 .l--autoColumns {
   --cols: 20rem;
-  --autoMode: auto-fit;
+  --autoMode: auto-fill;
   display: grid;
   grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
 }

package/src/scss/props/_hover.scss

@@ -32,7 +32,7 @@
 }
 
 // ----------------------------------------
-// .-hov\:in （set--var:hov 連動の consumer class）
+// .-hov\:in （set--hov 連動の consumer class）
 // ----------------------------------------
 
 .-hov\:in\:hide {

package/src/scss/props/_size.scss

@@ -3,8 +3,8 @@
 
   :where(.has--gutter) > & {
     inline-size: auto; // is--wrapper > * の inline-size: 100% を打ち消し、負 margin による hang を効かせる
-    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/src/scss/reset.scss

@@ -38,9 +38,6 @@
     line-break: strict; /* 禁則処理を厳格に適用 */
     overflow-wrap: anywhere; /* 収まらない場合に折り返す */
 
-    /* デフォルトの 8 はでかすぎる */
-    tab-size: 4;
-
     /* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述） */
     overflow-x: clip;
 

package/src/scss/trait/has/_gutter.scss

@@ -1,3 +1,4 @@
 .has--gutter {
-  padding-inline: var(--gutter-size);
+  --gutter: var(--gutter--base);
+  padding-inline: var(--gutter);
 }

package/src/scss/trait/is/_container.scss

@@ -10,7 +10,7 @@
 }
 .is--container.has--gutter > * {
   // has--gutterがある場合はその分を加算
-  --sz--bleed: calc(100cqi + var(--gutter-size) * 2);
+  --sz--bleed: calc(100cqi + var(--gutter) * 2);
 }
 .is--container .is--container > * {
   // --sz--bleed は一番先祖(最外側) の is--container で値をセットしたらあとは引き継ぐだけ

package/src/scss/trait/is/_wrapper.scss

@@ -8,11 +8,4 @@
   }
 }
 
-// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
-.-contentSize\:s {
-  --contentSize: var(--sz--s);
-}
-
-.-contentSize\:l {
-  --contentSize: var(--sz--l);
-}
+// Memo: .-contentSize:s / m / l / xl は contentSize Prop の auto-generated 出力（src/scss/_prop-config.scss 経由）から自動的に props 層に出力される。

package/src/scss/utility/_divide.scss

@@ -1,5 +1,5 @@
 .u--divide,
-.u--cells {
+.u--enclose {
   --bdw: 1px;
   --bdc: var(--divider);
   gap: var(--bdw);
@@ -13,6 +13,6 @@
   overflow: clip;
 }
 /* 各セルを囲む */
-.u--cells {
+.u--enclose {
   padding: var(--bdw);
 }