@aurodesignsystem-dev/auro-formkit 0.0.0-pr1101.1 → 0.0.0-pr1104.1

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

@@ -1142,12 +1142,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

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

@@ -1134,12 +1134,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/checkbox/dist/index.js

@@ -1087,12 +1087,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/checkbox/dist/registered.js

@@ -1087,12 +1087,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/combobox/demo/api.js

@@ -1,6 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
+import { setupExternalSelectionExample } from '../apiExamples/externalSelection.js';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
 import { inDialogExample } from '../apiExamples/inDialog';
@@ -24,6 +25,7 @@ export function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    setupExternalSelectionExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/combobox/demo/api.md

@@ -381,6 +381,67 @@ export async function dynamicMenuExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Updating Externally
+
+This example demonstrates using the <code>updateActiveOption</code> method to set a specific menu option as "active."
+
+This is useful for situations like matching IATA codes (sea -> SeaTac airport) 
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/externalSelection.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/externalSelection.html -->
+  <p style="color: white;">
+      Type 'a' in the combobox for best testing results :)
+  </p>
+  <auro-combobox id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
+    <span slot="ariaLabel.bib.close">Close combobox</span>
+    <span slot="ariaLabel.input.clear">Clear All</span>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/externalSelection.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/externalSelection.html -->
+
+```html
+<p style="color: white;">
+    Type 'a' in the combobox for best testing results :)
+</p>
+<auro-combobox id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
+  <span slot="ariaLabel.bib.close">Close combobox</span>
+  <span slot="ariaLabel.input.clear">Clear All</span>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Property Examples
 
 #### disabled

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

@@ -141,84 +141,6 @@ async function dynamicMenuExample() {
   }
 }
 
-function valueExample() {
-  const valueExample = document.querySelector('#valueExample');
-
-  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Oranges';
-  });
-
-  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Dragon Fruit';
-  });
-
-  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
-    valueExample.value = undefined;
-  });
-}
-
-function focusExample() {
-  const focusExample = document.querySelector('#focusExample');
-  const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
-
-  focusExampleBtnElem.addEventListener('click', () => {
-    focusExample.focus();
-  });
-}
-
-function inDialogExample() {
-  document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
-    const dialog = document.querySelector("#combobox-dialog");
-    dialog.open = true;
-  });
-}
-
-function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
-    elem.reset();
-  });
-}
-
-function auroMenuLoadingExample() {
-  const combobox = document.querySelector("#loadingExample");
-  const menu = document.querySelector("#loadingExampleComboboxMenu");
-
-  const emptyMenu = () => {
-    const menuoptions = menu.querySelectorAll('auro-menuoption');
-    menuoptions.forEach(mo => menu.removeChild(mo));
-  };
-
-  const fillMenu = () => {
-    menu.innerHTML += `
-      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-      <auro-menuoption static nomatch>No matching option</auro-menuoption>
-    `;
-  };
-
-  const load = () => {
-    clearTimeout(load.id);
-    emptyMenu();
-    menu.setAttribute('loading', 'loading');
-    load.id = setTimeout(() => {
-      menu.removeAttribute('loading');
-      fillMenu();
-    }, 1000);
-
-  };
-
-  combobox.addEventListener("inputValue", (e) => {
-    if (e.target.inputValue && e.target.value !== e.target.inputValue) {
-      load();
-    }
-  });
-}
-
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -1078,12 +1000,23 @@ let AuroFormValidation$1 = class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10344,12 +10277,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -16990,6 +16934,7 @@ class AuroCombobox extends AuroElement$1 {
       // current focus is on a menuoption, after clicking on it.
       if (this.persistInput && focusedEl && (focusedEl.tagName.toLowerCase() === 'auro-menuoption' || focusedEl.hasAttribute('auro-menuoption'))) {
         this.setClearBtnFocus();
+        this.validate(true);
       }
     }
   }
@@ -17612,6 +17557,102 @@ class AuroCombobox extends AuroElement$1 {
   }
 }
 
+/**
+ * Sets up demo  external selection in the combobox.
+ */
+function setupExternalSelectionExample() {
+
+  /** @type {AuroCombobox} */
+  const combobox = document.getElementById('externalSelectionExample');
+
+  combobox.addEventListener('input', () => {
+    // Perform whatever matching logic you need here
+
+    // This comes from your custom code, for example matching SEA to SeaTac IATA code.
+    // This matches "peaches" as configured.
+    const matchingMenuOption = 2;
+    combobox.updateActiveOption(matchingMenuOption);
+  });
+}
+
+function valueExample() {
+  const valueExample = document.querySelector('#valueExample');
+
+  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
+    valueExample.value = 'Oranges';
+  });
+
+  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
+    valueExample.value = 'Dragon Fruit';
+  });
+
+  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
+    valueExample.value = undefined;
+  });
+}
+
+function focusExample() {
+  const focusExample = document.querySelector('#focusExample');
+  const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
+
+  focusExampleBtnElem.addEventListener('click', () => {
+    focusExample.focus();
+  });
+}
+
+function inDialogExample() {
+  document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
+    const dialog = document.querySelector("#combobox-dialog");
+    dialog.open = true;
+  });
+}
+
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
+function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  };
+
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  };
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  };
+
+  combobox.addEventListener("inputValue", (e) => {
+    if (e.target.inputValue && e.target.value !== e.target.inputValue) {
+      load();
+    }
+  });
+}
+
 var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{display:block;vertical-align:middle;line-height:0}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
@@ -18228,6 +18269,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;
@@ -19105,6 +19149,7 @@ function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    setupExternalSelectionExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

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

@@ -880,12 +880,23 @@ let AuroFormValidation$1 = class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10146,12 +10157,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -16792,6 +16814,7 @@ class AuroCombobox extends AuroElement$1 {
       // current focus is on a menuoption, after clicking on it.
       if (this.persistInput && focusedEl && (focusedEl.tagName.toLowerCase() === 'auro-menuoption' || focusedEl.hasAttribute('auro-menuoption'))) {
         this.setClearBtnFocus();
+        this.validate(true);
       }
     }
   }
@@ -18030,6 +18053,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;

package/components/combobox/dist/index.js

@@ -818,12 +818,23 @@ let AuroFormValidation$1 = class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10053,12 +10064,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -16699,6 +16721,7 @@ class AuroCombobox extends AuroElement {
       // current focus is on a menuoption, after clicking on it.
       if (this.persistInput && focusedEl && (focusedEl.tagName.toLowerCase() === 'auro-menuoption' || focusedEl.hasAttribute('auro-menuoption'))) {
         this.setClearBtnFocus();
+        this.validate(true);
       }
     }
   }