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

package/components/combobox/demo/api.md

@@ -393,7 +393,7 @@ This is useful for situations like matching IATA codes (sea -> SeaTac airport)
   <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;">
+  <auro-combobox ondark 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>
@@ -421,7 +421,7 @@ This is useful for situations like matching IATA codes (sea -> SeaTac airport)
 <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;">
+<auro-combobox ondark 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>
@@ -440,6 +440,31 @@ This is useful for situations like matching IATA codes (sea -> SeaTac airport)
 </auro-combobox>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/externalSelection.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/externalSelection.js -->
+
+```js
+import { AuroCombobox } from "../src/auro-combobox";
+
+/**
+ * Demonstrates how to make external selection in the combobox.
+ */
+export 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);
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Property Examples

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

@@ -17558,7 +17558,7 @@ class AuroCombobox extends AuroElement$1 {
 }
 
 /**
- * Sets up demo  external selection in the combobox.
+ * Demonstrates how to make external selection in the combobox.
  */
 function setupExternalSelectionExample() {
 

package/package.json

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