@lism-css/ui 0.10.0 → 0.12.0

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

@@ -1,19 +1,20 @@
-import { STATES as P, PROPS as S } from "../config/index.js";
+import { STATES as b, PROPS as S } from "../config/index.js";
 import j from "./getLayoutProps.js";
 import U from "./isPresetValue.js";
-import w from "./isTokenValue.js";
+import x from "./isTokenValue.js";
 import v from "./getUtilKey.js";
 import m from "./getMaybeCssVar.js";
-import z from "./getBpData.js";
-import E from "./helper/atts.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 k from "./helper/splitWithComma.js";
-const _ = (h) => {
-  const s = S[h];
-  return s && s?.token || "";
+const A = (n) => {
+  const e = S[n];
+  return e && e?.token || "";
 };
-class x {
+class w {
   // propList = {};
   className = "";
   uClasses = [];
@@ -21,120 +22,121 @@ class x {
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(s) {
-    const { forwardedRef: t, class: e, className: i, lismClass: o, variant: r, style: l = {}, _propConfig: n = {}, ...c } = s;
-    this.styles = { ...l }, this._propConfig = { ...n };
-    let f = o || "";
-    if (r && o) {
-      const y = o.split(" "), a = y[0], u = `${a}--${r}`;
-      f = [a, u, ...y.slice(1)].join(" ");
+  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 = E(i || e, f, this.lismState, this.uClasses);
+    N(c) || (this.attrs = { ...c }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = z(r || s, h, this.lismState, this.uClasses);
   }
-  analyzeState(s, t) {
-    const { className: e, preset: i, presetClass: o, customVar: r, tokenKey: l, setStyles: n } = s;
-    t === !0 ? this.lismState.push(e) : i && U(i, t) ? this.lismState.push(`${e} ${o}:${String(t)}`) : t && (this.lismState.push(e), l && r ? this.addStyle(r, m(t, l)) : n && typeof t == "string" && this.addStyles(n(t)));
+  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)));
   }
   // prop解析
   analyzeProps() {
+    const e = this.extractProp("set"), t = this.extractProp("unset");
     Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(P, s)) {
-        const t = this.extractProp(s), e = P[s];
-        typeof e == "string" ? t && this.lismState.push(e) : this.analyzeState(e, t);
+      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 t = this.attrs[s];
-        delete this.attrs[s], this.analyzeLismProp(s, t);
+        const r = this.attrs[s];
+        delete this.attrs[s], this.analyzeLismProp(s, r);
       } else if (s === "hov") {
-        const t = this.extractProp(s);
-        this.setHovProps(t);
+        const r = this.extractProp(s);
+        this.setHovProps(r);
       } else if (s === "css") {
-        const t = this.extractProp("css");
-        this.addStyles(t);
+        const r = this.extractProp("css");
+        this.addStyles(r);
       }
-    });
+    }), _(void 0, e, t).forEach((s) => this.lismState.push(`set--${s}`));
   }
   // Lism Prop 解析
-  analyzeLismProp(s, t) {
+  analyzeLismProp(e, t) {
     if (t == null) return;
-    let e = S[s] || null;
-    if (e === null) return;
-    this._propConfig?.[s] && (e = Object.assign({}, e, this._propConfig[s]));
-    const { base: i, ...o } = z(t);
-    this.setAttrs(s, i, e), Object.keys(o).forEach((r) => {
-      e && this.setAttrs(s, o[r], e, r);
+    let s = S[e] || null;
+    if (s === null) return;
+    this._propConfig?.[e] && (s = Object.assign({}, s, this._propConfig[e]));
+    const { base: r, ...o } = E(t);
+    this.setAttrs(e, r, s), Object.keys(o).forEach((i) => {
+      s && this.setAttrs(e, o[i], s, i);
     });
   }
-  addUtil(s) {
-    this.uClasses.push(s);
+  addUtil(e) {
+    this.uClasses.push(e);
   }
-  addUtils(s) {
-    this.uClasses.push(...s);
+  addUtils(e) {
+    this.uClasses.push(...e);
   }
   // addState(state) {
   // 	this.stateClasses.push(state);
   // }
-  addStyle(s, t) {
-    this.styles[s] = t;
+  addStyle(e, t) {
+    this.styles[e] = t;
   }
-  addStyles(s) {
-    this.styles = { ...this.styles, ...s };
+  addStyles(e) {
+    this.styles = { ...this.styles, ...e };
   }
-  addAttrs(s) {
-    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
+  addAttrs(e) {
+    this.addStyles(e.styles || {}), this.addUtils(e.utils || []);
   }
-  extractProp(s) {
-    const t = this.attrs[s];
-    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
+  extractProp(e) {
+    const t = this.attrs[e];
+    return this.attrs[e] === void 0 ? null : (delete this.attrs[e], t);
   }
-  extractProps(s) {
+  extractProps(e) {
     const t = {};
-    return s.forEach((e) => {
-      this.attrs[e] !== void 0 && (t[e] = this.attrs[e], delete this.attrs[e]);
+    return e.forEach((s) => {
+      this.attrs[s] !== void 0 && (t[s] = this.attrs[s], delete this.attrs[s]);
     }), t;
   }
   // utilクラスを追加するか、styleにセットするかの分岐処理 @base
   // 値が null, undefined, '', false の時はスキップ
-  setAttrs(s, t, e = {}, i = "") {
+  setAttrs(e, t, s = {}, r = "") {
     if (t == null || t === "" || t === !1) return;
-    let o = `--${s}`, r = `-${String(e.utilKey || s)}`;
-    if (i && (o = `--${s}_${i}`, r += `_${i}`), typeof t == "string" && t.startsWith(":")) {
-      this.addUtil(`${r}:${t.replace(":", "")}`);
+    let o = `--${e}`, i = `-${String(s.utilKey || e)}`;
+    if (r && (o = `--${e}_${r}`, i += `_${r}`), typeof t == "string" && t.startsWith(":")) {
+      this.addUtil(`${i}:${t.replace(":", "")}`);
       return;
     }
-    if (!i) {
-      const { presets: u, tokenClass: O, utils: g, shorthands: b } = e;
+    if (!r) {
+      const { presets: u, tokenClass: O, utils: g, shorthands: P } = s;
       if (u && U(u, t)) {
-        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        d && this.addUtil(`${r}:${d}`);
+        const p = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        p && this.addUtil(`${i}:${p}`);
         return;
       }
-      if (O && e.token && w(e.token, t)) {
-        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        d && this.addUtil(`${r}:${d}`);
+      if (O && s.token && x(s.token, t)) {
+        const p = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        p && this.addUtil(`${i}:${p}`);
         return;
       }
-      let p = "";
-      if (g && typeof t == "string" && (p = v(g, t)), !p && b && typeof t == "string" && (p = v(b, t, !0)), p) {
-        this.addUtil(`${r}:${p}`);
+      let 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}`);
         return;
       }
     }
     if (t === !0 || t === "-") {
-      this.addUtil(r);
+      this.addUtil(i);
       return;
     }
-    const { prop: l, isVar: n, alwaysVar: c, token: f, bp: y } = e;
+    const { prop: l, isVar: y, alwaysVar: c, token: h, bp: d } = s;
     let a;
-    if (f && (typeof t == "string" || typeof t == "number") ? a = m(t, f) : typeof t == "string" || typeof t == "number" ? a = t : a = JSON.stringify(t), !i) {
-      if (n) {
-        this.addStyle(`--${s}`, a);
+    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);
         return;
-      } else if (!y && !c) {
+      } else if (!d && !c) {
         this.addStyle(l, a);
         return;
       }
     }
-    this.addUtil(r), this.addStyle(o, a);
+    this.addUtil(i), this.addStyle(o, a);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -149,40 +151,40 @@ class x {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(s) {
-    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
+  setHovProps(e) {
+    e && (e === "-" || e === !0 ? this.addUtil("-hov") : typeof e == "string" ? k(e).forEach((t) => {
       this.addUtil(`-hov:${t}`);
-    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
-      const e = s[t];
-      if (!(e == null || e === "" || e === !1)) {
-        if (e === "-" || e === !0)
+    }) : typeof e == "object" && Object.keys(e).forEach((t) => {
+      const s = e[t];
+      if (!(s == null || s === "" || s === !1)) {
+        if (s === "-" || s === !0)
           this.addUtil(`-hov:${t}`);
         else if (t === "class")
-          k(e).forEach((i) => {
-            this.addUtil(`-hov:${i}`);
+          k(s).forEach((r) => {
+            this.addUtil(`-hov:${r}`);
           });
-        else if (typeof e == "string" || typeof e == "number") {
-          const i = m(e, _(t));
-          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, i);
+        else if (typeof s == "string" || typeof s == "number") {
+          const r = m(s, A(t));
+          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, r);
         }
       }
     }));
   }
 }
-function q(h) {
-  if (Object.keys(h).length === 0)
+function B(n) {
+  if (Object.keys(n).length === 0)
     return {};
-  const { layout: s, ...t } = h, e = new x(j(s, t));
+  const { layout: e, ...t } = n, s = new w(j(e, t));
   return {
     ...C({
-      className: e.className,
-      style: C(e.styles)
+      className: s.className,
+      style: C(s.styles)
     }),
-    ...e.attrs
+    ...s.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  x as LismPropsData,
-  q as default
+  w as LismPropsData,
+  B as default
 };

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

@@ -0,0 +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 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));
+}
+export {
+  o 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%;--gta:"avatar name" "avatar body";--gtc:auto 1fr;--gtr: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;--gta:"name avatar" "body avatar";--gtc: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-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%)}}

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%;--gta: "avatar name" "avatar body";--gtc: auto 1fr;--gtr: 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;--gta: "name avatar" "body avatar";--gtc: 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-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%)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.10.0",
-  "description": "UI components by lism-css.",
+  "version": "0.12.0",
+  "description": "UI components for React and Astro, powered by Lism CSS.",
   "author": {
     "name": "ddryo",
     "url": "https://github.com/ddryo"
@@ -21,11 +21,10 @@
   "exports": {
     "./react": {
       "import": "./dist/components/react.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components/react.d.ts"
     },
     "./astro": {
-      "import": "./src/components/astro.js",
-      "types": "./dist/components/index.d.ts"
+      "import": "./src/components/astro.ts"
     },
     "./scripts/*": "./dist/scripts/*.js",
     "./style.css": "./dist/style.css"
@@ -39,9 +38,13 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.10.3"
+    "lism-css": "0.12.0"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^10.3.3",
+    "eslint": "^9.39.4",
+    "storybook": "^10.3.3",
+    "stylelint": "^17.4.0",
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
@@ -67,6 +70,10 @@
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "dev": "vite",
     "build": "vite build && pnpm build:css",
-    "build:css": "node build-css.js"
+    "build:css": "node build-css.js",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm lint:eslint && pnpm lint:style",
+    "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx}'",
+    "lint:style": "stylelint '**/*.{css,scss}'"
   }
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+import Accordion from './react';
+
+const meta: Meta = {
+  title: 'UI/Accordion',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion.Root>
+      <Accordion.Item>
+        <Accordion.Heading>
+          <Accordion.Button>アコーディオン 1</Accordion.Button>
+        </Accordion.Heading>
+        <Accordion.Panel>
+          <p>アコーディオン 1 のコンテンツです。</p>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    // 初期状態: 閉じている
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    // クリックで開く
+    await userEvent.click(button);
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'));
+
+    // 再クリックで閉じる
+    await userEvent.click(button);
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'false'));
+  },
+};
+
+export const Multiple: Story = {
+  name: '複数アイテム',
+  render: () => (
+    <Accordion.Root>
+      {[1, 2, 3].map((i) => (
+        <Accordion.Item key={i}>
+          <Accordion.Heading>
+            <Accordion.Button>アコーディオン {i}</Accordion.Button>
+          </Accordion.Heading>
+          <Accordion.Panel>
+            <p>アコーディオン {i} のコンテンツです。</p>
+          </Accordion.Panel>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+    const [btn1, btn2] = buttons;
+
+    // 1つ目を開く
+    await userEvent.click(btn1);
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'true'));
+
+    // 2つ目を開く → 1つ目が閉じる（allowMultiple なし）
+    await userEvent.click(btn2);
+    await waitFor(() => expect(btn2).toHaveAttribute('aria-expanded', 'true'));
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'false'));
+  },
+};
+
+export const AllowMultiple: Story = {
+  name: 'allowMultiple（複数同時展開可）',
+  render: () => (
+    <Accordion.Root allowMultiple>
+      {[1, 2, 3].map((i) => (
+        <Accordion.Item key={i}>
+          <Accordion.Heading>
+            <Accordion.Button>アコーディオン {i}</Accordion.Button>
+          </Accordion.Heading>
+          <Accordion.Panel>
+            <p>アコーディオン {i} のコンテンツです。複数同時に開けます。</p>
+          </Accordion.Panel>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+    const [btn1, btn2] = buttons;
+
+    // 1つ目を開く
+    await userEvent.click(btn1);
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'true'));
+
+    // 2つ目を開く → 1つ目はそのまま開いている
+    await userEvent.click(btn2);
+    await waitFor(() => expect(btn2).toHaveAttribute('aria-expanded', 'true'));
+    await expect(btn1).toHaveAttribute('aria-expanded', 'true');
+  },
+};

package/src/components/Accordion/astro/Button.astro

@@ -1,13 +1,13 @@
 ---
 import { Lism } from 'lism-css/astro';
 import Icon from './Icon.astro';
-import { defaultProps } from '../getProps';
+import { getButtonProps } from '../getProps';
 
 // interface Props extends LismProps {}
 const { isOpen = false, accID = '__LISM_ACC_ID__', ...props } = Astro.props || {};
 ---
 
-<Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded={isOpen ? 'true' : 'false'}>
+<Lism {...getButtonProps(props)} aria-controls={accID} aria-expanded={isOpen ? 'true' : 'false'}>
   <slot />
   <Icon />
 </Lism>

package/src/components/Accordion/getProps.ts

@@ -0,0 +1,91 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+export type AccordionRootProps = {
+  lismClass?: string;
+  allowMultiple?: boolean;
+  [key: string]: unknown;
+};
+
+export type AccordionItemProps = {
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export type AccordionHeadingProps = {
+  as?: string;
+  role?: string;
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export type AccordionPanelProps = {
+  lismClass?: string;
+  _contextID?: string;
+  accID?: string;
+  isOpen?: boolean;
+  [key: string]: unknown;
+};
+
+export function getRootProps({ lismClass, allowMultiple, ...props }: AccordionRootProps) {
+  props.lismClass = atts(lismClass, 'c--accordion');
+  if (allowMultiple) props['data-allow-multiple'] = '';
+  return props;
+}
+
+export function getItemProps({ lismClass, ...props }: AccordionItemProps) {
+  props.lismClass = atts(lismClass, 'c--accordion_item');
+  return props;
+}
+
+export function getHeadingProps({ as = 'div', role, lismClass, set, unset, ...props }: AccordionHeadingProps) {
+  const returnProps = {
+    lismClass: atts(lismClass, 'c--accordion_heading'),
+    as,
+    set: mergeSet('plain', set, unset),
+    ...props,
+  };
+
+  if (returnProps.as === 'div') {
+    (returnProps as Record<string, unknown>).role = role ?? 'heading';
+  }
+  return returnProps;
+}
+
+export function getButtonProps({ set, unset, ...props }: Record<string, unknown>) {
+  return {
+    lismClass: 'c--accordion_button',
+    as: 'button',
+    layout: 'flex',
+    set: mergeSet('plain', set, unset),
+    g: '10',
+    w: '100%',
+    ai: 'center',
+    jc: 'between',
+    ...props,
+  };
+}
+
+export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }: AccordionPanelProps) {
+  const panelProps = {
+    lismClass: atts(lismClass, 'c--accordion_panel'),
+    id: _contextID || accID,
+    hidden: isOpen ? undefined : ('until-found' as unknown as boolean),
+    pos: 'relative',
+    ov: 'hidden',
+  };
+
+  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow' as const, ...props };
+
+  return { panelProps, contentProps };
+}
+
+export const defaultProps = {
+  icon: {
+    lismClass: 'c--accordion_icon a--icon',
+    as: 'span',
+    pi: 'center',
+    fxsh: '0',
+    'aria-hidden': 'true',
+  },
+} as const;

package/src/components/Accordion/react/{AccIcon.jsx → AccIcon.tsx}

@@ -1,7 +1,7 @@
-import { Lism } from 'lism-css/react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 // CSS疑似要素（::before / ::after）でアイコンを描画するコンポーネント
-export default function AccIcon(props) {
+export default function AccIcon(props: LismComponentProps) {
   return <Lism {...defaultProps.icon} {...props} />;
 }