lism-css 0.14.0 → 0.16.0

package/dist/lib/getLismProps.js

@@ -1,146 +1,149 @@
-import { TRAITS as C, PROPS as d } from "../config/index.js";
-import E from "./getLayoutProps.js";
-import V from "./getAtomicProps.js";
-import P from "./isPresetValue.js";
+import { TRAITS as C, PROPS as c } from "../config/index.js";
+import V from "./getLayoutProps.js";
+import E from "./getAtomicProps.js";
+import g from "./isPresetValue.js";
 import x from "./isTokenValue.js";
-import S from "./getUtilKey.js";
-import u from "./getMaybeCssVar.js";
+import $ from "./getUtilKey.js";
+import d from "./getMaybeCssVar.js";
 import w from "./getBpData.js";
 import A from "./helper/atts.js";
 import _ from "./helper/isEmptyObj.js";
-import p from "./helper/filterEmptyObj.js";
+import S from "./helper/filterEmptyObj.js";
 import b from "./helper/mergeSet.js";
-import U from "./helper/splitWithComma.js";
-const z = (n) => {
-  const i = d[n];
-  return i && i?.token || "";
+import z from "./helper/splitWithComma.js";
+const L = (n) => {
+  const s = c[n];
+  return s && s?.token || "";
 };
-class L {
+class T {
   // 最終出力 className
   className = "";
-  // 出力順のためのクラスバケット: [primitiveClass] [uClasses]
-  // - primitiveClass : a--* / l--* / is--* の primitive クラス（getAtomicProps → getLayoutProps → analyzeTrait の順で push）
-  // - uClasses       : set--* → u--* → -property の順で push される utility クラス
   primitiveClass = [];
+  setClasses = [];
+  traitClasses = [];
   uClasses = [];
+  propClasses = [];
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(i) {
-    const { forwardedRef: t, class: s, className: e, primitiveClass: l, style: r = {}, _propConfig: o = {}, ...c } = i;
-    this.styles = { ...r }, this._propConfig = { ...o }, l && l.length && (this.primitiveClass = [...l]), _(c) || (this.attrs = { ...c }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, s);
+  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) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, i);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
-  // 出力順: [className&class] [primitiveClass] [uClasses]
+  // 出力順: [className&class] [primitiveClass] [setClasses] [traitClasses] [uClasses] [propClasses]
   // className と class が両方来た場合は両方マージする（atts 内で重複は除去される）。
-  buildClassName(i, t) {
-    return A(i, t, this.primitiveClass, this.uClasses);
+  buildClassName(s, t) {
+    return A(s, t, this.primitiveClass, this.setClasses, this.traitClasses, this.uClasses, this.propClasses);
   }
-  analyzeTrait(i, t) {
-    const { className: s, preset: e, presetClass: l, customVar: r, tokenKey: o } = i;
-    t === !0 ? this.primitiveClass.push(s) : e && P(e, t) ? this.primitiveClass.push(`${s} ${l}:${String(t)}`) : t && (this.primitiveClass.push(s), o && r && this.addStyle(r, u(t, o)));
+  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)));
   }
   // prop解析
   analyzeProps() {
-    const i = this.extractProp("set"), t = this.extractProp("util");
-    b(void 0, i).forEach((s) => this.addUtil(`set--${s}`)), b(void 0, t).forEach((s) => this.addUtil(`u--${s}`)), Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(C, s)) {
-        const e = this.extractProp(s), l = C[s];
-        typeof l == "string" ? e && this.primitiveClass.push(l) : this.analyzeTrait(l, e);
-      } else if (Object.hasOwn(d, 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");
+    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)) {
+        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);
       }
     });
   }
   // Lism Prop 解析
-  analyzeLismProp(i, t) {
+  analyzeLismProp(s, t) {
     if (t == null) return;
-    let s = d[i] || null;
-    if (s === null) return;
-    this._propConfig?.[i] && (s = Object.assign({}, s, this._propConfig[i]));
-    const { base: e, ...l } = w(t);
-    this.setAttrs(i, e, s), Object.keys(l).forEach((r) => {
-      s && this.setAttrs(i, l[r], s, r);
+    let i = c[s] || null;
+    if (i === null) return;
+    this._propConfig?.[s] && (i = Object.assign({}, i, this._propConfig[s]));
+    const { base: e, ...o } = w(t);
+    this.setAttrs(s, e, i), Object.keys(o).forEach((r) => {
+      i && this.setAttrs(s, o[r], i, r);
     });
   }
-  addUtil(i) {
-    this.uClasses.push(i);
+  addSet(s) {
+    this.setClasses.push(`set--${s}`);
   }
-  addUtils(i) {
-    this.uClasses.push(...i);
+  addUtil(s) {
+    this.uClasses.push(s);
   }
-  // addState(state) {
-  // 	this.stateClasses.push(state);
-  // }
-  addStyle(i, t) {
-    this.styles[i] = t;
+  addUtils(s) {
+    this.uClasses.push(...s);
+  }
+  addProp(s) {
+    this.propClasses.push(s);
+  }
+  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
+  // propertyクラスを追加するか、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(":")) {
-      this.addUtil(`${r}:${t.replace(":", "")}`);
+    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(":", "")}`);
       return;
     }
     if (!e) {
-      const { presets: m, tokenClass: j, utils: g, shorthands: $ } = s;
-      if (m && P(m, t)) {
+      const { presets: m, tokenClass: j, utils: p, shorthands: P } = i;
+      if (m && g(m, t)) {
         const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addUtil(`${r}:${h}`);
+        h && this.addProp(`${r}:${h}`);
         return;
       }
-      if (j && s.token && x(s.token, t)) {
+      if (j && i.token && x(i.token, t)) {
         const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addUtil(`${r}:${h}`);
+        h && this.addProp(`${r}:${h}`);
         return;
       }
-      let a = "";
-      if (g && typeof t == "string" && (a = S(g, t)), !a && $ && typeof t == "string" && (a = S($, t, !0)), a) {
-        this.addUtil(`${r}:${a}`);
+      let f = "";
+      if (p && typeof t == "string" && (f = $(p, t)), !f && P && typeof t == "string" && (f = $(P, t, !0)), f) {
+        this.addProp(`${r}:${f}`);
         return;
       }
     }
-    if (t === !0 || t === "-") {
-      this.addUtil(r);
+    if (t === !0) {
+      this.addProp(r);
       return;
     }
-    const { prop: o, isVar: c, alwaysVar: O, token: y, bp: k } = s;
-    let f;
-    if (y && (typeof t == "string" || typeof t == "number") ? f = u(t, y) : typeof t == "string" || typeof t == "number" ? f = t : f = JSON.stringify(t), !e) {
-      if (c) {
-        this.addStyle(`--${i}`, f);
+    const { prop: a, isVar: u, alwaysVar: O, token: y, bp: k } = i;
+    let l;
+    if (y && (typeof t == "string" || typeof t == "number") ? l = d(t, y) : typeof t == "string" || typeof t == "number" ? l = t : l = JSON.stringify(t), !e) {
+      if (u) {
+        this.addStyle(`--${s}`, l);
         return;
       } else if (!k && !O) {
-        this.addStyle(o, f);
+        this.addStyle(a, l);
         return;
       }
     }
-    this.addUtil(r), this.addStyle(l, f);
+    this.addProp(r), this.addStyle(o, l);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -155,21 +158,17 @@ class L {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(i) {
-    i && (i === "-" || i === !0 ? this.addUtil("-hov") : typeof i == "string" ? U(i).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)
-          this.addUtil(`-hov:${t}`);
-        else if (t === "class")
-          U(s).forEach((e) => {
-            this.addUtil(`-hov:${e}`);
-          });
-        else if (typeof s == "string" || typeof s == "number") {
-          const e = u(s, z(t));
-          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
+  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];
+      if (!(i == null || i === "" || i === !1)) {
+        if (i === !0)
+          this.addProp(`-hov:${t}`);
+        else if (typeof i == "string" || typeof i == "number") {
+          const e = d(i, L(t));
+          this.addProp(`-hov:-${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
@@ -178,17 +177,17 @@ class L {
 function Y(n) {
   if (Object.keys(n).length === 0)
     return {};
-  const { atomic: i, layout: t, ...s } = n, e = V(i, s), l = E(t, e), r = new L(l);
+  const { atomic: s, layout: t, ...i } = n, e = E(s, i), o = V(t, e), r = new T(o);
   return {
-    ...p({
+    ...S({
       className: r.className,
-      style: p(r.styles)
+      style: S(r.styles)
     }),
     ...r.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  L as LismPropsData,
+  T as LismPropsData,
   Y as default
 };

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

@@ -33,20 +33,20 @@ export interface FlowLayoutProps {
     layout: 'flow';
     flow?: CssValue;
 }
-export interface FluidColsProps {
-    layout: 'fluidCols';
+export interface AutoColumnsProps {
+    layout: 'autoColumns';
     autoFill?: boolean;
 }
-export interface SideMainProps {
-    layout: 'sideMain';
+export interface WithSideProps {
+    layout: 'withSide';
     sideW?: CssValue;
     mainW?: CssValue;
 }
-export interface SwitchColsProps {
-    layout: 'switchCols';
+export interface SwitchColumnsProps {
+    layout: 'switchColumns';
     breakSize?: CssValue;
 }
-export type LayoutSpecificProps = NoLayoutProps | BoxProps | CenterProps | ClusterProps | ColumnsProps | FlexProps | FlowLayoutProps | FluidColsProps | FrameProps | GridLayoutProps | StackProps | SideMainProps | SwitchColsProps | TileGridProps;
+export type LayoutSpecificProps = NoLayoutProps | BoxProps | CenterProps | ClusterProps | ColumnsProps | FlexProps | FlowLayoutProps | AutoColumnsProps | FrameProps | GridLayoutProps | StackProps | WithSideProps | SwitchColumnsProps | TileGridProps;
 export type LayoutType = Exclude<LayoutSpecificProps, NoLayoutProps>['layout'];
 export interface LayoutProps {
     layout?: LayoutType;

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

@@ -23,7 +23,7 @@ export type TraitProps = {
     [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
 };
 /** set prop で使われるプリセット値（エディタ補完用） */
-type SetPreset = 'gutter' | 'shadow' | 'hov' | 'transition' | 'mask' | 'plain' | 'innerRs';
+type SetPreset = 'plain' | 'revert' | 'var:hov' | 'var:bxsh' | 'var:bdrsInner';
 /**
  * set prop の値の型。プリセット値がサジェストされつつ、任意の文字列も受け付ける。
  *
@@ -34,7 +34,7 @@ type SetPreset = 'gutter' | 'shadow' | 'hov' | 'transition' | 'mask' | 'plain' |
  */
 export type SetPropValue = WithArbitraryString<SetPreset> | WithArbitraryString<SetPreset>[];
 /** util prop で使われるプリセット値（既知の `u--` クラス名・エディタ補完用） */
-type UtilPreset = 'cbox' | 'trim' | 'trimChildren' | 'srOnly' | 'clipText' | 'collapseGrid' | 'snap';
+type UtilPreset = 'cbox' | 'trim' | 'trimAll' | 'srOnly' | 'clipText' | 'divide' | 'cells';
 /**
  * util prop の値の型。既知の `u--` クラス名がサジェストされつつ、任意の文字列も受け付ける。
  *

package/package.json

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

package/packages/astro/index.ts

@@ -22,12 +22,12 @@ export * from './layout/Cluster';
 export * from './layout/Columns';
 export * from './layout/Flex';
 export * from './layout/Flow';
-export * from './layout/FluidCols';
+export * from './layout/AutoColumns';
 export * from './layout/Frame';
 export * from './layout/Grid';
-export * from './layout/SideMain';
+export * from './layout/WithSide';
 export * from './layout/Stack';
-export * from './layout/SwitchCols';
+export * from './layout/SwitchColumns';
 export * from './layout/TileGrid';
 
 // state (is--)
@@ -41,3 +41,6 @@ export * from './atomic/Decorator';
 export * from './atomic/Divider';
 export * from './atomic/Icon';
 export * from './atomic/Spacer';
+
+// Type exports for Astro components
+export type { AstroLismBaseProps, AstroLismFixedLayoutProps, AstroLayoutProps } from './types';

package/packages/astro/layout/{FluidCols/FluidCols.astro → AutoColumns/AutoColumns.astro}

@@ -1,12 +1,12 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismFixedLayoutProps } from '../../types';
-import type { FluidColsProps } from 'lism-css/lib/types/LayoutProps';
+import type { AutoColumnsProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<FluidColsProps, 'layout'>;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<AutoColumnsProps, 'layout'>;
 
 const props = Astro.props;
 ---
 
-<Lism layout="fluidCols" {...props}><slot /></Lism>
+<Lism layout="autoColumns" {...props}><slot /></Lism>

package/packages/astro/layout/AutoColumns/index.ts

@@ -0,0 +1,4 @@
+export { default as AutoColumns } from './AutoColumns.astro';
+
+/** @deprecated `AutoColumns` に名称変更されました。 */
+export { default as FluidCols } from './AutoColumns.astro';

package/packages/astro/layout/Flex/Flex.astro

@@ -1,9 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismFixedLayoutProps } from '../../types';
+import type { AstroLayoutProps } from '../../types';
+import type { FlexProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLayoutProps<FlexProps>;
 
 const props = Astro.props;
 ---

package/packages/astro/layout/Flow/Flow.astro

@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismFixedLayoutProps } from '../../types';
+import type { AstroLayoutProps } from '../../types';
 import type { FlowLayoutProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<FlowLayoutProps, 'layout'>;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLayoutProps<FlowLayoutProps>;
 
 const props = Astro.props;
 ---

package/packages/astro/layout/{SwitchCols/SwitchCols.astro → SwitchColumns/SwitchColumns.astro}

@@ -1,12 +1,12 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismFixedLayoutProps } from '../../types';
-import type { SwitchColsProps } from 'lism-css/lib/types/LayoutProps';
+import type { SwitchColumnsProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SwitchColsProps, 'layout'>;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SwitchColumnsProps, 'layout'>;
 
 const props = Astro.props;
 ---
 
-<Lism layout="switchCols" {...props}><slot /></Lism>
+<Lism layout="switchColumns" {...props}><slot /></Lism>

package/packages/astro/layout/SwitchColumns/index.ts

@@ -0,0 +1,4 @@
+export { default as SwitchColumns } from './SwitchColumns.astro';
+
+/** @deprecated `SwitchColumns` に名称変更されました。 */
+export { default as SwitchCols } from './SwitchColumns.astro';

package/packages/astro/layout/{SideMain/SideMain.astro → WithSide/WithSide.astro}

@@ -1,12 +1,12 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismFixedLayoutProps } from '../../types';
-import type { SideMainProps } from 'lism-css/lib/types/LayoutProps';
+import type { WithSideProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SideMainProps, 'layout'>;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<WithSideProps, 'layout'>;
 
 const props = Astro.props;
 ---
 
-<Lism layout="sideMain" {...props}><slot /></Lism>
+<Lism layout="withSide" {...props}><slot /></Lism>

package/packages/astro/layout/WithSide/index.ts

@@ -0,0 +1,4 @@
+export { default as WithSide } from './WithSide.astro';
+
+/** @deprecated `WithSide` に名称変更されました。 */
+export { default as SideMain } from './WithSide.astro';

package/packages/astro/types.ts

@@ -17,3 +17,6 @@ export type AstroLismBaseProps = LismProps &
 export type AstroLismFixedLayoutProps = Omit<LismProps, 'layout'> & {
   exProps?: Record<string, unknown>;
 };
+
+/** レイアウトコンポーネント向けベース型（React の LayoutComponentProps<T, L> に対応） */
+export type AstroLayoutProps<L = object> = AstroLismFixedLayoutProps & Omit<L, 'layout'>;

package/src/scss/_auto_output.scss

@@ -6,15 +6,15 @@
 @use './query' as query;
 @use './setting' as setting;
 
-/* 
+/*
 base_type:
 	0 →　なし（ユーティリティクラス以外は普通のインラインスタイルのみ）
 	1 →　.-d{display: var(--d)} 　(メリット：importantなしでbp対応できる)
-	2 → .-p, [class*='-p\:'] {padding: var(--p);} の形式で、BPクラス含めて全て変数にセットするもの。
-	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
-	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
-
-	3 → BPクラスには変数使わないが、文字数省略のため baseのProperty Classだけ変数化して *= セレクタ使う
+	2 → alwaysVar 対象。 .-p, [class*='-p\:'] {padding: var(--p);} の形式で、
+	    ユーティリティクラスは --p をセットする形になる（state 変数として扱う）。
+	    BPクラスも .-p_$bp { padding: var(--p); --p: var(--p_$bp) !important; } を出力し、
+	    --p が常に現在値を参照できるようになる。
+	    デメリット: *= は処理負荷が高い。
 */
 
 // マップから値を取得し、nullの場合はデフォルト値を返す
@@ -218,7 +218,7 @@ $bp_outputs: (
       $prop_data: map.get(setting.$props, $key);
       $prop_name: map.get($prop_data, prop);
       $isVar: map_get_with_default($prop_data, isVar, 0);
-      $overwriteBaseVar: map_get_with_default($prop_data, overwriteBaseVar, 0);
+      $alwaysVar: map_get_with_default($prop_data, alwaysVar, 0);
       $important: map_get_with_default($prop_data, important, setting.$default_important);
 
       @if $isVar == 1 {
@@ -226,11 +226,12 @@ $bp_outputs: (
       }
 
       .-#{$key}_#{$bp} {
-        #{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
-
-        // 常に --prop でそのBPの値を取得できるように
-        @if $overwriteBaseVar == 1 {
+        @if $alwaysVar == 1 {
+          // state 変数扱い: --prop を単一情報源にし、--prop を上書きして property は var(--prop) を読む
+          #{$prop_name}: var(--#{$key}) #{get_important_str($important)};
           --#{$key}: var(--#{$key}_#{$bp}) !important;
+        } @else {
+          #{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
         }
       }
     }

package/src/scss/_prop-config.scss

@@ -22,7 +22,6 @@ $props: (
       '2xs': 'var(--fz--2xs)',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'fw': (
     prop: 'font-weight',
@@ -114,9 +113,10 @@ $props: (
     prop: 'opacity',
     utilities: (
       '0': '0',
-      '-10': 'var(--o---10)',
-      '-20': 'var(--o---20)',
-      '-30': 'var(--o---30)',
+      'mp': 'var(--o--mp)',
+      'p': 'var(--o--p)',
+      'pp': 'var(--o--pp)',
+      'ppp': 'var(--o--ppp)',
     ),
   ),
   'v': (
@@ -317,7 +317,6 @@ $props: (
     ),
     bp: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
   ),
   'bxsh': (
     prop: 'box-shadow',
@@ -327,9 +326,9 @@ $props: (
       '20': 'var(--bxsh--20)',
       '30': 'var(--bxsh--30)',
       '40': 'var(--bxsh--40)',
+      '50': 'var(--bxsh--50)',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'pos': (
     prop: 'position',
@@ -405,7 +404,6 @@ $props: (
     ),
     bp: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
   ),
   'px': (
     prop: 'padding-inline',
@@ -423,7 +421,6 @@ $props: (
       '80': 'var(--s80)',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'py': (
     prop: 'padding-block',
@@ -441,7 +438,6 @@ $props: (
       '80': 'var(--s80)',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'px-s': (
     prop: 'padding-inline-start',
@@ -493,7 +489,6 @@ $props: (
     ),
     bp: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
   ),
   'mx': (
     prop: 'margin-inline',
@@ -512,7 +507,6 @@ $props: (
       'auto': 'auto',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'my': (
     prop: 'margin-block',
@@ -531,7 +525,6 @@ $props: (
       'auto': 'auto',
     ),
     bp: 1,
-    alwaysVar: 1,
   ),
   'mx-s': (
     prop: 'margin-inline-start',
@@ -609,8 +602,6 @@ $props: (
       ),
     ),
     bp: 1,
-    alwaysVar: 1,
-    overwriteBaseVar: 1,
   ),
   'cg': (
     prop: 'column-gap',

package/src/scss/_with_layer.scss

@@ -4,7 +4,7 @@
 @use 'sass:meta';
 
 // レイヤー順序を明示的に宣言（詳細度: 上ほど弱い）
-@layer lism-base, lism-primitive, lism-component, lism-custom, lism-utility;
+@layer lism-base, lism-trait, lism-primitive, lism-component, lism-custom, lism-utility;
 
 @layer lism-base {
   // resetは中でも layer定義済み。 lism-base.reset となる
@@ -13,10 +13,14 @@
   @include meta.load-css('base');
 }
 
+// ユーザーが明示的に宣言する trait クラス（is--* / has--*）用レイヤー。
+// primitive より弱い位置に配置し、is--boxLink の display: block 等の
+// 初期化的な宣言がレイアウトプリミティブ（l--stack の display: flex 等）に負けるようにする。
+@layer lism-trait {
+  @include meta.load-css('trait');
+}
+
 @layer lism-primitive {
-  @layer trait {
-    @include meta.load-css('primitives/trait');
-  }
   @layer layout {
     @include meta.load-css('primitives/layout');
   }