@lism-css/ui 0.9.3 → 0.10.0

package/dist/lism-css/dist/config/defaults/tokens.js

@@ -4,7 +4,7 @@ const e = {
   hl: ["base", "xs", "s", "l"],
   lts: ["base", "s", "l"],
   ff: ["base", "accent", "mono"],
-  fw: ["thin", "light", "normal", "medium", "bold", "black"],
+  fw: ["light", "normal", "bold"],
   o: ["-10", "-20", "-30"],
   bdrs: ["5", "10", "20", "30", "40", "50", "99", "inner"],
   bxsh: ["5", "10", "20", "30", "40", "50"],

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

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

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

@@ -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%;--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.3",
+  "version": "0.10.0",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -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.3"
+    "lism-css": "0.10.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -64,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>

package/src/components/Accordion/astro/Root.astro

@@ -8,10 +8,10 @@ const rootProps = getRootProps(Astro.props || {});
 ---
 
 <Stack {...rootProps}>
-	<slot />
+  <slot />
 </Stack>
 
 <script>
-	import setAccordion from '../setAccordion';
-	setAccordion();
+  import setAccordion from '../setAccordion';
+  setAccordion();
 </script>

package/src/components/Accordion/getProps.js

@@ -1,77 +1,77 @@
 import atts from 'lism-css/lib/helper/atts';
 
 export function getRootProps({ lismClass, allowMultiple, ...props }) {
-	props.lismClass = atts(lismClass, 'c--accordion');
-	if (allowMultiple) props['data-allow-multiple'] = '';
-	return props;
+  props.lismClass = atts(lismClass, 'c--accordion');
+  if (allowMultiple) props['data-allow-multiple'] = '';
+  return props;
 }
 
 // duration: [s]
 export function getItemProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'c--accordion_item');
-	return props;
+  props.lismClass = atts(lismClass, 'c--accordion_item');
+  return props;
 }
 
 export function getHeadingProps(props) {
-	const defaultProps = {
-		lismClass: 'c--accordion_heading',
-		as: 'div',
-		setPlain: 1,
-	};
+  const defaultProps = {
+    lismClass: 'c--accordion_heading',
+    as: 'div',
+    setPlain: 1,
+  };
 
-	const returnProps = { ...defaultProps, ...props };
+  const returnProps = { ...defaultProps, ...props };
 
-	// div の時は role 付与
-	if (returnProps.as === 'div') {
-		returnProps.role = 'heading';
-	}
-	return returnProps;
+  // div の時は role 付与
+  if (returnProps.as === 'div') {
+    returnProps.role = 'heading';
+  }
+  return returnProps;
 }
 
 // id: Context から取得できればそれを優先（React用）
 export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }) {
-	// panel側は必要最低限のプロパティのみ。
-	const panelProps = {
-		lismClass: atts(lismClass, 'c--accordion_panel'),
-		id: _contextID || accID,
-		hidden: isOpen ? undefined : 'until-found',
-		pos: 'relative',
-		ov: 'hidden',
-	};
+  // panel側は必要最低限のプロパティのみ。
+  const panelProps = {
+    lismClass: atts(lismClass, 'c--accordion_panel'),
+    id: _contextID || accID,
+    hidden: isOpen ? undefined : 'until-found',
+    pos: 'relative',
+    ov: 'hidden',
+  };
 
-	// 余白などその他の指定は全て _content 側へ渡す
-	const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
+  // 余白などその他の指定は全て _content 側へ渡す
+  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
 
-	// content側へ移すprops
-	// ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
-	// 	if (props[prop]) {
-	// 		contentProps[prop] = props[prop];
-	// 		delete props[prop];
-	// 	}
-	// });
+  // content側へ移すprops
+  // ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
+  // 	if (props[prop]) {
+  // 		contentProps[prop] = props[prop];
+  // 		delete props[prop];
+  // 	}
+  // });
 
-	// 2つ返す
-	return { panelProps, contentProps };
+  // 2つ返す
+  return { panelProps, contentProps };
 }
 
 export const defaultProps = {
-	// header: { lismClass: 'c--accordion_header' },
-	button: {
-		lismClass: 'c--accordion_button',
-		as: 'button',
-		layout: 'flex',
-		setPlain: 1,
-		g: '10',
-		w: '100%',
-		ai: 'center',
-		jc: 'between',
-	},
-	icon: {
-		lismClass: 'c--accordion_icon a--icon',
-		as: 'span',
-		// d: 'grid',
-		pi: 'center',
-		fxsh: '0',
-		'aria-hidden': 'true',
-	},
+  // header: { lismClass: 'c--accordion_header' },
+  button: {
+    lismClass: 'c--accordion_button',
+    as: 'button',
+    layout: 'flex',
+    setPlain: 1,
+    g: '10',
+    w: '100%',
+    ai: 'center',
+    jc: 'between',
+  },
+  icon: {
+    lismClass: 'c--accordion_icon a--icon',
+    as: 'span',
+    // d: 'grid',
+    pi: 'center',
+    fxsh: '0',
+    'aria-hidden': 'true',
+  },
 };

package/src/components/Accordion/react/AccIcon.jsx

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

package/src/components/Accordion/react/Accordion.jsx

@@ -16,34 +16,34 @@ const AccordionContext = createContext(null);
  * 複数の AccordionItem をラップするルート要素
  */
 export function AccordionRoot({ children, ...props }) {
-	const rootProps = getRootProps(props);
-	return <Stack {...rootProps}>{children}</Stack>;
+  const rootProps = getRootProps(props);
+  return <Stack {...rootProps}>{children}</Stack>;
 }
 
 /**
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
 export function AccordionItem({ children, ...props }) {
-	const ref = useRef(null);
+  const ref = useRef(null);
 
-	// コンポーネント単位でユニークIDを生成
-	const accID = useId();
+  // コンポーネント単位でユニークIDを生成
+  const accID = useId();
 
-	// マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
-	useEffect(() => {
-		if (!ref.current) return;
-		return setEvent(ref.current);
-	}, []);
+  // マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
+  useEffect(() => {
+    if (!ref.current) return;
+    return setEvent(ref.current);
+  }, []);
 
-	const lismProps = getLismProps(getItemProps(props));
+  const lismProps = getLismProps(getItemProps(props));
 
-	return (
-		<AccordionContext.Provider value={{ accID }}>
-			<div ref={ref} {...lismProps}>
-				{children}
-			</div>
-		</AccordionContext.Provider>
-	);
+  return (
+    <AccordionContext.Provider value={{ accID }}>
+      <div ref={ref} {...lismProps}>
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
 }
 
 /**
@@ -51,7 +51,7 @@ export function AccordionItem({ children, ...props }) {
  * as に h2〜h6 を指定すると role は付与されない
  */
 export function Heading({ children, ...props }) {
-	return <Lism {...getHeadingProps(props)}>{children}</Lism>;
+  return <Lism {...getHeadingProps(props)}>{children}</Lism>;
 }
 
 /**
@@ -59,27 +59,27 @@ export function Heading({ children, ...props }) {
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
 export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
-	const ctx = useContext(AccordionContext);
-	const accID = ctx?.accID || _accID;
+  const ctx = useContext(AccordionContext);
+  const accID = ctx?.accID || _accID;
 
-	return (
-		<Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded='false'>
-			{children}
-			<AccIcon />
-		</Lism>
-	);
+  return (
+    <Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded="false">
+      {children}
+      <AccIcon />
+    </Lism>
+  );
 }
 
 /**
  * パネル
  */
 export function Panel({ children, ...props }) {
-	const ctx = useContext(AccordionContext);
-	const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
+  const ctx = useContext(AccordionContext);
+  const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
 
-	return (
-		<Lism {...panelProps}>
-			<Lism {...contentProps}>{children}</Lism>
-		</Lism>
-	);
+  return (
+    <Lism {...panelProps}>
+      <Lism {...contentProps}>{children}</Lism>
+    </Lism>
+  );
 }

package/src/components/Accordion/script.js

@@ -1,5 +1,5 @@
 import setAccordion from './setAccordion.js';
 
 document.addEventListener('DOMContentLoaded', function () {
-	setAccordion();
+  setAccordion();
 });