@lism-css/ui 0.9.3 → 0.11.0

package/src/components/Button/_style.css

@@ -1,34 +1,34 @@
-@layer lism.modules {
-	.c--button {
-		--c: var(--base);
-		--bgc: var(--text);
-		--bdc: var(--bgc);
+@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); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+    color: var(--c);
+    background-color: var(--bgc);
+    border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
 
-		gap: var(--s10);
-		text-decoration: none;
-		place-content: center;
-		place-items: center;
-	}
-	.c--button--outline {
-		--c: var(--text);
-		--bgc: transparent;
-		--bdc: var(--c);
-	}
+    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;
-	}
+  :where(.c--button) > .a--icon {
+    scale: 1.05;
+  }
 
-	/* l--gridを使用する場合の追加スタイル */
-	.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;
-	}
+  /* l--gridを使用する場合の追加スタイル */
+  .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;
+  }
 }

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

@@ -6,11 +6,11 @@ const props = Astro.props;
 
 // c--button では c, bgc は 変数で受け取る
 const _propConfig = {
-	c: { isVar: 1 },
-	bgc: { isVar: 1 },
+  c: { isVar: 1 },
+  bgc: { isVar: 1 },
 };
 ---
 
-<Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
-	<slot />
+<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props}>
+  <slot />
 </Flex>

package/src/components/Button/react/Button.jsx

@@ -2,11 +2,11 @@ import { Flex } from 'lism-css/react';
 import '../_style.css';
 
 export default function Button(props) {
-	// c--button では c, bgc は 変数で受け取る
-	const _propConfig = {
-		c: { isVar: 1 },
-		bgc: { isVar: 1 },
-	};
+  // c--button では c, bgc は 変数で受け取る
+  const _propConfig = {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 },
+  };
 
-	return <Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />;
+  return <Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props} />;
 }

package/src/components/Callout/astro/Callout.astro

@@ -8,17 +8,17 @@ const { icon, title, flow, ...calloutProps } = getCalloutProps(Astro.props);
 ---
 
 <Stack {...calloutProps}>
-	{
-		title && (
-			<Flex class='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
-				<Center class='c--callout_icon' fz='xl'>
-					<Icon icon={icon} />
-				</Center>
-				<span class='c--callout_title'>{title}</span>
-			</Flex>
-		)
-	}
-	<Flow class='c--callout_body' flow={flow}>
-		<slot />
-	</Flow>
+  {
+    title && (
+      <Flex class="c--callout_head" c="keycolor" fw="bold" ai="center" g="10">
+        <Center class="c--callout_icon" fz="xl">
+          <Icon icon={icon} />
+        </Center>
+        <span class="c--callout_title">{title}</span>
+      </Flex>
+    )
+  }
+  <Flow class="c--callout_body" flow={flow}>
+    <slot />
+  </Flow>
 </Stack>

package/src/components/Callout/getProps.ts

@@ -1,32 +1,31 @@
 import PRESETS from './presets';
 
 export type CalloutProps = {
-	type?: string;
-	keycolor?: string;
-	icon?: string;
-	title?: string;
-	flow?: string;
-	[key: string]: unknown;
+  type?: string;
+  keycolor?: string;
+  icon?: string;
+  title?: string;
+  flow?: string;
+  [key: string]: unknown;
 };
 
 export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
-	const presetData = type ? PRESETS[type] : null;
-	const _icon = icon || presetData?.icon || 'note';
-	const _keycolor = keycolor || presetData?.color || null;
+  const presetData = type ? PRESETS[type] : null;
+  const _icon = icon || presetData?.icon || 'note';
+  const _keycolor = keycolor || presetData?.color || null;
 
-	return {
-		icon: _icon,
-		title,
-		flow,
-		lismClass: 'c--callout u--cbox',
-		keycolor: _keycolor,
-		p: '20',
-		g: '10',
-		bdc: 'keycolor',
-		'bd-x-s': '-',
-		bdw: '4px',
-		bxsh: '10',
-		bdrs: '5',
-		...props,
-	};
+  return {
+    icon: _icon,
+    title,
+    flow,
+    lismClass: 'c--callout u--cbox set--shadow',
+    keycolor: _keycolor,
+    p: '20',
+    g: '10',
+    bdc: 'keycolor',
+    'bd-x-s': '-',
+    bdw: '3px',
+    bxsh: '10',
+    ...props,
+  };
 }

package/src/components/Callout/presets.ts

@@ -1,33 +1,33 @@
 type PresetData = {
-	icon: string;
-	color: string;
+  icon: string;
+  color: string;
 };
 
 const PRESETS: Record<string, PresetData> = {
-	alert: {
-		icon: 'alert',
-		color: 'red',
-	},
-	point: {
-		icon: 'lightbulb',
-		color: 'orange',
-	},
-	warning: {
-		icon: 'warning',
-		color: 'yellow',
-	},
-	check: {
-		icon: 'check-circle',
-		color: 'green',
-	},
-	help: {
-		icon: 'question',
-		color: 'purple',
-	},
-	note: {
-		icon: 'note',
-		color: 'blue',
-	},
+  alert: {
+    icon: 'alert',
+    color: 'red',
+  },
+  point: {
+    icon: 'lightbulb',
+    color: 'orange',
+  },
+  warning: {
+    icon: 'warning',
+    color: 'yellow',
+  },
+  check: {
+    icon: 'check-circle',
+    color: 'green',
+  },
+  help: {
+    icon: 'question',
+    color: 'purple',
+  },
+  note: {
+    icon: 'note',
+    color: 'blue',
+  },
 };
 
 export default PRESETS;

package/src/components/Callout/react/Callout.tsx

@@ -3,21 +3,21 @@ import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
 import getCalloutProps, { type CalloutProps } from '../getProps';
 
 export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
-	const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
+  const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
 
-	return (
-		<Stack {...calloutProps}>
-			{title && (
-				<Flex className='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
-					<Center className='c--callout_icon' fz='xl'>
-						<Icon icon={icon} />
-					</Center>
-					<span className='c--callout_title'>{title}</span>
-				</Flex>
-			)}
-			<Flow className='c--callout_body' flow={flow}>
-				{children}
-			</Flow>
-		</Stack>
-	);
+  return (
+    <Stack {...calloutProps}>
+      {title && (
+        <Flex className="c--callout_head" c="keycolor" fw="bold" ai="center" g="10">
+          <Center className="c--callout_icon" fz="xl">
+            <Icon icon={icon} />
+          </Center>
+          <span className="c--callout_title">{title}</span>
+        </Flex>
+      )}
+      <Flow className="c--callout_body" flow={flow}>
+        {children}
+      </Flow>
+    </Stack>
+  );
 }

package/src/components/Chat/_style.css

@@ -1,64 +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;
+@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);
-	}
+    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_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>');
-	}
+  .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;
-	}
+  [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;
+  border-start-start-radius: 0;
 }
 
 /* speak バリアントの角丸調整: 右側 */
 .c--chat--speak[data-chat-dir='end'] > div > .c--chat_content {
-	border-start-end-radius: 0;
+  border-start-end-radius: 0;
 }

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

@@ -4,19 +4,19 @@ 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;
+  /** 吹き出しスタイル */
+  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;
@@ -24,18 +24,18 @@ 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>
+  {
+    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/getProps.js

@@ -4,54 +4,49 @@
 
 // 各サブ要素のデフォルトプロパティ
 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',
-	},
+  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,
-	};
+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

@@ -3,22 +3,22 @@ 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);
+  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>
-	);
+  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>
+  );
 }