@lism-css/ui 0.2.3 → 0.8.0

package/dist/components/Accordion/astro/index.d.ts

@@ -1,15 +1,15 @@
-import { default as Root } from './Accordion.astro';
-import { default as Header } from './AccHeader.astro';
-import { default as HeaderLabel } from './AccHeaderLabel.astro';
-import { default as Body } from './AccBody.astro';
-import { default as Icon } from './AccIcon.astro';
-import { default as Label } from './AccLabel.astro';
+import { default as Root } from './Root.astro';
+import { default as Item } from './Item.astro';
+import { default as Heading } from './Heading.astro';
+import { default as Panel } from './Panel.astro';
+import { default as Icon } from './Icon.astro';
+import { default as Button } from './Button.astro';
 declare namespace _default {
     export { Root };
-    export { Header };
-    export { HeaderLabel };
-    export { Body };
+    export { Item };
+    export { Heading };
+    export { Panel };
     export { Icon };
-    export { Label };
+    export { Button };
 }
 export default _default;

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

@@ -1,31 +1,52 @@
-export function getAccProps({ lismClass, ...props }: {
+export function getRootProps({ lismClass, allowMultiple, ...props }: {
     [x: string]: any;
     lismClass: any;
+    allowMultiple: any;
 }): {
     [x: string]: any;
 };
-export function getAccIconProps({ isTrigger, ...props }: {
+export function getItemProps({ lismClass, ...props }: {
     [x: string]: any;
-    isTrigger: any;
+    lismClass: any;
 }): {
-    lismClass: string;
-    tag: string;
+    [x: string]: any;
+};
+export function getHeadingProps(props: any): any;
+export function getPanelProps({ lismClass, _contextID, accID, isOpen, ...props }: {
+    [x: string]: any;
+    lismClass: any;
+    _contextID: any;
+    accID?: string | undefined;
+    isOpen?: boolean | undefined;
+}): {
+    panelProps: {
+        lismClass: string;
+        id: any;
+        hidden: string | undefined;
+        pos: string;
+        ov: string;
+    };
+    contentProps: {
+        lismClass: string;
+        layout: string;
+    };
 };
 export namespace defaultProps {
-    namespace header {
+    namespace button {
         let lismClass: string;
+        let tag: string;
+        let layout: string;
+        let setPlain: number;
+        let g: string;
+        let w: string;
+        let ai: string;
+        let jc: string;
     }
-    namespace label {
-        let lismClass_1: string;
-        export { lismClass_1 as lismClass };
-        export let tag: string;
-    }
-    namespace body {
-        let lismClass_2: string;
-        export { lismClass_2 as lismClass };
-    }
-    namespace inner {
-        let lismClass_3: string;
-        export { lismClass_3 as lismClass };
-    }
+    let icon: {
+        lismClass: string;
+        tag: string;
+        pi: string;
+        fxsh: string;
+        'aria-hidden': string;
+    };
 }

package/dist/components/Accordion/react/AccIcon.d.ts

@@ -1,6 +1 @@
-export default function AccIcon({ icon, viewBox, children, ...props }: {
-    [x: string]: any;
-    icon?: string | undefined;
-    viewBox: any;
-    children?: null | undefined;
-}): import("react").JSX.Element;
+export default function AccIcon(props: any): import("react").JSX.Element;

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

@@ -1,23 +1,39 @@
 import { default as React } from 'react';
-export function Accordion({ children, ...props }: {
+/**
+ * 複数の AccordionItem をラップするルート要素
+ */
+export function AccordionRoot({ children, ...props }: {
     [x: string]: any;
     children: any;
 }): React.JSX.Element;
-export function Header({ children, ...props }: {
+/**
+ * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
+ */
+export function AccordionItem({ children, ...props }: {
     [x: string]: any;
     children: any;
 }): React.JSX.Element;
-export function Label({ children, ...props }: {
+/**
+ * 見出しエリアのラッパー（デフォルトは <div role="heading">）
+ * tag に h2〜h6 を指定すると role は付与されない
+ */
+export function Heading({ children, ...props }: {
     [x: string]: any;
     children: any;
 }): React.JSX.Element;
-export function Body({ children, flow, innerProps, ...props }: {
+/**
+ * 開閉トリガーボタン
+ * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
+ */
+export function Button({ children, accID: _accID, ...props }: {
     [x: string]: any;
     children: any;
-    flow: any;
-    innerProps: any;
+    accID?: string | undefined;
 }): React.JSX.Element;
-export function HeaderLabel({ children, ...props }: {
+/**
+ * パネル
+ */
+export function Panel({ children, ...props }: {
     [x: string]: any;
     children: any;
 }): React.JSX.Element;

package/dist/components/Accordion/react/index.d.ts

@@ -1,11 +1,13 @@
-import { Accordion as Root, Header, Label, Body, HeaderLabel } from './Accordion';
+import { AccordionRoot as Root, AccordionItem as Item, Heading, Panel, Button } from './Accordion';
 import { default as Icon } from './AccIcon';
 declare namespace _default {
     export { Root };
+    export { Item };
     export { Header };
-    export { Label };
+    export { Heading };
+    export { Panel };
     export { Icon };
-    export { Body };
-    export { HeaderLabel };
+    export { Button };
 }
 export default _default;
+declare const Header: typeof Heading;

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

@@ -1,3 +1,6 @@
-export function setEvent(details: any): (() => void) | undefined;
+export function setEvent(accordionItem: any): () => void;
 export default setAccordion;
+/**
+ * ページ内の全アコーディオンにイベントをセット（Astro用）
+ */
 declare function setAccordion(): void;

package/dist/components/Accordion/setAccordion.js

@@ -1,48 +1,45 @@
-const l = (e) => {
-  const t = e.querySelector(".c--accordion_body"), n = t ? t.getAnimations() : [];
-  return Promise.allSettled(n.map((o) => o.finished));
-}, s = async (e) => {
-  e.open && e.hasAttribute("data-opened") || (e.open = !0, requestAnimationFrame(() => {
-    e.setAttribute("data-opened", "");
-  }));
-}, a = async (e) => {
-  !e.open && !e.hasAttribute("data-opened") || (e.removeAttribute("data-opened"), await l(e), e.open = !1);
-}, i = (e) => {
-  let t = !1;
-  const n = e.parentNode;
-  return n != null && (t = n.dataset.multiple !== "disallow"), t;
-}, p = (e, t) => {
-  if (e.open)
-    e.open && a(e);
-  else {
-    if (!t) {
-      const o = e.parentNode.querySelector("[data-opened]");
-      requestAnimationFrame(() => {
-        o != null && a(o);
-      });
-    }
-    s(e);
-  }
-}, u = (e) => {
-  const t = e.open, n = e.hasAttribute("data-opened");
-  t && !n && e.setAttribute("data-opened", ""), !t && n && e.removeAttribute("data-opened");
-}, m = (e) => {
-  const t = i(e), n = e.querySelector("summary");
-  if (!n) return;
-  const o = (c) => {
-    c.preventDefault(), p(e, t);
-  }, r = () => {
-    u(e);
+import { maybePauseAnimation as l, waitFrame as s, waitAnimation as u } from "../../helper/animation.js";
+let d = "until-found";
+const i = (e) => {
+  const t = e.querySelector(".c--accordion_heading"), n = e.querySelector(".c--accordion_panel");
+  return {
+    heading: t,
+    button: t.querySelector("button"),
+    panel: n,
+    content: n.querySelector(".c--accordion_content")
   };
-  return n.addEventListener("click", o), e.addEventListener("toggle", r), () => {
-    n.removeEventListener("click", o), e.removeEventListener("toggle", r);
+}, f = (e) => {
+  const t = e.parentNode;
+  t && (t.hasAttribute("data-allow-multiple") || t.querySelectorAll(":scope > [data-opened]").forEach((n) => p(n)));
+};
+async function A(e) {
+  const { panel: t, content: n, button: a } = i(e);
+  l(t), t.removeAttribute("hidden"), await s(), e.style.setProperty("--_panel-h", `${n.offsetHeight}px`), await s(), e.setAttribute("data-opened", ""), a.setAttribute("aria-expanded", "true"), await u(t) !== "canceled" && e.style.removeProperty("--_panel-h");
+}
+async function p(e) {
+  const { panel: t, button: n } = i(e);
+  l(t), e.style.setProperty("--_panel-h", `${t.offsetHeight}px`), await s(), e.removeAttribute("data-opened"), n.setAttribute("aria-expanded", "false"), e.style.removeProperty("--_panel-h"), await u(t) !== "canceled" && t.setAttribute("hidden", d);
+}
+function c(e) {
+  e.hasAttribute("data-opened") ? p(e) : (f(e), A(e));
+}
+const b = (e) => {
+  const { button: t, panel: n } = i(e);
+  n.hasAttribute("hidden") && (d = n.getAttribute("hidden"));
+  const a = (r) => {
+    r.preventDefault(), c(e);
+  }, o = (r) => {
+    r.preventDefault(), c(e);
+  };
+  return t.addEventListener("click", a), n.addEventListener("beforematch", o), () => {
+    t.removeEventListener("click", a), n.removeEventListener("beforematch", o);
   };
-}, d = () => {
-  document.querySelectorAll(".c--accordion").forEach((t) => {
-    m(t);
+}, y = () => {
+  document.querySelectorAll(".c--accordion_item").forEach((t) => {
+    b(t);
   });
 };
 export {
-  d as default,
-  m as setEvent
+  y as default,
+  b as setEvent
 };

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

@@ -15,7 +15,7 @@ export default function getCalloutProps({ type, keycolor, icon, title, flow, ...
     p: string;
     g: string;
     bdc: string;
-    'bd-x-s': boolean;
+    'bd-x-s': string;
     bdw: string;
     bxsh: string;
     bdrs: string;

package/dist/components/Details/astro/index.d.ts

@@ -0,0 +1,13 @@
+import { default as Root } from './Details.astro';
+import { default as Summary } from './Summary.astro';
+import { default as Title } from './Title.astro';
+import { default as Content } from './Content.astro';
+import { default as Icon } from './Icon.astro';
+declare namespace _default {
+    export { Root };
+    export { Summary };
+    export { Title };
+    export { Content };
+    export { Icon };
+}
+export default _default;

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

@@ -0,0 +1,40 @@
+/**
+ * Detailsコンポーネントのルート要素用プロパティを生成
+ * @param {Object} props - コンポーネントのプロパティ
+ * @param {string} props.lismClass - 追加のLismクラス
+ * @returns {Object} 処理済みプロパティ
+ */
+export function getDetailsProps({ lismClass, ...props }: {
+    lismClass: string;
+}): Object;
+export namespace defaultProps {
+    namespace summary {
+        let lismClass: string;
+        let layout: string;
+        let g: string;
+        let ai: string;
+    }
+    namespace title {
+        let lismClass_1: string;
+        export { lismClass_1 as lismClass };
+        export let tag: string;
+        export let fx: string;
+        export let setPlain: number;
+    }
+    let icon: {
+        lismClass: string;
+        tag: string;
+        'aria-hidden': string;
+    };
+    namespace body {
+        let lismClass_2: string;
+        export { lismClass_2 as lismClass };
+    }
+    namespace content {
+        let lismClass_3: string;
+        export { lismClass_3 as lismClass };
+        let layout_1: string;
+        export { layout_1 as layout };
+        export let flow: string;
+    }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリング
+ */
+export function Details({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+/**
+ * Summary - サマリーコンポーネント
+ * details要素のsummary部分
+ */
+export function Summary({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+/**
+ * Title - タイトルコンポーネント
+ */
+export function Title({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+/**
+ * Icon - アイコンコンポーネント
+ */
+export function Icon({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+/**
+ * Content - コンテンツコンポーネント
+ */
+export function Content({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/Details/react/index.d.ts

@@ -0,0 +1,9 @@
+import { Details as Root, Summary, Title, Icon, Content } from './Details';
+declare namespace _default {
+    export { Root };
+    export { Summary };
+    export { Title };
+    export { Icon };
+    export { Content };
+}
+export default _default;

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

@@ -5,7 +5,7 @@ export function getProps({ lismClass, duration, style, ...props }: {
     style?: {} | undefined;
 }): {
     style: {};
-    lismClass: any;
+    lismClass: string;
     setPlain: boolean;
     tag: string;
 };
@@ -15,7 +15,7 @@ export function getInnerProps({ lismClass, offset, style, ...props }: {
     offset: any;
     style?: {} | undefined;
 }): {
-    lismClass: any;
+    lismClass: string;
     style: {};
 };
 export namespace defaultProps {

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

@@ -1,3 +1,6 @@
+/**
+ * モーダルの開閉イベントを設定する
+ */
 export declare function setEvent(modal: HTMLDialogElement): void;
 declare const setModal: () => void;
 export default setModal;

package/dist/components/Modal/setModal.js

@@ -1,42 +1,37 @@
-let s = null;
-const o = async (e) => {
-  const n = e.getAnimations();
-  n.length > 0 && await Promise.allSettled(n.map((c) => c.finished));
-};
-async function d(e) {
-  e.open && e.dataset.isOpen || (e.showModal(), requestAnimationFrame(() => {
-    e.dataset.isOpen = "1";
-  }));
-}
-async function a(e) {
-  e.dataset.isOpen !== void 0 && (delete e.dataset.isOpen, await o(e), e.close());
-}
-function l(e) {
+import { waitAnimation as o } from "../../helper/animation.js";
+function r(e) {
   if (!e || !e.id) return;
-  const n = document.querySelectorAll(`[data-modal-open="${e.id}"]`), c = e.querySelectorAll(`[data-modal-close="${e.id}"]`);
-  e.addEventListener("click", (t) => {
-    t.target === e && a(e);
-  }), e.addEventListener("close", (t) => {
-    s && (delete s.dataset.targetOpened, s = null), a(e);
-  }), n.forEach((t) => {
-    t == null || t.addEventListener("click", (i) => {
-      t.dataset.targetOpened = "1", s = t, d(e);
+  let n = null;
+  const a = document.querySelectorAll(`[data-modal-open="${e.id}"]`), c = e.querySelectorAll(`[data-modal-close="${e.id}"]`), i = () => {
+    e.open && e.hasAttribute("data-is-open") || (e.showModal(), requestAnimationFrame(() => {
+      e.dataset.isOpen = "1";
+    }));
+  }, s = async () => {
+    e.hasAttribute("data-is-open") && (e.removeAttribute("data-is-open"), await o(e), e.close());
+  };
+  a.forEach((t) => {
+    t == null || t.addEventListener("click", () => {
+      t.dataset.targetOpened = "1", n = t, i();
     });
   }), c.forEach((t) => {
-    t == null || t.addEventListener("click", (i) => {
-      a(e);
+    t == null || t.addEventListener("click", () => {
+      s();
     });
+  }), e.addEventListener("click", (t) => {
+    t.target === e && s();
+  }), e.addEventListener("close", () => {
+    n && (n.removeAttribute("data-target-opened"), n = null);
   }), e.addEventListener("cancel", (t) => {
-    t.preventDefault(), a(e);
+    t.preventDefault(), s();
   });
 }
-const u = () => {
+const d = () => {
   const e = document.querySelectorAll(".c--modal");
   e == null || e.forEach((n) => {
-    l(n);
+    r(n);
   });
 };
 export {
-  u as default,
-  l as setEvent
+  d as default,
+  r as setEvent
 };

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

@@ -2,5 +2,5 @@ export default function getTabsProps({ lismClass, ...props }: {
     [x: string]: any;
     lismClass: any;
 }): {
-    lismClass: any;
+    lismClass: string;
 };

package/dist/components/astro.d.ts

@@ -5,6 +5,7 @@ export { default as Badge } from './Badge/astro';
 export { default as Button } from './Button/astro';
 export { default as Callout } from './Callout/astro';
 export { default as Chat } from './Chat/astro';
+export { default as Details } from './Details/astro';
 export { default as Modal } from './Modal/astro';
 export { default as NavMenu } from './NavMenu/astro';
 export { default as ShapeDivider } from './ShapeDivider/astro';

package/dist/components/react.d.ts

@@ -5,6 +5,7 @@ export { default as Badge } from './Badge/react';
 export { default as Button } from './Button/react';
 export { default as Callout } from './Callout/react';
 export { default as Chat } from './Chat/react';
+export { default as Details } from './Details/react';
 export { default as Modal } from './Modal/react';
 export { default as NavMenu } from './NavMenu/react';
 export { default as ShapeDivider } from './ShapeDivider/react';

package/dist/helper/animation.d.ts

@@ -0,0 +1,18 @@
+type AnimationStatus = 'none' | 'finished' | 'canceled';
+/**
+ * 1フレーム待機する（requestAnimationFrame のPromiseラッパー）
+ */
+export declare const waitFrame: () => Promise<number>;
+/**
+ * 要素のアニメーションが完了するのを待つ
+ * @returns アニメーションの結果ステータス
+ *   - 'none': アニメーションが実行されていなかった
+ *   - 'finished': すべてのアニメーションが正常に完了
+ *   - 'canceled': pause() 等でキャンセルされたアニメーションがあった
+ */
+export declare const waitAnimation: (el: HTMLElement) => Promise<AnimationStatus>;
+/**
+ * 実行中のアニメーションがあれば一旦停止させる
+ */
+export declare const maybePauseAnimation: (el: HTMLElement) => void;
+export {};

package/dist/helper/animation.js

@@ -0,0 +1,12 @@
+const a = () => new Promise((n) => requestAnimationFrame(n)), s = async (n) => {
+  const t = n.getAnimations();
+  return t.length === 0 ? "none" : (await Promise.allSettled(t.map((e) => e.finished))).every((e) => e.status === "fulfilled") ? "finished" : "canceled";
+}, o = (n) => {
+  const t = n.getAnimations();
+  t.length !== 0 && t.forEach((i) => i.pause());
+};
+export {
+  o as maybePauseAnimation,
+  s as waitAnimation,
+  a as waitFrame
+};

package/dist/helper/uuid.d.ts

@@ -0,0 +1 @@
+export default function uuidv4(): string;

package/dist/style.css

@@ -1 +1 @@
-@layer lism.modules{.c--accordion{--duration:var(--acc-duration,0.25s)}.c--accordion[data-opened]{--_notOpen: }.c--accordion:not([data-opened]){--_isOpen: }.c--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.c--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.c--accordion_inner{overflow:hidden}.c--accordion:not([data-opened])>.c--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.c--accordion_icon{display:grid}.c--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.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{}@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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.2.3",
+  "version": "0.8.0",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -39,7 +39,7 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.8.3"
+    "lism-css": "0.8.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.2",