@aurodesignsystem-dev/auro-formkit 0.0.0-pr1040.0 → 0.0.0-pr1043.0

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

@@ -4505,6 +4505,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10356,6 +10364,14 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15825,6 +15841,14 @@ let AuroElement$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16650,7 +16674,7 @@ class AuroCombobox extends AuroElement$1 {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16815,7 +16839,7 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
@@ -16895,7 +16919,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16935,7 +16959,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -17056,7 +17080,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

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

@@ -4363,6 +4363,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10214,6 +10222,14 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15683,6 +15699,14 @@ let AuroElement$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16508,7 +16532,7 @@ class AuroCombobox extends AuroElement$1 {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16673,7 +16697,7 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
@@ -16753,7 +16777,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16793,7 +16817,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16914,7 +16938,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/index.js

@@ -4294,6 +4294,14 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10132,6 +10140,14 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15601,6 +15617,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16426,7 +16450,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16591,7 +16615,7 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
@@ -16671,7 +16695,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16711,7 +16735,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16832,7 +16856,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/registered.js

@@ -4294,6 +4294,14 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10132,6 +10140,14 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15601,6 +15617,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16426,7 +16450,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16591,7 +16615,7 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
@@ -16671,7 +16695,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16711,7 +16735,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16832,7 +16856,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

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

@@ -6526,6 +6526,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9510,6 +9518,14 @@ class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -6526,6 +6526,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9510,6 +9518,14 @@ class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/counter/dist/index.js

@@ -6479,6 +6479,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9463,6 +9471,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/counter/dist/registered.js

@@ -6479,6 +6479,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9463,6 +9471,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/datepicker/demo/api.md

@@ -12,6 +12,7 @@
 | [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
 | [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
 | [centralDate](#centralDate)                     | `centralDate`                     |           | `string`   |                                                  | The date that determines the currently visible month. |
+| [componentHasFocus](#componentHasFocus)               |                                   | readonly  | `boolean`  |                                                  | Returns true if the element has focus.           |
 | [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |

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

@@ -17947,6 +17947,14 @@ let AuroElement$4 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -23798,6 +23806,14 @@ let AuroElement$2 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -27526,6 +27542,14 @@ let AuroElement$1 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -17688,6 +17688,14 @@ let AuroElement$4 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -23539,6 +23547,14 @@ let AuroElement$2 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -27267,6 +27283,14 @@ let AuroElement$1 = class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/datepicker/dist/index.js

@@ -17637,6 +17637,14 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -23475,6 +23483,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -27203,6 +27219,14 @@ let AuroElement$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/datepicker/dist/registered.js

@@ -17637,6 +17637,14 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -23475,6 +23483,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -27203,6 +27219,14 @@ let AuroElement$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -3467,6 +3467,14 @@ class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -3442,6 +3442,14 @@ class AuroElement extends i {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/dropdown/dist/index.js

@@ -3395,6 +3395,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/dropdown/dist/registered.js

@@ -3395,6 +3395,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -5034,6 +5034,14 @@ let AuroElement$2 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -4959,6 +4959,14 @@ let AuroElement$2 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/input/dist/index.js

@@ -4883,6 +4883,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/input/dist/registered.js

@@ -4883,6 +4883,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/layoutElement/dist/auroElement.d.ts

@@ -25,6 +25,11 @@ export class AuroElement extends LitElement {
             reflect: boolean;
         };
     };
+    /**
+     * Returns true if the element has focus.
+     * @returns {boolean} - Returns true if the element has focus.
+     */
+    get componentHasFocus(): boolean;
     resetShapeClasses(): void;
     resetLayoutClasses(): void;
     updateComponentArchitecture(): void;

package/components/layoutElement/dist/index.js

@@ -34,6 +34,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/layoutElement/dist/registered.js

@@ -34,6 +34,14 @@ class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -104,6 +104,14 @@ let AuroElement$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -64,6 +64,14 @@ let AuroElement$1 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/menu/dist/index.js

@@ -43,6 +43,14 @@ let AuroElement$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/menu/dist/registered.js

@@ -43,6 +43,14 @@ let AuroElement$1 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -248,8 +248,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1801,8 +1801,10 @@ class AuroRadioGroup extends i$2 {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

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

@@ -223,8 +223,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1776,8 +1776,10 @@ class AuroRadioGroup extends i$2 {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

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

@@ -71,8 +71,8 @@ export class AuroRadio extends LitElement {
             attribute: boolean;
         };
         /**
+         * Don't add to api.md since changing of this can easily break a11y.
          * @private
-         * not to add to api.md since changing of this can easily break a11y.
          */
         role: {
             type: StringConstructor;

package/components/radio/dist/index.js

@@ -183,8 +183,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1729,8 +1729,10 @@ class AuroRadioGroup extends LitElement {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

package/components/radio/dist/registered.js

@@ -183,8 +183,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1729,8 +1729,10 @@ class AuroRadioGroup extends LitElement {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

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

@@ -170,6 +170,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -4531,6 +4539,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -78,6 +78,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -4439,6 +4447,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/select/dist/index.js

@@ -38,6 +38,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -4393,6 +4401,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/select/dist/registered.js

@@ -38,6 +38,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -4393,6 +4401,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1040.0",
+  "version": "0.0.0-pr1043.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {