@lism-css/ui 0.12.0 → 0.13.1

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

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

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

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

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

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

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

@@ -1,14 +1,14 @@
-function t(n) {
-  return n ? Array.isArray(n) ? n.flatMap((r) => t(r)) : typeof n == "string" ? n.split(/[,\s]+/).map((r) => r.trim()).filter(Boolean) : [] : [];
+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 o(n, r, s) {
-  const e = [.../* @__PURE__ */ new Set([...t(n), ...t(r)])];
-  if (e.length === 0) return [];
-  const i = t(s);
-  if (i.length === 0) return e;
-  const a = new Set(i);
-  return e.filter((f) => !a.has(f));
+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 {
-  o as default
+  a as default
 };

package/dist/style.css

@@ -1 +1 @@
-@layer lism-modules{.c--accordion{--duration:var(--acc-duration,0.25s)}.c--accordion_item{--_panel-h:0px;--_icon-transform:rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform:rotate(90deg);--_panel-h:auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;height:1em;width:1em;&:after,&:before{background-color:currentColor;content:"";display:block;grid-area:1/1}&:before{height:100%;transform:var(--_icon-transform);transition:transform var(--duration);width:.1em}&:after{height:.1em;width:100%}}.c--accordion_button:focus-visible{outline:2px solid currentColor;outline-color:revert;outline-offset:-3px}@media (prefers-reduced-motion:reduce){.c--accordion_item{--duration:0s}}@media (scripting:none){.c--accordion_panel{content-visibility:visible!important;height:auto!important}.c--accordion_content{position:static!important}}}@layer lism-modules{.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism-modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism-modules{.c--chat{--cbox-bgPct:8%;grid-template-areas:"avatar name" "avatar body";grid-template-columns:auto 1fr;grid-template-rows:minmax(1.5rem,auto) auto;--_avator-size:clamp(48px,32px + 5cqw,64px);--_deco-size:calc(min(var(--_avator-size), 80px)/4 + 0.25rem);--_deco-mask:none;--_deco-t:0;--_deco-scale:1;--_deco-inset-x:0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{height:var(--_deco-size);top:var(--_deco-t);inset-inline:var(--_deco-inset-x);-webkit-mask:var(--_deco-mask) center/contain no-repeat;mask:var(--_deco-mask) center/contain no-repeat;scale:var(--_deco-scale);width:var(--_deco-size)}.c--chat--speak{--_deco-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x:auto calc(100% - 1px)}[data-chat-dir=end]{--_deco-scale:-1 1;--_deco-inset-x:calc(100% - 1px) auto;grid-template-areas:"name avatar" "body avatar";grid-template-columns:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-modules{.c--navMenu{--link-td:none;--hl:var(--hl--s);--_item-p:var(--s20);--focus-offset:-1px}.c--navMenu_nest{--_item-p:inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_item,.c--navMenu_nest{--bdc:inherit}.c--shapeDivider{--level:0;--_inner-offset:0px;--_inner-stretch:1;--_flipX:1;--_flipY:1;height:clamp(5px * var(--level),1cqw * var(--level),12px * var(--level));overflow:visible}}@layer lism-modules{.c--shapeDivider:where([data-flip^=X]){--_flipX:-1}.c--shapeDivider:where([data-flip$=Y]){--_flipY:-1}.c--shapeDivider_inner{--offsetY:0.5px;--offsetX:-0.5px;height:100%;scale:calc(var(--_flipX)*var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY)*var(--_flipY));width:calc(100% + 1px)}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{animation:lism--slideShape 12s linear infinite alternate;transform-origin:100% 0}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translateX(75%)}}
+@layer lism-component{.c--accordion{--duration:var(--acc-duration,0.25s)}.c--accordion_item{--_panel-h:0px;--_icon-transform:rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform:rotate(90deg);--_panel-h:auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;height:1em;width:1em;&:after,&:before{background-color:currentColor;content:"";display:block;grid-area:1/1}&:before{height:100%;transform:var(--_icon-transform);transition:transform var(--duration);width:.1em}&:after{height:.1em;width:100%}}.c--accordion_button:focus-visible{outline:2px solid currentColor;outline-color:revert;outline-offset:-3px}@media (prefers-reduced-motion:reduce){.c--accordion_item{--duration:0s}}@media (scripting:none){.c--accordion_panel{content-visibility:visible!important;height:auto!important}.c--accordion_content{position:static!important}}}@layer lism-component{.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism-component{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism-component{.c--chat{--cbox-bgPct:8%;grid-template-areas:"avatar name" "avatar body";grid-template-columns:auto 1fr;grid-template-rows:minmax(1.5rem,auto) auto;--_avator-size:clamp(48px,32px + 5cqw,64px);--_deco-size:calc(min(var(--_avator-size), 80px)/4 + 0.25rem);--_deco-mask:none;--_deco-t:0;--_deco-scale:1;--_deco-inset-x:0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{height:var(--_deco-size);top:var(--_deco-t);inset-inline:var(--_deco-inset-x);-webkit-mask:var(--_deco-mask) center/contain no-repeat;mask:var(--_deco-mask) center/contain no-repeat;scale:var(--_deco-scale);width:var(--_deco-size)}.c--chat--speak{--_deco-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x:auto calc(100% - 1px)}[data-chat-dir=end]{--_deco-scale:-1 1;--_deco-inset-x:calc(100% - 1px) auto;grid-template-areas:"name avatar" "body avatar";grid-template-columns:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-component{.c--navMenu{--link-td:none;--hl:var(--hl--s);--_item-p:var(--s20);--focus-offset:-1px}.c--navMenu_nest{--_item-p:inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_item,.c--navMenu_nest{--bdc:inherit}.c--shapeDivider{--level:0;--_inner-offset:0px;--_inner-stretch:1;--_flipX:1;--_flipY:1;height:clamp(5px * var(--level),1cqw * var(--level),12px * var(--level));overflow:visible}}@layer lism-component{.c--shapeDivider:where([data-flip^=X]){--_flipX:-1}.c--shapeDivider:where([data-flip$=Y]){--_flipY:-1}.c--shapeDivider_inner{--offsetY:0.5px;--offsetX:-0.5px;height:100%;scale:calc(var(--_flipX)*var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY)*var(--_flipY));width:calc(100% + 1px)}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{animation:lism--slideShape 12s linear infinite alternate;transform-origin:100% 0}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translateX(75%)}}

package/dist/ui.css

@@ -1 +1 @@
-@layer lism-modules{.c--accordion{--duration: var(--acc-duration, .25s)}.c--accordion_item{--_panel-h: 0px;--_icon-transform: rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform: rotate(90deg);--_panel-h: auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;width:1em;height:1em}.c--accordion_icon:before,.c--accordion_icon:after{content:"";display:block;grid-area:1 / 1;background-color:currentColor}.c--accordion_icon:before{width:.1em;height:100%;transition:transform var(--duration);transform:var(--_icon-transform)}.c--accordion_icon:after{height:.1em;width:100%}.c--accordion_button:focus-visible{outline:solid 2px currentColor;outline-color:revert;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.c--accordion_item{--duration: 0s}}@media(scripting:none){.c--accordion_panel{height:auto!important;content-visibility:visible!important}.c--accordion_content{position:static!important}}}@layer lism-modules{.c--details{--duration: var(--acc-duration, .25s);--_icon-scale: 1.1;--_icon-transform: rotate(0deg);--_content-gtr: 0fr}.c--details[open]{--_icon-transform: scaleY(-1);--_content-gtr: 1fr}.c--details_summary::-webkit-details-marker{display:none}.c--details_icon{--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');display:inline-grid;background-color:currentColor;-webkit-mask:var(--svg) no-repeat center center / contain;mask:var(--svg) no-repeat center center / contain;scale:var(--_icon-scale);transition:transform var(--duration);transform:var(--_icon-transform)}.c--details::details-content{display:grid;grid-template-rows:var(--_content-gtr);transition-duration:var(--duration);transition-property:content-visibility,grid-template;transition-behavior:allow-discrete}.c--details_body{overflow:hidden}}@layer lism-modules{.c--modal{--flow: 0;--duration: var(--modal-duration, .4s);width:100%;height:100%;max-width:100%;max-height:100%;overflow:unset;background:var(--backdrop-bg, rgb(0 0 0 / .6));transition-duration:var(--duration);transition-property:opacity}.c--modal::backdrop{background:none}.c--modal[open]{display:flex;flex-direction:column;justify-content:center}.c--modal_inner{--offset: 0 0;background-color:var(--base);transition:translate var(--duration);max-height:100%}.c--modal:not([data-is-open]){opacity:0}.c--modal:not([data-is-open])>.c--modal_inner{translate:var(--offset)}}@layer lism-modules{.c--navMenu{--link-td: none;--hl: var(--hl--s);--_item-p: var(--s20);--focus-offset: -1px}.c--navMenu_nest{--_item-p: inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_nest,.c--navMenu_item{--bdc: inherit}}@layer lism-modules{.c--tabs{display:grid;grid:"list" "panel" / 100%}.c--tabs_list{grid-area:list;display:flex;overflow-x:auto}.c--tabs_tab[aria-selected=true]{--_notSelected: }.c--tabs_tab[aria-selected=false]{--_isSelected: }:where(.c--tabs_tab){color:var(--_notSelected, var(--text-2))}.c--tabs_panel{grid-area:panel;width:100%}.c--tabs_panel:where([aria-hidden=true]){display:none}}@layer lism-modules{.c--badge{--c: var(--base);--bgc: var(--text);--bdc: transparent;color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc)}.c--badge--outline{--c: var(--text);--bgc: transparent;--bdc: currentColor}}@layer lism-modules{.c--button{--c: var(--base);--bgc: var(--text);--bdc: var(--bgc);color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc);gap:var(--s10);text-decoration:none;place-content:center;place-items:center}.c--button--outline{--c: var(--text);--bgc: transparent;--bdc: var(--c)}:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism-modules{.c--chat{--cbox-bgPct: 8%;grid-template-areas:"avatar name" "avatar body";grid-template-columns:auto 1fr;grid-template-rows:minmax(1.5rem,auto) auto;--_avator-size: clamp(48px, 32px + 5cqw, 64px);--_deco-size: calc(min(var(--_avator-size), 80px)/4 + .25rem) ;--_deco-mask: none;--_deco-t: 0;--_deco-scale: 1;--_deco-inset-x: 0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{top:var(--_deco-t);inset-inline:var(--_deco-inset-x);width:var(--_deco-size);height:var(--_deco-size);scale:var(--_deco-scale);-webkit-mask:var(--_deco-mask) center / contain no-repeat;mask:var(--_deco-mask) center / contain no-repeat}.c--chat--speak{--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x: auto calc(100% - 1px) }[data-chat-dir=end]{--_deco-scale: -1 1;--_deco-inset-x: calc(100% - 1px) auto;grid-template-areas:"name avatar" "body avatar";grid-template-columns:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-modules{.c--shapeDivider{--level: 0;--_inner-offset: 0px;--_inner-stretch: 1;--_flipX: 1;--_flipY: 1;height:clamp(calc(5px * var(--level)),calc(1cqw * var(--level)),calc(12px * var(--level)));overflow:visible}.c--shapeDivider:where([data-flip^=X]){--_flipX: -1}.c--shapeDivider:where([data-flip$=Y]){--_flipY: -1}.c--shapeDivider_inner{--offsetY: .5px;--offsetX: -.5px;height:100%;width:calc(100% + 1px);scale:calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY))}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{transform-origin:100% 0;animation:lism--slideShape 12s infinite alternate linear}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translate(75%)}}
+@layer lism-component{.c--accordion{--duration: var(--acc-duration, .25s)}.c--accordion_item{--_panel-h: 0px;--_icon-transform: rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform: rotate(90deg);--_panel-h: auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;width:1em;height:1em}.c--accordion_icon:before,.c--accordion_icon:after{content:"";display:block;grid-area:1 / 1;background-color:currentColor}.c--accordion_icon:before{width:.1em;height:100%;transition:transform var(--duration);transform:var(--_icon-transform)}.c--accordion_icon:after{height:.1em;width:100%}.c--accordion_button:focus-visible{outline:solid 2px currentColor;outline-color:revert;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.c--accordion_item{--duration: 0s}}@media(scripting:none){.c--accordion_panel{height:auto!important;content-visibility:visible!important}.c--accordion_content{position:static!important}}}@layer lism-component{.c--details{--duration: var(--acc-duration, .25s);--_icon-scale: 1.1;--_icon-transform: rotate(0deg);--_content-gtr: 0fr}.c--details[open]{--_icon-transform: scaleY(-1);--_content-gtr: 1fr}.c--details_summary::-webkit-details-marker{display:none}.c--details_icon{--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');display:inline-grid;background-color:currentColor;-webkit-mask:var(--svg) no-repeat center center / contain;mask:var(--svg) no-repeat center center / contain;scale:var(--_icon-scale);transition:transform var(--duration);transform:var(--_icon-transform)}.c--details::details-content{display:grid;grid-template-rows:var(--_content-gtr);transition-duration:var(--duration);transition-property:content-visibility,grid-template;transition-behavior:allow-discrete}.c--details_body{overflow:hidden}}@layer lism-component{.c--modal{--flow: 0;--duration: var(--modal-duration, .4s);width:100%;height:100%;max-width:100%;max-height:100%;overflow:unset;background:var(--backdrop-bg, rgb(0 0 0 / .6));transition-duration:var(--duration);transition-property:opacity}.c--modal::backdrop{background:none}.c--modal[open]{display:flex;flex-direction:column;justify-content:center}.c--modal_inner{--offset: 0 0;background-color:var(--base);transition:translate var(--duration);max-height:100%}.c--modal:not([data-is-open]){opacity:0}.c--modal:not([data-is-open])>.c--modal_inner{translate:var(--offset)}}@layer lism-component{.c--navMenu{--link-td: none;--hl: var(--hl--s);--_item-p: var(--s20);--focus-offset: -1px}.c--navMenu_nest{--_item-p: inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_nest,.c--navMenu_item{--bdc: inherit}}@layer lism-component{.c--tabs{display:grid;grid:"list" "panel" / 100%;gap:var(--s20)}.c--tabs_list{grid-area:list;display:flex;overflow-x:auto}.c--tabs_tab{color:var(--_notSelected, var(--text-2));background-color:var(--_isSelected, var(--base-2));padding:.25em .75em}.c--tabs_tab[aria-selected=true]{--_notSelected: }.c--tabs_tab[aria-selected=false]{--_isSelected: }.c--tabs_panel{grid-area:panel;width:100%}.c--tabs_panel:where([aria-hidden=true]){display:none}}@layer lism-component{.c--badge{--c: var(--base);--bgc: var(--text);--bdc: transparent;color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc)}.c--badge--outline{--c: var(--text);--bgc: transparent;--bdc: currentColor}}@layer lism-component{.c--button{--c: var(--base);--bgc: var(--text);--bdc: var(--bgc);color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc);gap:var(--s10);text-decoration:none;place-content:center;place-items:center}.c--button--outline{--c: var(--text);--bgc: transparent;--bdc: var(--c)}:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism-component{.c--chat{--cbox-bgPct: 8%;grid-template-areas:"avatar name" "avatar body";grid-template-columns:auto 1fr;grid-template-rows:minmax(1.5rem,auto) auto;--_avator-size: clamp(48px, 32px + 5cqw, 64px);--_deco-size: calc(min(var(--_avator-size), 80px)/4 + .25rem) ;--_deco-mask: none;--_deco-t: 0;--_deco-scale: 1;--_deco-inset-x: 0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{top:var(--_deco-t);inset-inline:var(--_deco-inset-x);width:var(--_deco-size);height:var(--_deco-size);scale:var(--_deco-scale);-webkit-mask:var(--_deco-mask) center / contain no-repeat;mask:var(--_deco-mask) center / contain no-repeat}.c--chat--speak{--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x: auto calc(100% - 1px) }[data-chat-dir=end]{--_deco-scale: -1 1;--_deco-inset-x: calc(100% - 1px) auto;grid-template-areas:"name avatar" "body avatar";grid-template-columns:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-component{.c--shapeDivider{--level: 0;--_inner-offset: 0px;--_inner-stretch: 1;--_flipX: 1;--_flipY: 1;height:clamp(calc(5px * var(--level)),calc(1cqw * var(--level)),calc(12px * var(--level)));overflow:visible}.c--shapeDivider:where([data-flip^=X]){--_flipX: -1}.c--shapeDivider:where([data-flip$=Y]){--_flipY: -1}.c--shapeDivider_inner{--offsetY: .5px;--offsetX: -.5px;height:100%;width:calc(100% + 1px);scale:calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY))}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{transform-origin:100% 0;animation:lism--slideShape 12s infinite alternate linear}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translate(75%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "UI components for React and Astro, powered by Lism CSS.",
   "author": {
     "name": "ddryo",
@@ -38,7 +38,7 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.12.0"
+    "lism-css": "0.13.1"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.3.3",

package/src/components/Accordion/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--accordion {
     --duration: var(--acc-duration, 0.25s);
   }

package/src/components/Accordion/getProps.ts

@@ -38,11 +38,11 @@ export function getItemProps({ lismClass, ...props }: AccordionItemProps) {
   return props;
 }
 
-export function getHeadingProps({ as = 'div', role, lismClass, set, unset, ...props }: AccordionHeadingProps) {
+export function getHeadingProps({ as = 'div', role, lismClass, set, ...props }: AccordionHeadingProps) {
   const returnProps = {
     lismClass: atts(lismClass, 'c--accordion_heading'),
     as,
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     ...props,
   };
 
@@ -52,12 +52,12 @@ export function getHeadingProps({ as = 'div', role, lismClass, set, unset, ...pr
   return returnProps;
 }
 
-export function getButtonProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getButtonProps({ set, ...props }: Record<string, unknown>) {
   return {
     lismClass: 'c--accordion_button',
     as: 'button',
     layout: 'flex',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     g: '10',
     w: '100%',
     ai: 'center',
@@ -82,7 +82,8 @@ export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__'
 
 export const defaultProps = {
   icon: {
-    lismClass: 'c--accordion_icon a--icon',
+    lismClass: 'c--accordion_icon',
+    atomic: 'icon',
     as: 'span',
     pi: 'center',
     fxsh: '0',

package/src/components/Alert/getProps.ts

@@ -20,13 +20,16 @@ export default function getAlertProps({ type = 'alert', keycolor, layout = 'flex
     icon: _icon,
     layout,
     flow,
-    lismClass: 'c--alert u--cbox',
+    lismClass: 'c--alert',
+    util: 'cbox',
+    set: 'shadow',
     keycolor: _color,
     ai: 'center',
     p: '15',
     g: '15',
     bd: true,
     bdrs: '10',
+    bxsh: '10',
     ...props,
   };
 }

package/src/components/Badge/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--badge {
     --c: var(--base);
     --bgc: var(--text);

package/src/components/Button/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--button {
     --c: var(--base);
     --bgc: var(--text);

package/src/components/Callout/getProps.ts

@@ -19,7 +19,9 @@ export default function getCalloutProps({ type = 'note', keycolor, icon, title,
     icon: _icon,
     title,
     flow,
-    lismClass: 'c--callout u--cbox set--shadow',
+    lismClass: 'c--callout',
+    util: 'cbox',
+    set: 'shadow',
     keycolor: _keycolor,
     p: '20',
     g: '10',

package/src/components/Chat/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--chat {
     --cbox-bgPct: 8%;
     grid-template-areas: 'avatar name' 'avatar body';

package/src/components/Chat/astro/Chat.astro

@@ -33,8 +33,8 @@ const { 'data-chat-dir': direction, ...chatProps } = getChatProps(inputProps);
   }
   {name && <Lism {...defaultProps.name}>{name}</Lism>}
   <Lism {...defaultProps.body}>
-    <Decorator {...defaultProps.deco} class="u--cbox is--skipFlow" />
-    <Flow {...defaultProps.content} class="u--cbox" flow={flow} jslf={direction}>
+    <Decorator {...defaultProps.deco} />
+    <Flow {...defaultProps.content} flow={flow} jslf={direction}>
       <slot />
     </Flow>
   </Lism>

package/src/components/Chat/getProps.ts

@@ -26,10 +26,13 @@ export const defaultProps = {
   },
   deco: {
     lismClass: 'c--chat_deco',
+    util: 'cbox',
+    isSkipFlow: true,
     pos: 'absolute',
   },
   content: {
     lismClass: 'c--chat_content',
+    util: 'cbox',
     bdrs: '30',
     p: '20',
     lh: 's',