accordion-panel.html html

<accordion-panel>
	<details open>
		<summary>
			<div class="summary">Tab 1</div>
		</summary>
		Content for Tab 1
	</details>
</accordion-panel>
<accordion-panel>
	<details>
		<summary>
			<div class="summary">Tab 2</div>
		</summary>
		Content for Tab 2
	</details>
</accordion-panel>
<accordion-panel>
	<details>
		<summary>
			<div class="summary">Tab 3</div>
		</summary>
		Content for Tab 3
	</details>
</accordion-panel>

accordion-panel.css css

accordion-panel {
	display: block;

	> details {

		& summary {
			cursor: pointer;
			font-size: var(--font-size-m);
			font-weight: var(--font-weight-bold);
            margin: 0 0 var(--space-s);
		}

		::marker,
		::-webkit-details-marker {
			color: var(--color-text-soft);
		}

		.summary {
			display: inline-block;
			margin-left: var(--space-xs);
		}

		&[open] {
			margin-bottom: var(--space-m);
		}

		&[aria-disabled="true"] {
			
			& summary {
				pointer-events: none;
				display: block;
				cursor: text;
			}

			::marker,
			::-webkit-details-marker {
				display: none;
			}

			.summary {
                margin-left: 0;
            }
		}
	}
}

accordion-panel.ts ts

import {
	type Component,
	asBoolean,
	component,
	first,
	setProperty,
	toggleAttribute,
} from "../../../";

export type AccordionPanelProps = {
	open: boolean;
	collapsible: boolean;
};

export default component(
	"accordion-panel",
	{
		open: asBoolean,
		collapsible: asBoolean,
	},
	(el) => [
		toggleAttribute("open"),
		toggleAttribute("collapsible"),
		setProperty("hidden", () => !el.open && !el.collapsible),
		first<AccordionPanelProps, HTMLDetailsElement>(
			"details",
			setProperty("open"),
			setProperty("ariaDisabled", () => String(!el.collapsible)),
		),
	],
);

declare global {
	interface HTMLElementTagNameMap {
		"accordion-panel": Component<AccordionPanelProps>;
	}
}