function Summary({ marker = true, className }, children) {
	return (
		<div onclick={toggle} attr-is="summary" className={className}>
			{marker ? <span className="marker"></span> : <></>}
			{children}
		</div>
	);

	/**
	 * A function that toggles the 'open' attribute on the parent element of the div
	 * and calls the onexpand function of the parent element if it exists.
	 *
	 * @this {HTMLElement} The div element that the function is bound to.
	 * @param {MouseEvent} e - The event object from the click event.
	 */
	function toggle(e) {
		if (
			e.target instanceof HTMLInputElement ||
			e.target instanceof HTMLTextAreaElement ||
			e.target instanceof HTMLSelectElement ||
			e.target.contentEditable === "true"
		)
			return;

		const $details = this.parentElement;

		$details.toggleAttribute("open");
		if ($details.hasAttribute("open")) {
			$details.onexpand?.(true);
		} else {
			$details.onexpand?.(false);
		}
	}
}
A function component that returns a div element that functions as a summary.

@param {Object} props - The properties object for the component.
@param {boolean} props.marker - Indicator whether a marker should be included in the div.
@param {string} props.className - CSS class name to be applied to the div.
@param {Array} children - An array of child elements to be inserted into the div.

@returns {HTMLDivElement} A div element with a 'summary' attribute, a marker (if specified), and any child elements.