@lism-css/ui 0.12.0 → 0.13.0

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

@@ -26,12 +26,12 @@ export declare function getRootProps({ lismClass, allowMultiple, ...props }: Acc
 export declare function getItemProps({ lismClass, ...props }: AccordionItemProps): {
     [key: string]: unknown;
 };
-export declare function getHeadingProps({ as, role, lismClass, set, unset, ...props }: AccordionHeadingProps): {
+export declare function getHeadingProps({ as, role, lismClass, set, ...props }: AccordionHeadingProps): {
     lismClass: string;
     as: string;
     set: string[];
 };
-export declare function getButtonProps({ set, unset, ...props }: Record<string, unknown>): {
+export declare function getButtonProps({ set, ...props }: Record<string, unknown>): {
     lismClass: string;
     as: string;
     layout: string;

package/dist/components/Accordion/getProps.js

@@ -1,42 +1,42 @@
 import e from "../../lism-css/dist/lib/helper/atts.js";
-import r from "../../lism-css/dist/lib/helper/mergeSet.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;
 }
 function f({ lismClass: o, ...n }) {
   return n.lismClass = e(o, "c--accordion_item"), n;
 }
-function m({ as: o = "div", role: n, lismClass: t, set: s, unset: a, ...c }) {
+function m({ as: o = "div", role: n, lismClass: t, set: s, ...a }) {
   const i = {
     lismClass: e(t, "c--accordion_heading"),
     as: o,
-    set: r("plain", s, a),
-    ...c
+    set: c("plain", s),
+    ...a
   };
   return i.as === "div" && (i.role = n ?? "heading"), i;
 }
-function p({ set: o, unset: n, ...t }) {
+function p({ set: o, ...n }) {
   return {
     lismClass: "c--accordion_button",
     as: "button",
     layout: "flex",
-    set: r("plain", o, n),
+    set: c("plain", o),
     g: "10",
     w: "100%",
     ai: "center",
     jc: "between",
-    ...t
+    ...n
   };
 }
 function _({ lismClass: o, _contextID: n, accID: t = "__LISM_ACC_ID__", isOpen: s = !1, ...a }) {
-  const c = {
+  const i = {
     lismClass: e(o, "c--accordion_panel"),
     id: n || t,
     hidden: s ? void 0 : "until-found",
     pos: "relative",
     ov: "hidden"
-  }, i = { lismClass: "c--accordion_content", layout: "flow", ...a };
-  return { panelProps: c, contentProps: i };
+  }, r = { lismClass: "c--accordion_content", layout: "flow", ...a };
+  return { panelProps: i, contentProps: r };
 }
 const P = {
   icon: {

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

@@ -9,11 +9,11 @@ import { setEvent as A } from "../setAccordion.js";
 import h from "./AccIcon.js";
 /* empty css            */
 const i = d(null);
-function Q({ children: t, ...r }) {
+function S({ children: t, ...r }) {
   const o = _(r);
   return /* @__PURE__ */ n(P, { ...o, children: t });
 }
-function S({ children: t, ...r }) {
+function X({ children: t, ...r }) {
   const o = p(null), e = f();
   m(() => {
     if (o.current)
@@ -38,8 +38,8 @@ function k({ children: t, ...r }) {
   return /* @__PURE__ */ n(s, { ...e, children: /* @__PURE__ */ n(s, { ...c, children: t }) });
 }
 export {
-  S as AccordionItem,
-  Q as AccordionRoot,
+  X as AccordionItem,
+  S as AccordionRoot,
   b as Button,
   $ as Heading,
   k as Panel

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

@@ -7,7 +7,7 @@ export type DetailsProps = {
  * Detailsコンポーネントのルート要素用プロパティを生成
  */
 export declare function getDetailsProps({ lismClass, ...props }: DetailsProps): LismProps;
-export declare function getTitleProps({ set, unset, ...props }: Record<string, unknown>): {
+export declare function getTitleProps({ set, ...props }: Record<string, unknown>): {
     lismClass: string;
     as: string;
     fx: string;

package/dist/components/Details/getProps.js

@@ -1,25 +1,25 @@
-import a from "../../lism-css/dist/lib/helper/atts.js";
-import i from "../../lism-css/dist/lib/helper/mergeSet.js";
-function n({ lismClass: t, ...s }) {
-  return s.lismClass = a(t, "c--details"), s;
+import l from "../../lism-css/dist/lib/helper/atts.js";
+import a from "../../lism-css/dist/lib/helper/mergeSet.js";
+function o({ lismClass: t, ...s }) {
+  return s.lismClass = l(t, "c--details"), s;
 }
-function r({ set: t, unset: s, ...l }) {
+function n({ set: t, ...s }) {
   return {
     lismClass: "c--details_title",
     as: "span",
     fx: "1",
-    set: i("plain", t, s),
-    ...l
+    set: a("plain", t),
+    ...s
   };
 }
-const c = {
+const r = {
   summary: { lismClass: "c--details_summary", layout: "flex", g: "10", ai: "center" },
   icon: { lismClass: "c--details_icon a--icon", as: "span", "aria-hidden": "true" },
   body: { lismClass: "c--details_body" },
   content: { lismClass: "c--details_content", layout: "flow", flow: "s" }
 };
 export {
-  c as defaultProps,
-  n as getDetailsProps,
-  r as getTitleProps
+  r as defaultProps,
+  o as getDetailsProps,
+  n as getTitleProps
 };

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

@@ -1,7 +1,6 @@
 export type ModalRootProps = {
     lismClass?: string;
     set?: string;
-    unset?: string;
     duration?: string;
     style?: Record<string, string>;
     [key: string]: unknown;
@@ -12,7 +11,7 @@ export type ModalInnerProps = {
     style?: Record<string, string>;
     [key: string]: unknown;
 };
-export declare function getProps({ lismClass, set, unset, duration, style, ...props }: ModalRootProps): {
+export declare function getProps({ lismClass, set, duration, style, ...props }: ModalRootProps): {
     style: Record<string, string>;
     lismClass: string;
     set: string[];
@@ -22,13 +21,13 @@ export declare function getInnerProps({ lismClass, offset, style, ...props }: Mo
     lismClass: string;
     style: Record<string, string>;
 };
-export declare function getOpenBtnProps({ set, unset, ...props }: Record<string, unknown>): {
+export declare function getOpenBtnProps({ set, ...props }: Record<string, unknown>): {
     as: string;
     set: string[];
     hov: string;
     d: string;
 };
-export declare function getCloseBtnProps({ set, unset, ...props }: Record<string, unknown>): {
+export declare function getCloseBtnProps({ set, ...props }: Record<string, unknown>): {
     as: string;
     set: string[];
     hov: string;

package/dist/components/Modal/getProps.js

@@ -1,44 +1,44 @@
-import i from "../../lism-css/dist/lib/helper/atts.js";
+import e from "../../lism-css/dist/lib/helper/atts.js";
 import r from "../../lism-css/dist/lib/helper/mergeSet.js";
-function f({ lismClass: t = "", set: n, unset: o, duration: s, style: e = {}, ...l }) {
-  const a = {
-    lismClass: i(t, "c--modal"),
-    set: r("plain", n, o)
+function f({ lismClass: n = "", set: o, duration: t, style: s = {}, ...i }) {
+  const l = {
+    lismClass: e(n, "c--modal"),
+    set: r("plain", o)
   };
-  return s && (e["--duration"] = s), { as: "dialog", ...a, style: e, ...l };
+  return t && (s["--duration"] = t), { as: "dialog", ...l, style: s, ...i };
 }
-function m({ lismClass: t = "", offset: n, style: o = {}, ...s }) {
-  return n && (o["--offset"] = n), {
-    lismClass: i(t, "c--modal_inner"),
-    style: o,
+function u({ lismClass: n = "", offset: o, style: t = {}, ...s }) {
+  return o && (t["--offset"] = o), {
+    lismClass: e(n, "c--modal_inner"),
+    style: t,
     ...s
   };
 }
-function c({ set: t, unset: n, ...o }) {
+function m({ set: n, ...o }) {
   return {
     as: "button",
-    set: r("plain", t, n),
+    set: r("plain", n),
     hov: "o",
     d: "inline-flex",
     ...o
   };
 }
-function d({ set: t, unset: n, ...o }) {
+function c({ set: n, ...o }) {
   return {
     as: "button",
-    set: r("plain", t, n),
+    set: r("plain", n),
     hov: "o",
     d: "inline-flex",
     ...o
   };
 }
-const P = {
+const d = {
   body: { lismClass: "c--modal_body" }
 };
 export {
-  P as defaultProps,
-  d as getCloseBtnProps,
-  m as getInnerProps,
-  c as getOpenBtnProps,
+  d as defaultProps,
+  c as getCloseBtnProps,
+  u as getInnerProps,
+  m as getOpenBtnProps,
   f as getProps
 };

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

@@ -5,7 +5,7 @@ type TabsProps = {
 export default function getTabsProps({ lismClass, ...props }: TabsProps): {
     lismClass: string;
 };
-export declare function getTabProps({ set, unset, ...props }: Record<string, unknown>): {
+export declare function getTabProps({ set, ...props }: Record<string, unknown>): {
     as: string;
     lismClass: string;
     set: string[];

package/dist/components/Tabs/getProps.js

@@ -1,20 +1,20 @@
-import r from "../../lism-css/dist/lib/helper/atts.js";
+import a from "../../lism-css/dist/lib/helper/atts.js";
 import o from "../../lism-css/dist/lib/helper/mergeSet.js";
-function i({ lismClass: t, ...s }) {
+function e({ lismClass: t, ...s }) {
   return {
-    lismClass: r(t, "c--tabs"),
+    lismClass: a(t, "c--tabs"),
     ...s
   };
 }
-function l({ set: t, unset: s, ...a }) {
+function i({ set: t, ...s }) {
   return {
     as: "button",
     lismClass: "c--tabs_tab",
-    set: o("plain", t, s),
-    ...a
+    set: o("plain", t),
+    ...s
   };
 }
 export {
-  i as default,
-  l as getTabProps
+  e as default,
+  i as getTabProps
 };

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/{states.js → traits.js}

@@ -1,4 +1,4 @@
-const s = {
+const i = {
   isContainer: "is--container",
   isWrapper: {
     className: "is--wrapper",
@@ -8,11 +8,12 @@ const s = {
     tokenKey: "sz"
   },
   isLayer: "is--layer",
-  isLinkBox: "is--linkBox",
+  isBoxLink: "is--boxLink",
+  isCoverLink: "is--coverLink",
   isSide: "is--side",
   isSkipFlow: "is--skipFlow",
   isVertical: "is--vertical"
 };
 export {
-  s as default
+  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/getLismProps.js

@@ -1,123 +1,133 @@
-import { STATES as b, 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 x from "./isTokenValue.js";
-import v from "./getUtilKey.js";
-import m from "./getMaybeCssVar.js";
-import E 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 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 k from "./helper/splitWithComma.js";
-const A = (n) => {
-  const e = S[n];
-  return e && e?.token || "";
+const z = (o) => {
+  const r = u[o];
+  return r && r?.token || "";
 };
-class w {
-  // 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(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(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);
   }
-  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] [lismTrait] [uClasses]
+  buildClassName(r, t) {
+    return E(r || t, this.lismClass, this.lismTrait, 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)));
   }
   // 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);
+    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 r = this.extractProp(s);
-        this.setHovProps(r);
+        const e = this.extractProp(s);
+        this.setHovProps(e);
       } else if (s === "css") {
-        const r = this.extractProp("css");
-        this.addStyles(r);
+        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(r, t) {
     if (t == null) return;
-    let s = S[e] || null;
+    let s = u[r] || 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);
+    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(e) {
-    this.uClasses.push(e);
+  addUtil(r) {
+    this.uClasses.push(r);
   }
-  addUtils(e) {
-    this.uClasses.push(...e);
+  addUtils(r) {
+    this.uClasses.push(...r);
   }
   // addState(state) {
   // 	this.stateClasses.push(state);
   // }
-  addStyle(e, t) {
-    this.styles[e] = t;
+  addStyle(r, t) {
+    this.styles[r] = t;
   }
-  addStyles(e) {
-    this.styles = { ...this.styles, ...e };
+  addStyles(r) {
+    this.styles = { ...this.styles, ...r };
   }
-  addAttrs(e) {
-    this.addStyles(e.styles || {}), this.addUtils(e.utils || []);
+  addAttrs(r) {
+    this.addStyles(r.styles || {}), this.addUtils(r.utils || []);
   }
-  extractProp(e) {
-    const t = this.attrs[e];
-    return this.attrs[e] === void 0 ? null : (delete this.attrs[e], t);
+  extractProp(r) {
+    const t = this.attrs[r];
+    return this.attrs[r] === void 0 ? null : (delete this.attrs[r], t);
   }
-  extractProps(e) {
+  extractProps(r) {
     const t = {};
-    return e.forEach((s) => {
+    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(e, t, s = {}, r = "") {
+  setAttrs(r, t, s = {}, 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(":")) {
+    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 (!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: 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 && s.token && x(s.token, t)) {
-        const p = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        p && this.addUtil(`${i}:${p}`);
+      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 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 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;
       }
     }
@@ -125,18 +135,18 @@ class w {
       this.addUtil(i);
       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: 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 (!d && !c) {
-        this.addStyle(l, a);
+      } else if (!O && !p) {
+        this.addStyle(l, n);
         return;
       }
     }
-    this.addUtil(i), this.addStyle(o, a);
+    this.addUtil(i), this.addStyle(a, n);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -151,40 +161,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(r) {
+    r && (r === "-" || r === !0 ? this.addUtil("-hov") : typeof r == "string" ? k(r).forEach((t) => {
       this.addUtil(`-hov:${t}`);
-    }) : typeof e == "object" && Object.keys(e).forEach((t) => {
-      const s = e[t];
+    }) : 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(s).forEach((r) => {
-            this.addUtil(`-hov:${r}`);
+          k(s).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);
+          const e = c(s, z(t));
+          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function B(n) {
-  if (Object.keys(n).length === 0)
+function B(o) {
+  if (Object.keys(o).length === 0)
     return {};
-  const { layout: e, ...t } = n, s = new w(j(e, t));
+  const { layout: r, ...t } = o, s = new A(j(r, t));
   return {
-    ...C({
+    ...U({
       className: s.className,
-      style: C(s.styles)
+      style: U(s.styles)
     }),
     ...s.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  w as LismPropsData,
+  A as LismPropsData,
   B 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%}.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%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "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.0"
   },
   "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',

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/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/Details/_style.css

@@ -1,6 +1,6 @@
 /* Details コンポーネント用スタイル */
 /* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
-@layer lism-modules {
+@layer lism-component {
   .c--details {
     --duration: var(--acc-duration, 0.25s); /* transition時間 */
     --_icon-scale: 1.1;

package/src/components/Details/getProps.ts

@@ -15,12 +15,12 @@ export function getDetailsProps({ lismClass, ...props }: DetailsProps): LismProp
   return props;
 }
 
-export function getTitleProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getTitleProps({ set, ...props }: Record<string, unknown>) {
   return {
     lismClass: 'c--details_title',
     as: 'span',
     fx: '1',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     ...props,
   };
 }

package/src/components/Modal/_style.css

@@ -2,7 +2,7 @@
  * dialog で実装.
  *   Memo: ::backdrop のアニメーションはFirefoxで動かない
  */
-@layer lism-modules {
+@layer lism-component {
   .c--modal {
     --flow: 0; /* flow直下にきても影響しないように */
     --duration: var(--modal-duration, 0.4s);

package/src/components/Modal/getProps.ts

@@ -4,7 +4,6 @@ import mergeSet from 'lism-css/lib/helper/mergeSet';
 export type ModalRootProps = {
   lismClass?: string;
   set?: string;
-  unset?: string;
   duration?: string;
   style?: Record<string, string>;
   [key: string]: unknown;
@@ -17,10 +16,10 @@ export type ModalInnerProps = {
   [key: string]: unknown;
 };
 
-export function getProps({ lismClass = '', set, unset, duration, style = {}, ...props }: ModalRootProps) {
+export function getProps({ lismClass = '', set, duration, style = {}, ...props }: ModalRootProps) {
   const theProps = {
     lismClass: atts(lismClass, 'c--modal'),
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
   };
   if (duration) {
     style['--duration'] = duration;
@@ -40,20 +39,20 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props }:
   };
 }
 
-export function getOpenBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getOpenBtnProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     hov: 'o',
     d: 'inline-flex',
     ...props,
   };
 }
 
-export function getCloseBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getCloseBtnProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     hov: 'o',
     d: 'inline-flex',
     ...props,

package/src/components/NavMenu/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--navMenu {
     --link-td: none;
     --hl: var(--hl--s);

package/src/components/ShapeDivider/_style.css

@@ -1,5 +1,5 @@
 /* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
-@layer lism-modules {
+@layer lism-component {
   .c--shapeDivider {
     --level: 0;
 

package/src/components/Tabs/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--tabs {
     display: grid;
     grid: 'list' 'panel' / 100%;

package/src/components/Tabs/getProps.ts

@@ -13,11 +13,11 @@ export default function getTabsProps({ lismClass, ...props }: TabsProps) {
   };
 }
 
-export function getTabProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getTabProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
     lismClass: 'c--tabs_tab',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     ...props,
   };
 }