Danny Blue deebloo

Minimum integration for custom form inputs

Allow value to be set via an attribute
Do not reflect that value back to an attribute if set via a property
If a text input. Listen for keyboard events. If enter key is called the form should be submitted.
DO NOT just call form.submit since this will not fire the submit event. Instead create a submit button, append it to the form. click the button and then remove it
- ```
const btn = document.createElement("button");
btn.type = "submit";
```

form.append(btn);

	class MySelectElement extends HTMLElement {
	constructor() {
	super();

	const observer = new MutationObserver((records) => {
	for (let record of records) {
	this.addItem(record.addedNodes);
	this.removeItem(record.removedNodes);
	}
	});

	import { shadow, ShadowTemplate, html, css } from './shadow.js';

	const template: ShadowTemplate = {
	css: css`
	:host {
	display: contents;
	}
	`.
	html: html`
	<slot></slot>

	function* windowed<T>(arr: T[], size: number) {
	for (let i = 0; i < arr.length; i++) {
	yield arr.slice(i, size + i);
	}
	}

	let thing = windowed([0, 1, 2, 3], 2);

	for (let [a, b] of thing) {
	console.log(a, b);

	// Freezes document scrolling without remove scrollbar.
	// This gets rid of the annoying jump that happens when you set the body overflow to hidden
	// Maintains scroll position on the page
	export function freezeScroll() {
	document.body.style.top = -document.documentElement.scrollTop + 'px';
	document.body.style.position = 'fixed';
	document.body.style.left = '0';
	document.body.style.right = '0';
	document.body.style.overflowY = 'scroll';
	}

	export function getFocusableEls(element: HTMLElement) {
	return element.querySelectorAll<HTMLElement>(
	'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
	);
	}

	export class FocusTrap {
	private focusableEls!: NodeListOf<HTMLElement>;
	private firstFocusableEl?: HTMLElement;
	private lastFocusableEl?: HTMLElement;

	import { component, State, handle, JoistElement, get, HandlerCtx } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'my-counter',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('dec_btn_clicked', -1)}>-</button>
	<span>${state}</span>