@lism-css/ui 0.9.2 → 0.10.0

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

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

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

@@ -0,0 +1,42 @@
+import { TOKENS as n } from "../config/index.js";
+import a from "./helper/isNumStr.js";
+import o from "./getMaybeTokenValue.js";
+function m(t, e) {
+  if (!e) return String(t);
+  switch (e) {
+    case "space":
+      return c(t);
+    case "color":
+      return u(t);
+    case "bxsh":
+      return t === "0" || t === 0 ? "none" : o(e, t, n);
+    default:
+      return o(e, t, n);
+  }
+}
+function c(t) {
+  if (t === 0 || t === "0") return "0";
+  if (typeof t == "number" || a(t)) {
+    const e = typeof t == "number" ? t : Number(t);
+    return e < 0 ? `calc(-1 * var(--s${Math.abs(e)}))` : `var(--s${t})`;
+  }
+  return typeof t == "string" && t.includes(" ") && !t.includes("calc(") && !t.includes("var(") && !t.includes(",") ? t.split(" ").map((e) => c(e)).join(" ") : String(t);
+}
+function u(t) {
+  if (typeof t == "string" && t.endsWith("%")) {
+    const e = t.split(":");
+    if (e.length === 3) {
+      const [i, s, r] = e;
+      return `color-mix(in srgb, ${o("color", i, n)} ${r}, ${o("color", s, n)})`;
+    } else if (e.length === 2) {
+      const [i, s] = e;
+      return `color-mix(in srgb, ${o("color", i, n)} ${s}, transparent)`;
+    }
+  }
+  return o("color", t, n);
+}
+export {
+  m as default,
+  u as getMaybeColorVar,
+  c as getMaybeSpaceVar
+};

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

@@ -0,0 +1,26 @@
+function u(n, e, a) {
+  if (n === "color") {
+    let t = u("c", e, a);
+    return t === String(e) && (t = u("palette", e, a)), t;
+  }
+  const i = a[n];
+  if (!i) return String(e);
+  let r = typeof e == "number" ? `${e}` : e;
+  if (i instanceof Set) {
+    if (i.has(r))
+      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
+  } else if (Array.isArray(i)) {
+    if (i.includes(r))
+      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
+  } else if ("pre" in i || "values" in i) {
+    const { pre: t = "", values: s = [] } = i;
+    if (s instanceof Set && s.has(r))
+      return `var(${t}${r})`;
+    if (Array.isArray(s) && s.includes(r))
+      return `var(${t}${r})`;
+  }
+  return String(e);
+}
+export {
+  u as default
+};

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

@@ -0,0 +1,13 @@
+function i(t, f, n = !1) {
+  if (t == null || typeof t != "object") return "";
+  if (f in t)
+    return n ? String(t[f]) : f;
+  if (n) return "";
+  for (const [r, e] of Object.entries(t))
+    if (e === f)
+      return r;
+  return "";
+}
+export {
+  i as default
+};

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

@@ -0,0 +1,11 @@
+function i(...s) {
+  let e = [];
+  for (let r = 0; r < s.length; r++) {
+    const t = s[r];
+    t && (typeof t == "string" ? e.push(...t.trim().split(" ")) : typeof t == "number" ? e.push(t) : Array.isArray(t) ? e.push(...t.filter((n) => n != null)) : t instanceof Set ? e.push(...t) : typeof t == "object" && e.push(...Object.keys(t).filter((n) => !!t[n])));
+  }
+  return e = [...new Set(e)], e.join(" ").trim();
+}
+export {
+  i as default
+};

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

@@ -0,0 +1,10 @@
+import r from "./isEmptyObj.js";
+function c(o) {
+  const e = {};
+  for (const n in o)
+    o[n] === "" || o[n] === null || o[n] === void 0 || typeof o[n] == "object" && r(o[n]) || (e[n] = o[n]);
+  return e;
+}
+export {
+  c as default
+};

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

@@ -0,0 +1,6 @@
+function l(t, e) {
+  return t == null ? !1 : e.some((a) => Object.prototype.hasOwnProperty.call(t, a));
+}
+export {
+  l as default
+};

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

@@ -0,0 +1,6 @@
+function t(e) {
+  return Object.keys(e).length < 1;
+}
+export {
+  t as default
+};

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

@@ -0,0 +1,6 @@
+function e(t) {
+  return typeof t != "string" ? !1 : !isNaN(Number(t));
+}
+export {
+  e as default
+};

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

@@ -0,0 +1,6 @@
+function a(t) {
+  return Array.isArray(t) ? t : typeof t != "string" ? [] : t.split(",").map((r) => r.trim());
+}
+export {
+  a as default
+};

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

@@ -0,0 +1,13 @@
+function s(e, t) {
+  let n;
+  if (typeof t == "number")
+    n = `${t}`;
+  else if (typeof t == "string")
+    n = t;
+  else
+    return !1;
+  return e instanceof Set ? e.has(n) : Array.isArray(e) ? e.includes(n) : !1;
+}
+export {
+  s as default
+};

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

@@ -0,0 +1,27 @@
+import { TOKENS as f } from "../config/index.js";
+function s(i, n) {
+  let e;
+  if (typeof n == "number")
+    e = `${n}`;
+  else if (typeof n == "string")
+    e = n;
+  else
+    return !1;
+  if (!(i in f)) return !1;
+  const r = f[i];
+  if (r instanceof Set)
+    return r.has(e);
+  if (Array.isArray(r))
+    return r.includes(e);
+  if ("values" in r) {
+    const t = r.values;
+    if (t instanceof Set)
+      return t.has(e);
+    if (Array.isArray(t))
+      return t.includes(e);
+  }
+  return !1;
+}
+export {
+  s 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%;--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%)}}

package/dist/ui.css

@@ -0,0 +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%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -20,7 +20,7 @@
   "main": "./dist/index.js",
   "exports": {
     "./react": {
-      "import": "./src/components/react.js",
+      "import": "./dist/components/react.js",
       "types": "./dist/components/index.d.ts"
     },
     "./astro": {
@@ -30,16 +30,16 @@
     "./scripts/*": "./dist/scripts/*.js",
     "./style.css": "./dist/style.css"
   },
-  "homepage": "https://www.lism.style",
+  "homepage": "https://lism-css.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
+    "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-ui"
   },
   "bugs": {
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.9.2"
+    "lism-css": "0.10.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -51,9 +51,10 @@
     "@vitejs/plugin-react-swc": "^3.11.0",
     "glob": "^13.0.6",
     "rollup": "^4.59.0",
-    "typescript": "~5.8.3",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "typescript": "^5.8.3",
     "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.4.1"
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -63,6 +64,7 @@
   },
   "sideEffects": false,
   "scripts": {
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
     "dev": "vite",
     "build": "vite build && pnpm build:css",
     "build:css": "node build-css.js"

package/src/components/Accordion/_style.css

@@ -1,79 +1,79 @@
-@layer lism.modules {
-	.c--accordion {
-		--duration: var(--acc-duration, 0.25s);
-	}
-	.c--accordion_item {
-		--_panel-h: 0px;
-		--_icon-transform: rotate(0deg);
-	}
+@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; /* Note: アニメーション時、jsでセットされる */
-	}
+  /* 開いている時 */
+  .c--accordion_item[data-opened] {
+    --_icon-transform: rotate(90deg);
+    --_panel-h: auto; /* Note: アニメーション時、jsでセットされる */
+  }
 
-	/* .c--accordion_button {} */
-	.c--accordion_panel {
-		height: var(--_panel-h);
-		transition: height var(--duration);
-	}
+  /* .c--accordion_button {} */
+  .c--accordion_panel {
+    height: var(--_panel-h);
+    transition: height var(--duration);
+  }
 
-	/* コンテンツの paddingは __panel ではなくこっちにつける */
-	/* .c--accordion_content {} */
+  /* コンテンツの paddingは __panel ではなくこっちにつける */
+  /* .c--accordion_content {} */
 
-	/* パネルが完全に閉じている時にabsoluteで飛ばしておくと、Chromeでも検索時に正常にハイライトされるようになる（なぜかは不明） */
-	[hidden] > .c--accordion_content {
-		position: absolute;
-	}
+  /* パネルが完全に閉じている時にabsoluteで飛ばしておくと、Chromeでも検索時に正常にハイライトされるようになる（なぜかは不明） */
+  [hidden] > .c--accordion_content {
+    position: absolute;
+  }
 
-	/* アイコンの描画 */
-	.c--accordion_icon {
-		display: grid;
-		width: 1em;
-		height: 1em;
+  /* アイコンの描画 */
+  .c--accordion_icon {
+    display: grid;
+    width: 1em;
+    height: 1em;
 
-		&::before,
-		&::after {
-			content: '';
-			display: block;
-			grid-area: 1 / 1;
-			background-color: currentColor;
-		}
-		&::before {
-			width: 0.1em;
-			height: 100%;
-			transition: transform var(--duration);
-			transform: var(--_icon-transform);
-		}
-		&::after {
-			height: 0.1em;
-			width: 100%;
-		}
-	}
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      grid-area: 1 / 1;
+      background-color: currentColor;
+    }
+    &::before {
+      width: 0.1em;
+      height: 100%;
+      transition: transform var(--duration);
+      transform: var(--_icon-transform);
+    }
+    &::after {
+      height: 0.1em;
+      width: 100%;
+    }
+  }
 
-	/* フォーカス時のアウトラインを少し内側に寄せる( overflow:hidden によって途切れてしまうので)  */
-	.c--accordion_button:focus-visible {
-		outline: solid 2px currentColor;
-		outline-color: revert;
-		outline-offset: -3px; /* offset 調整だけだとブラウザ間の差が大きい */
-	}
+  /* フォーカス時のアウトラインを少し内側に寄せる( overflow:hidden によって途切れてしまうので)  */
+  .c--accordion_button:focus-visible {
+    outline: solid 2px currentColor;
+    outline-color: revert;
+    outline-offset: -3px; /* offset 調整だけだとブラウザ間の差が大きい */
+  }
 
-	/* --- 「視差効果を減らす」設定を考慮 --- */
-	@media (prefers-reduced-motion: reduce) {
-		.c--accordion_item {
-			--duration: 0s;
-		}
-	}
+  /* --- 「視差効果を減らす」設定を考慮 --- */
+  @media (prefers-reduced-motion: reduce) {
+    .c--accordion_item {
+      --duration: 0s;
+    }
+  }
 
-	/* --- JSオフ環境の考慮 --- */
-	@media (scripting: none) {
-		.c--accordion_panel {
-			height: auto !important;
-			content-visibility: visible !important;
-		}
-		.c--accordion_content {
-			position: static !important;
-		}
-	}
+  /* --- JSオフ環境の考慮 --- */
+  @media (scripting: none) {
+    .c--accordion_panel {
+      height: auto !important;
+      content-visibility: visible !important;
+    }
+    .c--accordion_content {
+      position: static !important;
+    }
+  }
 }

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

@@ -8,6 +8,6 @@ const { isOpen = false, accID = '__LISM_ACC_ID__', ...props } = Astro.props || {
 ---
 
 <Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded={isOpen ? 'true' : 'false'}>
-	<slot />
-	<Icon />
+  <slot />
+  <Icon />
 </Lism>

package/src/components/Accordion/astro/Heading.astro

@@ -6,5 +6,5 @@ import { getHeadingProps } from '../getProps';
 ---
 
 <Lism {...getHeadingProps(Astro.props || {})}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/Accordion/astro/Item.astro

@@ -21,11 +21,11 @@ const slotHtml = rendered.includes('__LISM_ACC_ID__') ? rendered.replaceAll('__L
 ---
 
 {
-	slotHtml !== null ? (
-		<div {...lismProps} set:html={slotHtml} />
-	) : (
-		<div {...lismProps}>
-			<slot />
-		</div>
-	)
+  slotHtml !== null ? (
+    <div {...lismProps} set:html={slotHtml} />
+  ) : (
+    <div {...lismProps}>
+      <slot />
+    </div>
+  )
 }

package/src/components/Accordion/astro/Panel.astro

@@ -8,7 +8,7 @@ const { panelProps, contentProps } = getPanelProps(Astro.props || {});
 ---
 
 <Lism {...panelProps}>
-	<Lism {...contentProps}>
-		<slot />
-	</Lism>
+  <Lism {...contentProps}>
+    <slot />
+  </Lism>
 </Lism>