basic-counter.html html

<basic-counter>
	<button type="button">💐 <span>42</span></button>
</basic-counter>

basic-counter.css css

basic-counter {
	& button {
		border: 1px solid var(--color-border);
		border-radius: var(--space-xs);
		background-color: var(--color-secondary);
		padding: var(--space-xs) var(--space-s);
		cursor: pointer;
		color: var(--color-text);
		font-size: var(--font-size-m);
		line-height: var(--line-height-xs);
		transition: background-color var(--transition-short) var(--easing-inout);

		&:hover {
			background-color: var(--color-secondary-hover);
		}

		&:active {
			background-color: var(--color-secondary-active);
		}
	}
}

basic-counter.ts ts

import {
	asInteger,
	type Component,
	component,
	fromDOM,
	fromEvents,
	getText,
	setText,
} from '../../..'

export type BasicCounterProps = {
	readonly count: number
}

export default component(
	'basic-counter',
	{
		count: fromEvents<number>(
			'button',
			{ click: ({ value }) => ++value },
			fromDOM({ span: getText() }, asInteger()),
		),
	},
	(_, { first }) => [first('span', setText('count'))],
)

declare global {
	interface HTMLElementTagNameMap {
		'basic-counter': Component<BasicCounterProps>
	}
}