lism-css 0.13.0 → 0.14.0

package/dist/lib/getLismProps.js

@@ -1,59 +1,53 @@
-import { TRAITS as P, PROPS as y } from "../config/index.js";
-import p from "./getLayoutProps.js";
-import S from "./isPresetValue.js";
-import E from "./isTokenValue.js";
-import C from "./getUtilKey.js";
-import c from "./getMaybeCssVar.js";
-import V from "./getBpData.js";
-import x from "./helper/atts.js";
-import w from "./helper/isEmptyObj.js";
-import U from "./helper/filterEmptyObj.js";
-import O from "./helper/mergeSet.js";
-import j from "./helper/splitWithComma.js";
-const _ = (n) => {
-  const i = y[n];
+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 x from "./isTokenValue.js";
+import S from "./getUtilKey.js";
+import u 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 b from "./helper/mergeSet.js";
+import U from "./helper/splitWithComma.js";
+const z = (n) => {
+  const i = d[n];
   return i && i?.token || "";
 };
-function z(n, i) {
-  if (!n) return "";
-  if (!i) return n;
-  const t = n.split(" "), s = t[0];
-  return [s, `${s}--${i}`, ...t.slice(1)].join(" ");
-}
 class L {
   // 最終出力 className
   className = "";
-  // 出力順のためのクラスバケット: [lismClass] [lismTrait] [uClasses]
-  // - lismClass : コンポーネント基底クラス + variant + l--{layout}（getLayoutProps 側で付与済み）
-  // - lismTrait : is--* 等の trait クラス
-  // - uClasses  : set--* → u--* → -property の順で push される utility クラス
-  lismClass = "";
-  lismTrait = [];
+  // 出力順のためのクラスバケット: [primitiveClass] [uClasses]
+  // - primitiveClass : a--* / l--* / is--* の primitive クラス（getAtomicProps → getLayoutProps → analyzeTrait の順で push）
+  // - uClasses       : set--* → u--* → -property の順で push される utility クラス
+  primitiveClass = [];
   uClasses = [];
   styles = {};
   attrs = {};
   _propConfig;
   constructor(i) {
-    const { forwardedRef: t, class: s, className: e, lismClass: l, variant: r, style: o = {}, _propConfig: d = {}, ...u } = i;
-    this.styles = { ...o }, this._propConfig = { ...d }, this.lismClass = z(l, r), w(u) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, s);
+    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] [lismTrait] [uClasses]
+  // 出力順: [className&class] [primitiveClass] [uClasses]
+  // className と class が両方来た場合は両方マージする（atts 内で重複は除去される）。
   buildClassName(i, t) {
-    return x(i || t, this.lismClass, this.lismTrait, this.uClasses);
+    return A(i, t, this.primitiveClass, this.uClasses);
   }
   analyzeTrait(i, t) {
     const { className: s, preset: e, presetClass: l, customVar: r, tokenKey: o } = i;
-    t === !0 ? this.lismTrait.push(s) : e && S(e, t) ? this.lismTrait.push(`${s} ${l}:${String(t)}`) : t && (this.lismTrait.push(s), o && r && this.addStyle(r, c(t, o)));
+    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 i = this.extractProp("set"), t = this.extractProp("util");
-    O(void 0, i).forEach((s) => this.addUtil(`set--${s}`)), O(void 0, t).forEach((s) => this.addUtil(`u--${s}`)), Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(P, s)) {
-        const e = this.extractProp(s), l = P[s];
-        typeof l == "string" ? e && this.lismTrait.push(l) : this.analyzeTrait(l, e);
-      } else if (Object.hasOwn(y, s)) {
+    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") {
@@ -68,10 +62,10 @@ class L {
   // Lism Prop 解析
   analyzeLismProp(i, t) {
     if (t == null) return;
-    let s = y[i] || null;
+    let s = d[i] || null;
     if (s === null) return;
     this._propConfig?.[i] && (s = Object.assign({}, s, this._propConfig[i]));
-    const { base: e, ...l } = V(t);
+    const { base: e, ...l } = w(t);
     this.setAttrs(i, e, s), Object.keys(l).forEach((r) => {
       s && this.setAttrs(i, l[r], s, r);
     });
@@ -114,19 +108,19 @@ class L {
       return;
     }
     if (!e) {
-      const { presets: g, tokenClass: T, utils: $, shorthands: b } = s;
-      if (g && S(g, t)) {
+      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 (T && s.token && E(s.token, t)) {
+      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 a = "";
-      if ($ && typeof t == "string" && (a = C($, t)), !a && b && typeof t == "string" && (a = C(b, t, !0)), a) {
+      if (g && typeof t == "string" && (a = S(g, t)), !a && $ && typeof t == "string" && (a = S($, t, !0)), a) {
         this.addUtil(`${r}:${a}`);
         return;
       }
@@ -135,13 +129,13 @@ class L {
       this.addUtil(r);
       return;
     }
-    const { prop: o, isVar: d, alwaysVar: u, token: m, bp: k } = s;
+    const { prop: o, isVar: c, alwaysVar: O, token: y, bp: k } = s;
     let f;
-    if (m && (typeof t == "string" || typeof t == "number") ? f = c(t, m) : typeof t == "string" || typeof t == "number" ? f = t : f = JSON.stringify(t), !e) {
-      if (d) {
+    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);
         return;
-      } else if (!k && !u) {
+      } else if (!k && !O) {
         this.addStyle(o, f);
         return;
       }
@@ -162,7 +156,7 @@ class L {
   // 	});
   // }
   setHovProps(i) {
-    i && (i === "-" || i === !0 ? this.addUtil("-hov") : typeof i == "string" ? j(i).forEach((t) => {
+    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];
@@ -170,31 +164,31 @@ class L {
         if (s === "-" || s === !0)
           this.addUtil(`-hov:${t}`);
         else if (t === "class")
-          j(s).forEach((e) => {
+          U(s).forEach((e) => {
             this.addUtil(`-hov:${e}`);
           });
         else if (typeof s == "string" || typeof s == "number") {
-          const e = c(s, _(t));
+          const e = u(s, z(t));
           this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function X(n) {
+function Y(n) {
   if (Object.keys(n).length === 0)
     return {};
-  const { layout: i, ...t } = n, s = new L(p(i, t));
+  const { atomic: i, layout: t, ...s } = n, e = V(i, s), l = E(t, e), r = new L(l);
   return {
-    ...U({
-      className: s.className,
-      style: U(s.styles)
+    ...p({
+      className: r.className,
+      style: p(r.styles)
     }),
-    ...s.attrs
+    ...r.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
   L as LismPropsData,
-  X as default
+  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

@@ -0,0 +1,22 @@
+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;
+}
+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

@@ -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.0",
+  "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/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

@@ -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/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/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/dist/components/atomic/Decorator/getProps.d.ts

@@ -1,8 +0,0 @@
-import { LismProps } from '../../../lib/getLismProps';
-export interface DecoratorOwnProps {
-    size?: string;
-    clipPath?: string;
-    boxSizing?: string;
-}
-export type DecoratorProps = LismProps & DecoratorOwnProps;
-export default function getDecoratorProps({ lismClass, size, clipPath, boxSizing, style: outerStyle, ...rest }: DecoratorProps): LismProps;

package/dist/components/atomic/Decorator/getProps.js

@@ -1,15 +0,0 @@
-import f from "../../../lib/helper/atts.js";
-function p({ lismClass: e, size: s, clipPath: o, boxSizing: a, style: i, ...n }) {
-  const r = i ?? {};
-  o && (r.clipPath = o), a && (r.boxSizing = a);
-  const t = { ...n };
-  s && (t.ar = "1/1", t.w = s), t.style = r;
-  const c = {
-    lismClass: f(e, "a--decorator"),
-    "aria-hidden": "true"
-  };
-  return Object.assign(c, t);
-}
-export {
-  p as default
-};

package/dist/components/atomic/Divider/getProps.d.ts

@@ -1,2 +0,0 @@
-import { LismProps } from '../../../lib/getLismProps';
-export declare function getDividerProps({ lismClass, ...props }: LismProps): LismProps;

package/dist/components/atomic/Divider/getProps.js

@@ -1,11 +0,0 @@
-import t from "../../../lib/helper/atts.js";
-function a({ lismClass: r, ...i }) {
-  return {
-    lismClass: t(r, "a--divider"),
-    "aria-hidden": "true",
-    ...i
-  };
-}
-export {
-  a as getDividerProps
-};

package/dist/components/atomic/Spacer/getProps.d.ts

@@ -1,2 +0,0 @@
-import { LismProps } from '../../../lib/getLismProps';
-export default function getSpacerProps({ lismClass, ...props }: LismProps): LismProps;

package/dist/components/atomic/Spacer/getProps.js

@@ -1,27 +0,0 @@
-import s from "../../../lib/helper/atts.js";
-import u from "../../../lib/getBpData.js";
-import c from "../../../lib/getMaybeCssVar.js";
-function h({ lismClass: l, ...e }) {
-  const n = {
-    lismClass: s(l, "a--spacer"),
-    "aria-hidden": "true"
-  };
-  if (e.h != null) {
-    let t = u(e.h);
-    t = Object.entries(t).reduce(
-      (r, [a, i]) => (r[a] = c(i, "space"), r),
-      {}
-    ), e.h = t;
-  }
-  if (e.w != null) {
-    let t = u(e.w);
-    t = Object.entries(t).reduce(
-      (r, [a, i]) => (r[a] = c(i, "space"), r),
-      {}
-    ), e.w = t;
-  }
-  return { ...n, ...e };
-}
-export {
-  h as default
-};

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);
-}