@aurodesignsystem/auro-formkit 2.0.0-beta.15 → 2.0.0-beta.16

package/components/form/README.md

@@ -75,10 +75,11 @@ import "@aurodesignsystem/auro-formkit/auro-form";
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
+<auro-form>
+  <auro-input>
+      <span slot="label">Hello World</span>
+  </auro-input>
+</auro-form>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -97,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.14/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.15/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases
@@ -119,10 +120,11 @@ The `<auro-form>` element should be used in situations where users may:
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
+<auro-form>
+  <auro-input>
+      <span slot="label">Hello World</span>
+  </auro-input>
+</auro-form>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/api.min.js

@@ -24,7 +24,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}:host form{display:block;width:100%;padding:1rem;border:1px solid #2a2a2a;border-radius:1rem}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -96,8 +96,20 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+/* eslint-disable no-underscore-dangle */
+
+
+/**
+ * @typedef {Object} FormStateMember - The form state member.
+ * @property {string | number | boolean | string[] | null} value - The value of the form element.
+ * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
+ * @property {boolean} required - Whether the form element is required or not.
+ * @property {HTMLElement} element - Whether the form element is required or not.
+ */
+
+/**
+ * @typedef {Object.<string, FormStateMember>} FormState - The form state.
+ */
 
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
@@ -110,26 +122,138 @@ class AuroLibraryRuntimeUtils {
 
 // build the component class
 class AuroForm extends r {
-  // constructor() {
-  //   super();
-  // }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit.dev/docs/components/properties/
-  // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-
-      // this property is DEMO ONLY! Please delete.
-      cssClass:   { type: String }
+      _formState: { attribute: false },
     };
   }
 
+  constructor() {
+    super();
+
+    /** @type {FormState} */
+    this._formState = {};
+  }
+
+  // Note: button is NOT considered a form element in this context
+  // as it does not have a .value property.
+  static get formElementTags() {
+    return [
+      'auro-input',
+      'auro-select',
+      'auro-datepicker',
+      'auro-checkbox-group',
+    ];
+  }
+
+  /**
+   * Shared code for determining if an element is something we care about (submit, form element, etc.).
+   * @param {string[]} collection - The array to use for tag name search.
+   * @param {HTMLElement} element - The element to compare against the master list.
+   * @returns boolean
+   * @private
+   */
+  _isInElementCollection(collection, element) {
+    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+  }
+
+  /**
+   * Check if the tag name is a form element.
+   * @param {HTMLElement} element - The element to check (attr or tag name).
+   * @returns {boolean}
+   */
+  isFormElement(element) {
+    return this._isInElementCollection(AuroForm.formElementTags, element);
+  }
+
+  static get submitElementTags() {
+    return [
+      'button',
+      'auro-button',
+    ];
+  }
+
+  /**
+   * Check if the tag name is a submit element.
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean}
+   */
+  isSubmitElement(element) {
+    return this._isInElementCollection(AuroForm.submitElementTags, element);
+  }
+
   static get styles() {
     return [styleCss];
   }
 
+  /**
+   * Reduce the form value into a key-value pair.
+   *
+   * NOTE: form keys use `name` first, and `id` second if `name` is not available.
+   * This follows standard HTML5 form behavior - submission uses `name` by default when creating
+   * the FormData object.
+   *
+   * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
+   */
+  get value() {
+    return Object.keys(this._formState).reduce((acc, key) => {
+      acc[key] = this._formState[key].value;
+      return acc;
+    }, {});
+  }
+
+  get validity() {
+    // go through validity states and return the first invalid state (if any)
+    const invalidKey = Object.keys(this._formState).
+      find((key) => {
+        const formKey = this._formState[key];
+
+        // these are NOT extra :(
+        // eslint-disable-next-line no-extra-parens
+        return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
+      });
+
+    return invalidKey ? 'invalid' : 'valid';
+  }
+
+  // Below is not implemented yet
+  get isInitialState() {
+    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
+
+    return !anyTainted;
+  }
+
+  getSubmitFunction() {
+    // We return an arrow function here to ensure that the `this` context points at this same AuroForm context.
+    // Otherwise, submission tries to read `this.value` on the button element.
+    return (event) => {
+      event.preventDefault();
+
+      this.dispatchEvent(new CustomEvent('submit', {
+        detail: {
+          value: this.value
+        }
+      }));
+    };
+  }
+
+  /**
+   * Construct the query strings from elements, append them together, execute, and return the NodeList.
+   * @returns {NodeList}
+   */
+  queryAuroElements() {
+    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
+    const submitterQuery = AuroForm.submitElementTags.map((tag) => `${tag}[type=submit]`).join(',');
+
+    // Alternatively, for renamed components...
+    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
+    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+
+    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+
+    return this.querySelectorAll(unifiedElementQuery);
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.
@@ -142,17 +266,58 @@ class AuroForm extends r {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    const slot = this.shadowRoot.querySelector('slot');
+
+    // Update the form state when a form element is detected
+    slot.addEventListener('input', (event) => {
+
+      /** @type {HTMLInputElement} */
+      const eventTarget = event.target;
+      if (this.isFormElement(eventTarget)) {
+        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      }
+    });
+
+    slot.addEventListener('auroFormElement-validated', (event) => {
+      const oldValue = this._formState;
+
+      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
+      this.requestUpdate('formState', oldValue);
+    });
+  }
+
+  onSlotChange() {
+    this._formState = {};
 
-  // function that renders the HTML and CSS into  the scope of the component
+    this.queryAuroElements().forEach((element) => {
+      if (this.isFormElement(element)) {
+        this._formState[element.getAttribute('name')] = {
+          value: element.getAttribute('value'),
+          validity: element.getAttribute('validity'),
+          required: element.hasAttribute('required'),
+          element
+        };
+      }
+
+      if (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
+        element.removeEventListener('click', this.getSubmitFunction());
+        element.addEventListener('click', this.getSubmitFunction());
+      }
+    });
+  }
+
+  // function that renders the HTML and CSS into the scope of the component
   render() {
     return x`
-
-      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
-      <div class=${this.cssClass} tabindex="0">
-        <slot></slot>
-      </div>
+        <form>
+          <p>Value: ${JSON.stringify(this.value)}</p>
+          <p>Validity: ${this.validity}</p>
+          <h3>Auro form example</h3>
+          <slot @slotchange="${this.onSlotChange}"></slot>
+        </form>
     `;
   }
 }

package/components/form/demo/index.min.js

@@ -24,7 +24,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}:host form{display:block;width:100%;padding:1rem;border:1px solid #2a2a2a;border-radius:1rem}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -96,8 +96,20 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+/* eslint-disable no-underscore-dangle */
+
+
+/**
+ * @typedef {Object} FormStateMember - The form state member.
+ * @property {string | number | boolean | string[] | null} value - The value of the form element.
+ * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
+ * @property {boolean} required - Whether the form element is required or not.
+ * @property {HTMLElement} element - Whether the form element is required or not.
+ */
+
+/**
+ * @typedef {Object.<string, FormStateMember>} FormState - The form state.
+ */
 
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
@@ -110,26 +122,138 @@ class AuroLibraryRuntimeUtils {
 
 // build the component class
 class AuroForm extends r {
-  // constructor() {
-  //   super();
-  // }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit.dev/docs/components/properties/
-  // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-
-      // this property is DEMO ONLY! Please delete.
-      cssClass:   { type: String }
+      _formState: { attribute: false },
     };
   }
 
+  constructor() {
+    super();
+
+    /** @type {FormState} */
+    this._formState = {};
+  }
+
+  // Note: button is NOT considered a form element in this context
+  // as it does not have a .value property.
+  static get formElementTags() {
+    return [
+      'auro-input',
+      'auro-select',
+      'auro-datepicker',
+      'auro-checkbox-group',
+    ];
+  }
+
+  /**
+   * Shared code for determining if an element is something we care about (submit, form element, etc.).
+   * @param {string[]} collection - The array to use for tag name search.
+   * @param {HTMLElement} element - The element to compare against the master list.
+   * @returns boolean
+   * @private
+   */
+  _isInElementCollection(collection, element) {
+    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+  }
+
+  /**
+   * Check if the tag name is a form element.
+   * @param {HTMLElement} element - The element to check (attr or tag name).
+   * @returns {boolean}
+   */
+  isFormElement(element) {
+    return this._isInElementCollection(AuroForm.formElementTags, element);
+  }
+
+  static get submitElementTags() {
+    return [
+      'button',
+      'auro-button',
+    ];
+  }
+
+  /**
+   * Check if the tag name is a submit element.
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean}
+   */
+  isSubmitElement(element) {
+    return this._isInElementCollection(AuroForm.submitElementTags, element);
+  }
+
   static get styles() {
     return [styleCss];
   }
 
+  /**
+   * Reduce the form value into a key-value pair.
+   *
+   * NOTE: form keys use `name` first, and `id` second if `name` is not available.
+   * This follows standard HTML5 form behavior - submission uses `name` by default when creating
+   * the FormData object.
+   *
+   * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
+   */
+  get value() {
+    return Object.keys(this._formState).reduce((acc, key) => {
+      acc[key] = this._formState[key].value;
+      return acc;
+    }, {});
+  }
+
+  get validity() {
+    // go through validity states and return the first invalid state (if any)
+    const invalidKey = Object.keys(this._formState).
+      find((key) => {
+        const formKey = this._formState[key];
+
+        // these are NOT extra :(
+        // eslint-disable-next-line no-extra-parens
+        return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
+      });
+
+    return invalidKey ? 'invalid' : 'valid';
+  }
+
+  // Below is not implemented yet
+  get isInitialState() {
+    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
+
+    return !anyTainted;
+  }
+
+  getSubmitFunction() {
+    // We return an arrow function here to ensure that the `this` context points at this same AuroForm context.
+    // Otherwise, submission tries to read `this.value` on the button element.
+    return (event) => {
+      event.preventDefault();
+
+      this.dispatchEvent(new CustomEvent('submit', {
+        detail: {
+          value: this.value
+        }
+      }));
+    };
+  }
+
+  /**
+   * Construct the query strings from elements, append them together, execute, and return the NodeList.
+   * @returns {NodeList}
+   */
+  queryAuroElements() {
+    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
+    const submitterQuery = AuroForm.submitElementTags.map((tag) => `${tag}[type=submit]`).join(',');
+
+    // Alternatively, for renamed components...
+    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
+    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+
+    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+
+    return this.querySelectorAll(unifiedElementQuery);
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.
@@ -142,17 +266,58 @@ class AuroForm extends r {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    const slot = this.shadowRoot.querySelector('slot');
+
+    // Update the form state when a form element is detected
+    slot.addEventListener('input', (event) => {
+
+      /** @type {HTMLInputElement} */
+      const eventTarget = event.target;
+      if (this.isFormElement(eventTarget)) {
+        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      }
+    });
+
+    slot.addEventListener('auroFormElement-validated', (event) => {
+      const oldValue = this._formState;
+
+      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
+      this.requestUpdate('formState', oldValue);
+    });
+  }
+
+  onSlotChange() {
+    this._formState = {};
 
-  // function that renders the HTML and CSS into  the scope of the component
+    this.queryAuroElements().forEach((element) => {
+      if (this.isFormElement(element)) {
+        this._formState[element.getAttribute('name')] = {
+          value: element.getAttribute('value'),
+          validity: element.getAttribute('validity'),
+          required: element.hasAttribute('required'),
+          element
+        };
+      }
+
+      if (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
+        element.removeEventListener('click', this.getSubmitFunction());
+        element.addEventListener('click', this.getSubmitFunction());
+      }
+    });
+  }
+
+  // function that renders the HTML and CSS into the scope of the component
   render() {
     return x`
-
-      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
-      <div class=${this.cssClass} tabindex="0">
-        <slot></slot>
-      </div>
+        <form>
+          <p>Value: ${JSON.stringify(this.value)}</p>
+          <p>Validity: ${this.validity}</p>
+          <h3>Auro form example</h3>
+          <slot @slotchange="${this.onSlotChange}"></slot>
+        </form>
     `;
   }
 }

package/components/form/demo/registerDemoDeps.js

@@ -0,0 +1,5 @@
+import {AuroInput} from "@auro-formkit/auro-input";
+import {AuroDatePicker} from "@auro-formkit/auro-datepicker";
+
+AuroInput.register();
+AuroDatePicker.register();

package/components/form/demo/working.html

@@ -0,0 +1,86 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Auro Web Component Generator | auro-form custom element</title>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+  />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@8.2.0/dist/auro-button__bundled.js" type="module"></script>
+</head>
+<body class="auro-markdown">
+<main>
+  <style>
+    .submitBlock {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: flex-end;
+      gap: 1rem;
+    }
+
+    .datepickerBlock {
+      margin-top: 1rem;
+    }
+  </style>
+
+  <h2>auro-form testing</h2>
+  <auro-form>
+    <auro-input id="first-name" name="firstName" required>
+      <span slot="label">First Name</span>
+    </auro-input>
+    <div>
+      <auro-input id="last-name" name="lastName" required>
+        <span slot="label">Last Name</span>
+      </auro-input>
+    </div>
+    <div>
+      <div>
+        <auro-input id="occupation" name="occupation" required>
+          <span slot="label">Occupation</span>
+        </auro-input>
+      </div>
+    </div>
+
+    <div class="datepickerBlock">
+      <h4>Pick a cool date</h4>
+      <auro-datepicker id="date-example" name="dateExample" required>
+        <span slot="fromLabel">Choose a date</span>
+        <span slot="mobileDateLabel">Choose a date</span>
+      </auro-datepicker>
+    </div>
+
+    <div class="submitBlock">
+      <auro-button type="reset">Reset</auro-button>
+      <auro-button type="submit">Submit</auro-button>
+    </div>
+  </auro-form>
+</main>
+
+<script type="module" data-demo-script="true" src="./index.js"></script>
+<script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
+<!--<script type="module" data-demo-script="true" src="~@auro-formkit/auro-input/dist/index.min.js"></script>-->
+
+<!-- If additional elements are needed for the demo, add them here. -->
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+</body>
+</html>