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,
	setProperty,
	show,
	toggleAttribute,
} from '../../../'

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

export default component(
	'accordion-panel',
	{
		open: asBoolean(),
		collapsible: asBoolean(),
	},
	(el, { first }) => [
		toggleAttribute('open'),
		toggleAttribute('collapsible'),
		show(() => el.open || el.collapsible),
		first(
			'details',
			setProperty('open'),
			setProperty('ariaDisabled', () => String(!el.collapsible)),
		),
	],
)

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