@aurodesignsystem/auro-formkit 5.1.0 → 5.1.2

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

@@ -2647,7 +2647,7 @@ let AuroElement$1 = class AuroElement extends i {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -2747,16 +2747,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }
@@ -3462,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

@@ -2622,7 +2622,7 @@ let AuroElement$1 = class AuroElement extends i {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -2722,16 +2722,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }
@@ -3437,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

@@ -2575,7 +2575,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -2675,16 +2675,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }
@@ -3390,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

@@ -2575,7 +2575,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -2675,16 +2675,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }
@@ -3390,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

@@ -4933,16 +4933,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -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');
 
@@ -6265,7 +6273,7 @@ let AuroElement$1 = class AuroElement extends i$2 {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -6365,16 +6373,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }

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

@@ -4858,16 +4858,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -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');
 
@@ -6190,7 +6198,7 @@ let AuroElement$1 = class AuroElement extends i$2 {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -6290,16 +6298,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }

package/components/input/dist/index.js

@@ -4782,16 +4782,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -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');
 
@@ -6114,7 +6122,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -6214,16 +6222,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }

package/components/input/dist/registered.js

@@ -4782,16 +4782,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -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');
 
@@ -6114,7 +6122,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -6214,16 +6222,21 @@ class BaseIcon extends AuroElement$1 {
 
   // lifecycle function
   async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+    try {
+      if (!this.customSvg) {
+        const svg = await this.fetchIcon(this.category, this.name);
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        if (svg) {
+          this.svg = svg;
+        } else if (!svg) {
+          const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-        this.svg = penDOM.body.firstChild;
+          this.svg = penDOM.body.firstChild;
+        }
       }
+    // eslint-disable-next-line no-unused-vars
+    } catch (err) {
+      this.svg = undefined;
     }
   }
 }

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');