@lism-css/ui 0.9.2 → 0.10.0

package/src/components/Accordion/astro/Root.astro

@@ -8,10 +8,10 @@ const rootProps = getRootProps(Astro.props || {});
 ---
 
 <Stack {...rootProps}>
-	<slot />
+  <slot />
 </Stack>
 
 <script>
-	import setAccordion from '../setAccordion';
-	setAccordion();
+  import setAccordion from '../setAccordion';
+  setAccordion();
 </script>

package/src/components/Accordion/getProps.js

@@ -1,77 +1,77 @@
 import atts from 'lism-css/lib/helper/atts';
 
 export function getRootProps({ lismClass, allowMultiple, ...props }) {
-	props.lismClass = atts(lismClass, 'c--accordion');
-	if (allowMultiple) props['data-allow-multiple'] = '';
-	return props;
+  props.lismClass = atts(lismClass, 'c--accordion');
+  if (allowMultiple) props['data-allow-multiple'] = '';
+  return props;
 }
 
 // duration: [s]
 export function getItemProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'c--accordion_item');
-	return props;
+  props.lismClass = atts(lismClass, 'c--accordion_item');
+  return props;
 }
 
 export function getHeadingProps(props) {
-	const defaultProps = {
-		lismClass: 'c--accordion_heading',
-		as: 'div',
-		setPlain: 1,
-	};
+  const defaultProps = {
+    lismClass: 'c--accordion_heading',
+    as: 'div',
+    setPlain: 1,
+  };
 
-	const returnProps = { ...defaultProps, ...props };
+  const returnProps = { ...defaultProps, ...props };
 
-	// div の時は role 付与
-	if (returnProps.as === 'div') {
-		returnProps.role = 'heading';
-	}
-	return returnProps;
+  // div の時は role 付与
+  if (returnProps.as === 'div') {
+    returnProps.role = 'heading';
+  }
+  return returnProps;
 }
 
 // id: Context から取得できればそれを優先（React用）
 export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }) {
-	// panel側は必要最低限のプロパティのみ。
-	const panelProps = {
-		lismClass: atts(lismClass, 'c--accordion_panel'),
-		id: _contextID || accID,
-		hidden: isOpen ? undefined : 'until-found',
-		pos: 'relative',
-		ov: 'hidden',
-	};
+  // panel側は必要最低限のプロパティのみ。
+  const panelProps = {
+    lismClass: atts(lismClass, 'c--accordion_panel'),
+    id: _contextID || accID,
+    hidden: isOpen ? undefined : 'until-found',
+    pos: 'relative',
+    ov: 'hidden',
+  };
 
-	// 余白などその他の指定は全て _content 側へ渡す
-	const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
+  // 余白などその他の指定は全て _content 側へ渡す
+  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
 
-	// content側へ移すprops
-	// ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
-	// 	if (props[prop]) {
-	// 		contentProps[prop] = props[prop];
-	// 		delete props[prop];
-	// 	}
-	// });
+  // content側へ移すprops
+  // ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
+  // 	if (props[prop]) {
+  // 		contentProps[prop] = props[prop];
+  // 		delete props[prop];
+  // 	}
+  // });
 
-	// 2つ返す
-	return { panelProps, contentProps };
+  // 2つ返す
+  return { panelProps, contentProps };
 }
 
 export const defaultProps = {
-	// header: { lismClass: 'c--accordion_header' },
-	button: {
-		lismClass: 'c--accordion_button',
-		as: 'button',
-		layout: 'flex',
-		setPlain: 1,
-		g: '10',
-		w: '100%',
-		ai: 'center',
-		jc: 'between',
-	},
-	icon: {
-		lismClass: 'c--accordion_icon a--icon',
-		as: 'span',
-		// d: 'grid',
-		pi: 'center',
-		fxsh: '0',
-		'aria-hidden': 'true',
-	},
+  // header: { lismClass: 'c--accordion_header' },
+  button: {
+    lismClass: 'c--accordion_button',
+    as: 'button',
+    layout: 'flex',
+    setPlain: 1,
+    g: '10',
+    w: '100%',
+    ai: 'center',
+    jc: 'between',
+  },
+  icon: {
+    lismClass: 'c--accordion_icon a--icon',
+    as: 'span',
+    // d: 'grid',
+    pi: 'center',
+    fxsh: '0',
+    'aria-hidden': 'true',
+  },
 };

package/src/components/Accordion/react/AccIcon.jsx

@@ -3,5 +3,5 @@ import { defaultProps } from '../getProps';
 
 // CSS疑似要素（::before / ::after）でアイコンを描画するコンポーネント
 export default function AccIcon(props) {
-	return <Lism {...defaultProps.icon} {...props} />;
+  return <Lism {...defaultProps.icon} {...props} />;
 }

package/src/components/Accordion/react/Accordion.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import { createContext, useRef, useId, useEffect, useContext } from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
 import { Lism, Stack } from 'lism-css/react';
 import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
@@ -9,40 +10,40 @@ import '../_style.css';
 
 // Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
 // Astro 環境では Context が使えないため null がフォールバック
-const AccordionContext = React.createContext(null);
+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 = React.useRef(null);
+  const ref = useRef(null);
 
-	// コンポーネント単位でユニークIDを生成
-	const accID = React.useId();
+  // コンポーネント単位でユニークIDを生成
+  const accID = useId();
 
-	// マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
-	React.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>
+  );
 }
 
 /**
@@ -50,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>;
 }
 
 /**
@@ -58,27 +59,27 @@ export function Heading({ children, ...props }) {
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
 export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
-	const ctx = React.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 = React.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;