Details

/**
 * 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 as='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>
	);
}

---
/**
 * 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>

---
import { Lism } from 'lism-css/astro';
import { defaultProps } from '../getProps';

const props = Astro.props || {};
---

<Lism as='summary' {...defaultProps.summary} {...props}>
	<slot />
</Lism>

/* 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;
	}
}