@lism-css/ui 0.9.3 → 0.11.0

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();
 });

package/src/components/Accordion/setAccordion.js

@@ -5,142 +5,142 @@ let ACCORDION_HIDDEN_VALUE = 'until-found';
 
 // アコーディオン要素から必要な要素を取得
 const getAccordionElements = (accordionItem) => {
-	const heading = accordionItem.querySelector('.c--accordion_heading');
-	const panel = accordionItem.querySelector('.c--accordion_panel');
-	return {
-		heading,
-		button: heading.querySelector('button'),
-		panel,
-		content: panel.querySelector('.c--accordion_content'),
-	};
+  const heading = accordionItem.querySelector('.c--accordion_heading');
+  const panel = accordionItem.querySelector('.c--accordion_panel');
+  return {
+    heading,
+    button: heading.querySelector('button'),
+    panel,
+    content: panel.querySelector('.c--accordion_content'),
+  };
 };
 
 // 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
 //   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
 const maybeCloseOpenedItems = (accordionItem) => {
-	const parent = accordionItem.parentNode;
-	if (!parent) return;
+  const parent = accordionItem.parentNode;
+  if (!parent) return;
 
-	// 親の data-allow-multiple 属性の有無をチェック
-	if (parent.hasAttribute('data-allow-multiple')) return;
+  // 親の data-allow-multiple 属性の有無をチェック
+  if (parent.hasAttribute('data-allow-multiple')) return;
 
-	// 開いているアコーディオンを取得して閉じる
-	parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
+  // 開いているアコーディオンを取得して閉じる
+  parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
 };
 
 async function openAccordion(accordionItem) {
-	const { panel, content, button } = getAccordionElements(accordionItem);
+  const { panel, content, button } = getAccordionElements(accordionItem);
 
-	// アニメーションがあれば一時停止
-	maybePauseAnimation(panel);
+  // アニメーションがあれば一時停止
+  maybePauseAnimation(panel);
 
-	// hidden を削除
-	panel.removeAttribute('hidden');
+  // hidden を削除
+  panel.removeAttribute('hidden');
 
-	// 1フレーム待機
-	await waitFrame();
+  // 1フレーム待機
+  await waitFrame();
 
-	// 次フレームで高さセット（ 目標の高さ = content の高さ ）
-	accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
+  // 次フレームで高さセット（ 目標の高さ = content の高さ ）
+  accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
 
-	// さらに1フレーム待機
-	await waitFrame();
+  // さらに1フレーム待機
+  await waitFrame();
 
-	// アニメーション開始
-	accordionItem.setAttribute('data-opened', '');
-	button.setAttribute('aria-expanded', 'true');
+  // アニメーション開始
+  accordionItem.setAttribute('data-opened', '');
+  button.setAttribute('aria-expanded', 'true');
 
-	// アニメーションを待つ
-	const status = await waitAnimation(panel);
+  // アニメーションを待つ
+  const status = await waitAnimation(panel);
 
-	// アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
-	if ('canceled' !== status) {
-		accordionItem.style.removeProperty('--_panel-h');
-	}
+  // アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
+  if ('canceled' !== status) {
+    accordionItem.style.removeProperty('--_panel-h');
+  }
 }
 
 async function closeAccordion(accordionItem) {
-	const { panel, button } = getAccordionElements(accordionItem);
+  const { panel, button } = getAccordionElements(accordionItem);
 
-	// アニメーションがあれば一時停止
-	maybePauseAnimation(panel);
+  // アニメーションがあれば一時停止
+  maybePauseAnimation(panel);
 
-	// 現在の高さを一旦セットする
-	accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
+  // 現在の高さを一旦セットする
+  accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
 
-	// 1フレーム待機
-	await waitFrame();
+  // 1フレーム待機
+  await waitFrame();
 
-	// 次フレームで属性を削除
-	accordionItem.removeAttribute('data-opened');
-	button.setAttribute('aria-expanded', 'false');
+  // 次フレームで属性を削除
+  accordionItem.removeAttribute('data-opened');
+  button.setAttribute('aria-expanded', 'false');
 
-	// 変数削除して 0px へ向けてアニメーション開始
-	accordionItem.style.removeProperty('--_panel-h');
+  // 変数削除して 0px へ向けてアニメーション開始
+  accordionItem.style.removeProperty('--_panel-h');
 
-	// アニメーションを待つ
-	const status = await waitAnimation(panel);
+  // アニメーションを待つ
+  const status = await waitAnimation(panel);
 
-	// アニメーションが最後まで完了したら、hidden付与
-	if ('canceled' !== status) {
-		panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
-	}
+  // アニメーションが最後まで完了したら、hidden付与
+  if ('canceled' !== status) {
+    panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
+  }
 }
 
 // アコーディオンのトグル処理
 function toggleAccordion(accordionItem) {
-	if (accordionItem.hasAttribute('data-opened')) {
-		// 自身を閉じる
-		closeAccordion(accordionItem);
-	} else {
-		// 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
-		maybeCloseOpenedItems(accordionItem);
-
-		// 自身を開く
-		openAccordion(accordionItem);
-	}
+  if (accordionItem.hasAttribute('data-opened')) {
+    // 自身を閉じる
+    closeAccordion(accordionItem);
+  } else {
+    // 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
+    maybeCloseOpenedItems(accordionItem);
+
+    // 自身を開く
+    openAccordion(accordionItem);
+  }
 }
 
 /**
  * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
  */
 export const setEvent = (accordionItem) => {
-	const { button, panel } = getAccordionElements(accordionItem);
-
-	// until-found のオン・オフが使い分けれるように、最初に初期値を取得
-	if (panel.hasAttribute('hidden')) {
-		ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
-	}
-
-	// clickイベント登録
-	const _clickEvent = (e) => {
-		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
-		toggleAccordion(accordionItem);
-	};
-
-	// beforematchイベント登録 (ページ検索時などはこっちが発火する)
-	const _beforematchEvent = (e) => {
-		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
-		toggleAccordion(accordionItem);
-	};
-
-	button.addEventListener('click', _clickEvent);
-	panel.addEventListener('beforematch', _beforematchEvent);
-
-	// react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
-	return () => {
-		button.removeEventListener('click', _clickEvent);
-		panel.removeEventListener('beforematch', _beforematchEvent);
-	};
+  const { button, panel } = getAccordionElements(accordionItem);
+
+  // until-found のオン・オフが使い分けれるように、最初に初期値を取得
+  if (panel.hasAttribute('hidden')) {
+    ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
+  }
+
+  // clickイベント登録
+  const _clickEvent = (e) => {
+    e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+    toggleAccordion(accordionItem);
+  };
+
+  // beforematchイベント登録 (ページ検索時などはこっちが発火する)
+  const _beforematchEvent = (e) => {
+    e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+    toggleAccordion(accordionItem);
+  };
+
+  button.addEventListener('click', _clickEvent);
+  panel.addEventListener('beforematch', _beforematchEvent);
+
+  // react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
+  return () => {
+    button.removeEventListener('click', _clickEvent);
+    panel.removeEventListener('beforematch', _beforematchEvent);
+  };
 };
 
 /**
  * ページ内の全アコーディオンにイベントをセット（Astro用）
  */
 const setAccordion = () => {
-	const accordionAll = document.querySelectorAll('.c--accordion_item');
-	accordionAll.forEach((accordionItem) => {
-		setEvent(accordionItem);
-	});
+  const accordionAll = document.querySelectorAll('.c--accordion_item');
+  accordionAll.forEach((accordionItem) => {
+    setEvent(accordionItem);
+  });
 };
 export default setAccordion;

package/src/components/Alert/astro/Alert.astro

@@ -8,10 +8,10 @@ const { icon, layout, flow, ...alertProps } = getAlertProps(Astro.props);
 ---
 
 <Lism layout={layout} {...alertProps}>
-	<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
-		<Icon icon={icon} />
-	</Center>
-	<Flow flow={flow}>
-		<slot />
-	</Flow>
+  <Center isSide={layout === 'sideMain'} c="keycolor" fz="xl" fxsh="0">
+    <Icon icon={icon} />
+  </Center>
+  <Flow flow={flow}>
+    <slot />
+  </Flow>
 </Lism>

package/src/components/Alert/getProps.ts

@@ -1,30 +1,30 @@
 import PRESETS from './presets';
 
 export type AlertProps = {
-	type?: string;
-	keycolor?: string;
-	layout?: string;
-	icon?: string;
-	flow?: string;
-	[key: string]: unknown;
+  type?: string;
+  keycolor?: string;
+  layout?: string;
+  icon?: string;
+  flow?: string;
+  [key: string]: unknown;
 };
 
 export default function getAlertProps({ type = 'alert', keycolor, layout = 'flex', icon, flow = 's', ...props }: AlertProps) {
-	const presetData = type ? PRESETS[type] : null;
-	const _icon = icon || presetData?.icon || 'info';
-	const _color = keycolor || presetData?.color || 'currentColor';
+  const presetData = type ? PRESETS[type] : null;
+  const _icon = icon || presetData?.icon || 'info';
+  const _color = keycolor || presetData?.color || 'currentColor';
 
-	return {
-		icon: _icon,
-		layout,
-		flow,
-		lismClass: 'c--alert u--cbox',
-		keycolor: _color,
-		ai: 'center',
-		p: '15',
-		g: '15',
-		bd: true,
-		bdrs: '10',
-		...props,
-	};
+  return {
+    icon: _icon,
+    layout,
+    flow,
+    lismClass: 'c--alert u--cbox',
+    keycolor: _color,
+    ai: 'center',
+    p: '15',
+    g: '15',
+    bd: true,
+    bdrs: '10',
+    ...props,
+  };
 }

package/src/components/Alert/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',
-	},
-	info: {
-		icon: 'info',
-		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',
+  },
+  info: {
+    icon: 'info',
+    color: 'blue',
+  },
 };
 
 export default PRESETS;

package/src/components/Alert/react/Alert.tsx

@@ -3,14 +3,14 @@ import { Flow, Lism, Center, Icon } from 'lism-css/react';
 import getAlertProps, { type AlertProps } from '../getProps';
 
 export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
-	const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
+  const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
 
-	return (
-		<Lism layout={layout} {...alertProps}>
-			<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
-				<Icon icon={icon} />
-			</Center>
-			<Flow flow={flow}>{children}</Flow>
-		</Lism>
-	);
+  return (
+    <Lism layout={layout} {...alertProps}>
+      <Center isSide={layout === 'sideMain'} c="keycolor" fz="xl" fxsh="0">
+        <Icon icon={icon} />
+      </Center>
+      <Flow flow={flow}>{children}</Flow>
+    </Lism>
+  );
 }

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

@@ -4,6 +4,6 @@ import { Frame } from 'lism-css/astro';
 const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
 ---
 
-<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
-	<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+<Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...props}>
+  <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
 </Frame>

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

@@ -1,9 +1,9 @@
 import { Frame } from 'lism-css/react';
 
 export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
-	return (
-		<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
-			<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
-		</Frame>
-	);
+  return (
+    <Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...props}>
+      <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
+    </Frame>
+  );
 }

package/src/components/Badge/_style.css

@@ -1,15 +1,15 @@
-@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); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
-	}
-	.c--badge--outline {
-		--c: var(--text);
-		--bgc: transparent;
-		--bdc: currentColor;
-	}
+@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); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+  }
+  .c--badge--outline {
+    --c: var(--text);
+    --bgc: transparent;
+    --bdc: currentColor;
+  }
 }

package/src/components/Badge/astro/Badge.astro

@@ -6,11 +6,11 @@ const props = Astro.props;
 
 // c--badge では c, bgc は 変数で受け取る
 const _propConfig = {
-	c: { isVar: 1 },
-	bgc: { isVar: 1 },
+  c: { isVar: 1 },
+  bgc: { isVar: 1 },
 };
 ---
 
-<Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
-	<slot />
+<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props}>
+  <slot />
 </Lism>

package/src/components/Badge/react/Badge.jsx

@@ -2,11 +2,11 @@ import { Lism } from 'lism-css/react';
 import '../_style.css';
 
 export default function Badge(props) {
-	// c--badge では c, bgc は 変数で受け取る
-	const _propConfig = {
-		c: { isVar: 1 },
-		bgc: { isVar: 1 },
-	};
+  // c--badge では c, bgc は 変数で受け取る
+  const _propConfig = {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 },
+  };
 
-	return <Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props} />;
+  return <Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props} />;
 }