@lism-css/ui 0.9.3 → 0.10.0

package/src/components/Callout/getProps.ts

@@ -1,32 +1,32 @@
 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',
+    keycolor: _keycolor,
+    p: '20',
+    g: '10',
+    bdc: 'keycolor',
+    'bd-x-s': '-',
+    bdw: '4px',
+    bxsh: '10',
+    bdrs: '5',
+    ...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>
+  );
 }

package/src/components/Details/_style.css

@@ -1,48 +1,48 @@
 /* Details コンポーネント用スタイル */
 /* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
-@layer lism.modules {
-	.c--details {
-		--duration: var(--acc-duration, 0.25s); /* transition時間 */
-		--_icon-scale: 1.1;
-		--_icon-transform: rotate(0deg); /* icon操作用 */
-		--_content-gtr: 0fr; /* 開閉操作用 */
-	}
-	.c--details[open] {
-		--_icon-transform: scaleY(-1);
-		--_content-gtr: 1fr;
-	}
+@layer lism-modules {
+  .c--details {
+    --duration: var(--acc-duration, 0.25s); /* transition時間 */
+    --_icon-scale: 1.1;
+    --_icon-transform: rotate(0deg); /* icon操作用 */
+    --_content-gtr: 0fr; /* 開閉操作用 */
+  }
+  .c--details[open] {
+    --_icon-transform: scaleY(-1);
+    --_content-gtr: 1fr;
+  }
 
-	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
-	.c--details_summary::-webkit-details-marker {
-		display: none;
-	}
+  /* Safariで表示されるデフォルトの三角形アイコンを削除 */
+  .c--details_summary::-webkit-details-marker {
+    display: none;
+  }
 
-	/* 見出しタグでもフォントを揃える */
-	/* .c--details_title {} */
+  /* 見出しタグでもフォントを揃える */
+  /* .c--details_title {} */
 
-	/* アイコン */
-	.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;
-		mask: var(--svg) no-repeat center center / contain;
-		scale: var(--_icon-scale);
+  /* アイコン */
+  .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;
+    mask: var(--svg) no-repeat center center / contain;
+    scale: var(--_icon-scale);
 
-		transition: transform var(--duration);
-		transform: var(--_icon-transform);
-	}
+    transition: transform var(--duration);
+    transform: var(--_icon-transform);
+  }
 
-	/* ::details-content 擬似要素を使ったアニメーション */
-	.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;
-	}
+  /* ::details-content 擬似要素を使ったアニメーション */
+  .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;
+  }
 
-	/* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
-	.c--details_body {
-		overflow: hidden;
-	}
+  /* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
+  .c--details_body {
+    overflow: hidden;
+  }
 }

package/src/components/Details/astro/Content.astro

@@ -11,7 +11,7 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.body}>
-	<Lism {...defaultProps.content} {...props}>
-		<slot />
-	</Lism>
+  <Lism {...defaultProps.content} {...props}>
+    <slot />
+  </Lism>
 </Lism>

package/src/components/Details/astro/Details.astro

@@ -14,5 +14,5 @@ const props = Astro.props || {};
 ---
 
 <details {...getLismProps(getDetailsProps(props))}>
-	<slot />
+  <slot />
 </details>

package/src/components/Details/astro/Icon.astro

@@ -10,5 +10,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.icon} {...props}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/Details/astro/Summary.astro

@@ -5,6 +5,6 @@ import { defaultProps } from '../getProps';
 const props = Astro.props || {};
 ---
 
-<Lism as='summary' {...defaultProps.summary} {...props}>
-	<slot />
+<Lism as="summary" {...defaultProps.summary} {...props}>
+  <slot />
 </Lism>

package/src/components/Details/astro/Title.astro

@@ -6,5 +6,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.title} {...props}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/Details/getProps.js

@@ -7,17 +7,17 @@ import atts from 'lism-css/lib/helper/atts';
  * @returns {Object} 処理済みプロパティ
  */
 export function getDetailsProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'c--details');
-	return props;
+  props.lismClass = atts(lismClass, 'c--details');
+  return props;
 }
 
 /**
  * 各サブコンポーネント用のデフォルトプロパティ
  */
 export const defaultProps = {
-	summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-	title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
-	icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
-	body: { lismClass: 'c--details_body' },
-	content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
+  summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
+  title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
+  icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
+  body: { lismClass: 'c--details_body' },
+  content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
 };