@lism-css/ui 0.11.0 → 0.13.0

package/dist/components/Tabs/setTabs.js

@@ -1,28 +1,38 @@
-function u(t) {
+function d(t) {
   t.preventDefault();
-  const r = t.currentTarget;
-  i(r);
+  const s = t.currentTarget;
+  u(s);
 }
-const i = (t) => {
+const u = (t) => {
   if (t.getAttribute("aria-selected") === "true") return;
-  const e = t.getAttribute("aria-controls"), n = document.getElementById(e);
-  if (n === null) return;
-  const s = t.parentNode.parentNode.querySelector('[aria-selected="true"]'), o = s.getAttribute("aria-controls"), a = document.getElementById(o);
-  t.setAttribute("aria-selected", "true"), s.setAttribute("aria-selected", "false"), a.setAttribute("aria-hidden", "true"), n.setAttribute("aria-hidden", "false");
+  const e = t.getAttribute("aria-controls");
+  if (!e) return;
+  const i = document.getElementById(e);
+  if (i === null) return;
+  const o = t.parentNode?.parentNode;
+  if (!o) return;
+  const a = o.querySelector('[aria-selected="true"]');
+  if (!a) return;
+  const r = a.getAttribute("aria-controls");
+  if (!r) return;
+  const n = document.getElementById(r);
+  t.setAttribute("aria-selected", "true"), a.setAttribute("aria-selected", "false"), n?.setAttribute("aria-hidden", "true"), i.setAttribute("aria-hidden", "false");
 };
-function b(t) {
-  t.querySelectorAll('button[role="tab"]').forEach((l) => {
-    l.addEventListener("click", function(d) {
-      u(d);
+function f(t) {
+  t.querySelectorAll('button[role="tab"]').forEach((c) => {
+    c.addEventListener("click", function(l) {
+      d(l);
     });
   });
   const e = window?.location?.href;
   if (!e || !(e.indexOf("?lism-tab=") !== -1)) return;
-  const o = new URL(e).searchParams.get("lism-tab"), a = t.querySelector(`[aria-controls="${o}"]`);
-  a && (t.dataset.hasTabLink = "1", i(a), setTimeout(() => {
+  const r = new URL(e).searchParams.get("lism-tab");
+  if (!r) return;
+  const n = t.querySelector(`[aria-controls="${r}"]`);
+  n && (t.dataset.hasTabLink = "1", u(n), setTimeout(() => {
     delete t.dataset.hasTabLink;
   }, 10));
 }
 export {
-  b as default
+  f as default
 };

package/dist/lism-css/dist/components/{Center → layout/Center}/index.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import o from "../Lism/index.js";
+import o from "../../Lism/index.js";
 function n(r) {
   return /* @__PURE__ */ t(o, { layout: "center", ...r });
 }

package/dist/lism-css/dist/components/{Flex → layout/Flex}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function e(o) {
   return /* @__PURE__ */ r(t, { layout: "flex", ...o });
 }

package/dist/lism-css/dist/components/{Flow → layout/Flow}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(o) {
   return /* @__PURE__ */ r(t, { layout: "flow", ...o });
 }

package/dist/lism-css/dist/components/{Frame → layout/Frame}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(r) {
   return /* @__PURE__ */ o(t, { layout: "frame", ...r });
 }

package/dist/lism-css/dist/components/{Grid → layout/Grid}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(r) {
   return /* @__PURE__ */ o(t, { layout: "grid", ...r });
 }

package/dist/lism-css/dist/components/{Stack → layout/Stack}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import r from "../Lism/index.js";
+import r from "../../Lism/index.js";
 function m(t) {
   return /* @__PURE__ */ o(r, { layout: "stack", ...t });
 }

package/dist/lism-css/dist/config/default-config.js

@@ -1,11 +1,11 @@
 import o from "./defaults/tokens.js";
-import t from "./defaults/props.js";
-import r from "./defaults/states.js";
-const e = {
+import r from "./defaults/props.js";
+import t from "./defaults/traits.js";
+const s = {
   tokens: o,
-  props: t,
-  states: r
+  props: r,
+  traits: t
 };
 export {
-  e as default
+  s as default
 };

package/dist/lism-css/dist/config/defaults/props.js

@@ -1,4 +1,4 @@
-const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "flex-end" }, p = { s: "start", e: "end", c: "center", fs: "flex-s", fe: "flex-e" }, t = {
+const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "start", e: "end", c: "center", fs: "flex-start", fe: "flex-end" }, o = {
   f: { prop: "font", presets: ["inherit"] },
   fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1, alwaysVar: 1 },
   fw: {
@@ -30,8 +30,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // tsh: { prop: 'textShadow' },
   d: {
     prop: "display",
-    presets: ["none", "block"],
-    utils: { "in-flex": "inline-flex" },
+    presets: ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"],
     bp: 1
   },
   o: { prop: "opacity", presets: ["0"], token: "o", tokenClass: 1 },
@@ -108,7 +107,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   bdc: {
     isVar: 1,
     presets: ["brand", "accent", "divider", "inherit", "transparent"],
-    utils: { cc: "currentColor" },
+    utils: { current: "currentColor" },
     token: "color"
   },
   bdw: { isVar: 1, bp: 1 },
@@ -144,8 +143,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // position
   pos: {
     prop: "position",
-    presets: ["static", "fixed", "sticky"],
-    utils: { rel: "relative", abs: "absolute" }
+    presets: ["static", "fixed", "sticky", "relative", "absolute"]
   },
   z: { prop: "zIndex", presets: ["-1", "0", "1", "99"] },
   t: { prop: "top", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
@@ -208,14 +206,14 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     overwriteBaseVar: 1,
     bp: 1
   },
-  "g-x": { prop: "columnGap", token: "space", bp: 1 },
-  "g-y": { prop: "rowGap", token: "space", bp: 1 },
+  cg: { prop: "columnGap", token: "space", bp: 1 },
+  rg: { prop: "rowGap", token: "space", bp: 1 },
   cols: { isVar: 1, bp: 1 },
   rows: { isVar: 1, bp: 1 },
   // flex
   fxf: { prop: "flexFlow" },
   fxw: { prop: "flexWrap", presets: ["wrap"], bp: 1 },
-  fxd: { prop: "flexDirection", utils: { col: "column", "col-r": "column-reverse", "row-r": "row-reverse" }, bp: 1 },
+  fxd: { prop: "flexDirection", presets: ["column", "column-reverse", "row-reverse"], bp: 1 },
   fx: { prop: "flex", presets: ["1"], bp: 1 },
   fxg: { prop: "flexGrow", presets: ["1"] },
   fxsh: { prop: "flexShrink", presets: ["0"] },
@@ -224,12 +222,6 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // gd: { prop: 'grid' },
   gt: {
     prop: "gridTemplate",
-    presets: ["repeat"],
-    exUtility: {
-      repeat: {
-        "grid-template": "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)"
-      }
-    },
     bp: 1
   },
   gta: { prop: "gridTemplateAreas", bp: 1 },
@@ -244,7 +236,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
     bp: 1
   },
-  gaf: { prop: "gridAutoFlow", utils: { row: "row", col: "column" }, bp: 1 },
+  gaf: { prop: "gridAutoFlow", presets: ["row", "column"], bp: 1 },
   //dense
   gac: { prop: "gridAutoColumns" },
   gar: { prop: "gridAutoRows" },
@@ -260,29 +252,27 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
   ai: {
     prop: "alignItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   ac: {
     prop: "alignContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
   ji: {
     prop: "justifyItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   jc: {
     prop: "justifyContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
@@ -328,7 +318,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // 	},
   // },
   // others
-  ovwrap: { prop: "overflowWrap", utils: { any: "anywhere" } },
+  ovwrap: { prop: "overflowWrap", presets: ["anywhere"] },
   whspace: { prop: "whiteSpace", presets: ["nowrap"] },
   // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
   float: { prop: "float", presets: ["left", "right"] },
@@ -336,5 +326,5 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   isolation: { prop: "isolation", presets: ["isolate"] }
 };
 export {
-  t as default
+  o as default
 };

package/dist/lism-css/dist/config/defaults/traits.js

@@ -0,0 +1,19 @@
+const i = {
+  isContainer: "is--container",
+  isWrapper: {
+    className: "is--wrapper",
+    preset: ["s", "l"],
+    presetClass: "-contentSize",
+    customVar: "--contentSize",
+    tokenKey: "sz"
+  },
+  isLayer: "is--layer",
+  isBoxLink: "is--boxLink",
+  isCoverLink: "is--coverLink",
+  isSide: "is--side",
+  isSkipFlow: "is--skipFlow",
+  isVertical: "is--vertical"
+};
+export {
+  i as default
+};

package/dist/lism-css/dist/config/index.js

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

package/dist/lism-css/dist/lib/getLayoutProps.js

@@ -7,22 +7,19 @@ function w(l, t) {
     ...t,
     lismClass: i(t.lismClass, `l--${l}`)
   };
-  return l === "flow" ? e(s) : l === "grid" ? f(s) : l === "sideMain" ? u(s) : l === "fluidCols" ? m(s) : l === "switchCols" ? c(s) : s;
+  return l === "flow" ? e(s) : l === "sideMain" ? u(s) : l === "fluidCols" ? f(s) : l === "switchCols" ? m(s) : s;
 }
-function f({ _propConfig: l = {}, ...t }) {
-  return l.gta = { isVar: 1 }, l.gtc = { isVar: 1 }, l.gtr = { isVar: 1 }, { ...t, _propConfig: l };
+function u({ sideW: l, mainW: t, style: s, ...r }) {
+  const n = { ...s };
+  return l != null && (n["--sideW"] = o(l, "sz")), t != null && (n["--mainW"] = o(t, "sz")), { ...r, style: n };
 }
-function u({ sideW: l, mainW: t, style: s, ...n }) {
-  const r = { ...s };
-  return l != null && (r["--sideW"] = o(l, "sz")), t != null && (r["--mainW"] = o(t, "sz")), { ...n, style: r };
-}
-function m({ autoFill: l, style: t, ...s }) {
+function f({ autoFill: l, style: t, ...s }) {
   return l ? { ...s, style: { ...t, "--autoMode": "auto-fill" } } : { ...s, style: t };
 }
 function e({ flow: l, style: t, ...s }) {
   return a("flow", l) ? s.lismClass = i(s.lismClass, `-flow:${l}`) : l && (s.lismClass = i(s.lismClass, "-flow:"), t = { ...t, "--flow": o(l, "space") }), { ...s, style: t };
 }
-function c({ breakSize: l, style: t, ...s }) {
+function m({ breakSize: l, style: t, ...s }) {
   return l ? { ...s, style: { ...t, "--breakSize": o(l, "sz") } } : { ...s, style: t };
 }
 export {

package/dist/lism-css/dist/lib/getLismProps.js

@@ -1,140 +1,152 @@
-import { STATES as P, PROPS as S } from "../config/index.js";
+import { TRAITS as C, PROPS as u } from "../config/index.js";
 import j from "./getLayoutProps.js";
-import U from "./isPresetValue.js";
-import w from "./isTokenValue.js";
-import v from "./getUtilKey.js";
-import m from "./getMaybeCssVar.js";
-import z from "./getBpData.js";
+import P from "./isPresetValue.js";
+import N from "./isTokenValue.js";
+import S from "./getUtilKey.js";
+import c from "./getMaybeCssVar.js";
+import x from "./getBpData.js";
 import E from "./helper/atts.js";
-import N from "./helper/isEmptyObj.js";
-import C from "./helper/filterEmptyObj.js";
+import _ from "./helper/isEmptyObj.js";
+import U from "./helper/filterEmptyObj.js";
+import v from "./helper/mergeSet.js";
 import k from "./helper/splitWithComma.js";
-const _ = (h) => {
-  const s = S[h];
-  return s && s?.token || "";
+const z = (o) => {
+  const r = u[o];
+  return r && r?.token || "";
 };
-class x {
-  // propList = {};
+function w(o, r) {
+  if (!o) return "";
+  if (!r) return o;
+  const t = o.split(" "), s = t[0];
+  return [s, `${s}--${r}`, ...t.slice(1)].join(" ");
+}
+class A {
+  // 最終出力 className
   className = "";
+  // 出力順のためのクラスバケット: [lismClass] [lismTrait] [uClasses]
+  // - lismClass : コンポーネント基底クラス + variant + l--{layout}（getLayoutProps 側で付与済み）
+  // - lismTrait : is--* 等の trait クラス
+  // - uClasses  : set--* → u--* → -property の順で push される utility クラス
+  lismClass = "";
+  lismTrait = [];
   uClasses = [];
-  lismState = [];
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(s) {
-    const { forwardedRef: t, class: e, className: i, lismClass: o, variant: r, style: l = {}, _propConfig: n = {}, ...c } = s;
-    this.styles = { ...l }, this._propConfig = { ...n };
-    let f = o || "";
-    if (r && o) {
-      const y = o.split(" "), a = y[0], u = `${a}--${r}`;
-      f = [a, u, ...y.slice(1)].join(" ");
-    }
-    N(c) || (this.attrs = { ...c }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = E(i || e, f, this.lismState, this.uClasses);
+  constructor(r) {
+    const { forwardedRef: t, class: s, className: e, lismClass: a, variant: i, style: l = {}, _propConfig: d = {}, ...p } = r;
+    this.styles = { ...l }, this._propConfig = { ...d }, this.lismClass = w(a, i), _(p) || (this.attrs = { ...p }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, s);
+  }
+  // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
+  // 出力順: [user/astro className] [lismClass] [lismTrait] [uClasses]
+  buildClassName(r, t) {
+    return E(r || t, this.lismClass, this.lismTrait, this.uClasses);
   }
-  analyzeState(s, t) {
-    const { className: e, preset: i, presetClass: o, customVar: r, tokenKey: l, setStyles: n } = s;
-    t === !0 ? this.lismState.push(e) : i && U(i, t) ? this.lismState.push(`${e} ${o}:${String(t)}`) : t && (this.lismState.push(e), l && r ? this.addStyle(r, m(t, l)) : n && typeof t == "string" && this.addStyles(n(t)));
+  analyzeTrait(r, t) {
+    const { className: s, preset: e, presetClass: a, customVar: i, tokenKey: l } = r;
+    t === !0 ? this.lismTrait.push(s) : e && P(e, t) ? this.lismTrait.push(`${s} ${a}:${String(t)}`) : t && (this.lismTrait.push(s), l && i && this.addStyle(i, c(t, l)));
   }
   // prop解析
   analyzeProps() {
-    Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(P, s)) {
-        const t = this.extractProp(s), e = P[s];
-        typeof e == "string" ? t && this.lismState.push(e) : this.analyzeState(e, t);
-      } else if (Object.hasOwn(S, s)) {
-        const t = this.attrs[s];
-        delete this.attrs[s], this.analyzeLismProp(s, t);
+    const r = this.extractProp("set"), t = this.extractProp("util");
+    v(void 0, r).forEach((s) => this.addUtil(`set--${s}`)), v(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), a = C[s];
+        typeof a == "string" ? e && this.lismTrait.push(a) : this.analyzeTrait(a, e);
+      } else if (Object.hasOwn(u, s)) {
+        const e = this.attrs[s];
+        delete this.attrs[s], this.analyzeLismProp(s, e);
       } else if (s === "hov") {
-        const t = this.extractProp(s);
-        this.setHovProps(t);
+        const e = this.extractProp(s);
+        this.setHovProps(e);
       } else if (s === "css") {
-        const t = this.extractProp("css");
-        this.addStyles(t);
+        const e = this.extractProp("css");
+        this.addStyles(e);
       }
     });
   }
   // Lism Prop 解析
-  analyzeLismProp(s, t) {
+  analyzeLismProp(r, t) {
     if (t == null) return;
-    let e = S[s] || null;
-    if (e === null) return;
-    this._propConfig?.[s] && (e = Object.assign({}, e, this._propConfig[s]));
-    const { base: i, ...o } = z(t);
-    this.setAttrs(s, i, e), Object.keys(o).forEach((r) => {
-      e && this.setAttrs(s, o[r], e, r);
+    let s = u[r] || null;
+    if (s === null) return;
+    this._propConfig?.[r] && (s = Object.assign({}, s, this._propConfig[r]));
+    const { base: e, ...a } = x(t);
+    this.setAttrs(r, e, s), Object.keys(a).forEach((i) => {
+      s && this.setAttrs(r, a[i], s, i);
     });
   }
-  addUtil(s) {
-    this.uClasses.push(s);
+  addUtil(r) {
+    this.uClasses.push(r);
   }
-  addUtils(s) {
-    this.uClasses.push(...s);
+  addUtils(r) {
+    this.uClasses.push(...r);
   }
   // addState(state) {
   // 	this.stateClasses.push(state);
   // }
-  addStyle(s, t) {
-    this.styles[s] = t;
+  addStyle(r, t) {
+    this.styles[r] = t;
   }
-  addStyles(s) {
-    this.styles = { ...this.styles, ...s };
+  addStyles(r) {
+    this.styles = { ...this.styles, ...r };
   }
-  addAttrs(s) {
-    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
+  addAttrs(r) {
+    this.addStyles(r.styles || {}), this.addUtils(r.utils || []);
   }
-  extractProp(s) {
-    const t = this.attrs[s];
-    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
+  extractProp(r) {
+    const t = this.attrs[r];
+    return this.attrs[r] === void 0 ? null : (delete this.attrs[r], t);
   }
-  extractProps(s) {
+  extractProps(r) {
     const t = {};
-    return s.forEach((e) => {
-      this.attrs[e] !== void 0 && (t[e] = this.attrs[e], delete this.attrs[e]);
+    return r.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, e = {}, i = "") {
+  setAttrs(r, t, s = {}, e = "") {
     if (t == null || t === "" || t === !1) return;
-    let o = `--${s}`, r = `-${String(e.utilKey || s)}`;
-    if (i && (o = `--${s}_${i}`, r += `_${i}`), typeof t == "string" && t.startsWith(":")) {
-      this.addUtil(`${r}:${t.replace(":", "")}`);
+    let a = `--${r}`, i = `-${String(s.utilKey || r)}`;
+    if (e && (a = `--${r}_${e}`, i += `_${e}`), typeof t == "string" && t.startsWith(":")) {
+      this.addUtil(`${i}:${t.replace(":", "")}`);
       return;
     }
-    if (!i) {
-      const { presets: u, tokenClass: O, utils: g, shorthands: b } = e;
-      if (u && U(u, t)) {
-        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        d && this.addUtil(`${r}:${d}`);
+    if (!e) {
+      const { presets: y, tokenClass: T, utils: g, shorthands: b } = s;
+      if (y && P(y, t)) {
+        const f = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        f && this.addUtil(`${i}:${f}`);
         return;
       }
-      if (O && e.token && w(e.token, t)) {
-        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        d && this.addUtil(`${r}:${d}`);
+      if (T && s.token && N(s.token, t)) {
+        const f = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        f && this.addUtil(`${i}:${f}`);
         return;
       }
-      let p = "";
-      if (g && typeof t == "string" && (p = v(g, t)), !p && b && typeof t == "string" && (p = v(b, t, !0)), p) {
-        this.addUtil(`${r}:${p}`);
+      let h = "";
+      if (g && typeof t == "string" && (h = S(g, t)), !h && b && typeof t == "string" && (h = S(b, t, !0)), h) {
+        this.addUtil(`${i}:${h}`);
         return;
       }
     }
     if (t === !0 || t === "-") {
-      this.addUtil(r);
+      this.addUtil(i);
       return;
     }
-    const { prop: l, isVar: n, alwaysVar: c, token: f, bp: y } = e;
-    let a;
-    if (f && (typeof t == "string" || typeof t == "number") ? a = m(t, f) : typeof t == "string" || typeof t == "number" ? a = t : a = JSON.stringify(t), !i) {
-      if (n) {
-        this.addStyle(`--${s}`, a);
+    const { prop: l, isVar: d, alwaysVar: p, token: m, bp: O } = s;
+    let n;
+    if (m && (typeof t == "string" || typeof t == "number") ? n = c(t, m) : typeof t == "string" || typeof t == "number" ? n = t : n = JSON.stringify(t), !e) {
+      if (d) {
+        this.addStyle(`--${r}`, n);
         return;
-      } else if (!y && !c) {
-        this.addStyle(l, a);
+      } else if (!O && !p) {
+        this.addStyle(l, n);
         return;
       }
     }
-    this.addUtil(r), this.addStyle(o, a);
+    this.addUtil(i), this.addStyle(a, n);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -149,40 +161,40 @@ class x {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(s) {
-    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
+  setHovProps(r) {
+    r && (r === "-" || r === !0 ? this.addUtil("-hov") : typeof r == "string" ? k(r).forEach((t) => {
       this.addUtil(`-hov:${t}`);
-    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
-      const e = s[t];
-      if (!(e == null || e === "" || e === !1)) {
-        if (e === "-" || e === !0)
+    }) : typeof r == "object" && Object.keys(r).forEach((t) => {
+      const s = r[t];
+      if (!(s == null || s === "" || s === !1)) {
+        if (s === "-" || s === !0)
           this.addUtil(`-hov:${t}`);
         else if (t === "class")
-          k(e).forEach((i) => {
-            this.addUtil(`-hov:${i}`);
+          k(s).forEach((e) => {
+            this.addUtil(`-hov:${e}`);
           });
-        else if (typeof e == "string" || typeof e == "number") {
-          const i = m(e, _(t));
-          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, i);
+        else if (typeof s == "string" || typeof s == "number") {
+          const e = c(s, z(t));
+          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function q(h) {
-  if (Object.keys(h).length === 0)
+function B(o) {
+  if (Object.keys(o).length === 0)
     return {};
-  const { layout: s, ...t } = h, e = new x(j(s, t));
+  const { layout: r, ...t } = o, s = new A(j(r, t));
   return {
-    ...C({
-      className: e.className,
-      style: C(e.styles)
+    ...U({
+      className: s.className,
+      style: U(s.styles)
     }),
-    ...e.attrs
+    ...s.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  x as LismPropsData,
-  q as default
+  A as LismPropsData,
+  B as default
 };

package/dist/lism-css/dist/lib/helper/mergeSet.js

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