@lism-css/ui 0.13.0 → 0.13.1

package/dist/components/Accordion/getProps.d.ts

@@ -56,7 +56,8 @@ export declare function getPanelProps({ lismClass, _contextID, accID, isOpen, ..
 };
 export declare const defaultProps: {
     readonly icon: {
-        readonly lismClass: "c--accordion_icon a--icon";
+        readonly lismClass: "c--accordion_icon";
+        readonly atomic: "icon";
         readonly as: "span";
         readonly pi: "center";
         readonly fxsh: "0";

package/dist/components/Accordion/getProps.js

@@ -1,46 +1,47 @@
 import e from "../../lism-css/dist/lib/helper/atts.js";
-import c from "../../lism-css/dist/lib/helper/mergeSet.js";
-function u({ lismClass: o, allowMultiple: n, ...t }) {
-  return t.lismClass = e(o, "c--accordion"), n && (t["data-allow-multiple"] = ""), t;
+import a from "../../lism-css/dist/lib/helper/mergeSet.js";
+function u({ lismClass: n, allowMultiple: o, ...t }) {
+  return t.lismClass = e(n, "c--accordion"), o && (t["data-allow-multiple"] = ""), t;
 }
-function f({ lismClass: o, ...n }) {
-  return n.lismClass = e(o, "c--accordion_item"), n;
+function f({ lismClass: n, ...o }) {
+  return o.lismClass = e(n, "c--accordion_item"), o;
 }
-function m({ as: o = "div", role: n, lismClass: t, set: s, ...a }) {
+function m({ as: n = "div", role: o, lismClass: t, set: s, ...c }) {
   const i = {
     lismClass: e(t, "c--accordion_heading"),
-    as: o,
-    set: c("plain", s),
-    ...a
+    as: n,
+    set: a("plain", s),
+    ...c
   };
-  return i.as === "div" && (i.role = n ?? "heading"), i;
+  return i.as === "div" && (i.role = o ?? "heading"), i;
 }
-function p({ set: o, ...n }) {
+function p({ set: n, ...o }) {
   return {
     lismClass: "c--accordion_button",
     as: "button",
     layout: "flex",
-    set: c("plain", o),
+    set: a("plain", n),
     g: "10",
     w: "100%",
     ai: "center",
     jc: "between",
-    ...n
+    ...o
   };
 }
-function _({ lismClass: o, _contextID: n, accID: t = "__LISM_ACC_ID__", isOpen: s = !1, ...a }) {
+function _({ lismClass: n, _contextID: o, accID: t = "__LISM_ACC_ID__", isOpen: s = !1, ...c }) {
   const i = {
-    lismClass: e(o, "c--accordion_panel"),
-    id: n || t,
+    lismClass: e(n, "c--accordion_panel"),
+    id: o || t,
     hidden: s ? void 0 : "until-found",
     pos: "relative",
     ov: "hidden"
-  }, r = { lismClass: "c--accordion_content", layout: "flow", ...a };
+  }, r = { lismClass: "c--accordion_content", layout: "flow", ...c };
   return { panelProps: i, contentProps: r };
 }
 const P = {
   icon: {
-    lismClass: "c--accordion_icon a--icon",
+    lismClass: "c--accordion_icon",
+    atomic: "icon",
     as: "span",
     pi: "center",
     fxsh: "0",

package/dist/components/Accordion/react/Accordion.js

@@ -13,7 +13,7 @@ function S({ children: t, ...r }) {
   const o = _(r);
   return /* @__PURE__ */ n(P, { ...o, children: t });
 }
-function X({ children: t, ...r }) {
+function Z({ children: t, ...r }) {
   const o = p(null), e = f();
   m(() => {
     if (o.current)
@@ -38,7 +38,7 @@ function k({ children: t, ...r }) {
   return /* @__PURE__ */ n(s, { ...e, children: /* @__PURE__ */ n(s, { ...c, children: t }) });
 }
 export {
-  X as AccordionItem,
+  Z as AccordionItem,
   S as AccordionRoot,
   b as Button,
   $ as Heading,

package/dist/components/Alert/getProps.d.ts

@@ -13,10 +13,13 @@ export default function getAlertProps({ type, keycolor, layout, icon, flow, ...p
     layout: "center" | "flex" | "grid" | "flow" | "frame" | "box" | "cluster" | "columns" | "fluidCols" | "stack" | "sideMain" | "switchCols" | "tileGrid";
     flow: string;
     lismClass: string;
+    util: string;
+    set: string;
     keycolor: string;
     ai: string;
     p: string;
     g: string;
     bd: boolean;
     bdrs: string;
+    bxsh: string;
 };

package/dist/components/Alert/getProps.js

@@ -1,18 +1,21 @@
 import i from "./presets.js";
-function f({ type: o = "alert", keycolor: t, layout: c = "flex", icon: e, flow: l = "s", ...n }) {
-  const r = o ? i[o] : null, s = e || r?.icon || "info", a = t || r?.color || "currentColor";
+function f({ type: o = "alert", keycolor: t, layout: e = "flex", icon: c, flow: l = "s", ...s }) {
+  const r = o ? i[o] : null, n = c || r?.icon || "info", a = t || r?.color || "currentColor";
   return {
-    icon: s,
-    layout: c,
+    icon: n,
+    layout: e,
     flow: l,
-    lismClass: "c--alert u--cbox",
+    lismClass: "c--alert",
+    util: "cbox",
+    set: "shadow",
     keycolor: a,
     ai: "center",
     p: "15",
     g: "15",
     bd: !0,
     bdrs: "10",
-    ...n
+    bxsh: "10",
+    ...s
   };
 }
 export {

package/dist/components/Callout/getProps.d.ts

@@ -12,6 +12,8 @@ export default function getCalloutProps({ type, keycolor, icon, title, flow, ...
     title: string | undefined;
     flow: string;
     lismClass: string;
+    util: string;
+    set: string;
     keycolor: string | null;
     p: string;
     g: string;

package/dist/components/Callout/getProps.js

@@ -1,11 +1,13 @@
 import u from "./presets.js";
-function b({ type: o = "note", keycolor: l, icon: t, title: s, flow: n = "s", ...e }) {
-  const c = o ? u[o] : null, r = t || c?.icon || "note", a = l || c?.color || null;
+function b({ type: o = "note", keycolor: t, icon: c, title: s, flow: n = "s", ...e }) {
+  const l = o ? u[o] : null, r = c || l?.icon || "note", a = t || l?.color || null;
   return {
     icon: r,
     title: s,
     flow: n,
-    lismClass: "c--callout u--cbox set--shadow",
+    lismClass: "c--callout",
+    util: "cbox",
+    set: "shadow",
     keycolor: a,
     p: "20",
     g: "10",

package/dist/components/Chat/getProps.d.ts

@@ -25,10 +25,13 @@ export declare const defaultProps: {
     };
     readonly deco: {
         readonly lismClass: "c--chat_deco";
+        readonly util: "cbox";
+        readonly isSkipFlow: true;
         readonly pos: "absolute";
     };
     readonly content: {
         readonly lismClass: "c--chat_content";
+        readonly util: "cbox";
         readonly bdrs: "30";
         readonly p: "20";
         readonly lh: "s";

package/dist/components/Chat/getProps.js

@@ -22,10 +22,13 @@ const l = {
   },
   deco: {
     lismClass: "c--chat_deco",
+    util: "cbox",
+    isSkipFlow: !0,
     pos: "absolute"
   },
   content: {
     lismClass: "c--chat_content",
+    util: "cbox",
     bdrs: "30",
     p: "20",
     lh: "s"

package/dist/components/Chat/react/Chat.js

@@ -1,22 +1,22 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import f from "../../../lism-css/dist/components/atomic/Decorator/index.js";
-import n from "../../../lism-css/dist/components/layout/Flow/index.js";
-import h from "../../../lism-css/dist/components/layout/Frame/index.js";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import h from "../../../lism-css/dist/components/atomic/Decorator/index.js";
+import p from "../../../lism-css/dist/components/layout/Flow/index.js";
+import s from "../../../lism-css/dist/components/layout/Frame/index.js";
 import l from "../../../lism-css/dist/components/layout/Grid/index.js";
-import m from "../../../lism-css/dist/components/Lism/index.js";
-import u, { defaultProps as r } from "../getProps.js";
+import c from "../../../lism-css/dist/components/Lism/index.js";
+import g, { defaultProps as t } from "../getProps.js";
 /* empty css            */
-function N({ name: t, avatar: i, flow: s = "s", children: e, ...d }) {
-  const { "data-chat-dir": c, ...p } = u(d);
-  return /* @__PURE__ */ a(l, { "data-chat-dir": c, ...p, children: [
-    i && /* @__PURE__ */ o(h, { ...r.avatar, children: /* @__PURE__ */ o("img", { src: i, alt: "", width: "60", height: "60", decoding: "async" }) }),
-    t && /* @__PURE__ */ o(m, { ...r.name, children: t }),
-    /* @__PURE__ */ a(m, { ...r.body, children: [
-      /* @__PURE__ */ o(f, { ...r.deco, className: "u--cbox is--skipFlow" }),
-      /* @__PURE__ */ o(n, { ...r.content, className: "u--cbox", flow: s, jslf: c, children: e })
+function w({ name: o, avatar: i, flow: e = "s", children: a, ...f }) {
+  const { "data-chat-dir": d, ...n } = g(f);
+  return /* @__PURE__ */ m(l, { "data-chat-dir": d, ...n, children: [
+    i && /* @__PURE__ */ r(s, { ...t.avatar, children: /* @__PURE__ */ r("img", { src: i, alt: "", width: "60", height: "60", decoding: "async" }) }),
+    o && /* @__PURE__ */ r(c, { ...t.name, children: o }),
+    /* @__PURE__ */ m(c, { ...t.body, children: [
+      /* @__PURE__ */ r(h, { ...t.deco }),
+      /* @__PURE__ */ r(p, { ...t.content, flow: e, jslf: d, children: a })
     ] })
   ] });
 }
 export {
-  N as default
+  w as default
 };

package/dist/components/Details/getProps.d.ts

@@ -24,7 +24,8 @@ export declare const defaultProps: {
         readonly ai: "center";
     };
     readonly icon: {
-        readonly lismClass: "c--details_icon a--icon";
+        readonly lismClass: "c--details_icon";
+        readonly atomic: "icon";
         readonly as: "span";
         readonly 'aria-hidden': "true";
     };

package/dist/components/Details/getProps.js

@@ -12,14 +12,14 @@ function n({ set: t, ...s }) {
     ...s
   };
 }
-const r = {
+const c = {
   summary: { lismClass: "c--details_summary", layout: "flex", g: "10", ai: "center" },
-  icon: { lismClass: "c--details_icon a--icon", as: "span", "aria-hidden": "true" },
+  icon: { lismClass: "c--details_icon", atomic: "icon", as: "span", "aria-hidden": "true" },
   body: { lismClass: "c--details_body" },
   content: { lismClass: "c--details_content", layout: "flow", flow: "s" }
 };
 export {
-  r as defaultProps,
+  c as defaultProps,
   o as getDetailsProps,
   n as getTitleProps
 };

package/dist/lism-css/dist/components/atomic/Decorator/index.js

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

package/dist/lism-css/dist/components/atomic/Icon/getProps.js

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

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,152 +1,163 @@
-import { TRAITS as C, PROPS as u } from "../config/index.js";
-import j from "./getLayoutProps.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 _ from "./helper/isEmptyObj.js";
-import U from "./helper/filterEmptyObj.js";
-import v from "./helper/mergeSet.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 w from "./helper/isEmptyObj.js";
+import S from "./helper/filterEmptyObj.js";
+import U from "./helper/mergeSet.js";
 import k from "./helper/splitWithComma.js";
-const z = (o) => {
-  const r = u[o];
-  return r && r?.token || "";
+const A = (o) => {
+  const s = m[o];
+  return s && s?.token || "";
 };
-function w(o, r) {
+function T(o, s) {
   if (!o) return "";
-  if (!r) return o;
-  const t = o.split(" "), s = t[0];
-  return [s, `${s}--${r}`, ...t.slice(1)].join(" ");
+  if (!s) return o;
+  const t = o.split(" ")[0];
+  return `${o} ${t}--${s}`;
 }
-class A {
+class $ {
   // 最終出力 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(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);
+  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);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
-  // 出力順: [user/astro className] [lismClass] [lismTrait] [uClasses]
-  buildClassName(r, t) {
-    return E(r || t, this.lismClass, this.lismTrait, this.uClasses);
+  // 出力順: [user/astro className] [lismClass] [primitiveClass] [uClasses]
+  buildClassName(s, t) {
+    return z(s || t || void 0, this.lismClass, this.primitiveClass, this.uClasses);
   }
-  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)));
+  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 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 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(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 (s === "css") {
+      } else if (i === "css") {
         const e = this.extractProp("css");
         this.addStyles(e);
       }
     });
   }
   // Lism Prop 解析
-  analyzeLismProp(r, t) {
+  analyzeLismProp(s, t) {
     if (t == null) return;
-    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);
+    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(r) {
-    this.uClasses.push(r);
+  addUtil(s) {
+    this.uClasses.push(s);
   }
-  addUtils(r) {
-    this.uClasses.push(...r);
+  addUtils(s) {
+    this.uClasses.push(...s);
   }
   // addState(state) {
   // 	this.stateClasses.push(state);
   // }
-  addStyle(r, t) {
-    this.styles[r] = t;
+  addStyle(s, t) {
+    this.styles[s] = t;
   }
-  addStyles(r) {
-    this.styles = { ...this.styles, ...r };
+  addStyles(s) {
+    this.styles = { ...this.styles, ...s };
   }
-  addAttrs(r) {
-    this.addStyles(r.styles || {}), this.addUtils(r.utils || []);
+  addAttrs(s) {
+    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
   }
-  extractProp(r) {
-    const t = this.attrs[r];
-    return this.attrs[r] === void 0 ? null : (delete this.attrs[r], t);
+  extractProp(s) {
+    const t = this.attrs[s];
+    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
   }
-  extractProps(r) {
+  extractProps(s) {
     const t = {};
-    return r.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(r, t, s = {}, e = "") {
+  setAttrs(s, t, i = {}, e = "") {
     if (t == null || t === "" || t === !1) return;
-    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(":", "")}`);
+    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 (!e) {
-      const { presets: y, tokenClass: T, utils: g, shorthands: b } = s;
-      if (y && P(y, t)) {
+      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(`${i}:${f}`);
+        f && this.addUtil(`${r}:${f}`);
         return;
       }
-      if (T && s.token && N(s.token, t)) {
+      if (j && i.token && E(i.token, t)) {
         const f = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        f && this.addUtil(`${i}:${f}`);
+        f && this.addUtil(`${r}:${f}`);
         return;
       }
-      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}`);
+      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: d, alwaysVar: p, token: m, bp: O } = s;
+    const { prop: l, isVar: d, alwaysVar: c, token: h, bp: O } = i;
     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 (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(`--${r}`, n);
+        this.addStyle(`--${s}`, n);
         return;
-      } else if (!O && !p) {
+      } else if (!O && !c) {
         this.addStyle(l, n);
         return;
       }
     }
-    this.addUtil(i), this.addStyle(a, n);
+    this.addUtil(r), this.addStyle(a, n);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -161,40 +172,40 @@ class A {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(r) {
-    r && (r === "-" || r === !0 ? this.addUtil("-hov") : typeof r == "string" ? k(r).forEach((t) => {
+  setHovProps(s) {
+    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
       this.addUtil(`-hov:${t}`);
-    }) : typeof r == "object" && Object.keys(r).forEach((t) => {
-      const s = r[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((e) => {
+          k(i).forEach((e) => {
             this.addUtil(`-hov:${e}`);
           });
-        else if (typeof s == "string" || typeof s == "number") {
-          const e = c(s, z(t));
+        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(o) {
+function G(o) {
   if (Object.keys(o).length === 0)
     return {};
-  const { layout: r, ...t } = o, s = new A(j(r, t));
+  const { atomic: s, layout: t, ...i } = o, e = x(s, i), a = N(t, e), r = new $(a);
   return {
-    ...U({
-      className: s.className,
-      style: U(s.styles)
+    ...S({
+      className: r.className,
+      style: S(r.styles)
     }),
-    ...s.attrs
+    ...r.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  A as LismPropsData,
-  B as default
+  $ as LismPropsData,
+  G as default
 };

package/dist/ui.css

@@ -1 +1 @@
-@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%}.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-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%)}}
+@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.13.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.13.0"
+    "lism-css": "0.13.1"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.3.3",

package/src/components/Accordion/getProps.ts

@@ -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/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/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',

package/src/components/Chat/react/Chat.tsx

@@ -24,8 +24,8 @@ export default function Chat<T extends ElementType = 'div'>({ name, avatar, flow
       )}
       {name && <Lism {...defaultProps.name}>{name}</Lism>}
       <Lism {...defaultProps.body}>
-        <Decorator {...defaultProps.deco} className="u--cbox is--skipFlow" />
-        <Flow {...defaultProps.content} className="u--cbox" flow={flow} jslf={direction}>
+        <Decorator {...defaultProps.deco} />
+        <Flow {...defaultProps.content} flow={flow} jslf={direction}>
           {children}
         </Flow>
       </Lism>

package/src/components/Details/getProps.ts

@@ -30,7 +30,7 @@ export function getTitleProps({ set, ...props }: Record<string, unknown>) {
  */
 export const defaultProps = {
   summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-  icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
+  icon: { lismClass: 'c--details_icon', atomic: 'icon', as: 'span', 'aria-hidden': 'true' },
   body: { lismClass: 'c--details_body' },
   content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
 } as const;

package/src/components/Tabs/_style.css

@@ -2,6 +2,7 @@
   .c--tabs {
     display: grid;
     grid: 'list' 'panel' / 100%;
+    gap: var(--s20);
   }
   .c--tabs_list {
     grid-area: list;
@@ -9,24 +10,21 @@
     overflow-x: auto;
   }
   .c--tabs_tab {
-    &[aria-selected='true'] {
-      --_notSelected: ;
-    }
-    &[aria-selected='false'] {
-      --_isSelected: ;
-    }
-    /* 非アクティブの時、薄いカラーに */
-    :where(&) {
-      color: var(--_notSelected, var(--text-2));
-    }
+    color: var(--_notSelected, var(--text-2));
+    background-color: var(--_isSelected, var(--base-2));
+    padding: 0.25em 0.75em;
+  }
+  .c--tabs_tab[aria-selected='true'] {
+    --_notSelected: ;
+  }
+  .c--tabs_tab[aria-selected='false'] {
+    --_isSelected: ;
   }
-
   .c--tabs_panel {
     grid-area: panel;
     width: 100%;
-
-    &:where([aria-hidden='true']) {
-      display: none;
-    }
+  }
+  .c--tabs_panel:where([aria-hidden='true']) {
+    display: none;
   }
 }

package/dist/lism-css/dist/components/atomic/Decorator/getProps.js

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