@aurodesignsystem-dev/auro-formkit 0.0.0-pr1048.0 → 0.0.0-pr1052.0

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

@@ -17964,8 +17964,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -17980,6 +17981,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -18613,7 +18621,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

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

@@ -17822,8 +17822,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -17838,6 +17839,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -18471,7 +18479,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

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

@@ -937,8 +937,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -953,6 +954,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -1639,7 +1647,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

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

@@ -897,8 +897,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -913,6 +914,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -1599,7 +1607,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

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

@@ -118,6 +118,7 @@ export class AuroMenu extends AuroElement {
     /**
      * Handles slot change events.
      * @private
+     * @param {Event} evt - slotchange Event.
      */
     private handleSlotChange;
     /**

package/components/menu/dist/auro-menuoption.d.ts

@@ -24,6 +24,7 @@ export class AuroMenuOption extends AuroElement {
         };
         value: {
             type: StringConstructor;
+            reflect: boolean;
         };
         tabIndex: {
             type: NumberConstructor;

package/components/menu/dist/index.js

@@ -904,8 +904,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -920,6 +921,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -1593,7 +1601,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

package/components/menu/dist/registered.js

@@ -863,8 +863,9 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -879,6 +880,13 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -1552,7 +1560,8 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

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

@@ -9751,8 +9751,9 @@ class AuroMenu extends AuroElement$4 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -9767,6 +9768,13 @@ class AuroMenu extends AuroElement$4 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -10400,7 +10408,8 @@ class AuroMenuOption extends AuroElement$4 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

package/components/select/demo/index.md

@@ -389,10 +389,10 @@ The custom display value content is inserted using `slot="displayValue"` on each
 
 The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
 
-<div class="exampleWrapper--ondark">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
   <!-- The below content is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
-  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
     <span slot="label">Select Example</span>
     <auro-menu nocheckmark>
       <auro-menuoption value="flights">
@@ -425,7 +425,7 @@ The following example demonstrates menu options with an icon and text. When sele
 <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
 
 ```html
-<auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
+<auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
   <span slot="label">Select Example</span>
   <auro-menu nocheckmark>
     <auro-menuoption value="flights">

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

@@ -9659,8 +9659,9 @@ class AuroMenu extends AuroElement$4 {
   /**
    * Handles slot change events.
    * @private
+   * @param {Event} evt - slotchange Event.
    */
-  handleSlotChange() {
+  handleSlotChange(evt) {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -9675,6 +9676,13 @@ class AuroMenu extends AuroElement$4 {
         ]
       ]));
     }
+
+    const options = evt.target.assignedElements();
+    options.forEach((opt) => {
+      if (opt.value === this.value) {
+        this.handleSelectState(opt);
+      }
+    });
   }
 
   /**
@@ -10308,7 +10316,8 @@ class AuroMenuOption extends AuroElement$4 {
         reflect: true
       },
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
       tabIndex: {
         type: Number,

package/package.json

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