@lism-css/ui 0.2.1 → 0.2.3

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

@@ -1,3 +1,9 @@
+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';
 declare namespace _default {
     export { Root };
     export { Header };

package/dist/components/Accordion/setAccordion.js

@@ -1,5 +1,5 @@
 const l = (e) => {
-  const t = e.querySelector(".d--accordion_body"), n = t ? t.getAnimations() : [];
+  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(() => {
@@ -26,7 +26,7 @@ const l = (e) => {
 }, u = (e) => {
   const t = e.open, n = e.hasAttribute("data-opened");
   t && !n && e.setAttribute("data-opened", ""), !t && n && e.removeAttribute("data-opened");
-}, d = (e) => {
+}, m = (e) => {
   const t = i(e), n = e.querySelector("summary");
   if (!n) return;
   const o = (c) => {
@@ -37,12 +37,12 @@ const l = (e) => {
   return n.addEventListener("click", o), e.addEventListener("toggle", r), () => {
     n.removeEventListener("click", o), e.removeEventListener("toggle", r);
   };
-}, m = () => {
-  document.querySelectorAll(".d--accordion").forEach((t) => {
-    d(t);
+}, d = () => {
+  document.querySelectorAll(".c--accordion").forEach((t) => {
+    m(t);
   });
 };
 export {
-  m as default,
-  d as setEvent
+  d as default,
+  m as setEvent
 };

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

@@ -1 +1 @@
-export {};
+export { default } from './Avatar.astro';

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

@@ -1 +1 @@
-export {};
+export { default } from './Badge.astro';

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

@@ -1 +1 @@
-export {};
+export { default } from './Button.astro';

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

@@ -7,7 +7,7 @@ export type CalloutProps = {
     [key: string]: unknown;
 };
 export default function getCalloutProps({ type, keycolor, icon, title, flow, ...props }: CalloutProps): {
-    icon: string | null;
+    icon: string;
     title: string | undefined;
     flow: string;
     lismClass: string;

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

@@ -0,0 +1 @@
+export { default } from './Chat.astro';

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

@@ -0,0 +1,53 @@
+/**
+ * Chat コンポーネントのルートプロパティを生成
+ */
+export default function getChatProps({ variant, direction, keycolor, ...props }: {
+    [x: string]: any;
+    variant?: string | undefined;
+    direction?: string | undefined;
+    keycolor?: string | undefined;
+}): {
+    lismClass: string;
+    variant: string;
+    keycolor: string;
+    'data-chat-dir': string;
+    ji: string;
+};
+export namespace defaultProps {
+    let avatar: {
+        lismClass: string;
+        bgc: string;
+        ar: string;
+        bdrs: string;
+        'aria-hidden': string;
+    };
+    namespace name {
+        let lismClass: string;
+        let c: string;
+        let fs: string;
+        let fz: string;
+        let lh: string;
+        let py: string;
+        let px: string;
+        let aslf: string;
+    }
+    namespace body {
+        let lismClass_1: string;
+        export { lismClass_1 as lismClass };
+        export let pos: string;
+    }
+    namespace deco {
+        let lismClass_2: string;
+        export { lismClass_2 as lismClass };
+        let pos_1: string;
+        export { pos_1 as pos };
+    }
+    namespace content {
+        let lismClass_3: string;
+        export { lismClass_3 as lismClass };
+        export let bdrs: string;
+        export let p: string;
+        let lh_1: string;
+        export { lh_1 as lh };
+    }
+}

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

@@ -0,0 +1,7 @@
+export default function Chat({ name, avatar, flow, children, ...props }: {
+    [x: string]: any;
+    name: any;
+    avatar: any;
+    flow?: string | undefined;
+    children: any;
+}): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export { default } from './Chat';

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

@@ -1,3 +1,8 @@
+import { default as Root } from './Modal.astro';
+import { default as Inner } from './Inner.astro';
+import { default as Body } from './Body.astro';
+import { default as CloseBtn } from './CloseBtn.astro';
+import { default as OpenBtn } from './OpenBtn.astro';
 declare namespace _default {
     export { Root };
     export { Inner };

package/dist/components/Modal/setModal.js

@@ -31,7 +31,7 @@ function l(e) {
   });
 }
 const u = () => {
-  const e = document.querySelectorAll(".d--modal");
+  const e = document.querySelectorAll(".c--modal");
   e == null || e.forEach((n) => {
     l(n);
   });

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

@@ -0,0 +1,11 @@
+import { default as Root } from './Root.astro';
+import { default as Nest } from './Nest.astro';
+import { default as Item } from './Item.astro';
+import { default as Link } from './Link.astro';
+declare namespace _default {
+    export { Root };
+    export { Nest };
+    export { Item };
+    export { Link };
+}
+export default _default;

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

@@ -0,0 +1,32 @@
+/**
+ * NavMenu.Root のプロパティを処理
+ * @param {object} props - コンポーネントのプロパティ
+ * @param {string} [props.hovC] - ホバー時のテキストカラー（--hov-c として出力）
+ * @param {string} [props.hovBgc] - ホバー時の背景カラー（--hov-bgc として出力）
+ * @param {string} [props.itemP] - 各アイテムのパディング（--_item-p として出力）
+ * @param {object} [props.style] - スタイルオブジェクト
+ */
+export function getRootProps({ hovC, hovBgc, itemP, style, ...props }: {
+    hovC?: string | undefined;
+    hovBgc?: string | undefined;
+    itemP?: string | undefined;
+    style?: object | undefined;
+}): {
+    lismClass: string;
+    tag: string;
+    style: {};
+};
+/**
+ * NavMenu.Nest のプロパティを処理
+ */
+export function getNestProps(props: any): any;
+/**
+ * NavMenu.Item のプロパティを処理
+ */
+export function getItemProps(props: any): any;
+/**
+ * NavMenu.Link のプロパティを処理
+ * @param {string} [props.href] - リンク先URL。指定時は a タグになる
+ * @param {string} [props.tag='span'] - HTML タグ
+ */
+export function getLinkProps({ href, tag, ...props }?: string): any;

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

@@ -0,0 +1,16 @@
+export function Root({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Nest({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Item({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Link({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { Root, Item, Link, Nest } from './NavMenu';
+declare namespace _default {
+    export { Root };
+    export { Item };
+    export { Link };
+    export { Nest };
+}
+export default _default;

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

@@ -0,0 +1 @@
+export { default } from './ShapeDivider.astro';

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

@@ -0,0 +1,11 @@
+/**
+ * ShapeDivider コンポーネントの共通プロパティ処理
+ * @param {string} [props.viewBox] - SVG の viewBox
+ * @param {boolean} [props.isAnimation] - アニメーションを有効にするか
+ * @param {boolean} [props.isEmpty] - シェイプを非表示にしてスペーサーとして使用
+ * @param {number} [props.level=5] - シェイプの高さレベル
+ * @param {string} [props.stretch] - 水平方向の引き伸ばし量
+ * @param {string} [props.offset] - 水平方向のオフセット
+ * @param {string} [props.flip] - X/Y/XY で反転方向を指定
+ */
+export default function getProps({ viewBox, isAnimation, isEmpty, level, stretch, offset, flip, style, ...restProps }?: string): any;

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

@@ -0,0 +1,4 @@
+export default function ShapeDivider({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1 @@
+export { default } from './ShapeDivider';

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

@@ -1,3 +1,8 @@
+import { default as Root } from './Tabs.astro';
+import { default as List } from './TabList.astro';
+import { default as Panel } from './TabPanel.astro';
+import { default as Item } from './TabItem.astro';
+import { default as Tab } from './Tab.astro';
 declare namespace _default {
     export { Root };
     export { List };

package/dist/components/astro.d.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/astro';
 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 Modal } from './Modal/astro';
+export { default as NavMenu } from './NavMenu/astro';
+export { default as ShapeDivider } from './ShapeDivider/astro';
 export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/react';
 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 Modal } from './Modal/react';
+export { default as NavMenu } from './NavMenu/react';
+export { default as ShapeDivider } from './ShapeDivider/react';
 export { default as Tabs } from './Tabs/react';

package/dist/scripts/tabs.js

@@ -1,6 +1,6 @@
 import e from "../components/Tabs/setTabs.js";
 document.addEventListener("DOMContentLoaded", function() {
-  document.querySelectorAll(".d--tabs").forEach((t) => {
+  document.querySelectorAll(".c--tabs").forEach((t) => {
     e(t);
   });
 });

package/dist/style.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",

package/src/components/Accordion/_style.css

@@ -1,15 +1,15 @@
 @layer lism.modules {
-	.d--accordion {
+	.c--accordion {
 		--duration: var(--acc-duration, 0.25s);
 	}
-	.d--accordion[data-opened] {
+	.c--accordion[data-opened] {
 		--_notOpen: ;
 	}
-	.d--accordion:not([data-opened]) {
+	.c--accordion:not([data-opened]) {
 		--_isOpen: ;
 	}
 
-	.d--accordion_header {
+	.c--accordion_header {
 		display: grid;
 		grid: auto / 1fr auto;
 		gap: 0.5em;
@@ -22,7 +22,7 @@
 		}
 	}
 
-	.d--accordion_body {
+	.c--accordion_body {
 		display: grid;
 		grid: 1fr / auto;
 		transition-property: margin-block, padding-block, opacity, grid-template;
@@ -30,24 +30,24 @@
 	}
 
 	/* ※ 正常な animation には必須 */
-	.d--accordion_inner {
+	.c--accordion_inner {
 		overflow: hidden;
 	}
 
 	/* 閉じている時 */
-	.d--accordion:not([data-opened]) > .d--accordion_body {
+	.c--accordion:not([data-opened]) > .c--accordion_body {
 		grid: 0fr / auto;
 		padding-block: 0 !important;
 		margin-block: 0 !important;
 	}
 
 	/* アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。 */
-	.d--accordion_icon {
+	.c--accordion_icon {
 		display: grid;
 	}
 
-	/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
-	.d--accordion_icon > .a--icon {
+	/* .c--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
+	.c--accordion_icon > .a--icon {
 		transition: transform var(--duration);
 		transform: var(--_isOpen, scaleY(-1));
 	}

package/src/components/Accordion/getProps.js

@@ -2,13 +2,13 @@ import atts from 'lism-css/lib/helper/atts';
 
 // duration: [s]
 export function getAccProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'd--accordion');
+	props.lismClass = atts(lismClass, 'c--accordion');
 	return props;
 }
 
 export function getAccIconProps({ isTrigger, ...props }) {
 	const defaultProps = {
-		lismClass: 'd--accordion_icon',
+		lismClass: 'c--accordion_icon',
 		tag: 'span',
 	};
 	// isTrigger なら、buttun にする
@@ -21,12 +21,12 @@ export function getAccIconProps({ isTrigger, ...props }) {
 }
 
 export const defaultProps = {
-	header: { lismClass: 'd--accordion_header' },
-	label: { lismClass: 'd--accordion_label', tag: 'span' },
+	header: { lismClass: 'c--accordion_header' },
+	label: { lismClass: 'c--accordion_label', tag: 'span' },
 	body: {
-		lismClass: 'd--accordion_body',
+		lismClass: 'c--accordion_body',
 	},
 	inner: {
-		lismClass: 'd--accordion_inner',
+		lismClass: 'c--accordion_inner',
 	},
 };

package/src/components/Accordion/setAccordion.js

@@ -1,7 +1,7 @@
 // アニメーションが完了するのを待つ
 const waitAnimation = (details) => {
 	// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
-	const body = details.querySelector('.d--accordion_body');
+	const body = details.querySelector('.c--accordion_body');
 	const animations = body ? body.getAnimations() : [];
 
 	// allSettled を使うことで、キャンセル時も reject せずに完了する
@@ -112,7 +112,7 @@ export const setEvent = (details) => {
 };
 
 const setAccordion = () => {
-	const detailsAll = document.querySelectorAll('.d--accordion');
+	const detailsAll = document.querySelectorAll('.c--accordion');
 	detailsAll.forEach((details) => {
 		setEvent(details);
 	});

package/src/components/Avatar/astro/Avatar.astro

@@ -1,6 +1,5 @@
 ---
 import { Frame } from 'lism-css/astro';
-// import '../_style.css';
 
 const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
 ---

package/src/components/Avatar/react/Avatar.jsx

@@ -1,5 +1,4 @@
 import { Frame } from 'lism-css/react';
-// import '../_style.css';
 
 export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
 	return (

package/src/components/Callout/getProps.ts

@@ -11,7 +11,7 @@ export type CalloutProps = {
 
 export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
 	const presetData = type ? PRESETS[type] : null;
-	const _icon = icon || presetData?.icon || null;
+	const _icon = icon || presetData?.icon || 'note';
 	const _keycolor = keycolor || presetData?.color || null;
 
 	return {

package/src/components/Chat/_style.css

@@ -0,0 +1,64 @@
+@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); /* @320px:40px ~ @640: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 {
+		top: var(--_deco-t);
+		inset-inline: var(--_deco-inset-x);
+		width: var(--_deco-size);
+		height: var(--_deco-size);
+		scale: var(--_deco-scale);
+		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;
+	}
+}
+
+/* NOTE: 以下は @layer 外に配置（セレクタの詳細度を確保するため） */
+
+/* speak バリアントの角丸調整: 左側 */
+.c--chat--speak[data-chat-dir='start'] > div > .c--chat_content {
+	border-start-start-radius: 0;
+}
+
+/* speak バリアントの角丸調整: 右側 */
+.c--chat--speak[data-chat-dir='end'] > div > .c--chat_content {
+	border-start-end-radius: 0;
+}

package/src/components/Chat/astro/Chat.astro

@@ -0,0 +1,41 @@
+---
+import { Lism, Flow, Grid, Frame, Decorator } from 'lism-css/astro';
+import getChatProps, { defaultProps } from '../getProps';
+import '../_style.css';
+
+interface Props {
+	/** 吹き出しスタイル */
+	variant?: 'speak' | 'think';
+	/** 吹き出しの方向 */
+	direction?: 'start' | 'end';
+	/** 発言者名 */
+	name?: string;
+	/** アバター画像URL */
+	avatar?: string;
+	/** キーカラー */
+	keycolor?: string;
+	/** コンテンツのフロー間隔 */
+	flow?: string;
+	[key: string]: unknown;
+}
+
+const { name, avatar, flow = 's', ...inputProps } = Astro.props;
+const { 'data-chat-dir': direction, ...chatProps } = getChatProps(inputProps);
+---
+
+<Grid data-chat-dir={direction} {...chatProps}>
+	{
+		avatar && (
+			<Frame {...defaultProps.avatar} src={avatar} alt=''>
+				<img src={avatar} alt='' width='60' height='60' decoding='async' />
+			</Frame>
+		)
+	}
+	{name && <Lism {...defaultProps.name}>{name}</Lism>}
+	<Lism {...defaultProps.body}>
+		<Decorator {...defaultProps.deco} class='u-cbox is--skipFlow' />
+		<Flow {...defaultProps.content} class='u-cbox' flow={flow} jslf={direction}>
+			<slot />
+		</Flow>
+	</Lism>
+</Grid>

package/src/components/Chat/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Chat.astro';

package/src/components/Chat/getProps.js

@@ -0,0 +1,57 @@
+/**
+ * Chat コンポーネントの共通プロパティ処理
+ */
+
+// 各サブ要素のデフォルトプロパティ
+export const defaultProps = {
+	avatar: {
+		lismClass: 'c--chat_avatar',
+		bgc: 'base',
+		ar: '1/1',
+		bdrs: '99',
+		'aria-hidden': 'true',
+	},
+	name: {
+		lismClass: 'c--chat_name',
+		c: 'text-2',
+		fs: 'italic',
+		fz: '2xs',
+		lh: '1',
+		py: '5',
+		px: '10',
+		aslf: 'end',
+	},
+	body: {
+		lismClass: 'c--chat_body',
+		pos: 'rel',
+	},
+	deco: {
+		lismClass: 'c--chat_deco',
+		pos: 'abs',
+	},
+	content: {
+		lismClass: 'c--chat_content',
+		bdrs: '30',
+		p: '20',
+		lh: 's',
+	},
+};
+
+/**
+ * Chat コンポーネントのルートプロパティを生成
+ */
+export default function getChatProps({
+	variant = 'speak',
+	direction = 'start',
+	keycolor = 'gray',
+	...props
+}) {
+	return {
+		lismClass: 'c--chat',
+		variant,
+		keycolor,
+		'data-chat-dir': direction,
+		ji: direction,
+		...props,
+	};
+}

package/src/components/Chat/react/Chat.jsx

@@ -0,0 +1,24 @@
+import { Lism, Flow, Grid, Frame, Decorator } from 'lism-css/react';
+import getChatProps, { defaultProps } from '../getProps';
+import '../_style.css';
+
+export default function Chat({ name, avatar, flow = 's', children, ...props }) {
+	const { 'data-chat-dir': direction, ...chatProps } = getChatProps(props);
+
+	return (
+		<Grid data-chat-dir={direction} {...chatProps}>
+			{avatar && (
+				<Frame {...defaultProps.avatar} src={avatar} alt=''>
+					<img src={avatar} alt='' width='60' height='60' decoding='async' />
+				</Frame>
+			)}
+			{name && <Lism {...defaultProps.name}>{name}</Lism>}
+			<Lism {...defaultProps.body}>
+				<Decorator {...defaultProps.deco} className='u-cbox is--skipFlow' />
+				<Flow {...defaultProps.content} className='u-cbox' flow={flow} jslf={direction}>
+					{children}
+				</Flow>
+			</Lism>
+		</Grid>
+	);
+}

package/src/components/Chat/react/index.js

@@ -0,0 +1 @@
+export { default } from './Chat';