docs: add demo highlight the menu when the combobox value not null

Change to be committed:
new file: apiExamples/highlight.html
modified: docs/partials/index.md

apiExamples/highlight.html

@@ -0,0 +1,16 @@
+<auro-combobox>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menu>
+      <auro-menuoption value="apples" selected>Apples</auro-menuoption>
+      <auro-menuoption value="oranges">Oranges</auro-menuoption>
+      <auro-menuoption value="peaches">Peaches</auro-menuoption>
+    </auro-menu>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>

docs/partials/index.md

@@ -87,6 +87,22 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 
 </auro-accordion>
 
+## Highlight menu option
+
+The `auro-combobox` component supports the use of the highlight `auro-menu` when the value will be match with the list of menu. If you have another logic to highlight the menu ase on your needed u can set the `auro-menuoption` to have attribute `selected` to set the highlight.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/highlight.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/highlight.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Additional Use Case Examples
 
 #### Swapping Values Between Comboboxes