lism-css 0.13.1 → 0.14.0

package/dist/lib/getLismProps.js

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

package/dist/lib/getMaybeTokenValue.js

@@ -1,25 +1,25 @@
-function a(n, t, f) {
-  if (n === "color") {
-    let e = a("c", t, f);
-    return e === String(t) && (e = a("palette", t, f)), e;
+function a(i, r, f) {
+  if (i === "color") {
+    let n = a("c", r, f);
+    return n === String(r) && (n = a("palette", r, f)), n;
   }
-  const i = f[n];
-  if (!i) return String(t);
-  let r = typeof t == "number" ? `${t}` : t;
-  if (i instanceof Set) {
-    if (i.has(r))
-      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
-  } else if (Array.isArray(i)) {
-    if (i.includes(r))
-      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
-  } else if ("pre" in i || "values" in i) {
-    const { pre: e = "", values: s = [] } = i;
-    if (s instanceof Set && s.has(r))
-      return `var(${e}${r})`;
-    if (Array.isArray(s) && s.includes(r))
-      return `var(${e}${r})`;
+  const e = f[i];
+  if (!e) return String(r);
+  const t = typeof r == "number" ? `${r}` : r;
+  if (e instanceof Set) {
+    if (e.has(t))
+      return `var(--${i}--${t})`;
+  } else if (Array.isArray(e)) {
+    if (e.includes(t))
+      return `var(--${i}--${t})`;
+  } else if ("pre" in e || "values" in e) {
+    const { pre: n = "", values: s = [] } = e;
+    if (s instanceof Set && s.has(t))
+      return `var(${n}${t})`;
+    if (Array.isArray(s) && s.includes(t))
+      return `var(${n}${t})`;
   }
-  return String(t);
+  return String(r);
 }
 export {
   a as default

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

@@ -11,8 +11,6 @@ export interface SpacerAtomicProps {
 export interface DecoratorAtomicProps {
     atomic: 'decorator';
     size?: CssValue;
-    clipPath?: string;
-    boxSizing?: string;
 }
 export interface IconAtomicProps {
     atomic: 'icon';

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' | 'bp';
+type SetPreset = 'gutter' | 'shadow' | 'hov' | 'transition' | 'mask' | 'plain' | 'innerRs';
 /**
  * set prop の値の型。プリセット値がサジェストされつつ、任意の文字列も受け付ける。
  *

package/package.json

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

package/packages/astro/Dummy/Dummy.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください。
+ * @deprecated DummyText (@lism-css/ui) を使用してください。
  */
 import { Lism } from '../Lism';
 

package/packages/astro/index.ts

@@ -3,7 +3,7 @@
  */
 
 export * from './Lism';
-/** @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください */
+/** @deprecated DummyText (@lism-css/ui) を使用してください */
 export * from './Dummy';
 
 // semantic wrappers

package/src/scss/_prop-config.scss

@@ -114,9 +114,9 @@ $props: (
     prop: 'opacity',
     utilities: (
       '0': '0',
-      '-10': 'var(--o--n10)',
-      '-20': 'var(--o--n20)',
-      '-30': 'var(--o--n30)',
+      '-10': 'var(--o---10)',
+      '-20': 'var(--o---20)',
+      '-30': 'var(--o---30)',
     ),
   ),
   'v': (
@@ -818,13 +818,13 @@ $props: (
       '-1': '-1',
     ),
   ),
-  'ovwrap': (
+  'ovw': (
     prop: 'overflow-wrap',
     utilities: (
       'anywhere': 'anywhere',
     ),
   ),
-  'whspace': (
+  'whs': (
     prop: 'white-space',
     utilities: (
       'nowrap': 'nowrap',
@@ -843,10 +843,17 @@ $props: (
       'both': 'both',
     ),
   ),
-  'isolation': (
+  'iso': (
     prop: 'isolation',
     utilities: (
       'isolate': 'isolate',
     ),
   ),
+  'wm': (
+    prop: 'writing-mode',
+    utilities: (
+      'vertical-rl': 'vertical-rl',
+    ),
+    bp: 1,
+  ),
 );

package/src/scss/base/_html.scss

@@ -148,7 +148,7 @@ select,
 }
 
 :disabled {
-  opacity: var(--o--n20);
+  opacity: var(--o---20);
 }
 
 /* --------------------------------------------------

package/src/scss/base/set/_bp.scss

@@ -1,8 +1,8 @@
 @use '../../query' as query;
 
-/* 
+/*
  * 特定のブレイクポイント以上でのみスタイルを適用させるためのハック変数を定義する
- *   👀: .is--vertical
+ *   Memo: 現在import停止しコアから排除中。今後復活するかは要検討。
  */
 :root {
   --_is_sm: unset;

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

@@ -1,4 +1,4 @@
-@forward './bp';
+// @forward './bp'; // Note: set--bp は無効化中。ファイルは参考用に残す
 @forward './hov';
 @forward './transition';
 @forward './mask';

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

@@ -18,7 +18,6 @@
   --sz--m: 56rem; // 読みやすいのが50文字程度。
   --sz--s: 42rem;
   --sz--xs: 32rem;
-  --sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 sideMain等 で使用
 
   /** 
    * カラーパレット
@@ -65,9 +64,9 @@
   /** 
    * opacity
    */
-  --o--n10: 0.75;
-  --o--n20: 0.5;
-  --o--n30: 0.25;
+  --o---10: 0.75;
+  --o---20: 0.5;
+  --o---30: 0.25;
 
   /** 
    * border-radius
@@ -95,8 +94,8 @@
   --ar--og: 1.91/1;
 
   /** 
-   * Trait Primitive用の初期値
+   * サイトコンテンツの左右につける余白量
+   *   Memo: -max-sz\:full などからも参照されるのでrootで定義している
    */
-  --gutter-size: var(--s30); // サイトコンテンツの左右につける余白
-  --vertical-mode: vertical-rl; // 縦書きモード
+  --gutter-size: var(--s30);
 }

package/src/scss/primitives/layout/_fluidCols.scss

@@ -2,7 +2,7 @@
     Memo: オーバーフロー回避のため、 min({cols}, 100%) とする。
 */
 .l--fluidCols {
-  --cols: var(--sz--min);
+  --cols: 20rem;
   --autoMode: auto-fit;
   display: grid;
   grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));

package/src/scss/primitives/layout/_sideMain.scss

@@ -4,7 +4,7 @@
  */
 .l--sideMain {
   --sideW: auto;
-  --mainW: max(var(--sz--min), 50%);
+  --mainW: max(20rem, 50%);
   display: flex;
   flex-wrap: wrap;
 

package/src/scss/primitives/trait/index.scss

@@ -4,4 +4,3 @@
 @forward './boxLink';
 @forward './coverLink'; // Note: position の関係で、boxLink より後で読み込む
 @forward './layer';
-@forward './vertical';

package/src/scss/primitives/trait/_vertical.scss

@@ -1,9 +0,0 @@
-.is--vertical {
-  writing-mode: var(--vertical-mode);
-}
-.is--vertical\@sm {
-  writing-mode: var(--_is_sm) var(--vertical-mode);
-}
-.is--vertical\@md {
-  writing-mode: var(--_is_md) var(--vertical-mode);
-}