Number Pad web component as Astro component

number-pad.astro

<number-pad {...Astro.props}></number-pad>
<script>
	import { FASTElement, css, customElement, html } from "@microsoft/fast-element";
	import styles from './number-pad.scss?inline';

	const template = html<NumberPad>`
		<div class="number-pad" @click="${(x, c) => x.handleClick(c.event)}">
			<div class="number-pad-row">
				<span role="button">1</span>
				<span role="button">2</span>
				<span role="button">3</span>
			</div>
			<div class="number-pad-row">
				<span role="button">4</span>
				<span role="button">5</span>
				<span role="button">6</span>
			</div>
			<div class="number-pad-row">
				<span role="button">7</span>
				<span role="button">8</span>
				<span role="button">9</span>
			</div>
			<div class="number-pad-row">
				<span role="button">.</span>
				<span role="button">0</span>
				<span role="button">&lt;</span>
			</div>
		</div>
	`;

	@customElement({
		name: 'number-pad',
		template,
		styles
	})
	class NumberPad extends FASTElement {
		handleClick({ target }: Event) {
			const button = target as HTMLElement | null;
			if (button?.matches('[role="button"]')) {
				this.dispatchEvent(new InputEvent('input', {
					data: button.innerText,
					bubbles: true,
				}));
			}
		}
	}
</script>