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

package/components/form/dist/auro-form.d.ts

@@ -1,3 +1,13 @@
+/**
+ * @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.
+ */
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
  *
@@ -6,10 +16,12 @@
  */
 export class AuroForm extends LitElement {
     static get properties(): {
-        cssClass: {
-            type: StringConstructor;
+        _formState: {
+            attribute: boolean;
         };
     };
+    static get formElementTags(): string[];
+    static get submitElementTags(): string[];
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
@@ -20,7 +32,76 @@ export class AuroForm extends LitElement {
      *
      */
     static register(name?: string): void;
+    /** @type {FormState} */
+    _formState: FormState;
+    /**
+     * 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
+     */
+    private _isInElementCollection;
+    /**
+     * Check if the tag name is a form element.
+     * @param {HTMLElement} element - The element to check (attr or tag name).
+     * @returns {boolean}
+     */
+    isFormElement(element: HTMLElement): boolean;
+    /**
+     * Check if the tag name is a submit element.
+     * @param {HTMLElement} element - The element to check.
+     * @returns {boolean}
+     */
+    isSubmitElement(element: HTMLElement): boolean;
+    /**
+     * 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(): Record<string, string | number | boolean | string[] | null>;
+    get validity(): "valid" | "invalid";
+    get isInitialState(): boolean;
+    getSubmitFunction(): (event: any) => void;
+    /**
+     * Construct the query strings from elements, append them together, execute, and return the NodeList.
+     * @returns {NodeList}
+     */
+    queryAuroElements(): NodeList;
+    firstUpdated(_changedProperties: any): void;
+    onSlotChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+/**
+ * - The form state member.
+ */
+export type FormStateMember = {
+    /**
+     * - The value of the form element.
+     */
+    value: string | number | boolean | string[] | null;
+    /**
+     * - The validity state of the form element, stored when fired from the form element.
+     */
+    validity: ValidityState;
+    /**
+     * - Whether the form element is required or not.
+     */
+    required: boolean;
+    /**
+     * - Whether the form element is required or not.
+     */
+    element: HTMLElement;
+};
+/**
+ * - The form state.
+ */
+export type FormState = {
+    [x: string]: FormStateMember;
+};
 import { LitElement } from "lit";
 //# sourceMappingURL=auro-form.d.ts.map

package/components/form/dist/auro-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAmBA;;;;;GAKG;AAGH;IAQE;;;;MAOC;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAMD,+CAQC;CACF;2BAnEgC,KAAK"}
+{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;MAIC;IAWD,uCAOC;IAsBD,yCAKC;IAWD,+CAEC;IAsED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArIC,wBAAwB;IACxB,YADW,SAAS,CACA;IActB;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED,oCAYC;IAGD,8BAIC;IAED,0CAYC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAapB;IAcD,4CAqBC;IAED,qBAkBC;IAGD,+CASC;CACF;;;;;;;;WA3Na,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}

package/components/form/dist/index.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/package.json

@@ -26,6 +26,8 @@
     "@auro-formkit/build-tools": "*",
     "@auro-formkit/config": "*",
     "@auro-formkit/typescript": "*",
+    "@aurodesignsystem/auro-datepicker": "*",
+    "@aurodesignsystem/auro-input": "*",
     "@aurodesignsystem/design-tokens": "^4.12.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -58,7 +60,7 @@
     "bundler": "rollup -c node:@auro-formkit/config/rollup",
     "build:docs": "wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form",
     "clean": "rm -rf dist build",
-    "dev": "web-dev-server",
+    "dev": "web-dev-server --node-resolve",
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",

package/components/form/src/auro-form.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+
 // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -6,16 +8,23 @@
 // If using litElement base class
 import { LitElement, html } from "lit";
 
-// If using auroElement base class
-// See instructions for importing auroElement base class https://git.io/JULq4
-// import { LitElement, html } from "lit";
-// import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
-
-// Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
+/**
+ * @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"
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -26,26 +35,138 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 // build the component class
 export class AuroForm extends LitElement {
-  // 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.
@@ -58,17 +179,58 @@ export class AuroForm extends LitElement {
     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 html`
-
-      <!-- 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/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*: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)}`;
+export default css`*,*: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}`;

package/components/form/src/styles/style.css

@@ -34,3 +34,11 @@
   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;
+}

package/components/form/src/styles/style.scss

@@ -35,3 +35,13 @@
   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;
+  }
+}

package/components/input/.turbo/turbo-build.log

@@ -216,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.6s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 997ms
+created ./demo/ in 698ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 895ms
+created ./demo/ in 910ms
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input