@lism-css/ui 0.2.3 → 0.8.0

package/src/components/Accordion/setAccordion.js

@@ -1,120 +1,146 @@
-// アニメーションが完了するのを待つ
-const waitAnimation = (details) => {
-	// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
-	const body = details.querySelector('.c--accordion_body');
-	const animations = body ? body.getAnimations() : [];
-
-	// allSettled を使うことで、キャンセル時も reject せずに完了する
-	return Promise.allSettled(animations.map((a) => a.finished));
+import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';
+
+// hidden を付け外しする時の値
+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'),
+	};
 };
 
-// animationTime: [ms]
-const open = async (details) => {
-	// すでに開いている場合は何もしない
-	if (details.open && details.hasAttribute('data-opened')) return;
+// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
+//   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
+const maybeCloseOpenedItems = (accordionItem) => {
+	const parent = accordionItem.parentNode;
+	if (!parent) return;
 
-	// open属性をセット
-	details.open = true;
+	// 親の data-allow-multiple 属性の有無をチェック
+	if (parent.hasAttribute('data-allow-multiple')) return;
 
-	// 次フレームで data-opened 属性を付与（CSS側でフェードインアニメーション開始）
-	requestAnimationFrame(() => {
-		details.setAttribute('data-opened', ''); // 属性の追加
-	});
+	// 開いているアコーディオンを取得して閉じる
+	parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
 };
 
-const close = async (details) => {
-	// すでに閉じている場合は何もしない
-	if (!details.open && !details.hasAttribute('data-opened')) return;
+async function openAccordion(accordionItem) {
+	const { panel, content, button } = getAccordionElements(accordionItem);
 
-	details.removeAttribute('data-opened'); // 属性を削除
+	// アニメーションがあれば一時停止
+	maybePauseAnimation(panel);
 
-	// アニメーションを待つ
-	await waitAnimation(details);
+	// hidden を削除
+	panel.removeAttribute('hidden');
 
-	// アニメーション完了後にopen属性 を除去。
-	details.open = false;
-};
+	// 1フレーム待機
+	await waitFrame();
 
-// 複数展開を許可するかどうかを、親要素の [data-multiple] でチェック.
-const getAllowMultiple = (details) => {
-	let allowMultiple = false;
-	const parent = details.parentNode;
-	if (null != parent) {
-		const dataMultiple = parent.dataset.multiple;
-		allowMultiple = 'disallow' !== dataMultiple;
-	}
-	return allowMultiple;
-};
+	// 次フレームで高さセット（ 目標の高さ = content の高さ ）
+	accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
 
-const onClick = (details, allowMultiple) => {
-	if (!details.open) {
-		if (!allowMultiple) {
-			// （複数展開が禁止されている場合）他の開いているアイテムがあるかどうかを先に探して閉じる
-			const parent = details.parentNode;
-			const openedItem = parent.querySelector(`[data-opened]`);
-			requestAnimationFrame(() => {
-				// 1フレーム待機（safariでは requestAnimationFrame() がないと動かなかった）
-				if (null != openedItem) close(openedItem);
-			});
-		}
-
-		// 開く処理
-		open(details);
-	} else if (details.open) {
-		// 閉じる処理
-		close(details);
+	// さらに1フレーム待機
+	await waitFrame();
+
+	// アニメーション開始
+	accordionItem.setAttribute('data-opened', '');
+	button.setAttribute('aria-expanded', 'true');
+
+	// アニメーションを待つ
+	const status = await waitAnimation(panel);
+
+	// アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
+	if ('canceled' !== status) {
+		accordionItem.style.removeProperty('--_panel-h');
 	}
-};
+}
 
-const onToggle = (details) => {
-	const hasOpen = details.open;
-	const hasDataOpen = details.hasAttribute('data-opened');
+async function closeAccordion(accordionItem) {
+	const { panel, button } = getAccordionElements(accordionItem);
 
-	// open はセットされたのに data-opened 属性がついてない時
-	if (hasOpen && !hasDataOpen) {
-		details.setAttribute('data-opened', '');
+	// アニメーションがあれば一時停止
+	maybePauseAnimation(panel);
+
+	// 現在の高さを一旦セットする
+	accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
+
+	// 1フレーム待機
+	await waitFrame();
+
+	// 次フレームで属性を削除
+	accordionItem.removeAttribute('data-opened');
+	button.setAttribute('aria-expanded', 'false');
+
+	// 変数削除して 0px へ向けてアニメーション開始
+	accordionItem.style.removeProperty('--_panel-h');
+
+	// アニメーションを待つ
+	const status = await waitAnimation(panel);
+
+	// アニメーションが最後まで完了したら、hidden付与
+	if ('canceled' !== status) {
+		panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
 	}
-	// open は削除されたのに data-opened 属性がまだついている時
-	if (!hasOpen && hasDataOpen) {
-		details.removeAttribute('data-opened');
+}
+
+// アコーディオンのトグル処理
+function toggleAccordion(accordionItem) {
+	if (accordionItem.hasAttribute('data-opened')) {
+		// 自身を閉じる
+		closeAccordion(accordionItem);
+	} else {
+		// 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
+		maybeCloseOpenedItems(accordionItem);
+
+		// 自身を開く
+		openAccordion(accordionItem);
 	}
-};
+}
 
-export const setEvent = (details) => {
-	// 複数展開を制限するかどうか
-	const allowMultiple = getAllowMultiple(details);
+/**
+ * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
+ */
+export const setEvent = (accordionItem) => {
+	const { button, panel } = getAccordionElements(accordionItem);
 
-	// <summary> 要素をトリガーとする
-	const summary = details.querySelector('summary');
-	if (!summary) return;
+	// until-found のオン・オフが使い分けれるように、最初に初期値を取得
+	if (panel.hasAttribute('hidden')) {
+		ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
+	}
 
+	// clickイベント登録
 	const _clickEvent = (e) => {
-		// すぐに open 属性が切り替わらないようにする
-		e.preventDefault();
-		onClick(details, allowMultiple);
-	};
-	const _toggleEvent = () => {
-		onToggle(details);
+		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+		toggleAccordion(accordionItem);
 	};
 
-	// <summary> 'click' イベント
-	summary.addEventListener('click', _clickEvent);
+	// beforematchイベント登録 (ページ検索時などはこっちが発火する)
+	const _beforematchEvent = (e) => {
+		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+		toggleAccordion(accordionItem);
+	};
 
-	// <details> の'toggle' イベントで、ページ内検索時にも開閉されるようにする
-	details.addEventListener('toggle', _toggleEvent);
+	button.addEventListener('click', _clickEvent);
+	panel.addEventListener('beforematch', _beforematchEvent);
 
-	// react用
+	// react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
 	return () => {
-		// useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
-		summary.removeEventListener('click', _clickEvent);
-		details.removeEventListener('toggle', _toggleEvent);
+		button.removeEventListener('click', _clickEvent);
+		panel.removeEventListener('beforematch', _beforematchEvent);
 	};
 };
 
+/**
+ * ページ内の全アコーディオンにイベントをセット（Astro用）
+ */
 const setAccordion = () => {
-	const detailsAll = document.querySelectorAll('.c--accordion');
-	detailsAll.forEach((details) => {
-		setEvent(details);
+	const accordionAll = document.querySelectorAll('.c--accordion_item');
+	accordionAll.forEach((accordionItem) => {
+		setEvent(accordionItem);
 	});
 };
 export default setAccordion;

package/src/components/Callout/getProps.ts

@@ -23,7 +23,7 @@ export default function getCalloutProps({ type = 'note', keycolor, icon, title,
 		p: '20',
 		g: '10',
 		bdc: 'keycolor',
-		'bd-x-s': true,
+		'bd-x-s': '-',
 		bdw: '4px',
 		bxsh: '10',
 		bdrs: '5',

package/src/components/Details/_style.css

@@ -0,0 +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;
+	}
+
+	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
+	.c--details_summary::-webkit-details-marker {
+		display: none;
+	}
+
+	/* 見出しタグでもフォントを揃える */
+	/* .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);
+
+		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;
+	}
+
+	/* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
+	.c--details_body {
+		overflow: hidden;
+	}
+}

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

@@ -0,0 +1,17 @@
+---
+/**
+ * Content - コンテンツコンポーネント
+ * details要素の開閉されるコンテンツ部分のラッパー
+ * grid-template-rows: 0fr → 1fr のアニメーションに必要
+ */
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.body}>
+	<Lism {...defaultProps.content} {...props}>
+		<slot />
+	</Lism>
+</Lism>

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

@@ -0,0 +1,18 @@
+---
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリングし、CSSのみでアニメーションを実装
+ * スクリプト不要で::details-contentを使用
+ */
+import getLismProps from 'lism-css/lib/getLismProps';
+import { getDetailsProps } from '../getProps';
+
+// スタイルのインポート
+import '../_style.css';
+
+const props = Astro.props || {};
+---
+
+<details {...getLismProps(getDetailsProps(props))}>
+	<slot />
+</details>

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

@@ -0,0 +1,14 @@
+---
+/**
+ * Icon - アイコンコンポーネント
+ * 開閉状態を示すアイコン（開いた時に回転）
+ */
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.icon} {...props}>
+	<slot />
+</Lism>

package/src/components/{Accordion/astro/AccLabel.astro → Details/astro/Summary.astro}

@@ -1,11 +1,10 @@
 ---
-// import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
 import { defaultProps } from '../getProps';
 
 const props = Astro.props || {};
 ---
 
-<Lism {...defaultProps.label} {...props}>
+<Lism tag='summary' {...defaultProps.summary} {...props}>
 	<slot />
 </Lism>

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

@@ -0,0 +1,10 @@
+---
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.title} {...props}>
+	<slot />
+</Lism>

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

@@ -0,0 +1,10 @@
+/**
+ * Astro版Detailsコンポーネントのエクスポート
+ */
+import Root from './Details.astro';
+import Summary from './Summary.astro';
+import Title from './Title.astro';
+import Icon from './Icon.astro';
+import Content from './Content.astro';
+
+export default { Root, Summary, Title, Content, Icon };

package/src/components/Details/getProps.js

@@ -0,0 +1,23 @@
+import atts from 'lism-css/lib/helper/atts';
+
+/**
+ * Detailsコンポーネントのルート要素用プロパティを生成
+ * @param {Object} props - コンポーネントのプロパティ
+ * @param {string} props.lismClass - 追加のLismクラス
+ * @returns {Object} 処理済みプロパティ
+ */
+export function getDetailsProps({ lismClass, ...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', tag: 'span', fx: '1', setPlain: 1 },
+	icon: { lismClass: 'c--details_icon a--icon', tag: 'span', 'aria-hidden': 'true' },
+	body: { lismClass: 'c--details_body' },
+	content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
+};

package/src/components/Details/react/Details.jsx

@@ -0,0 +1,66 @@
+/**
+ * React版 Detailsコンポーネント
+ */
+import getLismProps from 'lism-css/lib/getLismProps';
+import { Lism } from 'lism-css/react';
+import { getDetailsProps, defaultProps } from '../getProps';
+
+// スタイルのインポート
+import '../_style.css';
+
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリング
+ */
+export function Details({ children, ...props }) {
+	const lismProps = getLismProps(getDetailsProps(props));
+
+	return <details {...lismProps}>{children}</details>;
+}
+
+/**
+ * Summary - サマリーコンポーネント
+ * details要素のsummary部分
+ */
+export function Summary({ children, ...props }) {
+	return (
+		<Lism tag='summary' {...defaultProps.summary} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Title - タイトルコンポーネント
+ */
+export function Title({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.title} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Icon - アイコンコンポーネント
+ */
+export function Icon({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.icon} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Content - コンテンツコンポーネント
+ */
+export function Content({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.body}>
+			<Lism {...defaultProps.content} {...props}>
+				{children}
+			</Lism>
+		</Lism>
+	);
+}

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

@@ -0,0 +1,6 @@
+/**
+ * React版Detailsコンポーネントのエクスポート
+ */
+import { Details as Root, Summary, Title, Icon, Content } from './Details';
+
+export default { Root, Summary, Title, Icon, Content };

package/src/components/Modal/script.js

@@ -1,3 +1,4 @@
+/* Memo: この script は defer をつけて読み込む （DOMパース後に読み込まれます） */
 import setModal from './setModal.ts';
 
 document.addEventListener('DOMContentLoaded', function () {

package/src/components/Modal/setModal.ts

@@ -1,105 +1,101 @@
-// オープンした時のトリガー要素を記憶する（focusを戻す）
-let THE_TRIGGER: HTMLElement | null = null;
-
-// モーダルのアニメーションが完了するのを待つ.
-const waitAnimation = async (element: HTMLElement): Promise<void> => {
-	// （子要素も取得する場合は { subtree: true } を指定）
-	const animations = element.getAnimations();
-
-	if (animations.length > 0) {
-		// allSettled を使うことで、キャンセルされた場合もrejectせずに完了扱いになる
-		await Promise.allSettled(animations.map((a) => a.finished));
-	}
-};
-
-async function modalOpen(modal: HTMLDialogElement): Promise<void> {
-	// すでに open & data-is-open が付いていれば何もしない（連打防止）
-	if (modal.open && modal.dataset.isOpen) return;
-
-	// showModal() でモーダルを開く（ open 属性の付与）
-	modal.showModal();
-
-	// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
-	requestAnimationFrame(() => {
-		modal.dataset.isOpen = '1';
-	});
-}
-async function modalClose(modal: HTMLDialogElement): Promise<void> {
-	// すでに閉じている場合は何もしない
-	if (undefined === modal.dataset.isOpen) {
-		return;
-	}
-
-	// data-open 属性を削除（CSS側でフェードアウトアニメーション開始）
-	delete modal.dataset.isOpen;
-
-	// アニメーション完了を待機
-	await waitAnimation(modal);
-
-	// アニメーション終了後、dialog を閉じる（open属性の削除）
-	modal.close();
-}
+import { waitAnimation } from '../../helper/animation';
 
+/**
+ * モーダルの開閉イベントを設定する
+ */
 export function setEvent(modal: HTMLDialogElement): void {
 	// modalがない、またはidがない場合は処理を終了
 	if (!modal || !modal.id) return;
 
+	// オープンした時のトリガー要素を記憶する（data属性を戻すため）
+	let theTrigger: HTMLElement | null = null;
+
 	// モーダルを開くトリガーと閉じるトリガーを取得
-	const openTriggers: NodeListOf<HTMLElement> = document.querySelectorAll(`[data-modal-open="${modal.id}"]`);
-	const closeTriggers: NodeListOf<HTMLElement> = modal.querySelectorAll(`[data-modal-close="${modal.id}"]`);
+	const openTriggers = document.querySelectorAll<HTMLElement>(`[data-modal-open="${modal.id}"]`);
+	const closeTriggers = modal.querySelectorAll<HTMLElement>(`[data-modal-close="${modal.id}"]`);
 
-	// 自身にクローズイベントを追加(余白部分をクリックしても閉じるように)
-	modal.addEventListener('click', (e) => {
-		if (e.target === modal) {
-			modalClose(modal);
-		}
-	});
+	/**
+	 * ダイアログを開く処理
+	 *   Point: showModal() してから、CSSアニメーション用の data-is-open属性を付与する
+	 */
+	const openDialog = () => {
+		// すでに open & data-is-open が付いていれば何もしない（連打防止）
+		if (modal.open && modal.hasAttribute('data-is-open')) return;
 
-	// closeボタンにイベント登録
-	modal.addEventListener('close', (e) => {
-		if (THE_TRIGGER) {
-			// THE_TRIGGER.focus(); // showModal()ではフォーカス戻す必要なし
+		// showModal() でモーダルを開く（ open 属性の付与）
+		modal.showModal();
 
-			// オープンボタンのdata属性削除
-			delete THE_TRIGGER.dataset.targetOpened;
-			THE_TRIGGER = null;
+		// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
+		requestAnimationFrame(() => {
+			modal.dataset.isOpen = '1';
+		});
+	};
+
+	/**
+	 * ダイアログを閉じる処理
+	 *   Point: data-is-open属性を削除してCSSアニメーションが終わってから、close() を実行する
+	 */
+	const closeDialog = async (): Promise<void> => {
+		// すでに閉じている場合は何もしない
+		if (!modal.hasAttribute('data-is-open')) {
+			return;
 		}
 
-		// モーダルを閉じる
-		modalClose(modal);
-	});
+		// data-is-open 属性を削除（CSS側でフェードアウトアニメーション開始）
+		modal.removeAttribute('data-is-open');
 
-	// openボタンにイベント登録追加
+		// アニメーション完了を待機
+		await waitAnimation(modal);
+
+		// アニメーション終了後、dialog を閉じる（open属性の削除）
+		modal.close();
+	};
+
+	// openボタンにイベント登録
 	openTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', (e) => {
+		trigger?.addEventListener('click', () => {
 			// button側にもdata属性付与
 			trigger.dataset.targetOpened = '1';
-			THE_TRIGGER = trigger; // close() 時にdata属性削除するために記憶
+			theTrigger = trigger; // close() 時にdata属性削除するために記憶
 
 			// モーダルを開く
-			modalOpen(modal);
+			openDialog();
 		});
 	});
 
-	// 閉じるトリガーにイベントリスナーを追加
+	// closeボタンにイベント登録
 	closeTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', (e) => {
-			modalClose(modal);
+		trigger?.addEventListener('click', () => {
+			void closeDialog();
 		});
 	});
 
+	// 余白クリックで閉じる
+	modal.addEventListener('click', (e) => {
+		if (e.target === modal) {
+			void closeDialog();
+		}
+	});
+
+	// close() 完了時にトリガーのdata属性をリセット
+	modal.addEventListener('close', () => {
+		if (theTrigger) {
+			theTrigger.removeAttribute('data-target-opened');
+			theTrigger = null;
+		}
+	});
+
 	/**
 	 * ESCキーで閉じた時もアニメーションを実行する処理
 	 */
 	modal.addEventListener('cancel', (e) => {
 		e.preventDefault(); // デフォルトの即時 close() を防ぐ
-		modalClose(modal); // 自分で用意したクローズ処理
+		void closeDialog(); // 自分で用意したクローズ処理
 	});
 }
 
 const setModal = () => {
 	const modals = document.querySelectorAll('.c--modal');
-
 	modals?.forEach((target) => {
 		setEvent(target as HTMLDialogElement);
 	});