@aurodesignsystem-dev/auro-formkit 0.0.0-pr784.0 → 0.0.0-pr785.0

package/components/combobox/dist/registered.js

@@ -749,24 +749,13 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2588,7 +2577,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -2800,7 +2789,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -2988,7 +2977,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -9977,24 +9966,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -10818,9 +10796,9 @@ class BaseInput extends AuroElement$2$1 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -10945,9 +10923,9 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
-    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
+    this.notifyValueChanged();
   }
 
   /**
@@ -11042,20 +11020,13 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
-   * Resets component to initial state, including resetting the touched state and validity.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
-  /**
-   * Clears the input value
-   */
-  clear() {
-    this.value = undefined;
-  }
-
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -16399,7 +16370,7 @@ class AuroCombobox extends AuroElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16419,7 +16390,7 @@ class AuroCombobox extends AuroElement {
     });
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the datepicker.
      */
     this.addEventListener('focusout', () => {
       if (document.activeElement !== this) {
@@ -16624,16 +16595,7 @@ class AuroCombobox extends AuroElement {
    */
   reset() {
     this.input.reset();
-    this.menu.value = undefined;
     this.validation.reset(this);
-  }
-
-  /**
-   * Clears the current value of the combobox.
-   * @returns {void}
-   */
-  clear() {
-    this.input.clear();
     this.menu.value = undefined;
   }
 
@@ -16659,7 +16621,7 @@ class AuroCombobox extends AuroElement {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }
 

package/components/counter/demo/api.html

@@ -16,24 +16,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-counter</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-counter 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/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
-</head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 

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

@@ -2281,24 +2281,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4759,7 +4748,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4971,7 +4960,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -5159,7 +5148,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {

package/components/counter/demo/index.html

@@ -16,24 +16,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-counter</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-counter 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/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
-</head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 

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

@@ -2281,24 +2281,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4759,7 +4748,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4971,7 +4960,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -5159,7 +5148,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {

package/components/counter/demo/readme.html

@@ -16,24 +16,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-counter</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-counter 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/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
-</head>
+  </head>
   <body class="auro-markdown">
     <main></main>
 

package/components/counter/dist/index.js

@@ -2234,24 +2234,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4712,7 +4701,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4924,7 +4913,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -5112,7 +5101,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {

package/components/counter/dist/registered.js

@@ -2234,24 +2234,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4712,7 +4701,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4924,7 +4913,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -5112,7 +5101,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {

package/components/datepicker/demo/api.html

@@ -16,24 +16,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-datepicker</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-datepicker 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/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
-</head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 

package/components/datepicker/demo/api.md

@@ -50,13 +50,12 @@
 
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
-| [clear](#clear)                       | `(): void`                             | Clears the current value(s) of the datepicker.   |
 | [focus](#focus)                       | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [formatShortDate](#formatShortDate)             | `(date: any): string`                  | Simple formatter that ONLY WORKS FOR US DATES.<br />Returns formatted date like Apr 21 or Dec 25.<br /><br />**date**: undefined |
 | [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |
 | [renderHtmlInputs](#renderHtmlInputs)            | `(): TemplateResult`                   |                                                  |
-| [renderLayoutFromAttributes](#renderLayoutFromAttributes)  | `(): TemplateResult`                   |                                                  |
 | [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
 | [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
 | [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |