lism-css 0.12.0 → 0.13.1

package/dist/lib/getLismProps.js

@@ -1,122 +1,143 @@
-import { STATES as b, PROPS as g } from "../config/index.js";
-import p from "./getLayoutProps.js";
-import U from "./isPresetValue.js";
-import E from "./isTokenValue.js";
-import C from "./getUtilKey.js";
-import S from "./getMaybeCssVar.js";
-import V from "./getBpData.js";
-import x from "./helper/atts.js";
-import _ from "./helper/isEmptyObj.js";
-import O from "./helper/filterEmptyObj.js";
-import w from "./helper/mergeSet.js";
-import j from "./helper/splitWithComma.js";
-const A = (f) => {
-  const i = g[f];
-  return i && i?.token || "";
+import { TRAITS as P, PROPS as m } from "../config/index.js";
+import E from "./getLayoutProps.js";
+import V from "./getAtomicProps.js";
+import b from "./isPresetValue.js";
+import x from "./isTokenValue.js";
+import p from "./getUtilKey.js";
+import y from "./getMaybeCssVar.js";
+import w from "./getBpData.js";
+import A from "./helper/atts.js";
+import L from "./helper/isEmptyObj.js";
+import S from "./helper/filterEmptyObj.js";
+import U from "./helper/mergeSet.js";
+import O from "./helper/splitWithComma.js";
+const _ = (o) => {
+  const s = m[o];
+  return s && s?.token || "";
 };
-class z {
-  // propList = {};
+function z(o, s) {
+  if (!o) return "";
+  if (!s) return o;
+  const t = o.split(" ")[0];
+  return `${o} ${t}--${s}`;
+}
+class T {
+  // 最終出力 className
   className = "";
+  // 出力順のためのクラスバケット: [lismClass] [primitiveClass] [uClasses]
+  // - lismClass      : c--* 基底クラス（variant BEM 展開の対象）
+  // - primitiveClass : a--* / l--* / is--* の primitive クラス（getAtomicProps → getLayoutProps → analyzeTrait の順で push）
+  // - uClasses       : set--* → u--* → -property の順で push される utility クラス
+  lismClass = "";
+  primitiveClass = [];
   uClasses = [];
-  lismState = [];
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(i) {
-    const { forwardedRef: t, class: s, className: e, lismClass: l, variant: r, style: o = {}, _propConfig: m = {}, ...u } = i;
-    this.styles = { ...o }, this._propConfig = { ...m };
-    let a = l || "";
-    if (r && l) {
-      const d = l.split(" "), n = d[0], y = `${n}--${r}`;
-      a = [n, y, ...d.slice(1)].join(" ");
-    }
-    _(u) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = x(e || s, a, this.lismState, this.uClasses);
+  constructor(s) {
+    const {
+      forwardedRef: t,
+      class: i,
+      className: e,
+      lismClass: l,
+      primitiveClass: r,
+      variant: n,
+      style: c = {},
+      _propConfig: d = {},
+      ...a
+    } = s;
+    this.styles = { ...c }, this._propConfig = { ...d }, this.lismClass = z(l, n), r && r.length && (this.primitiveClass = [...r]), L(a) || (this.attrs = { ...a }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, i);
   }
-  analyzeState(i, t) {
-    const { className: s, preset: e, presetClass: l, customVar: r, tokenKey: o } = i;
-    t === !0 ? this.lismState.push(s) : e && U(e, t) ? this.lismState.push(`${s} ${l}:${String(t)}`) : t && (this.lismState.push(s), o && r && this.addStyle(r, S(t, o)));
+  // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
+  // 出力順: [user/astro className] [lismClass] [primitiveClass] [uClasses]
+  buildClassName(s, t) {
+    return A(s || t || void 0, this.lismClass, this.primitiveClass, this.uClasses);
+  }
+  analyzeTrait(s, t) {
+    const { className: i, preset: e, presetClass: l, customVar: r, tokenKey: n } = s;
+    t === !0 ? this.primitiveClass.push(i) : e && b(e, t) ? this.primitiveClass.push(`${i} ${l}:${String(t)}`) : t && (this.primitiveClass.push(i), n && r && this.addStyle(r, y(t, n)));
   }
   // prop解析
   analyzeProps() {
-    const i = this.extractProp("set"), t = this.extractProp("unset");
-    Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(b, s)) {
-        const e = this.extractProp(s), l = b[s];
-        typeof l == "string" ? e && this.lismState.push(l) : this.analyzeState(l, e);
-      } else if (Object.hasOwn(g, s)) {
-        const e = this.attrs[s];
-        delete this.attrs[s], this.analyzeLismProp(s, e);
-      } else if (s === "hov") {
-        const e = this.extractProp(s);
+    const s = this.extractProp("set"), t = this.extractProp("util");
+    U(void 0, s).forEach((i) => this.addUtil(`set--${i}`)), U(void 0, t).forEach((i) => this.addUtil(`u--${i}`)), Object.keys(this.attrs).forEach((i) => {
+      if (Object.hasOwn(P, i)) {
+        const e = this.extractProp(i), l = P[i];
+        typeof l == "string" ? e && this.primitiveClass.push(l) : this.analyzeTrait(l, e);
+      } else if (Object.hasOwn(m, i)) {
+        const e = this.attrs[i];
+        delete this.attrs[i], this.analyzeLismProp(i, e);
+      } else if (i === "hov") {
+        const e = this.extractProp(i);
         this.setHovProps(e);
-      } else if (s === "css") {
+      } else if (i === "css") {
         const e = this.extractProp("css");
         this.addStyles(e);
       }
-    }), w(void 0, i, t).forEach((s) => this.lismState.push(`set--${s}`));
+    });
   }
   // Lism Prop 解析
-  analyzeLismProp(i, t) {
+  analyzeLismProp(s, t) {
     if (t == null) return;
-    let s = g[i] || null;
-    if (s === null) return;
-    this._propConfig?.[i] && (s = Object.assign({}, s, this._propConfig[i]));
-    const { base: e, ...l } = V(t);
-    this.setAttrs(i, e, s), Object.keys(l).forEach((r) => {
-      s && this.setAttrs(i, l[r], s, r);
+    let i = m[s] || null;
+    if (i === null) return;
+    this._propConfig?.[s] && (i = Object.assign({}, i, this._propConfig[s]));
+    const { base: e, ...l } = w(t);
+    this.setAttrs(s, e, i), Object.keys(l).forEach((r) => {
+      i && this.setAttrs(s, l[r], i, r);
     });
   }
-  addUtil(i) {
-    this.uClasses.push(i);
+  addUtil(s) {
+    this.uClasses.push(s);
   }
-  addUtils(i) {
-    this.uClasses.push(...i);
+  addUtils(s) {
+    this.uClasses.push(...s);
   }
   // addState(state) {
   // 	this.stateClasses.push(state);
   // }
-  addStyle(i, t) {
-    this.styles[i] = t;
+  addStyle(s, t) {
+    this.styles[s] = t;
   }
-  addStyles(i) {
-    this.styles = { ...this.styles, ...i };
+  addStyles(s) {
+    this.styles = { ...this.styles, ...s };
   }
-  addAttrs(i) {
-    this.addStyles(i.styles || {}), this.addUtils(i.utils || []);
+  addAttrs(s) {
+    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
   }
-  extractProp(i) {
-    const t = this.attrs[i];
-    return this.attrs[i] === void 0 ? null : (delete this.attrs[i], t);
+  extractProp(s) {
+    const t = this.attrs[s];
+    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
   }
-  extractProps(i) {
+  extractProps(s) {
     const t = {};
-    return i.forEach((s) => {
-      this.attrs[s] !== void 0 && (t[s] = this.attrs[s], delete this.attrs[s]);
+    return s.forEach((i) => {
+      this.attrs[i] !== void 0 && (t[i] = this.attrs[i], delete this.attrs[i]);
     }), t;
   }
   // utilクラスを追加するか、styleにセットするかの分岐処理 @base
   // 値が null, undefined, '', false の時はスキップ
-  setAttrs(i, t, s = {}, e = "") {
+  setAttrs(s, t, i = {}, e = "") {
     if (t == null || t === "" || t === !1) return;
-    let l = `--${i}`, r = `-${String(s.utilKey || i)}`;
-    if (e && (l = `--${i}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
+    let l = `--${s}`, r = `-${String(i.utilKey || s)}`;
+    if (e && (l = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
       this.addUtil(`${r}:${t.replace(":", "")}`);
       return;
     }
     if (!e) {
-      const { presets: y, tokenClass: k, utils: $, shorthands: P } = s;
-      if (y && U(y, t)) {
-        const c = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        c && this.addUtil(`${r}:${c}`);
+      const { presets: g, tokenClass: j, utils: $, shorthands: C } = i;
+      if (g && b(g, t)) {
+        const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        u && this.addUtil(`${r}:${u}`);
         return;
       }
-      if (k && s.token && E(s.token, t)) {
-        const c = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        c && this.addUtil(`${r}:${c}`);
+      if (j && i.token && x(i.token, t)) {
+        const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        u && this.addUtil(`${r}:${u}`);
         return;
       }
       let h = "";
-      if ($ && typeof t == "string" && (h = C($, t)), !h && P && typeof t == "string" && (h = C(P, t, !0)), h) {
+      if ($ && typeof t == "string" && (h = p($, t)), !h && C && typeof t == "string" && (h = p(C, t, !0)), h) {
         this.addUtil(`${r}:${h}`);
         return;
       }
@@ -125,18 +146,18 @@ class z {
       this.addUtil(r);
       return;
     }
-    const { prop: o, isVar: m, alwaysVar: u, token: a, bp: d } = s;
-    let n;
-    if (a && (typeof t == "string" || typeof t == "number") ? n = S(t, a) : typeof t == "string" || typeof t == "number" ? n = t : n = JSON.stringify(t), !e) {
-      if (m) {
-        this.addStyle(`--${i}`, n);
+    const { prop: n, isVar: c, alwaysVar: d, token: a, bp: k } = i;
+    let f;
+    if (a && (typeof t == "string" || typeof t == "number") ? f = y(t, a) : typeof t == "string" || typeof t == "number" ? f = t : f = JSON.stringify(t), !e) {
+      if (c) {
+        this.addStyle(`--${s}`, f);
         return;
-      } else if (!d && !u) {
-        this.addStyle(o, n);
+      } else if (!k && !d) {
+        this.addStyle(n, f);
         return;
       }
     }
-    this.addUtil(r), this.addStyle(l, n);
+    this.addUtil(r), this.addStyle(l, f);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -151,40 +172,40 @@ class z {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(i) {
-    i && (i === "-" || i === !0 ? this.addUtil("-hov") : typeof i == "string" ? j(i).forEach((t) => {
+  setHovProps(s) {
+    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? O(s).forEach((t) => {
       this.addUtil(`-hov:${t}`);
-    }) : typeof i == "object" && Object.keys(i).forEach((t) => {
-      const s = i[t];
-      if (!(s == null || s === "" || s === !1)) {
-        if (s === "-" || s === !0)
+    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
+      const i = s[t];
+      if (!(i == null || i === "" || i === !1)) {
+        if (i === "-" || i === !0)
           this.addUtil(`-hov:${t}`);
         else if (t === "class")
-          j(s).forEach((e) => {
+          O(i).forEach((e) => {
             this.addUtil(`-hov:${e}`);
           });
-        else if (typeof s == "string" || typeof s == "number") {
-          const e = S(s, A(t));
+        else if (typeof i == "string" || typeof i == "number") {
+          const e = y(i, _(t));
           this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function Q(f) {
-  if (Object.keys(f).length === 0)
+function Z(o) {
+  if (Object.keys(o).length === 0)
     return {};
-  const { layout: i, ...t } = f, s = new z(p(i, t));
+  const { atomic: s, layout: t, ...i } = o, e = V(s, i), l = E(t, e), r = new T(l);
   return {
-    ...O({
-      className: s.className,
-      style: O(s.styles)
+    ...S({
+      className: r.className,
+      style: S(r.styles)
     }),
-    ...s.attrs
+    ...r.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  z as LismPropsData,
-  Q as default
+  T as LismPropsData,
+  Z as default
 };

package/dist/lib/helper/mergeSet.d.ts

@@ -1,5 +1,10 @@
 /**
- * base / set / unset を合成し、最終的な set 値の配列を返す。
- * unset に含まれる値は base + set から除外される。
+ * base / value を合成し、最終的なクラス識別子の配列を返す。
+ * 値内の `-` prefix は除外マーカーとして扱われ、その識別子は base + value から除外される。
+ *
+ * `set` / `util` のいずれの prop でも共用できる汎用処理。
+ *
+ * 入力は空白区切りを基本とし、カンマ区切りも互換のため受け付ける。
+ * 内部 API 用途として文字列配列も受け付けるが、配列形式はユーザー向けドキュメントでは紹介していない。
  */
-export default function mergeSet(base: unknown, set: unknown, unset: unknown): string[];
+export default function mergeSet(base: unknown, value: unknown): string[];

package/dist/lib/helper/mergeSet.js

@@ -1,14 +1,14 @@
-function r(t) {
-  return t ? Array.isArray(t) ? t.flatMap((e) => r(e)) : typeof t == "string" ? t.split(/[,\s]+/).map((e) => e.trim()).filter(Boolean) : [] : [];
+function i(t) {
+  return t ? Array.isArray(t) ? t.flatMap((e) => i(e)) : typeof t != "string" ? [] : t.split(/[,\s]+/).map((e) => e.trim()).filter(Boolean) : [];
 }
-function u(t, e, f) {
-  const n = [.../* @__PURE__ */ new Set([...r(t), ...r(e)])];
-  if (n.length === 0) return [];
-  const i = r(f);
-  if (i.length === 0) return n;
-  const s = new Set(i);
-  return n.filter((o) => !s.has(o));
+function o(t, e) {
+  const s = [...i(t), ...i(e)];
+  if (s.length === 0) return [];
+  const n = [], f = /* @__PURE__ */ new Set();
+  for (const r of s)
+    r.startsWith("-") ? f.add(r.slice(1)) : n.includes(r) || n.push(r);
+  return n.filter((r) => !f.has(r));
 }
 export {
-  u as default
+  o as default
 };

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

@@ -0,0 +1,24 @@
+import { CssValue } from './LayoutProps';
+export interface NoAtomicProps {
+    atomic?: undefined;
+}
+export interface DividerAtomicProps {
+    atomic: 'divider';
+}
+export interface SpacerAtomicProps {
+    atomic: 'spacer';
+}
+export interface DecoratorAtomicProps {
+    atomic: 'decorator';
+    size?: CssValue;
+    clipPath?: string;
+    boxSizing?: string;
+}
+export interface IconAtomicProps {
+    atomic: 'icon';
+}
+export type AtomicSpecificProps = NoAtomicProps | DividerAtomicProps | SpacerAtomicProps | DecoratorAtomicProps | IconAtomicProps;
+export type AtomicType = Exclude<AtomicSpecificProps, NoAtomicProps>['atomic'];
+export interface AtomicProps {
+    atomic?: AtomicType;
+}

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

@@ -0,0 +1,47 @@
+import { TRAITS } from '../../../config/index';
+import { WithArbitraryString, ArrayElement } 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;
+/**
+ * config/index.ts の TRAITS から自動生成される Trait Props の型
+ * config/index.ts の TRAITS に新しいトレイトを追加すると自動的に反映される
+ */
+export type TraitProps = {
+    [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
+};
+/** set prop で使われるプリセット値（エディタ補完用） */
+type SetPreset = 'gutter' | 'shadow' | 'hov' | 'transition' | 'mask' | 'plain' | 'innerRs' | 'bp';
+/**
+ * set prop の値の型。プリセット値がサジェストされつつ、任意の文字列も受け付ける。
+ *
+ * - 値はスペース区切りで複数指定可能
+ * - 先頭に `-` を付けると、その識別子を除外する（例: `set="card -bd"`）
+ * - 文字列配列も受け付けるが、これは内部 API 用途（lism-ui など）であり、
+ *   ユーザー向けドキュメントでは紹介していない
+ */
+export type SetPropValue = WithArbitraryString<SetPreset> | WithArbitraryString<SetPreset>[];
+/** util prop で使われるプリセット値（既知の `u--` クラス名・エディタ補完用） */
+type UtilPreset = 'cbox' | 'trim' | 'trimChildren' | 'srOnly' | 'clipText' | 'collapseGrid' | 'snap';
+/**
+ * util prop の値の型。既知の `u--` クラス名がサジェストされつつ、任意の文字列も受け付ける。
+ *
+ * - 値はスペース区切りで複数指定可能
+ * - 先頭に `-` を付けると、その識別子を除外する（例: `util="cbox -trim"`）
+ * - 文字列配列も受け付けるが、これは内部 API 用途であり、
+ *   ユーザー向けドキュメントでは紹介していない
+ */
+export type UtilPropValue = WithArbitraryString<UtilPreset> | WithArbitraryString<UtilPreset>[];
+export {};

package/package.json

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

package/packages/astro/atomic/Decorator/Decorator.astro

@@ -1,15 +1,12 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { DecoratorProps } from 'lism-css/react/atomic/Decorator/getProps';
+import type { AstroLismFixedLayoutProps } from '../../types';
+import type { DecoratorOwnProps } from 'lism-css/react/atomic/Decorator/Decorator';
 import { Lism } from '../../Lism';
-import getProps from 'lism-css/react/atomic/Decorator/getProps';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
-  DecoratorProps & {
-    exProps?: Record<string, unknown>;
-  };
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & DecoratorOwnProps;
 
 const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<Lism as={Tag} {...getProps(props)} {...exProps}><slot /></Lism>
+<Lism as={Tag} atomic="decorator" aria-hidden="true" {...props} {...exProps}><slot /></Lism>

package/packages/astro/atomic/Divider/Divider.astro

@@ -2,11 +2,10 @@
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../../types';
 import { Lism } from '../../Lism';
-import { getDividerProps } from 'lism-css/react/atomic/Divider/getProps';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
 const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<Lism as={Tag} {...getDividerProps(props)} {...exProps} />
+<Lism as={Tag} atomic="divider" aria-hidden="true" {...props} {...exProps} />

package/packages/astro/atomic/Spacer/Spacer.astro

@@ -2,11 +2,10 @@
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../../types';
 import { Lism } from '../../Lism';
-import getProps from 'lism-css/react/atomic/Spacer/getProps';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
 const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<Lism as={Tag} {...getProps(props)} {...exProps} />
+<Lism as={Tag} atomic="spacer" aria-hidden="true" {...props} {...exProps} />

package/packages/astro/index.ts

@@ -33,7 +33,7 @@ export * from './layout/TileGrid';
 // state (is--)
 export * from './state/Container';
 export * from './state/Layer';
-export * from './state/LinkBox';
+export * from './state/BoxLink';
 export * from './state/Wrapper';
 
 // atomic (a--)

package/packages/astro/state/{LinkBox/LinkBox.astro → BoxLink/BoxLink.astro}

@@ -8,9 +8,9 @@ type Props<Tag extends HTMLTag = 'a'> = Polymorphic<{ as: Tag }> & AstroLismBase
 const { as, exProps, ...props } = Astro.props;
 
 const hasHref = !!props.href;
-// LinkBoxは基本的にリンク要素（aタグ）として機能するため、
+// BoxLinkは基本的にリンク要素（aタグ）として機能するため、
 // hrefがないかつ、aタグとしてレンダリングする場合はdivタグに置き換える
 const tag: HTMLTag = !hasHref && (as ?? 'a') === 'a' ? 'div' : (as ?? 'a');
 ---
 
-<Lism isLinkBox as={tag} {...props} {...exProps}><slot /></Lism>
+<Lism isBoxLink as={tag} {...props} {...exProps}><slot /></Lism>

package/packages/astro/state/BoxLink/index.ts

@@ -0,0 +1 @@
+export { default as BoxLink } from './BoxLink.astro';

package/packages/astro/state/Container/Container.astro

@@ -3,12 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../../types';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
-  AstroLismBaseProps & {
-    size?: string;
-  };
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
-const { size, ...props } = Astro.props;
+const props = Astro.props;
 ---
 
-<Lism isContainer isWrapper={size} {...props}><slot /></Lism>
+<Lism isContainer {...props}><slot /></Lism>

package/src/scss/_with_layer.scss

@@ -3,6 +3,9 @@
 */
 @use 'sass:meta';
 
+// レイヤー順序を明示的に宣言（詳細度: 上ほど弱い）
+@layer lism-base, lism-primitive, lism-component, lism-custom, lism-utility;
+
 @layer lism-base {
   // resetは中でも layer定義済み。 lism-base.reset となる
   @include meta.load-css('reset');
@@ -10,18 +13,22 @@
   @include meta.load-css('base');
 }
 
-@layer lism-modules {
-  @layer state {
-    @include meta.load-css('modules/state');
+@layer lism-primitive {
+  @layer trait {
+    @include meta.load-css('primitives/trait');
   }
   @layer layout {
-    @include meta.load-css('modules/layout');
+    @include meta.load-css('primitives/layout');
   }
   @layer atomic {
-    @include meta.load-css('modules/atomic');
+    @include meta.load-css('primitives/atomic');
   }
 }
 
+/* stylelint-disable-next-line block-no-empty -- BEM 構造を持つ UI コンポーネント（c--）用レイヤー。コアでは空、@lism-css/ui やユーザー定義クラスがここに配置される。 */
+@layer lism-component {
+}
+
 /* stylelint-disable-next-line block-no-empty -- ユーザーの独自分類クラス用レイヤー */
 @layer lism-custom {
 }

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

@@ -95,7 +95,7 @@
   --ar--og: 1.91/1;
 
   /** 
-   * State Module用の初期値
+   * Trait Primitive用の初期値
    */
   --gutter-size: var(--s30); // サイトコンテンツの左右につける余白
   --vertical-mode: vertical-rl; // 縦書きモード

package/src/scss/main_no_layer.scss

@@ -11,10 +11,10 @@
 // base
 @use './base/index' as base;
 
-// Modules
-@use './modules/state/index' as state;
-@use './modules/layout/index' as layout;
-@use './modules/atomic/index' as atomic;
+// Primitives
+@use './primitives/trait/index' as trait;
+@use './primitives/layout/index' as layout;
+@use './primitives/atomic/index' as atomic;
 
 // @use './component/index' as component;
 

package/src/scss/{modules → primitives}/atomic/_icon.scss

@@ -1,5 +1,5 @@
 .a--icon {
-  flex-shrink: 0; // Callout など、アイコンはflex直下の子要素にしたい場合も多いので、指定しておく
+  flex-shrink: 0; // アイコンはflex直下の子要素にしたい場合が多いのでデフォルトで適用する
 }
 
 /* fill指定のない svg にテキストカラーを継承させる */
@@ -7,7 +7,7 @@
   fill: currentcolor;
 }
 
-/* 属性によるサイズ指定がない場合　*/
+/* 属性によるサイズ指定がない場合は 1em サイズが基本　*/
 .a--icon:where(:not([width])) {
   width: 1em;
   height: 1em;

package/src/scss/{modules → primitives}/layout/index.scss

@@ -1,4 +1,4 @@
-// modules
+// layout primitives
 @forward './flow';
 @forward './flex';
 @forward './cluster';

package/src/scss/{modules/state/_linkbox.scss → primitives/trait/_boxLink.scss}

@@ -1,6 +1,6 @@
 @use '../../_mixin' as mixin;
 
-.is--linkBox {
+.is--boxLink {
   position: relative;
   display: block;
   color: inherit;
@@ -11,12 +11,12 @@
 }
 
 // リンクをクリック可能にするためにz-indexあげる
-.is--linkBox a {
+.is--boxLink a {
   position: relative;
-  z-index: 2; // .u-linkExpand::before + 1
+  z-index: 2; // .is--coverLink::before + 1
 }
 
 /* これをしてしまうと z-index 関係がややこしくなる。リンク以外のz-indexはデフォのままにする。 */
-// .is--linkBox > * {
+// .is--boxLink > * {
 // 	z-index: 0;
 // }

package/src/scss/{utility/_linkExpand.scss → primitives/trait/_coverLink.scss}

@@ -1,4 +1,4 @@
-.u--expandedLink {
+.is--coverLink {
   position: static;
   text-decoration: none;
   color: inherit;