diff --git a/demo/form/form-control.css b/demo/form/form-control.css
new file mode 100644
index 0000000..a39a4cd
--- /dev/null
+++ b/demo/form/form-control.css
@@ -0,0 +1,50 @@
+:host {
+ display: block;
+}
+
+#container {
+ position: relative;
+}
+
+:host(:invalid) #input {
+ color: red;
+}
+
+#matches-wrapper {
+ position: absolute;
+ bottom: 0;
+ transform: translateY(calc(100% + 4px));
+ background-color: white;
+ box-shadow: inset 0 0 0 1px black;
+ padding: 4px;
+}
+
+#matches {
+ width: 140px;
+ max-height: 400px;
+ overflow: auto;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+}
+#container:not(:focus-within) #matches-wrapper {
+ display: none;
+}
+
+.match {
+ display: block;
+ text-align: left;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ flex-shrink: 0;
+}
+
+#no-matches {
+ color: gray;
+}
+
+.match + #no-matches {
+ display: none;
+}
diff --git a/demo/form/form-control.js b/demo/form/form-control.js
new file mode 100644
index 0000000..5635963
--- /dev/null
+++ b/demo/form/form-control.js
@@ -0,0 +1,273 @@
+import XElement from '../../x-element.js';
+import data from './form-control.json' with { type: 'json' };
+import styleSheet from './form-control.css' with { type: 'css' };
+
+const entries = Object.entries(data);
+
+class FormControl extends XElement {
+ static #internalsMap = new WeakMap();
+
+ static get formAssociated() {
+ return true;
+ }
+
+ static get styles() {
+ return [styleSheet];
+ }
+
+ static createRenderRoot(host) {
+ return host.attachShadow({ mode: 'open', delegatesFocus: true });
+ }
+
+ // TODO: This feels awkward to keep internals… internal. We need access to
+ // this in callbacks so it’s not currently feasible to make it private on the
+ // “host” instance.
+ static #getInternals(host) {
+ return FormControl.#internalsMap.get(host);
+ }
+
+ static get properties() {
+ return {
+ // Public interface (see also getters / setters below)
+ name: {
+ type: String,
+ reflect: true,
+ },
+ required: {
+ type: Boolean,
+ reflect: true,
+ },
+ value: {
+ type: String,
+ reflect: true,
+ // TODO: Setting the default to "''" here ensures that validation will
+ // be hit. However, this has a weird side-effect of immediately marking
+ // the field as “:invalid” — which is typically not what users will
+ // expect. Not sure if we’re missing something from the spec still…
+ default: '',
+ observe: (host, value) => {
+ const input = host.shadowRoot.getElementById('input');
+ const internals = FormControl.#getInternals(host);
+ internals.setFormValue(value);
+ // TODO: This binding within the observer feels a little awkward. It
+ // would break if we property-bound with a “live” updater though.
+ input.value = value;
+ FormControl.validate(host);
+ },
+ },
+
+ // Internal interface
+ emoji: {
+ type: String,
+ internal: true,
+ input: ['value'],
+ compute: value => {
+ if (value) {
+ const codePoint = data[value];
+ if (codePoint) {
+ return String.fromCodePoint(...codePoint);
+ }
+ }
+ },
+ },
+ matches: {
+ type: Array,
+ internal: true,
+ default: () => [],
+ },
+ };
+ }
+
+ static get listeners() {
+ return {
+ input: (host) => {
+ this.input(host);
+ },
+ change: (host, event) => {
+ host.value = event.target.value;
+ this.change(host);
+ },
+ click: (host, event) => {
+ if (event.target.dataset.value) {
+ const input = host.shadowRoot.getElementById('input');
+ host.value = event.target.dataset.value;
+ input.value = host.value;
+ this.match(host);
+ this.change(host);
+ input.focus();
+ }
+ },
+ keydown: (host, event) => {
+ if (event.key === 'ArrowDown') {
+ event.preventDefault();
+ const input = host.shadowRoot.getElementById('input');
+ const matches = host.shadowRoot.getElementById('matches');
+ const activeElement = host.shadowRoot.activeElement;
+ if (activeElement === input) {
+ matches.firstElementChild?.focus();
+ } else if (matches.contains(activeElement)) {
+ activeElement.nextElementSibling?.focus();
+ }
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault();
+ const input = host.shadowRoot.getElementById('input');
+ const matches = host.shadowRoot.getElementById('matches');
+ const activeElement = host.shadowRoot.activeElement;
+ if (matches.contains(activeElement)) {
+ const previousElementSibling = activeElement.previousElementSibling;
+ if (previousElementSibling) {
+ previousElementSibling.focus();
+ } else {
+ input.focus();
+ }
+ }
+ } else if (event.key === 'Enter') {
+ // TODO: Inputs typically submit when you hit enter. Not sure that
+ // there is a way to control that from the element itself.
+ const input = host.shadowRoot.getElementById('input');
+ input.blur();
+ }
+ },
+ };
+ }
+
+ static template(html) {
+ return ({ emoji, matches }) => {
+ return html`
+
+
${emoji}
+
+
+ ${matches.map(match => {
+ return html`
+
+ ${match.emoji} ${match.value}
+
+ `;
+ })}
+
(no matches)
+
+
+
+ This demonstrates what it currently looks like to build a Form-Associated
+ Custom Element via x-element.
+
+
+
+
+
diff --git a/demo/form/index.js b/demo/form/index.js
new file mode 100644
index 0000000..6bfefa3
--- /dev/null
+++ b/demo/form/index.js
@@ -0,0 +1,13 @@
+const form = document.getElementById('form');
+
+form.addEventListener('submit', event => {
+ event.preventDefault();
+ const formData = new FormData(form);
+ const entries = [...formData.entries()];
+ console.log(entries); // eslint-disable-line no-console
+});
+
+// TODO: This doesn’t appear to be working just yet.
+// form.addEventListener('formdata', event => {
+// console.log([...event.formData.entries()]);
+// });
diff --git a/demo/index.html b/demo/index.html
index bf1eafb..9bb0628 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,6 +15,7 @@ A dead simple starting point for custom elements.
integrating with lit-html integrating with µhtml wrapping in react form-associated custom elements run tests performance