lism-css 0.13.0 → 0.13.1

package/dist/components/atomic/Decorator/Decorator.d.ts

@@ -1,2 +1,9 @@
-import { DecoratorProps } from './getProps';
+import { LismComponentProps } from '../../Lism/Lism';
+import { CssValue } from '../../../lib/types/LayoutProps';
+export interface DecoratorOwnProps {
+    size?: CssValue;
+    clipPath?: string;
+    boxSizing?: string;
+}
+export type DecoratorProps = LismComponentProps & DecoratorOwnProps;
 export default function Decorator(props: DecoratorProps): import("react").JSX.Element;

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

@@ -1,9 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "./getProps.js";
-import m from "../../Lism/index.js";
-function p(r) {
-  return /* @__PURE__ */ o(m, { ...t(r) });
+import t from "../../Lism/index.js";
+function i(r) {
+  return /* @__PURE__ */ o(t, { atomic: "decorator", "aria-hidden": "true", ...r });
 }
 export {
-  p as default
+  i as default
 };

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

@@ -1,9 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import { getDividerProps as o } from "./getProps.js";
+import { jsx as r } from "react/jsx-runtime";
 import t from "../../Lism/index.js";
-function p(r) {
-  return /* @__PURE__ */ i(t, { ...o(r) });
+function d(i) {
+  return /* @__PURE__ */ r(t, { atomic: "divider", "aria-hidden": "true", ...i });
 }
 export {
-  p as default
+  d as default
 };

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

@@ -1,56 +1,55 @@
-import S from "./presets.js";
-import h from "../../../lib/helper/atts.js";
-function d(m) {
-  const f = {}, s = m.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
-  if (s) {
-    const [, c, t] = s, u = /([\w-]+)=["']([^"']*)["']/g;
+import p from "./presets.js";
+function S(m) {
+  const c = {}, e = m.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
+  if (e) {
+    const [, f, t] = e, u = /([\w-]+)=["']([^"']*)["']/g;
     let a;
-    for (; (a = u.exec(c)) !== null; ) {
-      const [, i, o] = a;
-      if (i === "style") {
-        const g = {};
-        o.split(";").forEach((l) => {
-          const [n, r] = l.split(":").map((e) => e.trim());
-          n && r && (g[n] = r);
-        }), f[i] = g;
+    for (; (a = u.exec(f)) !== null; ) {
+      const [, n, g] = a;
+      if (n === "style") {
+        const o = {};
+        g.split(";").forEach((s) => {
+          const [r, i] = s.split(":").map((l) => l.trim());
+          r && i && (o[r] = i);
+        }), c[n] = o;
       } else
-        f[i] = o;
+        c[n] = g;
     }
-    return { svgProps: f, svgContent: t };
+    return { svgProps: c, svgContent: t };
   }
   return {};
 }
-function b({ lismClass: m, as: f, icon: s, label: c, exProps: t = {}, ...u }) {
-  let a = f || "span", i = "";
+function C({ lismClass: m, as: c, icon: e, label: f, exProps: t = {}, ...u }) {
+  let a = c || "span", n = "";
   const {
-    style: o = {},
-    className: g = "",
-    ...l
+    style: g = {},
+    className: o = "",
+    ...s
   } = u;
-  let n = o, r = g;
-  if (l.viewBox) {
+  let r = g, i = o;
+  if (s.viewBox) {
     a = "svg";
-    const e = l.size;
-    e && delete l.size, l.width || (t.width = e || "1em"), l.height || (t.height = e || "1em");
-  } else if (l.src)
+    const l = s.size;
+    l && delete s.size, s.width || (t.width = l || "1em"), s.height || (t.height = l || "1em");
+  } else if (s.src)
     a = "img";
-  else if (s)
-    if (typeof s == "string")
-      if (s.startsWith("<svg")) {
+  else if (e)
+    if (typeof e == "string")
+      if (e.startsWith("<svg")) {
         a = "_SVG_";
-        const { svgProps: e = {}, svgContent: v = "" } = d(s), { class: y, style: _, ...p } = e;
-        r = h(r, y), n = { ...n, ..._ }, t = { ...t, ...p, fill: "currentColor" }, i = v;
+        const { svgProps: l = {}, svgContent: v = "" } = S(e), { class: h, style: y, ..._ } = l;
+        h && (i = i ? `${i} ${h}` : h), r = { ...r, ...y }, t = { ...t, ..._, fill: "currentColor" }, n = v;
       } else {
-        const e = S[s] || null;
-        e != null && (a = "_SVG_", t = { ...t, ...e });
+        const l = p[e] || null;
+        l != null && (a = "_SVG_", t = { ...t, ...l });
       }
-    else if (typeof s == "object" && s.as) {
-      const { as: e, ...v } = s;
-      a = e, t = { ...t, ...v };
+    else if (typeof e == "object" && e.as) {
+      const { as: l, ...v } = e;
+      a = l, t = { ...t, ...v };
     } else
-      a = s;
-  return c ? (t["aria-label"] = c, t.role = "img") : t["aria-hidden"] = "true", l.lismClass = h(m, "a--icon", r), l.style = { ...n }, { Component: a, lismProps: l, exProps: t, content: i };
+      a = e;
+  return f ? (t["aria-label"] = f, t.role = "img") : t["aria-hidden"] = "true", s.lismClass = m, s.atomic = "icon", i && (s.className = i), s.style = { ...r }, { Component: a, lismProps: s, exProps: t, content: n };
 }
 export {
-  b as default
+  C as default
 };

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

@@ -1,9 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import t from "./getProps.js";
-import m from "../../Lism/index.js";
-function i(r) {
-  return /* @__PURE__ */ o(m, { ...t(r) });
+import { jsx as t } from "react/jsx-runtime";
+import a from "../../Lism/index.js";
+function o(r) {
+  return /* @__PURE__ */ t(a, { atomic: "spacer", "aria-hidden": "true", ...r });
 }
 export {
-  i as default
+  o as default
 };

package/dist/config/index.js

@@ -1,12 +1,12 @@
 import r from "./default-config.js";
 import s from "lism-css/config.js";
-import { objDeepMerge as e, arrayConvertToSet as n } from "./helper.js";
-let t = e(r, s);
-typeof window < "u" && window._LISM_CSS_CONFIG_ && (t = e(t, window._LISM_CSS_CONFIG_));
+import { arrayConvertToSet as e, objDeepMerge as n } from "./helper.js";
+let t = n(r, s);
+typeof window < "u" && window._LISM_CSS_CONFIG_ && (t = n(t, window._LISM_CSS_CONFIG_));
 const i = t, { tokens: o, props: c, traits: C } = i, S = {
   color: [...o.c.values, ...o.palette.values],
   ...o
-}, m = n(structuredClone(S)), p = n(structuredClone(c)), u = C, l = ["sm", "md", "lg", "xl"], a = ["base", ...l];
+}, m = e(structuredClone(S)), p = e(structuredClone(c)), u = C, l = ["sm", "md", "lg", "xl"], a = ["base", ...l];
 export {
   l as BREAK_POINTS,
   a as BREAK_POINTS_ALL,

package/dist/lib/getAtomicProps.d.ts

@@ -0,0 +1,27 @@
+import { StyleWithCustomProps } from './types';
+import { AtomicType } from './types/AtomicProps';
+import { CssValue } from './types/LayoutProps';
+export type { AtomicType };
+interface PropConfig {
+    isVar?: number;
+    [key: string]: unknown;
+}
+interface AtomicOwnProps {
+    size?: CssValue;
+    clipPath?: string;
+    boxSizing?: string;
+}
+type AtomicSpecificKeys = keyof AtomicOwnProps;
+export interface BaseProps {
+    lismClass?: string;
+    primitiveClass?: string[];
+    style?: StyleWithCustomProps;
+    _propConfig?: Record<string, PropConfig>;
+    w?: unknown;
+    h?: unknown;
+    ar?: unknown;
+}
+interface InputProps extends BaseProps, AtomicOwnProps {
+    [key: string]: unknown;
+}
+export default function getAtomicProps<P extends InputProps>(atomic: AtomicType | undefined, props: P): Omit<P, AtomicSpecificKeys> & BaseProps;

package/dist/lib/getAtomicProps.js

@@ -0,0 +1,32 @@
+import c from "./getBpData.js";
+import f from "./getMaybeCssVar.js";
+function a(r, ...t) {
+  return [...r ?? [], ...t];
+}
+function u(r) {
+  const t = c(r), e = {};
+  return Object.entries(t).forEach(([n, i]) => {
+    e[n] = f(i, "space");
+  }), e;
+}
+function m(r, t) {
+  if (!r) return t;
+  const e = {
+    ...t,
+    primitiveClass: a(t.primitiveClass, `a--${r}`)
+  };
+  return r === "spacer" ? l(e) : r === "decorator" ? p(e) : e;
+}
+function l(r) {
+  const t = { ...r };
+  return t.w != null && (t.w = u(t.w)), t.h != null && (t.h = u(t.h)), t;
+}
+function p({ size: r, clipPath: t, boxSizing: e, style: n, ...i }) {
+  const o = { ...n };
+  t && (o.clipPath = t), e && (o.boxSizing = e);
+  const s = { ...i, style: o };
+  return r && (s.ar = "1/1", s.w = r), s;
+}
+export {
+  m as default
+};

package/dist/lib/getLayoutProps.d.ts

@@ -15,6 +15,7 @@ interface LayoutOwnProps {
 type LayoutSpecificKeys = keyof LayoutOwnProps;
 export interface BaseProps {
     lismClass?: string;
+    primitiveClass?: string[];
     style?: StyleWithCustomProps;
     _propConfig?: Record<string, PropConfig>;
 }

package/dist/lib/getLayoutProps.js

@@ -1,26 +1,36 @@
-import r from "./helper/atts.js";
-import f from "./isTokenValue.js";
-import t from "./getMaybeCssVar.js";
-function g(e, s) {
-  if (!e) return s;
-  const i = {
-    ...s,
-    lismClass: r(s.lismClass, `l--${e}`)
+import s from "./isTokenValue.js";
+import n from "./getMaybeCssVar.js";
+function f(e, ...i) {
+  return [...e ?? [], ...i];
+}
+function g(e, i) {
+  if (!e) return i;
+  const r = {
+    ...i,
+    primitiveClass: f(i.primitiveClass, `l--${e}`)
   };
-  return e === "flow" ? a(i) : e === "sideMain" ? u(i) : e === "fluidCols" ? o(i) : e === "switchCols" ? m(i) : i;
+  return e === "flow" ? c(r) : e === "sideMain" ? l(r) : e === "fluidCols" ? o(r) : e === "switchCols" ? a(r) : r;
 }
-function u({ sideW: e, mainW: s, style: i, ...l }) {
-  const n = { ...i };
-  return e != null && (n["--sideW"] = t(e, "sz")), s != null && (n["--mainW"] = t(s, "sz")), { ...l, style: n };
+function l({ sideW: e, mainW: i, style: r, ...t }) {
+  const u = { ...r };
+  return e != null && (u["--sideW"] = n(e, "sz")), i != null && (u["--mainW"] = n(i, "sz")), { ...t, style: u };
 }
-function o({ autoFill: e, style: s, ...i }) {
-  return e ? { ...i, style: { ...s, "--autoMode": "auto-fill" } } : { ...i, style: s };
+function o({ autoFill: e, style: i, ...r }) {
+  return e ? { ...r, style: { ...i, "--autoMode": "auto-fill" } } : { ...r, style: i };
 }
-function a({ flow: e, style: s, ...i }) {
-  return f("flow", e) ? i.lismClass = r(i.lismClass, `-flow:${e}`) : e && (i.lismClass = r(i.lismClass, "-flow:"), s = { ...s, "--flow": t(e, "space") }), { ...i, style: s };
+function c({ flow: e, style: i, primitiveClass: r, ...t }) {
+  return s("flow", e) ? {
+    ...t,
+    primitiveClass: f(r, `-flow:${e}`),
+    style: i
+  } : e ? {
+    ...t,
+    primitiveClass: f(r, "-flow:"),
+    style: { ...i, "--flow": n(e, "space") }
+  } : { ...t, primitiveClass: r, style: i };
 }
-function m({ breakSize: e, style: s, ...i }) {
-  return e ? { ...i, style: { ...s, "--breakSize": t(e, "sz") } } : { ...i, style: s };
+function a({ breakSize: e, style: i, ...r }) {
+  return e ? { ...r, style: { ...i, "--breakSize": n(e, "sz") } } : { ...r, style: i };
 }
 export {
   g as default

package/dist/lib/getLismProps.d.ts

@@ -2,7 +2,8 @@ import { StyleWithCustomProps } from './types';
 import { TraitProps, SetPropValue, UtilPropValue } from './types/TraitProps';
 import { PropValueTypes } from './types/PropValueTypes';
 import { LayoutType, LayoutProps } from './types/LayoutProps';
-export { type LayoutType };
+import { AtomicType, AtomicProps } from './types/AtomicProps';
+export { type LayoutType, type AtomicType };
 interface PropConfig {
     prop?: string;
     token?: string | null | undefined | false;
@@ -32,9 +33,14 @@ interface TraitPropDataObject {
 }
 export interface LismPropsBase extends TraitProps, PropValueTypes {
     forwardedRef?: React.Ref<any>;
-    class?: string;
+    class?: string | null;
     className?: string;
     lismClass?: string;
+    /**
+     * a--* / l--* / is--* クラスを集約する内部スロット。
+     * 通常は getLayoutProps / getAtomicProps 経由で push される。
+     */
+    primitiveClass?: string[];
     variant?: string;
     style?: StyleWithCustomProps;
     _propConfig?: Record<string, PropConfig>;
@@ -48,13 +54,13 @@ export interface LismPropsBase extends TraitProps, PropValueTypes {
 export declare class LismPropsData {
     className: string;
     lismClass: string;
-    lismTrait: string[];
+    primitiveClass: string[];
     uClasses: string[];
     styles: StyleWithCustomProps;
     attrs: Record<string, unknown>;
     _propConfig?: Record<string, PropConfig>;
     constructor(allProps: LismPropsBase & Record<string, unknown>);
-    buildClassName(userClassName?: string, astroClassName?: string): string;
+    buildClassName(userClassName?: string, astroClassName?: string | null): string;
     analyzeTrait(traitPropData: TraitPropDataObject, propVal: unknown): void;
     analyzeProps(): void;
     analyzeLismProp(propName: string, propVal: unknown): void;
@@ -71,7 +77,7 @@ export declare class LismPropsData {
     setAttrs(propKey: string, val: unknown, propConfig?: PropConfig, bpKey?: string): void;
     setHovProps(hoverData: boolean | string | Record<string, unknown> | null): void;
 }
-export interface LismProps extends LismPropsBase, LayoutProps {
+export interface LismProps extends LismPropsBase, LayoutProps, AtomicProps {
 }
 export interface LismOutputProps {
     className?: string;

package/dist/lib/getLismProps.js

@@ -1,133 +1,144 @@
-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];
-  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 || "";
 };
-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(" ");
+function z(o, s) {
+  if (!o) return "";
+  if (!s) return o;
+  const t = o.split(" ")[0];
+  return `${o} ${t}--${s}`;
 }
-class L {
+class T {
   // 最終出力 className
   className = "";
-  // 出力順のためのクラスバケット: [lismClass] [lismTrait] [uClasses]
-  // - lismClass : コンポーネント基底クラス + variant + l--{layout}（getLayoutProps 側で付与済み）
-  // - lismTrait : is--* 等の trait クラス
-  // - uClasses  : set--* → u--* → -property の順で push される utility クラス
+  // 出力順のためのクラスバケット: [lismClass] [primitiveClass] [uClasses]
+  // - lismClass      : c--* 基底クラス（variant BEM 展開の対象）
+  // - primitiveClass : a--* / l--* / is--* の primitive クラス（getAtomicProps → getLayoutProps → analyzeTrait の順で push）
+  // - uClasses       : set--* → u--* → -property の順で push される utility クラス
   lismClass = "";
-  lismTrait = [];
+  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);
+  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);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
-  // 出力順: [user/astro className] [lismClass] [lismTrait] [uClasses]
-  buildClassName(i, t) {
-    return x(i || t, this.lismClass, this.lismTrait, this.uClasses);
+  // 出力順: [user/astro className] [lismClass] [primitiveClass] [uClasses]
+  buildClassName(s, t) {
+    return A(s || t || void 0, this.lismClass, 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)));
+  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("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)) {
-        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);
       }
     });
   }
   // Lism Prop 解析
-  analyzeLismProp(i, t) {
+  analyzeLismProp(s, t) {
     if (t == null) return;
-    let s = y[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: g, tokenClass: T, utils: $, shorthands: b } = s;
-      if (g && S(g, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addUtil(`${r}:${h}`);
+      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 (T && s.token && E(s.token, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addUtil(`${r}:${h}`);
+      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 a = "";
-      if ($ && typeof t == "string" && (a = C($, t)), !a && b && typeof t == "string" && (a = C(b, t, !0)), a) {
-        this.addUtil(`${r}:${a}`);
+      let h = "";
+      if ($ && typeof t == "string" && (h = p($, t)), !h && C && typeof t == "string" && (h = p(C, t, !0)), h) {
+        this.addUtil(`${r}:${h}`);
         return;
       }
     }
@@ -135,14 +146,14 @@ class L {
       this.addUtil(r);
       return;
     }
-    const { prop: o, isVar: d, alwaysVar: u, token: m, bp: k } = s;
+    const { prop: n, isVar: c, alwaysVar: d, token: a, bp: k } = i;
     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) {
-        this.addStyle(`--${i}`, 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 (!k && !u) {
-        this.addStyle(o, f);
+      } else if (!k && !d) {
+        this.addStyle(n, f);
         return;
       }
     }
@@ -161,40 +172,40 @@ class L {
   // 		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 = c(s, _(t));
+        else if (typeof i == "string" || typeof i == "number") {
+          const e = y(i, _(t));
           this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function X(n) {
-  if (Object.keys(n).length === 0)
+function Z(o) {
+  if (Object.keys(o).length === 0)
     return {};
-  const { layout: i, ...t } = n, s = new L(p(i, t));
+  const { atomic: s, layout: t, ...i } = o, e = V(s, i), l = E(t, e), r = new T(l);
   return {
-    ...U({
-      className: s.className,
-      style: U(s.styles)
+    ...S({
+      className: r.className,
+      style: S(r.styles)
     }),
-    ...s.attrs
+    ...r.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  L as LismPropsData,
-  X as default
+  T as LismPropsData,
+  Z 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.13.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/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/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
-};